@rjsf/fluentui-rc 6.4.1 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/fluentui-rc",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "FluentUI React Components theme, fields and widgets for react-jsonschema-form",
   "scripts": {
     "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",
@@ -73,13 +73,13 @@
     "react": ">=18"
   },
   "devDependencies": {
-    "@fluentui/react-components": "^9.72.11",
-    "@fluentui/react-icons": "^2.0.318",
-    "@fluentui/react-migration-v0-v9": "^9.6.19",
-    "@rjsf/core": "6.4.1",
-    "@rjsf/snapshot-tests": "6.4.1",
-    "@rjsf/utils": "6.4.1",
-    "@rjsf/validator-ajv8": "6.4.1",
+    "@fluentui/react-components": "^9.73.5",
+    "@fluentui/react-icons": "^2.0.323",
+    "@fluentui/react-migration-v0-v9": "^9.6.25",
+    "@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"
   },
   "directories": {

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,10 +1,11 @@
 import { ChangeEvent, FocusEvent } from 'react';
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   labelValue,
   optionId,
   FormContextType,
@@ -40,6 +41,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 =
@@ -53,9 +55,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 (
     <>

package/src/RadioWidget/RadioWidget.tsx

@@ -1,8 +1,10 @@
 import { FocusEvent } from 'react';
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   labelValue,
   optionId,
   FormContextType,
@@ -32,13 +34,14 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   onFocus,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue, inline } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const _onChange = (_: any, data: RadioGroupOnChangeData) =>
-    onChange(enumOptionsValueForIndex<S>(data.value, enumOptions, emptyValue));
+    onChange(enumOptionValueDecoder<S>(data.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 selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions) ?? undefined;
 
@@ -67,7 +70,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               <Radio
                 id={optionId(id, index)}
                 label={option.label}
-                value={String(index)}
+                value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                 key={index}
                 disabled={disabled || itemDisabled || readonly}
               />

package/src/SelectWidget/SelectWidget.tsx

@@ -1,7 +1,9 @@
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   FormContextType,
   labelValue,
   RJSFSchema,
@@ -43,6 +45,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   placeholder,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
   let selectedIndexesAsArray: string[] = [];
@@ -61,7 +64,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   const _onFocus = () => onFocus(id, selectedIndexes);
   const _onChange = (_: any, data: OptionOnSelectData) => {
     const newValue = getValue(data, multiple);
-    return onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
+    return onChange(enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, optEmptyVal));
   };
   const showPlaceholderOption = !multiple && schema.default === undefined;
 
@@ -90,7 +93,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
           enumOptions.map(({ value, label }, i) => {
             const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
             return (
-              <Option key={i} value={String(i)} disabled={disabled}>
+              <Option key={i} value={enumOptionValueEncoder(value, i, optionValueFormat)} disabled={disabled}>
                 {label}
               </Option>
             );

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -94,6 +94,7 @@ export default function WrapIfAdditionalTemplate<
       <div className={classes.halfWidth}>
         <Field label={displayLabel ? keyLabel : undefined} required={required}>
           <Input
+            key={label}
             required={required}
             defaultValue={label}
             disabled={disabled || readonly}