@rjsf/semantic-ui 6.6.1 → 6.7.0

package/dist/semantic-ui.esm.js

@@ -29,16 +29,11 @@ function AddButton({
 }
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
-import {
-  getUiOptions as getUiOptions2,
-  getTemplate
-} from "@rjsf/utils";
+import { getUiOptions as getUiOptions2, getTemplate } from "@rjsf/utils";
 import { Button as Button2, Grid, Segment } from "semantic-ui-react";
 
 // src/util.tsx
-import {
-  getUiOptions
-} from "@rjsf/utils";
+import { getUiOptions } from "@rjsf/utils";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function getSemanticProps({
   formContext = {},
@@ -50,14 +45,13 @@ function getSemanticProps({
   const formContextProps = formContext.semantic;
   const schemaProps = getUiOptions(uiSchema).semantic;
   const optionProps = options.semantic;
-  return Object.assign(
-    {},
-    { ...defaultSchemaProps },
-    { ...defaultContextProps },
-    schemaProps,
-    optionProps,
-    formContextProps
-  );
+  return {
+    ...defaultSchemaProps,
+    ...defaultContextProps,
+    ...schemaProps,
+    ...optionProps,
+    ...formContextProps
+  };
 }
 function getSemanticErrorProps({
   formContext = {},
@@ -65,11 +59,11 @@ function getSemanticErrorProps({
   options = {},
   defaultProps = { size: "small", pointing: "above" }
 }) {
-  const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
+  const formContextProps = formContext.semantic?.errorOptions;
   const semanticOptions = getUiOptions(uiSchema).semantic;
-  const schemaProps = semanticOptions && semanticOptions.errorOptions;
-  const optionProps = options.semantic && options.semantic.errorOptions;
-  return Object.assign({}, { ...defaultProps }, schemaProps, optionProps, formContextProps);
+  const schemaProps = semanticOptions?.errorOptions;
+  const optionProps = options.semantic?.errorOptions;
+  return { ...defaultProps, ...schemaProps, ...optionProps, ...formContextProps };
 }
 function cleanClassNames(classNameArr, omit = []) {
   const classList = classNameArr.filter(Boolean).reduce((previous, current) => previous.concat(current.trim().split(/\s+/)), []);
@@ -115,12 +109,7 @@ function ArrayFieldItemTemplate(props) {
 }
 
 // src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
-import {
-  getTemplate as getTemplate2,
-  getUiOptions as getUiOptions3,
-  isFixedItems,
-  buttonId
-} from "@rjsf/utils";
+import { getTemplate as getTemplate2, getUiOptions as getUiOptions3, isFixedItems, buttonId } from "@rjsf/utils";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function ArrayFieldTemplate(props) {
   const {
@@ -211,12 +200,7 @@ function ArrayFieldTemplate(props) {
 // src/BaseInputTemplate/BaseInputTemplate.tsx
 import { useCallback } from "react";
 import { SchemaExamples } from "@rjsf/core";
-import {
-  ariaDescribedByIds,
-  examplesId,
-  getInputProps,
-  labelValue
-} from "@rjsf/utils";
+import { ariaDescribedByIds, examplesId, getInputProps, labelValue } from "@rjsf/utils";
 import { Form } from "semantic-ui-react";
 import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
@@ -249,10 +233,10 @@ function BaseInputTemplate(props) {
     formContext: registry.formContext,
     options
   });
-  const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
-  const _onBlur = () => onBlur && onBlur(id, value);
-  const _onFocus = () => onFocus && onFocus(id, value);
-  const _onClear = useCallback(
+  const handleChange = ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
+  const handleClear = useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -276,41 +260,58 @@ function BaseInputTemplate(props) {
         ...semanticProps,
         value: value || value === 0 ? value : "",
         error: rawErrors.length > 0,
-        onChange: onChangeOverride || _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: onChangeOverride || handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
       },
       id
     ),
-    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsx5(ClearButton2, { registry, onClick: _onClear }),
+    options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsx5(ClearButton2, { registry, onClick: handleClear }),
     /* @__PURE__ */ jsx5(SchemaExamples, { id, schema })
   ] });
 }
 
+// src/CyclicSchemaExpandTemplate/CyclicSchemaExpandTemplate.tsx
+import { ID_KEY, TranslatableString as TranslatableString2 } from "@rjsf/utils";
+import { Button as Button3 } from "semantic-ui-react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function CyclicSchemaExpandTemplate(props) {
+  const { name, fieldPathId, registry, onExpand } = props;
+  const { translateString } = registry;
+  const buttonId4 = `${fieldPathId[ID_KEY]}-button`;
+  return /* @__PURE__ */ jsxs4("div", { style: { marginTop: "1rem", marginBottom: "1rem" }, children: [
+    /* @__PURE__ */ jsx6("p", { style: { color: "red" }, children: translateString(TranslatableString2.CycleDetected, [name]) }),
+    /* @__PURE__ */ jsx6(Button3, { id: buttonId4, type: "button", size: "mini", onClick: () => onExpand(fieldPathId[ID_KEY]), children: translateString(TranslatableString2.ExpandButton) })
+  ] });
+}
+
 // src/DescriptionField/DescriptionField.tsx
 import { RichDescription } from "@rjsf/core";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function DescriptionField(props) {
   const { id, description, registry, uiSchema } = props;
   if (!description) {
     return null;
   }
-  return /* @__PURE__ */ jsx6("p", { id, className: "sui-description", children: /* @__PURE__ */ jsx6(RichDescription, { description, registry, uiSchema }) });
+  return /* @__PURE__ */ jsx7("p", { id, className: "sui-description", children: /* @__PURE__ */ jsx7(RichDescription, { description, registry, uiSchema }) });
 }
 
 // src/ErrorList/ErrorList.tsx
-import { TranslatableString as TranslatableString2 } from "@rjsf/utils";
+import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
 import { Message } from "semantic-ui-react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function ErrorList({
   errors,
   registry
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsxs4(Message, { negative: true, children: [
-    /* @__PURE__ */ jsx7(Message.Header, { children: translateString(TranslatableString2.ErrorsLabel) }),
-    /* @__PURE__ */ jsx7(Message.List, { children: errors.map((error, index) => /* @__PURE__ */ jsx7(Message.Item, { children: error.stack }, `error-${index}`)) })
+  return /* @__PURE__ */ jsxs5(Message, { negative: true, children: [
+    /* @__PURE__ */ jsx8(Message.Header, { children: translateString(TranslatableString3.ErrorsLabel) }),
+    /* @__PURE__ */ jsx8(Message.List, { children: errors.map((error, index) => (
+      // oxlint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ jsx8(Message.Item, { children: error.stack }, `error-${index}`)
+    )) })
   ] });
 }
 
@@ -318,7 +319,7 @@ function ErrorList({
 import { errorId } from "@rjsf/utils";
 import uniqueId from "lodash/uniqueId";
 import { Label, List } from "semantic-ui-react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   options: {
     pointing: "above",
@@ -335,7 +336,7 @@ function FieldErrorTemplate({ errors, fieldPathId, uiSchema, registry }) {
   const { pointing, size } = options;
   if (errors && errors.length > 0) {
     const id = errorId(fieldPathId);
-    return /* @__PURE__ */ jsx8(Label, { id, color: "red", pointing: pointing || "above", size: size || "small", basic: true, children: /* @__PURE__ */ jsx8(List, { bulleted: true, children: errors.map((error) => /* @__PURE__ */ jsx8(List.Item, { children: error }, uniqueId("field-error-"))) }) });
+    return /* @__PURE__ */ jsx9(Label, { id, color: "red", pointing: pointing || "above", size: size || "small", basic: true, children: /* @__PURE__ */ jsx9(List, { bulleted: true, children: errors.map((error) => /* @__PURE__ */ jsx9(List.Item, { children: error }, uniqueId("field-error-"))) }) });
   }
   return null;
 }
@@ -344,22 +345,19 @@ function FieldErrorTemplate({ errors, fieldPathId, uiSchema, registry }) {
 import { RichHelp } from "@rjsf/core";
 import { helpId } from "@rjsf/utils";
 import { Message as Message2 } from "semantic-ui-react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
   const { fieldPathId, help, uiSchema, registry } = props;
   if (help) {
-    return /* @__PURE__ */ jsx9(Message2, { size: "mini", info: true, id: helpId(fieldPathId), children: /* @__PURE__ */ jsx9(RichHelp, { help, registry, uiSchema }) });
+    return /* @__PURE__ */ jsx10(Message2, { size: "mini", info: true, id: helpId(fieldPathId), children: /* @__PURE__ */ jsx10(RichHelp, { help, registry, uiSchema }) });
   }
   return null;
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
-import {
-  getTemplate as getTemplate3,
-  getUiOptions as getUiOptions4
-} from "@rjsf/utils";
+import { getTemplate as getTemplate3, getUiOptions as getUiOptions4 } from "@rjsf/utils";
 import { Form as Form2 } from "semantic-ui-react";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function FieldTemplate(props) {
   const {
     id,
@@ -390,10 +388,10 @@ function FieldTemplate(props) {
     uiOptions
   );
   if (hidden) {
-    return /* @__PURE__ */ jsx10("div", { style: { display: "none" }, children });
+    return /* @__PURE__ */ jsx11("div", { style: { display: "none" }, children });
   }
   const isCheckbox = uiOptions.widget === "checkbox";
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     WrapIfAdditionalTemplate2,
     {
       classNames,
@@ -406,9 +404,9 @@ function FieldTemplate(props) {
       schema,
       uiSchema,
       ...otherProps,
-      children: /* @__PURE__ */ jsx10(Form2.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ jsxs5(MaybeWrap, { wrap: wrapContent, className: "sui-field-content", children: [
+      children: /* @__PURE__ */ jsx11(Form2.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ jsxs6(MaybeWrap, { wrap: wrapContent, className: "sui-field-content", children: [
         children,
-        displayLabel && rawDescription && !isCheckbox && /* @__PURE__ */ jsx10(MaybeWrap, { wrap: wrapLabel, className: "sui-field-label", children: description }),
+        displayLabel && rawDescription && !isCheckbox && /* @__PURE__ */ jsx11(MaybeWrap, { wrap: wrapLabel, className: "sui-field-label", children: description }),
         help,
         errors
       ] }) }, id)
@@ -418,23 +416,24 @@ function FieldTemplate(props) {
 
 // src/GridTemplate/GridTemplate.tsx
 import { Grid as Grid2 } from "semantic-ui-react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function GridTemplate(props) {
   const { children, column, ...rest } = props;
   if (column) {
-    return /* @__PURE__ */ jsx11(Grid2.Column, { ...rest, children });
+    return /* @__PURE__ */ jsx12(Grid2.Column, { ...rest, children });
   }
-  return /* @__PURE__ */ jsx11(Grid2, { ...rest, children });
+  return /* @__PURE__ */ jsx12(Grid2, { ...rest, children });
 }
 
 // src/IconButton/IconButton.tsx
-import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
-import { Button as Button3 } from "semantic-ui-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-function IconButton(props) {
+import { memo } from "react";
+import { TranslatableString as TranslatableString4 } from "@rjsf/utils";
+import { Button as Button4 } from "semantic-ui-react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function IconButtonFn(props) {
   const { icon, iconType, color, className, uiSchema, registry, ...otherProps } = props;
-  return /* @__PURE__ */ jsx12(
-    Button3,
+  return /* @__PURE__ */ jsx13(
+    Button4,
     {
       icon,
       size: iconType,
@@ -444,58 +443,57 @@ function IconButton(props) {
     }
   );
 }
-function CopyButton(props) {
+var IconButton = memo(IconButtonFn);
+function CopyButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx12(IconButton, { title: translateString(TranslatableString3.CopyButton), ...props, icon: "copy" });
+  return /* @__PURE__ */ jsx13(IconButton, { title: translateString(TranslatableString4.CopyButton), ...props, icon: "copy" });
 }
-function MoveDownButton(props) {
+var CopyButton = memo(CopyButtonFn);
+function MoveDownButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx12(IconButton, { title: translateString(TranslatableString3.MoveDownButton), ...props, icon: "angle down" });
+  return /* @__PURE__ */ jsx13(IconButton, { title: translateString(TranslatableString4.MoveDownButton), ...props, icon: "angle down" });
 }
-function MoveUpButton(props) {
+var MoveDownButton = memo(MoveDownButtonFn);
+function MoveUpButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx12(IconButton, { title: translateString(TranslatableString3.MoveUpButton), ...props, icon: "angle up" });
+  return /* @__PURE__ */ jsx13(IconButton, { title: translateString(TranslatableString4.MoveUpButton), ...props, icon: "angle up" });
 }
-function RemoveButton(props) {
+var MoveUpButton = memo(MoveUpButtonFn);
+function RemoveButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx12(IconButton, { title: translateString(TranslatableString3.RemoveButton), ...props, icon: "trash" });
+  return /* @__PURE__ */ jsx13(IconButton, { title: translateString(TranslatableString4.RemoveButton), ...props, icon: "trash" });
 }
-function ClearButton(props) {
+var RemoveButton = memo(RemoveButtonFn);
+function ClearButtonFn(props) {
   const {
     registry: { translateString }
   } = props;
-  return /* @__PURE__ */ jsx12(IconButton, { title: translateString(TranslatableString3.ClearButton), ...props, icon: "close" });
+  return /* @__PURE__ */ jsx13(IconButton, { title: translateString(TranslatableString4.ClearButton), ...props, icon: "close" });
 }
+var ClearButton = memo(ClearButtonFn);
 
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function MultiSchemaFieldTemplate(props) {
   const { selector, optionSchemaField } = props;
-  return /* @__PURE__ */ jsxs6("div", { children: [
-    /* @__PURE__ */ jsx13("div", { children: selector }),
+  return /* @__PURE__ */ jsxs7("div", { children: [
+    /* @__PURE__ */ jsx14("div", { children: selector }),
     optionSchemaField
   ] });
 }
 
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
-import {
-  canExpand,
-  descriptionId,
-  getTemplate as getTemplate4,
-  getUiOptions as getUiOptions5,
-  titleId,
-  buttonId as buttonId2
-} from "@rjsf/utils";
+import { canExpand, descriptionId, getTemplate as getTemplate4, getUiOptions as getUiOptions5, titleId, buttonId as buttonId2 } from "@rjsf/utils";
 import { Grid as Grid3 } from "semantic-ui-react";
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -523,8 +521,8 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    title && /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    title && /* @__PURE__ */ jsx15(
       TitleFieldTemplate,
       {
         id: titleId(fieldPathId),
@@ -536,7 +534,7 @@ function ObjectFieldTemplate(props) {
         optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ jsx14(
+    description && /* @__PURE__ */ jsx15(
       DescriptionFieldTemplate,
       {
         id: descriptionId(fieldPathId),
@@ -548,7 +546,7 @@ function ObjectFieldTemplate(props) {
     ),
     !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     properties.map((prop) => prop.content),
-    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx14(Grid3.Column, { width: 16, verticalAlign: "middle", children: /* @__PURE__ */ jsx14(Grid3.Row, { children: /* @__PURE__ */ jsx14(
+    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx15(Grid3.Column, { width: 16, verticalAlign: "middle", children: /* @__PURE__ */ jsx15(Grid3.Row, { children: /* @__PURE__ */ jsx15(
       "div",
       {
         style: {
@@ -556,7 +554,7 @@ function ObjectFieldTemplate(props) {
           position: "relative",
           textAlign: "right"
         },
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx15(
           AddButton2,
           {
             id: buttonId2(fieldPathId, "add"),
@@ -573,11 +571,11 @@ function ObjectFieldTemplate(props) {
 }
 
 // src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function OptionalDataControlsTemplate(props) {
   const { id, registry, label, onAddClick, onRemoveClick } = props;
   if (onAddClick) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       AddButton,
       {
         id,
@@ -588,8 +586,9 @@ function OptionalDataControlsTemplate(props) {
         size: "mini"
       }
     );
-  } else if (onRemoveClick) {
-    return /* @__PURE__ */ jsx15(
+  }
+  if (onRemoveClick) {
+    return /* @__PURE__ */ jsx16(
       RemoveButton,
       {
         id,
@@ -601,24 +600,24 @@ function OptionalDataControlsTemplate(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx15("em", { id, children: label });
+  return /* @__PURE__ */ jsx16("em", { id, children: label });
 }
 
 // src/SubmitButton/SubmitButton.tsx
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { Button as Button4 } from "semantic-ui-react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { Button as Button5 } from "semantic-ui-react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx16(Button4, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
+  return /* @__PURE__ */ jsx17(Button5, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
 }
 
 // src/TitleField/TitleField.tsx
 import { Grid as Grid4, Header } from "semantic-ui-react";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS2 = {
   inverted: false,
   dividing: true
@@ -633,24 +632,20 @@ function TitleField({
     uiSchema,
     defaultSchemaProps: DEFAULT_OPTIONS2
   });
-  let heading = title ? /* @__PURE__ */ jsx17(Header, { id, ...semanticProps, as: "h5", children: title }) : null;
+  let heading = title ? /* @__PURE__ */ jsx18(Header, { id, ...semanticProps, as: "h5", children: title }) : null;
   if (optionalDataControl) {
-    heading = /* @__PURE__ */ jsxs8(Grid4, { colums: 2, relaxed: true, children: [
-      /* @__PURE__ */ jsx17(Grid4.Column, { width: 14, style: { paddingRight: 0 }, children: heading }),
-      /* @__PURE__ */ jsx17(Grid4.Column, { width: 2, children: optionalDataControl })
+    heading = /* @__PURE__ */ jsxs9(Grid4, { colums: 2, relaxed: true, children: [
+      /* @__PURE__ */ jsx18(Grid4.Column, { width: 14, style: { paddingRight: 0 }, children: heading }),
+      /* @__PURE__ */ jsx18(Grid4.Column, { width: 2, children: optionalDataControl })
     ] });
   }
   return heading;
 }
 
 // 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 TranslatableString5 } from "@rjsf/utils";
 import { Form as Form3, Grid as Grid5 } from "semantic-ui-react";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -671,35 +666,35 @@ function WrapIfAdditionalTemplate(props) {
   } = props;
   const { templates, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
-  const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
+  const keyLabel = translateString(TranslatableString5.KeyLabel, [label]);
   const { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
   const margin = rawDescription ? 4 : 24;
   if (!additional) {
-    return /* @__PURE__ */ jsx18("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx19("div", { className: classNames, style, children });
   }
-  return /* @__PURE__ */ jsx18("div", { className: classNames, style, children: /* @__PURE__ */ jsx18(Grid5, { children: /* @__PURE__ */ jsxs9(Grid5.Row, { children: [
-    /* @__PURE__ */ jsx18(Grid5.Column, { width: 7, className: "form-additional", children: /* @__PURE__ */ jsx18(Form3.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19("div", { className: classNames, style, children: /* @__PURE__ */ jsx19(Grid5, { children: /* @__PURE__ */ jsxs10(Grid5.Row, { children: [
+    /* @__PURE__ */ jsx19(Grid5.Column, { width: 7, className: "form-additional", children: /* @__PURE__ */ jsx19(Form3.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ jsx19(
       Form3.Input,
       {
         className: "form-group",
         hasFeedback: true,
         fluid: true,
-        htmlFor: `${id}`,
+        htmlFor: id,
         label: displayLabel ? keyLabel : void 0,
         required,
         defaultValue: label,
         disabled: disabled || readonlyAsDisabled && readonly,
-        id: `${id}`,
-        name: `${id}`,
+        id,
+        name: id,
         onBlur: !readonly ? onKeyRenameBlur : void 0,
         style: wrapperStyle,
         type: "text"
       },
       label
     ) }) }),
-    /* @__PURE__ */ jsx18(Grid5.Column, { width: 7, className: "form-additional", verticalAlign: "middle", children }),
-    /* @__PURE__ */ jsx18(Grid5.Column, { verticalAlign: "middle", style: displayLabel ? { marginTop: `${margin}px` } : void 0, children: /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(Grid5.Column, { width: 7, className: "form-additional", verticalAlign: "middle", children }),
+    /* @__PURE__ */ jsx19(Grid5.Column, { verticalAlign: "middle", style: displayLabel ? { marginTop: `${margin}px` } : void 0, children: /* @__PURE__ */ jsx19(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
@@ -720,6 +715,7 @@ function generateTemplates() {
     ArrayFieldItemTemplate,
     ArrayFieldTemplate,
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     ButtonTemplates: {
       AddButton,
       CopyButton,
@@ -755,7 +751,7 @@ import {
   titleId as titleId2
 } from "@rjsf/utils";
 import { Form as Form4 } from "semantic-ui-react";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
@@ -786,22 +782,22 @@ function CheckboxesWidget(props) {
       inverted: "false"
     }
   });
-  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 = () => onBlur(id, value);
-  const _onFocus = () => onFocus(id, value);
+  const handleBlur = () => onBlur(id, value);
+  const handleFocus = () => onFocus(id, value);
   const inlineOption = inline ? { inline: true } : { grouped: true };
-  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
-    !hideLabel && !!label && /* @__PURE__ */ jsx19(TitleFieldTemplate, { id: titleId2(id), title: label, schema, uiSchema, registry }),
-    /* @__PURE__ */ jsx19(Form4.Group, { id, name: htmlName || id, ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    !hideLabel && !!label && /* @__PURE__ */ jsx20(TitleFieldTemplate, { id: titleId2(id), title: label, schema, uiSchema, registry }),
+    /* @__PURE__ */ jsx20(Form4.Group, { id, name: htmlName || id, ...inlineOption, 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__ */ jsx19(
+      const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
+      return /* @__PURE__ */ jsx20(
         Form4.Checkbox,
         {
           id: optionId(id, index),
@@ -812,27 +808,21 @@ function CheckboxesWidget(props) {
           error: rawErrors.length > 0,
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && index === 0,
-          onChange: _onChange(index),
-          onBlur: _onBlur,
-          onFocus: _onFocus,
+          onChange: handleChange(index),
+          onBlur: handleBlur,
+          onFocus: handleFocus,
           "aria-describedby": ariaDescribedByIds2(id)
         },
-        index
+        String(option.value)
       );
     }) })
   ] });
 }
 
 // src/CheckboxWidget/CheckboxWidget.tsx
-import {
-  ariaDescribedByIds as ariaDescribedByIds3,
-  descriptionId as descriptionId2,
-  getTemplate as getTemplate6,
-  labelValue as labelValue2,
-  schemaRequiresTrueValue
-} from "@rjsf/utils";
+import { ariaDescribedByIds as ariaDescribedByIds3, descriptionId as descriptionId2, getTemplate as getTemplate6, labelValue as labelValue2, schemaRequiresTrueValue } from "@rjsf/utils";
 import { Form as Form5 } from "semantic-ui-react";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
@@ -840,7 +830,7 @@ function CheckboxWidget(props) {
     value,
     disabled,
     readonly,
-    label = "",
+    label,
     hideLabel,
     autofocus,
     onChange,
@@ -866,13 +856,13 @@ function CheckboxWidget(props) {
     options
   );
   const required = schemaRequiresTrueValue(schema);
-  const checked = value == "true" || value == true;
-  const _onChange = (_, data) => onChange && onChange(data.checked);
-  const _onBlur = () => onBlur && onBlur(id, value);
-  const _onFocus = () => onFocus && onFocus(id, value);
+  const checked = value === "true" || value === true;
+  const handleChange = (_, data) => onChange?.(data.checked);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    !hideLabel && description && /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    !hideLabel && description && /* @__PURE__ */ jsx21(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -882,7 +872,7 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       Form5.Checkbox,
       {
         id,
@@ -892,9 +882,9 @@ function CheckboxWidget(props) {
         ...semanticProps,
         checked: typeof value === "undefined" ? false : checked,
         error: rawErrors.length > 0,
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         required,
         label: labelValue2(label, hideLabel, false),
         "aria-describedby": ariaDescribedByIds3(id)
@@ -913,7 +903,7 @@ import {
   optionId as optionId2
 } from "@rjsf/utils";
 import { Form as Form6, Radio } from "semantic-ui-react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 import { createElement } from "react";
 function RadioWidget(props) {
   const {
@@ -938,15 +928,13 @@ function RadioWidget(props) {
     options,
     uiSchema
   });
-  const _onChange = (_, { value: eventValue }) => {
-    return onChange(enumOptionValueDecoder(String(eventValue), enumOptions, optionValueFormat, emptyValue));
-  };
-  const _onBlur = () => onBlur(id, value);
-  const _onFocus = () => onFocus(id, value);
+  const handleChange = (_, { value: eventValue }) => onChange(enumOptionValueDecoder(String(eventValue), enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = () => onBlur(id, value);
+  const handleFocus = () => onFocus(id, value);
   const inlineOption = options.inline ? { inline: true } : { grouped: true };
-  return /* @__PURE__ */ jsx21(Form6.Group, { ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+  return /* @__PURE__ */ jsx22(Form6.Group, { ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = enumOptionsIsSelected2(option.value, value);
-    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
     return /* @__PURE__ */ createElement(
       Form6.Field,
       {
@@ -955,13 +943,13 @@ function RadioWidget(props) {
         id: optionId2(id, index),
         name: htmlName || id,
         ...semanticProps,
-        onFocus: _onFocus,
-        onBlur: _onBlur,
-        onChange: _onChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChange: handleChange,
         label: option.label,
         value: enumOptionValueEncoder(option.value, index, optionValueFormat),
         error: rawErrors.length > 0,
-        key: index,
+        key: String(option.value),
         checked,
         disabled: disabled || itemDisabled || readonly,
         "aria-describedby": ariaDescribedByIds4(id)
@@ -973,7 +961,7 @@ function RadioWidget(props) {
 // src/RangeWidget/RangeWidget.tsx
 import { ariaDescribedByIds as ariaDescribedByIds5, rangeSpec } from "@rjsf/utils";
 import { Input } from "semantic-ui-react";
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const {
     id,
@@ -998,11 +986,11 @@ function RangeWidget(props) {
       fluid: true
     }
   });
-  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__ */ jsxs12(Fragment5, { children: [
-    /* @__PURE__ */ jsx22(
+  const handleChange = ({ target: { value: value2 } }) => onChange?.(value2 === "" ? options.emptyValue : value2);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
+  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+    /* @__PURE__ */ jsx23(
       Input,
       {
         id,
@@ -1014,14 +1002,14 @@ function RangeWidget(props) {
         ...semanticProps,
         value: value || "",
         error: rawErrors.length > 0,
-        onChange: _onChange,
-        onBlur: _onBlur,
-        onFocus: _onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         "aria-describedby": ariaDescribedByIds5(id)
       },
       id
     ),
-    /* @__PURE__ */ jsx22("span", { children: value })
+    /* @__PURE__ */ jsx23("span", { children: value })
   ] });
 }
 
@@ -1032,15 +1020,17 @@ import {
   enumOptionValueDecoder as enumOptionValueDecoder2,
   enumOptionValueEncoder as enumOptionValueEncoder2,
   getOptionValueFormat as getOptionValueFormat2,
-  labelValue as labelValue3
+  labelValue as labelValue3,
+  logUnsupportedDefaultForEnum,
+  SelectedOptionDescription
 } from "@rjsf/utils";
 import map from "lodash/map";
 import { Form as Form7 } from "semantic-ui-react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled, showPlaceholderOption, placeholder, format = "indexed") {
   const disabledOptions = enumDisabled || [];
   const options = map(enumOptions, ({ label, value }, index) => ({
-    disabled: disabledOptions.indexOf(value) !== -1,
+    disabled: disabledOptions.includes(value),
     key: label,
     text: label,
     value: enumOptionValueEncoder2(value, index, format)
@@ -1088,6 +1078,7 @@ function SelectWidget(props) {
   const emptyValue = multiple ? [] : "";
   const optionValueFormat = getOptionValueFormat2(options);
   const showPlaceholderOption = !multiple && schema.default === void 0;
+  logUnsupportedDefaultForEnum(id, schema, enumOptions, multiple);
   const dropdownOptions = createDefaultValueOptionsForDropDown(
     enumOptions,
     enumDisabled,
@@ -1095,41 +1086,41 @@ function SelectWidget(props) {
     placeholder,
     optionValueFormat
   );
-  const _onChange = (_, { value: value2 }) => onChange(enumOptionValueDecoder2(value2, enumOptions, optionValueFormat, optEmptyVal));
-  const _onBlur = (_, { target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
-  const _onFocus = (_, { target }) => onFocus(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
-  return /* @__PURE__ */ jsx23(
-    Form7.Dropdown,
-    {
-      id,
-      name: htmlName || id,
-      label: labelValue3(label || void 0, hideLabel, false),
-      multiple: typeof multiple === "undefined" ? false : multiple,
-      value: enumOptionSelectedValue(value, enumOptions, !!multiple, optionValueFormat, emptyValue),
-      error: rawErrors.length > 0,
-      disabled,
-      placeholder,
-      ...semanticProps,
-      required,
-      autoFocus: autofocus,
-      readOnly: readonly,
-      options: dropdownOptions,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": ariaDescribedByIds6(id)
-    },
-    id
-  );
+  const handleChange = (_, { value: enumValue }) => onChange(enumOptionValueDecoder2(enumValue, enumOptions, optionValueFormat, optEmptyVal));
+  const handleBlur = (_, { target }) => onBlur(id, enumOptionValueDecoder2(target?.value, enumOptions, optionValueFormat, optEmptyVal));
+  const handleFocus = (_, { target }) => onFocus(id, enumOptionValueDecoder2(target?.value, enumOptions, optionValueFormat, optEmptyVal));
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsx24(
+      Form7.Dropdown,
+      {
+        id,
+        name: htmlName || id,
+        label: labelValue3(label || void 0, hideLabel, false),
+        multiple: typeof multiple === "undefined" ? false : multiple,
+        value: enumOptionSelectedValue(value, enumOptions, !!multiple, optionValueFormat, emptyValue),
+        error: rawErrors.length > 0,
+        disabled,
+        placeholder,
+        ...semanticProps,
+        required,
+        autoFocus: autofocus,
+        readOnly: readonly,
+        options: dropdownOptions,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        "aria-describedby": ariaDescribedByIds6(id)
+      },
+      id
+    ),
+    /* @__PURE__ */ jsx24(SelectedOptionDescription, { ...props })
+  ] });
 }
 
 // src/TextareaWidget/TextareaWidget.tsx
-import {
-  ariaDescribedByIds as ariaDescribedByIds7,
-  labelValue as labelValue4
-} from "@rjsf/utils";
+import { ariaDescribedByIds as ariaDescribedByIds7, labelValue as labelValue4 } from "@rjsf/utils";
 import { Form as Form8 } from "semantic-ui-react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function TextareaWidget(props) {
   const {
     id,
@@ -1154,10 +1145,10 @@ function TextareaWidget(props) {
     options,
     defaultSchemaProps: { inverted: "false" }
   });
-  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__ */ jsx24(
+  const handleChange = ({ target: { value: value2 } }) => onChange?.(value2 === "" ? options.emptyValue : value2);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
+  return /* @__PURE__ */ jsx25(
     Form8.TextArea,
     {
       id,
@@ -1171,9 +1162,9 @@ function TextareaWidget(props) {
       value: value || "",
       error: rawErrors.length > 0,
       rows: options.rows || 5,
-      onChange: _onChange,
-      onBlur: _onBlur,
-      onFocus: _onFocus,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
       "aria-describedby": ariaDescribedByIds7(id)
     },
     id