@rjsf/antd 6.0.0-beta.8 → 6.0.0

package/dist/antd.esm.js

@@ -47,9 +47,9 @@ function ArrayFieldTemplate(props) {
     canAdd,
     className,
     disabled,
-    formContext,
-    idSchema,
+    fieldPathId,
     items,
+    optionalDataControl,
     onAddClick,
     readonly,
     registry,
@@ -64,16 +64,13 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
+  const { formContext } = registry;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -86,33 +83,37 @@ function ArrayFieldTemplate(props) {
     labelAlign === "left" && `${labelClsBasic}-left`
     // labelCol.className,
   );
-  return /* @__PURE__ */ jsx2("fieldset", { className, id: idSchema.$id, children: /* @__PURE__ */ jsxs2(Row2, { gutter: rowGutter, children: [
+  return /* @__PURE__ */ jsx2("fieldset", { className, id: fieldPathId.$id, children: /* @__PURE__ */ jsxs2(Row2, { gutter: rowGutter, children: [
     (uiOptions.title || title) && /* @__PURE__ */ jsx2(Col2, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsx2(
       ArrayFieldTitleTemplate,
       {
-        idSchema,
+        fieldPathId,
         required,
         title: uiOptions.title || title,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ) }),
     (uiOptions.description || schema.description) && /* @__PURE__ */ jsx2(Col2, { span: 24, style: DESCRIPTION_COL_STYLE, children: /* @__PURE__ */ jsx2(
       ArrayFieldDescriptionTemplate,
       {
         description: uiOptions.description || schema.description,
-        idSchema,
+        fieldPathId,
         schema,
         uiSchema,
         registry
       }
     ) }),
-    /* @__PURE__ */ jsx2(Col2, { className: "row array-item-list", span: 24, children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx2(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
+    /* @__PURE__ */ jsxs2(Col2, { className: "row array-item-list", span: 24, children: [
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+      items
+    ] }),
     canAdd && /* @__PURE__ */ jsx2(Col2, { span: 24, children: /* @__PURE__ */ jsx2(Row2, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ jsx2(Col2, { flex: "192px", children: /* @__PURE__ */ jsx2(
       AddButton2,
       {
-        id: buttonId(idSchema, "add"),
+        id: buttonId(fieldPathId, "add"),
         className: "rjsf-array-item-add",
         disabled: disabled || readonly,
         onClick: onAddClick,
@@ -137,8 +138,9 @@ var INPUT_STYLE = {
 function BaseInputTemplate(props) {
   const {
     disabled,
-    formContext,
+    registry,
     id,
+    htmlName,
     onBlur,
     onChange,
     onChangeOverride,
@@ -150,6 +152,7 @@ function BaseInputTemplate(props) {
     value,
     type
   } = props;
+  const { formContext } = registry;
   const inputProps = getInputProps(schema, type, options, false);
   const { readonlyAsDisabled = true } = formContext;
   const handleNumberChange = (nextValue) => onChange(nextValue);
@@ -161,7 +164,7 @@ function BaseInputTemplate(props) {
     {
       disabled: disabled || readonlyAsDisabled && readonly,
       id,
-      name: id,
+      name: htmlName || id,
       onBlur: !readonly ? handleBlur : void 0,
       onChange: !readonly ? handleNumberChange : void 0,
       onFocus: !readonly ? handleFocus : void 0,
@@ -177,7 +180,7 @@ function BaseInputTemplate(props) {
     {
       disabled: disabled || readonlyAsDisabled && readonly,
       id,
-      name: id,
+      name: htmlName || id,
       onBlur: !readonly ? handleBlur : void 0,
       onChange: !readonly ? handleTextChange : void 0,
       onFocus: !readonly ? handleFocus : void 0,
@@ -246,13 +249,18 @@ import {
 } from "@rjsf/utils";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function IconButton(props) {
-  const { iconType = "default", icon, onClick, uiSchema, registry, ...otherProps } = props;
+  const { iconType = "default", icon, onClick, uiSchema, registry, color, ...otherProps } = props;
   return /* @__PURE__ */ jsx6(
     Button,
     {
       onClick,
       type: iconType,
       icon,
+      color,
+      style: {
+        paddingTop: "4px"
+        /* Center the button */
+      },
       ...otherProps
     }
   );
@@ -265,9 +273,9 @@ function AddButton(props) {
     IconButton,
     {
       title: translateString(TranslatableString2.AddItemButton),
-      ...props,
-      block: true,
       iconType: "primary",
+      block: true,
+      ...props,
       icon: /* @__PURE__ */ jsx6(PlusCircleOutlined, {})
     }
   );
@@ -299,10 +307,10 @@ function RemoveButton(props) {
     IconButton,
     {
       title: translateString(TranslatableString2.RemoveButton),
-      ...props,
       danger: true,
       block: !!options.block,
       iconType: "primary",
+      ...props,
       icon: /* @__PURE__ */ jsx6(DeleteOutlined, {})
     }
   );
@@ -312,11 +320,11 @@ function RemoveButton(props) {
 import { errorId } from "@rjsf/utils";
 import { jsx as jsx7 } 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);
+  const id = errorId(fieldPathId);
   return /* @__PURE__ */ jsx7("div", { id, children: errors.map((error) => /* @__PURE__ */ jsx7("div", { children: error }, `field-${id}-error-${error}`)) });
 }
 
@@ -338,13 +346,13 @@ function FieldTemplate(props) {
     disabled,
     displayLabel,
     errors,
-    formContext,
     help,
     hidden,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     rawErrors,
     rawDescription,
     rawHelp,
@@ -354,6 +362,7 @@ function FieldTemplate(props) {
     schema,
     uiSchema
   } = props;
+  const { formContext } = registry;
   const {
     colon,
     labelCol = VERTICAL_LABEL_COL,
@@ -389,8 +398,9 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -428,6 +438,16 @@ function GridTemplate(props) {
   return /* @__PURE__ */ jsx9(Row3, { ...rest, children });
 }
 
+// src/templates/MultiSchemaFieldTemplate/index.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function MultiSchemaFieldTemplate(props) {
+  const { optionSchemaField, selector } = props;
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx10("div", { children: selector }),
+    optionSchemaField
+  ] });
+}
+
 // src/templates/ObjectFieldTemplate/index.tsx
 import classNames2 from "classnames";
 import isObject from "lodash/isObject";
@@ -443,7 +463,7 @@ import {
 } from "@rjsf/utils";
 import { Col as Col4, Row as Row4, ConfigProvider as ConfigProvider2 } from "antd";
 import { useContext as useContext2 } from "react";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var DESCRIPTION_COL_STYLE2 = {
   paddingBottom: "8px"
 };
@@ -451,10 +471,10 @@ function ObjectFieldTemplate(props) {
   const {
     description,
     disabled,
-    formContext,
     formData,
-    idSchema,
-    onAddClick,
+    fieldPathId,
+    onAddProperty,
+    optionalDataControl,
     properties,
     readonly,
     required,
@@ -470,6 +490,8 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const { formContext } = registry;
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -510,38 +532,40 @@ function ObjectFieldTemplate(props) {
     labelAlign === "left" && `${labelClsBasic}-left`
     // labelCol.className,
   );
-  return /* @__PURE__ */ jsxs5("fieldset", { id: idSchema.$id, children: [
-    /* @__PURE__ */ jsxs5(Row4, { gutter: rowGutter, children: [
-      title && /* @__PURE__ */ jsx10(Col4, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs6("fieldset", { id: fieldPathId.$id, children: [
+    /* @__PURE__ */ jsxs6(Row4, { gutter: rowGutter, children: [
+      title && /* @__PURE__ */ jsx11(Col4, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsx11(
         TitleFieldTemplate,
         {
-          id: titleId(idSchema),
+          id: titleId(fieldPathId),
           title,
           required,
           schema,
           uiSchema,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ) }),
-      description && /* @__PURE__ */ jsx10(Col4, { span: 24, style: DESCRIPTION_COL_STYLE2, children: /* @__PURE__ */ jsx10(
+      description && /* @__PURE__ */ jsx11(Col4, { span: 24, style: DESCRIPTION_COL_STYLE2, children: /* @__PURE__ */ jsx11(
         DescriptionFieldTemplate,
         {
-          id: descriptionId(idSchema),
+          id: descriptionId(fieldPathId),
           description,
           schema,
           uiSchema,
           registry
         }
       ) }),
-      properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsx10(Col4, { span: calculateColSpan(element), children: element.content }, element.name))
+      !showOptionalDataControlInTitle ? /* @__PURE__ */ jsx11(Col4, { span: 24, children: optionalDataControl }) : void 0,
+      properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsx11(Col4, { span: calculateColSpan(element), children: element.content }, element.name))
     ] }),
-    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx10(Col4, { span: 24, children: /* @__PURE__ */ jsx10(Row4, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ jsx10(Col4, { flex: "192px", children: /* @__PURE__ */ jsx10(
+    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx11(Col4, { span: 24, children: /* @__PURE__ */ jsx11(Row4, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ jsx11(Col4, { flex: "192px", children: /* @__PURE__ */ jsx11(
       AddButton2,
       {
-        id: buttonId2(idSchema, "add"),
+        id: buttonId2(fieldPathId, "add"),
         className: "rjsf-object-property-expand",
         disabled: disabled || readonly,
-        onClick: onAddClick(schema),
+        onClick: onAddProperty,
         uiSchema,
         registry
       }
@@ -549,28 +573,65 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/templates/OptionalDataControlsTemplate/index.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ jsx12(
+      AddButton,
+      {
+        id,
+        registry,
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label,
+        size: "small",
+        iconType: "default",
+        block: false
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ jsx12(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label,
+        size: "small",
+        iconType: "default",
+        block: false
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx12("em", { id, children: label });
+}
+
 // src/templates/SubmitButton/index.tsx
 import { Button as Button2 } from "antd";
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(Button2, { type: "submit", ...submitButtonProps, htmlType: "submit", children: submitText });
+  return /* @__PURE__ */ jsx13(Button2, { type: "submit", ...submitButtonProps, htmlType: "submit", children: submitText });
 }
 
 // src/templates/TitleField/index.tsx
 import classNames3 from "classnames";
-import { ConfigProvider as ConfigProvider3 } from "antd";
+import { Col as Col5, Divider, Row as Row5, ConfigProvider as ConfigProvider3 } from "antd";
 import { useContext as useContext3 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function TitleField({
   id,
   required,
   registry,
-  title
+  title,
+  optionalDataControl
 }) {
   const { formContext } = registry;
   const { colon = true } = formContext;
@@ -593,7 +654,7 @@ function TitleField({
     [`${prefixCls}-item-required`]: required,
     [`${prefixCls}-item-no-colon`]: !colon
   });
-  return title ? /* @__PURE__ */ jsx12(
+  let heading = title ? /* @__PURE__ */ jsx14(
     "label",
     {
       className: labelClassName,
@@ -603,17 +664,30 @@ function TitleField({
       children: labelChildren
     }
   ) : null;
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsxs7(Row5, { children: [
+      /* @__PURE__ */ jsx14(Col5, { flex: "auto", children: heading }),
+      /* @__PURE__ */ jsx14(Col5, { flex: "none", children: optionalDataControl })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    heading,
+    /* @__PURE__ */ jsx14(Divider, { size: "small", style: {
+      marginBlock: "1px"
+      /* pull the margin right up against the label */
+    } })
+  ] });
 }
 
 // src/templates/WrapIfAdditionalTemplate/index.tsx
-import { Col as Col5, Row as Row5, Form as Form2, Input as Input2 } from "antd";
+import { Col as Col6, Row as Row6, Form as Form2, Input as Input2 } from "antd";
 import {
   ADDITIONAL_PROPERTY_FLAG,
   UI_OPTIONS_KEY,
   TranslatableString as TranslatableString3,
   buttonId as buttonId3
 } from "@rjsf/utils";
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var VERTICAL_LABEL_COL2 = { span: 24 };
 var VERTICAL_WRAPPER_COL2 = { span: 24 };
 var INPUT_STYLE2 = {
@@ -627,8 +701,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     required,
     registry,
@@ -649,16 +723,15 @@ function WrapIfAdditionalTemplate(props) {
   const keyLabel = translateString(TranslatableString3.KeyLabel, [label]);
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
   if (!additional) {
-    return /* @__PURE__ */ jsx13("div", { className: classNames4, style, children });
+    return /* @__PURE__ */ jsx15("div", { className: classNames4, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target && target.value);
   const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
   const buttonUiOptions = {
     ...uiSchema,
     [UI_OPTIONS_KEY]: { ...uiOptions, block: true }
   };
-  return /* @__PURE__ */ jsx13("div", { className: classNames4, style, children: /* @__PURE__ */ jsxs6(Row5, { align: toolbarAlign, gutter: rowGutter, children: [
-    /* @__PURE__ */ jsx13(Col5, { className: "form-additional", flex: "1", children: /* @__PURE__ */ jsx13("div", { className: "form-group", children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15("div", { className: classNames4, style, children: /* @__PURE__ */ jsxs8(Row6, { align: toolbarAlign, gutter: rowGutter, children: [
+    /* @__PURE__ */ jsx15(Col6, { className: "form-additional", flex: "1", children: /* @__PURE__ */ jsx15("div", { className: "form-group", children: /* @__PURE__ */ jsx15(
       Form2.Item,
       {
         colon,
@@ -670,7 +743,7 @@ function WrapIfAdditionalTemplate(props) {
         required,
         style: wrapperStyle,
         wrapperCol,
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx15(
           Input2,
           {
             className: "form-control",
@@ -678,21 +751,21 @@ function WrapIfAdditionalTemplate(props) {
             disabled: disabled || readonlyAsDisabled && readonly,
             id: `${id}-key`,
             name: `${id}-key`,
-            onBlur: !readonly ? handleBlur : void 0,
+            onBlur: !readonly ? onKeyRenameBlur : void 0,
             style: INPUT_STYLE2,
             type: "text"
           }
         )
       }
     ) }) }),
-    /* @__PURE__ */ jsx13(Col5, { className: "form-additional", flex: "1", children }),
-    /* @__PURE__ */ jsx13(Col5, { flex: "192px", children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15(Col6, { className: "form-additional", flex: "1", children }),
+    /* @__PURE__ */ jsx15(Col6, { flex: "192px", children: /* @__PURE__ */ jsx15(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
         className: "rjsf-object-property-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema: buttonUiOptions,
         registry
       }
@@ -719,7 +792,9 @@ function generateTemplates() {
     FieldErrorTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -727,117 +802,39 @@ function generateTemplates() {
 var templates_default = generateTemplates();
 
 // src/widgets/AltDateWidget/index.tsx
-import { useEffect, useState } from "react";
-import { Row as Row6, Col as Col6, Button as Button3 } from "antd";
+import { Row as Row7, Col as Col7, Button as Button3 } from "antd";
 import {
-  ariaDescribedByIds as ariaDescribedByIds2,
-  dateRangeOptions,
-  getDateElementProps,
-  parseDateString,
-  toDateString,
-  TranslatableString as TranslatableString4
+  DateElement,
+  TranslatableString as TranslatableString4,
+  useAltDateWidgetProps
 } from "@rjsf/utils";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var readyForChange = (state) => {
-  return Object.values(state).every((value) => value !== -1);
-};
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function AltDateWidget(props) {
-  const {
-    autofocus,
-    disabled,
-    formContext,
-    id,
-    onBlur,
-    onChange,
-    onFocus,
-    options,
-    readonly,
-    registry,
-    showTime,
-    value
-  } = props;
-  const { translateString, widgets } = registry;
-  const { SelectWidget: SelectWidget2 } = widgets;
+  const { autofocus, disabled, id, name, onBlur, onFocus, options, readonly, registry } = props;
+  const { formContext, translateString } = registry;
   const { rowGutter = 24 } = formContext;
-  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 renderDateElement = (elemProps) => /* @__PURE__ */ jsx14(
-    SelectWidget2,
-    {
-      autofocus: elemProps.autofocus,
-      className: "form-control",
-      disabled: elemProps.disabled,
-      id: elemProps.id,
-      name: elemProps.name,
-      onBlur: elemProps.onBlur,
-      onChange: (elemValue) => elemProps.select(elemProps.type, elemValue),
-      onFocus: elemProps.onFocus,
-      options: {
-        enumOptions: dateRangeOptions(elemProps.range[0], elemProps.range[1])
-      },
-      placeholder: elemProps.type,
-      readonly: elemProps.readonly,
-      schema: { type: "integer" },
-      value: elemProps.value,
-      registry,
-      label: "",
-      "aria-describedby": ariaDescribedByIds2(id)
-    }
-  );
-  return /* @__PURE__ */ jsxs7(Row6, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [
-    getDateElementProps(
-      state,
-      showTime,
-      options.yearsRange,
-      options.format
-    ).map((elemProps, i) => {
-      const elemId = id + "_" + elemProps.type;
-      return /* @__PURE__ */ jsx14(Col6, { flex: "88px", children: renderDateElement({
-        ...elemProps,
-        autofocus: autofocus && i === 0,
-        disabled,
-        id: elemId,
-        name: id,
-        onBlur,
-        onFocus,
-        readonly,
-        registry,
-        select: handleChange,
-        // NOTE: antd components accept -1 rather than issue a warning
-        // like material-ui, so we need to convert -1 to undefined here.
-        value: elemProps.value || -1 < 0 ? void 0 : elemProps.value
-      }) }, elemId);
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
+  return /* @__PURE__ */ jsxs9(Row7, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [
+    elements.map((elemProps, i) => {
+      const elemId = `${id}_${elemProps.type}`;
+      return /* @__PURE__ */ jsx16(Col7, { flex: "88px", children: /* @__PURE__ */ jsx16(
+        DateElement,
+        {
+          rootId: id,
+          name,
+          select: handleChange,
+          ...elemProps,
+          disabled,
+          readonly,
+          registry,
+          onBlur,
+          onFocus,
+          autofocus: autofocus && i === 0
+        }
+      ) }, elemId);
     }),
-    !options.hideNowButton && /* @__PURE__ */ jsx14(Col6, { flex: "88px", children: /* @__PURE__ */ jsx14(Button3, { block: true, className: "btn-now", onClick: handleNow, type: "primary", children: translateString(TranslatableString4.NowLabel) }) }),
-    !options.hideClearButton && /* @__PURE__ */ jsx14(Col6, { flex: "88px", children: /* @__PURE__ */ jsx14(Button3, { block: true, className: "btn-clear", danger: true, onClick: handleClear, type: "primary", children: translateString(TranslatableString4.ClearLabel) }) })
+    !options.hideNowButton && /* @__PURE__ */ jsx16(Col7, { flex: "88px", children: /* @__PURE__ */ jsx16(Button3, { block: true, className: "btn-now", onClick: handleSetNow, type: "primary", children: translateString(TranslatableString4.NowLabel) }) }),
+    !options.hideClearButton && /* @__PURE__ */ jsx16(Col7, { flex: "88px", children: /* @__PURE__ */ jsx16(Button3, { block: true, className: "btn-clear", danger: true, onClick: handleClear, type: "primary", children: translateString(TranslatableString4.ClearLabel) }) })
   ] });
 }
 AltDateWidget.defaultProps = {
@@ -847,30 +844,43 @@ AltDateWidget.defaultProps = {
     yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
   },
   readonly: false,
-  showTime: false
+  time: false
 };
 
 // src/widgets/AltDateTimeWidget/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function AltDateTimeWidget(props) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ jsx15(AltDateWidget2, { showTime: true, ...props });
+  return /* @__PURE__ */ jsx17(AltDateWidget2, { time: true, ...props });
 }
 AltDateTimeWidget.defaultProps = {
   ...AltDateWidget.defaultProps,
-  showTime: true
+  time: true
 };
 
 // src/widgets/CheckboxesWidget/index.tsx
 import { Checkbox } from "antd";
 import {
-  ariaDescribedByIds as ariaDescribedByIds3,
+  ariaDescribedByIds as ariaDescribedByIds2,
   enumOptionsIndexForValue,
   enumOptionsValueForIndex,
   optionId
 } from "@rjsf/utils";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-function CheckboxesWidget({ autofocus, disabled, formContext, id, onBlur, onChange, onFocus, options, readonly, value }) {
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+function CheckboxesWidget({
+  autofocus,
+  disabled,
+  registry,
+  id,
+  htmlName,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  readonly,
+  value
+}) {
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
   const handleChange = (nextValue) => onChange(enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
@@ -882,28 +892,28 @@ function CheckboxesWidget({ autofocus, disabled, formContext, id, onBlur, onChan
     onFocus: !readonly ? handleFocus : void 0
   };
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
-  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsx16(Fragment2, { children: /* @__PURE__ */ jsx16(
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsx18(Fragment3, { children: /* @__PURE__ */ jsx18(
     Checkbox.Group,
     {
       disabled: disabled || readonlyAsDisabled && readonly,
-      name: id,
+      name: htmlName || id,
       onChange: !readonly ? handleChange : void 0,
       value: selectedIndexes,
       ...extraProps,
-      "aria-describedby": ariaDescribedByIds3(id),
-      children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsxs8("span", { children: [
-        /* @__PURE__ */ jsx16(
+      "aria-describedby": ariaDescribedByIds2(id),
+      children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsxs10("span", { children: [
+        /* @__PURE__ */ jsx18(
           Checkbox,
           {
             id: optionId(id, i),
-            name: id,
+            name: htmlName || id,
             autoFocus: i === 0 ? autofocus : false,
             disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
             value: String(i),
             children: option.label
           }
         ),
-        !inline && /* @__PURE__ */ jsx16("br", {})
+        !inline && /* @__PURE__ */ jsx18("br", {})
       ] }, i))
     }
   ) }) : null;
@@ -912,12 +922,13 @@ function CheckboxesWidget({ autofocus, disabled, formContext, id, onBlur, onChan
 // src/widgets/CheckboxWidget/index.tsx
 import { Checkbox as Checkbox2 } from "antd";
 import {
-  ariaDescribedByIds as ariaDescribedByIds4,
+  ariaDescribedByIds as ariaDescribedByIds3,
   labelValue
 } from "@rjsf/utils";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
-  const { autofocus, disabled, formContext, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
+  const { autofocus, disabled, registry, id, htmlName, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const handleChange = ({ target }) => onChange(target.checked);
   const handleBlur = ({ target }) => onBlur(id, target && target.checked);
@@ -926,17 +937,17 @@ function CheckboxWidget(props) {
     onBlur: !readonly ? handleBlur : void 0,
     onFocus: !readonly ? handleFocus : void 0
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     Checkbox2,
     {
       autoFocus: autofocus,
       checked: typeof value === "undefined" ? false : value,
       disabled: disabled || readonlyAsDisabled && readonly,
       id,
-      name: id,
+      name: htmlName || id,
       onChange: !readonly ? handleChange : void 0,
       ...extraProps,
-      "aria-describedby": ariaDescribedByIds4(id),
+      "aria-describedby": ariaDescribedByIds3(id),
       children: labelValue(label, hideLabel, "")
     }
   );
@@ -945,21 +956,22 @@ function CheckboxWidget(props) {
 // src/widgets/DateTimeWidget/index.tsx
 import dayjs from "dayjs";
 import {
-  ariaDescribedByIds as ariaDescribedByIds5
+  ariaDescribedByIds as ariaDescribedByIds4
 } from "@rjsf/utils";
 import { DatePicker } from "antd";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var DATE_PICKER_STYLE = {
   width: "100%"
 };
 function DateTimeWidget(props) {
-  const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+  const { disabled, registry, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const handleChange = (nextValue) => onChange(nextValue && nextValue.toISOString());
   const handleBlur = () => onBlur(id, value);
   const handleFocus = () => onFocus(id, value);
   const getPopupContainer = (node) => node.parentNode;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     DatePicker,
     {
       disabled: disabled || readonlyAsDisabled && readonly,
@@ -973,7 +985,7 @@ function DateTimeWidget(props) {
       showTime: true,
       style: DATE_PICKER_STYLE,
       value: value && dayjs(value),
-      "aria-describedby": ariaDescribedByIds5(id)
+      "aria-describedby": ariaDescribedByIds4(id)
     }
   );
 }
@@ -981,21 +993,22 @@ function DateTimeWidget(props) {
 // src/widgets/DateWidget/index.tsx
 import dayjs2 from "dayjs";
 import {
-  ariaDescribedByIds as ariaDescribedByIds6
+  ariaDescribedByIds as ariaDescribedByIds5
 } from "@rjsf/utils";
 import { DatePicker as DatePicker2 } from "antd";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var DATE_PICKER_STYLE2 = {
   width: "100%"
 };
 function DateWidget(props) {
-  const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+  const { disabled, registry, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const handleChange = (nextValue) => onChange(nextValue && nextValue.format("YYYY-MM-DD"));
   const handleBlur = () => onBlur(id, value);
   const handleFocus = () => onFocus(id, value);
   const getPopupContainer = (node) => node.parentNode;
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     DatePicker2,
     {
       disabled: disabled || readonlyAsDisabled && readonly,
@@ -1009,7 +1022,7 @@ function DateWidget(props) {
       showTime: false,
       style: DATE_PICKER_STYLE2,
       value: value && dayjs2(value),
-      "aria-describedby": ariaDescribedByIds6(id)
+      "aria-describedby": ariaDescribedByIds5(id)
     }
   );
 }
@@ -1017,17 +1030,18 @@ function DateWidget(props) {
 // src/widgets/PasswordWidget/index.tsx
 import { Input as Input3 } from "antd";
 import {
-  ariaDescribedByIds as ariaDescribedByIds7
+  ariaDescribedByIds as ariaDescribedByIds6
 } from "@rjsf/utils";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function PasswordWidget(props) {
-  const { disabled, formContext, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props;
+  const { disabled, registry, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props;
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const emptyValue = options.emptyValue || "";
   const handleChange = ({ target }) => onChange(target.value === "" ? emptyValue : target.value);
   const handleBlur = ({ target }) => onBlur(id, target.value);
   const handleFocus = ({ target }) => onFocus(id, target.value);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     Input3.Password,
     {
       disabled: disabled || readonlyAsDisabled && readonly,
@@ -1038,7 +1052,7 @@ function PasswordWidget(props) {
       onFocus: !readonly ? handleFocus : void 0,
       placeholder,
       value: value || "",
-      "aria-describedby": ariaDescribedByIds7(id)
+      "aria-describedby": ariaDescribedByIds6(id)
     }
   );
 }
@@ -1046,17 +1060,18 @@ function PasswordWidget(props) {
 // src/widgets/RadioWidget/index.tsx
 import { Radio } from "antd";
 import {
-  ariaDescribedByIds as ariaDescribedByIds8,
+  ariaDescribedByIds as ariaDescribedByIds7,
   enumOptionsIndexForValue as enumOptionsIndexForValue2,
   enumOptionsValueForIndex as enumOptionsValueForIndex2,
   optionId as optionId2
 } from "@rjsf/utils";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function RadioWidget({
   autofocus,
   disabled,
-  formContext,
+  registry,
   id,
+  htmlName,
   onBlur,
   onChange,
   onFocus,
@@ -1064,28 +1079,29 @@ function RadioWidget({
   readonly,
   value
 }) {
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const handleChange = ({ target: { value: nextValue } }) => onChange(enumOptionsValueForIndex2(nextValue, enumOptions, emptyValue));
   const handleBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const handleFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const selectedIndexes = enumOptionsIndexForValue2(value, enumOptions);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(
     Radio.Group,
     {
       disabled: disabled || readonlyAsDisabled && readonly,
       id,
-      name: id,
+      name: htmlName || id,
       onChange: !readonly ? handleChange : void 0,
       onBlur: !readonly ? handleBlur : void 0,
       onFocus: !readonly ? handleFocus : void 0,
       value: selectedIndexes,
-      "aria-describedby": ariaDescribedByIds8(id),
-      children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsx21(
+      "aria-describedby": ariaDescribedByIds7(id),
+      children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsx23(
         Radio,
         {
           id: optionId2(id, i),
-          name: id,
+          name: htmlName || id,
           autoFocus: i === 0 ? autofocus : false,
           disabled: disabled || Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
           value: String(i),
@@ -1100,15 +1116,15 @@ function RadioWidget({
 // src/widgets/RangeWidget/index.tsx
 import { Slider } from "antd";
 import {
-  ariaDescribedByIds as ariaDescribedByIds9,
+  ariaDescribedByIds as ariaDescribedByIds8,
   rangeSpec
 } from "@rjsf/utils";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const {
     autofocus,
     disabled,
-    formContext,
+    registry,
     id,
     onBlur,
     onChange,
@@ -1119,6 +1135,7 @@ function RangeWidget(props) {
     schema,
     value
   } = props;
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const { min, max, step } = rangeSpec(schema);
   const emptyValue = options.emptyValue || "";
@@ -1130,7 +1147,7 @@ function RangeWidget(props) {
     onBlur: !readonly ? handleBlur : void 0,
     onFocus: !readonly ? handleFocus : void 0
   };
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     Slider,
     {
       autoFocus: autofocus,
@@ -1143,7 +1160,7 @@ function RangeWidget(props) {
       step,
       value,
       ...extraProps,
-      "aria-describedby": ariaDescribedByIds9(id)
+      "aria-describedby": ariaDescribedByIds8(id)
     }
   );
 }
@@ -1151,21 +1168,22 @@ function RangeWidget(props) {
 // src/widgets/SelectWidget/index.tsx
 import { Select } from "antd";
 import {
-  ariaDescribedByIds as ariaDescribedByIds10,
+  ariaDescribedByIds as ariaDescribedByIds9,
   enumOptionsIndexForValue as enumOptionsIndexForValue3,
   enumOptionsValueForIndex as enumOptionsValueForIndex3
 } from "@rjsf/utils";
 import isString2 from "lodash/isString";
 import { useMemo } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var SELECT_STYLE = {
   width: "100%"
 };
 function SelectWidget({
   autofocus,
   disabled,
-  formContext = {},
+  registry,
   id,
+  htmlName,
   multiple,
   onBlur,
   onChange,
@@ -1176,6 +1194,7 @@ function SelectWidget({
   value,
   schema
 }) {
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const handleChange = (nextValue) => onChange(enumOptionsValueForIndex3(nextValue, enumOptions, emptyValue));
@@ -1190,7 +1209,7 @@ function SelectWidget({
   const getPopupContainer = (node) => node.parentNode;
   const selectedIndexes = enumOptionsIndexForValue3(value, enumOptions, multiple);
   const extraProps = {
-    name: id
+    name: htmlName || id
   };
   const showPlaceholderOption = !multiple && schema.default === void 0;
   const selectOptions = useMemo(() => {
@@ -1208,7 +1227,7 @@ function SelectWidget({
     }
     return void 0;
   }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     Select,
     {
       autoFocus: autofocus,
@@ -1224,7 +1243,7 @@ function SelectWidget({
       value: selectedIndexes,
       ...extraProps,
       filterOption,
-      "aria-describedby": ariaDescribedByIds10(id),
+      "aria-describedby": ariaDescribedByIds9(id),
       options: selectOptions
     }
   );
@@ -1233,16 +1252,17 @@ function SelectWidget({
 // src/widgets/TextareaWidget/index.tsx
 import { Input as Input4 } from "antd";
 import {
-  ariaDescribedByIds as ariaDescribedByIds11
+  ariaDescribedByIds as ariaDescribedByIds10
 } from "@rjsf/utils";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var INPUT_STYLE3 = {
   width: "100%"
 };
 function TextareaWidget({
   disabled,
-  formContext,
+  registry,
   id,
+  htmlName,
   onBlur,
   onChange,
   onFocus,
@@ -1251,6 +1271,7 @@ function TextareaWidget({
   readonly,
   value
 }) {
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const handleChange = ({ target }) => onChange(target.value === "" ? options.emptyValue : target.value);
   const handleBlur = ({ target }) => onBlur(id, target && target.value);
@@ -1258,12 +1279,12 @@ function TextareaWidget({
   const extraProps = {
     type: "textarea"
   };
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     Input4.TextArea,
     {
       disabled: disabled || readonlyAsDisabled && readonly,
       id,
-      name: id,
+      name: htmlName || id,
       onBlur: !readonly ? handleBlur : void 0,
       onChange: !readonly ? handleChange : void 0,
       onFocus: !readonly ? handleFocus : void 0,
@@ -1272,7 +1293,7 @@ function TextareaWidget({
       style: INPUT_STYLE3,
       value,
       ...extraProps,
-      "aria-describedby": ariaDescribedByIds11(id)
+      "aria-describedby": ariaDescribedByIds10(id)
     }
   );
 }