@rjsf/semantic-ui 6.0.0-beta.20 → 6.0.0-beta.21

package/dist/index.cjs

@@ -64,9 +64,9 @@ function AddButton({
     {
       title: translateString(import_utils.TranslatableString.AddItemButton),
       color,
+      size: "tiny",
       ...props,
       icon: true,
-      size: "tiny",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_semantic_ui_react.Icon, { name: "plus" })
     }
   );
@@ -151,6 +151,7 @@ function ArrayFieldTemplate(props) {
     // classNames, This is not part of the type, so it is likely never passed in
     disabled,
     items,
+    optionalDataControl,
     onAddClick,
     // options, This is not part of the type, so it is likely never passed in
     readonly,
@@ -182,6 +183,7 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -194,7 +196,8 @@ function ArrayFieldTemplate(props) {
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -208,16 +211,19 @@ function ArrayFieldTemplate(props) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "row array-item-list", children: items && items.map(({ key, uiSchema: itemUiSchema = {}, ...props2 }) => {
-        const mergedUiSchema = {
-          ...itemUiSchema,
-          [import_utils4.UI_OPTIONS_KEY]: {
-            ...itemUiSchema[import_utils4.UI_OPTIONS_KEY],
-            semantic
-          }
-        };
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrayFieldItemTemplate2, { ...props2, uiSchema: mergedUiSchema }, key);
-      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "row array-item-list", children: [
+        !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+        items.map(({ key, uiSchema: itemUiSchema = {}, ...props2 }) => {
+          const mergedUiSchema = {
+            ...itemUiSchema,
+            [import_utils4.UI_OPTIONS_KEY]: {
+              ...itemUiSchema[import_utils4.UI_OPTIONS_KEY],
+              semantic
+            }
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrayFieldItemTemplate2, { ...props2, uiSchema: mergedUiSchema }, key);
+        })
+      ] }),
       canAdd && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
@@ -499,6 +505,7 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 function ObjectFieldTemplate(props) {
   const {
     description,
+    optionalDataControl,
     onAddClick,
     title,
     properties,
@@ -518,6 +525,7 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -530,7 +538,8 @@ function ObjectFieldTemplate(props) {
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -543,6 +552,7 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
+    !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     properties.map((prop) => prop.content),
     (0, import_utils11.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_semantic_ui_react10.Grid.Column, { width: 16, verticalAlign: "middle", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_semantic_ui_react10.Grid.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "div",
@@ -568,21 +578,53 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      AddButton,
+      {
+        id,
+        registry,
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label,
+        size: "mini"
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label,
+        size: "mini"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
 var import_semantic_ui_react11 = require("semantic-ui-react");
 var import_utils12 = require("@rjsf/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps = {} } = (0, import_utils12.getSubmitButtonOptions)(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_semantic_ui_react11.Button, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react11.Button, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
 }
 
 // src/TitleField/TitleField.tsx
 var import_semantic_ui_react12 = require("semantic-ui-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEFAULT_OPTIONS2 = {
   inverted: false,
   dividing: true
@@ -590,22 +632,27 @@ var DEFAULT_OPTIONS2 = {
 function TitleField({
   id,
   title,
-  uiSchema
+  uiSchema,
+  optionalDataControl
 }) {
   const semanticProps = getSemanticProps({
     uiSchema,
     defaultSchemaProps: DEFAULT_OPTIONS2
   });
-  if (!title) {
-    return null;
+  let heading = title ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react12.Header, { id, ...semanticProps, as: "h5", children: title }) : null;
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_semantic_ui_react12.Grid, { colums: 2, relaxed: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react12.Grid.Column, { width: 14, style: { paddingRight: 0 }, children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react12.Grid.Column, { width: 2, children: optionalDataControl })
+    ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react12.Header, { id, ...semanticProps, as: "h5", children: title });
+  return heading;
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
 var import_utils13 = require("@rjsf/utils");
 var import_semantic_ui_react13 = require("semantic-ui-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -628,11 +675,11 @@ function WrapIfAdditionalTemplate(props) {
   const { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
   const additional = import_utils13.ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classNames, style, children });
   }
   const handleBlur = ({ target }) => onKeyChange(target.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Grid, { columns: "equal", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_semantic_ui_react13.Grid.Row, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Grid.Column, { className: "form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Form.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_semantic_ui_react13.Grid, { columns: "equal", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_semantic_ui_react13.Grid.Row, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_semantic_ui_react13.Grid.Column, { className: "form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_semantic_ui_react13.Form.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_semantic_ui_react13.Form.Input,
       {
         className: "form-group",
@@ -650,8 +697,8 @@ function WrapIfAdditionalTemplate(props) {
         type: "text"
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Grid.Column, { className: "form-additional", verticalAlign: "middle", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Grid.Column, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_semantic_ui_react13.Grid.Column, { className: "form-additional", verticalAlign: "middle", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_semantic_ui_react13.Grid.Column, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       RemoveButton2,
       {
         id: (0, import_utils13.buttonId)(id, "remove"),
@@ -688,6 +735,7 @@ function generateTemplates() {
     GridTemplate,
     MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -697,7 +745,7 @@ var Templates_default = generateTemplates();
 // src/CheckboxWidget/CheckboxWidget.tsx
 var import_utils14 = require("@rjsf/utils");
 var import_semantic_ui_react14 = require("semantic-ui-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
@@ -735,8 +783,8 @@ function CheckboxWidget(props) {
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils14.descriptionId)(id),
@@ -746,7 +794,7 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_semantic_ui_react14.Form.Checkbox,
       {
         id,
@@ -770,7 +818,7 @@ function CheckboxWidget(props) {
 // src/CheckboxesWidget/CheckboxesWidget.tsx
 var import_semantic_ui_react15 = require("semantic-ui-react");
 var import_utils15 = require("@rjsf/utils");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function CheckboxesWidget(props) {
   const {
     id,
@@ -810,12 +858,12 @@ function CheckboxesWidget(props) {
   const _onBlur = () => onBlur(id, value);
   const _onFocus = () => onFocus(id, value);
   const inlineOption = inline ? { inline: true } : { grouped: true };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TitleFieldTemplate, { id: (0, import_utils15.titleId)(id), title: label, schema, uiSchema, registry }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_semantic_ui_react15.Form.Group, { id, name: id, ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TitleFieldTemplate, { id: (0, import_utils15.titleId)(id), title: label, schema, uiSchema, registry }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_semantic_ui_react15.Form.Group, { id, name: id, ...inlineOption, 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_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         import_semantic_ui_react15.Form.Checkbox,
         {
           id: (0, import_utils15.optionId)(id, index),
@@ -840,7 +888,7 @@ function CheckboxesWidget(props) {
 // src/RadioWidget/RadioWidget.tsx
 var import_utils16 = require("@rjsf/utils");
 var import_semantic_ui_react16 = require("semantic-ui-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var import_react = require("react");
 function RadioWidget(props) {
   const {
@@ -869,7 +917,7 @@ function RadioWidget(props) {
   const _onBlur = () => onBlur(id, value);
   const _onFocus = () => onFocus(id, value);
   const inlineOption = options.inline ? { inline: true } : { grouped: true };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_semantic_ui_react16.Form.Group, { ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_semantic_ui_react16.Form.Group, { ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = (0, import_utils16.enumOptionsIsSelected)(option.value, value);
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     return /* @__PURE__ */ (0, import_react.createElement)(
@@ -898,7 +946,7 @@ function RadioWidget(props) {
 // src/RangeWidget/RangeWidget.tsx
 var import_semantic_ui_react17 = require("semantic-ui-react");
 var import_utils17 = require("@rjsf/utils");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const {
     id,
@@ -926,8 +974,8 @@ function RangeWidget(props) {
   const _onChange = ({ target: { value: value2 } }) => onChange && onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_semantic_ui_react17.Input,
       {
         id,
@@ -946,7 +994,7 @@ function RangeWidget(props) {
       },
       id
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: value })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: value })
   ] });
 }
 
@@ -954,7 +1002,7 @@ function RangeWidget(props) {
 var import_utils18 = require("@rjsf/utils");
 var import_map = __toESM(require("lodash/map"), 1);
 var import_semantic_ui_react18 = require("semantic-ui-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled, showPlaceholderOption, placeholder) {
   const disabledOptions = enumDisabled || [];
   const options = (0, import_map.default)(enumOptions, ({ label, value }, index) => ({
@@ -1014,7 +1062,7 @@ function SelectWidget(props) {
   const _onBlur = (_, { target }) => onBlur(id, (0, import_utils18.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
   const _onFocus = (_, { target }) => onFocus(id, (0, import_utils18.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
   const selectedIndexes = (0, import_utils18.enumOptionsIndexForValue)(value, enumOptions, multiple);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_semantic_ui_react18.Form.Dropdown,
     {
       id,
@@ -1042,7 +1090,7 @@ function SelectWidget(props) {
 // src/TextareaWidget/TextareaWidget.tsx
 var import_utils19 = require("@rjsf/utils");
 var import_semantic_ui_react19 = require("semantic-ui-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function TextareaWidget(props) {
   const {
     id,
@@ -1069,7 +1117,7 @@ function TextareaWidget(props) {
   const _onChange = ({ target: { value: value2 } }) => onChange && onChange(value2 === "" ? options.emptyValue : value2);
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_semantic_ui_react19.Form.TextArea,
     {
       id,