@rjsf/chakra-ui 5.24.10 → 6.0.0-beta.1

package/lib/utils.d.ts

@@ -1,13 +1,10 @@
-import { ChakraProps } from '@chakra-ui/react';
+import { Field as ChakraField } from '@chakra-ui/react';
 import { UiSchema } from '@rjsf/utils';
 export interface ChakraUiSchema extends Omit<UiSchema, 'ui:options'> {
     'ui:options'?: ChakraUiOptions;
 }
 type ChakraUiOptions = UiSchema['ui:options'] & {
-    chakra?: ChakraProps;
+    chakra?: ChakraField.RootProps;
 };
-interface GetChakraProps {
-    uiSchema?: ChakraUiSchema;
-}
-export declare function getChakra({ uiSchema }: GetChakraProps): ChakraProps;
+export declare function getChakra(uiSchema?: ChakraUiSchema): ChakraField.RootProps;
 export {};

package/lib/utils.js

@@ -1,15 +1,14 @@
-import { shouldForwardProp } from '@chakra-ui/react';
-export function getChakra({ uiSchema = {} }) {
+import { defaultSystem } from '@chakra-ui/react';
+import shouldForwardProp from '@emotion/is-prop-valid';
+const { isValidProperty } = defaultSystem;
+export function getChakra(uiSchema = {}) {
     const chakraProps = (uiSchema['ui:options'] && uiSchema['ui:options'].chakra) || {};
     Object.keys(chakraProps).forEach((key) => {
         /**
          * Leveraging `shouldForwardProp` to remove props
-         *
-         * This is a utility function that's used in `@chakra-ui/react`'s factory function.
-         * Normally, it prevents ChakraProps from being passed to the DOM.
-         * In this case we just want to delete the unknown props. So we flip the boolean.
+         * https://chakra-ui.com/docs/styling/chakra-factory#forwarding-props
          */
-        if (shouldForwardProp(key)) {
+        if (!isValidProperty(key) || shouldForwardProp(key)) {
             delete chakraProps[key];
         }
     });

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAalE,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAkB;IACzD,MAAM,WAAW,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAEpF,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACvC;;;;;;WAMG;QACH,IAAI,iBAAiB,CAAC,GAAG,CAAC,EAAE;YAC1B,OAAQ,WAAmB,CAAC,GAAG,CAAC,CAAC;SAClC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC;AACrB,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEvE,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,MAAM,EAAE,eAAe,EAAE,GAAG,aAAa,CAAC;AAQ1C,MAAM,UAAU,SAAS,CAAC,WAA2B,EAAE;IACrD,MAAM,WAAW,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAEpF,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACvC;;;WAGG;QACH,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;YACpD,OAAQ,WAAmB,CAAC,GAAG,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/package.json

@@ -1,10 +1,38 @@
 {
   "name": "@rjsf/chakra-ui",
-  "version": "5.24.10",
+  "version": "6.0.0-beta.1",
   "description": "Chakra UI theme, fields, and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./lib": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./lib/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./dist/*.js",
+      "import": "./lib/*.js"
+    },
+    "./dist": {
+      "types": "./lib/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./lib/index.js"
+    },
+    "./dist/*.js": {
+      "types": "./lib/*.d.ts",
+      "require": "./dist/*.js",
+      "import": "./lib/*.js"
+    }
+  },
   "files": [
     "dist",
     "lib",
@@ -22,7 +50,8 @@
     "precommit": "lint-staged",
     "test": "jest",
     "test:update": "jest --u",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "type-check": "tsc --noEmit"
   },
   "lint-staged": {
     "{src,test}/**/*.ts?(x)": [
@@ -31,17 +60,14 @@
   },
   "engineStrict": false,
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "peerDependencies": {
-    "@chakra-ui/icons": ">=1.1.1",
-    "@chakra-ui/react": ">=1.7.3 <3.0.0",
-    "@chakra-ui/system": ">=1.12.1",
-    "@rjsf/core": "^5.24.x",
-    "@rjsf/utils": "^5.24.x",
-    "chakra-react-select": ">=3.3.8 <6.0.0",
-    "framer-motion": ">=5.6.0",
-    "react": "^16.14.0 || >=17"
+    "@chakra-ui/react": ">=3.16.1",
+    "@rjsf/core": "^6.x",
+    "@rjsf/utils": "^6.x",
+    "chakra-react-select": ">=6",
+    "react": ">=18"
   },
   "publishConfig": {
     "access": "public"
@@ -55,43 +81,22 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@chakra-ui/icons": "^1.1.7",
-    "@chakra-ui/react": "^1.8.9",
-    "@chakra-ui/system": "^1.12.1",
-    "@emotion/eslint-plugin": "^11.11.0",
-    "@emotion/jest": "^11.11.0",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@rjsf/core": "^5.24.10",
-    "@rjsf/snapshot-tests": "^5.24.10",
-    "@rjsf/utils": "^5.24.10",
-    "@rjsf/validator-ajv8": "^5.24.10",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.58",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-test-renderer": "^18.0.7",
-    "babel-jest": "^29.7.0",
-    "chakra-react-select": "^3.3.9",
+    "@chakra-ui/cli": "^3.16.1",
+    "@chakra-ui/react": "^3.16.1",
+    "@emotion/eslint-plugin": "^11.12.0",
+    "@emotion/jest": "^11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@rjsf/core": "^6.0.0-beta.1",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.1",
+    "@rjsf/utils": "^6.0.0-beta.1",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.1",
+    "chakra-react-select": "6.1.0",
     "eslint": "^8.56.0",
-    "framer-motion": "^5.6.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-watch-typeahead": "^2.2.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
-    "typescript": "^4.9.5"
+    "lucide-react": "^0.488.0"
   },
   "dependencies": {
-    "react-select": "^5.8.0"
-  },
-  "gitHead": "ad33d7c324cb040d0f34da30a17caea0251f1e3a"
+    "react-icons": "^5.4.0",
+    "react-select": "^5.10.1"
+  }
 }

package/src/AddButton/AddButton.tsx

@@ -1,6 +1,6 @@
 import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
 import { Button } from '@chakra-ui/react';
-import { AddIcon } from '@chakra-ui/icons';
+import { PlusIcon } from 'lucide-react';
 
 export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   uiSchema,
@@ -9,7 +9,8 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
 }: IconButtonProps<T, S, F>) {
   const { translateString } = registry;
   return (
-    <Button leftIcon={<AddIcon />} {...props}>
+    <Button {...props}>
+      <PlusIcon />
       {translateString(TranslatableString.AddItemButton)}
     </Button>
   );

package/src/AltDateTimeWidget/AltDateTimeWidget.tsx

@@ -2,7 +2,7 @@ import _AltDateWidget from '../AltDateWidget';
 import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 
 function AltDateTimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { AltDateWidget } = props.registry.widgets;
   return <AltDateWidget {...props} showTime />;

package/src/AltDateWidget/AltDateWidget.tsx

@@ -16,7 +16,7 @@ import {
 import { Box, Button } from '@chakra-ui/react';
 
 function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { SelectWidget } = props.registry.widgets;
   const value = props.value ? props.value : undefined;
@@ -46,7 +46,7 @@ const readyForChange = (state: AltDateStateType) => {
 };
 
 function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>
+  props: WidgetProps<T, S, F>,
 ) {
   const { autofocus, disabled, id, onBlur, onChange, onFocus, options, readonly, registry, showTime, value } = props;
   const { translateString } = registry;
@@ -92,7 +92,7 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
           state,
           showTime,
           options.yearsRange as [number, number] | undefined,
-          options.format as DateElementFormat | undefined
+          options.format as DateElementFormat | undefined,
         ).map((elemProps: any, i) => {
           const elemId = id + '_' + elemProps.type;
           return (

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,75 +1,33 @@
-import { useMemo } from 'react';
 import { Box, ButtonGroup, HStack } from '@chakra-ui/react';
-import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import {
+  ArrayFieldItemTemplateType,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
 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,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
+  const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+    'ArrayFieldItemButtonsTemplate',
     registry,
-  } = props;
-  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
-  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
-
-  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
-
-  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
-
-  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+    uiOptions,
+  );
 
   return (
     <HStack alignItems={'flex-end'} py={1}>
       <Box w='100%'>{children}</Box>
       {hasToolbar && (
         <Box>
-          <ButtonGroup isAttached mb={1}>
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveUpButton
-                disabled={disabled || readonly || !hasMoveUp}
-                onClick={onArrowUpClick}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveDownButton
-                disabled={disabled || readonly || !hasMoveDown}
-                onClick={onArrowDownClick}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasCopy && (
-              <CopyButton
-                disabled={disabled || readonly}
-                onClick={onCopyClick}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasRemove && (
-              <RemoveButton
-                disabled={disabled || readonly}
-                onClick={onRemoveClick}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
+          <ButtonGroup attached mb={1}>
+            <ArrayFieldItemButtonsTemplate {...buttonsProps} />
           </ButtonGroup>
         </Box>
       )}

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -2,17 +2,18 @@ import { Box, Grid, GridItem } from '@chakra-ui/react';
 import {
   getTemplate,
   getUiOptions,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
   StrictRJSFSchema,
   RJSFSchema,
   FormContextType,
+  buttonId,
 } from '@rjsf/utils';
 
 export default function ArrayFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: ArrayFieldTemplateProps<T, S, F>) {
   const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } =
     props;
@@ -20,17 +21,17 @@ export default function ArrayFieldTemplate<
   const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
     'ArrayFieldDescriptionTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
     'ArrayFieldItemTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
-    uiOptions
+    uiOptions,
   );
   // Button templates are not overridden in the uiSchema
   const {
@@ -56,7 +57,7 @@ export default function ArrayFieldTemplate<
       <Grid key={`array-item-list-${idSchema.$id}`}>
         <GridItem>
           {items.length > 0 &&
-            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
               <ArrayFieldItemTemplate key={key} {...itemProps} />
             ))}
         </GridItem>
@@ -64,7 +65,8 @@ export default function ArrayFieldTemplate<
           <GridItem justifySelf={'flex-end'}>
             <Box mt={2}>
               <AddButton
-                className='array-item-add'
+                id={buttonId<T>(idSchema, 'add')}
+                className='rjsf-array-item-add'
                 onClick={onAddClick}
                 disabled={disabled || readonly}
                 uiSchema={uiSchema}

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEvent } from 'react';
-import { FormControl, FormLabel, Input } from '@chakra-ui/react';
+import { Input } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
   BaseInputTemplateProps,
@@ -10,12 +10,13 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
-import { getChakra } from '../utils';
+
+import { Field } from '../components/ui/field';
 
 export default function BaseInputTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: BaseInputTemplateProps<T, S, F>) {
   const {
     id,
@@ -24,7 +25,6 @@ export default function BaseInputTemplate<
     label,
     hideLabel,
     schema,
-    uiSchema,
     onChange,
     onChangeOverride,
     onBlur,
@@ -38,7 +38,6 @@ export default function BaseInputTemplate<
     disabled,
   } = props;
   const inputProps = getInputProps<T, S, F>(schema, type, options);
-  const chakraProps = getChakra({ uiSchema });
 
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
@@ -46,20 +45,14 @@ export default function BaseInputTemplate<
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   return (
-    <FormControl
+    <Field
       mb={1}
-      {...chakraProps}
-      isDisabled={disabled || readonly}
-      isRequired={required}
-      isReadOnly={readonly}
-      isInvalid={rawErrors && rawErrors.length > 0}
+      disabled={disabled || readonly}
+      required={required}
+      readOnly={readonly}
+      invalid={rawErrors && rawErrors.length > 0}
+      label={labelValue(label, hideLabel || !label)}
     >
-      {labelValue(
-        <FormLabel htmlFor={id} id={`${id}-label`}>
-          {label}
-        </FormLabel>,
-        hideLabel || !label
-      )}
       <Input
         id={id}
         name={id}
@@ -82,6 +75,6 @@ export default function BaseInputTemplate<
             })}
         </datalist>
       ) : null}
-    </FormControl>
+    </Field>
   );
 }

package/src/ChakraFrameProvider.tsx

@@ -1,8 +1,7 @@
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import weakMemoize from '@emotion/weak-memoize';
-import { ChakraProvider } from '@chakra-ui/react';
-import CSSReset from './CssReset';
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
 
 /**
  * __createChakraFrameProvider is used to ensure that <Global> emotion components
@@ -30,8 +29,8 @@ export const __createChakraFrameProvider =
     return (
       <div style={{ margin: 2 }}>
         <CacheProvider value={memoizedCreateCacheWithContainer(document.head)}>
-          <ChakraProvider resetCSS={false}>
-            <CSSReset />
+          <ChakraProvider value={defaultSystem}>
+            {/* <CSSReset /> TODO: figrue out styling issues */}
             {props.children}
           </ChakraProvider>
         </CacheProvider>

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -1,5 +1,5 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import { Checkbox, FormControl, Text } from '@chakra-ui/react';
+import { FocusEvent } from 'react';
+import { CheckboxCheckedChangeDetails, Text } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
   descriptionId,
@@ -11,12 +11,14 @@ import {
   RJSFSchema,
   FormContextType,
 } from '@rjsf/utils';
-import { getChakra } from '../utils';
+
+import { Field } from '../components/ui/field';
+import { Checkbox } from '../components/ui/checkbox';
 
 export default function CheckboxWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
@@ -33,7 +35,6 @@ export default function CheckboxWidget<
     uiSchema,
     schema,
   } = props;
-  const chakraProps = getChakra({ uiSchema });
   // 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
@@ -41,16 +42,16 @@ export default function CheckboxWidget<
   const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
     'DescriptionFieldTemplate',
     registry,
-    options
+    options,
   );
   const description = options.description || schema.description;
 
-  const _onChange = ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => onChange(checked);
+  const _onChange = ({ checked }: CheckboxCheckedChangeDetails) => onChange(checked);
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) => onFocus(id, target && target.value);
 
   return (
-    <FormControl mb={1} {...chakraProps} isRequired={required}>
+    <Field mb={1} required={required}>
       {!hideLabel && !!description && (
         <DescriptionFieldTemplate
           id={descriptionId<T>(id)}
@@ -63,15 +64,15 @@ export default function CheckboxWidget<
       <Checkbox
         id={id}
         name={id}
-        isChecked={typeof value === 'undefined' ? false : value}
-        isDisabled={disabled || readonly}
-        onChange={_onChange}
+        checked={typeof value === 'undefined' ? false : value}
+        disabled={disabled || readonly}
+        onCheckedChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds<T>(id)}
       >
         {labelValue(<Text>{label}</Text>, hideLabel || !label)}
       </Checkbox>
-    </FormControl>
+    </Field>
   );
 }

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,23 +1,23 @@
-import { FocusEvent } from 'react';
-import { CheckboxGroup, Checkbox, FormLabel, FormControl, Text, Stack } from '@chakra-ui/react';
+import { CheckboxGroup, FieldsetRoot, Stack, Text } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
   enumOptionsIndexForValue,
-  enumOptionsIsSelected,
   enumOptionsValueForIndex,
+  FormContextType,
   labelValue,
   optionId,
-  FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
-import { getChakra } from '../utils';
+import { FocusEvent } from 'react';
+
+import { Checkbox } from '../components/ui/checkbox';
 
 export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
@@ -31,12 +31,9 @@ export default function CheckboxesWidget<
     required,
     label,
     hideLabel,
-    uiSchema,
     rawErrors = [],
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
-  const chakraProps = getChakra({ uiSchema });
-  const checkboxesValues = Array.isArray(value) ? value : [value];
 
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) =>
     onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
@@ -47,29 +44,18 @@ export default function CheckboxesWidget<
   const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];
 
   return (
-    <FormControl
-      mb={1}
-      {...chakraProps}
-      isDisabled={disabled || readonly}
-      isRequired={required}
-      isReadOnly={readonly}
-      isInvalid={rawErrors && rawErrors.length > 0}
-    >
-      {labelValue(
-        <FormLabel htmlFor={id} id={`${id}-label`}>
-          {label}
-        </FormLabel>,
-        hideLabel || !label
-      )}
+    <FieldsetRoot mb={1} disabled={disabled || readonly} invalid={rawErrors && rawErrors.length > 0}>
       <CheckboxGroup
-        onChange={(option) => onChange(enumOptionsValueForIndex<S>(option, enumOptions, emptyValue))}
-        defaultValue={selectedIndexes}
+        onValueChange={(option) => onChange(enumOptionsValueForIndex<S>(option, enumOptions, emptyValue))}
+        value={selectedIndexes}
         aria-describedby={ariaDescribedByIds<T>(id)}
+        readOnly={readonly}
+        required={required}
+        label={labelValue(label, hideLabel || !label)}
       >
         <Stack direction={row ? 'row' : 'column'}>
           {Array.isArray(enumOptions) &&
             enumOptions.map((option, index) => {
-              const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
               const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
               return (
                 <Checkbox
@@ -77,8 +63,7 @@ export default function CheckboxesWidget<
                   id={optionId(id, index)}
                   name={id}
                   value={String(index)}
-                  isChecked={checked}
-                  isDisabled={disabled || itemDisabled || readonly}
+                  disabled={disabled || itemDisabled || readonly}
                   onBlur={_onBlur}
                   onFocus={_onFocus}
                 >
@@ -88,6 +73,6 @@ export default function CheckboxesWidget<
             })}
         </Stack>
       </CheckboxGroup>
-    </FormControl>
+    </FieldsetRoot>
   );
 }

package/src/DescriptionField/DescriptionField.tsx

@@ -4,7 +4,7 @@ import { Text } from '@chakra-ui/react';
 export default function DescriptionField<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >({ description, id }: DescriptionFieldProps<T, S, F>) {
   if (!description) {
     return null;