@rjsf/react-bootstrap 6.0.0-beta.20 → 6.0.0-beta.21

package/dist/react-bootstrap.esm.js

@@ -15,10 +15,10 @@ function AddButton({
   return /* @__PURE__ */ jsx(
     Button,
     {
+      title: translateString(TranslatableString.AddItemButton),
       ...props,
       style: { width: "100%" },
       className: `ml-1 ${props.className}`,
-      title: translateString(TranslatableString.AddItemButton),
       children: /* @__PURE__ */ jsx(BsPlus, {})
     }
   );
@@ -63,7 +63,20 @@ import {
 } from "@rjsf/utils";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ArrayFieldTemplate(props) {
-  const { canAdd, disabled, fieldPathId, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title
+  } = props;
   const uiOptions = getUiOptions2(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate2(
     "ArrayFieldDescriptionTemplate",
@@ -80,6 +93,7 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -92,7 +106,8 @@ function ArrayFieldTemplate(props) {
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ jsx3(
@@ -106,7 +121,8 @@ function ArrayFieldTemplate(props) {
       }
     ),
     /* @__PURE__ */ jsxs2(Container, { fluid: true, className: "p-0 m-0", children: [
-      items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+      items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key)),
       canAdd && /* @__PURE__ */ jsx3(Container, { className: "", children: /* @__PURE__ */ jsxs2(Row2, { className: "mt-2", children: [
         /* @__PURE__ */ jsx3(Col2, { xs: 9 }),
         /* @__PURE__ */ jsx3(Col2, { xs: 3, className: "py-4 col-lg-3 col-3", children: /* @__PURE__ */ jsx3(
@@ -253,8 +269,8 @@ function RemoveButton(props) {
     IconButton,
     {
       title: translateString(TranslatableString3.RemoveButton),
-      ...props,
       variant: "danger",
+      ...props,
       icon: /* @__PURE__ */ jsx7(IoIosRemove, {})
     }
   );
@@ -399,6 +415,7 @@ function ObjectFieldTemplate({
   fieldPathId,
   schema,
   formData,
+  optionalDataControl,
   onAddClick,
   disabled,
   readonly,
@@ -411,6 +428,7 @@ function ObjectFieldTemplate({
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -423,7 +441,8 @@ function ObjectFieldTemplate({
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     description && /* @__PURE__ */ jsx13(
@@ -437,6 +456,7 @@ 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: [
         " ",
         element.content
@@ -456,30 +476,77 @@ function ObjectFieldTemplate({
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+import { BsPlus as BsPlus2 } from "@react-icons/all-files/bs/BsPlus";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ jsx14(
+      IconButton,
+      {
+        id,
+        registry,
+        className: "rjsf-add-optional-data",
+        icon: /* @__PURE__ */ jsx14(BsPlus2, {}),
+        onClick: onAddClick,
+        title: label,
+        size: "sm",
+        variant: "secondary"
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ jsx14(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label,
+        size: "sm",
+        variant: "secondary"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
 import Button3 from "react-bootstrap/Button";
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function SubmitButton(props) {
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(props.uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(Button3, { variant: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(Button3, { variant: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
 import { getUiOptions as getUiOptions5 } from "@rjsf/utils";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import Row5 from "react-bootstrap/Row";
+import Col5 from "react-bootstrap/Col";
+import Container3 from "react-bootstrap/Container";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function TitleField({
   id,
   title,
-  uiSchema
+  uiSchema,
+  optionalDataControl
 }) {
   const uiOptions = getUiOptions5(uiSchema);
+  let heading = /* @__PURE__ */ jsx16("h5", { children: uiOptions.title || title });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsx16(Container3, { fluid: true, className: "p-0", children: /* @__PURE__ */ jsxs8(Row5, { children: [
+      /* @__PURE__ */ jsx16(Col5, { xs: "11", children: heading }),
+      /* @__PURE__ */ jsx16(Col5, { xs: "1", style: { marginLeft: "-5px" }, children: optionalDataControl })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs8("div", { id, className: "my-1", children: [
-    /* @__PURE__ */ jsx15("h5", { children: uiOptions.title || title }),
-    /* @__PURE__ */ jsx15("hr", { className: "border-0 bg-secondary", style: { height: "1px" } })
+    heading,
+    /* @__PURE__ */ jsx16("hr", { className: "border-0 bg-secondary mt-0", style: { height: "1px" } })
   ] });
 }
 
@@ -489,10 +556,10 @@ import {
   buttonId as buttonId3,
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
-import Row5 from "react-bootstrap/Row";
-import Col5 from "react-bootstrap/Col";
+import Row6 from "react-bootstrap/Row";
+import Col6 from "react-bootstrap/Col";
 import Form4 from "react-bootstrap/Form";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate({
   classNames,
   style,
@@ -513,14 +580,14 @@ function WrapIfAdditionalTemplate({
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
-    return /* @__PURE__ */ jsx16("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx17("div", { className: classNames, style, children });
   }
   const handleBlur = ({ target }) => onKeyChange(target.value);
   const keyId = `${id}-key`;
-  return /* @__PURE__ */ jsxs9(Row5, { className: classNames, style, children: [
-    /* @__PURE__ */ jsx16(Col5, { xs: 5, children: /* @__PURE__ */ jsxs9(Form4.Group, { children: [
-      /* @__PURE__ */ jsx16(Form4.Label, { htmlFor: keyId, children: keyLabel }),
-      /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs9(Row6, { className: classNames, style, children: [
+    /* @__PURE__ */ jsx17(Col6, { xs: 5, children: /* @__PURE__ */ jsxs9(Form4.Group, { children: [
+      /* @__PURE__ */ jsx17(Form4.Label, { htmlFor: keyId, children: keyLabel }),
+      /* @__PURE__ */ jsx17(
         Form4.Control,
         {
           required,
@@ -533,8 +600,8 @@ function WrapIfAdditionalTemplate({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx16(Col5, { xs: 5, children }),
-    /* @__PURE__ */ jsx16(Col5, { xs: 2, className: "py-4 d-grid gap-2", children: /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(Col6, { xs: 5, children }),
+    /* @__PURE__ */ jsx17(Col6, { xs: 2, className: "py-4 d-grid gap-2", children: /* @__PURE__ */ jsx17(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
@@ -570,6 +637,7 @@ function generateTemplates() {
     GridTemplate,
     MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -585,7 +653,7 @@ import {
   schemaRequiresTrueValue
 } from "@rjsf/utils";
 import Form5 from "react-bootstrap/Form";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
@@ -614,7 +682,7 @@ function CheckboxWidget(props) {
   const _onFocus = ({ target }) => onFocus(id, target && target.checked);
   const description = options.description || schema.description;
   return /* @__PURE__ */ jsxs10(Form5.Group, { className: disabled || readonly ? "disabled" : "", "aria-describedby": ariaDescribedByIds2(id), children: [
-    !hideLabel && description && /* @__PURE__ */ jsx17(
+    !hideLabel && description && /* @__PURE__ */ jsx18(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -624,7 +692,7 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       Form5.Check,
       {
         id,
@@ -653,7 +721,7 @@ import {
   enumOptionsValueForIndex,
   optionId
 } from "@rjsf/utils";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus }) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const checkboxesValues = Array.isArray(value) ? value : [value];
@@ -666,10 +734,10 @@ function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, r
   };
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-  return /* @__PURE__ */ jsx18(Form6.Group, { children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ jsx19(Form6.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;
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       Form6.Check,
       {
         inline,
@@ -700,7 +768,7 @@ import {
   enumOptionsValueForIndex as enumOptionsValueForIndex2,
   optionId as optionId2
 } from "@rjsf/utils";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function RadioWidget({
   id,
   options,
@@ -717,10 +785,10 @@ function RadioWidget({
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const inline = Boolean(options && options.inline);
-  return /* @__PURE__ */ jsx19(Form7.Group, { className: "mb-0", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  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 checked = enumOptionsIsSelected2(option.value, value);
-    const radio = /* @__PURE__ */ jsx19(
+    const radio = /* @__PURE__ */ jsx20(
       Form7.Check,
       {
         inline,
@@ -746,7 +814,7 @@ function RadioWidget({
 // src/RangeWidget/RangeWidget.tsx
 import { rangeSpec } from "@rjsf/utils";
 import FormRange from "react-bootstrap/FormRange";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+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);
@@ -763,8 +831,8 @@ function RangeWidget(props) {
     ...rangeSpec(schema)
   };
   return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    /* @__PURE__ */ jsx20(FormRange, { ...rangeProps }),
-    /* @__PURE__ */ jsx20("span", { className: "range-view", children: value })
+    /* @__PURE__ */ jsx21(FormRange, { ...rangeProps }),
+    /* @__PURE__ */ jsx21("span", { className: "range-view", children: value })
   ] });
 }
 
@@ -775,7 +843,7 @@ import {
   enumOptionsIndexForValue,
   enumOptionsValueForIndex as enumOptionsValueForIndex3
 } from "@rjsf/utils";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function SelectWidget({
   schema,
   id,
@@ -828,10 +896,10 @@ function SelectWidget({
       },
       "aria-describedby": ariaDescribedByIds5(id),
       children: [
-        showPlaceholderOption && /* @__PURE__ */ jsx21("option", { value: "", children: placeholder }),
+        showPlaceholderOption && /* @__PURE__ */ jsx22("option", { value: "", children: placeholder }),
         enumOptions.map(({ value: value2, label }, i) => {
           const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) != -1;
-          return /* @__PURE__ */ jsx21("option", { id: label, value: String(i), disabled: disabled2, children: label }, i);
+          return /* @__PURE__ */ jsx22("option", { id: label, value: String(i), disabled: disabled2, children: label }, i);
         })
       ]
     }
@@ -842,7 +910,7 @@ function SelectWidget({
 import { ariaDescribedByIds as ariaDescribedByIds6 } from "@rjsf/utils";
 import FormControl from "react-bootstrap/FormControl";
 import InputGroup from "react-bootstrap/InputGroup";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function TextareaWidget({
   id,
   placeholder,
@@ -859,7 +927,7 @@ function TextareaWidget({
   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);
-  return /* @__PURE__ */ jsx22(InputGroup, { children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(InputGroup, { children: /* @__PURE__ */ jsx23(
     FormControl,
     {
       id,