@rjsf/core 6.0.0-alpha.0 → 6.0.0-beta.2

package/lib/components/RichDescription.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { FormContextType, Registry, RJSFSchema, StrictRJSFSchema, UiSchema } from '@rjsf/utils';
+export interface RichDescriptionProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
+    /** The description text for a field, potentially containing markdown */
+    description: string | ReactElement;
+    /** The uiSchema object for this base component */
+    uiSchema?: UiSchema<T, S, F>;
+    /** The `registry` object */
+    registry: Registry<T, S, F>;
+}
+/** Renders the given `description` in the props as
+ *
+ * @param props - The `RichDescriptionProps` for this component
+ */
+declare function RichDescription<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ description, registry, uiSchema }: RichDescriptionProps<T, S, F>): string | import("react/jsx-runtime").JSX.Element;
+declare namespace RichDescription {
+    var TEST_IDS: import("@rjsf/utils").TestIdShape;
+}
+export default RichDescription;
+//# sourceMappingURL=RichDescription.d.ts.map

package/lib/components/RichDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichDescription.d.ts","sourceRoot":"","sources":["../../src/components/RichDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EACL,eAAe,EACf,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,QAAQ,EAGT,MAAM,aAAa,CAAC;AAKrB,MAAM,WAAW,oBAAoB,CACnC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG;IAE/B,wEAAwE;IACxE,WAAW,EAAE,MAAM,GAAG,YAAY,CAAC;IACnC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7B,4BAA4B;IAC5B,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;CAC7B;AAED;;;GAGG;AACH,iBAAwB,eAAe,CACrC,CAAC,GAAG,GAAG,EACP,CAAC,SAAS,gBAAgB,GAAG,UAAU,EACvC,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/B,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAa,EAAE,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,oDAYxE;kBAhBuB,eAAe;;;eAAf,eAAe"}

package/lib/components/RichDescription.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTestIds, getUiOptions, } from '@rjsf/utils';
+import Markdown from 'markdown-to-jsx';
+const TEST_IDS = getTestIds();
+/** Renders the given `description` in the props as
+ *
+ * @param props - The `RichDescriptionProps` for this component
+ */
+export default function RichDescription({ description, registry, uiSchema = {} }) {
+    const { globalUiOptions } = registry;
+    const uiOptions = getUiOptions(uiSchema, globalUiOptions);
+    if (uiOptions.enableMarkdownInDescription && typeof description === 'string') {
+        return (_jsx(Markdown, { options: { disableParsingRawHTML: true }, "data-testid": TEST_IDS.markdown, children: description }));
+    }
+    return description;
+}
+RichDescription.TEST_IDS = TEST_IDS;

package/lib/components/fields/ArrayField.d.ts

@@ -153,21 +153,31 @@ declare class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F ext
         totalItems: number;
     }): {
         children: import("react/jsx-runtime").JSX.Element;
+        buttonsProps: {
+            idSchema: import("@rjsf/utils").FieldId & (IdSchema<T> | undefined)[];
+            disabled: boolean | undefined;
+            readonly: boolean | undefined;
+            canAdd: boolean;
+            hasCopy: boolean;
+            hasMoveUp: boolean;
+            hasMoveDown: boolean;
+            hasRemove: boolean;
+            index: number;
+            totalItems: number;
+            onAddIndexClick: (index: number) => (event: MouseEvent) => void;
+            onCopyIndexClick: (index: number) => (event: MouseEvent) => void;
+            onDropIndexClick: (index: number) => (event: MouseEvent) => void;
+            onReorderClick: (index: number, newIndex: number) => (event: MouseEvent<HTMLButtonElement>) => void;
+            registry: import("@rjsf/utils").Registry<T[], S, F>;
+            schema: S;
+            uiSchema: UiSchema<T[], S, F>;
+        };
         className: string;
         disabled: boolean | undefined;
-        canAdd: boolean;
-        hasCopy: boolean;
         hasToolbar: boolean;
-        hasMoveUp: boolean;
-        hasMoveDown: boolean;
-        hasRemove: boolean;
         index: number;
         totalItems: number;
         key: string;
-        onAddIndexClick: (index: number) => (event: MouseEvent<Element, globalThis.MouseEvent>) => void;
-        onCopyIndexClick: (index: number) => (event: MouseEvent<Element, globalThis.MouseEvent>) => void;
-        onDropIndexClick: (index: number) => (event: MouseEvent<Element, globalThis.MouseEvent>) => void;
-        onReorderClick: (index: number, newIndex: number) => (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
         readonly: boolean | undefined;
         registry: import("@rjsf/utils").Registry<T[], S, F>;
         schema: S;
@@ -178,3 +188,4 @@ declare class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F ext
  * `Field` which is defined as `React.ComponentType<FieldProps<T, S, F>>`, so cast it to make `registry` happy.
  */
 export default ArrayField;
+//# sourceMappingURL=ArrayField.d.ts.map

package/lib/components/fields/ArrayField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/ArrayField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EASL,WAAW,EACX,UAAU,EACV,eAAe,EACf,QAAQ,EACR,UAAU,EACV,gBAAgB,EAEhB,QAAQ,EAET,MAAM,aAAa,CAAC;AAOrB,mEAAmE;AACnE,KAAK,iBAAiB,CAAC,CAAC,IAAI;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAErD,4DAA4D;AAC5D,KAAK,eAAe,CAAC,CAAC,IAAI;IACxB,mCAAmC;IACnC,aAAa,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IACtC,0EAA0E;IAC1E,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAmCF;;GAEG;AACH,cAAM,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,CAAE,SAAQ,SAAS,CACnH,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EACrB,eAAe,CAAC,CAAC,CAAC,CACnB;IACC;;;OAGG;gBACS,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC;IAUxC;;;;;OAKG;IACH,MAAM,CAAC,wBAAwB,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EAC/G,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAC1C,SAAS,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;;;;;;;IAwBzC;;OAEG;IACH,IAAI,SAAS,QAQZ;IAED;;;;;OAKG;IACH,cAAc,CAAC,UAAU,EAAE,CAAC;IAU5B;;;;;;OAMG;IACH,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE;IAe3B;;OAEG;IACH,kBAAkB,QAAO,CAAC,CASxB;IAEF;;;;;;OAMG;IACH,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM;IAwCjD;;;;;OAKG;IACH,UAAU,GAAI,OAAO,UAAU,UAE7B;IAEF;;;;;OAKG;IACH,eAAe,GAAI,OAAO,MAAM,MACtB,OAAO,UAAU,UAGzB;IAEF;;;;;OAKG;IACH,gBAAgB,GAAI,OAAO,MAAM,MACvB,OAAO,UAAU,UAuCzB;IAEF;;;;;OAKG;IACH,gBAAgB,GAAI,OAAO,MAAM,MACvB,OAAO,UAAU,UA4BzB;IAEF;;;;;;OAMG;IACH,cAAc,GAAI,OAAO,MAAM,EAAE,UAAU,MAAM,MACvC,OAAO,UAAU,CAAC,iBAAiB,CAAC,UAwC5C;IAEF;;;;OAIG;IACH,gBAAgB,GAAI,OAAO,MAAM,MACvB,OAAO,GAAG,EAAE,iBAAiB,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,UAmBhE;IAEF,+DAA+D;IAC/D,cAAc,GAAI,OAAO,GAAG,UAG1B;IAEF;OACG;IACH,MAAM;IAoCN;OACG;IACH,iBAAiB;IA4EjB;OACG;IACH,kBAAkB;IAkDlB;OACG;IACH,iBAAiB;IAkDjB;OACG;IACH,WAAW;IA8CX;OACG;IACH,gBAAgB;IAsGhB;;;;OAIG;IACH,oBAAoB,CAAC,KAAK,EAAE;QAC1B,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAC1B,MAAM,EAAE,OAAO,CAAC;QAChB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,SAAS,EAAE,OAAO,CAAC;QACnB,WAAW,EAAE,OAAO,CAAC;QACrB,UAAU,EAAE,CAAC,CAAC;QACd,QAAQ,EAAE,CAAC,EAAE,CAAC;QACd,YAAY,EAAE,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAClC,YAAY,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;QAC5B,eAAe,CAAC,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;QACnC,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,MAAM,EAAE,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QACxC,OAAO,EAAE,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC1C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;KACpB;;;;;;;;;;;;;qCA1jByB,MAAM,MACtB,OAAO,UAAU;sCAWA,MAAM,MACvB,OAAO,UAAU;sCA+CA,MAAM,MACvB,OAAO,UAAU;oCAqCF,MAAM,YAAY,MAAM,MACvC,OAAO,UAAU,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;CAqjB/C;AAED;;GAEG;AACH,eAAe,UAAU,CAAC"}

package/lib/components/fields/ArrayField.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import { getTemplate, getWidget, getUiOptions, isFixedItems, allowAdditionalItems, isCustomWidget, optionsList, TranslatableString, ITEMS_KEY, } from '@rjsf/utils';
-import cloneDeep from 'lodash/cloneDeep';
-import get from 'lodash/get';
-import isObject from 'lodash/isObject';
-import set from 'lodash/set';
+import cloneDeep from 'lodash-es/cloneDeep.js';
+import get from 'lodash-es/get.js';
+import isObject from 'lodash-es/isObject.js';
+import set from 'lodash-es/set.js';
 import { nanoid } from 'nanoid';
 /** Used to generate a unique ID for an element in a row */
 function generateRowId() {
@@ -46,189 +46,6 @@ class ArrayField extends Component {
      */
     constructor(props) {
         super(props);
-        /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
-         * that the schema is fixed and allows additional items.
-         */
-        this._getNewFormDataRow = () => {
-            const { schema, registry } = this.props;
-            const { schemaUtils } = registry;
-            let itemSchema = schema.items;
-            if (isFixedItems(schema) && allowAdditionalItems(schema)) {
-                itemSchema = schema.additionalItems;
-            }
-            // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], S, F> call on the class
-            return schemaUtils.getDefaultFormState(itemSchema);
-        };
-        /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
-         * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
-         * keyed data
-         *
-         * @param event - The event for the click
-         */
-        this.onAddClick = (event) => {
-            this._handleAddClick(event);
-        };
-        /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
-         * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
-         * form data converted from the keyed data
-         *
-         * @param index - The index at which the add button is clicked
-         */
-        this.onAddIndexClick = (index) => {
-            return (event) => {
-                this._handleAddClick(event, index);
-            };
-        };
-        /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
-         * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
-         * form data converted from the keyed data
-         *
-         * @param index - The index at which the copy button is clicked
-         */
-        this.onCopyIndexClick = (index) => {
-            return (event) => {
-                if (event) {
-                    event.preventDefault();
-                }
-                const { onChange, errorSchema } = this.props;
-                const { keyedFormData } = this.state;
-                // refs #195: revalidate to ensure properly reindexing errors
-                let newErrorSchema;
-                if (errorSchema) {
-                    newErrorSchema = {};
-                    for (const idx in errorSchema) {
-                        const i = parseInt(idx);
-                        if (i <= index) {
-                            set(newErrorSchema, [i], errorSchema[idx]);
-                        }
-                        else if (i > index) {
-                            set(newErrorSchema, [i + 1], errorSchema[idx]);
-                        }
-                    }
-                }
-                const newKeyedFormDataRow = {
-                    key: generateRowId(),
-                    item: cloneDeep(keyedFormData[index].item),
-                };
-                const newKeyedFormData = [...keyedFormData];
-                if (index !== undefined) {
-                    newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
-                }
-                else {
-                    newKeyedFormData.push(newKeyedFormDataRow);
-                }
-                this.setState({
-                    keyedFormData: newKeyedFormData,
-                    updatedKeyedFormData: true,
-                }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
-            };
-        };
-        /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
-         * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
-         * from the keyed data
-         *
-         * @param index - The index at which the remove button is clicked
-         */
-        this.onDropIndexClick = (index) => {
-            return (event) => {
-                if (event) {
-                    event.preventDefault();
-                }
-                const { onChange, errorSchema } = this.props;
-                const { keyedFormData } = this.state;
-                // refs #195: revalidate to ensure properly reindexing errors
-                let newErrorSchema;
-                if (errorSchema) {
-                    newErrorSchema = {};
-                    for (const idx in errorSchema) {
-                        const i = parseInt(idx);
-                        if (i < index) {
-                            set(newErrorSchema, [i], errorSchema[idx]);
-                        }
-                        else if (i > index) {
-                            set(newErrorSchema, [i - 1], errorSchema[idx]);
-                        }
-                    }
-                }
-                const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
-                this.setState({
-                    keyedFormData: newKeyedFormData,
-                    updatedKeyedFormData: true,
-                }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
-            };
-        };
-        /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
-         * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
-         * plain form data converted from the keyed data
-         *
-         * @param index - The index of the item to move
-         * @param newIndex - The index to where the item is to be moved
-         */
-        this.onReorderClick = (index, newIndex) => {
-            return (event) => {
-                if (event) {
-                    event.preventDefault();
-                    event.currentTarget.blur();
-                }
-                const { onChange, errorSchema } = this.props;
-                let newErrorSchema;
-                if (errorSchema) {
-                    newErrorSchema = {};
-                    for (const idx in errorSchema) {
-                        const i = parseInt(idx);
-                        if (i == index) {
-                            set(newErrorSchema, [newIndex], errorSchema[index]);
-                        }
-                        else if (i == newIndex) {
-                            set(newErrorSchema, [index], errorSchema[newIndex]);
-                        }
-                        else {
-                            set(newErrorSchema, [idx], errorSchema[i]);
-                        }
-                    }
-                }
-                const { keyedFormData } = this.state;
-                function reOrderArray() {
-                    // Copy item
-                    const _newKeyedFormData = keyedFormData.slice();
-                    // Moves item from index to newIndex
-                    _newKeyedFormData.splice(index, 1);
-                    _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
-                    return _newKeyedFormData;
-                }
-                const newKeyedFormData = reOrderArray();
-                this.setState({
-                    keyedFormData: newKeyedFormData,
-                }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
-            };
-        };
-        /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
-         * `onChange` callback with the updated form data
-         *
-         * @param index - The index of the item being changed
-         */
-        this.onChangeForIndex = (index) => {
-            return (value, newErrorSchema, id) => {
-                const { formData, onChange, errorSchema } = this.props;
-                const arrayData = Array.isArray(formData) ? formData : [];
-                const newFormData = arrayData.map((item, i) => {
-                    // We need to treat undefined items as nulls to have validation.
-                    // See https://github.com/tdegrunt/jsonschema/issues/206
-                    const jsonValue = typeof value === 'undefined' ? null : value;
-                    return index === i ? jsonValue : item;
-                });
-                onChange(newFormData, errorSchema &&
-                    errorSchema && {
-                    ...errorSchema,
-                    [index]: newErrorSchema,
-                }, id);
-            };
-        };
-        /** Callback handler used to change the value for a checkbox */
-        this.onSelectChange = (value) => {
-            const { onChange, idSchema } = this.props;
-            onChange(value, undefined, idSchema && idSchema.$id);
-        };
         const { formData = [] } = props;
         const keyedFormData = generateKeyedFormData(formData);
         this.state = {
@@ -308,6 +125,19 @@ class ArrayField extends Component {
         }
         return addable;
     }
+    /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
+     * that the schema is fixed and allows additional items.
+     */
+    _getNewFormDataRow = () => {
+        const { schema, registry } = this.props;
+        const { schemaUtils } = registry;
+        let itemSchema = schema.items;
+        if (isFixedItems(schema) && allowAdditionalItems(schema)) {
+            itemSchema = schema.additionalItems;
+        }
+        // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], S, F> call on the class
+        return schemaUtils.getDefaultFormState(itemSchema);
+    };
     /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
      * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
      * the state, and then returning `onChange()` with the plain form data converted from the keyed data
@@ -351,6 +181,176 @@ class ArrayField extends Component {
             updatedKeyedFormData: true,
         }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
     }
+    /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
+     * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
+     * keyed data
+     *
+     * @param event - The event for the click
+     */
+    onAddClick = (event) => {
+        this._handleAddClick(event);
+    };
+    /** Callback handler for when the user clicks on the add button on an existing array element. Creates a new row of
+     * keyed form data inserted at the `index`, adding it into the state, and then returning `onChange()` with the plain
+     * form data converted from the keyed data
+     *
+     * @param index - The index at which the add button is clicked
+     */
+    onAddIndexClick = (index) => {
+        return (event) => {
+            this._handleAddClick(event, index);
+        };
+    };
+    /** Callback handler for when the user clicks on the copy button on an existing array element. Clones the row of
+     * keyed form data at the `index` into the next position in the state, and then returning `onChange()` with the plain
+     * form data converted from the keyed data
+     *
+     * @param index - The index at which the copy button is clicked
+     */
+    onCopyIndexClick = (index) => {
+        return (event) => {
+            if (event) {
+                event.preventDefault();
+            }
+            const { onChange, errorSchema } = this.props;
+            const { keyedFormData } = this.state;
+            // refs #195: revalidate to ensure properly reindexing errors
+            let newErrorSchema;
+            if (errorSchema) {
+                newErrorSchema = {};
+                for (const idx in errorSchema) {
+                    const i = parseInt(idx);
+                    if (i <= index) {
+                        set(newErrorSchema, [i], errorSchema[idx]);
+                    }
+                    else if (i > index) {
+                        set(newErrorSchema, [i + 1], errorSchema[idx]);
+                    }
+                }
+            }
+            const newKeyedFormDataRow = {
+                key: generateRowId(),
+                item: cloneDeep(keyedFormData[index].item),
+            };
+            const newKeyedFormData = [...keyedFormData];
+            if (index !== undefined) {
+                newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
+            }
+            else {
+                newKeyedFormData.push(newKeyedFormDataRow);
+            }
+            this.setState({
+                keyedFormData: newKeyedFormData,
+                updatedKeyedFormData: true,
+            }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
+        };
+    };
+    /** Callback handler for when the user clicks on the remove button on an existing array element. Removes the row of
+     * keyed form data at the `index` in the state, and then returning `onChange()` with the plain form data converted
+     * from the keyed data
+     *
+     * @param index - The index at which the remove button is clicked
+     */
+    onDropIndexClick = (index) => {
+        return (event) => {
+            if (event) {
+                event.preventDefault();
+            }
+            const { onChange, errorSchema } = this.props;
+            const { keyedFormData } = this.state;
+            // refs #195: revalidate to ensure properly reindexing errors
+            let newErrorSchema;
+            if (errorSchema) {
+                newErrorSchema = {};
+                for (const idx in errorSchema) {
+                    const i = parseInt(idx);
+                    if (i < index) {
+                        set(newErrorSchema, [i], errorSchema[idx]);
+                    }
+                    else if (i > index) {
+                        set(newErrorSchema, [i - 1], errorSchema[idx]);
+                    }
+                }
+            }
+            const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+            this.setState({
+                keyedFormData: newKeyedFormData,
+                updatedKeyedFormData: true,
+            }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
+        };
+    };
+    /** Callback handler for when the user clicks on one of the move item buttons on an existing array element. Moves the
+     * row of keyed form data at the `index` to the `newIndex` in the state, and then returning `onChange()` with the
+     * plain form data converted from the keyed data
+     *
+     * @param index - The index of the item to move
+     * @param newIndex - The index to where the item is to be moved
+     */
+    onReorderClick = (index, newIndex) => {
+        return (event) => {
+            if (event) {
+                event.preventDefault();
+                event.currentTarget.blur();
+            }
+            const { onChange, errorSchema } = this.props;
+            let newErrorSchema;
+            if (errorSchema) {
+                newErrorSchema = {};
+                for (const idx in errorSchema) {
+                    const i = parseInt(idx);
+                    if (i == index) {
+                        set(newErrorSchema, [newIndex], errorSchema[index]);
+                    }
+                    else if (i == newIndex) {
+                        set(newErrorSchema, [index], errorSchema[newIndex]);
+                    }
+                    else {
+                        set(newErrorSchema, [idx], errorSchema[i]);
+                    }
+                }
+            }
+            const { keyedFormData } = this.state;
+            function reOrderArray() {
+                // Copy item
+                const _newKeyedFormData = keyedFormData.slice();
+                // Moves item from index to newIndex
+                _newKeyedFormData.splice(index, 1);
+                _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
+                return _newKeyedFormData;
+            }
+            const newKeyedFormData = reOrderArray();
+            this.setState({
+                keyedFormData: newKeyedFormData,
+            }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
+        };
+    };
+    /** Callback handler used to deal with changing the value of the data in the array at the `index`. Calls the
+     * `onChange` callback with the updated form data
+     *
+     * @param index - The index of the item being changed
+     */
+    onChangeForIndex = (index) => {
+        return (value, newErrorSchema, id) => {
+            const { formData, onChange, errorSchema } = this.props;
+            const arrayData = Array.isArray(formData) ? formData : [];
+            const newFormData = arrayData.map((item, i) => {
+                // We need to treat undefined items as nulls to have validation.
+                // See https://github.com/tdegrunt/jsonschema/issues/206
+                const jsonValue = typeof value === 'undefined' ? null : value;
+                return index === i ? jsonValue : item;
+            });
+            onChange(newFormData, errorSchema &&
+                errorSchema && {
+                ...errorSchema,
+                [index]: newErrorSchema,
+            }, id);
+        };
+    };
+    /** Callback handler used to change the value for a checkbox */
+    onSelectChange = (value) => {
+        const { onChange, idSchema } = this.props;
+        onChange(value, undefined, idSchema && idSchema.$id);
+    };
     /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
      */
     render() {
@@ -418,7 +418,7 @@ class ArrayField extends Component {
                     totalItems: keyedFormData.length,
                 });
             }),
-            className: `field field-array field-array-of-${itemsSchema.type}`,
+            className: `rjsf-field rjsf-field-array rjsf-field-array-of-${itemsSchema.type}`,
             disabled,
             idSchema,
             uiSchema,
@@ -438,38 +438,35 @@ class ArrayField extends Component {
     /** Renders an array using the custom widget provided by the user in the `uiSchema`
      */
     renderCustomWidget() {
-        var _a;
         const { schema, idSchema, uiSchema, disabled = false, readonly = false, autofocus = false, required = false, hideError, placeholder, onBlur, onFocus, formData: items = [], registry, rawErrors, name, } = this.props;
         const { widgets, formContext, globalUiOptions, schemaUtils } = registry;
         const { widget, title: uiTitle, ...options } = getUiOptions(uiSchema, globalUiOptions);
         const Widget = getWidget(schema, widget, widgets);
-        const label = (_a = uiTitle !== null && uiTitle !== void 0 ? uiTitle : schema.title) !== null && _a !== void 0 ? _a : name;
+        const label = uiTitle ?? schema.title ?? name;
         const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
         return (_jsx(Widget, { id: idSchema.$id, name: name, multiple: true, onChange: this.onSelectChange, onBlur: onBlur, onFocus: onFocus, options: options, schema: schema, uiSchema: uiSchema, registry: registry, value: items, disabled: disabled, readonly: readonly, hideError: hideError, required: required, label: label, hideLabel: !displayLabel, placeholder: placeholder, formContext: formContext, autofocus: autofocus, rawErrors: rawErrors }));
     }
     /** Renders an array as a set of checkboxes
      */
     renderMultiSelect() {
-        var _a;
         const { schema, idSchema, uiSchema, formData: items = [], disabled = false, readonly = false, autofocus = false, required = false, placeholder, onBlur, onFocus, registry, rawErrors, name, } = this.props;
         const { widgets, schemaUtils, formContext, globalUiOptions } = registry;
         const itemsSchema = schemaUtils.retrieveSchema(schema.items, items);
         const enumOptions = optionsList(itemsSchema, uiSchema);
         const { widget = 'select', title: uiTitle, ...options } = getUiOptions(uiSchema, globalUiOptions);
         const Widget = getWidget(schema, widget, widgets);
-        const label = (_a = uiTitle !== null && uiTitle !== void 0 ? uiTitle : schema.title) !== null && _a !== void 0 ? _a : name;
+        const label = uiTitle ?? schema.title ?? name;
         const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
         return (_jsx(Widget, { id: idSchema.$id, name: name, multiple: true, onChange: this.onSelectChange, onBlur: onBlur, onFocus: onFocus, options: { ...options, enumOptions }, schema: schema, uiSchema: uiSchema, registry: registry, value: items, disabled: disabled, readonly: readonly, required: required, label: label, hideLabel: !displayLabel, placeholder: placeholder, formContext: formContext, autofocus: autofocus, rawErrors: rawErrors }));
     }
     /** Renders an array of files using the `FileWidget`
      */
     renderFiles() {
-        var _a;
         const { schema, uiSchema, idSchema, name, disabled = false, readonly = false, autofocus = false, required = false, onBlur, onFocus, registry, formData: items = [], rawErrors, } = this.props;
         const { widgets, formContext, globalUiOptions, schemaUtils } = registry;
         const { widget = 'files', title: uiTitle, ...options } = getUiOptions(uiSchema, globalUiOptions);
         const Widget = getWidget(schema, widget, widgets);
-        const label = (_a = uiTitle !== null && uiTitle !== void 0 ? uiTitle : schema.title) !== null && _a !== void 0 ? _a : name;
+        const label = uiTitle ?? schema.title ?? name;
         const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
         return (_jsx(Widget, { options: options, id: idSchema.$id, name: name, multiple: true, onChange: this.onSelectChange, onBlur: onBlur, onFocus: onFocus, schema: schema, uiSchema: uiSchema, value: items, disabled: disabled, readonly: readonly, required: required, registry: registry, formContext: formContext, autofocus: autofocus, rawErrors: rawErrors, label: label, hideLabel: !displayLabel }));
     }
@@ -496,7 +493,7 @@ class ArrayField extends Component {
         const canAdd = this.canAddItem(items) && !!additionalSchema;
         const arrayProps = {
             canAdd,
-            className: 'field field-array field-array-fixed-items',
+            className: 'rjsf-field rjsf-field-array rjsf-field-array-fixed-items',
             disabled,
             idSchema,
             formData,
@@ -572,21 +569,31 @@ class ArrayField extends Component {
         has.toolbar = Object.keys(has).some((key) => has[key]);
         return {
             children: (_jsx(ItemSchemaField, { name: name, title: title, index: index, schema: itemSchema, uiSchema: itemUiSchema, formData: itemData, formContext: formContext, errorSchema: itemErrorSchema, idPrefix: idPrefix, idSeparator: idSeparator, idSchema: itemIdSchema, required: this.isItemRequired(itemSchema), onChange: this.onChangeForIndex(index), onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError, autofocus: autofocus, rawErrors: rawErrors })),
-            className: 'array-item',
+            buttonsProps: {
+                idSchema: itemIdSchema,
+                disabled: disabled,
+                readonly: readonly,
+                canAdd,
+                hasCopy: has.copy,
+                hasMoveUp: has.moveUp,
+                hasMoveDown: has.moveDown,
+                hasRemove: has.remove,
+                index: index,
+                totalItems: totalItems,
+                onAddIndexClick: this.onAddIndexClick,
+                onCopyIndexClick: this.onCopyIndexClick,
+                onDropIndexClick: this.onDropIndexClick,
+                onReorderClick: this.onReorderClick,
+                registry: registry,
+                schema: itemSchema,
+                uiSchema: itemUiSchema,
+            },
+            className: 'rjsf-array-item',
             disabled,
-            canAdd,
-            hasCopy: has.copy,
             hasToolbar: has.toolbar,
-            hasMoveUp: has.moveUp,
-            hasMoveDown: has.moveDown,
-            hasRemove: has.remove,
             index,
             totalItems,
             key,
-            onAddIndexClick: this.onAddIndexClick,
-            onCopyIndexClick: this.onCopyIndexClick,
-            onDropIndexClick: this.onDropIndexClick,
-            onReorderClick: this.onReorderClick,
             readonly,
             registry,
             schema: itemSchema,
@@ -598,4 +605,3 @@ class ArrayField extends Component {
  * `Field` which is defined as `React.ComponentType<FieldProps<T, S, F>>`, so cast it to make `registry` happy.
  */
 export default ArrayField;
-//# sourceMappingURL=ArrayField.js.map

package/lib/components/fields/BooleanField.d.ts

@@ -6,3 +6,4 @@ import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf
  */
 declare function BooleanField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: FieldProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
 export default BooleanField;
+//# sourceMappingURL=BooleanField.d.ts.map

package/lib/components/fields/BooleanField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/BooleanField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,UAAU,EACV,eAAe,EAEf,UAAU,EACV,gBAAgB,EAEjB,MAAM,aAAa,CAAC;AAGrB;;;;GAIG;AACH,iBAAS,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,SAAS,gBAAgB,GAAG,UAAU,EAAE,CAAC,SAAS,eAAe,GAAG,GAAG,EACrG,KAAK,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,2CA6F3B;AAED,eAAe,YAAY,CAAC"}