@rjsf/react-bootstrap 6.6.0 → 6.6.2

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -1,4 +1,5 @@
-import { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema, errorId } from '@rjsf/utils';
+import type { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { errorId } from '@rjsf/utils';
 import ListGroup from 'react-bootstrap/ListGroup';
 
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
@@ -18,13 +19,12 @@ export default function FieldErrorTemplate<
 
   return (
     <ListGroup as='ul' id={id}>
-      {errors.map((error, i) => {
-        return (
-          <ListGroup.Item as='li' key={i} className='border-0 m-0 p-0'>
-            <small className='m-0 text-danger'>{error}</small>
-          </ListGroup.Item>
-        );
-      })}
+      {errors.map((error, i) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        <ListGroup.Item as='li' key={i} className='border-0 m-0 p-0'>
+          <small className='m-0 text-danger'>{error}</small>
+        </ListGroup.Item>
+      ))}
     </ListGroup>
   );
 }

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 Form from 'react-bootstrap/Form';
 
 /** The `FieldHelpTemplate` component renders any help desired for a field

package/src/FieldTemplate/FieldTemplate.tsx

@@ -1,11 +1,5 @@
-import {
-  FieldTemplateProps,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from '@rjsf/utils';
+import type { FieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 import Form from 'react-bootstrap/Form';
 
 export default function FieldTemplate<

package/src/Form/Form.tsx

@@ -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/GridTemplate/GridTemplate.tsx

@@ -1,4 +1,4 @@
-import { GridTemplateProps } from '@rjsf/utils';
+import type { GridTemplateProps } from '@rjsf/utils';
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 

package/src/IconButton/IconButton.tsx

@@ -1,10 +1,13 @@
+import { memo } from 'react';
 import { AiOutlineArrowDown } from '@react-icons/all-files/ai/AiOutlineArrowDown';
 import { AiOutlineArrowUp } from '@react-icons/all-files/ai/AiOutlineArrowUp';
 import { IoIosCopy } from '@react-icons/all-files/io/IoIosCopy';
 import { IoIosRemove } from '@react-icons/all-files/io/IoIosRemove';
 import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
-import Button, { ButtonProps } from 'react-bootstrap/Button';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString } from '@rjsf/utils';
+import type { ButtonProps } from 'react-bootstrap/Button';
+import Button from 'react-bootstrap/Button';
 
 export type BootstrapIconButtonProps<
   T = any,
@@ -12,7 +15,7 @@ export type BootstrapIconButtonProps<
   F extends FormContextType = any,
 > = IconButtonProps<T, S, F> & ButtonProps;
 
-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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
@@ -22,8 +25,10 @@ export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSch
     </Button>
   );
 }
+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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
@@ -31,8 +36,9 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   } = props;
   return <IconButton title={translateString(TranslatableString.CopyButton)} {...props} icon={<IoIosCopy />} />;
 }
+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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
@@ -42,8 +48,9 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
     <IconButton title={translateString(TranslatableString.MoveDownButton)} {...props} icon={<AiOutlineArrowDown />} />
   );
 }
+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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
@@ -51,8 +58,9 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <IconButton title={translateString(TranslatableString.MoveUpButton)} {...props} icon={<AiOutlineArrowUp />} />;
 }
+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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
@@ -67,8 +75,9 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+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: BootstrapIconButtonProps<T, S, F>,
 ) {
   const {
@@ -76,3 +85,4 @@ export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   } = props;
   return <IconButton title={translateString(TranslatableString.ClearButton)} {...props} icon={<IoMdClose />} />;
 }
+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';
 import Card from 'react-bootstrap/Card';
 
 export default function MultiSchemaFieldTemplate<

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,15 +1,5 @@
-import {
-  buttonId,
-  canExpand,
-  descriptionId,
-  FormContextType,
-  getTemplate,
-  getUiOptions,
-  ObjectFieldTemplateProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  titleId,
-} from '@rjsf/utils';
+import type { FormContextType, ObjectFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { buttonId, canExpand, descriptionId, getTemplate, getUiOptions, titleId } from '@rjsf/utils';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
@@ -69,8 +59,8 @@ export default function ObjectFieldTemplate<
       )}
       <Container fluid className='p-0'>
         {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
-        {properties.map((element: any, index: number) => (
-          <Row key={index} style={{ marginBottom: '10px' }} className={element.hidden ? 'd-none' : undefined}>
+        {properties.map((element: any) => (
+          <Row key={element.name} style={{ marginBottom: '10px' }} className={element.hidden ? 'd-none' : undefined}>
             <Col xs={12}> {element.content}</Col>
           </Row>
         ))}

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -1,5 +1,5 @@
 import { BsPlus } from '@react-icons/all-files/bs/BsPlus';
-import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import IconButton, { RemoveButton } from '../IconButton';
 
@@ -30,7 +30,8 @@ export default function OptionalDataControlsTemplate<
         variant='secondary'
       />
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return (
       <RemoveButton
         id={id}

package/src/RadioWidget/RadioWidget.tsx

@@ -1,4 +1,5 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
@@ -6,10 +7,6 @@ import {
   enumOptionsIsSelected,
   getOptionValueFormat,
   optionId,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 import Form from 'react-bootstrap/Form';
 
@@ -28,11 +25,11 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
 
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleChange = ({ target: { value: enumValue } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(enumOptionValueDecoder<S>(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
     onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
     onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const inline = Boolean(options && options.inline);
@@ -41,7 +38,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
     <Form.Group className='mb-0'>
       {Array.isArray(enumOptions) &&
         enumOptions.map((option, index) => {
-          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
           const checked = enumOptionsIsSelected<S>(option.value, value);
 
           const radio = (
@@ -49,16 +46,16 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
               inline={inline}
               label={option.label}
               id={optionId(id, index)}
-              key={index}
+              key={String(option.value)}
               name={htmlName || id}
               type='radio'
               disabled={disabled || itemDisabled || readonly}
               checked={checked}
               required={required}
               value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
-              onChange={_onChange}
-              onBlur={_onBlur}
-              onFocus={_onFocus}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              onFocus={handleFocus}
               aria-describedby={ariaDescribedByIds(id)}
             />
           );

package/src/RangeWidget/RangeWidget.tsx

@@ -1,5 +1,6 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import { FormContextType, rangeSpec, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { rangeSpec } from '@rjsf/utils';
 import FormRange from 'react-bootstrap/FormRange';
 
 export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
@@ -7,18 +8,18 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
 ) {
   const { id, value, disabled, onChange, onBlur, onFocus, schema } = props;
 
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(value);
-  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
-  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLInputElement>) => onChange(newValue);
+  const handleBlur = ({ target: { value: newValue } }: FocusEvent<HTMLInputElement>) => onBlur(id, newValue);
+  const handleFocus = ({ target: { value: newValue } }: FocusEvent<HTMLInputElement>) => onFocus(id, newValue);
 
   const rangeProps = {
     value,
     id,
     name: id,
     disabled,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
     ...rangeSpec<S>(schema),
   };
 

package/src/SelectWidget/SelectWidget.tsx

@@ -1,14 +1,11 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   getOptionValueFormat,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 import FormSelect from 'react-bootstrap/FormSelect';
 
@@ -38,15 +35,14 @@ export default function SelectWidget<
   const emptyValue = multiple ? [] : '';
   const optionValueFormat = getOptionValueFormat(options);
 
-  function getValue(event: FocusEvent | ChangeEvent | any, multiple?: boolean) {
-    if (multiple) {
+  function getValue(event: FocusEvent | ChangeEvent | any, isMultiple?: boolean) {
+    if (isMultiple) {
       return [].slice
-        .call(event.target.options as any)
+        .call(event.target.options)
         .filter((o: any) => o.selected)
         .map((o: any) => o.value);
-    } else {
-      return event.target.value;
     }
+    return event.target.value;
   }
   const selectValue = enumOptionSelectedValue<S>(value, enumOptions, !!multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === undefined;
@@ -82,11 +78,16 @@ export default function SelectWidget<
       aria-describedby={ariaDescribedByIds(id)}
     >
       {showPlaceholderOption && <option value=''>{placeholder}</option>}
-      {(enumOptions as any).map(({ value, label }: any, i: number) => {
-        const disabled: any = Array.isArray(enumDisabled) && (enumDisabled as any).indexOf(value) != -1;
+      {enumOptions?.map(({ value: enumValue, label: enumLabel }: any, i: number) => {
+        const isDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(enumValue);
         return (
-          <option key={i} id={label} value={enumOptionValueEncoder(value, i, optionValueFormat)} disabled={disabled}>
-            {label}
+          <option
+            key={String(enumValue)}
+            id={enumLabel}
+            value={enumOptionValueEncoder(enumValue, i, optionValueFormat)}
+            disabled={isDisabled}
+          >
+            {enumLabel}
           </option>
         );
       })}

package/src/SubmitButton/SubmitButton.tsx

@@ -1,4 +1,5 @@
-import { FormContextType, getSubmitButtonOptions, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { getSubmitButtonOptions } from '@rjsf/utils';
 import Button from 'react-bootstrap/Button';
 
 export default function SubmitButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(

package/src/Templates/Templates.ts

@@ -1,4 +1,4 @@
-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';

package/src/TextareaWidget/TextareaWidget.tsx

@@ -1,5 +1,6 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import { ariaDescribedByIds, FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds } from '@rjsf/utils';
 import FormControl from 'react-bootstrap/FormControl';
 import InputGroup from 'react-bootstrap/InputGroup';
 
@@ -29,10 +30,10 @@ export default function TextareaWidget<
   onChange,
   options,
 }: CustomWidgetProps<T, S, F>) {
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
-    onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLTextAreaElement>) =>
+    onChange(newValue === '' ? options.emptyValue : newValue);
+  const handleBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value);
 
   return (
     <InputGroup>
@@ -47,9 +48,9 @@ export default function TextareaWidget<
         required={required}
         autoFocus={autofocus}
         rows={options.rows || 5}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id)}
       />
     </InputGroup>

package/src/Theme/Theme.tsx

@@ -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 { generateTemplates } from '../Templates';
 import { generateWidgets } from '../Widgets';

package/src/TitleField/TitleField.tsx

@@ -1,4 +1,5 @@
-import { FormContextType, getUiOptions, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TitleFieldProps } from '@rjsf/utils';
+import { getUiOptions } from '@rjsf/utils';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';

package/src/Widgets/Widgets.ts

@@ -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 Col from 'react-bootstrap/Col';
 import Form from 'react-bootstrap/Form';
 import Row from 'react-bootstrap/Row';