@rjsf/semantic-ui 6.6.2 → 6.7.0

package/dist/semantic-ui.esm.js

@@ -59,10 +59,10 @@ 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;
+  const schemaProps = semanticOptions?.errorOptions;
+  const optionProps = options.semantic?.errorOptions;
   return { ...defaultProps, ...schemaProps, ...optionProps, ...formContextProps };
 }
 function cleanClassNames(classNameArr, omit = []) {
@@ -234,8 +234,8 @@ function BaseInputTemplate(props) {
     options
   });
   const handleChange = ({ target: { value: newValue } }) => onChange(newValue === "" ? options.emptyValue : newValue);
-  const handleBlur = () => onBlur && onBlur(id, value);
-  const handleFocus = () => onFocus && onFocus(id, value);
+  const handleBlur = () => onBlur?.(id, value);
+  const handleFocus = () => onFocus?.(id, value);
   const handleClear = useCallback(
     (e) => {
       e.preventDefault();
@@ -272,31 +272,45 @@ function BaseInputTemplate(props) {
   ] });
 }
 
+// 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) => (
+  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__ */ jsx7(Message.Item, { children: error.stack }, `error-${index}`)
+      /* @__PURE__ */ jsx8(Message.Item, { children: error.stack }, `error-${index}`)
     )) })
   ] });
 }
@@ -305,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",
@@ -322,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;
 }
@@ -331,11 +345,11 @@ 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;
 }
@@ -343,7 +357,7 @@ function FieldHelpTemplate(props) {
 // src/FieldTemplate/FieldTemplate.tsx
 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,
@@ -374,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,
@@ -390,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)
@@ -402,24 +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 { memo } from "react";
-import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
-import { Button as Button3 } from "semantic-ui-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+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,
@@ -434,44 +448,44 @@ 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" });
 }
 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" });
 }
 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" });
 }
 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" });
 }
 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
   ] });
 }
@@ -479,7 +493,7 @@ function MultiSchemaFieldTemplate(props) {
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 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,
@@ -507,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),
@@ -520,7 +534,7 @@ function ObjectFieldTemplate(props) {
         optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ jsx14(
+    description && /* @__PURE__ */ jsx15(
       DescriptionFieldTemplate,
       {
         id: descriptionId(fieldPathId),
@@ -532,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: {
@@ -540,7 +554,7 @@ function ObjectFieldTemplate(props) {
           position: "relative",
           textAlign: "right"
         },
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx15(
           AddButton2,
           {
             id: buttonId2(fieldPathId, "add"),
@@ -557,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,
@@ -574,7 +588,7 @@ function OptionalDataControlsTemplate(props) {
     );
   }
   if (onRemoveClick) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       RemoveButton,
       {
         id,
@@ -586,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
@@ -618,20 +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,
@@ -652,15 +666,15 @@ 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",
@@ -679,8 +693,8 @@ function WrapIfAdditionalTemplate(props) {
       },
       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"),
@@ -701,6 +715,7 @@ function generateTemplates() {
     ArrayFieldItemTemplate,
     ArrayFieldTemplate,
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     ButtonTemplates: {
       AddButton,
       CopyButton,
@@ -736,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,
@@ -777,12 +792,12 @@ function CheckboxesWidget(props) {
   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.includes(option.value);
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx20(
         Form4.Checkbox,
         {
           id: optionId(id, index),
@@ -807,7 +822,7 @@ function CheckboxesWidget(props) {
 // src/CheckboxWidget/CheckboxWidget.tsx
 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,
@@ -815,7 +830,7 @@ function CheckboxWidget(props) {
     value,
     disabled,
     readonly,
-    label = "",
+    label,
     hideLabel,
     autofocus,
     onChange,
@@ -842,12 +857,12 @@ function CheckboxWidget(props) {
   );
   const required = schemaRequiresTrueValue(schema);
   const checked = value === "true" || value === true;
-  const handleChange = (_, data) => onChange && onChange(data.checked);
-  const handleBlur = () => onBlur && onBlur(id, value);
-  const handleFocus = () => onFocus && onFocus(id, value);
+  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),
@@ -857,7 +872,7 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       Form5.Checkbox,
       {
         id,
@@ -888,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 {
@@ -917,7 +932,7 @@ function RadioWidget(props) {
   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.includes(option.value);
     return /* @__PURE__ */ createElement(
@@ -946,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,
@@ -971,11 +986,11 @@ function RangeWidget(props) {
       fluid: true
     }
   });
-  const handleChange = ({ target: { value: value2 } }) => onChange && onChange(value2 === "" ? options.emptyValue : value2);
-  const handleBlur = () => onBlur && onBlur(id, value);
-  const handleFocus = () => 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,
@@ -994,7 +1009,7 @@ function RangeWidget(props) {
       },
       id
     ),
-    /* @__PURE__ */ jsx22("span", { children: value })
+    /* @__PURE__ */ jsx23("span", { children: value })
   ] });
 }
 
@@ -1005,11 +1020,13 @@ 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) => ({
@@ -1061,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,
@@ -1069,37 +1087,40 @@ function SelectWidget(props) {
     optionValueFormat
   );
   const handleChange = (_, { value: enumValue }) => onChange(enumOptionValueDecoder2(enumValue, enumOptions, optionValueFormat, optEmptyVal));
-  const handleBlur = (_, { target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
-  const handleFocus = (_, { 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: handleChange,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      "aria-describedby": ariaDescribedByIds6(id)
-    },
-    id
-  );
+  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 { 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,
@@ -1124,10 +1145,10 @@ function TextareaWidget(props) {
     options,
     defaultSchemaProps: { inverted: "false" }
   });
-  const handleChange = ({ target: { value: value2 } }) => onChange && onChange(value2 === "" ? options.emptyValue : value2);
-  const handleBlur = () => onBlur && onBlur(id, value);
-  const handleFocus = () => 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,