@plasmicpkgs/antd5 0.0.29 → 0.0.30

package/dist/antd.esm.js

@@ -3,7 +3,7 @@ import registerComponent from '@plasmicapp/host/registerComponent';
 import registerGlobalContext from '@plasmicapp/host/registerGlobalContext';
 import Checkbox from 'antd/es/checkbox';
 import CheckboxGroup from 'antd/es/checkbox/Group';
-import React from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import { GlobalActionsProvider, usePlasmicCanvasContext, DataProvider, repeatedElement } from '@plasmicapp/host';
 import registerToken from '@plasmicapp/host/registerToken';
 import { addLoadingStateListener } from '@plasmicapp/query';
@@ -14,10 +14,11 @@ import useNotification from 'antd/es/notification/useNotification';
 import theme from 'antd/es/theme';
 import Dropdown from 'antd/es/dropdown';
 import Menu from 'antd/es/menu';
-import Form from 'antd/lib/form';
-import FormItem from 'antd/lib/form/FormItem';
-import FormList from 'antd/lib/form/FormList';
+import Form from 'antd/es/form';
+import FormItem from 'antd/es/form/FormItem';
+import FormList from 'antd/es/form/FormList';
 import equal from 'fast-deep-equal';
+import classNames from 'classnames';
 import Input from 'antd/es/input';
 import InputNumber from 'antd/es/input-number';
 import Modal from 'antd/es/modal';
@@ -139,6 +140,10 @@ function registerButton(loader) {
       icon: {
         type: "slot",
         hidePlaceholder: true
+      },
+      onClick: {
+        type: "eventHandler",
+        argTypes: []
       }
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerButton",
@@ -146,39 +151,39 @@ function registerButton(loader) {
   });
 }
 
-var __defProp$7 = Object.defineProperty;
+var __defProp$8 = Object.defineProperty;
 var __defProps$7 = Object.defineProperties;
 var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$5 = (source, exclude) => {
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
+  if (source != null && __getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function AntdCheckbox(props) {
-  const _a = props, { onChange } = _a, rest = __objRest$5(_a, ["onChange"]);
+  const _a = props, { onChange } = _a, rest = __objRest$6(_a, ["onChange"]);
   const wrappedOnChange = React.useMemo(() => {
     if (onChange) {
       return (event) => onChange(event.target.checked);
@@ -186,7 +191,7 @@ function AntdCheckbox(props) {
       return void 0;
     }
   }, [onChange]);
-  return /* @__PURE__ */ React.createElement(Checkbox, __spreadProps$7(__spreadValues$7({}, rest), {
+  return /* @__PURE__ */ React.createElement(Checkbox, __spreadProps$7(__spreadValues$8({}, rest), {
     onChange: wrappedOnChange
   }));
 }
@@ -297,33 +302,33 @@ function registerCheckbox(loader) {
   });
 }
 
-var __defProp$6 = Object.defineProperty;
+var __defProp$7 = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$4 = (source, exclude) => {
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
+  if (source != null && __getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -345,7 +350,7 @@ function themeToAntdConfig(opts) {
     wireframe,
     spacing
   } = opts;
-  return __spreadProps$6(__spreadValues$6({}, spacing && { size: spacing }), {
+  return __spreadProps$6(__spreadValues$7({}, spacing && { size: spacing }), {
     theme: {
       token: Object.fromEntries(Object.entries({
         colorTextBase,
@@ -366,10 +371,10 @@ function themeToAntdConfig(opts) {
   });
 }
 function AntdConfigProvider(props) {
-  const _a = props, { children, themeStyles } = _a, rest = __objRest$4(_a, ["children", "themeStyles"]);
-  return /* @__PURE__ */ React.createElement(ConfigProvider, __spreadValues$6({
+  const _a = props, { children, themeStyles } = _a, rest = __objRest$5(_a, ["children", "themeStyles"]);
+  return /* @__PURE__ */ React.createElement(ConfigProvider, __spreadValues$7({
     locale: enUS
-  }, themeToAntdConfig(__spreadProps$6(__spreadValues$6({}, rest), {
+  }, themeToAntdConfig(__spreadProps$6(__spreadValues$7({}, rest), {
     fontFamily: themeStyles.fontFamily,
     fontSize: themeStyles.fontSize ? parseInt(themeStyles.fontSize) : void 0,
     lineHeight: themeStyles.lineHeight ? parseInt(themeStyles.lineHeight) : void 0,
@@ -389,8 +394,8 @@ function InnerConfigProvider(props) {
   const actions = React.useMemo(() => ({
     showNotification: (opts) => {
       var _b;
-      const _a = opts, rest = __objRest$4(_a, ["type"]);
-      app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$6({}, rest));
+      const _a = opts, rest = __objRest$5(_a, ["type"]);
+      app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$7({}, rest));
     },
     hideNotifications: () => {
       app.notification.destroy();
@@ -459,7 +464,8 @@ function registerTokens(loader) {
     const colorIndex = name.indexOf("color");
     const humanName = makeNiceName(colorIndex >= 0 ? name.substring(name.indexOf("color") + "color".length) : name);
     return {
-      name: `Sys: ${humanName}`,
+      name,
+      displayName: `System: ${humanName}`,
       value: `var(--antd-${name})`,
       type: "color"
     };
@@ -646,7 +652,7 @@ function registerTokens(loader) {
     regs.forEach((t) => registerToken(t));
   }
 }
-const registerConfigProvider = makeRegisterGlobalContext(AntdConfigProvider, __spreadProps$6(__spreadValues$6({
+const registerConfigProvider = makeRegisterGlobalContext(AntdConfigProvider, __spreadProps$6(__spreadValues$7({
   name: "plasmic-antd5-config-provider",
   displayName: "Ant Design System Settings",
   props: {
@@ -751,40 +757,40 @@ const registerConfigProvider = makeRegisterGlobalContext(AntdConfigProvider, __s
   importName: "AntdConfigProvider"
 }));
 
-var __defProp$5 = Object.defineProperty;
+var __defProp$6 = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
 var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$3 = (source, exclude) => {
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
+  if (source != null && __getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 function AntdDropdown(props) {
-  const _a = props, { children, onAction, menuItems } = _a, rest = __objRest$3(_a, ["children", "onAction", "menuItems"]);
-  return /* @__PURE__ */ React.createElement(Dropdown, __spreadProps$5(__spreadValues$5({}, rest), {
+  const _a = props, { children, onAction, menuItems } = _a, rest = __objRest$4(_a, ["children", "onAction", "menuItems"]);
+  return /* @__PURE__ */ React.createElement(Dropdown, __spreadProps$5(__spreadValues$6({}, rest), {
     overlay: () => {
       var _a2;
       const items = (_a2 = menuItems == null ? void 0 : menuItems()) != null ? _a2 : [];
@@ -888,6 +894,87 @@ function registerDropdown(loader) {
   });
 }
 
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+const isBrowser = typeof window !== "undefined";
+const NONE = Symbol("NONE");
+isBrowser ? React.useLayoutEffect : React.useEffect;
+function mergeProps(props, ...restProps) {
+  if (restProps.every((rest) => Object.keys(rest).length === 0)) {
+    return props;
+  }
+  const result = __spreadValues$5({}, props);
+  for (const rest of restProps) {
+    for (const key of Object.keys(rest)) {
+      result[key] = mergePropVals(key, result[key], rest[key]);
+    }
+  }
+  return result;
+}
+function updateRef(ref, value) {
+  if (!ref) {
+    return;
+  }
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    if (!Object.isFrozen(ref)) {
+      ref.current = value;
+    }
+  }
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      updateRef(ref, value);
+    }
+  };
+}
+function mergePropVals(name, val1, val2) {
+  if (val1 === NONE || val2 === NONE) {
+    return null;
+  } else if (val1 == null) {
+    return val2;
+  } else if (val2 == null) {
+    return val1;
+  } else if (name === "className") {
+    return classNames(val1, val2);
+  } else if (name === "style") {
+    return __spreadValues$5(__spreadValues$5({}, val1), val2);
+  } else if (name === "ref") {
+    return mergeRefs(val1, val2);
+  } else if (typeof val1 !== typeof val2) {
+    return val2;
+  } else if (name.startsWith("on") && typeof val1 === "function") {
+    return (...args) => {
+      let res;
+      if (typeof val1 === "function") {
+        res = val1(...args);
+      }
+      if (typeof val2 === "function") {
+        res = val2(...args);
+      }
+      return res;
+    };
+  } else {
+    return val2;
+  }
+}
+
 var __defProp$4 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
@@ -907,18 +994,31 @@ var __spreadValues$4 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __objRest$3 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const PathContext = React.createContext({ relativePath: [], fullPath: [] });
 const InternalFormInstanceContext = React.createContext(void 0);
 const Internal = (props) => {
+  var _a, _b;
   const [form] = Form.useForm();
   const values = form.getFieldsValue(true);
   const lastValue = React.useRef(values);
   const childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
   const fireOnValuesChange = () => {
-    var _a;
+    var _a2;
     const values2 = form.getFieldsValue(true);
     if (!equal(values2, lastValue.current)) {
-      (_a = props.extendedOnValuesChange) == null ? void 0 : _a.call(props, values2);
+      (_a2 = props.extendedOnValuesChange) == null ? void 0 : _a2.call(props, values2);
       lastValue.current = values2;
     }
   };
@@ -928,15 +1028,18 @@ const Internal = (props) => {
   return /* @__PURE__ */ React.createElement(InternalFormInstanceContext.Provider, {
     value: {
       fireOnValuesChange,
-      forceRemount: () => props.setRemountKey((k) => k + 1)
+      forceRemount: () => props.setRemountKey((k) => k + 1),
+      formProps: props
     }
   }, /* @__PURE__ */ React.createElement(Form, __spreadProps$4(__spreadValues$4({}, props), {
     onValuesChange: (...args) => {
-      var _a, _b;
-      (_a = props.onValuesChange) == null ? void 0 : _a.call(props, ...args);
-      (_b = props.extendedOnValuesChange) == null ? void 0 : _b.call(props, args[1]);
+      var _a2, _b2;
+      (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
+      (_b2 = props.extendedOnValuesChange) == null ? void 0 : _b2.call(props, args[1]);
     },
-    form
+    form,
+    labelCol: ((_a = props.labelCol) == null ? void 0 : _a.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
+    wrapperCol: ((_b = props.wrapperCol) == null ? void 0 : _b.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
   }), childrenNode));
 };
 function FormWrapper(props) {
@@ -950,7 +1053,7 @@ function FormWrapper(props) {
 const COMMON_ACTIONS = [
   {
     type: "button-action",
-    label: "Append new Form.Item",
+    label: "Append new Form Item",
     onClick: ({ studioOps }) => {
       studioOps.appendToSlot({
         type: "component",
@@ -960,7 +1063,7 @@ const COMMON_ACTIONS = [
   },
   {
     type: "button-action",
-    label: "Append new Form.Group",
+    label: "Append new Form Group",
     onClick: ({ studioOps }) => {
       studioOps.appendToSlot({
         type: "component",
@@ -970,7 +1073,7 @@ const COMMON_ACTIONS = [
   },
   {
     type: "button-action",
-    label: "Append new Form.List",
+    label: "Append new Form List",
     onClick: ({ studioOps }) => {
       studioOps.appendToSlot({
         type: "component",
@@ -980,6 +1083,33 @@ const COMMON_ACTIONS = [
   }
 ];
 function registerForm(loader) {
+  const colProp = (displayName, defaultValue) => ({
+    type: "object",
+    displayName,
+    advanced: true,
+    fields: {
+      span: {
+        type: "number",
+        displayName: "Grid columns",
+        description: "The number of grid columns to span (24 columns available)",
+        min: 1,
+        max: 24
+      },
+      offset: {
+        type: "number",
+        displayName: "Offset columns",
+        description: "Number of grid columns to skip from the left",
+        min: 0,
+        max: 23
+      },
+      horizontalOnly: {
+        type: "boolean",
+        displayName: "Horizontal only",
+        description: "Only apply to horizontal layout"
+      }
+    },
+    defaultValue
+  });
   registerComponentHelper(loader, FormWrapper, {
     name: "plasmic-antd5-form",
     displayName: "Form",
@@ -989,11 +1119,33 @@ function registerForm(loader) {
         defaultValue: [
           {
             type: "component",
-            name: "plasmic-antd5-form-item"
+            name: "plasmic-antd5-form-item",
+            props: {
+              label: {
+                type: "text",
+                value: "Name"
+              },
+              name: "name",
+              children: {
+                type: "component",
+                name: "plasmic-antd5-input"
+              }
+            }
           },
           {
             type: "component",
-            name: "plasmic-antd5-form-item"
+            name: "plasmic-antd5-form-item",
+            props: {
+              label: {
+                type: "text",
+                value: "Message"
+              },
+              name: "message",
+              children: {
+                type: "component",
+                name: "plasmic-antd5-textarea"
+              }
+            }
           },
           {
             type: "default-component",
@@ -1015,21 +1167,51 @@ function registerForm(loader) {
       layout: {
         type: "choice",
         options: ["horizontal", "vertical", "inline"],
-        defaultValue: "horizontal"
+        defaultValue: "vertical"
+      },
+      labelAlign: {
+        type: "choice",
+        options: ["left", "right"],
+        defaultValueHint: "right",
+        advanced: true
       },
+      labelCol: colProp("Label layout", {
+        span: 8,
+        horizontalOnly: true
+      }),
+      wrapperCol: colProp("Field layout", {
+        span: 16,
+        horizontalOnly: true
+      }),
       colon: {
         type: "boolean",
-        description: `Configure the default value of colon for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal)`,
-        defaultValue: true,
+        description: `Show a colon after the label by default (only for horizontal layout)`,
+        defaultValueHint: true,
         advanced: true
       },
       requiredMark: {
-        displayName: "Show required fields?",
-        type: "boolean",
-        advanced: true
+        displayName: "Required/optional mark",
+        type: "choice",
+        options: [
+          {
+            value: "optional",
+            label: "Indicate optional fields"
+          },
+          {
+            value: true,
+            label: "Indicate required fields with asterisk"
+          },
+          {
+            value: false,
+            label: "Show no indicators"
+          }
+        ],
+        advanced: true,
+        defaultValueHint: true
       },
       extendedOnValuesChange: {
         type: "eventHandler",
+        displayName: "On values change",
         argTypes: [
           {
             name: "changedValues",
@@ -1043,6 +1225,7 @@ function registerForm(loader) {
       },
       onFinish: {
         type: "eventHandler",
+        displayName: "On submit",
         argTypes: [
           {
             name: "values",
@@ -1052,6 +1235,7 @@ function registerForm(loader) {
       },
       onFinishFailed: {
         type: "eventHandler",
+        displayName: "On invalid submit",
         argTypes: [
           {
             name: "data",
@@ -1061,9 +1245,9 @@ function registerForm(loader) {
       },
       validateTrigger: {
         type: "choice",
-        options: ["onSubmit", "onChange"],
+        options: ["onSubmit", "onChange", "onBlur"],
         multiSelect: true,
-        defaultValue: ["onChange"],
+        defaultValueHint: ["onChange"],
         advanced: true
       }
     },
@@ -1131,40 +1315,68 @@ const useFormItemFullName = (name) => {
   const pathCtx = React.useContext(PathContext);
   return typeof name === "object" ? [...pathCtx.fullPath, ...name] : typeof name === "string" ? [...pathCtx.fullPath, name] : void 0;
 };
+function useFormInstanceMaybe() {
+  return Form.useFormInstance();
+}
 function FormItemWrapper(props) {
-  var _a;
+  var _a, _b;
   const relativeFormItemName = useFormItemRelativeName(props.name);
   const fullFormItemName = useFormItemFullName(props.name);
   const rules = props.rules ? plasmicRulesToAntdRules(props.rules) : void 0;
   const inCanvas = !!usePlasmicCanvasContext();
   if (inCanvas) {
-    const form = Form.useFormInstance();
+    const form = useFormInstanceMaybe();
     const prevPropValues = React.useRef({
       initialValue: props.initialValue,
       name: props.name
     });
-    const { fireOnValuesChange, forceRemount } = (_a = React.useContext(InternalFormInstanceContext)) != null ? _a : {};
+    const internalFormCtx = React.useContext(InternalFormInstanceContext);
+    const { fireOnValuesChange, forceRemount } = internalFormCtx != null ? internalFormCtx : {};
+    (_a = props.setControlContextData) == null ? void 0 : _a.call(props, {
+      internalFormCtx
+    });
     React.useEffect(() => {
       if (prevPropValues.current.name !== props.name) {
         forceRemount == null ? void 0 : forceRemount();
       }
-      if (!fullFormItemName || form.getFieldValue(fullFormItemName) !== prevPropValues.current.initialValue) {
+      if (!fullFormItemName || (form == null ? void 0 : form.getFieldValue(fullFormItemName)) !== prevPropValues.current.initialValue) {
         return;
       }
-      form.setFieldValue(fullFormItemName, props.initialValue);
+      form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
       prevPropValues.current.initialValue = props.initialValue;
       fireOnValuesChange == null ? void 0 : fireOnValuesChange();
-    }, [props.initialValue, fullFormItemName]);
+    }, [form, props.initialValue, fullFormItemName]);
   }
-  return /* @__PURE__ */ React.createElement(FormItem, __spreadProps$4(__spreadValues$4({}, omit(props, "rules")), {
+  return /* @__PURE__ */ React.createElement(FormItem, __spreadValues$4(__spreadProps$4(__spreadValues$4({}, omit(props, "rules")), {
+    label: props.noLabel ? void 0 : props.label,
     name: relativeFormItemName,
     rules
-  }));
+  }), props.helpTextMode === "extra" ? { extra: props.help } : props.helpTextMode === "help" ? { help: (_b = props.help) != null ? _b : "" } : {}), props.customizeProps ? /* @__PURE__ */ React.createElement(FormItemForwarder, {
+    formItemProps: props
+  }) : props.children);
+}
+function FormItemForwarder(_a) {
+  var _b = _a, { formItemProps } = _b, props = __objRest$3(_b, ["formItemProps"]);
+  var _a2;
+  const status = Form.Item.useStatus();
+  const internalFormCtx = React.useContext(InternalFormInstanceContext);
+  const data = {
+    status: status.status
+  };
+  (_a2 = props.setControlContextData) == null ? void 0 : _a2.call(props, {
+    internalFormCtx,
+    status
+  });
+  return React.Children.map(formItemProps.children, (child, i) => {
+    var _a3;
+    const baseProps = __spreadValues$4(__spreadValues$4({}, (_a3 = child.props) != null ? _a3 : {}), props);
+    return i === 0 && isValidElement(child) ? cloneElement(child, mergeProps(baseProps, formItemProps.customizeProps(data, baseProps))) : child;
+  });
 }
 function registerFormItem(loader) {
   registerComponentHelper(loader, FormItemWrapper, {
     name: "plasmic-antd5-form-item",
-    displayName: "Form.Item",
+    displayName: "Form Item",
     parentComponentName: "plasmic-antd5-form",
     props: {
       label: {
@@ -1191,12 +1403,18 @@ function registerFormItem(loader) {
         type: "boolean"
       },
       rules: {
-        type: "formValidationRules",
-        displayName: "rules"
+        type: "formValidationRules"
+      },
+      noLabel: {
+        type: "boolean",
+        advanced: true
       },
       colon: {
         type: "boolean",
-        defaultValue: false,
+        defaultValueHint: (_ps, ctx) => {
+          var _a, _b;
+          return (_b = (_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.formProps.colon) != null ? _b : true;
+        },
         advanced: true
       },
       labelAlign: {
@@ -1207,6 +1425,66 @@ function registerFormItem(loader) {
       hidden: {
         type: "boolean",
         advanced: true
+      },
+      validateTrigger: {
+        type: "choice",
+        options: ["onSubmit", "onChange", "onBlur"],
+        multiSelect: true,
+        advanced: true
+      },
+      shouldUpdate: {
+        type: "boolean",
+        advanced: true,
+        displayName: "Always re-render",
+        description: "Form items normally only re-render when the corresponding form value changes, for performance. This forces it to always re-render."
+      },
+      helpTextMode: {
+        type: "choice",
+        displayName: "Help text",
+        options: [
+          {
+            value: "errors",
+            label: "Validation errors"
+          },
+          {
+            value: "extra",
+            label: "Custom help text and validation errors"
+          },
+          {
+            value: "help",
+            label: "Custom help text, no validation errors"
+          }
+        ],
+        defaultValueHint: "Show validation errors",
+        description: "What to show in the help text. Edit help text by editing the 'help' slot in the outline."
+      },
+      help: {
+        type: "slot",
+        hidden: (ps) => {
+          var _a;
+          return !["extra", "help"].includes((_a = ps.helpTextMode) != null ? _a : "");
+        },
+        hidePlaceholder: true
+      },
+      customizeProps: {
+        type: "function",
+        description: "Customize the props passed into the wrapped field component. Takes the current status ('success', 'warning', 'error', or 'validating').)",
+        argNames: ["fieldData"],
+        argValues: (_ps, ctx) => {
+          var _a;
+          return [
+            {
+              status: (_a = ctx == null ? void 0 : ctx.status) == null ? void 0 : _a.status
+            }
+          ];
+        },
+        advanced: true
+      },
+      noStyle: {
+        type: "boolean",
+        displayName: "Field only",
+        description: "Don't render anything but the wrapped field component - so no label, help text, validation error, etc.",
+        advanced: true
       }
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerForm",
@@ -1225,7 +1503,7 @@ function FormGroup(props) {
 function registerFormGroup(loader) {
   registerComponentHelper(loader, FormGroup, {
     name: "plasmic-antd5-form-group",
-    displayName: "Form.Group",
+    displayName: "Form Group",
     parentComponentName: "plasmic-antd5-form",
     actions: COMMON_ACTIONS,
     props: {
@@ -1267,7 +1545,7 @@ const FormListWrapper = React.forwardRef(function FormListWrapper2(props, ref) {
   }), [operationsRef]);
   const inCanvas = !!usePlasmicCanvasContext();
   if (inCanvas) {
-    const form = Form.useFormInstance();
+    const form = useFormInstanceMaybe();
     const prevPropValues = React.useRef({
       initialValue: props.initialValue,
       name: props.name
@@ -1278,7 +1556,7 @@ const FormListWrapper = React.forwardRef(function FormListWrapper2(props, ref) {
         forceRemount == null ? void 0 : forceRemount();
       }
       if (fullFormItemName) {
-        form.setFieldValue(fullFormItemName, props.initialValue);
+        form == null ? void 0 : form.setFieldValue(fullFormItemName, props.initialValue);
         prevPropValues.current.initialValue = props.initialValue;
         fireOnValuesChange == null ? void 0 : fireOnValuesChange();
       }
@@ -1306,33 +1584,63 @@ function registerFormList(loader) {
   registerComponentHelper(loader, FormListWrapper, {
     name: "plasmic-antd5-form-list",
     parentComponentName: "plasmic-antd5-form",
-    displayName: "Form.List",
+    displayName: "Form List",
     actions: COMMON_ACTIONS,
     props: {
       children: {
         type: "slot",
         defaultValue: [
           {
-            type: "component",
-            name: "plasmic-antd5-form-item",
-            props: {
-              name: "item"
-            }
+            type: "hbox",
+            children: [
+              {
+                type: "component",
+                name: "plasmic-antd5-form-item",
+                props: {
+                  name: "firstName",
+                  label: {
+                    type: "text",
+                    value: "First name"
+                  },
+                  children: {
+                    type: "component",
+                    name: "plasmic-antd5-input"
+                  }
+                }
+              },
+              {
+                type: "component",
+                name: "plasmic-antd5-form-item",
+                props: {
+                  name: "lastName",
+                  label: {
+                    type: "text",
+                    value: "Last name"
+                  },
+                  children: {
+                    type: "component",
+                    name: "plasmic-antd5-input"
+                  }
+                }
+              }
+            ]
           }
         ]
       },
       name: {
         type: "string",
-        defaultValue: "list"
+        defaultValue: "guests"
       },
       initialValue: {
-        type: "object",
+        type: "array",
         defaultValue: [
           {
-            item: "Item 1"
+            firstName: "Jane",
+            lastName: "Doe"
           },
           {
-            item: "Item 2"
+            firstName: "John",
+            lastName: "Smith"
           }
         ]
       }
@@ -1629,6 +1937,12 @@ const AntdMenuDivider = Menu.Divider;
 const AntdMenuItem = Menu.Item;
 const AntdMenuItemGroup = Menu.ItemGroup;
 const AntdSubMenu = Menu.SubMenu;
+const allowedMenuComponents = [
+  "plasmic-antd5-menu-item",
+  "plasmic-antd5-menu-divider",
+  "plasmic-antd5-submenu",
+  "plasmic-antd5-menu-item-group"
+];
 function registerMenu(loader) {
   registerComponentHelper(loader, AntdMenu, {
     name: "plasmic-antd5-menu",
@@ -1658,20 +1972,21 @@ function registerMenu(loader) {
       },
       children: {
         type: "slot",
-        allowedComponents: [
-          "plasmic-antd5-menu-item",
-          "plasmic-antd5-menu-divider",
-          "plasmic-antd5-submenu",
-          "plasmic-antd5-menu-group"
-        ],
+        allowedComponents: allowedMenuComponents,
         defaultValue: [
           {
             type: "component",
-            name: "plasmic-antd5-menu-item"
+            name: "plasmic-antd5-menu-item",
+            props: {
+              key: "menuItemKey1"
+            }
           },
           {
             type: "component",
-            name: "plasmic-antd5-menu-item"
+            name: "plasmic-antd5-menu-item",
+            props: {
+              key: "menuItemKey2"
+            }
           }
         ]
       },
@@ -1699,7 +2014,8 @@ function registerMenu(loader) {
       },
       key: {
         type: "string",
-        description: "Unique ID of the menu item",
+        displayName: "Unique key",
+        description: "Unique ID of the menu item. Used to determine which item is selected.",
         defaultValue: "menuItemKey"
       },
       title: {
@@ -1711,9 +2027,13 @@ function registerMenu(loader) {
         defaultValue: [
           {
             type: "text",
-            value: "Option"
+            value: "Menu item"
           }
         ]
+      },
+      onClick: {
+        type: "eventHandler",
+        argTypes: []
       }
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
@@ -1735,12 +2055,7 @@ function registerMenu(loader) {
       },
       children: {
         type: "slot",
-        allowedComponents: [
-          "plasmic-antd5-menu-item",
-          "plasmic-antd5-menu-divider",
-          "plasmic-antd5-menu-item-group",
-          "plasmic-antd5-submenu"
-        ],
+        allowedComponents: allowedMenuComponents,
         defaultValue: [
           {
             type: "component",
@@ -1778,7 +2093,8 @@ function registerMenu(loader) {
       },
       key: {
         type: "string",
-        description: "Unique ID of the sub-menu",
+        displayName: "Unique key",
+        description: "Unique ID of the sub-menu. Used to determine which item is selected.",
         advanced: true
       },
       title: {
@@ -1792,12 +2108,7 @@ function registerMenu(loader) {
       },
       children: {
         type: "slot",
-        allowedComponents: [
-          "plasmic-antd5-menu-item",
-          "plasmic-antd5-menu-divider",
-          "plasmic-antd5-menu-item-group",
-          "plasmic-antd5-submenu"
-        ],
+        allowedComponents: allowedMenuComponents,
         defaultValue: [1, 2].map((i) => ({
           type: "component",
           name: "plasmic-antd5-menu-item",
@@ -2165,21 +2476,28 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const AntdOption = Select.Option;
+const AntdOptionGroup = Select.OptGroup;
 function AntdSelect(props) {
   const _a = props, {
     popupClassName,
     popupScopeClassName,
     defaultStylesClassName,
     suffixIcon,
-    mode
+    mode,
+    useChildren
   } = _a, rest = __objRest(_a, [
     "popupClassName",
     "popupScopeClassName",
     "defaultStylesClassName",
     "suffixIcon",
-    "mode"
+    "mode",
+    "useChildren"
   ]);
-  return /* @__PURE__ */ React.createElement(Select, __spreadValues(__spreadProps(__spreadValues({}, rest), {
+  const curated = __spreadValues({}, rest);
+  if (useChildren) {
+    curated.options = void 0;
+  }
+  return /* @__PURE__ */ React.createElement(Select, __spreadValues(__spreadProps(__spreadValues({}, curated), {
     mode: !mode || mode === "single" ? void 0 : mode,
     popupClassName: `${defaultStylesClassName} ${popupScopeClassName} ${popupClassName}`
   }), suffixIcon && { suffixIcon }));
@@ -2189,9 +2507,41 @@ function registerSelect(loader) {
     name: "plasmic-antd5-select",
     displayName: "Select",
     props: {
+      options: {
+        type: "array",
+        hidden: (ps) => !!ps.useChildren,
+        itemType: {
+          type: "object",
+          nameFunc: (item) => item.label,
+          fields: {
+            value: "string",
+            label: "string"
+          }
+        },
+        defaultValue: [
+          {
+            value: "option1",
+            label: "Option 1"
+          },
+          {
+            value: "option2",
+            label: "Option 2"
+          }
+        ]
+      },
+      useChildren: {
+        displayName: "Use slot",
+        type: "boolean",
+        defaultValueHint: false,
+        description: "Instead of configuring a list of options, customize the contents of the Select by dragging and dropping options in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Options, and also use Option Groups."
+      },
       children: {
         type: "slot",
-        allowedComponents: ["AntdOption"]
+        allowedComponents: [
+          "plasmic-antd5-option",
+          "plasmic-antd5-option-group"
+        ],
+        hidden: (ps) => !ps.useChildren
       },
       placeholder: {
         type: "slot",
@@ -2214,13 +2564,24 @@ function registerSelect(loader) {
         description: "Initial selected option",
         multiSelect: (ps) => ps.mode === "multiple",
         options: (ps) => {
+          var _a;
           const options = /* @__PURE__ */ new Set();
-          traverseReactEltTree(ps.children, (elt) => {
-            var _a;
-            if ((elt == null ? void 0 : elt.type) === Select.Option && typeof ((_a = elt == null ? void 0 : elt.props) == null ? void 0 : _a.value) === "string") {
-              options.add(elt.props.value);
-            }
-          });
+          if (!ps.useChildren) {
+            return ((_a = ps.options) != null ? _a : []).map((o) => {
+              var _a2;
+              return {
+                value: o.value || "",
+                label: (_a2 = o.label) != null ? _a2 : o.value || ""
+              };
+            });
+          } else {
+            traverseReactEltTree(ps.children, (elt) => {
+              var _a2;
+              if ((elt == null ? void 0 : elt.type) === Select.Option && typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
+                options.add(elt.props.value);
+              }
+            });
+          }
           return Array.from(options.keys());
         }
       },
@@ -2363,6 +2724,46 @@ function registerSelect(loader) {
     importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
     importName: "AntdOption"
   });
+  registerComponentHelper(loader, AntdOptionGroup, {
+    name: "plasmic-antd5-option-group",
+    displayName: "Option Group",
+    parentComponentName: "plasmic-antd5-select",
+    props: {
+      children: {
+        type: "slot",
+        defaultValue: [
+          {
+            type: "component",
+            name: "plasmic-antd5-option",
+            props: {
+              value: "option1",
+              children: {
+                type: "text",
+                value: "Option 1"
+              }
+            }
+          },
+          {
+            type: "component",
+            name: "plasmic-antd5-option",
+            props: {
+              value: "option2",
+              children: {
+                type: "text",
+                value: "Option 1"
+              }
+            }
+          }
+        ]
+      },
+      label: {
+        type: "slot",
+        defaultValue: "Group label"
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
+    importName: "AntdOptionGroup"
+  });
 }
 
 function registerAll(loader) {