@rjsf/semantic-ui 6.4.1 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/semantic-ui",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -67,10 +67,10 @@
     "semantic-ui-react": "^2.1.3"
   },
   "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",
     "atob": "^2.1.2",
     "eslint": "^8.57.1",
     "semantic-ui-react": "^2.1.5"

package/src/RadioWidget/RadioWidget.tsx

@@ -1,8 +1,10 @@
 import { FormEvent } from 'react';
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsIsSelected,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   optionId,
   FormContextType,
   RJSFSchema,
@@ -36,13 +38,14 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
     rawErrors = [],
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
   const semanticProps = getSemanticProps<T, S, F>({
     formContext: registry.formContext,
     options,
     uiSchema,
   });
   const _onChange = (_: FormEvent<HTMLInputElement>, { value: eventValue }: CheckboxProps) => {
-    return onChange(enumOptionsValueForIndex<S>(eventValue!, enumOptions, emptyValue));
+    return onChange(enumOptionValueDecoder<S>(String(eventValue!), enumOptions, optionValueFormat, emptyValue));
   };
 
   const _onBlur = () => onBlur(id, value);
@@ -65,7 +68,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               onBlur={_onBlur}
               onChange={_onChange}
               label={option.label}
-              value={String(index)}
+              value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
               error={rawErrors.length > 0}
               key={index}
               checked={checked}

package/src/SelectWidget/SelectWidget.tsx

@@ -1,11 +1,14 @@
 import { FocusEvent, SyntheticEvent } from 'react';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   labelValue,
   EnumOptionsType,
   FormContextType,
+  OptionValueFormat,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
@@ -28,13 +31,14 @@ function createDefaultValueOptionsForDropDown<S extends StrictRJSFSchema = RJSFS
   enumDisabled?: UIOptionsType['enumDisabled'],
   showPlaceholderOption?: boolean,
   placeholder?: string,
+  format: OptionValueFormat = 'indexed',
 ) {
   const disabledOptions = enumDisabled || [];
   const options: DropdownItemProps[] = map(enumOptions, ({ label, value }, index) => ({
     disabled: disabledOptions.indexOf(value) !== -1,
     key: label,
     text: label,
-    value: String(index),
+    value: enumOptionValueEncoder(value, index, format),
   }));
   if (showPlaceholderOption) {
     options.unshift({ value: '', text: placeholder || '' });
@@ -85,22 +89,22 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   });
   const { enumDisabled, enumOptions, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : '';
+  const optionValueFormat = getOptionValueFormat(options);
   const showPlaceholderOption = !multiple && schema.default === undefined;
   const dropdownOptions = createDefaultValueOptionsForDropDown<S>(
     enumOptions,
     enumDisabled,
     showPlaceholderOption,
     placeholder,
+    optionValueFormat,
   );
   const _onChange = (_: SyntheticEvent<HTMLElement>, { value }: DropdownProps) =>
-    onChange(enumOptionsValueForIndex<S>(value as string[], enumOptions, optEmptyVal));
+    onChange(enumOptionValueDecoder<S>(value as string[], enumOptions, optionValueFormat, optEmptyVal));
   // eslint-disable-next-line no-shadow
   const _onBlur = (_: FocusEvent<HTMLElement>, { target }: DropdownProps) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
   const _onFocus = (_: FocusEvent<HTMLElement>, { target }: DropdownProps) =>
-    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 (
     <Form.Dropdown
       key={id}
@@ -108,7 +112,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
       name={htmlName || id}
       label={labelValue(label || undefined, hideLabel, false)}
       multiple={typeof multiple === 'undefined' ? false : multiple}
-      value={typeof value === 'undefined' ? emptyValue : selectedIndexes}
+      value={enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue)}
       error={rawErrors.length > 0}
       disabled={disabled}
       placeholder={placeholder}

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -60,6 +60,7 @@ export default function WrapIfAdditionalTemplate<
           <Grid.Column width={7} className='form-additional'>
             <Form.Group widths='equal' grouped>
               <Form.Input
+                key={label}
                 className='form-group'
                 hasFeedback
                 fluid