@rjsf/semantic-ui 6.6.1 → 6.7.0

package/src/RadioWidget/RadioWidget.tsx

@@ -1,4 +1,5 @@
-import { FormEvent } from 'react';
+import type { FormEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
@@ -6,12 +7,9 @@ import {
   enumOptionsIsSelected,
   getOptionValueFormat,
   optionId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
-import { CheckboxProps, Form, Radio } from 'semantic-ui-react';
+import type { CheckboxProps } from 'semantic-ui-react';
+import { Form, Radio } from 'semantic-ui-react';
 
 import { getSemanticProps } from '../util';
 
@@ -45,19 +43,18 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
     options,
     uiSchema,
   });
-  const _onChange = (_: FormEvent<HTMLInputElement>, { value: eventValue }: CheckboxProps) => {
-    return onChange(enumOptionValueDecoder<S>(String(eventValue!), enumOptions, optionValueFormat, emptyValue));
-  };
+  const handleChange = (_: FormEvent<HTMLInputElement>, { value: eventValue }: CheckboxProps) =>
+    onChange(enumOptionValueDecoder<S>(String(eventValue!), enumOptions, optionValueFormat, emptyValue));
 
-  const _onBlur = () => onBlur(id, value);
-  const _onFocus = () => onFocus(id, value);
+  const handleBlur = () => onBlur(id, value);
+  const handleFocus = () => onFocus(id, value);
   const inlineOption = options.inline ? { inline: true } : { grouped: true };
   return (
     <Form.Group {...inlineOption}>
       {Array.isArray(enumOptions) &&
         enumOptions.map((option, index) => {
           const checked = enumOptionsIsSelected<S>(option.value, value);
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
           return (
             <Form.Field
               required={required}
@@ -65,13 +62,13 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               id={optionId(id, index)}
               name={htmlName || id}
               {...semanticProps}
-              onFocus={_onFocus}
-              onBlur={_onBlur}
-              onChange={_onChange}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onChange={handleChange}
               label={option.label}
               value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
               error={rawErrors.length > 0}
-              key={index}
+              key={String(option.value)}
               checked={checked}
               disabled={disabled || itemDisabled || readonly}
               aria-describedby={ariaDescribedByIds(id)}

package/src/RangeWidget/RangeWidget.tsx

@@ -1,5 +1,6 @@
-import { ChangeEvent } from 'react';
-import { ariaDescribedByIds, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, rangeSpec } from '@rjsf/utils';
+import type { ChangeEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, rangeSpec } from '@rjsf/utils';
 import { Input } from 'semantic-ui-react';
 
 import { getSemanticProps } from '../util';
@@ -36,11 +37,11 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
     },
   });
 
-  // eslint-disable-next-line no-shadow
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange && onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = () => onBlur && onBlur(id, value);
-  const _onFocus = () => onFocus && onFocus(id, value);
+  // oxlint-disable-next-line no-shadow
+  const handleChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange?.(value === '' ? options.emptyValue : value);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
 
   return (
     <>
@@ -55,9 +56,9 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         {...semanticProps}
         value={value || ''}
         error={rawErrors.length > 0}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id)}
       />
       <span>{value}</span>

package/src/SelectWidget/SelectWidget.tsx

@@ -1,11 +1,5 @@
-import { FocusEvent, SyntheticEvent } from 'react';
-import {
-  ariaDescribedByIds,
-  enumOptionSelectedValue,
-  enumOptionValueDecoder,
-  enumOptionValueEncoder,
-  getOptionValueFormat,
-  labelValue,
+import type { FocusEvent, SyntheticEvent } from 'react';
+import type {
   EnumOptionsType,
   FormContextType,
   OptionValueFormat,
@@ -14,8 +8,19 @@ import {
   WidgetProps,
   UIOptionsType,
 } from '@rjsf/utils';
+import {
+  ariaDescribedByIds,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
+  labelValue,
+  logUnsupportedDefaultForEnum,
+  SelectedOptionDescription,
+} from '@rjsf/utils';
 import map from 'lodash/map';
-import { Form, DropdownProps, DropdownItemProps } from 'semantic-ui-react';
+import type { DropdownProps, DropdownItemProps } from 'semantic-ui-react';
+import { Form } from 'semantic-ui-react';
 
 import { getSemanticProps } from '../util';
 
@@ -36,7 +41,7 @@ function createDefaultValueOptionsForDropDown<S extends StrictRJSFSchema = RJSFS
 ) {
   const disabledOptions = enumDisabled || [];
   const options: DropdownItemProps[] = map(enumOptions, ({ label, value }, index) => ({
-    disabled: disabledOptions.indexOf(value) !== -1,
+    disabled: disabledOptions.includes(value),
     key: label,
     text: label,
     value: enumOptionValueEncoder(value, index, format),
@@ -92,6 +97,7 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const emptyValue = multiple ? [] : '';
   const optionValueFormat = getOptionValueFormat(options);
   const showPlaceholderOption = !multiple && schema.default === undefined;
+  logUnsupportedDefaultForEnum<S>(id, schema, enumOptions, multiple);
   const dropdownOptions = createDefaultValueOptionsForDropDown<S>(
     enumOptions,
     enumDisabled,
@@ -99,33 +105,35 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     placeholder,
     optionValueFormat,
   );
-  const _onChange = (_: SyntheticEvent<HTMLElement>, { value }: DropdownProps) =>
-    onChange(enumOptionValueDecoder<S>(value as string[], enumOptions, optionValueFormat, optEmptyVal));
-  // eslint-disable-next-line no-shadow
-  const _onBlur = (_: FocusEvent<HTMLElement>, { target }: DropdownProps) =>
-    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
-  const _onFocus = (_: FocusEvent<HTMLElement>, { target }: DropdownProps) =>
-    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+  const handleChange = (_: SyntheticEvent<HTMLElement>, { value: enumValue }: DropdownProps) =>
+    onChange(enumOptionValueDecoder<S>(enumValue as string[], enumOptions, optionValueFormat, optEmptyVal));
+  const handleBlur = (_: FocusEvent<HTMLElement>, { target }: DropdownProps) =>
+    onBlur(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, optEmptyVal));
+  const handleFocus = (_: FocusEvent<HTMLElement>, { target }: DropdownProps) =>
+    onFocus(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, optEmptyVal));
   return (
-    <Form.Dropdown
-      key={id}
-      id={id}
-      name={htmlName || id}
-      label={labelValue(label || undefined, hideLabel, false)}
-      multiple={typeof multiple === 'undefined' ? false : multiple}
-      value={enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue)}
-      error={rawErrors.length > 0}
-      disabled={disabled}
-      placeholder={placeholder}
-      {...semanticProps}
-      required={required}
-      autoFocus={autofocus}
-      readOnly={readonly}
-      options={dropdownOptions}
-      onChange={_onChange}
-      onBlur={_onBlur}
-      onFocus={_onFocus}
-      aria-describedby={ariaDescribedByIds(id)}
-    />
+    <>
+      <Form.Dropdown
+        key={id}
+        id={id}
+        name={htmlName || id}
+        label={labelValue(label || undefined, hideLabel, false)}
+        multiple={typeof multiple === 'undefined' ? false : multiple}
+        value={enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue)}
+        error={rawErrors.length > 0}
+        disabled={disabled}
+        placeholder={placeholder}
+        {...semanticProps}
+        required={required}
+        autoFocus={autofocus}
+        readOnly={readonly}
+        options={dropdownOptions}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        aria-describedby={ariaDescribedByIds(id)}
+      />
+      <SelectedOptionDescription {...props} />
+    </>
   );
 }

package/src/SemanticUIForm/SemanticUIForm.ts

@@ -1,6 +1,7 @@
-import { ComponentType } from 'react';
-import { withTheme, FormProps } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ComponentType } from 'react';
+import type { FormProps } from '@rjsf/core';
+import { withTheme } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { generateTheme } from '../Theme';
 

package/src/SubmitButton/SubmitButton.tsx

@@ -1,4 +1,5 @@
-import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { getSubmitButtonOptions } from '@rjsf/utils';
 import { Button } from 'semantic-ui-react';
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form

package/src/Templates/Templates.ts

@@ -1,9 +1,10 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
 import AddButton from '../AddButton';
 import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';
 import ArrayFieldTemplate from '../ArrayFieldTemplate';
 import BaseInputTemplate from '../BaseInputTemplate';
+import CyclicSchemaExpandTemplate from '../CyclicSchemaExpandTemplate';
 import DescriptionField from '../DescriptionField';
 import ErrorList from '../ErrorList';
 import FieldErrorTemplate from '../FieldErrorTemplate';
@@ -27,6 +28,7 @@ export function generateTemplates<
     ArrayFieldItemTemplate,
     ArrayFieldTemplate,
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     ButtonTemplates: {
       AddButton,
       CopyButton,

package/src/TextareaWidget/TextareaWidget.tsx

@@ -1,12 +1,6 @@
-import { ChangeEvent } from 'react';
-import {
-  ariaDescribedByIds,
-  labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { ChangeEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue } from '@rjsf/utils';
 import { Form } from 'semantic-ui-react';
 
 import { getSemanticProps } from '../util';
@@ -43,11 +37,11 @@ export default function TextareaWidget<
     options,
     defaultSchemaProps: { inverted: 'false' },
   });
-  // eslint-disable-next-line no-shadow
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
-    onChange && onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = () => onBlur && onBlur(id, value);
-  const _onFocus = () => onFocus && onFocus(id, value);
+  // oxlint-disable-next-line no-shadow
+  const handleChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
+    onChange?.(value === '' ? options.emptyValue : value);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
   return (
     <Form.TextArea
       id={id}
@@ -62,9 +56,9 @@ export default function TextareaWidget<
       value={value || ''}
       error={rawErrors.length > 0}
       rows={options.rows || 5}
-      onChange={_onChange}
-      onBlur={_onBlur}
-      onFocus={_onFocus}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
       aria-describedby={ariaDescribedByIds(id)}
     />
   );

package/src/Theme/Theme.ts

@@ -1,5 +1,5 @@
-import { ThemeProps } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ThemeProps } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { Form as SuiForm } from 'semantic-ui-react';
 
 import { generateTemplates } from '../Templates';

package/src/TitleField/TitleField.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import { Grid, Header } from 'semantic-ui-react';
 
 import { getSemanticProps } from '../util';

package/src/Widgets/Widgets.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
 import CheckboxWidget from '../CheckboxWidget/CheckboxWidget';

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,12 +1,5 @@
-import {
-  ADDITIONAL_PROPERTY_FLAG,
-  buttonId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  WrapIfAdditionalTemplateProps,
-} from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+import { ADDITIONAL_PROPERTY_FLAG, buttonId, TranslatableString } from '@rjsf/utils';
 import { Form, Grid } from 'semantic-ui-react';
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
@@ -64,17 +57,17 @@ export default function WrapIfAdditionalTemplate<
                 className='form-group'
                 hasFeedback
                 fluid
-                htmlFor={`${id}`}
+                htmlFor={id}
                 label={displayLabel ? keyLabel : undefined}
                 required={required}
                 defaultValue={label}
                 disabled={disabled || (readonlyAsDisabled && readonly)}
-                id={`${id}`}
-                name={`${id}`}
+                id={id}
+                name={id}
                 onBlur={!readonly ? onKeyRenameBlur : undefined}
                 style={wrapperStyle}
                 type='text'
-              ></Form.Input>
+              />
             </Form.Group>
           </Grid.Column>
           <Grid.Column width={7} className='form-additional' verticalAlign='middle'>

package/src/util.tsx

@@ -1,32 +1,32 @@
-import { ElementType } from 'react';
-import {
+import type { ElementType } from 'react';
+import type {
   UiSchema,
   GenericObjectType,
-  getUiOptions,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
   UIOptionsType,
 } from '@rjsf/utils';
+import { getUiOptions } from '@rjsf/utils';
 
-export type SemanticPropsTypes<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = {
+export interface SemanticPropsTypes<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
   formContext?: F;
   uiSchema?: UiSchema<T, S, F>;
   options?: UIOptionsType<T, S, F>;
   defaultSchemaProps?: GenericObjectType;
   defaultContextProps?: GenericObjectType;
-};
+}
 
-export type SemanticErrorPropsType<
+export interface SemanticErrorPropsType<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
-> = {
+> {
   formContext?: F;
   uiSchema?: UiSchema<T, S, F>;
   options?: UIOptionsType<T, S, F>;
   defaultProps?: GenericObjectType;
-};
+}
 
 export type WrapProps = GenericObjectType & {
   wrap: boolean;
@@ -55,14 +55,13 @@ export function getSemanticProps<T = any, S extends StrictRJSFSchema = RJSFSchem
   const schemaProps = getUiOptions<T, S, F>(uiSchema).semantic;
   const optionProps = options.semantic;
   // formContext props should overide other props
-  return Object.assign(
-    {},
-    { ...defaultSchemaProps },
-    { ...defaultContextProps },
-    schemaProps,
-    optionProps,
-    formContextProps,
-  );
+  return {
+    ...defaultSchemaProps,
+    ...defaultContextProps,
+    ...schemaProps,
+    ...optionProps,
+    ...formContextProps,
+  };
 }
 
 /**
@@ -84,12 +83,12 @@ export function getSemanticErrorProps<
   options = {},
   defaultProps = { size: 'small', pointing: 'above' },
 }: SemanticErrorPropsType<T, S, F>) {
-  const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
+  const formContextProps = formContext.semantic?.errorOptions;
   const semanticOptions: GenericObjectType = getUiOptions<T, S, F>(uiSchema).semantic as GenericObjectType;
-  const schemaProps = semanticOptions && semanticOptions.errorOptions;
-  const optionProps = options.semantic && (options.semantic as GenericObjectType).errorOptions;
+  const schemaProps = semanticOptions?.errorOptions;
+  const optionProps = (options.semantic as GenericObjectType)?.errorOptions;
 
-  return Object.assign({}, { ...defaultProps }, schemaProps, optionProps, formContextProps);
+  return { ...defaultProps, ...schemaProps, ...optionProps, ...formContextProps };
 }
 
 /**
@@ -101,7 +100,7 @@ export function getSemanticErrorProps<
  * @param {Array} omit
  * @returns {string}
  */
-export function cleanClassNames(classNameArr: Array<string | undefined>, omit: string[] = []) {
+export function cleanClassNames(classNameArr: (string | undefined)[], omit: string[] = []) {
   // Split each arg on whitespace, and add it to an array. Skip false-y args
   // like "" and undefined.
   const classList = classNameArr