@plasmicpkgs/antd5 0.0.55 → 0.0.56

package/dist/index.js

@@ -74,21 +74,21 @@ function usePrevious(value) {
   return prevValue.current;
 }
 
-var __defProp$b = Object.defineProperty;
+var __defProp$c = Object.defineProperty;
 var __defProps$9 = Object.defineProperties;
 var __getOwnPropDescs$9 = 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 __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$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$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;
 };
@@ -96,11 +96,11 @@ var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$b.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$b)
-    for (var prop of __getOwnPropSymbols$b(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.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;
@@ -110,7 +110,7 @@ function AntdButton(props) {
   const target = props.target === true ? "_blank" : props.target === false ? void 0 : props.target;
   return /* @__PURE__ */ React__default.default.createElement(
     antd.Button,
-    __spreadProps$9(__spreadValues$b(__spreadProps$9(__spreadValues$b({}, rest), {
+    __spreadProps$9(__spreadValues$c(__spreadProps$9(__spreadValues$c({}, rest), {
       htmlType: submitsForm ? "submit" : "button"
     }), rest), {
       target
@@ -180,7 +180,7 @@ function registerButton(loader) {
         hidden: (props) => !props.href,
         defaultValueHint: false
       },
-      children: {
+      children: __spreadValues$c({
         type: "slot",
         defaultValue: [
           {
@@ -188,7 +188,7 @@ function registerButton(loader) {
             value: "Button"
           }
         ]
-      },
+      }, { mergeWithParent: true }),
       icon: {
         type: "slot",
         hidePlaceholder: true,
@@ -204,21 +204,21 @@ function registerButton(loader) {
   });
 }
 
-var __defProp$a = Object.defineProperty;
+var __defProp$b = Object.defineProperty;
 var __defProps$8 = Object.defineProperties;
 var __getOwnPropDescs$8 = 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) => {
+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$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]);
+    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;
 };
@@ -226,11 +226,11 @@ var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.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$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.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;
@@ -244,7 +244,7 @@ function AntdCheckbox(props) {
       return void 0;
     }
   }, [onChange]);
-  return /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, __spreadProps$8(__spreadValues$a({}, rest), { onChange: wrappedOnChange }));
+  return /* @__PURE__ */ React__default.default.createElement(antd.Checkbox, __spreadProps$8(__spreadValues$b({}, rest), { onChange: wrappedOnChange }));
 }
 const AntdCheckboxGroup = antd.Checkbox.Group;
 function registerCheckbox(loader) {
@@ -280,7 +280,7 @@ function registerCheckbox(loader) {
         defaultValueHint: false,
         advanced: true
       },
-      children: {
+      children: __spreadValues$b({
         type: "slot",
         defaultValue: [
           {
@@ -288,7 +288,7 @@ function registerCheckbox(loader) {
             value: "Checkbox"
           }
         ]
-      },
+      }, { mergeWithParent: true }),
       onChange: {
         type: "eventHandler",
         argTypes: [{ name: "checked", type: "boolean" }]
@@ -361,21 +361,21 @@ function registerCheckbox(loader) {
   });
 }
 
-var __defProp$9 = Object.defineProperty;
+var __defProp$a = Object.defineProperty;
 var __defProps$7 = Object.defineProperties;
 var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+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$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(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;
 };
@@ -383,11 +383,11 @@ 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$9.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$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.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;
@@ -438,9 +438,9 @@ function AntdConfigProvider(props) {
   const _a = props, { children, themeStyles } = _a, rest = __objRest$7(_a, ["children", "themeStyles"]);
   return /* @__PURE__ */ React__default.default.createElement(
     antd.ConfigProvider,
-    __spreadValues$9({
+    __spreadValues$a({
       locale: defaultLocale
-    }, themeToAntdConfig(__spreadProps$7(__spreadValues$9({}, rest), {
+    }, themeToAntdConfig(__spreadProps$7(__spreadValues$a({}, rest), {
       fontFamily: themeStyles.fontFamily,
       fontSize: themeStyles.fontSize ? parseInt(themeStyles.fontSize) : void 0,
       lineHeight: themeStyles.lineHeight ? parseInt(themeStyles.lineHeight) : void 0,
@@ -476,7 +476,7 @@ function InnerConfigProvider(props) {
       showNotification: (opts) => {
         var _b;
         const _a = opts, rest = __objRest$7(_a, ["type"]);
-        app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$9({}, rest));
+        app.notification[(_b = opts.type) != null ? _b : "info"](__spreadValues$a({}, rest));
       },
       hideNotifications: () => {
         app.notification.destroy();
@@ -773,7 +773,7 @@ function registerTokens(loader) {
 }
 const registerConfigProvider = makeRegisterGlobalContext(
   AntdConfigProvider,
-  __spreadProps$7(__spreadValues$9({
+  __spreadProps$7(__spreadValues$a({
     name: "plasmic-antd5-config-provider",
     displayName: "Ant Design System Settings",
     props: {
@@ -875,6 +875,258 @@ const registerConfigProvider = makeRegisterGlobalContext(
   })
 );
 
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
+    }
+  return a;
+};
+const AntdMenu = antd.Menu;
+const AntdMenuDivider = antd.Menu.Divider;
+const AntdMenuItem = antd.Menu.Item;
+const AntdMenuItemGroup = antd.Menu.ItemGroup;
+const AntdSubMenu = antd.Menu.SubMenu;
+const allowedMenuComponents = [
+  "plasmic-antd5-menu-item",
+  "plasmic-antd5-menu-divider",
+  "plasmic-antd5-submenu",
+  "plasmic-antd5-menu-item-group"
+];
+const MENU_ITEM_TYPE = {
+  type: "object",
+  nameFunc: (item) => {
+    if (item.type === "divider") {
+      return "Divider";
+    }
+    return item.label || item.value;
+  },
+  fields: {
+    type: {
+      type: "choice",
+      options: [
+        { value: "item", label: "Menu item" },
+        { value: "group", label: "Menu item group" },
+        { value: "submenu", label: "Sub-menu" },
+        { value: "divider", label: "Menu divider" }
+      ],
+      defaultValue: "item"
+    },
+    key: {
+      type: "string",
+      displayName: "Menu item key",
+      description: "Key of the menu item; the onClick will receive this as the value to indicate which item was clicked.",
+      hidden: (ps) => ps.type !== "item"
+    },
+    label: {
+      type: "string",
+      description: "Label of the menu item; will use the key if not specified.",
+      hidden: (ps) => ps.type === "divider"
+    },
+    children: {
+      type: "array",
+      displayName: "Menu items",
+      hidden: (ps) => ps.type !== "submenu" && ps.type !== "group"
+    }
+  }
+};
+MENU_ITEM_TYPE.fields.children.itemType = MENU_ITEM_TYPE;
+function registerMenu(loader) {
+  registerComponentHelper(loader, AntdMenu, {
+    name: "plasmic-antd5-menu",
+    displayName: "Menu",
+    props: {
+      expandIcon: {
+        type: "slot",
+        hidePlaceholder: true
+      },
+      mode: {
+        type: "choice",
+        options: ["horizontal", "vertical", "inline"],
+        description: "Type of menu",
+        defaultValueHint: "vertical"
+      },
+      multiple: {
+        type: "boolean",
+        description: "Allows selection of multiple items",
+        defaultValueHint: false
+      },
+      triggerSubMenuAction: {
+        type: "choice",
+        options: ["hover", "click"],
+        description: "Which action can trigger submenu open/close",
+        defaultValueHint: "hover",
+        advanced: true
+      },
+      children: {
+        type: "slot",
+        allowedComponents: allowedMenuComponents,
+        defaultValue: [
+          {
+            type: "component",
+            name: "plasmic-antd5-menu-item",
+            props: {
+              key: "menuItemKey1"
+            }
+          },
+          {
+            type: "component",
+            name: "plasmic-antd5-menu-item",
+            props: {
+              key: "menuItemKey2"
+            }
+          }
+        ]
+      },
+      onSelect: {
+        type: "eventHandler",
+        argTypes: [{ name: "key", type: "string" }]
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
+    importName: "AntdMenu"
+  });
+  registerComponentHelper(loader, AntdMenuItem, {
+    name: "plasmic-antd5-menu-item",
+    displayName: "Menu Item",
+    props: {
+      danger: {
+        type: "boolean",
+        description: "Display the danger style",
+        defaultValueHint: false
+      },
+      disabled: {
+        type: "boolean",
+        description: "Whether disabled select",
+        defaultValueHint: false
+      },
+      key: {
+        type: "string",
+        displayName: "Unique key",
+        description: "Unique ID of the menu item. Used to determine which item is selected.",
+        defaultValue: "menuItemKey"
+      },
+      title: {
+        type: "string",
+        description: "Set display title for collapsed item"
+      },
+      children: __spreadValues$9({
+        type: "slot",
+        defaultValue: [
+          {
+            type: "text",
+            value: "Menu item"
+          }
+        ]
+      }, { mergeWithParent: true }),
+      onClick: {
+        type: "eventHandler",
+        argTypes: []
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
+    importName: "AntdMenuItem",
+    parentComponentName: "plasmic-antd5-menu"
+  });
+  registerComponentHelper(loader, AntdMenuItemGroup, {
+    name: "plasmic-antd5-menu-item-group",
+    displayName: "Item Group",
+    props: {
+      title: {
+        type: "slot",
+        defaultValue: [
+          {
+            type: "text",
+            value: "Group"
+          }
+        ]
+      },
+      children: {
+        type: "slot",
+        allowedComponents: allowedMenuComponents,
+        defaultValue: [
+          {
+            type: "component",
+            name: "plasmic-antd5-menu-item"
+          }
+        ]
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
+    importName: "AntdMenuItemGroup",
+    parentComponentName: "plasmic-antd5-menu"
+  });
+  registerComponentHelper(loader, AntdMenuDivider, {
+    name: "plasmic-antd5-menu-divider",
+    displayName: "Menu Divider",
+    props: {
+      dashed: {
+        type: "boolean",
+        description: "Whether line is dashed",
+        defaultValueHint: false
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
+    importName: "AntdMenuDivider",
+    parentComponentName: "plasmic-antd5-menu"
+  });
+  registerComponentHelper(loader, AntdSubMenu, {
+    name: "plasmic-antd5-submenu",
+    displayName: "Sub Menu",
+    props: {
+      disabled: {
+        type: "boolean",
+        description: "Whether sub-menu is disabled",
+        defaultValueHint: false
+      },
+      key: {
+        type: "string",
+        displayName: "Unique key",
+        description: "Unique ID of the sub-menu. Used to determine which item is selected.",
+        advanced: true
+      },
+      title: {
+        type: "slot",
+        defaultValue: [
+          {
+            type: "text",
+            value: "Sub-menu"
+          }
+        ]
+      },
+      children: {
+        type: "slot",
+        allowedComponents: allowedMenuComponents,
+        defaultValue: [1, 2].map((i) => ({
+          type: "component",
+          name: "plasmic-antd5-menu-item",
+          props: {
+            key: `subMenuItemKey${i}`,
+            children: [
+              {
+                type: "text",
+                value: `Sub-menu item ${i}`
+              }
+            ]
+          }
+        }))
+      }
+    },
+    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
+    importName: "AntdSubMenu",
+    parentComponentName: "plasmic-antd5-menu"
+  });
+}
+
 var __defProp$8 = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
@@ -905,60 +1157,46 @@ var __objRest$6 = (source, exclude) => {
         target[prop] = source[prop];
     }
   return target;
-};
-function AntdDropdown(props) {
-  const _a = props, { children, onAction, menuItems } = _a, rest = __objRest$6(_a, ["children", "onAction", "menuItems"]);
-  return /* @__PURE__ */ React__default.default.createElement(
-    antd.Dropdown,
-    __spreadProps$6(__spreadValues$8({}, rest), {
-      overlay: () => {
-        var _a2;
-        const items = (_a2 = menuItems == null ? void 0 : menuItems()) != null ? _a2 : [];
-        return /* @__PURE__ */ React__default.default.createElement(antd.Menu, { onClick: (event) => onAction == null ? void 0 : onAction(event.key) }, items);
-      }
-    }),
-    typeof children === "string" ? /* @__PURE__ */ React__default.default.createElement("div", null, children) : children
-  );
-}
-function registerDropdown(loader) {
-  registerComponentHelper(loader, AntdDropdown, {
-    name: "plasmic-antd5-dropdown",
-    displayName: "Dropdown",
-    props: {
-      open: {
-        type: "boolean",
-        description: "Toggle visibility of dropdown menu in Plasmic Editor",
-        editOnly: true,
-        uncontrolledProp: "fakeOpen",
-        defaultValueHint: false
-      },
-      disabled: {
-        type: "boolean",
-        description: "Whether the dropdown menu is disabled",
-        defaultValueHint: false
-      },
-      arrow: {
-        type: "boolean",
-        description: "Whether the dropdown arrow should be visible",
-        defaultValueHint: false,
-        advanced: true
-      },
-      placement: {
-        type: "choice",
-        options: [
-          "bottomLeft",
-          "bottomCenter",
-          "bottomRight",
-          "topLeft",
-          "topCenter",
-          "topRight"
-        ],
-        description: "Placement of popup menu",
-        defaultValueHint: "bottomLeft",
-        advanced: true
-      },
+};
+function AntdDropdown(props) {
+  const _a = props, {
+    children,
+    onAction,
+    menuItems,
+    useMenuItemsSlot = false,
+    menuItemsJson,
+    trigger = "click"
+  } = _a, rest = __objRest$6(_a, [
+    "children",
+    "onAction",
+    "menuItems",
+    "useMenuItemsSlot",
+    "menuItemsJson",
+    "trigger"
+  ]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    antd.Dropdown,
+    __spreadProps$6(__spreadValues$8({}, rest), {
+      trigger: [trigger],
+      overlay: () => {
+        var _a2;
+        const itemsChildren = useMenuItemsSlot ? (_a2 = menuItems == null ? void 0 : menuItems()) != null ? _a2 : [] : void 0;
+        const items = useMenuItemsSlot ? void 0 : menuItemsJson;
+        return /* @__PURE__ */ React__default.default.createElement(antd.Menu, { onClick: (event) => onAction == null ? void 0 : onAction(event.key), items }, itemsChildren);
+      }
+    }),
+    typeof children === "string" ? /* @__PURE__ */ React__default.default.createElement("div", null, children) : children
+  );
+}
+function registerDropdown(loader) {
+  registerComponentHelper(loader, AntdDropdown, {
+    name: "plasmic-antd5-dropdown",
+    displayName: "Dropdown",
+    props: {
       menuItems: {
         type: "slot",
+        displayName: "Menu items",
+        hidden: (ps) => !ps.useMenuItemsSlot,
         allowedComponents: [
           "plasmic-antd5-menu-item",
           "plasmic-antd5-menu-item-group",
@@ -983,13 +1221,67 @@ function registerDropdown(loader) {
         ],
         renderPropParams: []
       },
+      menuItemsJson: {
+        type: "array",
+        displayName: "Menu Items",
+        hidden: (ps) => ps.useMenuItemsSlot,
+        itemType: MENU_ITEM_TYPE,
+        defaultValue: [
+          {
+            type: "item",
+            value: "action1",
+            label: "Action 1"
+          },
+          {
+            type: "item",
+            value: "action2",
+            label: "Action 2"
+          }
+        ]
+      },
+      open: {
+        type: "boolean",
+        description: "Toggle visibility of dropdown menu in Plasmic Editor",
+        editOnly: true,
+        uncontrolledProp: "fakeOpen",
+        defaultValueHint: false
+      },
+      disabled: {
+        type: "boolean",
+        description: "Whether the dropdown menu is disabled",
+        defaultValueHint: false
+      },
+      placement: {
+        type: "choice",
+        options: [
+          "bottomLeft",
+          "bottomCenter",
+          "bottomRight",
+          "topLeft",
+          "topCenter",
+          "topRight"
+        ],
+        description: "Placement of popup menu",
+        defaultValueHint: "bottomLeft",
+        advanced: true
+      },
       trigger: {
         type: "choice",
-        options: ["click", "hover", "contextMenu"],
+        options: [
+          { value: "click", label: "Click" },
+          { value: "hover", label: "Hover" },
+          { value: "contextMenu", label: "Right-click" }
+        ],
         description: "The trigger mode which executes the dropdown action",
-        defaultValueHint: "hover"
+        defaultValueHint: "click"
       },
-      children: {
+      useMenuItemsSlot: {
+        type: "boolean",
+        displayName: "Use menu items slot",
+        advanced: true,
+        description: "Instead of configuring a list of menu items, build the menu items using MenuItem elements. This gives you greater control over item styling."
+      },
+      children: __spreadValues$8({
         type: "slot",
         defaultValue: [
           {
@@ -1003,6 +1295,12 @@ function registerDropdown(loader) {
             }
           }
         ]
+      }, { mergeWithParent: true }),
+      arrow: {
+        type: "boolean",
+        description: "Whether the dropdown arrow should be visible",
+        defaultValueHint: false,
+        advanced: true
       },
       onAction: {
         type: "eventHandler",
@@ -1620,7 +1918,7 @@ function FormItemForwarder(_a) {
   });
 }
 function registerFormItem(loader) {
-  registerComponentHelper(loader, FormItemWrapper, {
+  registerComponentHelper(loader, FormItemWrapper, __spreadValues$6({
     name: "plasmic-antd5-form-item",
     displayName: "Form Item",
     parentComponentName: "plasmic-antd5-form",
@@ -1629,21 +1927,21 @@ function registerFormItem(loader) {
       width: "stretch"
     },
     props: {
-      label: {
+      label: __spreadValues$6({
         type: "slot",
         defaultValue: {
           type: "text",
           value: "Label"
         },
         hidden: (ps) => !!ps.noLabel
-      },
-      children: {
+      }, { mergeWithParent: true }),
+      children: __spreadValues$6({
         type: "slot",
         defaultValue: {
           type: "component",
           name: "plasmic-antd5-input"
         }
-      },
+      }, { mergeWithParent: true }),
       name: {
         type: "string"
       },
@@ -1816,7 +2114,7 @@ function registerFormItem(loader) {
         }
       }
     }
-  });
+  }, { trapsSelection: true }));
 }
 function FormGroup(props) {
   const pathCtx = React__default.default.useContext(PathContext);
@@ -2132,14 +2430,14 @@ const COMMON_EVENT_HANDLERS = {
   }
 };
 function registerInput(loader) {
-  registerComponentHelper(loader, AntdInput, {
+  registerComponentHelper(loader, AntdInput, __spreadProps$4(__spreadValues$5({
     name: "plasmic-antd5-input",
     displayName: "Input",
     props: __spreadValues$5(__spreadValues$5(__spreadValues$5({
       value: {
         type: "string"
       },
-      placholder: {
+      placeholder: {
         type: "string"
       },
       size: {
@@ -2165,11 +2463,12 @@ function registerInput(loader) {
         defaultValueHint: "text"
       }
     }, COMMON_ADVANCED_PROPS), COMMON_DECORATOR_PROPS), COMMON_EVENT_HANDLERS),
-    states: __spreadValues$5({}, COMMON_STATES),
+    states: __spreadValues$5({}, COMMON_STATES)
+  }, { trapsSelection: true }), {
     componentHelpers: COMMON_HELPERS_CONFIG,
     importPath: "@plasmicpkgs/antd5/skinny/registerInput",
     importName: "AntdInput"
-  });
+  }));
 }
 function registerTextArea(loader) {
   registerComponentHelper(loader, AntdTextArea, {
@@ -2180,304 +2479,107 @@ function registerTextArea(loader) {
       value: {
         type: "string"
       },
-      placholder: {
-        type: "string"
-      },
-      disabled: {
-        type: "boolean"
-      },
-      maxLength: {
-        type: "number",
-        advanced: true
-      },
-      bordered: {
-        type: "boolean",
-        advanced: true,
-        defaultValueHint: true
-      }
-    }, COMMON_EVENT_HANDLERS),
-    states: __spreadValues$5({}, COMMON_STATES),
-    componentHelpers: COMMON_HELPERS_CONFIG,
-    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
-    importName: "AntdTextArea"
-  });
-}
-function registerPasswordInput(loader) {
-  registerComponentHelper(loader, AntdPassword, {
-    name: "plasmic-antd5-input-password",
-    parentComponentName: "plasmic-antd5-input",
-    displayName: "Password Input",
-    props: __spreadValues$5({
-      value: {
-        type: "string"
-      },
-      placholder: {
-        type: "string"
-      },
-      disabled: {
-        type: "boolean"
-      },
-      maxLength: {
-        type: "number",
-        advanced: true
-      },
-      bordered: {
-        type: "boolean",
-        advanced: true,
-        defaultValueHint: true
-      }
-    }, COMMON_EVENT_HANDLERS),
-    states: __spreadValues$5({}, COMMON_STATES),
-    componentHelpers: COMMON_HELPERS_CONFIG,
-    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
-    importName: "AntdPassword"
-  });
-}
-function registerNumberInput(loader) {
-  registerComponentHelper(loader, AntdInputNumber, {
-    name: "plasmic-antd5-input-number",
-    parentComponentName: "plasmic-antd5-input",
-    displayName: "Number Input",
-    props: __spreadProps$4(__spreadValues$5(__spreadValues$5(__spreadValues$5({
-      value: {
-        type: "number"
-      },
-      placholder: {
-        type: "string"
-      },
-      disabled: {
-        type: "boolean"
-      },
-      max: {
-        type: "number"
-      },
-      min: {
-        type: "number"
-      },
-      step: {
-        type: "number",
-        helpText: "Increment or decrement step"
-      },
-      controls: {
-        type: "boolean",
-        displayName: "Show add/minus controls?",
-        advanced: true
-      }
-    }, COMMON_DECORATOR_PROPS), COMMON_ADVANCED_PROPS), COMMON_EVENT_HANDLERS), {
-      // onChange directly called with the number
-      onChange: {
-        type: "eventHandler",
-        argTypes: [
-          {
-            name: "value",
-            type: "number"
-          }
-        ]
-      }
-    }),
-    states: __spreadValues$5({}, COMMON_STATES),
-    // don't need component helpers
-    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
-    importName: "AntdInputNumber"
-  });
-}
-
-const AntdMenu = antd.Menu;
-const AntdMenuDivider = antd.Menu.Divider;
-const AntdMenuItem = antd.Menu.Item;
-const AntdMenuItemGroup = antd.Menu.ItemGroup;
-const AntdSubMenu = antd.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",
-    displayName: "Menu",
-    props: {
-      expandIcon: {
-        type: "slot",
-        hidePlaceholder: true
-      },
-      mode: {
-        type: "choice",
-        options: ["horizontal", "vertical", "inline"],
-        description: "Type of menu",
-        defaultValueHint: "vertical"
-      },
-      multiple: {
-        type: "boolean",
-        description: "Allows selection of multiple items",
-        defaultValueHint: false
-      },
-      triggerSubMenuAction: {
-        type: "choice",
-        options: ["hover", "click"],
-        description: "Which action can trigger submenu open/close",
-        defaultValueHint: "hover",
-        advanced: true
-      },
-      children: {
-        type: "slot",
-        allowedComponents: allowedMenuComponents,
-        defaultValue: [
-          {
-            type: "component",
-            name: "plasmic-antd5-menu-item",
-            props: {
-              key: "menuItemKey1"
-            }
-          },
-          {
-            type: "component",
-            name: "plasmic-antd5-menu-item",
-            props: {
-              key: "menuItemKey2"
-            }
-          }
-        ]
-      },
-      onSelect: {
-        type: "eventHandler",
-        argTypes: [{ name: "key", type: "string" }]
-      }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
-    importName: "AntdMenu"
-  });
-  registerComponentHelper(loader, AntdMenuItem, {
-    name: "plasmic-antd5-menu-item",
-    displayName: "Menu Item",
-    props: {
-      danger: {
-        type: "boolean",
-        description: "Display the danger style",
-        defaultValueHint: false
-      },
-      disabled: {
-        type: "boolean",
-        description: "Whether disabled select",
-        defaultValueHint: false
-      },
-      key: {
-        type: "string",
-        displayName: "Unique key",
-        description: "Unique ID of the menu item. Used to determine which item is selected.",
-        defaultValue: "menuItemKey"
-      },
-      title: {
-        type: "string",
-        description: "Set display title for collapsed item"
+      placeholder: {
+        type: "string"
       },
-      children: {
-        type: "slot",
-        defaultValue: [
-          {
-            type: "text",
-            value: "Menu item"
-          }
-        ]
+      disabled: {
+        type: "boolean"
       },
-      onClick: {
-        type: "eventHandler",
-        argTypes: []
-      }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
-    importName: "AntdMenuItem",
-    parentComponentName: "plasmic-antd5-menu"
-  });
-  registerComponentHelper(loader, AntdMenuItemGroup, {
-    name: "plasmic-antd5-menu-item-group",
-    displayName: "Item Group",
-    props: {
-      title: {
-        type: "slot",
-        defaultValue: [
-          {
-            type: "text",
-            value: "Group"
-          }
-        ]
+      maxLength: {
+        type: "number",
+        advanced: true
       },
-      children: {
-        type: "slot",
-        allowedComponents: allowedMenuComponents,
-        defaultValue: [
-          {
-            type: "component",
-            name: "plasmic-antd5-menu-item"
-          }
-        ]
+      bordered: {
+        type: "boolean",
+        advanced: true,
+        defaultValueHint: true
       }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
-    importName: "AntdMenuItemGroup",
-    parentComponentName: "plasmic-antd5-menu"
+    }, COMMON_EVENT_HANDLERS),
+    states: __spreadValues$5({}, COMMON_STATES),
+    componentHelpers: COMMON_HELPERS_CONFIG,
+    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
+    importName: "AntdTextArea"
   });
-  registerComponentHelper(loader, AntdMenuDivider, {
-    name: "plasmic-antd5-menu-divider",
-    displayName: "Menu Divider",
-    props: {
-      dashed: {
+}
+function registerPasswordInput(loader) {
+  registerComponentHelper(loader, AntdPassword, {
+    name: "plasmic-antd5-input-password",
+    parentComponentName: "plasmic-antd5-input",
+    displayName: "Password Input",
+    props: __spreadValues$5({
+      value: {
+        type: "string"
+      },
+      placeholder: {
+        type: "string"
+      },
+      disabled: {
+        type: "boolean"
+      },
+      maxLength: {
+        type: "number",
+        advanced: true
+      },
+      bordered: {
         type: "boolean",
-        description: "Whether line is dashed",
-        defaultValueHint: false
+        advanced: true,
+        defaultValueHint: true
       }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
-    importName: "AntdMenuDivider",
-    parentComponentName: "plasmic-antd5-menu"
+    }, COMMON_EVENT_HANDLERS),
+    states: __spreadValues$5({}, COMMON_STATES),
+    componentHelpers: COMMON_HELPERS_CONFIG,
+    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
+    importName: "AntdPassword"
   });
-  registerComponentHelper(loader, AntdSubMenu, {
-    name: "plasmic-antd5-submenu",
-    displayName: "Sub Menu",
-    props: {
+}
+function registerNumberInput(loader) {
+  registerComponentHelper(loader, AntdInputNumber, __spreadProps$4(__spreadValues$5({
+    name: "plasmic-antd5-input-number",
+    parentComponentName: "plasmic-antd5-input",
+    displayName: "Number Input",
+    props: __spreadProps$4(__spreadValues$5(__spreadValues$5(__spreadValues$5({
+      value: {
+        type: "number"
+      },
+      placeholder: {
+        type: "string"
+      },
       disabled: {
-        type: "boolean",
-        description: "Whether sub-menu is disabled",
-        defaultValueHint: false
+        type: "boolean"
       },
-      key: {
-        type: "string",
-        displayName: "Unique key",
-        description: "Unique ID of the sub-menu. Used to determine which item is selected.",
-        advanced: true
+      max: {
+        type: "number"
       },
-      title: {
-        type: "slot",
-        defaultValue: [
+      min: {
+        type: "number"
+      },
+      step: {
+        type: "number",
+        helpText: "Increment or decrement step"
+      },
+      controls: {
+        type: "boolean",
+        displayName: "Show add/minus controls?",
+        advanced: true
+      }
+    }, COMMON_DECORATOR_PROPS), COMMON_ADVANCED_PROPS), COMMON_EVENT_HANDLERS), {
+      // onChange directly called with the number
+      onChange: {
+        type: "eventHandler",
+        argTypes: [
           {
-            type: "text",
-            value: "Sub-menu"
+            name: "value",
+            type: "number"
           }
         ]
-      },
-      children: {
-        type: "slot",
-        allowedComponents: allowedMenuComponents,
-        defaultValue: [1, 2].map((i) => ({
-          type: "component",
-          name: "plasmic-antd5-menu-item",
-          props: {
-            key: `subMenuItemKey${i}`,
-            children: [
-              {
-                type: "text",
-                value: `Sub-menu item ${i}`
-              }
-            ]
-          }
-        }))
       }
-    },
-    importPath: "@plasmicpkgs/antd5/skinny/registerMenu",
-    importName: "AntdSubMenu",
-    parentComponentName: "plasmic-antd5-menu"
-  });
+    }),
+    states: __spreadValues$5({}, COMMON_STATES)
+  }, { trapsSelection: true }), {
+    // don't need component helpers
+    importPath: "@plasmicpkgs/antd5/skinny/registerInput",
+    importName: "AntdInputNumber"
+  }));
 }
 
 var __defProp$4 = Object.defineProperty;
@@ -2672,7 +2774,7 @@ const RadioGroup = antd.Radio.Group;
 const AntdRadio = antd.Radio;
 antd.Radio.Button;
 function AntdRadioGroup(props) {
-  const _a = props, { onChange } = _a, rest = __objRest$3(_a, ["onChange"]);
+  const _a = props, { onChange, useChildren } = _a, rest = __objRest$3(_a, ["onChange", "useChildren"]);
   const wrappedOnChange = React__default.default.useMemo(() => {
     if (onChange) {
       return (event) => onChange(event.target.value);
@@ -2680,7 +2782,13 @@ function AntdRadioGroup(props) {
       return void 0;
     }
   }, [onChange]);
-  return /* @__PURE__ */ React__default.default.createElement(RadioGroup, __spreadProps$2(__spreadValues$3({}, rest), { onChange: wrappedOnChange }));
+  return /* @__PURE__ */ React__default.default.createElement(
+    RadioGroup,
+    __spreadProps$2(__spreadValues$3({}, rest), {
+      onChange: wrappedOnChange,
+      options: useChildren ? void 0 : rest.options
+    })
+  );
 }
 function registerRadio(loader) {
   registerComponentHelper(loader, AntdRadio, {
@@ -2701,7 +2809,7 @@ function registerRadio(loader) {
         defaultValueHint: false,
         advanced: true
       },
-      children: {
+      children: __spreadValues$3({
         type: "slot",
         defaultValue: [
           {
@@ -2709,7 +2817,7 @@ function registerRadio(loader) {
             value: "Radio"
           }
         ]
-      }
+      }, { mergeWithParent: true })
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
     importName: "AntdRadio",
@@ -2733,7 +2841,7 @@ function registerRadio(loader) {
         defaultValueHint: false,
         advanced: true
       },
-      children: {
+      children: __spreadValues$3({
         type: "slot",
         defaultValue: [
           {
@@ -2741,30 +2849,66 @@ function registerRadio(loader) {
             value: "Radio"
           }
         ]
-      }
+      }, { mergeWithParent: true })
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
     importName: "AntdRadioButton",
     parentComponentName: "plasmic-antd5-radio-group"
   });
-  registerComponentHelper(loader, AntdRadioGroup, {
+  registerComponentHelper(loader, AntdRadioGroup, __spreadValues$3({
     name: "plasmic-antd5-radio-group",
     displayName: "Radio Group",
     props: {
+      options: {
+        type: "array",
+        hidden: (ps) => !!ps.useChildren,
+        itemType: {
+          type: "object",
+          nameFunc: (item) => item.label || item.value,
+          fields: {
+            value: "string",
+            label: "string"
+          }
+        },
+        defaultValue: [
+          {
+            value: "option1",
+            label: "Option 1"
+          },
+          {
+            value: "option2",
+            label: "Option 2"
+          }
+        ]
+      },
+      optionType: {
+        type: "choice",
+        options: [
+          { value: "default", label: "Radio" },
+          { value: "button", label: "Button" }
+        ],
+        hidden: (ps) => !!ps.useChildren,
+        defaultValueHint: "default"
+      },
       value: {
         type: "choice",
         editOnly: true,
         uncontrolledProp: "defaultValue",
         description: "Default selected value",
         options: (ps) => {
-          const options = /* @__PURE__ */ new Set();
-          traverseReactEltTree(ps.children, (elt) => {
-            var _a;
-            if (typeof ((_a = elt == null ? void 0 : elt.props) == null ? void 0 : _a.value) === "string") {
-              options.add(elt.props.value);
-            }
-          });
-          return Array.from(options.keys());
+          var _a;
+          if (ps.useChildren) {
+            const options = /* @__PURE__ */ new Set();
+            traverseReactEltTree(ps.children, (elt) => {
+              var _a2;
+              if (typeof ((_a2 = elt == null ? void 0 : elt.props) == null ? void 0 : _a2.value) === "string") {
+                options.add(elt.props.value);
+              }
+            });
+            return Array.from(options.keys());
+          } else {
+            return (_a = ps.options) != null ? _a : [];
+          }
         }
       },
       disabled: {
@@ -2772,6 +2916,13 @@ function registerRadio(loader) {
         description: "Disables all radios",
         defaultValueHint: false
       },
+      useChildren: {
+        displayName: "Use slot",
+        type: "boolean",
+        defaultValueHint: false,
+        advanced: true,
+        description: "Instead of configuring a list of options, customize the contents of the RadioGroup by dragging and dropping Radio in the outline/canvas, inside the 'children' slot. Lets you use any content or formatting within the Radio and RadioButton."
+      },
       children: {
         type: "slot",
         allowedComponents: [
@@ -2817,8 +2968,13 @@ function registerRadio(loader) {
       }
     },
     importPath: "@plasmicpkgs/antd5/skinny/registerRadio",
-    importName: "AntdRadioGroup"
-  });
+    importName: "AntdRadioGroup",
+    defaultStyles: {
+      layout: "hbox"
+    }
+  }, {
+    trapsSelection: true
+  }));
 }
 
 var __defProp$2 = Object.defineProperty;
@@ -2883,7 +3039,7 @@ function AntdSelect(props) {
   );
 }
 function registerSelect(loader) {
-  registerComponentHelper(loader, AntdSelect, {
+  registerComponentHelper(loader, AntdSelect, __spreadProps$1(__spreadValues$2({
     name: "plasmic-antd5-select",
     displayName: "Select",
     props: {
@@ -2892,10 +3048,35 @@ function registerSelect(loader) {
         hidden: (ps) => !!ps.useChildren,
         itemType: {
           type: "object",
-          nameFunc: (item) => item.label,
+          nameFunc: (item) => item.label || item.value,
           fields: {
-            value: "string",
-            label: "string"
+            type: {
+              type: "choice",
+              options: [
+                { value: "option", label: "Option" },
+                { value: "option-group", label: "Option Group" }
+              ],
+              defaultValue: "option"
+            },
+            value: {
+              type: "string",
+              hidden: (ps) => ps.type !== "option"
+            },
+            label: "string",
+            options: {
+              type: "array",
+              hidden: (ps) => {
+                return ps.type !== "option-group";
+              },
+              itemType: {
+                type: "object",
+                nameFunc: (item) => item.label || item.value,
+                fields: {
+                  value: "string",
+                  label: "string"
+                }
+              }
+            }
           }
         },
         defaultValue: [
@@ -2913,6 +3094,7 @@ function registerSelect(loader) {
         displayName: "Use slot",
         type: "boolean",
         defaultValueHint: false,
+        advanced: true,
         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: {
@@ -2947,13 +3129,17 @@ function registerSelect(loader) {
           var _a;
           const options = /* @__PURE__ */ new Set();
           if (!ps.useChildren) {
-            return ((_a = ps.options) != null ? _a : []).map((o) => {
+            const rec = (op) => {
               var _a2;
-              return {
-                value: o.value || "",
-                label: (_a2 = o.label) != null ? _a2 : o.value || ""
-              };
-            });
+              if (typeof op === "string") {
+                return [{ value: op, label: op }];
+              } else if ("options" in op) {
+                return ((_a2 = op.options) != null ? _a2 : []).flatMap((sub) => rec(sub));
+              } else {
+                return [{ value: op.value, label: op.label || op.value }];
+              }
+            };
+            return ((_a = ps.options) != null ? _a : []).flatMap((o) => rec(o));
           } else {
             traverseReactEltTree(ps.children, (elt) => {
               var _a2;
@@ -3070,11 +3256,6 @@ function registerSelect(loader) {
       },
       defaultStylesClassName: {
         type: "themeResetClass"
-      },
-      tagRender: {
-        type: "slot",
-        renderPropParams: ["tagProps"],
-        hidePlaceholder: true
       }
     },
     states: {
@@ -3084,19 +3265,20 @@ function registerSelect(loader) {
         onChangeProp: "onChange",
         variableType: "text"
       }
-    },
+    }
+  }, { trapsSelection: true }), {
     importPath: "@plasmicpkgs/antd5/skinny/registerSelect",
     importName: "AntdSelect"
-  });
+  }));
   registerComponentHelper(loader, AntdOption, {
     name: "plasmic-antd5-option",
     displayName: "Option",
     parentComponentName: "plasmic-antd5-select",
     props: {
-      children: {
+      children: __spreadValues$2({
         type: "slot",
         defaultValue: "Option"
-      },
+      }, { mergeWithParent: true }),
       value: {
         type: "string"
       }
@@ -3512,7 +3694,7 @@ function UploadWrapper(props) {
   );
 }
 function registerUpload(loader) {
-  registerComponentHelper(loader, UploadWrapper, {
+  registerComponentHelper(loader, UploadWrapper, __spreadProps(__spreadValues({
     name: "plasmic-antd5-upload",
     displayName: "Upload",
     props: {
@@ -3591,10 +3773,11 @@ function registerUpload(loader) {
         variableType: "array",
         onChangeProp: "onFilesChange"
       }
-    },
+    }
+  }, { trapsSelection: true }), {
     importPath: "@plasmicpkgs/antd5/skinny/registerUpload",
     importName: "UploadWrapper"
-  });
+  }));
 }
 
 function registerAll(loader) {