@plasmicpkgs/antd5 0.0.122 → 0.0.124

package/dist/index.js

@@ -68,6 +68,18 @@ function asArray(x) {
     return [x];
   }
 }
+function omit(obj, ...keys) {
+  if (Object.keys(obj).length === 0) {
+    return obj;
+  }
+  const res = {};
+  for (const key of Object.keys(obj)) {
+    if (!keys.includes(key)) {
+      res[key] = obj[key];
+    }
+  }
+  return res;
+}
 function usePrevious(value) {
   const prevValue = React__default.default.useRef(void 0);
   React__default.default.useEffect(() => {
@@ -94,6 +106,9 @@ function setFieldsToUndefined(obj) {
     }
   }
 }
+function arrayEq(xs, ys) {
+  return xs.length === ys.length && xs.every((x, i) => x === ys[i]);
+}
 class ErrorBoundary extends React__default.default.Component {
   constructor() {
     super(...arguments);
@@ -125,6 +140,13 @@ class ErrorBoundary extends React__default.default.Component {
     return this.props.children;
   }
 }
+function get(obj, key, def, undef) {
+  key = key.split ? key.split(".") : key;
+  for (let p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+}
 
 var __defProp$o = Object.defineProperty;
 var __defProps$i = Object.defineProperties;
@@ -2524,6 +2546,210 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
+function AntdDatePicker(props) {
+  const nativeInput = React__default.default.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const strValue = props.value && typeof props.value === "object" && "toISOString" in props.value ? props.value.toISOString() : props.value === null ? void 0 : props.value;
+  const _a = props, { picker, popupScopeClassName } = _a, rest = __objRest$b(_a, ["picker", "popupScopeClassName"]);
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    antd.DatePicker,
+    __spreadProps$a(__spreadValues$e({}, rest), {
+      picker,
+      value: props.value === void 0 ? void 0 : !props.value ? null : dayjs__default.default(props.value),
+      defaultValue: props.defaultValue === void 0 ? void 0 : dayjs__default.default(props.defaultValue),
+      popupClassName: popupScopeClassName,
+      onChange: (value, _dateString) => {
+        var _a2;
+        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value !== null ? value.toISOString() : null);
+      },
+      open,
+      onOpenChange: (_open) => {
+        if (_open && window.innerWidth < 500) {
+          nativeInput.current.showPicker();
+        } else {
+          setOpen(_open);
+        }
+      }
+    })
+  ), /* @__PURE__ */ React__default.default.createElement(
+    "input",
+    {
+      hidden: true,
+      ref: nativeInput,
+      type: props.showTime ? "datetime-local" : "date",
+      value: strValue || "",
+      onChange: (e) => {
+        var _a2;
+        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e.target.value);
+      }
+    }
+  ));
+}
+const datePickerComponentName = "plasmic-antd5-date-picker";
+function registerDatePicker(loader) {
+  registerComponentHelper(loader, AntdDatePicker, {
+    name: datePickerComponentName,
+    displayName: "Date/Time Picker",
+    props: {
+      value: {
+        type: "string",
+        editOnly: true,
+        uncontrolledProp: "defaultValue",
+        description: "The current date/time as an ISO string, Date object, or dayjs object",
+        hidden: (ps) => !!ps.__plasmicFormField
+      },
+      disabled: {
+        type: "boolean",
+        defaultValueHint: false
+      },
+      autoFocus: {
+        type: "boolean",
+        description: "Focus when component is rendered",
+        defaultValueHint: false,
+        advanced: true
+      },
+      onChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "value", type: "string" }]
+      },
+      picker: {
+        type: "choice",
+        options: ["date", "week", "month", "quarter", "year"].map((value) => ({
+          value,
+          label: capitalize(value)
+        })),
+        defaultValueHint: "date"
+      },
+      popupScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "datePickerPopup"
+      },
+      popupClassName: {
+        type: "class",
+        displayName: "Popup container",
+        selectors: [
+          {
+            selector: ":datePickerPopup .ant-picker-panel-container",
+            label: "Base"
+          }
+        ]
+      },
+      popupHeaderClassName: {
+        type: "class",
+        displayName: "Popup header",
+        selectors: [
+          {
+            selector: ":datePickerPopup .ant-picker-header",
+            label: "Base"
+          }
+        ]
+      },
+      popupBodyClassName: {
+        type: "class",
+        displayName: "Popup body",
+        selectors: [
+          {
+            selector: ":datePickerPopup .ant-picker-body",
+            label: "Base"
+          }
+        ]
+      },
+      popupFooterClassName: {
+        type: "class",
+        displayName: "Popup footer",
+        selectors: [
+          {
+            selector: ":datePickerPopup .ant-picker-footer",
+            label: "Base"
+          }
+        ]
+      },
+      showTime: {
+        type: "boolean",
+        description: "Enable time selection"
+      },
+      bordered: {
+        type: "boolean",
+        advanced: true
+      },
+      // TODO - see how it works with plasmic-rich-components
+      // format: {
+      //   advanced: true
+      // },
+      showNow: {
+        type: "boolean",
+        advanced: true,
+        description: 'Whether to show the "Now" button',
+        defaultValueHint: true,
+        hidden: (ps) => !ps.showTime
+      },
+      showToday: {
+        type: "boolean",
+        advanced: true,
+        description: 'Whether to show the "Today" button',
+        defaultValueHint: true,
+        hidden: (ps) => ps.showTime
+      },
+      // disabledDate: {
+      //   type: "function",
+      //   advanced: true,
+      //   description: "Dates to disable",
+      // },
+      // disabledTime: {
+      //   type: "function",
+      //   advanced: true,
+      //   description: "Times to disable",
+      // },
+      allowClear: {
+        type: "boolean",
+        advanced: true,
+        description: "Whether to show the clear button"
+      }
+    },
+    states: {
+      value: {
+        type: "writable",
+        valueProp: "value",
+        onChangeProp: "onChange",
+        variableType: "text"
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerDatePicker",
+    importName: "AntdDatePicker"
+  });
+}
+
+var __defProp$d = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$a = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const FormItem = antd.Form.Item;
 const FormList = antd.Form.List;
 var InputType = /* @__PURE__ */ ((InputType2) => {
@@ -2538,6 +2764,7 @@ var InputType = /* @__PURE__ */ ((InputType2) => {
   InputType2["RadioGroup"] = "Radio Group";
   InputType2["Checkbox"] = "Checkbox";
   InputType2["DatePicker"] = "DatePicker";
+  InputType2["Unknown"] = "Unkown";
   return InputType2;
 })(InputType || {});
 var FormType = /* @__PURE__ */ ((FormType2) => {
@@ -2550,17 +2777,27 @@ const InternalFormInstanceContext = React__default.default.createContext(void 0)
 const FormLayoutContext = React__default.default.createContext(void 0);
 const Internal = React__default.default.forwardRef(
   (props, ref) => {
-    var _b, _c, _d, _e;
+    var _b, _c, _d, _e, _f;
     const [form] = antd.Form.useForm();
     const values = form.getFieldsValue(true);
     const lastValue = React__default.default.useRef(values);
-    const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$b(_a, ["extendedOnValuesChange", "setRemountKey"]);
+    const _a = props, {
+      extendedOnValuesChange,
+      forceRemount,
+      setRegisteredFields,
+      registeredFields
+    } = _a, rest = __objRest$a(_a, [
+      "extendedOnValuesChange",
+      "forceRemount",
+      "setRegisteredFields",
+      "registeredFields"
+    ]);
     let childrenNode;
     if (props.mode !== "simplified") {
       childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
     } else {
       childrenNode = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, ((_b = props.formItems) != null ? _b : []).map((formItem) => {
-        var _a2, _b2;
+        var _a2, _b2, _c2;
         return /* @__PURE__ */ React__default.default.createElement(
           ErrorBoundary,
           {
@@ -2569,12 +2806,13 @@ const Internal = React__default.default.forwardRef(
           },
           /* @__PURE__ */ React__default.default.createElement(
             FormItemWrapper,
-            __spreadProps$a(__spreadValues$e({}, formItem), {
+            __spreadProps$9(__spreadValues$d({}, omit(formItem, "key")), {
               noLabel: formItem.inputType === "Checkbox" /* Checkbox */ || formItem.noLabel,
+              valuePropName: (_c2 = formItem.valuePropName) != null ? _c2 : formItem.inputType === "Checkbox" /* Checkbox */ ? "checked" : void 0,
               style: { width: "100%" }
             }),
-            formItem.inputType === "Text" /* Text */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input, null) : formItem.inputType === "Password" /* Password */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.Password, null) : formItem.inputType === "Text Area" /* TextArea */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.TextArea, null) : formItem.inputType === "Number" /* Number */ ? /* @__PURE__ */ React__default.default.createElement(antd.InputNumber, null) : formItem.inputType === "Checkbox" /* Checkbox */ ? /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, null, formItem.label) : formItem.inputType === "Select" /* Select */ ? /* @__PURE__ */ React__default.default.createElement(antd.Select, { options: formItem.options }) : formItem.inputType === "DatePicker" /* DatePicker */ ? /* @__PURE__ */ React__default.default.createElement(antd.DatePicker, null) : formItem.inputType === "Radio Group" /* RadioGroup */ ? /* @__PURE__ */ React__default.default.createElement(
-              antd.Radio.Group,
+            formItem.inputType === "Text" /* Text */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input, null) : formItem.inputType === "Password" /* Password */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.Password, null) : formItem.inputType === "Text Area" /* TextArea */ ? /* @__PURE__ */ React__default.default.createElement(antd.Input.TextArea, null) : formItem.inputType === "Number" /* Number */ ? /* @__PURE__ */ React__default.default.createElement(antd.InputNumber, null) : formItem.inputType === "Checkbox" /* Checkbox */ ? /* @__PURE__ */ React__default.default.createElement(AntdCheckbox, null, formItem.label) : formItem.inputType === "Select" /* Select */ ? /* @__PURE__ */ React__default.default.createElement(AntdSelect, { options: formItem.options }) : formItem.inputType === "DatePicker" /* DatePicker */ ? /* @__PURE__ */ React__default.default.createElement(AntdDatePicker, { showTime: formItem.showTime }) : formItem.inputType === "Radio Group" /* RadioGroup */ ? /* @__PURE__ */ React__default.default.createElement(
+              AntdRadioGroup,
               {
                 options: formItem.options,
                 optionType: formItem.optionType,
@@ -2619,6 +2857,13 @@ const Internal = React__default.default.forwardRef(
         form.resetFields();
         extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
       },
+      validateFields: async (...args) => {
+        try {
+          return await form.validateFields(...args);
+        } catch (err) {
+          return err;
+        }
+      },
       clearFields: () => {
         const values2 = form.getFieldsValue(true);
         setFieldsToUndefined(values2);
@@ -2626,27 +2871,40 @@ const Internal = React__default.default.forwardRef(
         extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
       }
     }));
+    const registerField = React__default.default.useCallback((fieldEntity) => {
+      setRegisteredFields((f) => [...f, fieldEntity]);
+      return () => {
+        setRegisteredFields((f) => f.filter((ent) => ent !== fieldEntity));
+      };
+    }, []);
     return /* @__PURE__ */ React__default.default.createElement(
       InternalFormInstanceContext.Provider,
       {
         value: {
           layout: formLayout,
           fireOnValuesChange,
-          forceRemount: () => setRemountKey((k) => k + 1)
+          forceRemount,
+          registerField,
+          registeredFields,
+          initialValues: (_d = props.initialValues) != null ? _d : {}
         }
       },
       /* @__PURE__ */ React__default.default.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React__default.default.createElement(
         antd.Form,
-        __spreadProps$a(__spreadValues$e({}, rest), {
+        __spreadProps$9(__spreadValues$d({}, rest), {
           key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
           onValuesChange: (...args) => {
             var _a2;
             (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
-            extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
+            extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+          },
+          onFinish: () => {
+            var _a2;
+            (_a2 = props.onFinish) == null ? void 0 : _a2.call(props, form.getFieldsValue(true));
           },
           form,
-          labelCol: ((_d = props.labelCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
-          wrapperCol: ((_e = props.wrapperCol) == null ? void 0 : _e.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
+          labelCol: ((_e = props.labelCol) == null ? void 0 : _e.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
+          wrapperCol: ((_f = props.wrapperCol) == null ? void 0 : _f.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
         }),
         /* @__PURE__ */ React__default.default.createElement("style", null, `
           .ant-form-item-explain + div, .ant-form-item-margin-offset {
@@ -2658,42 +2916,47 @@ const Internal = React__default.default.forwardRef(
     );
   }
 );
-function useFormItemDefinitions(rawData, props, formRef) {
-  const { mode, formItems, setControlContextData } = props;
+function useFormItemDefinitions(rawData, props, formRef, registeredFields) {
+  const { mode, dataFormItems, setControlContextData } = props;
+  const formInstance = formRef == null ? void 0 : formRef.formInstance;
   return React__default.default.useMemo(() => {
-    if (mode !== "simplified" || !rawData || rawData.isLoading || rawData.error) {
-      return void 0;
-    }
-    const data = dataSources.normalizeData(rawData);
-    const schema = data == null ? void 0 : data.schema;
-    if (!data || !schema || !data.data) {
+    const data = rawData && dataSources.normalizeData(rawData);
+    const schema = data && (data == null ? void 0 : data.schema);
+    if (mode !== "simplified" || !rawData || rawData.isLoading || rawData.error || !data || !schema || !data.data) {
+      setControlContextData == null ? void 0 : setControlContextData({
+        formInstance,
+        registeredFields
+      });
       return void 0;
     }
     const row = data.data.length > 0 ? data.data[0] : void 0;
     const { mergedFields, minimalFullLengthFields } = dataSources.deriveFieldConfigs(
-      formItems != null ? formItems : [],
+      dataFormItems != null ? dataFormItems : [],
       schema,
-      (field) => __spreadValues$e({
-        inputType: "Text" /* Text */
-      }, field && {
-        key: field.id,
-        fieldId: field.id,
-        label: field.label,
-        name: field.id,
-        inputType: field.type === "string" ? "Text" /* Text */ : field.type === "number" ? "Number" /* Number */ : field.type === "boolean" ? "Checkbox" /* Checkbox */ : "Text" /* Text */,
-        //missing date and date-time
-        initialValue: row ? row[field.id] : void 0,
-        hidden: field.primaryKey
-      })
+      (field) => {
+        var _a;
+        return __spreadValues$d({
+          inputType: "Text" /* Text */
+        }, field && {
+          key: field.id,
+          fieldId: field.id,
+          label: (_a = field.label) != null ? _a : field.id,
+          name: field.id,
+          inputType: field.type === "string" ? "Text" /* Text */ : field.type === "number" ? "Number" /* Number */ : field.type === "boolean" ? "Checkbox" /* Checkbox */ : "Text" /* Text */,
+          //missing date and date-time
+          initialValue: row ? row[field.id] : void 0
+        });
+      }
     );
     setControlContextData == null ? void 0 : setControlContextData({
       schema: data.schema,
       minimalFullLengthFields,
       mergedFields,
-      formInstance: formRef == null ? void 0 : formRef.formInstance
+      formInstance,
+      registeredFields
     });
     return mergedFields;
-  }, [mode, setControlContextData, formItems, rawData, formRef]);
+  }, [mode, setControlContextData, dataFormItems, rawData, formInstance]);
 }
 const useRawData = (props) => {
   const rawData = dataSources.usePlasmicDataOp(props.data);
@@ -2702,34 +2965,46 @@ const useRawData = (props) => {
 const FormWrapper = React__default.default.forwardRef(
   (props, ref) => {
     const [remountKey, setRemountKey] = React__default.default.useState(0);
+    const forceRemount = React__default.default.useCallback(
+      () => setRemountKey((k) => k + 1),
+      [setRemountKey]
+    );
     const previousInitialValues = usePrevious(props.initialValues);
     const wrapperRef = React__default.default.useRef(null);
     React__default.default.useEffect(() => {
       if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
-        setRemountKey((k) => k + 1);
+        forceRemount();
       }
     }, [previousInitialValues, props.initialValues]);
+    const [registeredFields, setRegisteredFields] = React__default.default.useState([]);
     React__default.default.useImperativeHandle(
       ref,
-      () => wrapperRef.current ? __spreadValues$e({}, wrapperRef.current) : {}
+      () => wrapperRef.current ? __spreadValues$d({}, wrapperRef.current) : {}
     );
     const rawData = useRawData(props);
     const formItemDefinitions = useFormItemDefinitions(
       rawData,
       props,
-      wrapperRef.current
+      wrapperRef.current,
+      registeredFields
     );
     React__default.default.useEffect(() => {
       if (rawData && !rawData.isLoading) {
-        setRemountKey((k) => k + 1);
+        forceRemount();
       }
     }, [rawData]);
-    const _a = props, { formItems } = _a, rest = __objRest$b(_a, ["formItems"]);
-    const actualFormItems = props.mode === "simplified" && formItemDefinitions ? formItemDefinitions : formItems;
+    const previousDataOp = usePrevious(props.data);
+    React__default.default.useEffect(() => {
+      if (previousDataOp == null && props.data != null || previousDataOp != null && props.data == null) {
+        forceRemount();
+      }
+    }, [props.data]);
+    const _a = props, { dataFormItems, formItems, data } = _a, rest = __objRest$a(_a, ["dataFormItems", "formItems", "data"]);
+    const actualFormItems = props.mode === "simplified" && formItemDefinitions ? formItemDefinitions : data ? dataFormItems : formItems;
     const previousFormItems = React__default.default.useRef([]);
     React__default.default.useEffect(() => {
       if (!(rawData && rawData.isLoading)) {
-        previousFormItems.current = actualFormItems;
+        previousFormItems.current = actualFormItems != null ? actualFormItems : [];
       }
     }, [rawData, actualFormItems]);
     if (props.mode === "simplified" && rawData && "error" in rawData) {
@@ -2739,10 +3014,12 @@ const FormWrapper = React__default.default.forwardRef(
     const isLoadingData = rawData == null ? void 0 : rawData.isLoading;
     return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
       Internal,
-      __spreadProps$a(__spreadValues$e({
+      __spreadProps$9(__spreadValues$d({
         key: remountKey
       }, rest), {
-        setRemountKey,
+        forceRemount,
+        setRegisteredFields,
+        registeredFields,
         formItems: rawData && rawData.isLoading ? previousFormItems.current : actualFormItems,
         ref: wrapperRef,
         style: isSchemaForm && isLoadingData ? {
@@ -2880,97 +3157,7 @@ function registerForm(loader) {
       formItems: {
         displayName: "Fields",
         type: "array",
-        itemType: {
-          type: "object",
-          fields: __spreadValues$e({
-            label: {
-              type: "string",
-              defaultValueHint: getDefaultValueHint("label")
-            },
-            inputType: {
-              type: "choice",
-              options: Object.values(InputType).filter(
-                (inputType) => ![
-                  "Option" /* Option */,
-                  "Option Group" /* OptionGroup */,
-                  "Radio" /* Radio */
-                ].includes(inputType)
-              ),
-              defaultValue: "Text" /* Text */,
-              defaultValueHint: getDefaultValueHint("inputType")
-            },
-            options: {
-              type: "array",
-              itemType: {
-                type: "object",
-                fields: {
-                  type: {
-                    type: "choice",
-                    options: [
-                      { value: "option", label: "Option" },
-                      { value: "option-group", label: "Option Group" }
-                    ],
-                    defaultValue: "option",
-                    hidden: (ps, _ctx, { path }) => {
-                      var _a, _b;
-                      if (((_b = (_a = ps.formItems) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
-                        return true;
-                      }
-                      return false;
-                    }
-                  },
-                  label: "string",
-                  value: {
-                    type: "string",
-                    hidden: (ps, _ctx, { path, item }) => {
-                      var _a, _b;
-                      if (((_b = (_a = ps.formItems) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
-                        return false;
-                      }
-                      return item.type !== "option";
-                    }
-                  },
-                  options: {
-                    type: "array",
-                    itemType: {
-                      type: "object",
-                      nameFunc: (item) => item.label || item.value,
-                      fields: {
-                        value: "string",
-                        label: "string"
-                      }
-                    },
-                    hidden: (ps, _ctx, { path, item }) => {
-                      var _a, _b;
-                      if (((_b = (_a = ps.formItems) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
-                        return true;
-                      }
-                      return item.type !== "option-group";
-                    }
-                  }
-                },
-                nameFunc: (item) => item == null ? void 0 : item.label
-              },
-              hidden: (_ps, _ctx, { item }) => !["Select" /* Select */, "Radio Group" /* RadioGroup */].includes(
-                item.inputType
-              )
-            },
-            optionType: {
-              type: "choice",
-              options: [
-                { value: "default", label: "Radio" },
-                { value: "button", label: "Button" }
-              ],
-              hidden: (_ps, _ctx, { item }) => "Radio Group" /* RadioGroup */ !== item.inputType,
-              defaultValueHint: "Radio",
-              displayName: "Option Type"
-            }
-          }, commonFormItemProps),
-          nameFunc: (item) => {
-            var _a, _b;
-            return (_b = (_a = item.fieldId) != null ? _a : item.label) != null ? _b : item.name;
-          }
-        },
+        itemType: commonSimplifiedFormArrayItemType("formItems"),
         defaultValue: [
           {
             label: "Name",
@@ -2987,17 +3174,31 @@ function registerForm(loader) {
           if (ps.mode === "advanced") {
             return true;
           }
-          if (ps.mode === "simplified") {
-            return false;
-          }
-          return !ps.data || !ps.formType;
-        },
-        unstable__keyFunc: (x) => x.key,
-        unstable__minimalValue: (ps, contextData) => {
-          return ps.data ? contextData == null ? void 0 : contextData.minimalFullLengthFields : void 0;
-        },
+          return !!ps.data;
+        }
+      },
+      /**
+       * dataFormItems are used to expand the form items from schema forms.
+       * We can't use the formItems prop because it has a default value. Therefore, if we unset the formItems prop,
+       * we would end up with the default value of formItems + schema form items.
+       * Ideally, we would need to support dynamic default value.
+       */
+      dataFormItems: {
+        displayName: "Data Fields",
+        type: "array",
+        itemType: commonSimplifiedFormArrayItemType("dataFormItems"),
+        hidden: (ps) => {
+          if (ps.mode === "advanced") {
+            return true;
+          }
+          return !ps.data;
+        },
+        unstable__keyFunc: (x) => x.key,
+        unstable__minimalValue: (ps, contextData) => {
+          return ps.data ? contextData == null ? void 0 : contextData.minimalFullLengthFields : void 0;
+        },
         unstable__canDelete: (item, ps, ctx) => {
-          if (ps.mode !== "database-schema-driven") {
+          if (ps.mode !== "simplified") {
             return true;
           }
           if (!(ctx == null ? void 0 : ctx.schema)) {
@@ -3009,7 +3210,7 @@ function registerForm(loader) {
           return true;
         }
       },
-      submitSlot: __spreadValues$e({
+      submitSlot: __spreadValues$d({
         type: "slot",
         hidden: () => true,
         defaultValue: {
@@ -3203,6 +3404,21 @@ function registerForm(loader) {
       clearFields: {
         displayName: "Clear fields",
         argTypes: []
+      },
+      validateFields: {
+        displayName: "Validate fields",
+        argTypes: [
+          {
+            name: "nameList",
+            displayName: "Name List",
+            type: "object"
+          },
+          {
+            name: "options",
+            displayName: "Options",
+            type: "object"
+          }
+        ]
       }
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerForm",
@@ -3286,7 +3502,7 @@ function FormItemWrapper(props) {
     customizeProps,
     setControlContextData,
     alignLabellessWithControls = true
-  } = _a, rest = __objRest$b(_a, [
+  } = _a, rest = __objRest$a(_a, [
     "rules",
     "description",
     "noLabel",
@@ -3298,6 +3514,11 @@ function FormItemWrapper(props) {
   ]);
   const relativeFormItemName = useFormItemRelativeName(name);
   const fullFormItemName = useFormItemFullName(name);
+  const pathCtx = React__default.default.useContext(PathContext);
+  const fieldEntity = React__default.default.useRef({
+    fullPath: pathCtx.fullPath,
+    name
+  }).current;
   const bestEffortLabel = !noLabel && reactNodeToString(props.label) || ensureArray(props.name).slice(-1)[0];
   const rules = plasmicRules ? plasmicRulesToAntdRules(
     plasmicRules,
@@ -3313,17 +3534,26 @@ function FormItemWrapper(props) {
     });
     const fullPath = React__default.default.useContext(PathContext).fullPath;
     const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
-    const { fireOnValuesChange, forceRemount } = internalFormCtx != null ? internalFormCtx : {};
+    const { fireOnValuesChange, forceRemount, registerField, initialValues } = internalFormCtx != null ? internalFormCtx : {};
     (_b = props.setControlContextData) == null ? void 0 : _b.call(props, {
       internalFormCtx,
       formInstance: form,
       parentFormItemPath: fullPath
     });
     React__default.default.useEffect(() => {
+      const unregister = registerField == null ? void 0 : registerField(fieldEntity);
+      return () => unregister == null ? void 0 : unregister();
+    }, []);
+    React__default.default.useEffect(() => {
+      fieldEntity.fullPath = [
+        ...pathCtx.fullPath,
+        ...props.name != null ? [props.name] : []
+      ];
+      fieldEntity.name = props.name;
       if (prevPropValues.current.name !== props.name) {
         forceRemount == null ? void 0 : forceRemount();
       }
-      if (!fullFormItemName || (form == null ? void 0 : form.getFieldValue(fullFormItemName)) !== prevPropValues.current.initialValue) {
+      if (!fullFormItemName || get(initialValues, fullFormItemName) != null) {
         return;
       }
       form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
@@ -3333,7 +3563,7 @@ function FormItemWrapper(props) {
   }
   return /* @__PURE__ */ React__default.default.createElement(
     FormItem,
-    __spreadProps$a(__spreadValues$e({}, rest), {
+    __spreadProps$9(__spreadValues$d({}, rest), {
       label: noLabel ? void 0 : props.label,
       name: relativeFormItemName,
       rules,
@@ -3398,7 +3628,7 @@ function deriveOnChangePropName(props) {
   return void 0;
 }
 function FormItemForwarder(_a) {
-  var _b = _a, { formItemProps } = _b, props = __objRest$b(_b, ["formItemProps"]);
+  var _b = _a, { formItemProps } = _b, props = __objRest$a(_b, ["formItemProps"]);
   var _a2;
   const status = antd.Form.Item.useStatus();
   const internalFormCtx = React__default.default.useContext(InternalFormInstanceContext);
@@ -3411,7 +3641,7 @@ function FormItemForwarder(_a) {
   });
   return React__default.default.Children.map(formItemProps.children, (child, i) => {
     var _a3;
-    let newProps = __spreadProps$a(__spreadValues$e(__spreadValues$e({}, (_a3 = child.props) != null ? _a3 : {}), props), {
+    let newProps = __spreadProps$9(__spreadValues$d(__spreadValues$d({}, (_a3 = child.props) != null ? _a3 : {}), props), {
       __plasmicFormField: true
     });
     if (formItemProps.customizeProps) {
@@ -3425,11 +3655,12 @@ function FormItemForwarder(_a) {
 }
 function getDefaultValueHint(field) {
   return (_props, contextData, { item }) => {
+    var _a;
     if (!contextData || !("mergedFields" in contextData)) {
       return void 0;
     }
     if (item == null ? void 0 : item.fieldId) {
-      const fieldSetting = contextData.mergedFields.find(
+      const fieldSetting = (_a = contextData.mergedFields) == null ? void 0 : _a.find(
         (f) => f.fieldId === item.fieldId
       );
       return fieldSetting == null ? void 0 : fieldSetting[field];
@@ -3437,15 +3668,98 @@ function getDefaultValueHint(field) {
     return void 0;
   };
 }
-const commonFormItemProps = {
+const mapAntdComponentToInputType = /* @__PURE__ */ new Map([
+  [antd.Input, "Text" /* Text */],
+  [antd.Input.TextArea, "Text Area" /* TextArea */],
+  [antd.Input.Password, "Password" /* Password */],
+  [antd.InputNumber, "Number" /* Number */],
+  [AntdSelect, "Select" /* Select */],
+  [AntdRadioGroup, "Radio Group" /* RadioGroup */],
+  [antd.Radio, "Radio" /* Radio */],
+  [AntdDatePicker, "DatePicker" /* DatePicker */],
+  [AntdCheckbox, "Checkbox" /* Checkbox */]
+]);
+const mapPlumeTypeToInputType = /* @__PURE__ */ new Map([
+  ["text-input", "Text" /* Text */],
+  ["select", "Select" /* Select */],
+  ["checkbox", "Checkbox" /* Checkbox */],
+  ["switch", "Checkbox" /* Checkbox */]
+]);
+const commonFormItemProps = (usage) => ({
   name: {
     type: "string",
     required: true,
+    validator: (value, _props, ctx) => {
+      var _a, _b, _c;
+      const currFullPath = [...(_a = ctx == null ? void 0 : ctx.parentFormItemPath) != null ? _a : [], value];
+      const nameCounter = ((_c = (_b = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _b.registeredFields) != null ? _c : []).filter(
+        (formItem) => arrayEq(formItem.fullPath, currFullPath)
+      ).length;
+      return nameCounter === 1 ? true : `Repeated form item name: ${currFullPath.join(" \u2192 ")}`;
+    },
     defaultValueHint: getDefaultValueHint("name")
   },
   initialValue: {
-    type: "string",
-    defaultValueHint: getDefaultValueHint("initialValue")
+    type: "dynamic",
+    control: (ps, ctx, {
+      item,
+      path
+    }) => {
+      var _a, _b, _c, _d;
+      let inputType = "Unkown" /* Unknown */;
+      if (usage === "simplified-form-item") {
+        inputType = item.inputType;
+        if (!ps.data) {
+          inputType = item.inputType;
+        } else if (path != null && typeof path[1] === "number") {
+          inputType = (_b = (_a = ctx == null ? void 0 : ctx.mergedFields) == null ? void 0 : _a[path[1]].inputType) != null ? _b : "Unkown" /* Unknown */;
+        }
+      } else {
+        if (!React__default.default.isValidElement(ps.children) || typeof ps.children.type === "string") {
+          inputType = "Unkown" /* Unknown */;
+        } else {
+          if (mapAntdComponentToInputType.has(ps.children.type)) {
+            inputType = (_c = mapAntdComponentToInputType.get(ps.children.type)) != null ? _c : "Unkown" /* Unknown */;
+          } else if ("__plumeType" in ps.children.type) {
+            inputType = (_d = mapPlumeTypeToInputType.get(
+              ps.children.type.__plumeType
+            )) != null ? _d : "Unkown" /* Unknown */;
+          }
+        }
+      }
+      if ([
+        "Text" /* Text */,
+        "Text Area" /* TextArea */,
+        "Password" /* Password */,
+        "Select" /* Select */,
+        "Radio Group" /* RadioGroup */
+      ].includes(inputType)) {
+        return {
+          type: "string",
+          defaultValueHint: getDefaultValueHint("initialValue")
+        };
+      } else if ("Number" /* Number */ === inputType) {
+        return {
+          type: "number",
+          defaultValueHint: getDefaultValueHint("initialValue")
+        };
+      } else if ("Checkbox" /* Checkbox */ === inputType) {
+        return {
+          type: "boolean",
+          defaultValueHint: getDefaultValueHint("initialValue")
+        };
+      } else if ("DatePicker" /* DatePicker */ === inputType) {
+        return {
+          type: "dateString",
+          defaultValueHint: getDefaultValueHint("initialValue")
+        };
+      } else {
+        return {
+          type: "exprEditor",
+          defaultValueHint: getDefaultValueHint("initialValue")
+        };
+      }
+    }
   },
   rules: {
     displayName: "Validation rules",
@@ -3542,11 +3856,113 @@ const commonFormItemProps = {
     displayName: "Field control only",
     description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
     advanced: true
+  },
+  preserve: {
+    type: "boolean",
+    advanced: true,
+    defaultValueHint: true,
+    description: "Keep field value even when field removed."
   }
-};
+});
+const commonSimplifiedFormArrayItemType = (propName) => ({
+  type: "object",
+  fields: __spreadValues$d({
+    label: {
+      type: "string",
+      defaultValueHint: getDefaultValueHint("label")
+    },
+    inputType: {
+      type: "choice",
+      options: Object.values(InputType).filter(
+        (inputType) => ![
+          "Option" /* Option */,
+          "Option Group" /* OptionGroup */,
+          "Radio" /* Radio */,
+          "Unkown" /* Unknown */
+        ].includes(inputType)
+      ),
+      defaultValue: "Text" /* Text */,
+      defaultValueHint: getDefaultValueHint("inputType")
+    },
+    options: {
+      type: "array",
+      itemType: {
+        type: "object",
+        fields: {
+          type: {
+            type: "choice",
+            options: [
+              { value: "option", label: "Option" },
+              { value: "option-group", label: "Option Group" }
+            ],
+            defaultValue: "option",
+            hidden: (ps, _ctx, { path }) => {
+              var _a, _b;
+              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
+                return true;
+              }
+              return false;
+            }
+          },
+          label: "string",
+          value: {
+            type: "string",
+            hidden: (ps, _ctx, { path, item }) => {
+              var _a, _b;
+              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
+                return false;
+              }
+              return item.type !== "option";
+            }
+          },
+          options: {
+            type: "array",
+            itemType: {
+              type: "object",
+              nameFunc: (item) => item.label || item.value,
+              fields: {
+                value: "string",
+                label: "string"
+              }
+            },
+            hidden: (ps, _ctx, { path, item }) => {
+              var _a, _b;
+              if (((_b = (_a = ps[propName]) == null ? void 0 : _a[path[1]]) == null ? void 0 : _b.inputType) !== "Select" /* Select */) {
+                return true;
+              }
+              return item.type !== "option-group";
+            }
+          }
+        },
+        nameFunc: (item) => item == null ? void 0 : item.label
+      },
+      hidden: (_ps, _ctx, { item }) => !["Select" /* Select */, "Radio Group" /* RadioGroup */].includes(item.inputType)
+    },
+    optionType: {
+      type: "choice",
+      options: [
+        { value: "default", label: "Radio" },
+        { value: "button", label: "Button" }
+      ],
+      hidden: (_ps, _ctx, { item }) => "Radio Group" /* RadioGroup */ !== item.inputType,
+      defaultValueHint: "Radio",
+      displayName: "Option Type"
+    },
+    showTime: {
+      type: "boolean",
+      displayName: "Show Time",
+      description: "To provide an additional time selection",
+      hidden: (_ps, _ctx, { item }) => !["DatePicker" /* DatePicker */].includes(item.inputType)
+    }
+  }, commonFormItemProps("simplified-form-item")),
+  nameFunc: (item) => {
+    var _a, _b;
+    return (_b = (_a = item.fieldId) != null ? _a : item.label) != null ? _b : item.name;
+  }
+});
 const formItemComponentName = "plasmic-antd5-form-item";
 function registerFormItem(loader) {
-  registerComponentHelper(loader, FormItemWrapper, __spreadValues$e({
+  registerComponentHelper(loader, FormItemWrapper, __spreadValues$d({
     name: formItemComponentName,
     displayName: "Form Field",
     parentComponentName: formComponentName,
@@ -3554,8 +3970,8 @@ function registerFormItem(loader) {
       marginBottom: "24px",
       width: "stretch"
     },
-    props: __spreadValues$e({
-      label: __spreadValues$e({
+    props: __spreadValues$d({
+      label: __spreadValues$d({
         type: "slot",
         defaultValue: {
           type: "text",
@@ -3563,14 +3979,14 @@ function registerFormItem(loader) {
         },
         hidden: (ps) => !!ps.noLabel
       }, { mergeWithParent: true }),
-      children: __spreadValues$e({
+      children: __spreadValues$d({
         type: "slot",
         defaultValue: {
           type: "component",
           name: inputComponentName
         }
       }, { mergeWithParent: true })
-    }, commonFormItemProps),
+    }, commonFormItemProps("advanced-form-item")),
     importPath: "@plasmicpkgs/antd5/skinny/registerForm",
     importName: "FormItemWrapper",
     treeLabel: (ps) => ps.name,
@@ -3738,7 +4154,7 @@ const FormListWrapper = React__default.default.forwardRef(function FormListWrapp
       }
     }, [props.initialValue, fullFormItemName]);
   }
-  return /* @__PURE__ */ React__default.default.createElement(FormList, __spreadProps$a(__spreadValues$e({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
+  return /* @__PURE__ */ React__default.default.createElement(FormList, __spreadProps$9(__spreadValues$d({}, props), { name: relativeFormItemName != null ? relativeFormItemName : [] }), (...args) => {
     operationsRef.current = args;
     return args[0].map((field, index) => /* @__PURE__ */ React__default.default.createElement(
       PathContext.Provider,
@@ -3865,33 +4281,33 @@ function registerFormList(loader) {
   });
 }
 
-var __defProp$d = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
+  if (source != null && __getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3905,7 +4321,7 @@ function AntdModal(props) {
     footer,
     modalScopeClassName,
     wrapClassName
-  } = _a, rest = __objRest$a(_a, [
+  } = _a, rest = __objRest$9(_a, [
     "onOpenChange",
     "onOk",
     "onCancel",
@@ -3936,7 +4352,7 @@ function AntdModal(props) {
   }, [onOpenChange, onCancel]);
   return /* @__PURE__ */ React__default.default.createElement(
     antd.Modal,
-    __spreadProps$9(__spreadValues$d({}, rest), {
+    __spreadProps$8(__spreadValues$c({}, rest), {
       onOk: memoOnOk,
       onCancel: memoOnCancel,
       open,
@@ -4045,30 +4461,30 @@ function registerModal(loader) {
   });
 }
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$9 = (source, exclude) => {
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
+  if (source != null && __getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4083,7 +4499,7 @@ const AntdTable = React__default.default.forwardRef(function AntdTable2(props, r
     setControlContextData,
     selectedRowKeys,
     defaultSelectedRowKeys
-  } = _a, rest = __objRest$9(_a, [
+  } = _a, rest = __objRest$8(_a, [
     "data",
     "onSelectedRowKeysChange",
     "onSelectedRowsChange",
@@ -4149,7 +4565,7 @@ const AntdTable = React__default.default.forwardRef(function AntdTable2(props, r
   );
   return /* @__PURE__ */ React__default.default.createElement(
     antd.Table,
-    __spreadValues$c({
+    __spreadValues$b({
       loading: data == null ? void 0 : data.isLoading,
       dataSource: data == null ? void 0 : data.data,
       rowSelection: selection,
@@ -4258,7 +4674,7 @@ function registerTable(loader) {
       }
     }
   });
-  registerComponentHelper(loader, AntdColumn, __spreadValues$c({
+  registerComponentHelper(loader, AntdColumn, __spreadValues$b({
     name: "plasmic-antd5-table-column",
     displayName: "Column",
     parentComponentName: "plasmic-antd5-table",
@@ -4295,7 +4711,7 @@ function registerTable(loader) {
     importPath: "@plasmicpkgs/antd5/skinny/registerTable",
     importName: "AntdColumn"
   }, { isRenderless: true }));
-  registerComponentHelper(loader, AntdColumnGroup, __spreadValues$c({
+  registerComponentHelper(loader, AntdColumnGroup, __spreadValues$b({
     name: "plasmic-antd5-table-column-group",
     displayName: "Column Group",
     parentComponentName: "plasmic-antd5-table",
@@ -4314,39 +4730,39 @@ function registerTable(loader) {
   }, { isRenderless: true }));
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
+  if (source != null && __getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function UploadWrapper(props) {
-  const _a = props, { files, onFilesChange } = _a, rest = __objRest$8(_a, ["files", "onFilesChange"]);
+  const _a = props, { files, onFilesChange } = _a, rest = __objRest$7(_a, ["files", "onFilesChange"]);
   const handleChange = (info) => {
     const { file } = info;
     if (file.status === "removed") {
@@ -4361,7 +4777,7 @@ function UploadWrapper(props) {
     };
     onFilesChange == null ? void 0 : onFilesChange([
       ...files,
-      __spreadProps$8(__spreadValues$b({}, metadata), {
+      __spreadProps$7(__spreadValues$a({}, metadata), {
         status: "uploading"
       })
     ]);
@@ -4369,7 +4785,7 @@ function UploadWrapper(props) {
     reader.onload = () => {
       onFilesChange == null ? void 0 : onFilesChange([
         ...files.filter((f) => f.uid !== file.uid),
-        __spreadProps$8(__spreadValues$b({}, metadata), {
+        __spreadProps$7(__spreadValues$a({}, metadata), {
           contents: reader.result.replace(
             /^data:[^;]+;base64,/,
             ""
@@ -4381,7 +4797,7 @@ function UploadWrapper(props) {
     reader.onerror = (error) => {
       onFilesChange == null ? void 0 : onFilesChange([
         ...files.filter((f) => f.uid !== file.uid),
-        __spreadProps$8(__spreadValues$b({}, metadata), {
+        __spreadProps$7(__spreadValues$a({}, metadata), {
           status: "error"
         })
       ]);
@@ -4393,7 +4809,7 @@ function UploadWrapper(props) {
   };
   return /* @__PURE__ */ React__default.default.createElement(
     antd.Upload,
-    __spreadProps$8(__spreadValues$b({}, rest), {
+    __spreadProps$7(__spreadValues$a({}, rest), {
       fileList: files,
       beforeUpload: () => {
         return false;
@@ -4412,7 +4828,7 @@ UploadWrapper.__plasmicFormFieldMeta = {
   onChangePropName: "onFilesChange"
 };
 function registerUpload(loader) {
-  registerComponentHelper(loader, UploadWrapper, __spreadProps$8(__spreadValues$b({
+  registerComponentHelper(loader, UploadWrapper, __spreadProps$7(__spreadValues$a({
     name: "plasmic-antd5-upload",
     displayName: "Upload",
     props: {
@@ -4499,209 +4915,6 @@ function registerUpload(loader) {
   }));
 }
 
-var __defProp$a = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$7 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function AntdDatePicker(props) {
-  const nativeInput = React__default.default.useRef(null);
-  const [open, setOpen] = React.useState(false);
-  const strValue = props.value && !(typeof props.value === "string") && "toISOString" in props.value ? props.value.toISOString() : props.value === null ? void 0 : props.value;
-  const _a = props, { picker, popupScopeClassName } = _a, rest = __objRest$7(_a, ["picker", "popupScopeClassName"]);
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
-    antd.DatePicker,
-    __spreadProps$7(__spreadValues$a({}, rest), {
-      picker,
-      value: props.value === void 0 ? void 0 : !props.value ? null : dayjs__default.default(props.value),
-      defaultValue: props.defaultValue === void 0 ? void 0 : dayjs__default.default(props.defaultValue),
-      popupClassName: popupScopeClassName,
-      onChange: (value, _dateString) => {
-        var _a2;
-        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value !== null ? value.toISOString() : null);
-      },
-      open,
-      onOpenChange: (_open) => {
-        if (_open && window.innerWidth < 500) {
-          nativeInput.current.showPicker();
-        } else {
-          setOpen(_open);
-        }
-      }
-    })
-  ), /* @__PURE__ */ React__default.default.createElement(
-    "input",
-    {
-      hidden: true,
-      ref: nativeInput,
-      type: props.showTime ? "datetime-local" : "date",
-      value: strValue || "",
-      onChange: (e) => {
-        props.onChange(e.target.value);
-      }
-    }
-  ));
-}
-const datePickerComponentName = "plasmic-antd5-date-picker";
-function registerDatePicker(loader) {
-  registerComponentHelper(loader, AntdDatePicker, {
-    name: datePickerComponentName,
-    displayName: "Date/Time Picker",
-    props: {
-      value: {
-        type: "string",
-        editOnly: true,
-        uncontrolledProp: "defaultValue",
-        description: "The current date/time as an ISO string, Date object, or dayjs object",
-        hidden: (ps) => !!ps.__plasmicFormField
-      },
-      disabled: {
-        type: "boolean",
-        defaultValueHint: false
-      },
-      autoFocus: {
-        type: "boolean",
-        description: "Focus when component is rendered",
-        defaultValueHint: false,
-        advanced: true
-      },
-      onChange: {
-        type: "eventHandler",
-        argTypes: [{ name: "value", type: "string" }]
-      },
-      picker: {
-        type: "choice",
-        options: ["date", "week", "month", "quarter", "year"].map((value) => ({
-          value,
-          label: capitalize(value)
-        })),
-        defaultValueHint: "date"
-      },
-      popupScopeClassName: {
-        type: "styleScopeClass",
-        scopeName: "datePickerPopup"
-      },
-      popupClassName: {
-        type: "class",
-        displayName: "Popup container",
-        selectors: [
-          {
-            selector: ":datePickerPopup .ant-picker-panel-container",
-            label: "Base"
-          }
-        ]
-      },
-      popupHeaderClassName: {
-        type: "class",
-        displayName: "Popup header",
-        selectors: [
-          {
-            selector: ":datePickerPopup .ant-picker-header",
-            label: "Base"
-          }
-        ]
-      },
-      popupBodyClassName: {
-        type: "class",
-        displayName: "Popup body",
-        selectors: [
-          {
-            selector: ":datePickerPopup .ant-picker-body",
-            label: "Base"
-          }
-        ]
-      },
-      popupFooterClassName: {
-        type: "class",
-        displayName: "Popup footer",
-        selectors: [
-          {
-            selector: ":datePickerPopup .ant-picker-footer",
-            label: "Base"
-          }
-        ]
-      },
-      showTime: {
-        type: "boolean",
-        description: "Enable time selection"
-      },
-      bordered: {
-        type: "boolean",
-        advanced: true
-      },
-      // TODO - see how it works with plasmic-rich-components
-      // format: {
-      //   advanced: true
-      // },
-      showNow: {
-        type: "boolean",
-        advanced: true,
-        description: 'Whether to show the "Now" button',
-        defaultValueHint: true,
-        hidden: (ps) => !ps.showTime
-      },
-      showToday: {
-        type: "boolean",
-        advanced: true,
-        description: 'Whether to show the "Today" button',
-        defaultValueHint: true,
-        hidden: (ps) => ps.showTime
-      },
-      // disabledDate: {
-      //   type: "function",
-      //   advanced: true,
-      //   description: "Dates to disable",
-      // },
-      // disabledTime: {
-      //   type: "function",
-      //   advanced: true,
-      //   description: "Times to disable",
-      // },
-      allowClear: {
-        type: "boolean",
-        advanced: true,
-        description: "Whether to show the clear button"
-      }
-    },
-    states: {
-      value: {
-        type: "writable",
-        valueProp: "value",
-        onChangeProp: "onChange",
-        variableType: "text"
-      }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerDatePicker",
-    importName: "AntdDatePicker"
-  });
-}
-
 var __defProp$9 = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;