@rjsf/chakra-ui 6.0.0-beta.8 → 6.0.0

package/dist/chakra-ui.esm.js

@@ -47,23 +47,32 @@ import {
 } from "@rjsf/utils";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ArrayFieldTemplate(props) {
-  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title
+  } = props;
   const uiOptions = getUiOptions2(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate2(
     "ArrayFieldDescriptionTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -71,18 +80,19 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ jsx3(
       ArrayFieldTitleTemplate,
       {
-        idSchema,
+        fieldPathId,
         title: uiOptions.title || title,
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ jsx3(
       ArrayFieldDescriptionTemplate,
       {
-        idSchema,
+        fieldPathId,
         description: uiOptions.description || schema.description,
         schema,
         uiSchema,
@@ -90,11 +100,14 @@ function ArrayFieldTemplate(props) {
       }
     ),
     /* @__PURE__ */ jsxs3(Grid, { children: [
-      /* @__PURE__ */ jsx3(GridItem, { children: items.length > 0 && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
+      /* @__PURE__ */ jsxs3(GridItem, { children: [
+        !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+        items
+      ] }),
       canAdd && /* @__PURE__ */ jsx3(GridItem, { justifySelf: "flex-end", children: /* @__PURE__ */ jsx3(Box2, { mt: 2, children: /* @__PURE__ */ jsx3(
         AddButton2,
         {
-          id: buttonId(idSchema, "add"),
+          id: buttonId(fieldPathId, "add"),
           className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
@@ -102,7 +115,7 @@ function ArrayFieldTemplate(props) {
           registry
         }
       ) }) })
-    ] }, `array-item-list-${idSchema.$id}`)
+    ] }, `array-item-list-${fieldPathId.$id}`)
   ] });
 }
 
@@ -151,6 +164,7 @@ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     type,
     value,
     label,
@@ -189,7 +203,7 @@ function BaseInputTemplate(props) {
           Input,
           {
             id,
-            name: id,
+            name: htmlName || id,
             value: value || value === 0 ? value : "",
             onChange: onChangeOverride || _onChange,
             onBlur: _onBlur,
@@ -222,8 +236,7 @@ function DescriptionField({ description, id, registry, uiSchema }) {
 
 // src/ErrorList/ErrorList.tsx
 import { TranslatableString as TranslatableString2 } from "@rjsf/utils";
-import { ListIndicator, ListItem, ListRoot } from "@chakra-ui/react";
-import { TriangleAlert } from "lucide-react";
+import { ListItem, ListRoot } from "@chakra-ui/react";
 
 // src/components/ui/alert.tsx
 import { forwardRef as forwardRef3 } from "react";
@@ -241,9 +254,9 @@ var CloseButton = forwardRef2(function CloseButton2(props, ref) {
 // src/components/ui/alert.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Alert = forwardRef3(function Alert2(props, ref) {
-  const { title, children, icon, closable, onClose, startElement, endElement, ...rest } = props;
+  const { title, children, closable, onClose, startElement, endElement, ...rest } = props;
   return /* @__PURE__ */ jsxs6(ChakraAlert.Root, { ref, ...rest, children: [
-    startElement || /* @__PURE__ */ jsx8(ChakraAlert.Indicator, { children: icon }),
+    startElement || /* @__PURE__ */ jsx8(ChakraAlert.Indicator, {}),
     children ? /* @__PURE__ */ jsxs6(ChakraAlert.Content, { children: [
       /* @__PURE__ */ jsx8(ChakraAlert.Title, { children: title }),
       /* @__PURE__ */ jsx8(ChakraAlert.Description, { children })
@@ -254,26 +267,13 @@ var Alert = forwardRef3(function Alert2(props, ref) {
 });
 
 // src/ErrorList/ErrorList.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function ErrorList({
   errors,
   registry
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsx9(
-    Alert,
-    {
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: 3,
-      status: "error",
-      title: translateString(TranslatableString2.ErrorsLabel),
-      children: /* @__PURE__ */ jsx9(ListRoot, { children: errors.map((error, i) => /* @__PURE__ */ jsxs7(ListItem, { children: [
-        /* @__PURE__ */ jsx9(ListIndicator, { asChild: true, color: "red.500", children: /* @__PURE__ */ jsx9(TriangleAlert, {}) }),
-        error.stack
-      ] }, i)) })
-    }
-  );
+  return /* @__PURE__ */ jsx9(Alert, { status: "error", title: translateString(TranslatableString2.ErrorsLabel), mb: 3, children: /* @__PURE__ */ jsx9(ListRoot, { listStylePosition: "inside", children: errors.map((error, i) => /* @__PURE__ */ jsx9(ListItem, { children: error.stack }, i)) }) });
 }
 
 // src/IconButton/ChakraIconButton.tsx
@@ -339,39 +339,39 @@ function RemoveButton(props) {
 
 // src/FieldErrorTemplate/FieldErrorTemplate.tsx
 import { errorId } from "@rjsf/utils";
-import { ListItem as ListItem2, ListRoot as ListRoot2, Text as Text2 } from "@chakra-ui/react";
+import { Fieldset } from "@chakra-ui/react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function FieldErrorTemplate(props) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = errorId(idSchema);
-  return /* @__PURE__ */ jsx12(ListRoot2, { children: errors.map((error, i) => {
-    return /* @__PURE__ */ jsx12(ListItem2, { children: /* @__PURE__ */ jsx12(Text2, { id, children: error }) }, i);
-  }) });
+  const id = errorId(fieldPathId);
+  return errors.map((error, i) => {
+    return /* @__PURE__ */ jsx12(Fieldset.ErrorText, { mt: 0, id, children: error }, i);
+  });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
-import { Text as Text3 } from "@chakra-ui/react";
+import { Text as Text2 } from "@chakra-ui/react";
 import { helpId } from "@rjsf/utils";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(idSchema);
-  return /* @__PURE__ */ jsx13(Text3, { id, children: help });
+  const id = helpId(fieldPathId);
+  return /* @__PURE__ */ jsx13(Text2, { id, children: help });
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
-import { Fieldset } from "@chakra-ui/react";
+import { Fieldset as Fieldset2 } from "@chakra-ui/react";
 import {
   getTemplate as getTemplate3,
   getUiOptions as getUiOptions3
 } from "@rjsf/utils";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function FieldTemplate(props) {
   const {
     id,
@@ -382,8 +382,9 @@ function FieldTemplate(props) {
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     registry,
     required,
@@ -412,18 +413,19 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
       uiSchema,
       registry,
-      children: /* @__PURE__ */ jsxs8(Fieldset.Root, { disabled, invalid: rawErrors && rawErrors.length > 0, children: [
-        displayLabel && rawDescription ? /* @__PURE__ */ jsx14(Fieldset.Legend, { mt: 2, children: description }) : null,
+      children: /* @__PURE__ */ jsxs7(Fieldset2.Root, { disabled, invalid: rawErrors && rawErrors.length > 0, children: [
+        displayLabel && rawDescription ? /* @__PURE__ */ jsx14(Fieldset2.Legend, { mt: 2, children: description }) : null,
         help,
-        /* @__PURE__ */ jsx14(Fieldset.Content, { children }),
-        errors && /* @__PURE__ */ jsx14(Fieldset.ErrorText, { children: errors })
+        /* @__PURE__ */ jsx14(Fieldset2.Content, { children }),
+        errors
       ] })
     }
   );
@@ -440,6 +442,17 @@ function GridTemplate(props) {
   return /* @__PURE__ */ jsx15(Grid2, { ...rest, children });
 }
 
+// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
+import { Box as Box3, Card } from "@chakra-ui/react";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+function MultiSchemaFieldTemplate(props) {
+  const { optionSchemaField, selector } = props;
+  return /* @__PURE__ */ jsx16(Card.Root, { mb: 2, children: /* @__PURE__ */ jsxs8(Card.Body, { pb: 2, children: [
+    /* @__PURE__ */ jsx16(Box3, { mb: 4, children: selector }),
+    optionSchemaField
+  ] }) });
+}
+
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 import { Grid as Grid3, GridItem as GridItem3 } from "@chakra-ui/react";
 import {
@@ -450,7 +463,7 @@ import {
   getUiOptions as getUiOptions4,
   titleId
 } from "@rjsf/utils";
-import { Fragment, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -460,10 +473,11 @@ function ObjectFieldTemplate(props) {
     disabled,
     readonly,
     uiSchema,
-    idSchema,
+    fieldPathId,
     schema,
     formData,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = getUiOptions4(uiSchema);
@@ -473,41 +487,44 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
   return /* @__PURE__ */ jsxs9(Fragment, { children: [
-    title && /* @__PURE__ */ jsx16(
+    title && /* @__PURE__ */ jsx17(
       TitleFieldTemplate,
       {
-        id: titleId(idSchema),
+        id: titleId(fieldPathId),
         title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ jsx16(
+    description && /* @__PURE__ */ jsx17(
       DescriptionFieldTemplate,
       {
-        id: descriptionId(idSchema),
+        id: descriptionId(fieldPathId),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ jsxs9(Grid3, { gap: description ? 2 : 6, mb: 4, children: [
+    /* @__PURE__ */ jsxs9(Grid3, { gap: description ? 2 : 4, mb: 4, children: [
+      !showOptionalDataControlInTitle ? /* @__PURE__ */ jsx17(GridItem3, { children: optionalDataControl }) : void 0,
       properties.map(
-        (element, index) => element.hidden ? element.content : /* @__PURE__ */ jsx16(GridItem3, { children: element.content }, `${idSchema.$id}-${element.name}-${index}`)
+        (element, index) => element.hidden ? element.content : /* @__PURE__ */ jsx17(GridItem3, { children: element.content }, `${fieldPathId.$id}-${element.name}-${index}`)
       ),
-      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx16(GridItem3, { justifySelf: "flex-end", children: /* @__PURE__ */ jsx16(
+      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx17(GridItem3, { justifySelf: "flex-end", children: /* @__PURE__ */ jsx17(
         AddButton2,
         {
-          id: buttonId2(idSchema, "add"),
+          id: buttonId2(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -517,28 +534,73 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+import { PlusIcon as PlusIcon2 } from "lucide-react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ jsx18(
+      ChakraIconButton_default,
+      {
+        id,
+        registry,
+        className: "rjsf-add-optional-data btn-sm",
+        onClick: onAddClick,
+        title: label,
+        icon: /* @__PURE__ */ jsx18(PlusIcon2, {}),
+        size: "xs",
+        variant: "subtle"
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ jsx18(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data btn-sm",
+        onClick: onRemoveClick,
+        title: label,
+        size: "xs",
+        variant: "subtle"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx18("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
-import { Box as Box3, Button as Button2 } from "@chakra-ui/react";
+import { Box as Box4, Button as Button2 } from "@chakra-ui/react";
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx17(Box3, { marginTop: 3, children: /* @__PURE__ */ jsx17(Button2, { type: "submit", variant: "solid", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ jsx19(Box4, { marginTop: 3, children: /* @__PURE__ */ jsx19(Button2, { type: "submit", variant: "solid", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-import { Box as Box4, Separator, Heading } from "@chakra-ui/react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box5, Flex, Heading, Separator, Spacer } from "@chakra-ui/react";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function TitleField({
   id,
-  title
+  title,
+  optionalDataControl
 }) {
-  return /* @__PURE__ */ jsxs10(Box4, { id, mt: 1, mb: 4, children: [
-    /* @__PURE__ */ jsx18(Heading, { as: "h5", children: title }),
-    /* @__PURE__ */ jsx18(Separator, {})
+  let heading = /* @__PURE__ */ jsx20(Heading, { as: "h5", children: title });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsxs10(Flex, { children: [
+      heading,
+      /* @__PURE__ */ jsx20(Spacer, {}),
+      optionalDataControl
+    ] });
+  }
+  return /* @__PURE__ */ jsxs10(Box5, { id, mt: 1, mb: 4, children: [
+    heading,
+    /* @__PURE__ */ jsx20(Separator, {})
   ] });
 }
 
@@ -549,7 +611,7 @@ import {
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
 import { Grid as Grid4, GridItem as GridItem4, Input as Input2 } from "@chakra-ui/react";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -558,8 +620,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     registry,
     required,
@@ -571,30 +633,29 @@ function WrapIfAdditionalTemplate(props) {
   const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
-    return /* @__PURE__ */ jsx19("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx21("div", { className: classNames, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target.value);
   return /* @__PURE__ */ jsxs11(Grid4, { className: classNames, style, alignItems: "center", gap: 2, children: [
-    /* @__PURE__ */ jsx19(GridItem4, { children: /* @__PURE__ */ jsx19(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx21(GridItem4, { children: /* @__PURE__ */ jsx21(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsx21(
       Input2,
       {
         defaultValue: label,
         disabled: disabled || readonly,
         id: `${id}-key`,
         name: `${id}-key`,
-        onBlur: !readonly ? handleBlur : void 0,
+        onBlur: !readonly ? onKeyRenameBlur : void 0,
         type: "text",
         mb: 1
       }
     ) }) }),
-    /* @__PURE__ */ jsx19(GridItem4, { children }),
-    /* @__PURE__ */ jsx19(GridItem4, { children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx21(GridItem4, { children }),
+    /* @__PURE__ */ jsx21(GridItem4, { children: /* @__PURE__ */ jsx21(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
         className: "rjsf-object-property-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -622,7 +683,9 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -630,103 +693,42 @@ function generateTemplates() {
 var Templates_default = generateTemplates();
 
 // src/AltDateWidget/AltDateWidget.tsx
-import { Box as Box5, Button as Button3, FieldsetRoot } from "@chakra-ui/react";
+import { Box as Box6, Button as Button3, FieldsetRoot } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds2,
-  dateRangeOptions,
-  getDateElementProps,
-  parseDateString,
-  toDateString,
-  TranslatableString as TranslatableString5
+  DateElement,
+  TranslatableString as TranslatableString5,
+  useAltDateWidgetProps
 } from "@rjsf/utils";
-import { useEffect, useState } from "react";
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-function DateElement(props) {
-  const { SelectWidget: SelectWidget2 } = props.registry.widgets;
-  const value = props.value ? props.value : void 0;
-  return /* @__PURE__ */ jsx20(
-    SelectWidget2,
-    {
-      ...props,
-      label: "",
-      className: "form-control",
-      onChange: (elemValue) => props.select(props.type, elemValue),
-      options: {
-        enumOptions: dateRangeOptions(props.range[0], props.range[1])
-      },
-      placeholder: props.type,
-      schema: { type: "integer" },
-      value,
-      "aria-describedby": ariaDescribedByIds2(props.name)
-    }
-  );
-}
-var readyForChange = (state) => {
-  return Object.keys(state).every((key) => typeof state[key] !== "undefined" && state[key] !== -1);
-};
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function AltDateWidget(props) {
-  const { autofocus, disabled, id, onBlur, onChange, onFocus, options, readonly, registry, showTime, value } = props;
+  const { autofocus, disabled, id, onBlur, onFocus, options, readonly, registry } = props;
   const { translateString } = registry;
-  const [state, setState] = useState(parseDateString(value, showTime));
-  useEffect(() => {
-    setState(parseDateString(value, showTime));
-  }, [showTime, value]);
-  const handleChange = (property, nextValue) => {
-    const nextState = {
-      ...state,
-      [property]: typeof nextValue === "undefined" ? -1 : nextValue
-    };
-    if (readyForChange(nextState)) {
-      onChange(toDateString(nextState, showTime));
-    } else {
-      setState(nextState);
-    }
-  };
-  const handleNow = (event) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
-    onChange(toDateString(nextState, showTime));
-  };
-  const handleClear = (event) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    onChange(void 0);
-  };
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
   const chakraProps = getChakra({ uiSchema: props.uiSchema });
   return /* @__PURE__ */ jsxs12(FieldsetRoot, { ...chakraProps, children: [
-    /* @__PURE__ */ jsx20(Box5, { display: "flex", flexWrap: "wrap", alignItems: "center", children: getDateElementProps(
-      state,
-      showTime,
-      options.yearsRange,
-      options.format
-    ).map((elemProps, i) => {
-      const elemId = id + "_" + elemProps.type;
-      return /* @__PURE__ */ jsx20(Box5, { mr: "2", mb: "2", children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx22(Box6, { display: "flex", flexWrap: "wrap", alignItems: "center", children: elements.map((elemProps, i) => {
+      const elemId = `${id}_${elemProps.type}`;
+      return /* @__PURE__ */ jsx22(Box6, { mr: "2", mb: "2", width: "20", children: /* @__PURE__ */ jsx22(
         DateElement,
         {
           ...props,
           ...elemProps,
           autofocus: autofocus && i === 0,
           disabled,
-          id: elemId,
+          rootId: id,
           name: id,
           onBlur,
           onFocus,
           readonly,
           registry,
           select: handleChange,
-          value: elemProps.value < 0 ? "" : elemProps.value
+          value: elemProps.value && elemProps.value < 0 ? "" : elemProps.value
         }
       ) }, elemId);
     }) }),
-    /* @__PURE__ */ jsxs12(Box5, { display: "flex", children: [
-      !options.hideNowButton && /* @__PURE__ */ jsx20(Button3, { onClick: (e) => handleNow(e), mr: "2", children: translateString(TranslatableString5.NowLabel) }),
-      !options.hideClearButton && /* @__PURE__ */ jsx20(Button3, { onClick: (e) => handleClear(e), children: translateString(TranslatableString5.ClearLabel) })
+    /* @__PURE__ */ jsxs12(Box6, { display: "flex", children: [
+      !options.hideNowButton && /* @__PURE__ */ jsx22(Button3, { onClick: handleSetNow, mr: "2", children: translateString(TranslatableString5.NowLabel) }),
+      !options.hideClearButton && /* @__PURE__ */ jsx22(Button3, { onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
     ] })
   ] });
 }
@@ -734,7 +736,7 @@ AltDateWidget.defaultProps = {
   autofocus: false,
   disabled: false,
   readonly: false,
-  showTime: false,
+  time: false,
   options: {
     yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
   }
@@ -742,21 +744,21 @@ AltDateWidget.defaultProps = {
 var AltDateWidget_default = AltDateWidget;
 
 // src/AltDateTimeWidget/AltDateTimeWidget.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function AltDateTimeWidget(props) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ jsx21(AltDateWidget2, { ...props, showTime: true });
+  return /* @__PURE__ */ jsx23(AltDateWidget2, { ...props, time: true });
 }
 AltDateTimeWidget.defaultProps = {
   ...AltDateWidget_default.defaultProps,
-  showTime: true
+  time: true
 };
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/CheckboxWidget/CheckboxWidget.tsx
-import { Text as Text4 } from "@chakra-ui/react";
+import { Text as Text3 } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds3,
+  ariaDescribedByIds as ariaDescribedByIds2,
   descriptionId as descriptionId2,
   getTemplate as getTemplate5,
   labelValue as labelValue2,
@@ -766,21 +768,22 @@ import {
 // src/components/ui/checkbox.tsx
 import { forwardRef as forwardRef4 } from "react";
 import { Checkbox as ChakraCheckbox } from "@chakra-ui/react";
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var Checkbox = forwardRef4(function Checkbox2(props, ref) {
   const { icon, children, inputProps, rootRef, ...rest } = props;
   return /* @__PURE__ */ jsxs13(ChakraCheckbox.Root, { ref: rootRef, ...rest, children: [
-    /* @__PURE__ */ jsx22(ChakraCheckbox.HiddenInput, { ref, ...inputProps }),
-    /* @__PURE__ */ jsx22(ChakraCheckbox.Control, { children: icon || /* @__PURE__ */ jsx22(ChakraCheckbox.Indicator, {}) }),
-    children != null && /* @__PURE__ */ jsx22(ChakraCheckbox.Label, { children })
+    /* @__PURE__ */ jsx24(ChakraCheckbox.HiddenInput, { ref, ...inputProps }),
+    /* @__PURE__ */ jsx24(ChakraCheckbox.Control, { children: icon || /* @__PURE__ */ jsx24(ChakraCheckbox.Indicator, {}) }),
+    children != null && /* @__PURE__ */ jsx24(ChakraCheckbox.Label, { children })
   ] });
 });
 
 // src/CheckboxWidget/CheckboxWidget.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -802,11 +805,11 @@ function CheckboxWidget(props) {
   );
   const description = options.description || schema.description;
   const _onChange = ({ checked }) => onChange(checked);
-  const _onBlur = ({ target }) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const _onBlur = ({ target }) => onBlur(id, target && target.checked);
+  const _onFocus = ({ target }) => onFocus(id, target && target.checked);
   const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ jsxs14(Field, { mb: 1, required, ...chakraProps, children: [
-    !hideLabel && description && /* @__PURE__ */ jsx23(
+    !hideLabel && description && /* @__PURE__ */ jsx25(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -816,36 +819,37 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx25(
       Checkbox,
       {
         id,
-        name: id,
+        name: htmlName || id,
         checked: typeof value === "undefined" ? false : value,
         disabled: disabled || readonly,
         onCheckedChange: _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
-        "aria-describedby": ariaDescribedByIds3(id),
-        children: labelValue2(/* @__PURE__ */ jsx23(Text4, { children: label }), hideLabel || !label)
+        "aria-describedby": ariaDescribedByIds2(id),
+        children: labelValue2(/* @__PURE__ */ jsx25(Text3, { children: label }), hideLabel || !label)
       }
     )
   ] });
 }
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
-import { CheckboxGroup, FieldsetRoot as FieldsetRoot2, Stack, Text as Text5 } from "@chakra-ui/react";
+import { CheckboxGroup, FieldsetRoot as FieldsetRoot2, Stack, Text as Text4 } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds4,
+  ariaDescribedByIds as ariaDescribedByIds3,
   enumOptionsIndexForValue,
   enumOptionsValueForIndex,
   labelValue as labelValue3,
   optionId
 } from "@rjsf/utils";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -865,34 +869,34 @@ function CheckboxesWidget(props) {
   const row = options ? options.inline : false;
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
   const chakraProps = getChakra({ uiSchema });
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     FieldsetRoot2,
     {
       mb: 1,
       disabled: disabled || readonly,
       invalid: rawErrors && rawErrors.length > 0,
       ...chakraProps,
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx26(
         CheckboxGroup,
         {
           onValueChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
           value: selectedIndexes,
-          "aria-describedby": ariaDescribedByIds4(id),
+          "aria-describedby": ariaDescribedByIds3(id),
           readOnly: readonly,
           required,
           label: labelValue3(label, hideLabel || !label),
-          children: /* @__PURE__ */ jsx24(Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+          children: /* @__PURE__ */ jsx26(Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
             const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-            return /* @__PURE__ */ jsx24(
+            return /* @__PURE__ */ jsx26(
               Checkbox,
               {
                 id: optionId(id, index),
-                name: id,
+                name: htmlName || id,
                 value: String(index),
                 disabled: disabled || itemDisabled || readonly,
                 onBlur: _onBlur,
                 onFocus: _onFocus,
-                children: option.label && /* @__PURE__ */ jsx24(Text5, { children: option.label })
+                children: option.label && /* @__PURE__ */ jsx26(Text4, { children: option.label })
               },
               index
             );
@@ -906,7 +910,7 @@ function CheckboxesWidget(props) {
 // src/RadioWidget/RadioWidget.tsx
 import { Stack as Stack2 } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds5,
+  ariaDescribedByIds as ariaDescribedByIds4,
   enumOptionsIndexForValue as enumOptionsIndexForValue2,
   enumOptionsValueForIndex as enumOptionsValueForIndex2,
   labelValue as labelValue4,
@@ -916,21 +920,22 @@ import {
 // src/components/ui/radio.tsx
 import { forwardRef as forwardRef5 } from "react";
 import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var Radio = forwardRef5(function Radio2(props, ref) {
   const { children, inputProps, rootRef, ...rest } = props;
   return /* @__PURE__ */ jsxs15(ChakraRadioGroup.Item, { ref: rootRef, ...rest, children: [
-    /* @__PURE__ */ jsx25(ChakraRadioGroup.ItemHiddenInput, { ref, ...inputProps }),
-    /* @__PURE__ */ jsx25(ChakraRadioGroup.ItemIndicator, {}),
-    children && /* @__PURE__ */ jsx25(ChakraRadioGroup.ItemText, { children })
+    /* @__PURE__ */ jsx27(ChakraRadioGroup.ItemHiddenInput, { ref, ...inputProps }),
+    /* @__PURE__ */ jsx27(ChakraRadioGroup.ItemIndicator, {}),
+    children && /* @__PURE__ */ jsx27(ChakraRadioGroup.ItemText, { children })
   ] });
 });
 var RadioGroup = ChakraRadioGroup.Root;
 
 // src/RadioWidget/RadioWidget.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -950,7 +955,7 @@ function RadioWidget({
   const row = options ? options.inline : false;
   const selectedIndex = enumOptionsIndexForValue2(value, enumOptions) ?? null;
   const chakraProps = getChakra({ uiSchema });
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     Field,
     {
       mb: 1,
@@ -959,18 +964,18 @@ function RadioWidget({
       readOnly: readonly,
       label: labelValue4(label, hideLabel || !label),
       ...chakraProps,
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx28(
         RadioGroup,
         {
           onChange: _onChange,
           onBlur: _onBlur,
           onFocus: _onFocus,
           value: selectedIndex,
-          name: id,
-          "aria-describedby": ariaDescribedByIds5(id),
-          children: /* @__PURE__ */ jsx26(Stack2, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+          name: htmlName || id,
+          "aria-describedby": ariaDescribedByIds4(id),
+          children: /* @__PURE__ */ jsx28(Stack2, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
             const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-            return /* @__PURE__ */ jsx26(
+            return /* @__PURE__ */ jsx28(
               Radio,
               {
                 value: String(index),
@@ -989,7 +994,7 @@ function RadioWidget({
 
 // src/RangeWidget/RangeWidget.tsx
 import {
-  ariaDescribedByIds as ariaDescribedByIds6,
+  ariaDescribedByIds as ariaDescribedByIds5,
   labelValue as labelValue5,
   rangeSpec
 } from "@rjsf/utils";
@@ -997,7 +1002,7 @@ import {
 // src/components/ui/slider.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { Slider as ChakraSlider, HStack as HStack2 } from "@chakra-ui/react";
-import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var Slider = forwardRef6(function Slider2(props, ref) {
   const { marks: marksProp, showValue, ...rest } = props;
   const value = props.defaultValue ?? props.value;
@@ -1009,35 +1014,35 @@ var Slider = forwardRef6(function Slider2(props, ref) {
   });
   const hasMarkLabel = !!marks?.some((mark) => mark.label);
   return /* @__PURE__ */ jsxs16(ChakraSlider.Root, { ref, width: "200px", thumbAlignment: "center", ...rest, children: [
-    showValue && /* @__PURE__ */ jsx27(HStack2, { justify: "space-between", children: /* @__PURE__ */ jsx27(ChakraSlider.ValueText, {}) }),
+    showValue && /* @__PURE__ */ jsx29(HStack2, { justify: "space-between", children: /* @__PURE__ */ jsx29(ChakraSlider.ValueText, {}) }),
     /* @__PURE__ */ jsxs16(ChakraSlider.Control, { "data-has-mark-label": hasMarkLabel || void 0, children: [
-      /* @__PURE__ */ jsx27(ChakraSlider.Track, { children: /* @__PURE__ */ jsx27(ChakraSlider.Range, {}) }),
-      /* @__PURE__ */ jsx27(SliderThumbs, { value }),
-      /* @__PURE__ */ jsx27(SliderMarks, { marks })
+      /* @__PURE__ */ jsx29(ChakraSlider.Track, { children: /* @__PURE__ */ jsx29(ChakraSlider.Range, {}) }),
+      /* @__PURE__ */ jsx29(SliderThumbs, { value }),
+      /* @__PURE__ */ jsx29(SliderMarks, { marks })
     ] })
   ] });
 });
 function SliderThumbs(props) {
   const { value } = props;
-  return /* @__PURE__ */ jsx27(Fragment2, { children: value?.map((_, index) => /* @__PURE__ */ jsx27(ChakraSlider.Thumb, { index, children: /* @__PURE__ */ jsx27(ChakraSlider.HiddenInput, {}) }, index)) });
+  return /* @__PURE__ */ jsx29(Fragment2, { children: value?.map((_, index) => /* @__PURE__ */ jsx29(ChakraSlider.Thumb, { index, children: /* @__PURE__ */ jsx29(ChakraSlider.HiddenInput, {}) }, index)) });
 }
 var SliderMarks = forwardRef6(function SliderMarks2(props, ref) {
   const { marks } = props;
   if (!marks?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx27(ChakraSlider.MarkerGroup, { ref, children: marks.map((mark, index) => {
+  return /* @__PURE__ */ jsx29(ChakraSlider.MarkerGroup, { ref, children: marks.map((mark, index) => {
     const value = typeof mark === "number" ? mark : mark.value;
     const label = typeof mark === "number" ? void 0 : mark.label;
     return /* @__PURE__ */ jsxs16(ChakraSlider.Marker, { value, children: [
-      /* @__PURE__ */ jsx27(ChakraSlider.MarkerIndicator, {}),
+      /* @__PURE__ */ jsx29(ChakraSlider.MarkerIndicator, {}),
       label
     ] }, index);
   }) });
 });
 
 // src/RangeWidget/RangeWidget.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function RangeWidget({
   value,
   readonly,
@@ -1056,7 +1061,7 @@ function RangeWidget({
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
   const chakraProps = getChakra({ uiSchema });
-  return /* @__PURE__ */ jsx28(Field, { mb: 1, label: labelValue5(label, hideLabel || !label), ...chakraProps, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(Field, { mb: 1, label: labelValue5(label, hideLabel || !label), ...chakraProps, children: /* @__PURE__ */ jsx30(
     Slider,
     {
       ...rangeSpec(schema),
@@ -1067,7 +1072,7 @@ function RangeWidget({
       onValueChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
-      "aria-describedby": ariaDescribedByIds6(id)
+      "aria-describedby": ariaDescribedByIds5(id)
     }
   ) });
 }
@@ -1075,7 +1080,7 @@ function RangeWidget({
 // src/SelectWidget/SelectWidget.tsx
 import { useMemo, useRef } from "react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds7,
+  ariaDescribedByIds as ariaDescribedByIds6,
   enumOptionsIndexForValue as enumOptionsIndexForValue3,
   enumOptionsValueForIndex as enumOptionsValueForIndex3,
   labelValue as labelValue6
@@ -1085,36 +1090,36 @@ import { createListCollection, Select as ChakraSelect2 } from "@chakra-ui/react"
 // src/components/ui/select.tsx
 import { forwardRef as forwardRef7 } from "react";
 import { Select as ChakraSelect, Portal } from "@chakra-ui/react";
-import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var SelectTrigger = forwardRef7(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
   return /* @__PURE__ */ jsxs17(ChakraSelect.Control, { ...rest, children: [
-    /* @__PURE__ */ jsx29(ChakraSelect.Trigger, { ref, children }),
+    /* @__PURE__ */ jsx31(ChakraSelect.Trigger, { ref, children }),
     /* @__PURE__ */ jsxs17(ChakraSelect.IndicatorGroup, { children: [
-      clearable && /* @__PURE__ */ jsx29(SelectClearTrigger, {}),
-      /* @__PURE__ */ jsx29(ChakraSelect.Indicator, {})
+      clearable && /* @__PURE__ */ jsx31(SelectClearTrigger, {}),
+      /* @__PURE__ */ jsx31(ChakraSelect.Indicator, {})
     ] })
   ] });
 });
 var SelectClearTrigger = forwardRef7(
   function SelectClearTrigger2(props, ref) {
-    return /* @__PURE__ */ jsx29(ChakraSelect.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsx29(CloseButton, { size: "xs", variant: "plain", focusVisibleRing: "inside", focusRingWidth: "2px", pointerEvents: "auto" }) });
+    return /* @__PURE__ */ jsx31(ChakraSelect.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsx31(CloseButton, { size: "xs", variant: "plain", focusVisibleRing: "inside", focusRingWidth: "2px", pointerEvents: "auto" }) });
   }
 );
 var SelectContent = forwardRef7(function SelectContent2(props, ref) {
   const { portalled = true, portalRef, ...rest } = props;
-  return /* @__PURE__ */ jsx29(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx29(ChakraSelect.Positioner, { children: /* @__PURE__ */ jsx29(ChakraSelect.Content, { ...rest, ref }) }) });
+  return /* @__PURE__ */ jsx31(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx31(ChakraSelect.Positioner, { children: /* @__PURE__ */ jsx31(ChakraSelect.Content, { ...rest, ref }) }) });
 });
 var SelectItem = forwardRef7(function SelectItem2(props, ref) {
   const { item, children, ...rest } = props;
   return /* @__PURE__ */ jsxs17(ChakraSelect.Item, { item, ...rest, ref, children: [
     children,
-    /* @__PURE__ */ jsx29(ChakraSelect.ItemIndicator, {})
+    /* @__PURE__ */ jsx31(ChakraSelect.ItemIndicator, {})
   ] }, item.value);
 });
 var SelectValueText = forwardRef7(function SelectValueText2(props, ref) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx29(ChakraSelect.ValueText, { ...rest, ref, children: /* @__PURE__ */ jsx29(ChakraSelect.Context, { children: (select) => {
+  return /* @__PURE__ */ jsx31(ChakraSelect.ValueText, { ...rest, ref, children: /* @__PURE__ */ jsx31(ChakraSelect.Context, { children: (select) => {
     const items = select.selectedItems;
     if (items.length === 0) {
       return props.placeholder;
@@ -1129,15 +1134,15 @@ var SelectValueText = forwardRef7(function SelectValueText2(props, ref) {
   } }) });
 });
 var SelectRoot = forwardRef7(function SelectRoot2(props, ref) {
-  return /* @__PURE__ */ jsx29(ChakraSelect.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ jsxs17(Fragment3, { children: [
-    /* @__PURE__ */ jsx29(ChakraSelect.HiddenSelect, {}),
+  return /* @__PURE__ */ jsx31(ChakraSelect.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ jsxs17(Fragment3, { children: [
+    /* @__PURE__ */ jsx31(ChakraSelect.HiddenSelect, {}),
     props.children
   ] }) });
 });
 var SelectItemGroup = forwardRef7(function SelectItemGroup2(props, ref) {
   const { children, label, ...rest } = props;
   return /* @__PURE__ */ jsxs17(ChakraSelect.ItemGroup, { ...rest, ref, children: [
-    /* @__PURE__ */ jsx29(ChakraSelect.ItemGroupLabel, { children: label }),
+    /* @__PURE__ */ jsx31(ChakraSelect.ItemGroupLabel, { children: label }),
     children
   ] });
 });
@@ -1145,10 +1150,11 @@ var SelectLabel = ChakraSelect.Label;
 var SelectItemText = ChakraSelect.ItemText;
 
 // src/SelectWidget/SelectWidget.tsx
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 function SelectWidget(props) {
   const {
     id,
+    htmlName,
     options,
     label,
     hideLabel,
@@ -1168,19 +1174,12 @@ function SelectWidget(props) {
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const _onMultiChange = ({ value: value2 }) => {
-    return onChange(
-      enumOptionsValueForIndex3(
-        value2.map((item) => {
-          return item;
-        }),
-        enumOptions,
-        emptyValue
-      )
-    );
-  };
-  const _onChange = ({ value: value2 }) => {
     return onChange(enumOptionsValueForIndex3(value2, enumOptions, emptyValue));
   };
+  const _onSingleChange = ({ value: value2 }) => {
+    const selected = enumOptionsValueForIndex3(value2, enumOptions, emptyValue);
+    return onChange(Array.isArray(selected) && selected.length === 1 ? selected[0] : selected);
+  };
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex3(target && target.value, enumOptions, emptyValue));
   const showPlaceholderOption = !multiple && schema.default === void 0;
@@ -1223,7 +1222,7 @@ function SelectWidget(props) {
   });
   const containerRef = useRef(null);
   const chakraProps = getChakra({ uiSchema });
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     Field,
     {
       ref: containerRef,
@@ -1240,21 +1239,21 @@ function SelectWidget(props) {
         {
           collection: selectOptions,
           id,
-          name: id,
+          name: htmlName || id,
           multiple: isMultiple,
           closeOnSelect: !isMultiple,
           onBlur: _onBlur,
-          onValueChange: isMultiple ? _onMultiChange : _onChange,
+          onValueChange: isMultiple ? _onMultiChange : _onSingleChange,
           onFocus: _onFocus,
           autoFocus: autofocus,
           value: formValue,
-          "aria-describedby": ariaDescribedByIds7(id),
+          "aria-describedby": ariaDescribedByIds6(id),
           positioning: { placement: "bottom" },
           children: [
-            /* @__PURE__ */ jsx30(ChakraSelect2.Control, { children: /* @__PURE__ */ jsx30(SelectTrigger, { children: /* @__PURE__ */ jsx30(SelectValueText, { placeholder }) }) }),
-            /* @__PURE__ */ jsx30(ChakraSelect2.Positioner, { minWidth: "100% !important", zIndex: "2 !important", top: "calc(100% + 5px) !important", children: /* @__PURE__ */ jsx30(ChakraSelect2.Content, { children: selectOptions.items.map((item) => /* @__PURE__ */ jsxs18(ChakraSelect2.Item, { item, children: [
+            /* @__PURE__ */ jsx32(ChakraSelect2.Control, { children: /* @__PURE__ */ jsx32(SelectTrigger, { children: /* @__PURE__ */ jsx32(SelectValueText, { placeholder }) }) }),
+            /* @__PURE__ */ jsx32(ChakraSelect2.Positioner, { minWidth: "100% !important", zIndex: "2 !important", top: "calc(100% + 5px) !important", children: /* @__PURE__ */ jsx32(ChakraSelect2.Content, { children: selectOptions.items.map((item) => /* @__PURE__ */ jsxs18(ChakraSelect2.Item, { item, children: [
               item.label,
-              /* @__PURE__ */ jsx30(ChakraSelect2.ItemIndicator, {})
+              /* @__PURE__ */ jsx32(ChakraSelect2.ItemIndicator, {})
             ] }, item.value)) }) })
           ]
         }
@@ -1266,13 +1265,13 @@ function SelectWidget(props) {
 // src/SelectNativeWidget/NativeSelectWidget.tsx
 import { useMemo as useMemo2 } from "react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds8,
+  ariaDescribedByIds as ariaDescribedByIds7,
   enumOptionsIndexForValue as enumOptionsIndexForValue4,
   enumOptionsValueForIndex as enumOptionsValueForIndex4,
   labelValue as labelValue7
 } from "@rjsf/utils";
 import { createListCollection as createListCollection2, NativeSelect as ChakraSelect3 } from "@chakra-ui/react";
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function NativeSelectWidget(props) {
   const {
     id,
@@ -1331,7 +1330,7 @@ function NativeSelectWidget(props) {
     items: displayEnumOptions.filter((item) => item.value)
   });
   const chakraProps = getChakra({ uiSchema });
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     Field,
     {
       mb: 1,
@@ -1342,7 +1341,7 @@ function NativeSelectWidget(props) {
       label: labelValue7(label, hideLabel || !label),
       ...chakraProps,
       children: /* @__PURE__ */ jsxs19(ChakraSelect3.Root, { children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx33(
           ChakraSelect3.Field,
           {
             id,
@@ -1351,11 +1350,11 @@ function NativeSelectWidget(props) {
             onFocus: _onFocus,
             autoFocus: autofocus,
             value: formValue,
-            "aria-describedby": ariaDescribedByIds8(id),
-            children: selectOptions.items.map((item) => /* @__PURE__ */ jsx31("option", { value: item.value, children: item.label }, item.value))
+            "aria-describedby": ariaDescribedByIds7(id),
+            children: selectOptions.items.map((item) => /* @__PURE__ */ jsx33("option", { value: item.value, children: item.label }, item.value))
           }
         ),
-        /* @__PURE__ */ jsx31(ChakraSelect3.Indicator, {})
+        /* @__PURE__ */ jsx33(ChakraSelect3.Indicator, {})
       ] })
     }
   );
@@ -1364,12 +1363,13 @@ function NativeSelectWidget(props) {
 // src/TextareaWidget/TextareaWidget.tsx
 import { Textarea } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds9,
+  ariaDescribedByIds as ariaDescribedByIds8,
   labelValue as labelValue8
 } from "@rjsf/utils";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function TextareaWidget({
   id,
+  htmlName,
   placeholder,
   value,
   label,
@@ -1389,7 +1389,7 @@ function TextareaWidget({
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
   const chakraProps = getChakra({ uiSchema });
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     Field,
     {
       mb: 1,
@@ -1399,11 +1399,11 @@ function TextareaWidget({
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue8(label, hideLabel || !label),
       ...chakraProps,
-      children: /* @__PURE__ */ jsx32(
+      children: /* @__PURE__ */ jsx34(
         Textarea,
         {
           id,
-          name: id,
+          name: htmlName || id,
           value: value ?? "",
           placeholder,
           autoFocus: autofocus,
@@ -1411,7 +1411,7 @@ function TextareaWidget({
           onBlur: _onBlur,
           onFocus: _onFocus,
           rows: options.rows,
-          "aria-describedby": ariaDescribedByIds9(id)
+          "aria-describedby": ariaDescribedByIds8(id)
         }
       )
     }
@@ -1420,39 +1420,39 @@ function TextareaWidget({
 
 // src/UpDownWidget/UpDownWidget.tsx
 import {
-  ariaDescribedByIds as ariaDescribedByIds10,
+  ariaDescribedByIds as ariaDescribedByIds9,
   labelValue as labelValue9
 } from "@rjsf/utils";
 
 // src/components/ui/number-input.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { forwardRef as forwardRef8, useEffect, useRef as useRef2 } from "react";
 import { NumberInput as ChakraNumberInput } from "@chakra-ui/react";
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var NumberInputRoot = forwardRef8(function NumberInput(props, ref) {
   const inputRef = useRef2(null);
-  useEffect2(() => {
+  useEffect(() => {
     if (inputRef.current) {
       inputRef.current.value = props.value || "";
     }
   }, [props.value]);
   return /* @__PURE__ */ jsxs20(ChakraNumberInput.Root, { ref, variant: "outline", ...props, children: [
     /* @__PURE__ */ jsxs20(ChakraNumberInput.Control, { children: [
-      /* @__PURE__ */ jsx33(ChakraNumberInput.IncrementTrigger, {}),
-      /* @__PURE__ */ jsx33(ChakraNumberInput.DecrementTrigger, {})
+      /* @__PURE__ */ jsx35(ChakraNumberInput.IncrementTrigger, {}),
+      /* @__PURE__ */ jsx35(ChakraNumberInput.DecrementTrigger, {})
     ] }),
-    /* @__PURE__ */ jsx33(ChakraNumberInput.Input, { ref: inputRef })
+    /* @__PURE__ */ jsx35(ChakraNumberInput.Input, { ref: inputRef })
   ] });
 });
 
 // src/UpDownWidget/UpDownWidget.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function UpDownWidget(props) {
   const { id, readonly, disabled, label, hideLabel, value, onChange, onBlur, onFocus, rawErrors, required } = props;
   const _onChange = ({ value: value2 }) => onChange(value2);
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
   const chakraProps = getChakra({ uiSchema: props.uiSchema });
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     Field,
     {
       mb: 1,
@@ -1462,14 +1462,14 @@ function UpDownWidget(props) {
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue9(label, hideLabel || !label),
       ...chakraProps,
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx36(
         NumberInputRoot,
         {
           value,
           onValueChange: _onChange,
           onBlur: _onBlur,
           onFocus: _onFocus,
-          "aria-describedby": ariaDescribedByIds10(id),
+          "aria-describedby": ariaDescribedByIds9(id),
           id,
           name: id
         }
@@ -1515,13 +1515,13 @@ import { CacheProvider } from "@emotion/react";
 import createCache from "@emotion/cache";
 import weakMemoize from "@emotion/weak-memoize";
 import { ChakraProvider, defaultSystem as defaultSystem2 } from "@chakra-ui/react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var memoizedCreateCacheWithContainer = weakMemoize((container) => {
   const newCache = createCache({ container, key: "rjsf" });
   return newCache;
 });
 var __createChakraFrameProvider = (props) => ({ document }) => {
-  return /* @__PURE__ */ jsx35("div", { style: { margin: 2 }, children: /* @__PURE__ */ jsx35(CacheProvider, { value: memoizedCreateCacheWithContainer(document.head), children: /* @__PURE__ */ jsx35(ChakraProvider, { value: defaultSystem2, children: props.children }) }) });
+  return /* @__PURE__ */ jsx37("div", { style: { margin: 2 }, children: /* @__PURE__ */ jsx37(CacheProvider, { value: memoizedCreateCacheWithContainer(document.head), children: /* @__PURE__ */ jsx37(ChakraProvider, { value: defaultSystem2, children: props.children }) }) });
 };
 
 // src/index.ts