@rjsf/react-bootstrap 6.6.0 → 6.6.2

package/dist/react-bootstrap.esm.js

@@ -25,10 +25,7 @@ function AddButton({
 }
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
-import {
-  getTemplate,
-  getUiOptions
-} from "@rjsf/utils";
+import { getTemplate, getUiOptions } from "@rjsf/utils";
 import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -54,11 +51,7 @@ function ArrayFieldItemTemplate(props) {
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
-import {
-  buttonId,
-  getTemplate as getTemplate2,
-  getUiOptions as getUiOptions2
-} from "@rjsf/utils";
+import { buttonId, getTemplate as getTemplate2, getUiOptions as getUiOptions2 } from "@rjsf/utils";
 import Col2 from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
 import Row2 from "react-bootstrap/Row";
@@ -140,11 +133,7 @@ function ArrayFieldTemplate(props) {
 // src/BaseInputTemplate/BaseInputTemplate.tsx
 import { useCallback } from "react";
 import { SchemaExamples } from "@rjsf/core";
-import {
-  ariaDescribedByIds,
-  examplesId,
-  getInputProps
-} from "@rjsf/utils";
+import { ariaDescribedByIds, examplesId, getInputProps } from "@rjsf/utils";
 import Form from "react-bootstrap/Form";
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function BaseInputTemplate({
@@ -173,10 +162,10 @@ function BaseInputTemplate({
     ...extraProps,
     ...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 = 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 = useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -199,13 +188,13 @@ function BaseInputTemplate({
         list: schema.examples ? 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": ariaDescribedByIds(id, !!schema.examples)
       }
     ),
-    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsx4(ClearButton2, { registry, onClick: _onClear }),
+    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsx4(ClearButton2, { registry, onClick: handleClear }),
     children,
     /* @__PURE__ */ jsx4(SchemaExamples, { id, schema })
   ] });
@@ -233,9 +222,10 @@ function ErrorList({
   const { translateString } = registry;
   return /* @__PURE__ */ jsxs4(Card, { border: "danger", className: "mb-4", children: [
     /* @__PURE__ */ jsx6(Card.Header, { className: "alert-danger", children: translateString(TranslatableString2.ErrorsLabel) }),
-    /* @__PURE__ */ jsx6(Card.Body, { className: "p-0", children: /* @__PURE__ */ jsx6(ListGroup, { children: errors.map((error, i) => {
-      return /* @__PURE__ */ jsx6(ListGroup.Item, { className: "border-0", children: /* @__PURE__ */ jsx6("span", { children: error.stack }) }, i);
-    }) }) })
+    /* @__PURE__ */ jsx6(Card.Body, { className: "p-0", children: /* @__PURE__ */ jsx6(ListGroup, { children: errors.map((error, i) => (
+      // oxlint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ jsx6(ListGroup.Item, { className: "border-0", children: /* @__PURE__ */ jsx6("span", { children: error.stack }) }, i)
+    )) }) })
   ] });
 }
 
@@ -249,9 +239,10 @@ function FieldErrorTemplate(props) {
     return null;
   }
   const id = errorId(fieldPathId);
-  return /* @__PURE__ */ jsx7(ListGroup2, { as: "ul", id, children: errors.map((error, i) => {
-    return /* @__PURE__ */ jsx7(ListGroup2.Item, { as: "li", className: "border-0 m-0 p-0", children: /* @__PURE__ */ jsx7("small", { className: "m-0 text-danger", children: error }) }, i);
-  }) });
+  return /* @__PURE__ */ jsx7(ListGroup2, { as: "ul", id, children: errors.map((error, i) => (
+    // oxlint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ jsx7(ListGroup2.Item, { as: "li", className: "border-0 m-0 p-0", children: /* @__PURE__ */ jsx7("small", { className: "m-0 text-danger", children: error }) }, i)
+  )) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -268,10 +259,7 @@ function FieldHelpTemplate(props) {
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
-import {
-  getTemplate as getTemplate3,
-  getUiOptions as getUiOptions3
-} from "@rjsf/utils";
+import { getTemplate as getTemplate3, getUiOptions as getUiOptions3 } from "@rjsf/utils";
 import Form3 from "react-bootstrap/Form";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function FieldTemplate({
@@ -352,6 +340,7 @@ function GridTemplate(props) {
 }
 
 // src/IconButton/IconButton.tsx
+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";
@@ -360,29 +349,34 @@ import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
 import Button2 from "react-bootstrap/Button";
 import { jsx as jsx11 } from "react/jsx-runtime";
-function IconButton(props) {
+function IconButtonFn(props) {
   const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
   return /* @__PURE__ */ jsx11(Button2, { ...otherProps, variant: props.variant || "light", size: "sm", children: icon });
 }
-function CopyButton(props) {
+var IconButton = memo(IconButtonFn);
+var IconButton_default = IconButton;
+function CopyButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ jsx11(IconButton, { title: translateString(TranslatableString3.CopyButton), ...props, icon: /* @__PURE__ */ jsx11(IoIosCopy, {}) });
 }
-function MoveDownButton(props) {
+var CopyButton = memo(CopyButtonFn);
+function MoveDownButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ jsx11(IconButton, { title: translateString(TranslatableString3.MoveDownButton), ...props, icon: /* @__PURE__ */ jsx11(AiOutlineArrowDown, {}) });
 }
-function MoveUpButton(props) {
+var MoveDownButton = memo(MoveDownButtonFn);
+function MoveUpButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ jsx11(IconButton, { title: translateString(TranslatableString3.MoveUpButton), ...props, icon: /* @__PURE__ */ jsx11(AiOutlineArrowUp, {}) });
 }
-function RemoveButton(props) {
+var MoveUpButton = memo(MoveUpButtonFn);
+function RemoveButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
@@ -396,12 +390,14 @@ function RemoveButton(props) {
     }
   );
 }
-function ClearButton(props) {
+var RemoveButton = memo(RemoveButtonFn);
+function ClearButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
   return /* @__PURE__ */ jsx11(IconButton, { title: translateString(TranslatableString3.ClearButton), ...props, icon: /* @__PURE__ */ jsx11(IoMdClose, {}) });
 }
+var ClearButton = memo(ClearButtonFn);
 
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 import Card2 from "react-bootstrap/Card";
@@ -414,14 +410,7 @@ function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
 }
 
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
-import {
-  buttonId as buttonId2,
-  canExpand,
-  descriptionId,
-  getTemplate as getTemplate4,
-  getUiOptions as getUiOptions4,
-  titleId
-} from "@rjsf/utils";
+import { buttonId as buttonId2, canExpand, descriptionId, getTemplate as getTemplate4, getUiOptions as getUiOptions4, titleId } from "@rjsf/utils";
 import Col4 from "react-bootstrap/Col";
 import Container2 from "react-bootstrap/Container";
 import Row4 from "react-bootstrap/Row";
@@ -477,10 +466,10 @@ function ObjectFieldTemplate({
     ),
     /* @__PURE__ */ jsxs7(Container2, { fluid: true, className: "p-0", children: [
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-      properties.map((element, index) => /* @__PURE__ */ jsx13(Row4, { style: { marginBottom: "10px" }, className: element.hidden ? "d-none" : void 0, children: /* @__PURE__ */ jsxs7(Col4, { xs: 12, children: [
+      properties.map((element) => /* @__PURE__ */ jsx13(Row4, { style: { marginBottom: "10px" }, className: element.hidden ? "d-none" : void 0, children: /* @__PURE__ */ jsxs7(Col4, { xs: 12, children: [
         " ",
         element.content
-      ] }) }, index)),
+      ] }) }, element.name)),
       canExpand(schema, uiSchema, formData) ? /* @__PURE__ */ jsx13(Row4, { children: /* @__PURE__ */ jsx13(Col4, { xs: { offset: 11, span: 1 }, className: "py-0.5", children: /* @__PURE__ */ jsx13(
         AddButton2,
         {
@@ -503,7 +492,7 @@ function OptionalDataControlsTemplate(props) {
   const { id, registry, label, onAddClick, onRemoveClick } = props;
   if (onAddClick) {
     return /* @__PURE__ */ jsx14(
-      IconButton,
+      IconButton_default,
       {
         id,
         registry,
@@ -515,7 +504,8 @@ function OptionalDataControlsTemplate(props) {
         variant: "secondary"
       }
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return /* @__PURE__ */ jsx14(
       RemoveButton,
       {
@@ -571,11 +561,7 @@ function TitleField({
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
-import {
-  ADDITIONAL_PROPERTY_FLAG,
-  buttonId as buttonId3,
-  TranslatableString as TranslatableString4
-} from "@rjsf/utils";
+import { ADDITIONAL_PROPERTY_FLAG, buttonId as buttonId3, TranslatableString as TranslatableString4 } from "@rjsf/utils";
 import Col6 from "react-bootstrap/Col";
 import Form4 from "react-bootstrap/Form";
 import Row6 from "react-bootstrap/Row";
@@ -699,18 +685,18 @@ function CheckboxesWidget({
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
-  const _onChange = (index) => ({ target: { checked } }) => {
+  const handleChange = (index) => ({ target: { checked } }) => {
     if (checked) {
       onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
     } else {
       onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
     }
   };
-  const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
   return /* @__PURE__ */ jsx18(Form5.Group, { children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = 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__ */ jsx18(
       Form5.Check,
       {
@@ -723,9 +709,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": ariaDescribedByIds2(id)
       },
@@ -735,13 +721,7 @@ function CheckboxesWidget({
 }
 
 // src/CheckboxWidget/CheckboxWidget.tsx
-import {
-  ariaDescribedByIds as ariaDescribedByIds3,
-  descriptionId as descriptionId2,
-  getTemplate as getTemplate5,
-  labelValue,
-  schemaRequiresTrueValue
-} from "@rjsf/utils";
+import { ariaDescribedByIds as ariaDescribedByIds3, descriptionId as descriptionId2, getTemplate as getTemplate5, labelValue, schemaRequiresTrueValue } from "@rjsf/utils";
 import Form6 from "react-bootstrap/Form";
 import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
@@ -768,9 +748,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__ */ jsxs10(Form6.Group, { className: disabled || readonly ? "disabled" : "", "aria-describedby": ariaDescribedByIds3(id), children: [
     !hideLabel && description && /* @__PURE__ */ jsx19(
@@ -793,10 +773,10 @@ function CheckboxWidget(props) {
         required,
         disabled: disabled || readonly,
         autoFocus: autofocus,
-        onChange: _onChange,
+        onChange: handleChange,
         type: "checkbox",
-        onBlur: _onBlur,
-        onFocus: _onFocus
+        onBlur: handleBlur,
+        onFocus: handleFocus
       }
     )
   ] });
@@ -827,12 +807,12 @@ function RadioWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat2(options);
-  const _onChange = ({ target: { value: value2 } }) => onChange(enumOptionValueDecoder2(value2, enumOptions, optionValueFormat, emptyValue));
-  const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleChange = ({ target: { value: enumValue } }) => onChange(enumOptionValueDecoder2(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const handleFocus = ({ target }) => onFocus(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const inline = Boolean(options && options.inline);
   return /* @__PURE__ */ jsx20(Form7.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 = enumOptionsIsSelected2(option.value, value);
     const radio = /* @__PURE__ */ jsx20(
       Form7.Check,
@@ -846,12 +826,12 @@ function RadioWidget({
         checked,
         required,
         value: enumOptionValueEncoder(option.value, index, optionValueFormat),
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         "aria-describedby": ariaDescribedByIds4(id)
       },
-      index
+      String(option.value)
     );
     return radio;
   }) });
@@ -863,17 +843,17 @@ import FormRange from "react-bootstrap/FormRange";
 import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs11 } from "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,
     ...rangeSpec(schema)
   };
   return /* @__PURE__ */ jsxs11(Fragment3, { children: [
@@ -912,12 +892,11 @@ function SelectWidget({
   const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
   const emptyValue = multiple ? [] : "";
   const optionValueFormat = getOptionValueFormat3(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 = enumOptionSelectedValue(value, enumOptions, !!multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === void 0;
@@ -947,9 +926,18 @@ function SelectWidget({
       "aria-describedby": ariaDescribedByIds5(id),
       children: [
         showPlaceholderOption && /* @__PURE__ */ jsx22("option", { value: "", children: placeholder }),
-        enumOptions.map(({ value: value2, label }, i) => {
-          const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) != -1;
-          return /* @__PURE__ */ jsx22("option", { id: label, value: enumOptionValueEncoder2(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__ */ jsx22(
+            "option",
+            {
+              id: enumLabel,
+              value: enumOptionValueEncoder2(enumValue, i, optionValueFormat),
+              disabled: isDisabled,
+              children: enumLabel
+            },
+            String(enumValue)
+          );
         })
       ]
     }
@@ -975,9 +963,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__ */ jsx23(InputGroup, { children: /* @__PURE__ */ jsx23(
     FormControl,
     {
@@ -991,9 +979,9 @@ function TextareaWidget({
       required,
       autoFocus: autofocus,
       rows: options.rows || 5,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       "aria-describedby": ariaDescribedByIds6(id)
     }
   ) });