@rjsf/react-bootstrap 6.6.0 → 6.6.2

package/dist/index.cjs

@@ -206,10 +206,10 @@ function BaseInputTemplate({
     ...extraProps,
     ...(0, import_utils4.getInputProps)(schema, type, options)
   };
-  const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
-  const _onBlur = ({ target }) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  const _onClear = (0, import_react.useCallback)(
+  const handleChange = ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue);
+  const handleBlur = ({ target }) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }) => onFocus(id, target && target.value);
+  const handleClear = (0, import_react.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -232,13 +232,13 @@ function BaseInputTemplate({
         list: schema.examples ? (0, import_utils4.examplesId)(id) : void 0,
         ...inputProps,
         value: value || value === 0 ? value : "",
-        onChange: onChangeOverride || _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: onChangeOverride || handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         "aria-describedby": (0, import_utils4.ariaDescribedByIds)(id, !!schema.examples)
       }
     ),
-    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClearButton2, { registry, onClick: _onClear }),
+    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClearButton2, { registry, onClick: handleClear }),
     children,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core.SchemaExamples, { id, schema })
   ] });
@@ -266,9 +266,10 @@ function ErrorList({
   const { translateString } = registry;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_Card.default, { border: "danger", className: "mb-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Card.default.Header, { className: "alert-danger", children: translateString(import_utils5.TranslatableString.ErrorsLabel) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Card.default.Body, { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListGroup.default, { children: errors.map((error, i) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListGroup.default.Item, { className: "border-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: error.stack }) }, i);
-    }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Card.default.Body, { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListGroup.default, { children: errors.map((error, i) => (
+      // oxlint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListGroup.default.Item, { className: "border-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: error.stack }) }, i)
+    )) }) })
   ] });
 }
 
@@ -282,9 +283,10 @@ function FieldErrorTemplate(props) {
     return null;
   }
   const id = (0, import_utils6.errorId)(fieldPathId);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ListGroup2.default, { as: "ul", id, children: errors.map((error, i) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ListGroup2.default.Item, { as: "li", className: "border-0 m-0 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("small", { className: "m-0 text-danger", children: error }) }, i);
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ListGroup2.default, { as: "ul", id, children: errors.map((error, i) => (
+    // oxlint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ListGroup2.default.Item, { as: "li", className: "border-0 m-0 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("small", { className: "m-0 text-danger", children: error }) }, i)
+  )) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -382,6 +384,7 @@ function GridTemplate(props) {
 }
 
 // src/IconButton/IconButton.tsx
+var import_react2 = require("react");
 var import_AiOutlineArrowDown = require("@react-icons/all-files/ai/AiOutlineArrowDown");
 var import_AiOutlineArrowUp = require("@react-icons/all-files/ai/AiOutlineArrowUp");
 var import_IoIosCopy = require("@react-icons/all-files/io/IoIosCopy");
@@ -390,29 +393,34 @@ var import_IoMdClose = require("@react-icons/all-files/io/IoMdClose");
 var import_utils9 = require("@rjsf/utils");
 var import_Button2 = __toESM(require("react-bootstrap/Button"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function IconButton(props) {
+function IconButtonFn(props) {
   const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Button2.default, { ...otherProps, variant: props.variant || "light", size: "sm", children: icon });
 }
-function CopyButton(props) {
+var IconButton = (0, import_react2.memo)(IconButtonFn);
+var IconButton_default = IconButton;
+function CopyButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { title: translateString(import_utils9.TranslatableString.CopyButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_IoIosCopy.IoIosCopy, {}) });
 }
-function MoveDownButton(props) {
+var CopyButton = (0, import_react2.memo)(CopyButtonFn);
+function MoveDownButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { title: translateString(import_utils9.TranslatableString.MoveDownButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_AiOutlineArrowDown.AiOutlineArrowDown, {}) });
 }
-function MoveUpButton(props) {
+var MoveDownButton = (0, import_react2.memo)(MoveDownButtonFn);
+function MoveUpButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { title: translateString(import_utils9.TranslatableString.MoveUpButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_AiOutlineArrowUp.AiOutlineArrowUp, {}) });
 }
-function RemoveButton(props) {
+var MoveUpButton = (0, import_react2.memo)(MoveUpButtonFn);
+function RemoveButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -426,12 +434,14 @@ function RemoveButton(props) {
     }
   );
 }
-function ClearButton(props) {
+var RemoveButton = (0, import_react2.memo)(RemoveButtonFn);
+function ClearButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { title: translateString(import_utils9.TranslatableString.ClearButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_IoMdClose.IoMdClose, {}) });
 }
+var ClearButton = (0, import_react2.memo)(ClearButtonFn);
 
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 var import_Card2 = __toESM(require("react-bootstrap/Card"), 1);
@@ -500,10 +510,10 @@ function ObjectFieldTemplate({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Container2.default, { fluid: true, className: "p-0", children: [
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-      properties.map((element, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Row4.default, { style: { marginBottom: "10px" }, className: element.hidden ? "d-none" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Col4.default, { xs: 12, children: [
+      properties.map((element) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Row4.default, { style: { marginBottom: "10px" }, className: element.hidden ? "d-none" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Col4.default, { xs: 12, children: [
         " ",
         element.content
-      ] }) }, index)),
+      ] }) }, element.name)),
       (0, import_utils10.canExpand)(schema, uiSchema, formData) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Row4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Col4.default, { xs: { offset: 11, span: 1 }, className: "py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         AddButton2,
         {
@@ -526,7 +536,7 @@ function OptionalDataControlsTemplate(props) {
   const { id, registry, label, onAddClick, onRemoveClick } = props;
   if (onAddClick) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      IconButton,
+      IconButton_default,
       {
         id,
         registry,
@@ -538,7 +548,8 @@ function OptionalDataControlsTemplate(props) {
         variant: "secondary"
       }
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       RemoveButton,
       {
@@ -710,18 +721,18 @@ function CheckboxesWidget({
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const optionValueFormat = (0, import_utils14.getOptionValueFormat)(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
-  const _onChange = (index) => ({ target: { checked } }) => {
+  const handleChange = (index) => ({ target: { checked } }) => {
     if (checked) {
       onChange((0, import_utils14.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
     } else {
       onChange((0, import_utils14.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
     }
   };
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils14.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils14.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, (0, import_utils14.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, (0, import_utils14.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Form5.default.Group, { children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = (0, import_utils14.enumOptionsIsSelected)(option.value, checkboxesValues);
-    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_Form5.default.Check,
       {
@@ -734,9 +745,9 @@ function CheckboxesWidget({
         name: htmlName || id,
         label: option.label,
         autoFocus: autofocus && index === 0,
-        onChange: _onChange(index),
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange(index),
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         disabled: disabled || itemDisabled || readonly,
         "aria-describedby": (0, import_utils14.ariaDescribedByIds)(id)
       },
@@ -773,9 +784,9 @@ function CheckboxWidget(props) {
     registry,
     options
   );
-  const _onChange = ({ target: { checked } }) => onChange(checked);
-  const _onBlur = ({ target }) => onBlur(id, target && target.checked);
-  const _onFocus = ({ target }) => onFocus(id, target && target.checked);
+  const handleChange = ({ target: { checked } }) => onChange(checked);
+  const handleBlur = ({ target }) => onBlur(id, target && target.checked);
+  const handleFocus = ({ target }) => onFocus(id, target && target.checked);
   const description = options.description || schema.description;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_Form6.default.Group, { className: disabled || readonly ? "disabled" : "", "aria-describedby": (0, import_utils15.ariaDescribedByIds)(id), children: [
     !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -798,10 +809,10 @@ function CheckboxWidget(props) {
         required,
         disabled: disabled || readonly,
         autoFocus: autofocus,
-        onChange: _onChange,
+        onChange: handleChange,
         type: "checkbox",
-        onBlur: _onBlur,
-        onFocus: _onFocus
+        onBlur: handleBlur,
+        onFocus: handleFocus
       }
     )
   ] });
@@ -825,12 +836,12 @@ function RadioWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = (0, import_utils16.getOptionValueFormat)(options);
-  const _onChange = ({ target: { value: value2 } }) => onChange((0, import_utils16.enumOptionValueDecoder)(value2, enumOptions, optionValueFormat, emptyValue));
-  const _onBlur = ({ target }) => onBlur(id, (0, import_utils16.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, (0, import_utils16.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleChange = ({ target: { value: enumValue } }) => onChange((0, import_utils16.enumOptionValueDecoder)(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, (0, import_utils16.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, (0, import_utils16.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const inline = Boolean(options && options.inline);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Form7.default.Group, { className: "mb-0", children: 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 = (0, import_utils16.enumOptionsIsSelected)(option.value, value);
     const radio = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_Form7.default.Check,
@@ -844,12 +855,12 @@ function RadioWidget({
         checked,
         required,
         value: (0, import_utils16.enumOptionValueEncoder)(option.value, index, optionValueFormat),
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         "aria-describedby": (0, import_utils16.ariaDescribedByIds)(id)
       },
-      index
+      String(option.value)
     );
     return radio;
   }) });
@@ -861,17 +872,17 @@ var import_FormRange = __toESM(require("react-bootstrap/FormRange"), 1);
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const { id, value, disabled, onChange, onBlur, onFocus, schema } = props;
-  const _onChange = ({ target: { value: value2 } }) => onChange(value2);
-  const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
-  const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
+  const handleChange = ({ target: { value: newValue } }) => onChange(newValue);
+  const handleBlur = ({ target: { value: newValue } }) => onBlur(id, newValue);
+  const handleFocus = ({ target: { value: newValue } }) => onFocus(id, newValue);
   const rangeProps = {
     value,
     id,
     name: id,
     disabled,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
     ...(0, import_utils17.rangeSpec)(schema)
   };
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
@@ -904,12 +915,11 @@ function SelectWidget({
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
   const emptyValue = multiple ? [] : "";
   const optionValueFormat = (0, import_utils18.getOptionValueFormat)(options);
-  function getValue(event, multiple2) {
-    if (multiple2) {
+  function getValue(event, isMultiple) {
+    if (isMultiple) {
       return [].slice.call(event.target.options).filter((o) => o.selected).map((o) => o.value);
-    } else {
-      return event.target.value;
     }
+    return event.target.value;
   }
   const selectValue = (0, import_utils18.enumOptionSelectedValue)(value, enumOptions, !!multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === void 0;
@@ -939,9 +949,18 @@ function SelectWidget({
       "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
       children: [
         showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "", children: placeholder }),
-        enumOptions.map(({ value: value2, label }, i) => {
-          const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) != -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { id: label, value: (0, import_utils18.enumOptionValueEncoder)(value2, i, optionValueFormat), disabled: disabled2, children: label }, i);
+        enumOptions?.map(({ value: enumValue, label: enumLabel }, i) => {
+          const isDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(enumValue);
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "option",
+            {
+              id: enumLabel,
+              value: (0, import_utils18.enumOptionValueEncoder)(enumValue, i, optionValueFormat),
+              disabled: isDisabled,
+              children: enumLabel
+            },
+            String(enumValue)
+          );
         })
       ]
     }
@@ -967,9 +986,9 @@ function TextareaWidget({
   onChange,
   options
 }) {
-  const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
-  const _onBlur = ({ target }) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const handleChange = ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue);
+  const handleBlur = ({ target }) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }) => onFocus(id, target && target.value);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_InputGroup.default, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_FormControl.default,
     {
@@ -983,9 +1002,9 @@ function TextareaWidget({
       required,
       autoFocus: autofocus,
       rows: options.rows || 5,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       "aria-describedby": (0, import_utils19.ariaDescribedByIds)(id)
     }
   ) });