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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/chakra-ui",
-  "version": "6.0.0-beta.21",
+  "version": "6.0.0-beta.23",
   "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.23",
+    "@rjsf/utils": "^6.0.0-beta.23",
     "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.23",
+    "@rjsf/snapshot-tests": "^6.0.0-beta.23",
+    "@rjsf/utils": "^6.0.0-beta.23",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.23",
     "chakra-react-select": "^6.1.0",
     "eslint": "^8.57.1"
   },

package/src/AltDateTimeWidget/AltDateTimeWidget.tsx

@@ -5,12 +5,12 @@ function AltDateTimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   props: WidgetProps<T, S, F>,
 ) {
   const { AltDateWidget } = props.registry.widgets;
-  return <AltDateWidget {...props} showTime />;
+  return <AltDateWidget {...props} time />;
 }
 
 AltDateTimeWidget.defaultProps = {
   ..._AltDateWidget.defaultProps,
-  showTime: true,
+  time: true,
 };
 
 export default AltDateTimeWidget;

package/src/AltDateWidget/AltDateWidget.tsx

@@ -1,118 +1,45 @@
 import { Box, Button, FieldsetRoot } from '@chakra-ui/react';
 import {
-  ariaDescribedByIds,
-  DateElementFormat,
-  DateObject,
-  dateRangeOptions,
+  DateElement,
+  DateElementProp,
   FormContextType,
-  getDateElementProps,
-  parseDateString,
   RJSFSchema,
   StrictRJSFSchema,
-  toDateString,
   TranslatableString,
+  useAltDateWidgetProps,
   WidgetProps,
 } from '@rjsf/utils';
-import { MouseEvent, useEffect, useState } from 'react';
 import { getChakra } from '../utils';
 
-function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  props: WidgetProps<T, S, F>,
-) {
-  const { SelectWidget } = props.registry.widgets;
-  const value = props.value ? props.value : undefined;
-  return (
-    <SelectWidget
-      {...props}
-      label={''}
-      className='form-control'
-      onChange={(elemValue: WidgetProps<T, S, F>) => props.select(props.type, elemValue)}
-      options={{
-        enumOptions: dateRangeOptions<S>(props.range[0], props.range[1]),
-      }}
-      placeholder={props.type}
-      schema={{ type: 'integer' } as S}
-      value={value}
-      aria-describedby={ariaDescribedByIds(props.name)}
-    />
-  );
-}
-
-interface AltDateStateType extends DateObject {
-  [x: string]: number | undefined;
-}
-
-const readyForChange = (state: AltDateStateType) => {
-  return Object.keys(state).every((key) => typeof state[key] !== 'undefined' && state[key] !== -1);
-};
-
 function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>,
 ) {
-  const { autofocus, disabled, id, onBlur, onChange, onFocus, options, readonly, registry, showTime, value } = props;
+  const { autofocus, disabled, id, onBlur, onFocus, options, readonly, registry } = props;
   const { translateString } = registry;
-  const [state, setState] = useState(parseDateString(value, showTime));
-  useEffect(() => {
-    setState(parseDateString(value, showTime));
-  }, [showTime, value]);
-
-  const handleChange = (property: string, nextValue: string) => {
-    const nextState = {
-      ...state,
-      [property]: typeof nextValue === 'undefined' ? -1 : nextValue,
-    };
-
-    if (readyForChange(nextState)) {
-      onChange(toDateString(nextState, showTime));
-    } else {
-      setState(nextState);
-    }
-  };
-
-  const handleNow = (event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    const nextState = parseDateString(new Date().toJSON(), showTime);
-    onChange(toDateString(nextState, showTime));
-  };
-
-  const handleClear = (event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    onChange(undefined);
-  };
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
 
   const chakraProps = getChakra({ uiSchema: props.uiSchema });
 
   return (
     <FieldsetRoot {...(chakraProps as any)}>
       <Box display='flex' flexWrap='wrap' alignItems='center'>
-        {getDateElementProps(
-          state,
-          showTime,
-          options.yearsRange as [number, number] | undefined,
-          options.format as DateElementFormat | undefined,
-        ).map((elemProps: any, i) => {
-          const elemId = id + '_' + elemProps.type;
+        {elements.map((elemProps: DateElementProp, i) => {
+          const elemId = `${id}_${elemProps.type}`;
           return (
-            <Box key={elemId} mr='2' mb='2'>
+            <Box key={elemId} mr='2' mb='2' width='20'>
               <DateElement<T, S, F>
                 {...props}
                 {...elemProps}
                 autofocus={autofocus && i === 0}
                 disabled={disabled}
-                id={elemId}
+                rootId={id}
                 name={id}
                 onBlur={onBlur}
                 onFocus={onFocus}
                 readonly={readonly}
                 registry={registry}
                 select={handleChange}
-                value={elemProps.value < 0 ? '' : elemProps.value}
+                value={elemProps.value && elemProps.value < 0 ? '' : elemProps.value}
               />
             </Box>
           );
@@ -120,14 +47,12 @@ function AltDateWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exten
       </Box>
       <Box display='flex'>
         {!options.hideNowButton && (
-          <Button onClick={(e: MouseEvent<HTMLButtonElement>) => handleNow(e)} mr='2'>
+          <Button onClick={handleSetNow} mr='2'>
             {translateString(TranslatableString.NowLabel)}
           </Button>
         )}
         {!options.hideClearButton && (
-          <Button onClick={(e: MouseEvent<HTMLButtonElement>) => handleClear(e)}>
-            {translateString(TranslatableString.ClearLabel)}
-          </Button>
+          <Button onClick={handleClear}>{translateString(TranslatableString.ClearLabel)}</Button>
         )}
       </Box>
     </FieldsetRoot>
@@ -138,7 +63,7 @@ AltDateWidget.defaultProps = {
   autofocus: false,
   disabled: false,
   readonly: false,
-  showTime: false,
+  time: false,
   options: {
     yearsRange: [1900, new Date().getFullYear() + 2],
   },

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}
         />