@rjsf/semantic-ui 6.0.0-beta.1 → 6.0.0-beta.11

package/README.md

@@ -64,9 +64,11 @@ Exports `semantic-ui` theme, fields and widgets for `react-jsonschema-form`.
 
 ### Prerequisites
 
-- `@semantic-ui-react >= 0.87.0`
-- `@semantic-ui-css >= 2.4.1` ([default theme for semantic-ui](https://github.com/Semantic-Org/Semantic-UI-CSS)); see [theming guide](https://react.semantic-ui.com/theming) if you wish to customize
-- `@rjsf/core >= 2.0.0`
+- `@semantic-ui-react >= 2`
+- `@semantic-ui-css >= 2` ([default theme for semantic-ui](https://github.com/Semantic-Org/Semantic-UI-CSS)); see [theming guide](https://react.semantic-ui.com/theming) if you wish to customize
+- `@rjsf/core >= 6`
+- `@rjsf/utils >= 6`
+- `@rjsf/validator-ajv8 >= 6`
 
 ```sh
 yarn add semantic-ui-css semantic-ui-react @rjsf/core

package/dist/index.js

@@ -43,7 +43,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SemanticUIForm/SemanticUIForm.ts
-var import_core = require("@rjsf/core");
+var import_core2 = require("@rjsf/core");
 
 // src/Theme/Theme.ts
 var import_semantic_ui_react20 = require("semantic-ui-react");
@@ -309,13 +309,14 @@ function BaseInputTemplate(props) {
 }
 
 // src/DescriptionField/DescriptionField.tsx
+var import_core = require("@rjsf/core");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function DescriptionField(props) {
-  const { id, description } = props;
+  const { id, description, registry, uiSchema } = props;
   if (!description) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id, className: "sui-description", children: description });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id, className: "sui-description", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.RichDescription, { description, registry, uiSchema }) });
 }
 
 // src/ErrorList/ErrorList.tsx
@@ -479,10 +480,20 @@ function GridTemplate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_semantic_ui_react9.Grid, { ...rest, children });
 }
 
+// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function MultiSchemaFieldTemplate(props) {
+  const { selector, optionSchemaField } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: selector }),
+    optionSchemaField
+  ] });
+}
+
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 var import_semantic_ui_react10 = require("semantic-ui-react");
 var import_utils11 = require("@rjsf/utils");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -508,8 +519,8 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       TitleFieldTemplate,
       {
         id: (0, import_utils11.titleId)(idSchema),
@@ -520,7 +531,7 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils11.descriptionId)(idSchema),
@@ -531,7 +542,7 @@ function ObjectFieldTemplate(props) {
       }
     ),
     properties.map((prop) => prop.content),
-    (0, import_utils11.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_semantic_ui_react10.Grid.Column, { width: 16, verticalAlign: "middle", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_semantic_ui_react10.Grid.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    (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",
       {
         style: {
@@ -539,7 +550,7 @@ function ObjectFieldTemplate(props) {
           position: "relative",
           textAlign: "right"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           AddButton2,
           {
             id: (0, import_utils11.buttonId)(idSchema, "add"),
@@ -558,18 +569,18 @@ function ObjectFieldTemplate(props) {
 // src/SubmitButton/SubmitButton.tsx
 var import_semantic_ui_react11 = require("semantic-ui-react");
 var import_utils12 = require("@rjsf/utils");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = 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_runtime14.jsx)(import_semantic_ui_react11.Button, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var DEFAULT_OPTIONS2 = {
   inverted: false,
   dividing: true
@@ -586,13 +597,13 @@ function TitleField({
   if (!title) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_semantic_ui_react12.Header, { id, ...semanticProps, as: "h5", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react12.Header, { id, ...semanticProps, as: "h5", children: title });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
 var import_utils13 = require("@rjsf/utils");
 var import_semantic_ui_react13 = require("semantic-ui-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -615,11 +626,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_runtime16.jsx)("div", { className: classNames, style, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
   }
   const handleBlur = ({ target }) => onKeyChange(target.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: classNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react13.Grid, { columns: "equal", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_semantic_ui_react13.Grid.Row, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react13.Grid.Column, { className: "form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react13.Form.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  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)(
       import_semantic_ui_react13.Form.Input,
       {
         className: "form-group",
@@ -637,8 +648,8 @@ function WrapIfAdditionalTemplate(props) {
         type: "text"
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react13.Grid.Column, { className: "form-additional", verticalAlign: "middle", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react13.Grid.Column, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__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)(
       RemoveButton2,
       {
         id: (0, import_utils13.buttonId)(id, "remove"),
@@ -673,6 +684,7 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
@@ -683,7 +695,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_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
@@ -722,8 +734,8 @@ function CheckboxWidget(props) {
   const _onFocus = () => onFocus && onFocus(id, value);
   const checked = value == "true" || value == true;
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    !hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils14.descriptionId)(id),
@@ -733,7 +745,7 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_semantic_ui_react14.Form.Checkbox,
       {
         id,
@@ -757,7 +769,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_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CheckboxesWidget(props) {
   const {
     id,
@@ -798,12 +810,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_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TitleFieldTemplate, { id: (0, import_utils15.titleId)(id), title: label, schema, uiSchema, registry }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_semantic_ui_react15.Form.Group, { id, name: id, ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  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) => {
       const checked = (0, import_utils15.enumOptionsIsSelected)(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         import_semantic_ui_react15.Form.Checkbox,
         {
           id: (0, import_utils15.optionId)(id, index),
@@ -828,7 +840,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_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var import_react = require("react");
 function RadioWidget(props) {
   const {
@@ -857,7 +869,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_runtime19.jsx)(import_semantic_ui_react16.Form.Group, { ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.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)(
@@ -886,7 +898,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_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function RangeWidget(props) {
   const {
     id,
@@ -914,8 +926,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_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_semantic_ui_react17.Input,
       {
         id,
@@ -934,7 +946,7 @@ function RangeWidget(props) {
       },
       id
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: value })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: value })
   ] });
 }
 
@@ -942,7 +954,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_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled, showPlaceholderOption, placeholder) {
   const disabledOptions = enumDisabled || [];
   const options = (0, import_map.default)(enumOptions, ({ label, value }, index) => ({
@@ -1002,7 +1014,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_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_semantic_ui_react18.Form.Dropdown,
     {
       id,
@@ -1030,7 +1042,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_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function TextareaWidget(props) {
   const {
     id,
@@ -1057,7 +1069,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_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_semantic_ui_react19.Form.TextArea,
     {
       id,
@@ -1105,7 +1117,7 @@ var Theme_default = generateTheme();
 
 // src/SemanticUIForm/SemanticUIForm.ts
 function generateForm() {
-  return (0, import_core.withTheme)(generateTheme());
+  return (0, import_core2.withTheme)(generateTheme());
 }
 var SemanticUIForm_default = generateForm();