@rjsf/chakra-ui 6.0.0-beta.21 → 6.0.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/chakra-ui",
-  "version": "6.0.0-beta.21",
+  "version": "6.0.0-beta.22",
   "description": "Chakra UI theme, fields, and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
@@ -64,8 +64,8 @@
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=3.16.1",
-    "@rjsf/core": "^6.0.0-beta.21",
-    "@rjsf/utils": "^6.0.0-beta.21",
+    "@rjsf/core": "^6.0.0-beta.22",
+    "@rjsf/utils": "^6.0.0-beta.22",
     "chakra-react-select": ">=6",
     "react": ">=18"
   },
@@ -86,10 +86,10 @@
     "@emotion/eslint-plugin": "^11.12.0",
     "@emotion/jest": "^11.13.0",
     "@emotion/react": "^11.14.0",
-    "@rjsf/core": "^6.0.0-beta.21",
-    "@rjsf/snapshot-tests": "^6.0.0-beta.21",
-    "@rjsf/utils": "^6.0.0-beta.21",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.21",
+    "@rjsf/core": "^6.0.0-beta.22",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.22",
+    "@rjsf/utils": "^6.0.0-beta.22",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.22",
     "chakra-react-select": "^6.1.0",
     "eslint": "^8.57.1"
   },

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,6 +1,6 @@
 import { Box, ButtonGroup, HStack } from '@chakra-ui/react';
 import {
-  ArrayFieldItemTemplateType,
+  ArrayFieldItemTemplateProps,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -12,7 +12,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: ArrayFieldItemTemplateType<T, S, F>) {
+>(props: ArrayFieldItemTemplateProps<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -2,7 +2,6 @@ import { Box, Grid, GridItem } from '@chakra-ui/react';
 import {
   getTemplate,
   getUiOptions,
-  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
   StrictRJSFSchema,
   RJSFSchema,
@@ -35,11 +34,6 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions,
   );
-  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
-    'ArrayFieldItemTemplate',
-    registry,
-    uiOptions,
-  );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
@@ -71,9 +65,7 @@ export default function ArrayFieldTemplate<
       <Grid key={`array-item-list-${fieldPathId.$id}`}>
         <GridItem>
           {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
-          {items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
-            <ArrayFieldItemTemplate key={key} {...itemProps} />
-          ))}
+          {items}
         </GridItem>
         {canAdd && (
           <GridItem justifySelf='flex-end'>

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -21,6 +21,7 @@ export default function BaseInputTemplate<
 >(props: BaseInputTemplateProps<T, S, F>) {
   const {
     id,
+    htmlName,
     type,
     value,
     label,
@@ -60,7 +61,7 @@ export default function BaseInputTemplate<
     >
       <Input
         id={id}
-        name={id}
+        name={htmlName || id}
         value={value || value === 0 ? value : ''}
         onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -23,6 +23,7 @@ export default function CheckboxWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -66,7 +67,7 @@ export default function CheckboxWidget<
       )}
       <Checkbox
         id={id}
-        name={id}
+        name={htmlName || id}
         checked={typeof value === 'undefined' ? false : value}
         disabled={disabled || readonly}
         onCheckedChange={_onChange}

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -22,6 +22,7 @@ export default function CheckboxesWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -70,7 +71,7 @@ export default function CheckboxesWidget<
                 <Checkbox
                   key={index}
                   id={optionId(id, index)}
-                  name={id}
+                  name={htmlName || id}
                   value={String(index)}
                   disabled={disabled || itemDisabled || readonly}
                   onBlur={_onBlur}

package/src/FieldTemplate/FieldTemplate.tsx

@@ -22,8 +22,9 @@ export default function FieldTemplate<
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     registry,
     required,
@@ -53,8 +54,9 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
-      onDropPropertyClick={onDropPropertyClick}
-      onKeyChange={onKeyChange}
+      onKeyRename={onKeyRename}
+      onKeyRenameBlur={onKeyRenameBlur}
+      onRemoveProperty={onRemoveProperty}
       readonly={readonly}
       required={required}
       schema={schema}

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -29,7 +29,7 @@ export default function ObjectFieldTemplate<
     schema,
     formData,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     registry,
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -81,7 +81,7 @@ export default function ObjectFieldTemplate<
             <AddButton
               id={buttonId(fieldPathId, 'add')}
               className='rjsf-object-property-expand'
-              onClick={onAddClick(schema)}
+              onClick={onAddProperty}
               disabled={disabled || readonly}
               uiSchema={uiSchema}
               registry={registry}

package/src/RadioWidget/RadioWidget.tsx

@@ -18,6 +18,7 @@ import { getChakra } from '../utils';
 
 export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -58,7 +59,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         onBlur={_onBlur}
         onFocus={_onFocus}
         value={selectedIndex}
-        name={id}
+        name={htmlName || id}
         aria-describedby={ariaDescribedByIds(id)}
       >
         <Stack direction={row ? 'row' : 'column'}>

package/src/SelectWidget/SelectWidget.tsx

@@ -23,6 +23,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
 ) {
   const {
     id,
+    htmlName,
     options,
     label,
     hideLabel,
@@ -126,7 +127,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
       <SelectRoot
         collection={selectOptions}
         id={id}
-        name={id}
+        name={htmlName || id}
         multiple={isMultiple}
         closeOnSelect={!isMultiple}
         onBlur={_onBlur}

package/src/TextareaWidget/TextareaWidget.tsx

@@ -18,6 +18,7 @@ export default function TextareaWidget<
   F extends FormContextType = any,
 >({
   id,
+  htmlName,
   placeholder,
   value,
   label,
@@ -52,7 +53,7 @@ export default function TextareaWidget<
     >
       <Textarea
         id={id}
-        name={id}
+        name={htmlName || id}
         value={value ?? ''}
         placeholder={placeholder}
         autoFocus={autofocus}

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,4 +1,3 @@
-import { FocusEvent } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   buttonId,
@@ -24,8 +23,8 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     registry,
     required,
@@ -45,8 +44,6 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
-
   return (
     <Grid key={`${id}-key`} className={classNames} style={style} alignItems='center' gap={2}>
       <GridItem>
@@ -56,7 +53,7 @@ export default function WrapIfAdditionalTemplate<
             disabled={disabled || readonly}
             id={`${id}-key`}
             name={`${id}-key`}
-            onBlur={!readonly ? handleBlur : undefined}
+            onBlur={!readonly ? onKeyRenameBlur : undefined}
             type='text'
             mb={1}
           />
@@ -68,7 +65,7 @@ export default function WrapIfAdditionalTemplate<
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'
           disabled={disabled || readonly}
-          onClick={onDropPropertyClick(label)}
+          onClick={onRemoveProperty}
           uiSchema={uiSchema}
           registry={registry}
         />