@rjsf/semantic-ui 6.6.0 → 6.6.2

package/lib/util.d.ts

@@ -1,18 +1,18 @@
-import { ElementType } from 'react';
-import { UiSchema, GenericObjectType, FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType } from '@rjsf/utils';
-export type SemanticPropsTypes<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = {
+import type { ElementType } from 'react';
+import type { UiSchema, GenericObjectType, FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType } from '@rjsf/utils';
+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<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> = {
+}
+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;
     component?: ElementType;
@@ -48,7 +48,7 @@ export declare function getSemanticErrorProps<T = any, S extends StrictRJSFSchem
  * @param {Array} omit
  * @returns {string}
  */
-export declare function cleanClassNames(classNameArr: Array<string | undefined>, omit?: string[]): string;
+export declare function cleanClassNames(classNameArr: (string | undefined)[], omit?: string[]): string;
 /**
  *
  * @param {boolean} wrap

package/lib/util.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getUiOptions, } from '@rjsf/utils';
+import { getUiOptions } from '@rjsf/utils';
 /**
  * Extract props meant for semantic UI components from props that are
  * passed to Widgets, Templates and Fields.
@@ -16,7 +16,13 @@ export function getSemanticProps({ formContext = {}, uiSchema = {}, options = {}
     const schemaProps = getUiOptions(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,
+    };
 }
 /**
  * Extract error props meant for semantic UI components from props that are
@@ -32,7 +38,7 @@ export function getSemanticErrorProps({ formContext = {}, uiSchema = {}, options
     const semanticOptions = getUiOptions(uiSchema).semantic;
     const schemaProps = semanticOptions && semanticOptions.errorOptions;
     const optionProps = options.semantic && options.semantic.errorOptions;
-    return Object.assign({}, { ...defaultProps }, schemaProps, optionProps, formContextProps);
+    return { ...defaultProps, ...schemaProps, ...optionProps, ...formContextProps };
 }
 /**
  * Combine multiple strings containing class names into a single string,

package/lib/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.tsx"],"names":[],"mappings":";AACA,OAAO,EAGL,YAAY,GAKb,MAAM,aAAa,CAAC;AA0BrB;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAAoF,EAClH,WAAW,GAAG,EAAO,EACrB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,kBAAkB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EACrD,mBAAmB,GAAG,EAAE,GACI;IAC5B,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,CAAC;IAC9C,MAAM,WAAW,GAAG,YAAY,CAAU,QAAQ,CAAC,CAAC,QAAQ,CAAC;IAC7D,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC;IACrC,+CAA+C;IAC/C,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF,EAAE,GAAG,kBAAkB,EAAE,EACzB,EAAE,GAAG,mBAAmB,EAAE,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,CACjB,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CAInC,EACA,WAAW,GAAG,EAAO,EACrB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,YAAY,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GACnB;IAChC,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC;IACnF,MAAM,eAAe,GAAsB,YAAY,CAAU,QAAQ,CAAC,CAAC,QAA6B,CAAC;IACzG,MAAM,WAAW,GAAG,eAAe,IAAI,eAAe,CAAC,YAAY,CAAC;IACpE,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,IAAK,OAAO,CAAC,QAA8B,CAAC,YAAY,CAAC;IAE7F,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,GAAG,YAAY,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC;AAC5F,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,YAAuC,EAAE,OAAiB,EAAE;IAC1F,0EAA0E;IAC1E,yBAAyB;IACzB,MAAM,SAAS,GAAG,YAAY;SAC3B,MAAM,CAAC,OAAO,CAAC;SACf,MAAM,CAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9F,oEAAoE;IACpE,6BAA6B;IAC7B,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9E,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,EAAa;IACnF,OAAO,IAAI,CAAC,CAAC,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC1D,CAAC"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AA0B3C;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAAoF,EAClH,WAAW,GAAG,EAAO,EACrB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,kBAAkB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EACrD,mBAAmB,GAAG,EAAE,GACI;IAC5B,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,CAAC;IAC9C,MAAM,WAAW,GAAG,YAAY,CAAU,QAAQ,CAAC,CAAC,QAAQ,CAAC;IAC7D,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC;IACrC,+CAA+C;IAC/C,OAAO;QACL,GAAG,kBAAkB;QACrB,GAAG,mBAAmB;QACtB,GAAG,WAAW;QACd,GAAG,WAAW;QACd,GAAG,gBAAgB;KACpB,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CAInC,EACA,WAAW,GAAG,EAAO,EACrB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,EAAE,EACZ,YAAY,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GACnB;IAChC,MAAM,gBAAgB,GAAG,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC;IACnF,MAAM,eAAe,GAAsB,YAAY,CAAU,QAAQ,CAAC,CAAC,QAA6B,CAAC;IACzG,MAAM,WAAW,GAAG,eAAe,IAAI,eAAe,CAAC,YAAY,CAAC;IACpE,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,IAAK,OAAO,CAAC,QAA8B,CAAC,YAAY,CAAC;IAE7F,OAAO,EAAE,GAAG,YAAY,EAAE,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,GAAG,gBAAgB,EAAE,CAAC;AAClF,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,YAAoC,EAAE,OAAiB,EAAE;IACvF,0EAA0E;IAC1E,yBAAyB;IACzB,MAAM,SAAS,GAAG,YAAY;SAC3B,MAAM,CAAC,OAAO,CAAC;SACf,MAAM,CAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9F,oEAAoE;IACpE,6BAA6B;IAC7B,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9E,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,EAAa;IACnF,OAAO,IAAI,CAAC,CAAC,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC1D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/semantic-ui",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "main": "dist/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -53,7 +53,7 @@
     "lint": "oxlint src test",
     "precommit": "lint-staged",
     "test": "vitest run",
-    "test:update": "vitest run --update-snapshots"
+    "test:update": "vitest run --update"
   },
   "lint-staged": {
     "{src,test}/**/*.ts(x)": [
@@ -62,16 +62,16 @@
     ]
   },
   "peerDependencies": {
-    "@rjsf/core": "^6.5.x",
-    "@rjsf/utils": "^6.5.x",
+    "@rjsf/core": "^6.6.x",
+    "@rjsf/utils": "^6.6.x",
     "react": ">=18",
     "semantic-ui-react": "^2.1.3"
   },
   "devDependencies": {
-    "@rjsf/core": "6.6.0",
-    "@rjsf/snapshot-tests": "6.6.0",
-    "@rjsf/utils": "6.6.0",
-    "@rjsf/validator-ajv8": "6.6.0",
+    "@rjsf/core": "6.6.2",
+    "@rjsf/snapshot-tests": "6.6.2",
+    "@rjsf/utils": "6.6.2",
+    "@rjsf/validator-ajv8": "6.6.2",
     "atob": "^2.1.2",
     "semantic-ui-react": "^2.1.5"
   },

package/src/AddButton/AddButton.tsx

@@ -1,7 +1,9 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
-import { Button, Icon, ButtonProps } from 'semantic-ui-react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
+import type { ButtonProps } from 'semantic-ui-react';
+import { Button, Icon } from 'semantic-ui-react';
 
-import { SemanticIconButtonProps } from '../IconButton';
+import type { SemanticIconButtonProps } from '../IconButton';
 
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,11 +1,5 @@
-import {
-  ArrayFieldItemTemplateProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  getUiOptions,
-  getTemplate,
-} from '@rjsf/utils';
+import type { ArrayFieldItemTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getUiOptions, getTemplate } from '@rjsf/utils';
 import { Button, Grid, Segment } from 'semantic-ui-react';
 
 import { getSemanticProps, MaybeWrap } from '../util';

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,13 +1,5 @@
-import {
-  getTemplate,
-  getUiOptions,
-  isFixedItems,
-  ArrayFieldTemplateProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  buttonId,
-} from '@rjsf/utils';
+import type { ArrayFieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions, isFixedItems, buttonId } from '@rjsf/utils';
 
 import { cleanClassNames } from '../util';
 

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,15 +1,8 @@
-import { ChangeEvent, MouseEvent, useCallback } from 'react';
+import type { ChangeEvent, MouseEvent } from 'react';
+import { useCallback } from 'react';
 import { SchemaExamples } from '@rjsf/core';
-import {
-  ariaDescribedByIds,
-  BaseInputTemplateProps,
-  examplesId,
-  getInputProps,
-  labelValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { BaseInputTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ariaDescribedByIds, examplesId, getInputProps, labelValue } from '@rjsf/utils';
 import { Form } from 'semantic-ui-react';
 
 import { getSemanticProps } from '../util';
@@ -54,11 +47,11 @@ export default function BaseInputTemplate<
     formContext: registry.formContext,
     options,
   });
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = () => onBlur && onBlur(id, value);
-  const _onFocus = () => onFocus && onFocus(id, value);
-  const _onClear = useCallback(
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(newValue === '' ? options.emptyValue : newValue);
+  const handleBlur = () => onBlur && onBlur(id, value);
+  const handleFocus = () => onFocus && onFocus(id, value);
+  const handleClear = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
@@ -83,13 +76,13 @@ export default function BaseInputTemplate<
         {...semanticProps}
         value={value || value === 0 ? value : ''}
         error={rawErrors.length > 0}
-        onChange={onChangeOverride || _onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={onChangeOverride || handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       {options.allowClearTextInputs && !readonly && !disabled && value && (
-        <ClearButton registry={registry} onClick={_onClear} />
+        <ClearButton registry={registry} onClick={handleClear} />
       )}
       <SchemaExamples id={id} schema={schema} />
     </>

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -1,16 +1,8 @@
-import { FormEvent } from 'react';
-import {
-  ariaDescribedByIds,
-  descriptionId,
-  getTemplate,
-  labelValue,
-  schemaRequiresTrueValue,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
-import { Form, CheckboxProps } from 'semantic-ui-react';
+import type { FormEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, descriptionId, getTemplate, labelValue, schemaRequiresTrueValue } from '@rjsf/utils';
+import type { CheckboxProps } from 'semantic-ui-react';
+import { Form } from 'semantic-ui-react';
 
 import { getSemanticProps } from '../util';
 
@@ -59,10 +51,10 @@ export default function CheckboxWidget<
   // the "required" attribute if the field value must be "true", due to the
   // "const" or "enum" keywords
   const required = schemaRequiresTrueValue<S>(schema);
-  const checked = value == 'true' || value == true;
-  const _onChange = (_: FormEvent<HTMLInputElement>, data: CheckboxProps) => onChange && onChange(data.checked);
-  const _onBlur: React.FocusEventHandler<HTMLInputElement> = () => onBlur && onBlur(id, value);
-  const _onFocus: React.FocusEventHandler<HTMLInputElement> = () => onFocus && onFocus(id, value);
+  const checked = value === 'true' || value === true;
+  const handleChange = (_: FormEvent<HTMLInputElement>, data: CheckboxProps) => onChange && onChange(data.checked);
+  const handleBlur: React.FocusEventHandler<HTMLInputElement> = () => onBlur && onBlur(id, value);
+  const handleFocus: React.FocusEventHandler<HTMLInputElement> = () => onFocus && onFocus(id, value);
   const description = options.description ?? schema.description;
 
   return (
@@ -84,9 +76,9 @@ export default function CheckboxWidget<
         {...semanticProps}
         checked={typeof value === 'undefined' ? false : checked}
         error={rawErrors.length > 0}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         required={required}
         label={labelValue(label, hideLabel, false)}
         aria-describedby={ariaDescribedByIds(id)}

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,4 +1,5 @@
-import { ChangeEvent } from 'react';
+import type { ChangeEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionsDeselectValue,
@@ -7,10 +8,6 @@ import {
   getTemplate,
   optionId,
   titleId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 import { Form } from 'semantic-ui-react';
 
@@ -55,10 +52,10 @@ export default function CheckboxesWidget<
       inverted: 'false',
     },
   });
-  const _onChange =
+  const handleChange =
     (index: number) =>
     ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
-      // eslint-disable-next-line no-shadow
+      // oxlint-disable-next-line no-shadow
       if (checked) {
         onChange(enumOptionsSelectValue<S>(index, checkboxesValues, enumOptions));
       } else {
@@ -66,8 +63,8 @@ export default function CheckboxesWidget<
       }
     };
 
-  const _onBlur = () => onBlur(id, value);
-  const _onFocus = () => onFocus(id, value);
+  const handleBlur = () => onBlur(id, value);
+  const handleFocus = () => onFocus(id, value);
   const inlineOption = inline ? { inline: true } : { grouped: true };
   return (
     <>
@@ -78,21 +75,21 @@ export default function CheckboxesWidget<
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, index) => {
             const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
-            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
             return (
               <Form.Checkbox
                 id={optionId(id, index)}
                 name={htmlName || id}
-                key={index}
+                key={String(option.value)}
                 label={option.label}
                 {...semanticProps}
                 checked={checked}
                 error={rawErrors.length > 0}
                 disabled={disabled || itemDisabled || readonly}
                 autoFocus={autofocus && index === 0}
-                onChange={_onChange(index)}
-                onBlur={_onBlur}
-                onFocus={_onFocus}
+                onChange={handleChange(index)}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
                 aria-describedby={ariaDescribedByIds(id)}
               />
             );

package/src/DescriptionField/DescriptionField.tsx

@@ -1,5 +1,5 @@
 import { RichDescription } from '@rjsf/core';
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *

package/src/ErrorList/ErrorList.tsx

@@ -1,4 +1,5 @@
-import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import type { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
 import { Message } from 'semantic-ui-react';
 
 /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
@@ -15,6 +16,7 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
       <Message.Header>{translateString(TranslatableString.ErrorsLabel)}</Message.Header>
       <Message.List>
         {errors.map((error, index) => (
+          // oxlint-disable-next-line react/no-array-index-key
           <Message.Item key={`error-${index}`}>{error.stack}</Message.Item>
         ))}
       </Message.List>

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -1,4 +1,5 @@
-import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { errorId } from '@rjsf/utils';
 import uniqueId from 'lodash/uniqueId';
 import { Label, List } from 'semantic-ui-react';
 

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,5 +1,6 @@
 import { RichHelp } from '@rjsf/core';
-import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import type { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { helpId } from '@rjsf/utils';
 import { Message } from 'semantic-ui-react';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field

package/src/FieldTemplate/FieldTemplate.tsx

@@ -1,11 +1,5 @@
-import {
-  FieldTemplateProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  getTemplate,
-  getUiOptions,
-} from '@rjsf/utils';
+import type { FieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 import { Form } from 'semantic-ui-react';
 
 import { getSemanticProps, MaybeWrap } from '../util';

package/src/GridTemplate/GridTemplate.tsx

@@ -1,4 +1,4 @@
-import { GridTemplateProps } from '@rjsf/utils';
+import type { GridTemplateProps } from '@rjsf/utils';
 import { Grid } from 'semantic-ui-react';
 
 /** Renders a `GridTemplate` for semantic-ui, which is expecting the column sizing information coming in via the

package/src/IconButton/IconButton.tsx

@@ -1,5 +1,8 @@
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
-import { Button, ButtonProps } from 'semantic-ui-react';
+import { memo } from 'react';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
+import type { ButtonProps } from 'semantic-ui-react';
+import { Button } from 'semantic-ui-react';
 
 export type SemanticIconButtonProps<
   T = any,
@@ -7,7 +10,7 @@ export type SemanticIconButtonProps<
   F extends FormContextType = any,
 > = IconButtonProps<T, S, F> & Omit<ButtonProps, 'onChange'>;
 
-export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function IconButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: SemanticIconButtonProps<T, S, F>,
 ) {
   const { icon, iconType, color, className, uiSchema, registry, ...otherProps } = props;
@@ -21,8 +24,10 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
     />
   );
 }
+const IconButton = memo(IconButtonFn) as typeof IconButtonFn;
+export default IconButton;
 
-export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function CopyButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
@@ -30,8 +35,9 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   } = props;
   return <IconButton title={translateString(TranslatableString.CopyButton)} {...props} icon='copy' />;
 }
+export const CopyButton = memo(CopyButtonFn) as typeof CopyButtonFn;
 
-export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function MoveDownButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
@@ -39,8 +45,9 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
   } = props;
   return <IconButton title={translateString(TranslatableString.MoveDownButton)} {...props} icon='angle down' />;
 }
+export const MoveDownButton = memo(MoveDownButtonFn) as typeof MoveDownButtonFn;
 
-export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function MoveUpButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
@@ -48,8 +55,9 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <IconButton title={translateString(TranslatableString.MoveUpButton)} {...props} icon='angle up' />;
 }
+export const MoveUpButton = memo(MoveUpButtonFn) as typeof MoveUpButtonFn;
 
-export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function RemoveButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
@@ -57,8 +65,9 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <IconButton title={translateString(TranslatableString.RemoveButton)} {...props} icon='trash' />;
 }
+export const RemoveButton = memo(RemoveButtonFn) as typeof RemoveButtonFn;
 
-export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function ClearButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: SemanticIconButtonProps<T, S, F>,
 ) {
   const {
@@ -66,3 +75,4 @@ export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <IconButton title={translateString(TranslatableString.ClearButton)} {...props} icon='close' />;
 }
+export const ClearButton = memo(ClearButtonFn) as typeof ClearButtonFn;

package/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 export default function MultiSchemaFieldTemplate<
   T = any,

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,15 +1,5 @@
-import {
-  FormContextType,
-  ObjectFieldTemplateProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  canExpand,
-  descriptionId,
-  getTemplate,
-  getUiOptions,
-  titleId,
-  buttonId,
-} from '@rjsf/utils';
+import type { FormContextType, ObjectFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, buttonId } from '@rjsf/utils';
 import { Grid } from 'semantic-ui-react';
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -1,4 +1,4 @@
-import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import AddButton from '../AddButton';
 import { RemoveButton } from '../IconButton';
@@ -28,7 +28,8 @@ export default function OptionalDataControlsTemplate<
         size='mini'
       />
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return (
       <RemoveButton
         id={id}

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>) =>
+  // oxlint-disable-next-line no-shadow
+  const handleChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange && onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = () => onBlur && onBlur(id, value);
-  const _onFocus = () => onFocus && onFocus(id, value);
+  const handleBlur = () => onBlur && onBlur(id, value);
+  const handleFocus = () => onFocus && 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>