@rjsf/chakra-ui 6.4.2 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/chakra-ui",
-  "version": "6.4.2",
+  "version": "6.5.0",
   "description": "Chakra UI theme, fields, and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
@@ -85,21 +85,21 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "@chakra-ui/cli": "3.29.0",
-    "@chakra-ui/react": "3.29.0",
+    "@chakra-ui/cli": "^3.34.0",
+    "@chakra-ui/react": "^3.34.0",
     "@emotion/eslint-plugin": "^11.12.0",
     "@emotion/jest": "^11.14.2",
     "@emotion/react": "^11.14.0",
-    "@rjsf/core": "6.4.2",
-    "@rjsf/snapshot-tests": "6.4.2",
-    "@rjsf/utils": "6.4.2",
-    "@rjsf/validator-ajv8": "6.4.2",
+    "@rjsf/core": "6.5.0",
+    "@rjsf/snapshot-tests": "6.5.0",
+    "@rjsf/utils": "6.5.0",
+    "@rjsf/validator-ajv8": "6.5.0",
     "chakra-react-select": "^6.1.1",
     "eslint": "^8.57.1"
   },
   "dependencies": {
     "lucide-react": "^0.548.0",
-    "react-icons": "^5.5.0",
+    "react-icons": "^5.6.0",
     "react-select": "^5.10.2"
   }
 }

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,8 +1,10 @@
 import { CheckboxGroup, FieldsetRoot, Stack, Text, FieldsetLegend } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   FormContextType,
   optionId,
   RJSFSchema,
@@ -37,14 +39,15 @@ export default function CheckboxesWidget<
     uiSchema,
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement | any>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement | any>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const row = options ? options.inline : false;
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, true) as string[];
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, true, optionValueFormat, []) as string[];
 
   const chakraProps = getChakra({ uiSchema });
 
@@ -57,11 +60,13 @@ export default function CheckboxesWidget<
     >
       {!hideLabel && label && <FieldsetLegend>{labelValue(label)}</FieldsetLegend>}
       <CheckboxGroup
-        onValueChange={(option) => onChange(enumOptionsValueForIndex<S>(option, enumOptions, emptyValue))}
-        value={selectedIndexes}
+        onValueChange={(option) =>
+          onChange(enumOptionValueDecoder<S>(option, enumOptions, optionValueFormat, emptyValue))
+        }
+        value={selectValue}
         aria-describedby={ariaDescribedByIds(id)}
         readOnly={readonly}
-        required={required}
+        invalid={required && value.length === 0}
       >
         <Stack direction={row ? 'row' : 'column'}>
           {Array.isArray(enumOptions) &&
@@ -72,7 +77,7 @@ export default function CheckboxesWidget<
                   key={index}
                   id={optionId(id, index)}
                   name={htmlName || id}
-                  value={String(index)}
+                  value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                   disabled={disabled || itemDisabled || readonly}
                   onBlur={_onBlur}
                   onFocus={_onFocus}

package/src/RadioWidget/RadioWidget.tsx

@@ -2,8 +2,10 @@ import { ChangeEvent, FocusEvent } from 'react';
 import { Stack } from '@chakra-ui/react';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   labelValue,
   optionId,
   FormContextType,
@@ -32,16 +34,17 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   uiSchema,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange(enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
   const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
   const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
 
   const row = options ? options.inline : false;
-  const selectedIndex = (enumOptionsIndexForValue<S>(value, enumOptions) as string) ?? null;
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, false, optionValueFormat, null);
 
   const chakraProps = getChakra({ uiSchema });
 
@@ -58,7 +61,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         onChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        value={selectedIndex}
+        value={selectValue}
         name={htmlName || id}
         aria-describedby={ariaDescribedByIds(id)}
       >
@@ -69,7 +72,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
 
               return (
                 <Radio
-                  value={String(index)}
+                  value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                   key={index}
                   id={optionId(id, index)}
                   disabled={disabled || itemDisabled || readonly}

package/src/SelectWidget/SelectWidget.tsx

@@ -3,8 +3,10 @@ import { FocusEvent, useMemo, useRef } from 'react';
 import {
   ariaDescribedByIds,
   EnumOptionsType,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   labelValue,
   FormContextType,
   RJSFSchema,
@@ -42,36 +44,32 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     uiSchema,
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const _onMultiChange = ({ value }: SelectValueChangeDetails) => {
-    return onChange(enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+    return onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
   };
 
   const _onSingleChange = ({ value }: SelectValueChangeDetails) => {
-    const selected = enumOptionsValueForIndex<S>(value, enumOptions, emptyValue);
+    const selected = enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue);
     return onChange(Array.isArray(selected) && selected.length === 1 ? selected[0] : selected);
   };
 
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const showPlaceholderOption = !multiple && schema.default === undefined;
-  const { valueLabelMap, displayEnumOptions } = useMemo((): {
-    valueLabelMap: Record<string | number, string>;
-    displayEnumOptions: OptionsOrGroups<any, any>;
-  } => {
-    const valueLabelMap: Record<string | number, string> = {};
+  const displayEnumOptions = useMemo((): OptionsOrGroups<any, any> => {
     let displayEnumOptions: OptionsOrGroups<any, any> = [];
     if (Array.isArray(enumOptions)) {
       displayEnumOptions = enumOptions.map((option: EnumOptionsType<S>, index: number) => {
         const { value, label } = option;
-        valueLabelMap[index] = label || String(value);
         return {
           label,
-          value: String(index),
+          value: enumOptionValueEncoder(value, index, optionValueFormat),
           disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
         };
       });
@@ -79,31 +77,18 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
         (displayEnumOptions as any[]).unshift({ value: '', label: placeholder || '' });
       }
     }
-    return { valueLabelMap: valueLabelMap, displayEnumOptions: displayEnumOptions };
-  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
+    return displayEnumOptions;
+  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption, optionValueFormat]);
 
   const isMultiple = typeof multiple !== 'undefined' && multiple !== false && Boolean(enumOptions);
-  const selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions, isMultiple);
 
-  const getMultiValue = () =>
-    ((selectedIndex as string[]) || []).map((i: string) => {
-      return {
-        label: valueLabelMap[i],
-        value: i.toString(),
-      };
-    });
-
-  const getSingleValue = () =>
-    typeof selectedIndex !== 'undefined'
-      ? [
-          {
-            label: valueLabelMap[selectedIndex as string] || '',
-            value: selectedIndex.toString(),
-          },
-        ]
-      : [];
-
-  const formValue = (isMultiple ? getMultiValue() : getSingleValue()).map((item) => item.value);
+  // Chakra's SelectRoot always expects a string array, so flatten the helper's
+  // single/multiple return shape and strip the empty-single case.
+  const formValue = [
+    enumOptionSelectedValue<S>(value, enumOptions, isMultiple, optionValueFormat, isMultiple ? [] : ''),
+  ]
+    .flat()
+    .filter((v) => v !== '') as string[];
 
   const selectOptions = createListCollection({
     items: displayEnumOptions.filter((item) => item.value),

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -60,6 +60,7 @@ export default function WrapIfAdditionalTemplate<
       <GridItem colSpan={5} style={{ marginTop: hasDescription ? '36px' : undefined }}>
         <Field required={required} label={keyLabel}>
           <Input
+            key={label}
             defaultValue={label}
             disabled={disabled || readonly}
             id={`${id}-key`}