@rjsf/primereact 6.4.1 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/primereact",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "PrimeReact theme, fields and widgets for react-jsonschema-form",
   "main": "dist/index.js",
   "module": "lib/index.js",
@@ -68,10 +68,10 @@
     "react": ">=18"
   },
   "devDependencies": {
-    "@rjsf/core": "6.4.1",
-    "@rjsf/snapshot-tests": "6.4.1",
-    "@rjsf/utils": "6.4.1",
-    "@rjsf/validator-ajv8": "6.4.1",
+    "@rjsf/core": "6.5.0",
+    "@rjsf/snapshot-tests": "6.5.0",
+    "@rjsf/utils": "6.5.0",
+    "@rjsf/validator-ajv8": "6.5.0",
     "@rollup/plugin-replace": "^6.0.3",
     "eslint": "^8.57.1",
     "primeflex": "^4.0.0",

package/src/RadioWidget/RadioWidget.tsx

@@ -1,7 +1,9 @@
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsIsSelected,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   optionId,
   FormContextType,
   RJSFSchema,
@@ -21,9 +23,10 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const { id, htmlName, value, disabled, readonly, onChange, onBlur, onFocus, options } = props;
   const primeProps = (options.prime || {}) as object;
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const _onChange = (e: RadioButtonChangeEvent) => {
-    onChange(enumOptionsValueForIndex<S>(e.value, enumOptions, emptyValue));
+    onChange(enumOptionValueDecoder<S>(e.value, enumOptions, optionValueFormat, emptyValue));
   };
 
   const _onBlur = () => onBlur(id, value);
@@ -44,7 +47,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
                 onFocus={_onFocus}
                 onBlur={_onBlur}
                 onChange={_onChange}
-                value={String(index)}
+                value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                 checked={checked}
                 disabled={disabled || itemDisabled || readonly}
                 aria-describedby={ariaDescribedByIds(id)}

package/src/SelectWidget/SelectWidget.tsx

@@ -2,8 +2,10 @@ import { FocusEvent } from 'react';
 import { Dropdown } from 'primereact/dropdown';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -50,19 +52,19 @@ function SingleSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   ...dropdownProps
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
+  const optionValueFormat = getOptionValueFormat(options);
   const primeProps = (options.prime || {}) as object;
 
   multiple = typeof multiple === 'undefined' ? false : multiple;
 
   const emptyValue = multiple ? [] : '';
-  const isEmpty = typeof value === 'undefined' || (multiple && value.length < 1) || (!multiple && value === emptyValue);
 
-  const _onChange = (e: { value: any }) => onChange(enumOptionsValueForIndex<S>(e.value, enumOptions, optEmptyVal));
+  const _onChange = (e: { value: any }) =>
+    onChange(enumOptionValueDecoder<S>(e.value, enumOptions, optionValueFormat, optEmptyVal));
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
   const { ...dropdownRemainingProps } = dropdownProps;
 
   return (
@@ -70,10 +72,10 @@ function SingleSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F
       id={id}
       name={htmlName || id}
       {...primeProps}
-      value={!isEmpty && typeof selectedIndexes !== 'undefined' ? selectedIndexes : emptyValue}
+      value={enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue)}
       options={(enumOptions ?? []).map(({ value, label }, i: number) => ({
         label,
-        value: String(i),
+        value: enumOptionValueEncoder(value, i, optionValueFormat),
         disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
       }))}
       onChange={_onChange}
@@ -103,27 +105,27 @@ function MultiSelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   onFocus,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
+  const optionValueFormat = getOptionValueFormat(options);
   const primeProps = (options.prime || {}) as object;
 
   const emptyValue = multiple ? [] : '';
-  const isEmpty = typeof value === 'undefined' || (multiple && value.length < 1) || (!multiple && value === emptyValue);
 
-  const _onChange = (e: { value: any }) => onChange(enumOptionsValueForIndex<S>(e.value, enumOptions, optEmptyVal));
+  const _onChange = (e: { value: any }) =>
+    onChange(enumOptionValueDecoder<S>(e.value, enumOptions, optionValueFormat, optEmptyVal));
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
 
   return (
     <MultiSelect
       id={id}
       name={htmlName || id}
       {...primeProps}
-      value={!isEmpty && typeof selectedIndexes !== 'undefined' ? selectedIndexes : emptyValue}
+      value={enumOptionSelectedValue<S>(value, enumOptions, multiple, optionValueFormat, emptyValue)}
       options={(enumOptions ?? []).map(({ value, label }, i: number) => ({
         label,
-        value: String(i),
+        value: enumOptionValueEncoder(value, i, optionValueFormat),
         disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
       }))}
       onChange={_onChange}

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -62,6 +62,7 @@ export default function WrapIfAdditionalTemplate<
           </label>
         )}
         <InputText
+          key={label}
           id={`${id}-key`}
           name={`${id}-key`}
           defaultValue={label}