@rjsf/mui 5.11.2 → 5.12.1

package/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import { ADDITIONAL_PROPERTY_FLAG, TranslatableString, } from '@rjsf/utils';
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate(props) {
+    const { children, classNames, style, disabled, id, label, onDropPropertyClick, onKeyChange, readonly, required, schema, uiSchema, registry, } = props;
+    const { templates, translateString } = registry;
+    // Button templates are not overridden in the uiSchema
+    const { RemoveButton } = templates.ButtonTemplates;
+    const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+    const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+    const btnStyle = {
+        flex: 1,
+        paddingLeft: 6,
+        paddingRight: 6,
+        fontWeight: 'bold',
+    };
+    if (!additional) {
+        return (_jsx("div", Object.assign({ className: classNames, style: style }, { children: children })));
+    }
+    const handleBlur = ({ target }) => onKeyChange(target.value);
+    return (_jsxs(Grid, Object.assign({ container: true, alignItems: 'center', spacing: 2, className: classNames, style: style }, { children: [_jsx(Grid, Object.assign({ item: true, xs: true }, { children: _jsx(TextField, { fullWidth: true, required: required, label: keyLabel, defaultValue: label, disabled: disabled || readonly, id: `${id}-key`, name: `${id}-key`, onBlur: !readonly ? handleBlur : undefined, type: 'text' }) })), _jsx(Grid, Object.assign({ item: true, xs: true }, { children: children })), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(RemoveButton, { iconType: 'default', style: btnStyle, disabled: disabled || readonly, onClick: onDropPropertyClick(label), uiSchema: uiSchema, registry: registry }) }))] }), `${id}-key`));
+}
+//# sourceMappingURL=WrapIfAdditionalTemplate.js.map

package/lib/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapIfAdditionalTemplate.js","sourceRoot":"","sources":["../../src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,EACL,wBAAwB,EAIxB,kBAAkB,GAEnB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAI9C,KAA6C;IAC7C,MAAM,EACJ,QAAQ,EACR,UAAU,EACV,KAAK,EACL,QAAQ,EACR,EAAE,EACF,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAC;IAChD,sDAAsD;IACtD,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC,eAAe,CAAC;IACnD,MAAM,QAAQ,GAAG,eAAe,CAAC,kBAAkB,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,wBAAwB,IAAI,MAAM,CAAC;IACtD,MAAM,QAAQ,GAAkB;QAC9B,IAAI,EAAE,CAAC;QACP,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,MAAM;KACnB,CAAC;IAEF,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,CACL,4BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,gBACrC,QAAQ,IACL,CACP,CAAC;KACH;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAgC,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE3F,OAAO,CACL,MAAC,IAAI,kBAAC,SAAS,QAAmB,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,iBACnG,KAAC,IAAI,kBAAC,IAAI,QAAC,EAAE,sBACX,KAAC,SAAS,IACR,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,EACf,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,GAAG,EAAE,MAAM,EACf,IAAI,EAAE,GAAG,EAAE,MAAM,EACjB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,IAAI,EAAC,MAAM,GACX,IACG,EACP,KAAC,IAAI,kBAAC,IAAI,EAAE,IAAI,EAAE,EAAE,sBACjB,QAAQ,IACJ,EACP,KAAC,IAAI,kBAAC,IAAI,EAAE,IAAI,gBACd,KAAC,YAAY,IACX,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,OAAO,EAAE,mBAAmB,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,IACG,MA1BY,GAAG,EAAE,MAAM,CA2BzB,CACR,CAAC;AACJ,CAAC"}

package/lib/WrapIfAdditionalTemplate/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './WrapIfAdditionalTemplate';
+export * from './WrapIfAdditionalTemplate';

package/lib/WrapIfAdditionalTemplate/index.js

@@ -0,0 +1,3 @@
+export { default } from './WrapIfAdditionalTemplate';
+export * from './WrapIfAdditionalTemplate';
+//# sourceMappingURL=index.js.map

package/lib/WrapIfAdditionalTemplate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/WrapIfAdditionalTemplate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,cAAc,4BAA4B,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+import MuiForm from './MuiForm/MuiForm';
+export { default as Form, generateForm } from './MuiForm';
+export { default as Templates, generateTemplates } from './Templates';
+export { default as Theme, generateTheme } from './Theme';
+export { default as Widgets, generateWidgets } from './Widgets';
+export default MuiForm;

package/lib/index.js

@@ -0,0 +1,7 @@
+import MuiForm from './MuiForm/MuiForm';
+export { default as Form, generateForm } from './MuiForm';
+export { default as Templates, generateTemplates } from './Templates';
+export { default as Theme, generateTheme } from './Theme';
+export { default as Widgets, generateWidgets } from './Widgets';
+export default MuiForm;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAEhE,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@rjsf/mui",
-  "version": "5.11.2",
-  "module": "./dist/mui.esm.js",
+  "version": "5.12.1",
   "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "description": "Material UI 5 theme, fields and widgets for react-jsonschema-form",
   "files": [
-    "dist"
+    "dist",
+    "lib",
+    "src"
   ],
   "scripts": {
-    "build": "rimraf dist && dts build --rollupTypes --format cjs,esm,umd",
+    "build:ts": "rimraf lib && tsc",
+    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
+    "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/mui.esm.js --sourcemap --packages=external --format=esm",
+    "build:umd": "rollup dist/mui.esm.js --format=umd --file=dist/mui.umd.js --name=@rjsf/mui",
+    "build": "rimraf dist && npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd",
     "cs-check": "prettier -l \"{src,test}/**/*.ts?(x)\"",
     "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write",
     "lint": "eslint src test",
@@ -45,24 +51,26 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.0",
-    "@mui/material": "^5.14.0",
-    "@rjsf/core": "^5.11.2",
-    "@rjsf/utils": "^5.11.2",
-    "@rjsf/validator-ajv8": "^5.11.2",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/material": "^5.14.3",
+    "@rjsf/core": "^5.12.1",
+    "@rjsf/utils": "^5.12.1",
+    "@rjsf/validator-ajv8": "^5.12.1",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/react-test-renderer": "^17.0.2",
-    "babel-jest": "^29.6.1",
-    "dts-cli": "^1.6.3",
-    "eslint": "^8.44.0",
-    "jest": "^29.6.1",
+    "babel-jest": "^29.6.2",
+    "esbuild": "^0.18.19",
+    "eslint": "^8.46.0",
+    "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.1",
     "jest-watch-typeahead": "^2.2.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "rimraf": "^5.0.1"
+    "rimraf": "^5.0.1",
+    "rollup": "^3.27.2",
+    "typescript": "^4.9.5"
   },
   "publishConfig": {
     "access": "public"
@@ -90,5 +98,5 @@
     "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
   },
   "license": "Apache-2.0",
-  "gitHead": "2fafced84e18aa2cd487715d11d2730cd23333f3"
+  "gitHead": "de6477730fd16a07def501c2cb761af9c3f4c247"
 }

package/src/AddButton/AddButton.tsx

@@ -0,0 +1,18 @@
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  uiSchema,
+  registry,
+  ...props
+}: IconButtonProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <IconButton title={translateString(TranslatableString.AddItemButton)} {...props} color='primary'>
+      <AddIcon />
+    </IconButton>
+  );
+}

package/src/AddButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './AddButton';
+export * from './AddButton';

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,91 @@
+import { CSSProperties } from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    uiSchema,
+    registry,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+  const btnStyle: CSSProperties = {
+    flex: 1,
+    paddingLeft: 6,
+    paddingRight: 6,
+    fontWeight: 'bold',
+    minWidth: 0,
+  };
+  return (
+    <Grid container={true} alignItems='center'>
+      <Grid item={true} xs style={{ overflow: 'auto' }}>
+        <Box mb={2}>
+          <Paper elevation={2}>
+            <Box p={2}>{children}</Box>
+          </Paper>
+        </Box>
+      </Grid>
+      {hasToolbar && (
+        <Grid item={true}>
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveUpButton
+              style={btnStyle}
+              disabled={disabled || readonly || !hasMoveUp}
+              onClick={onReorderClick(index, index - 1)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {(hasMoveUp || hasMoveDown) && (
+            <MoveDownButton
+              style={btnStyle}
+              disabled={disabled || readonly || !hasMoveDown}
+              onClick={onReorderClick(index, index + 1)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasCopy && (
+            <CopyButton
+              style={btnStyle}
+              disabled={disabled || readonly}
+              onClick={onCopyIndexClick(index)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+          {hasRemove && (
+            <RemoveButton
+              style={btnStyle}
+              disabled={disabled || readonly}
+              onClick={onDropIndexClick(index)}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          )}
+        </Grid>
+      )}
+    </Grid>
+  );
+}

package/src/ArrayFieldItemTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldItemTemplate';
+export * from './ArrayFieldItemTemplate';

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -0,0 +1,87 @@
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import {
+  getTemplate,
+  getUiOptions,
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
+    props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <Paper elevation={2}>
+      <Box p={2}>
+        <ArrayFieldTitleTemplate
+          idSchema={idSchema}
+          title={uiOptions.title || title}
+          schema={schema}
+          uiSchema={uiSchema}
+          required={required}
+          registry={registry}
+        />
+        <ArrayFieldDescriptionTemplate
+          idSchema={idSchema}
+          description={uiOptions.description || schema.description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+        <Grid container={true} key={`array-item-list-${idSchema.$id}`}>
+          {items &&
+            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+              <ArrayFieldItemTemplate key={key} {...itemProps} />
+            ))}
+          {canAdd && (
+            <Grid container justifyContent='flex-end'>
+              <Grid item={true}>
+                <Box mt={2}>
+                  <AddButton
+                    className='array-item-add'
+                    onClick={onAddClick}
+                    disabled={disabled || readonly}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                </Box>
+              </Grid>
+            </Grid>
+          )}
+        </Grid>
+      </Box>
+    </Paper>
+  );
+}

package/src/ArrayFieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldTemplate';
+export * from './ArrayFieldTemplate';

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -0,0 +1,106 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  getInputProps,
+  labelValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
+
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: BaseInputTemplateProps<T, S, F>) {
+  const {
+    id,
+    name, // remove this from textFieldProps
+    placeholder,
+    required,
+    readonly,
+    disabled,
+    type,
+    label,
+    hideLabel,
+    value,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
+    rawErrors = [],
+    formContext,
+    registry,
+    InputLabelProps,
+    ...textFieldProps
+  } = props;
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+  // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
+  const { step, min, max, ...rest } = inputProps;
+  const otherProps = {
+    inputProps: {
+      step,
+      min,
+      max,
+      ...(schema.examples ? { list: examplesId<T>(id) } : undefined),
+    },
+    ...rest,
+  };
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type)
+    ? {
+        ...InputLabelProps,
+        shrink: true,
+      }
+    : InputLabelProps;
+
+  return (
+    <>
+      <TextField
+        id={id}
+        name={id}
+        placeholder={placeholder}
+        label={labelValue(label || undefined, hideLabel, false)}
+        autoFocus={autofocus}
+        required={required}
+        disabled={disabled || readonly}
+        {...otherProps}
+        value={value || value === 0 ? value : ''}
+        error={rawErrors.length > 0}
+        onChange={onChangeOverride || _onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+        InputLabelProps={DisplayInputLabelProps}
+        {...(textFieldProps as TextFieldProps)}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+      {Array.isArray(schema.examples) && (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
+            .map((example: any) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/BaseInputTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BaseInputTemplate';
+export * from './BaseInputTemplate';

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -0,0 +1,87 @@
+import { FocusEvent } from 'react';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import {
+  ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
+  labelValue,
+  schemaRequiresTrueValue,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const {
+    schema,
+    id,
+    value,
+    disabled,
+    readonly,
+    label = '',
+    hideLabel,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    options,
+    uiSchema,
+  } = props;
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  const required = schemaRequiresTrueValue<S>(schema);
+
+  const _onChange = (_: any, checked: boolean) => onChange(checked);
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLButtonElement>) => onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLButtonElement>) => onFocus(id, value);
+  const description = options.description ?? schema.description;
+
+  return (
+    <>
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <FormControlLabel
+        control={
+          <Checkbox
+            id={id}
+            name={id}
+            checked={typeof value === 'undefined' ? false : Boolean(value)}
+            required={required}
+            disabled={disabled || readonly}
+            autoFocus={autofocus}
+            onChange={_onChange}
+            onBlur={_onBlur}
+            onFocus={_onFocus}
+            aria-describedby={ariaDescribedByIds<T>(id)}
+          />
+        }
+        label={labelValue(label, hideLabel, false)}
+      />
+    </>
+  );
+}

package/src/CheckboxWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CheckboxWidget';
+export * from './CheckboxWidget';

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -0,0 +1,92 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import FormLabel from '@mui/material/FormLabel';
+import {
+  ariaDescribedByIds,
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsValueForIndex,
+  labelValue,
+  optionId,
+  FormContextType,
+  WidgetProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  label,
+  hideLabel,
+  id,
+  disabled,
+  options,
+  value,
+  autofocus,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+
+  const _onChange =
+    (index: number) =>
+    ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
+      if (checked) {
+        onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+      } else {
+        onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
+      }
+    };
+
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLButtonElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLButtonElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+
+  return (
+    <>
+      {labelValue(
+        <FormLabel required={required} htmlFor={id}>
+          {label || undefined}
+        </FormLabel>,
+        hideLabel
+      )}
+      <FormGroup id={id} row={!!inline}>
+        {Array.isArray(enumOptions) &&
+          enumOptions.map((option, index: number) => {
+            const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            const checkbox = (
+              <Checkbox
+                id={optionId(id, index)}
+                name={id}
+                checked={checked}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && index === 0}
+                onChange={_onChange(index)}
+                onBlur={_onBlur}
+                onFocus={_onFocus}
+                aria-describedby={ariaDescribedByIds<T>(id)}
+              />
+            );
+            return <FormControlLabel control={checkbox} key={index} label={option.label} />;
+          })}
+      </FormGroup>
+    </>
+  );
+}

package/src/CheckboxesWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CheckboxesWidget';
+export * from './CheckboxesWidget';

package/src/DescriptionField/DescriptionField.tsx

@@ -0,0 +1,23 @@
+import Typography from '@mui/material/Typography';
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
+  if (description) {
+    return (
+      <Typography id={id} variant='subtitle2' style={{ marginTop: '5px' }}>
+        {description}
+      </Typography>
+    );
+  }
+
+  return null;
+}