@rjsf/shadcn 6.4.2 → 6.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/shadcn",
-  "version": "6.4.2",
+  "version": "6.5.1",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -64,8 +64,8 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.4.x",
-    "@rjsf/utils": "^6.4.x",
+    "@rjsf/core": "^6.5.x",
+    "@rjsf/utils": "^6.5.x",
     "react": ">=18"
   },
   "engineStrict": false,
@@ -73,11 +73,11 @@
     "node": ">=20"
   },
   "devDependencies": {
-    "@rjsf/core": "6.4.2",
-    "@rjsf/snapshot-tests": "6.4.2",
-    "@rjsf/utils": "6.4.2",
-    "@rjsf/validator-ajv8": "6.4.2",
-    "@tailwindcss/cli": "^4.1.18",
+    "@rjsf/core": "6.5.1",
+    "@rjsf/snapshot-tests": "6.5.1",
+    "@rjsf/utils": "6.5.1",
+    "@rjsf/validator-ajv8": "6.5.1",
+    "@tailwindcss/cli": "^4.2.2",
     "eslint": "^8.57.1",
     "jsdom": "^27.0.1",
     "tailwindcss": "^4.1.18"
@@ -97,10 +97,10 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "lodash": "^4.17.23",
-    "lodash-es": "^4.17.23",
+    "lodash": "^4.18.1",
+    "lodash-es": "^4.18.1",
     "lucide-react": "^0.548.0",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^13.0.0"
   },

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,9 +1,10 @@
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   FormContextType,
   optionId,
   RJSFSchema,
@@ -40,12 +41,13 @@ export default function CheckboxesWidget<
   className,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
   const _onBlur = ({ target }: FocusEvent<HTMLButtonElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && (target as any).value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(target && (target as any).value, enumOptions, optionValueFormat, emptyValue));
   const _onFocus = ({ target }: FocusEvent<HTMLButtonElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && (target as any).value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(target && (target as any).value, enumOptions, optionValueFormat, emptyValue));
 
   return (
     <div className={cn({ 'flex flex-col gap-2': !inline, 'flex flex-row gap-4 flex-wrap': inline })}>

package/src/RadioWidget/RadioWidget.tsx

@@ -1,7 +1,9 @@
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsIsSelected,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   FormContextType,
   optionId,
   RJSFSchema,
@@ -32,12 +34,14 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   className,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
-  const _onChange = (value: string) => onChange(enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onChange = (value: string) =>
+    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
   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 inline = Boolean(options && options.inline);
 
@@ -64,7 +68,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               <div className='flex items-center gap-2' key={optionId(id, index)}>
                 <RadioGroupItem
                   checked={checked}
-                  value={index.toString()}
+                  value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                   id={optionId(id, index)}
                   disabled={itemDisabled}
                 />

package/src/SelectWidget/SelectWidget.tsx

@@ -1,7 +1,9 @@
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -33,23 +35,23 @@ export default function SelectWidget<
   onChange,
   onBlur,
   onFocus,
-  defaultValue,
   placeholder,
   rawErrors = [],
   className,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const _onFancyFocus = () => {
-    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, optEmptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, optEmptyValue));
   };
 
   const _onFancyBlur = () => {
-    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, optEmptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, optEmptyValue));
   };
 
   const items = (enumOptions as any)?.map(({ value, label }: any, index: number) => ({
-    value: multiple ? value : index.toString(),
+    value: multiple ? value : enumOptionValueEncoder(value, index, optionValueFormat),
     label: label,
     index,
     disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value),
@@ -62,9 +64,9 @@ export default function SelectWidget<
       {!multiple ? (
         <FancySelect
           items={items}
-          selected={enumOptionsIndexForValue<S>(value ?? defaultValue, enumOptions, false) as unknown as string}
+          selected={enumOptionSelectedValue<S>(value, enumOptions, false, optionValueFormat, '') as string}
           onValueChange={(selectedValue) => {
-            onChange(enumOptionsValueForIndex<S>(selectedValue, enumOptions, optEmptyValue));
+            onChange(enumOptionValueDecoder<S>(selectedValue, enumOptions, optionValueFormat, optEmptyValue));
           }}
           autoFocus={autofocus}
           disabled={disabled || readonly}
@@ -85,7 +87,7 @@ export default function SelectWidget<
           items={items}
           selected={value}
           onValueChange={(values) => {
-            onChange(enumOptionsValueForIndex<S>(values, enumOptions, optEmptyValue));
+            onChange(enumOptionValueDecoder<S>(values.map(String), enumOptions, optionValueFormat, optEmptyValue));
           }}
           onFocus={_onFancyFocus}
           onBlur={_onFancyBlur}

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -67,6 +67,7 @@ export default function WrapIfAdditionalTemplate<
             )}
             <div className='pl-0.5'>
               <Input
+                key={label}
                 required={required}
                 defaultValue={label}
                 disabled={disabled || readonly}