@plasmicpkgs/antd5 0.0.148 → 0.0.150

package/dist/antd.esm.js

@@ -5712,29 +5712,48 @@ var __objRest$9 = (source, exclude) => {
     }
   return target;
 };
+const styleSections = [
+  "visibility",
+  "typography",
+  "spacing",
+  "background",
+  "transform",
+  "transitions",
+  "layout",
+  "overflow",
+  "border",
+  "shadows",
+  "effects"
+];
 function AntdModal(props) {
+  const [isOpen, setIsOpen] = useState(false);
   const _a = props, {
     onOpenChange,
     onOk,
     onCancel,
     open,
+    width,
     footer,
     hideFooter,
     modalScopeClassName,
-    wrapClassName
+    wrapClassName,
+    trigger
   } = _a, rest = __objRest$9(_a, [
     "onOpenChange",
     "onOk",
     "onCancel",
     "open",
+    "width",
     "footer",
     "hideFooter",
     "modalScopeClassName",
-    "wrapClassName"
+    "wrapClassName",
+    "trigger"
   ]);
   const memoOnOk = React.useMemo(() => {
     if (onOpenChange || onOk) {
       return (e) => {
+        setIsOpen(false);
         onOpenChange == null ? void 0 : onOpenChange(false);
         onOk == null ? void 0 : onOk(e);
       };
@@ -5745,6 +5764,7 @@ function AntdModal(props) {
   const memoOnCancel = React.useMemo(() => {
     if (onOpenChange || onCancel) {
       return (e) => {
+        setIsOpen(false);
         onOpenChange == null ? void 0 : onOpenChange(false);
         onCancel == null ? void 0 : onCancel(e);
       };
@@ -5752,27 +5772,47 @@ function AntdModal(props) {
       return void 0;
     }
   }, [onOpenChange, onCancel]);
-  return /* @__PURE__ */ React.createElement(
+  const widthProp = useMemo(() => {
+    if (!width)
+      return void 0;
+    if (typeof width === "number")
+      return width;
+    if (typeof width !== "string")
+      return void 0;
+    if (/^\d+$/.test(width)) {
+      return +width;
+    }
+    return width;
+  }, [width]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     Modal,
     __spreadProps$5(__spreadValues$c({}, rest), {
       onOk: memoOnOk,
+      width: widthProp,
       onCancel: memoOnCancel,
-      open,
+      open: isOpen || open,
       footer: hideFooter ? null : footer != null ? footer : void 0,
       wrapClassName,
       className: `${props.className} ${props.defaultStylesClassName} ${modalScopeClassName}`
     })
-  );
+  ), trigger ? /* @__PURE__ */ React.createElement("div", { onClick: () => setIsOpen(true) }, trigger) : null);
 }
 function registerModal(loader) {
   registerComponentHelper(loader, AntdModal, {
     name: "plasmic-antd5-modal",
     displayName: "Modal",
+    styleSections,
     description: "[See tutorial video](https://www.youtube.com/watch?v=TkjxNJIFun8)",
     props: {
       open: {
         type: "boolean"
       },
+      width: {
+        type: "string",
+        defaultValueHint: "520px",
+        description: "Change the width of the modal",
+        helpText: "Default unit is px. You can also use % or other units for width."
+      },
       children: {
         type: "slot",
         defaultValue: {
@@ -5792,6 +5832,22 @@ function registerModal(loader) {
           return (_a = ps.hideFooter) != null ? _a : false;
         }
       },
+      trigger: __spreadValues$c({
+        type: "slot",
+        hidePlaceholder: true,
+        defaultValue: {
+          type: "component",
+          name: "plasmic-antd5-button",
+          props: {
+            children: {
+              type: "text",
+              value: "Show modal"
+            }
+          }
+        }
+      }, {
+        mergeWithParent: true
+      }),
       closeIcon: {
         type: "slot",
         hidePlaceholder: true
@@ -5825,7 +5881,7 @@ function registerModal(loader) {
       },
       wrapClassName: {
         type: "class",
-        displayName: "Modal container",
+        displayName: "Modal overlay",
         styleSections: ["background"]
       },
       modalScopeClassName: {
@@ -5836,6 +5892,7 @@ function registerModal(loader) {
         type: "class",
         displayName: "Modal content",
         noSelf: true,
+        styleSections,
         selectors: [
           {
             selector: ":modal .ant-modal-content",