@rjsf/react-bootstrap 6.4.1 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/react-bootstrap",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -71,10 +71,10 @@
     "node": ">=20"
   },
   "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",
     "eslint": "^8.57.1",
     "react-bootstrap": "^2.10.10"
   },

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -2,10 +2,11 @@ import { ChangeEvent, FocusEvent } from 'react';
 import Form from 'react-bootstrap/Form';
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   optionId,
   FormContextType,
   RJSFSchema,
@@ -31,6 +32,7 @@ export default function CheckboxesWidget<
   onFocus,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
   const _onChange =
@@ -44,9 +46,9 @@ export default function CheckboxesWidget<
     };
 
   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));
 
   return (
     <Form.Group>

package/src/RadioWidget/RadioWidget.tsx

@@ -2,8 +2,10 @@ import { ChangeEvent, FocusEvent } from 'react';
 import Form from 'react-bootstrap/Form';
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsIsSelected,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   optionId,
   FormContextType,
   RJSFSchema,
@@ -24,13 +26,14 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   onFocus,
 }: 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 }: 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);
 
@@ -52,7 +55,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               disabled={disabled || itemDisabled || readonly}
               checked={checked}
               required={required}
-              value={String(index)}
+              value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
               onChange={_onChange}
               onBlur={_onBlur}
               onFocus={_onFocus}

package/src/SelectWidget/SelectWidget.tsx

@@ -2,9 +2,11 @@ import { ChangeEvent, FocusEvent } from 'react';
 import FormSelect from 'react-bootstrap/FormSelect';
 import {
   ariaDescribedByIds,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   FormContextType,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
@@ -34,6 +36,7 @@ export default function SelectWidget<
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
 
   const emptyValue = multiple ? [] : '';
+  const optionValueFormat = getOptionValueFormat(options);
 
   function getValue(event: FocusEvent | ChangeEvent | any, multiple?: boolean) {
     if (multiple) {
@@ -45,14 +48,14 @@ export default function SelectWidget<
       return event.target.value;
     }
   }
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === undefined;
 
   return (
     <FormSelect
       id={id}
       name={htmlName || id}
-      value={typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes}
+      value={selectValue}
       required={required}
       multiple={multiple}
       disabled={disabled || readonly}
@@ -62,19 +65,19 @@ export default function SelectWidget<
         onBlur &&
         ((event: FocusEvent) => {
           const newValue = getValue(event, multiple);
-          onBlur(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyValue));
+          onBlur(id, enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, optEmptyValue));
         })
       }
       onFocus={
         onFocus &&
         ((event: FocusEvent) => {
           const newValue = getValue(event, multiple);
-          onFocus(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyValue));
+          onFocus(id, enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, optEmptyValue));
         })
       }
       onChange={(event: ChangeEvent) => {
         const newValue = getValue(event, multiple);
-        onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyValue));
+        onChange(enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, optEmptyValue));
       }}
       aria-describedby={ariaDescribedByIds(id)}
     >
@@ -82,7 +85,7 @@ export default function SelectWidget<
       {(enumOptions as any).map(({ value, label }: any, i: number) => {
         const disabled: any = Array.isArray(enumDisabled) && (enumDisabled as any).indexOf(value) != -1;
         return (
-          <option key={i} id={label} value={String(i)} disabled={disabled}>
+          <option key={i} id={label} value={enumOptionValueEncoder(value, i, optionValueFormat)} disabled={disabled}>
             {label}
           </option>
         );

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -59,6 +59,7 @@ export default function WrapIfAdditionalTemplate<
         <Form.Group>
           {displayLabel && <Form.Label htmlFor={keyId}>{keyLabel}</Form.Label>}
           <Form.Control
+            key={label}
             required={required}
             defaultValue={label}
             disabled={disabled || readonly}