@rjsf/react-bootstrap 6.0.0-beta.1 → 6.0.0-beta.11

package/README.md

@@ -54,10 +54,12 @@ Exports `react-bootstrap` theme, fields and widgets for `react-jsonschema-form`.
 ### Prerequisites
 
 - `react-bootstrap >= 2.0.0`
-- `@rjsf/core >= 2.2.0`
+- `@rjsf/core >= 6`
+- `@rjsf/utils >= 6`
+- `@rjsf/validator-ajv8 >= 6`
 
 ```bash
-yarn add react-bootstrap @rjsf/core
+yarn add react-bootstrap @rjsf/core @rjsf/utils @rjsf/validator-ajv8
 ```
 
 ### Installation

package/dist/index.js

@@ -43,7 +43,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Form/Form.tsx
-var import_core = require("@rjsf/core");
+var import_core2 = require("@rjsf/core");
 
 // src/AddButton/AddButton.tsx
 var import_utils = require("@rjsf/utils");
@@ -221,12 +221,13 @@ function BaseInputTemplate({
 }
 
 // src/DescriptionField/DescriptionField.tsx
+var import_core = require("@rjsf/core");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function DescriptionField({ id, description }) {
-  if (description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { id, className: "mb-3", children: description }) });
+function DescriptionField({ id, description, registry, uiSchema }) {
+  if (!description) {
+    return null;
   }
-  return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { id, className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core.RichDescription, { description, registry, uiSchema }) }) });
 }
 
 // src/ErrorList/ErrorList.tsx
@@ -396,12 +397,22 @@ function GridTemplate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Row3.default, { ...rest, children });
 }
 
+// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
+var import_Card2 = __toESM(require("react-bootstrap/Card"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Card2.default, { style: { marginBottom: "1rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Card2.default.Body, { children: selector }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Card2.default.Body, { children: optionSchemaField })
+  ] });
+}
+
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 var import_Row4 = __toESM(require("react-bootstrap/Row"), 1);
 var import_Col4 = __toESM(require("react-bootstrap/Col"), 1);
 var import_Container2 = __toESM(require("react-bootstrap/Container"), 1);
 var import_utils10 = require("@rjsf/utils");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ObjectFieldTemplate({
   description,
   title,
@@ -426,8 +437,8 @@ function ObjectFieldTemplate({
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       TitleFieldTemplate,
       {
         id: (0, import_utils10.titleId)(idSchema),
@@ -438,7 +449,7 @@ function ObjectFieldTemplate({
         registry
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils10.descriptionId)(idSchema),
@@ -448,12 +459,12 @@ function ObjectFieldTemplate({
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Container2.default, { fluid: true, className: "p-0", children: [
-      properties.map((element, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Row4.default, { style: { marginBottom: "10px" }, className: element.hidden ? "d-none" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Col4.default, { xs: 12, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Container2.default, { fluid: true, className: "p-0", children: [
+      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: [
         " ",
         element.content
       ] }) }, index)),
-      (0, import_utils10.canExpand)(schema, uiSchema, formData) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Row4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Col4.default, { xs: { offset: 9, span: 3 }, className: "py-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      (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: 9, span: 3 }, className: "py-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         AddButton2,
         {
           id: (0, import_utils10.buttonId)(idSchema, "add"),
@@ -471,27 +482,27 @@ function ObjectFieldTemplate({
 // src/SubmitButton/SubmitButton.tsx
 var import_Button3 = __toESM(require("react-bootstrap/Button"), 1);
 var import_utils11 = require("@rjsf/utils");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function SubmitButton(props) {
   const { submitText, norender, props: submitButtonProps } = (0, import_utils11.getSubmitButtonOptions)(props.uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Button3.default, { variant: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Button3.default, { variant: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
 var import_utils12 = require("@rjsf/utils");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function TitleField({
   id,
   title,
   uiSchema
 }) {
   const uiOptions = (0, import_utils12.getUiOptions)(uiSchema);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { id, className: "my-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h5", { children: uiOptions.title || title }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("hr", { className: "border-0 bg-secondary", style: { height: "1px" } })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { id, className: "my-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h5", { children: uiOptions.title || title }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { className: "border-0 bg-secondary", style: { height: "1px" } })
   ] });
 }
 
@@ -500,7 +511,7 @@ var import_utils13 = require("@rjsf/utils");
 var import_Row5 = __toESM(require("react-bootstrap/Row"), 1);
 var import_Col5 = __toESM(require("react-bootstrap/Col"), 1);
 var import_Form4 = __toESM(require("react-bootstrap/Form"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate({
   classNames,
   style,
@@ -521,14 +532,14 @@ function WrapIfAdditionalTemplate({
   const keyLabel = translateString(import_utils13.TranslatableString.KeyLabel, [label]);
   const additional = import_utils13.ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames, style, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: classNames, style, children });
   }
   const handleBlur = ({ target }) => onKeyChange(target.value);
   const keyId = `${id}-key`;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Row5.default, { className: classNames, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Col5.default, { xs: 5, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Form4.default.Group, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Form4.default.Label, { htmlFor: keyId, children: keyLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Row5.default, { className: classNames, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Col5.default, { xs: 5, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Form4.default.Group, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Form4.default.Label, { htmlFor: keyId, children: keyLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_Form4.default.Control,
         {
           required,
@@ -541,8 +552,8 @@ function WrapIfAdditionalTemplate({
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Col5.default, { xs: 5, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Col5.default, { xs: 2, className: "py-4 d-grid gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Col5.default, { xs: 5, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Col5.default, { xs: 2, className: "py-4 d-grid gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       RemoveButton2,
       {
         id: (0, import_utils13.buttonId)(id, "remove"),
@@ -576,6 +587,7 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
@@ -586,7 +598,7 @@ var Templates_default = generateTemplates();
 // src/CheckboxWidget/CheckboxWidget.tsx
 var import_utils14 = require("@rjsf/utils");
 var import_Form5 = __toESM(require("react-bootstrap/Form"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
@@ -614,47 +626,40 @@ function CheckboxWidget(props) {
   const _onBlur = ({ target }) => onBlur(id, target && target.checked);
   const _onFocus = ({ target }) => onFocus(id, target && target.checked);
   const description = options.description || schema.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    import_Form5.default.Group,
-    {
-      className: `checkbox ${disabled || readonly ? "disabled" : ""}`,
-      "aria-describedby": (0, import_utils14.ariaDescribedByIds)(id),
-      children: [
-        !hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          DescriptionFieldTemplate,
-          {
-            id: (0, import_utils14.descriptionId)(id),
-            description,
-            schema,
-            uiSchema,
-            registry
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          import_Form5.default.Check,
-          {
-            id,
-            name: id,
-            label: (0, import_utils14.labelValue)(label, hideLabel || !label),
-            checked: typeof value === "undefined" ? false : value,
-            required,
-            disabled: disabled || readonly,
-            autoFocus: autofocus,
-            onChange: _onChange,
-            type: "checkbox",
-            onBlur: _onBlur,
-            onFocus: _onFocus
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Form5.default.Group, { className: disabled || readonly ? "disabled" : "", "aria-describedby": (0, import_utils14.ariaDescribedByIds)(id), children: [
+    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      DescriptionFieldTemplate,
+      {
+        id: (0, import_utils14.descriptionId)(id),
+        description,
+        schema,
+        uiSchema,
+        registry
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_Form5.default.Check,
+      {
+        id,
+        name: id,
+        label: (0, import_utils14.labelValue)(label, hideLabel || !label),
+        checked: typeof value === "undefined" ? false : value,
+        required,
+        disabled: disabled || readonly,
+        autoFocus: autofocus,
+        onChange: _onChange,
+        type: "checkbox",
+        onBlur: _onBlur,
+        onFocus: _onFocus
+      }
+    )
+  ] });
 }
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
 var import_Form6 = __toESM(require("react-bootstrap/Form"), 1);
 var import_utils15 = require("@rjsf/utils");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("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];
@@ -667,10 +672,10 @@ function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, r
   };
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils15.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils15.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Form6.default.Group, { children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Form6.default.Group, { children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = (0, import_utils15.enumOptionsIsSelected)(option.value, checkboxesValues);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_Form6.default.Check,
       {
         inline,
@@ -696,7 +701,7 @@ function CheckboxesWidget({ id, disabled, options, value, autofocus, readonly, r
 // src/RadioWidget/RadioWidget.tsx
 var import_Form7 = __toESM(require("react-bootstrap/Form"), 1);
 var import_utils16 = require("@rjsf/utils");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function RadioWidget({
   id,
   options,
@@ -713,10 +718,10 @@ function RadioWidget({
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils16.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils16.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const inline = Boolean(options && options.inline);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Form7.default.Group, { className: "mb-0", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.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 checked = (0, import_utils16.enumOptionsIsSelected)(option.value, value);
-    const radio = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    const radio = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_Form7.default.Check,
       {
         inline,
@@ -742,7 +747,7 @@ function RadioWidget({
 // src/RangeWidget/RangeWidget.tsx
 var import_utils17 = require("@rjsf/utils");
 var import_FormRange = __toESM(require("react-bootstrap/FormRange"), 1);
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const { id, value, disabled, onChange, onBlur, onFocus, schema } = props;
   const _onChange = ({ target: { value: value2 } }) => onChange(value2);
@@ -758,16 +763,16 @@ function RangeWidget(props) {
     onFocus: _onFocus,
     ...(0, import_utils17.rangeSpec)(schema)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormRange.default, { ...rangeProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "range-view", children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_FormRange.default, { ...rangeProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "range-view", children: value })
   ] });
 }
 
 // src/SelectWidget/SelectWidget.tsx
 var import_FormSelect = __toESM(require("react-bootstrap/FormSelect"), 1);
 var import_utils18 = require("@rjsf/utils");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function SelectWidget({
   schema,
   id,
@@ -795,7 +800,7 @@ function SelectWidget({
   }
   const selectedIndexes = (0, import_utils18.enumOptionsIndexForValue)(value, enumOptions, multiple);
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     import_FormSelect.default,
     {
       id,
@@ -820,10 +825,10 @@ function SelectWidget({
       },
       "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
       children: [
-        showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("option", { value: "", children: placeholder }),
+        showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime20.jsx)("option", { id: label, value: String(i), disabled: disabled2, children: label }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { id: label, value: String(i), disabled: disabled2, children: label }, i);
         })
       ]
     }
@@ -834,7 +839,7 @@ function SelectWidget({
 var import_utils19 = require("@rjsf/utils");
 var import_FormControl = __toESM(require("react-bootstrap/FormControl"), 1);
 var import_InputGroup = __toESM(require("react-bootstrap/InputGroup"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function TextareaWidget({
   id,
   placeholder,
@@ -851,7 +856,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__ */ (0, import_jsx_runtime21.jsx)(import_InputGroup.default, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_InputGroup.default, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_FormControl.default,
     {
       id,
@@ -896,7 +901,7 @@ var Theme_default = generateTheme();
 
 // src/Form/Form.tsx
 function generateForm() {
-  return (0, import_core.withTheme)(generateTheme());
+  return (0, import_core2.withTheme)(generateTheme());
 }
 var Form_default = generateForm();