Merge branch 'master' into antd-empty-errors-array

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2.4.0
+      uses: actions/setup-node@v2.5.1
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
@@ -71,10 +71,10 @@ jobs:
           name: dist
           path: dist
       - name: Deploy playground
-        uses: crazy-max/ghaction-github-pages@v2.5.0
+        uses: crazy-max/ghaction-github-pages@v2.6.0
         with:
           keep_history: true
-          target-branch: gh-pages
+          target_branch: gh-pages
           build_dir: dist
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -87,7 +87,7 @@ jobs:
   #   steps:
   #     - uses: actions/checkout@v2
   #     - name: Use Node.js 14.x
-  #       uses: actions/setup-node@v2.4.0
+  #       uses: actions/setup-node@v2.5.1
   #       with:
   #         node-version: 14.x
   #     - run: npm ci
@@ -103,7 +103,7 @@ jobs:
     steps:
     - uses: actions/checkout@v2
     - name: Setup Python
-      uses: actions/setup-python@v2.2.2
+      uses: actions/setup-python@v2.3.1
       with:
         python-version: 3.6
     - run: pip install -r requirements.docs.txt

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 14.x
-        uses: actions/setup-node@v2.4.0
+        uses: actions/setup-node@v2.5.1
         with:
           node-version: 14.x
       - run: npm ci

.gitignore

@@ -131,4 +131,5 @@ yarn.lock
 coverage
 .nyc_output
 
-venv
+venv
+*.orig

.node-version

@@ -0,0 +1 @@
+14

.nvmrc

@@ -0,0 +1 @@
+14

CHANGELOG.md

@@ -15,15 +15,56 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# v4.0.1 (upcoming)
 
-# v3.2.0 (upcoming)
+# v4.0.0
+
+## @rjsf/core
+- Add React 17 as a supported peer-dependency
+- Introduce `idSeparator` prop to change the path separator used to generate field names (https://github.com/rjsf-team/react-jsonschema-form/pull/2628)
+- Array fields support custom widgets (previously, only multiple-choice arrays with `enums` or `uniqueItems` support it) (https://github.com/rjsf-team/react-jsonschema-form/pull/2697)
+
+## @rjsf/material-ui
+- Added React 17 as an optional peer dependency
+- Minimum version of React required to use package is now React 16.3
+- Bumped required minimum versions of `@material-ui/core` and `@material-ui/icons` to the latest (`4.12.0` and `4.11.1`)
+  - New exports: `MuiForm4` and `Theme4` are aliases to the material-ui version 4 `MuiForm` and `Theme`
+  - The Material-UI 4 theme will fallback to a form with a message indicating `@material-ui` is not available when one (or both) of the libraries are not installed
+- Added support for material-ui version 5 on top of React 17
+  - Requires React 17 so will need to upgrade project
+  - Added `@mui/material`, `@mui/icons-material`, `@emotion/react` and `@emotion/styled` as optional peer dependencies
+  - New exports: `MuiForm5` and `Theme5` support using the Material UI 5 libraries instead of version 4
+  - The Material-UI 5 theme will fallback to a form with a message indicating `@mui` is not available when one (or both) of the libraries are not installed
+
+## @rjsf/chakra-ui
+- Added support for this new theme
+
+## Dev / docs / playground
+- Upgraded playground to use React 17
+- Differentiated the material-ui 4 and 5 themes
+- Added chakra-ui theme
+
+# v3.3.0
+
+## @rjsf/semantic-ui
+- "semantic-ui-react" dependency updated to v1.3.1 (https://github.com/rjsf-team/react-jsonschema-form/pull/2590)
+- fixed an issue where all semantic props overwritten when a single [semantic theme-specific prop](https://react-jsonschema-form.readthedocs.io/en/latest/api-reference/themes/semantic-ui/uiSchema/) is passed in ([issue 2619](https://github.com/rjsf-team/react-jsonschema-form/issues/2619)) (https://github.com/rjsf-team/react-jsonschema-form/pull/2590)
+
+# v3.2.1
+
+## @rjsf/core
+- Don't crash when non-object formData is passed in to a schema item with additionalProperties (https://github.com/rjsf-team/react-jsonschema-form/pull/2595)
+- Upgrade jsonpointer to 5.0.0 to address security vulnerability (https://github.com/rjsf-team/react-jsonschema-form/pull/2599)
+
+
+# v3.2.0
 
 ## @rjsf/core
 - Fix for clearing errors after updating and submitting form (https://github.com/rjsf-team/react-jsonschema-form/pull/2536)
 - bootstrap-4 TextWidget wrappers now pull from registry, add rootSchema to Registry, fix FieldProps.onFocus type to match WidgetProps (https://github.com/rjsf-team/react-jsonschema-form/pull/2519)
 - Added global `readonly` flag to the `Form` (https://github.com/rjsf-team/react-jsonschema-form/pull/2554)
 - Fix to allow changing `additionalProperties` to falsy values (https://github.com/rjsf-team/react-jsonschema-form/pull/2540)
-
+- Pass uiSchema to custom Boolean widget (https://github.com/rjsf-team/react-jsonschema-form/pull/2587
 ## @rjsf/bootstrap-4
 - bootstrap-4 TextWidget wrappers now pull from registry, add rootSchema to Registry, fix FieldProps.onFocus type to match WidgetProps (https://github.com/rjsf-team/react-jsonschema-form/pull/2519)
 
@@ -33,6 +74,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## Dev / docs / playground
 - Several dependency updates
 - Added global `readonly` flag to the `Form` (https://github.com/rjsf-team/react-jsonschema-form/pull/2554)
+- Enable source maps in playground, for development (https://github.com/rjsf-team/react-jsonschema-form/pull/2568)
 
 # v3.1.1 (upcoming)
 
@@ -46,7 +88,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Take into account implicitly defined types when rendering labels for fields (https://github.com/rjsf-team/react-jsonschema-form/pull/2502)
 
 ## @rjsf/antd
-- Add default Form export to @rjsf/antd (https://github.com/rjsf-team/react-jsonschema-form/pull/2514) 
+- Add default Form export to @rjsf/antd (https://github.com/rjsf-team/react-jsonschema-form/pull/2514)
 
 ## @rjsf/fluent-ui
 - Make material-ui and fluent-ui pull TextWidget from the registry; remove registry prop from <div> in TextWidget (https://github.com/rjsf-team/react-jsonschema-form/pull/2515)

PULL_REQUEST_TEMPLATE.md

@@ -4,6 +4,8 @@
 
 If this is related to existing tickets, include links to them as well. Use the syntax `fixes #[issue number]` (ex: `fixes #123`).
 
+If your PR is non-trivial and you'd like to schedule a synchronous review, please add it to the weekly meeting agenda: https://docs.google.com/document/d/12PjTvv21k6LIky6bNQVnsplMLLnmEuypTLQF8a-8Wss/edit
+
 ### Checklist
 
 * [ ] **I'm updating documentation**

README.md

@@ -2,7 +2,6 @@
 [![Contributors][contributors-shield]][contributors-url]
 [![Apache 2.0 License][license-shield]][license-url]
 
-
 <p align="center">
   <a href="https://github.com/rjsf-team/react-jsonschema-form">
     <img src="https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/core/logo.png" alt="Logo" width="180" height="120">
@@ -26,31 +25,34 @@
 
 [![playground animation](https://i.imgur.com/M8ZCES5.gif)](https://rjsf-team.github.io/react-jsonschema-form/)
 
-
 ## Supported Themes
 
 - [Ant Design](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/antd)
 - [Bootstrap 3](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/core)
 - [Bootstrap 4](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/bootstrap-4)
 - [Fluent UI](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/fluent-ui)
-- [Material UI](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/material-ui)
+- [Material UI 4](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/material-ui)
+- [Material UI 5](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/material-ui)
 - [Semantic UI](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/semantic-ui)
+- [Chakra UI](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/chakra-ui)
 
 ## Documentation
+
 Read our [documentation](https://react-jsonschema-form.readthedocs.io/en/latest/) on Read the Docs.
 
 ## Live Playground
+
 A [live playground](https://rjsf-team.github.io/react-jsonschema-form/) is hosted on gh-pages.
 
 ## Contributing
+
 Read our [contributors' guide](https://react-jsonschema-form.readthedocs.io/en/latest/contributing/) to get started.
 
 ## Credits
 
 Testing powered by BrowserStack<br>
 <a target="_blank" href="https://www.browserstack.com/"><img width="200" src="https://user-images.githubusercontent.com/1689183/51487090-4ea04f80-1d57-11e9-9a91-79b7ef8d2013.png"></a>
 
-
 [build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg
 [build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions
 [contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg

docs/4.x upgrade guide.md

@@ -0,0 +1,11 @@
+# 4.x Upgrade Guide
+
+## Breaking changes
+
+### React version
+
+No longer actively supporting React version < 16.3. The minimum supported version of React is now 16.3. [Discussion can be found here](https://github.com/rjsf-team/react-jsonschema-form/pull/2605#discussion_r792685354)
+
+### @rjsf/material-ui package - Minimum version of material-ui 4
+
+If you are using the material-ui 4 theme, @material-ui/core and @material-ui/icons packages should be updated to the latest versions. The minimum versions supported for @material-ui/core and @material-ui/icons are 4.12.0 and 4.11.1 respectively. This change is required for [support for the material-ui version 5 theme](https://github.com/rjsf-team/react-jsonschema-form/tree/master/packages/material-ui)

docs/advanced-customization/custom-templates.md

@@ -12,8 +12,9 @@ _ | Custom Field  | Custom Template | Custom Widget
 
 ## ArrayFieldTemplate
 
-You can use an `ArrayFieldTemplate` to customize how your arrays are rendered.
-This allows you to customize your array, and each element in the array.
+You can use an `ArrayFieldTemplate` to customize how your arrays are rendered. 
+This allows you to customize your array, and each element in the array. You can also customize arrays by specifying a widget in the relevant `ui:widget` schema, more details over on [Custom Widgets](../usage/arrays.md#custom-widgets). 
+
 
 ```jsx
 const schema = {

docs/advanced-customization/custom-widgets-fields.md

@@ -94,6 +94,7 @@ You can provide your own custom widgets to a uiSchema for the following json dat
 - `number`
 - `integer`
 - `boolean`
+- `array`
 
 ```jsx
 const schema = {

docs/api-reference/form-props.md

@@ -112,6 +112,7 @@ React component used to customize each field of the form. See [Custom Templates]
 ## formContext
 
 You can provide a `formContext` object to the Form, which is passed down to all fields and widgets. Useful for implementing context aware fields and widgets.
+Setting `{readonlyAsDisabled: false}` on the formContext will make the antd theme treat readOnly fields as disabled.
 
 ## formData
 
@@ -138,6 +139,30 @@ render((
 
 This will render `<input id="rjsf_prefix_key">` instead of `<input id="root_key">`
 
+## idSeparator
+
+To avoid using a path separator that is present in field names, it is possible to change the separator used for ids (the default is `_`).
+
+```jsx
+const schema = {
+  type: "object",
+  properties: {
+    first: {
+      type: "string"
+    }
+  }
+};
+
+render((
+  <Form schema={schema}
+        idSeparator={"/"}/>
+), document.getElementById("app"));
+```
+
+This will render `<input id="root/first">` instead of `<input
+id="root_first">` when rendering `first`.
+
+
 ## liveOmit
 
 If `omitExtraData` and `liveOmit` are both set to true, then extra form data values that are not in any form field will be removed whenever `onChange` is called. Set to `false` by default.

docs/api-reference/themes/chakra-ui/uiSchema.md

@@ -0,0 +1,29 @@
+# uiSchema Options for Chakra-UI
+
+When using `@rjsf/chakra-ui` there are a couple of ways to customize the feel of the form.
+
+## Styling
+
+You can use `ChakraProvider`, where you can customize the components at a theme level.\
+And, `uiSchema` allows for the use of a `"chakra"` `"ui:option"` to customize the styling of the form widgets.
+
+```json
+{
+  "ui:options": {
+    "chakra": {
+      "p": "1rem",
+      "color": "blue.200",
+      "sx": {
+        "margin": "0 auto"
+      }
+    }
+  }
+}
+```
+
+It accepts the theme accessible [style props](https://chakra-ui.com/docs/features/style-props) provided by [Chakra](https://chakra-ui.com/docs/getting-started) and [Emotion](https://emotion.sh/docs/introduction).
+
+### Limitations
+
+- The `chakra` option is only available for the Chakra-UI theme.
+- The props are given to the parent component in the individual widget. To pass styles to the inner components, use the [`sx` prop](https://chakra-ui.com/docs/features/the-sx-prop).

docs/contributing.md

@@ -64,7 +64,9 @@ Docs are automatically released using [Read The Docs](https://readthedocs.org/)
 
 ### Releasing the playground
 
-In order to publish the latest playground to [https://rjsf-team.github.io/react-jsonschema-form/](https://rjsf-team.github.io/react-jsonschema-form/) after a new rjsf release, run:
+The playground automatically gets deployed from GitHub Pages.
+
+If you need to manually publish the latest playground to [https://rjsf-team.github.io/react-jsonschema-form/](https://rjsf-team.github.io/react-jsonschema-form/), though, run:
 
 ```bash
 cd packages/playground

docs/usage/arrays.md

@@ -200,6 +200,43 @@ render((
 ), document.getElementById("app"));
 ```
 
+## Custom widgets
+
+In addition to [ArrayFieldTemplate](../advanced-customization/custom-templates.md#arrayfieldtemplate) you use your own widget by providing it to the uiSchema with the property of `ui:widget`. 
+
+Example: 
+
+```jsx
+const CustomSelectComponent = props => {
+  return (
+    <select>
+      {props.value.map((item, index) => (
+        <option key={index} id="custom-select">
+          {item}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+const schema = {
+  type: "array",
+  title: "A multiple-choice list",
+  items: {
+    type: "string",
+  },
+};
+
+const uiSchema = {
+  "ui:widget": "CustomSelect"
+};
+
+const widgets = {
+  CustomSelect: CustomSelectComponent,
+},
+
+render((<Form schema={schema} uiSchema={uiSchema} widgets={widgets} />), document.getElementById("app"));
+```
 
 ## Specifying the minimum or maximum number of items
 

docs/usage/themes.md

@@ -5,15 +5,15 @@ meaning that you must load the Bootstrap stylesheet on the page to view the form
 
 ## Supported themes
 
- Theme Name | Status | Package Name / Link
- ---------- | ------- | -----------
- Bootstrap 3 (default) | Published | `@rjsf/core`
- Bootstrap 4 | Published | `@rjsf/bootstrap-4`
- material-ui | Published | `@rjsf/material-ui`
- fluent-ui | Published | `@rjsf/fluent-ui`
- antd | Published | `@rjsf/antd`
- Semantic UI | Published | `@rjsf/semantic-ui`
-
+| Theme Name            | Status    | Package Name / Link |
+| --------------------- | --------- | ------------------- |
+| Bootstrap 3 (default) | Published | `@rjsf/core`        |
+| Bootstrap 4           | Published | `@rjsf/bootstrap-4` |
+| material-ui 4 & 5     | Published | `@rjsf/material-ui` |
+| fluent-ui             | Published | `@rjsf/fluent-ui`   |
+| antd                  | Published | `@rjsf/antd`        |
+| Semantic UI           | Published | `@rjsf/semantic-ui` |
+| Chakra UI             | Published | `@rjsf/chakra-ui`   |
 
 ## Using themes
 

lerna.json

@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "3.1.0"
+  "version": "4.0.0"
 }