@plasmicpkgs/antd 2.0.66 → 2.0.68

package/dist/index.js

@@ -268,6 +268,16 @@ function registerCheckbox(loader, customCheckboxMeta) {
   const doRegisterComponent = (...args) => loader ? loader.registerComponent(...args) : registerComponent__default.default(...args);
   doRegisterComponent(CheckboxWrapper, customCheckboxMeta != null ? customCheckboxMeta : checkboxMeta);
 }
+function getGroupOptions(componentProps) {
+  const options = /* @__PURE__ */ new Set();
+  traverseReactEltTree(componentProps.children, (elt) => {
+    var _a;
+    if ((elt == null ? void 0 : elt.type) === CheckboxWrapper && typeof ((_a = elt == null ? void 0 : elt.props) == null ? void 0 : _a.value) === "string") {
+      options.add(elt.props.value);
+    }
+  });
+  return Array.from(options.keys());
+}
 const checkboxGroupMeta = {
   name: "AntdCheckboxGroup",
   displayName: "Antd Checkbox Group",
@@ -280,19 +290,22 @@ const checkboxGroupMeta = {
     value: {
       type: "choice",
       editOnly: true,
-      uncontrolledProp: "defaultValue",
       description: "Default selected value",
       multiSelect: true,
-      options: (componentProps) => {
-        const options = /* @__PURE__ */ new Set();
-        traverseReactEltTree(componentProps.children, (elt) => {
-          var _a;
-          if ((elt == null ? void 0 : elt.type) === CheckboxWrapper && typeof ((_a = elt == null ? void 0 : elt.props) == null ? void 0 : _a.value) === "string") {
-            options.add(elt.props.value);
+      options: getGroupOptions
+    },
+    onChange: {
+      type: "eventHandler",
+      argTypes: [
+        {
+          name: "value",
+          type: {
+            type: "choice",
+            multiSelect: true,
+            options: getGroupOptions
           }
-        });
-        return Array.from(options.keys());
-      }
+        }
+      ]
     },
     children: {
       type: "slot",
@@ -305,6 +318,14 @@ const checkboxGroupMeta = {
       ]
     }
   },
+  states: {
+    value: {
+      type: "writable",
+      variableType: "array",
+      valueProp: "value",
+      onChangeProp: "onChange"
+    }
+  },
   importPath: "@plasmicpkgs/antd/skinny/registerCheckbox",
   importName: "CheckboxGroup",
   parentComponentName: "AntdCheckbox"
@@ -406,6 +427,15 @@ function registerCollapsePanel(loader, customCollapsePanelMeta) {
     customCollapsePanelMeta != null ? customCollapsePanelMeta : collapstePanelMeta
   );
 }
+function getOptions(componentProps) {
+  const options = /* @__PURE__ */ new Set();
+  traverseReactEltTree(componentProps.children, (elt) => {
+    if ((elt == null ? void 0 : elt.type) === CollapsePanel && typeof (elt == null ? void 0 : elt.key) === "string") {
+      options.add(elt.key);
+    }
+  });
+  return Array.from(options.keys());
+}
 const collapsteMeta = {
   name: "AntdCollapse",
   displayName: "Antd Collapse",
@@ -418,18 +448,22 @@ const collapsteMeta = {
     activeKey: {
       type: "choice",
       editOnly: true,
-      uncontrolledProp: "defaultActiveKey",
       description: "Key of the active panel",
       multiSelect: true,
-      options: (componentProps) => {
-        const options = /* @__PURE__ */ new Set();
-        traverseReactEltTree(componentProps.children, (elt) => {
-          if ((elt == null ? void 0 : elt.type) === CollapsePanel && typeof (elt == null ? void 0 : elt.key) === "string") {
-            options.add(elt.key);
+      options: getOptions
+    },
+    onChange: {
+      type: "eventHandler",
+      argTypes: [
+        {
+          name: "value",
+          type: {
+            type: "choice",
+            multiSelect: true,
+            options: getOptions
           }
-        });
-        return Array.from(options.keys());
-      }
+        }
+      ]
     },
     bordered: {
       type: "boolean",
@@ -474,6 +508,14 @@ const collapsteMeta = {
       hidePlaceholder: true
     }
   },
+  states: {
+    activeKey: {
+      type: "writable",
+      variableType: "array",
+      valueProp: "activeKey",
+      onChangeProp: "onChange"
+    }
+  },
   importPath: "@plasmicpkgs/antd/skinny/registerCollapse",
   importName: "Collapse"
 };
@@ -1263,6 +1305,15 @@ function registerSubMenu(loader, customSubMenuMeta) {
   const doRegisterComponent = (...args) => loader ? loader.registerComponent(...args) : registerComponent__default.default(...args);
   doRegisterComponent(SubMenu, customSubMenuMeta != null ? customSubMenuMeta : subMenuMeta);
 }
+function getOpenKeysOptions(componentProps) {
+  const options = /* @__PURE__ */ new Set();
+  traverseReactEltTree(componentProps.children, (elt) => {
+    if ((elt == null ? void 0 : elt.type) === SubMenu && typeof (elt == null ? void 0 : elt.key) === "string") {
+      options.add(elt.key);
+    }
+  });
+  return Array.from(options.keys());
+}
 const menuMeta = {
   name: "AntdMenu",
   displayName: "Antd Menu",
@@ -1295,18 +1346,22 @@ const menuMeta = {
     openKeys: {
       type: "choice",
       editOnly: true,
-      uncontrolledProp: "defaultOpenKeys",
       description: "Array with the keys of default opened sub menus",
       multiSelect: true,
-      options: (componentProps) => {
-        const options = /* @__PURE__ */ new Set();
-        traverseReactEltTree(componentProps.children, (elt) => {
-          if ((elt == null ? void 0 : elt.type) === SubMenu && typeof (elt == null ? void 0 : elt.key) === "string") {
-            options.add(elt.key);
+      options: getOpenKeysOptions
+    },
+    onOpenChange: {
+      type: "eventHandler",
+      argTypes: [
+        {
+          name: "openKeys",
+          type: {
+            type: "choice",
+            multiSelect: true,
+            options: getOpenKeysOptions
           }
-        });
-        return Array.from(options.keys());
-      }
+        }
+      ]
     },
     overflowedIndicator: {
       type: "slot",
@@ -1370,6 +1425,14 @@ const menuMeta = {
       ]
     }
   },
+  states: {
+    openKeys: {
+      type: "writable",
+      variableType: "array",
+      valueProp: "openKeys",
+      onChangeProp: "onOpenChange"
+    }
+  },
   importPath: "@plasmicpkgs/antd/skinny/registerMenu",
   importName: "Menu"
 };
@@ -1488,14 +1551,30 @@ const rateMeta = {
       type: "number",
       description: "The default value",
       editOnly: true,
-      uncontrolledProp: "defaultValue",
       defaultValueHint: 0
     },
+    onChange: {
+      type: "eventHandler",
+      argTypes: [
+        {
+          name: "value",
+          type: "number"
+        }
+      ]
+    },
     character: {
       type: "slot",
       hidePlaceholder: true
     }
   },
+  states: {
+    value: {
+      type: "writable",
+      variableType: "text",
+      onChangeProp: "onChange",
+      valueProp: "value"
+    }
+  },
   importPath: "@plasmicpkgs/antd/skinny/registerRate",
   importName: "Rate"
 };
@@ -1554,10 +1633,18 @@ const selectMeta = {
     open: {
       type: "boolean",
       editOnly: true,
-      uncontrolledProp: "defaultOpen",
       description: "Initial open state of dropdown",
       defaultValueHint: false
     },
+    onDropdownVisibleChange: {
+      type: "eventHandler",
+      argTypes: [
+        {
+          name: "open",
+          type: "boolean"
+        }
+      ]
+    },
     placeholder: {
       type: "slot",
       defaultValue: [
@@ -1639,6 +1726,12 @@ const selectMeta = {
       variableType: "text",
       onChangeProp: "onChange",
       valueProp: "value"
+    },
+    open: {
+      type: "writable",
+      variableType: "boolean",
+      onChangeProp: "onDropdownVisibleChange",
+      valueProp: "open"
     }
   },
   importPath: "@plasmicpkgs/antd/skinny/registerSelect",
@@ -1680,28 +1773,25 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const Slider = React__default.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { value, defaultValue, value2, defaultValue2 } = _b, props = __objRest$2(_b, ["value", "defaultValue", "value2", "defaultValue2"]);
-    const newProps = __spreadValues$2({}, props);
-    if (props.range) {
-      if (typeof value === "number" || typeof value2 === "number") {
-        newProps.value = [value != null ? value : 0, value2 != null ? value2 : 0];
-      }
-      if (typeof defaultValue === "number" || typeof defaultValue2 === "number") {
-        newProps.defaultValue = [defaultValue != null ? defaultValue : 0, defaultValue2 != null ? defaultValue2 : 0];
-      }
-    } else {
-      if (typeof value === "number") {
-        newProps.value = value;
-      }
-      if (typeof defaultValue === "number") {
-        newProps.defaultValue = defaultValue;
-      }
+const Slider = React__default.default.forwardRef(function Slider2(_a, ref) {
+  var _b = _a, { value, value2, onChange, onChange2 } = _b, props = __objRest$2(_b, ["value", "value2", "onChange", "onChange2"]);
+  const newProps = __spreadValues$2({}, props);
+  if (props.range) {
+    if (typeof value === "number" || typeof value2 === "number") {
+      newProps.value = [value != null ? value : 0, value2 != null ? value2 : 0];
     }
-    return /* @__PURE__ */ React__default.default.createElement(antd.Slider, __spreadProps$1(__spreadValues$2({}, newProps), { ref }));
+    newProps.onChange = (values) => {
+      onChange(values[0]);
+      onChange2(values[1]);
+    };
+  } else {
+    if (typeof value === "number") {
+      newProps.value = value;
+    }
+    newProps.onChange = onChange;
   }
-);
+  return /* @__PURE__ */ React__default.default.createElement(antd.Slider, __spreadProps$1(__spreadValues$2({}, newProps), { ref }));
+});
 const sliderMeta = {
   name: "AntdSlider",
   displayName: "Antd Slider",
@@ -1743,16 +1833,24 @@ const sliderMeta = {
     },
     value: {
       type: "number",
+      displayName: "Value",
       editOnly: true,
-      uncontrolledProp: "defaultValue",
-      description: "The default value of slider"
+      description: "Initial value for the slider"
+    },
+    onChange: {
+      type: "eventHandler",
+      argTypes: [{ name: "value", type: "number" }]
     },
     value2: {
       type: "number",
-      displayName: "value 2",
+      displayName: "Second Value",
       editOnly: true,
-      uncontrolledProp: "defaultValue2",
-      description: "The default value for the second value of the slider",
+      description: "Initial second value for the slider",
+      hidden: (props) => !props.range
+    },
+    onChange2: {
+      type: "eventHandler",
+      argTypes: [{ name: "value", type: "number" }],
       hidden: (props) => !props.range
     },
     step: {
@@ -1765,6 +1863,20 @@ const sliderMeta = {
       description: "Tick mark of Slider, type of key must be number, and must in closed interval [min, max], each mark can declare its own style"
     }
   },
+  states: {
+    value: {
+      type: "writable",
+      variableType: "number",
+      valueProp: "value",
+      onChangeProp: "onChange"
+    },
+    value2: {
+      type: "writable",
+      variableType: "number",
+      valueProp: "value2",
+      onChangeProp: "onChange2"
+    }
+  },
   defaultStyles: {
     width: "200px",
     maxWidth: "100%"
@@ -2197,6 +2309,15 @@ function NavigateTabs({ componentProps, studioOps }) {
 function OutlineMessage() {
   return /* @__PURE__ */ React__default.default.createElement("div", null, "* To re-arrange tab panes, use the Outline panel");
 }
+function getActiveKeyOptions(props) {
+  const options = /* @__PURE__ */ new Set();
+  traverseReactEltTree(props.children, (elt) => {
+    if ((elt == null ? void 0 : elt.type) === TabPane && typeof (elt == null ? void 0 : elt.key) === "string") {
+      options.add(elt.key);
+    }
+  });
+  return Array.from(options.keys());
+}
 const tabsMeta = {
   name: "AntdTabs",
   displayName: "Antd Tabs",
@@ -2263,17 +2384,20 @@ const tabsMeta = {
     activeKey: {
       type: "choice",
       editOnly: true,
-      uncontrolledProp: "defaultActiveKey",
       description: "Initial active TabPane's key",
-      options: (props) => {
-        const options = /* @__PURE__ */ new Set();
-        traverseReactEltTree(props.children, (elt) => {
-          if ((elt == null ? void 0 : elt.type) === TabPane && typeof (elt == null ? void 0 : elt.key) === "string") {
-            options.add(elt.key);
+      options: getActiveKeyOptions
+    },
+    onChange: {
+      type: "eventHandler",
+      argTypes: [
+        {
+          name: "activeKey",
+          type: {
+            type: "choice",
+            options: getActiveKeyOptions
           }
-        });
-        return Array.from(options.keys());
-      }
+        }
+      ]
     },
     children: {
       type: "slot",
@@ -2320,6 +2444,14 @@ const tabsMeta = {
       ]
     }
   },
+  states: {
+    activeKey: {
+      type: "writable",
+      variableType: "array",
+      valueProp: "activeKey",
+      onChangeProp: "onChange"
+    }
+  },
   actions: [
     {
       type: "custom-action",