@stratakit/structures 0.4.4 → 0.5.0

package/dist/Dialog.js

@@ -1,3 +1,4 @@
+import { c as _c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AkDialog from "@ariakit/react/dialog";
@@ -6,14 +7,15 @@ import { Role } from "@ariakit/react/role";
 import { useStoreState } from "@ariakit/react/store";
 import { IconButton, Text } from "@stratakit/bricks";
 import { GhostAligner } from "@stratakit/bricks/secret-internals";
-import {
-  forwardRef,
-  usePopoverApi
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, usePopoverApi } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { Dismiss } from "./~utils.icons.js";
 const DialogRoot = forwardRef((props, forwardedRef) => {
-  const { backdrop = true, unmountOnHide = true, ...rest } = props;
+  const {
+    backdrop = true,
+    unmountOnHide = true,
+    ...rest
+  } = props;
   const store = AkDialog.useDialogStore();
   const contentElement = useStoreState(store, "contentElement");
   const mounted = useStoreState(store, (state) => {
@@ -21,143 +23,149 @@ const DialogRoot = forwardRef((props, forwardedRef) => {
     return props.open ?? state?.mounted;
   });
   if (!mounted) return null;
-  return /* @__PURE__ */ jsx(AkDialog.DialogProvider, { store, children: /* @__PURE__ */ jsx(DialogWrapper, { open: props.open, children: /* @__PURE__ */ jsxs(
-    AkDialog.Dialog,
-    {
-      unmountOnHide,
-      portal: false,
-      ...rest,
-      backdrop: backdrop === true ? /* @__PURE__ */ jsx(DialogBackdrop, {}) : backdrop,
-      className: cx("\u{1F95D}Dialog", props.className),
-      ref: forwardedRef,
-      children: [
-        /* @__PURE__ */ jsx(AkDialog.DialogDismiss, { hidden: true }),
-        /* @__PURE__ */ jsx(PortalContext.Provider, { value: contentElement, children: props.children })
-      ]
-    }
-  ) }) });
+  return /* @__PURE__ */ jsx(AkDialog.DialogProvider, {
+    store,
+    children: /* @__PURE__ */ jsx(DialogWrapper, {
+      open: props.open,
+      children: /* @__PURE__ */ jsxs(AkDialog.Dialog, {
+        unmountOnHide,
+        portal: false,
+        ...rest,
+        backdrop: backdrop === true ? /* @__PURE__ */ jsx(DialogBackdrop, {}) : backdrop,
+        className: cx("\u{1F95D}Dialog", props.className),
+        ref: forwardedRef,
+        children: [/* @__PURE__ */ jsx(AkDialog.DialogDismiss, {
+          hidden: true
+        }), /* @__PURE__ */ jsx(PortalContext.Provider, {
+          value: contentElement,
+          children: props.children
+        })]
+      })
+    })
+  });
 });
 function DialogWrapper(props) {
+  const $ = _c(9);
   const [wrapper, setWrapper] = React.useState(null);
   const store = AkDialog.useDialogContext();
-  const open = useStoreState(store, (state) => {
-    return props.open ?? state?.open;
-  });
-  const popoverProps = usePopoverApi({
-    element: wrapper,
-    open
-  });
+  let t0;
+  if ($[0] !== props.open) {
+    t0 = (state) => props.open ?? state?.open;
+    $[0] = props.open;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const open = useStoreState(store, t0);
+  let t1;
+  if ($[2] !== open || $[3] !== wrapper) {
+    t1 = {
+      element: wrapper,
+      open
+    };
+    $[2] = open;
+    $[3] = wrapper;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const popoverProps = usePopoverApi(t1);
   const mounted = useStoreState(store, "mounted");
-  return /* @__PURE__ */ jsx(
-    Portal,
-    {
+  const t2 = mounted ? void 0 : true;
+  let t3;
+  if ($[5] !== popoverProps || $[6] !== props.children || $[7] !== t2) {
+    t3 = jsx(Portal, {
       className: "\u{1F95D}DialogWrapper",
       ref: setWrapper,
       ...popoverProps,
-      hidden: mounted ? void 0 : true,
+      hidden: t2,
       children: props.children
-    }
-  );
-}
-const DialogHeader = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        ...props,
-        className: cx("\u{1F95D}DialogHeader", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const DialogHeading = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      AkDialog.DialogHeading,
-      {
-        ...props,
-        className: cx("\u{1F95D}DialogHeading", props.className),
-        render: /* @__PURE__ */ jsx(Text, { variant: "body-lg", render: props.render ?? /* @__PURE__ */ jsx("h1", {}) }),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const DialogCloseButton = forwardRef(
-  (props, forwardedRef) => {
-    const { label = "Dismiss", ...rest } = props;
-    return /* @__PURE__ */ jsx(GhostAligner, { align: "inline-end", children: /* @__PURE__ */ jsx(
-      AkDialog.DialogDismiss,
-      {
-        ...rest,
-        render: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            render: props.render,
-            variant: "ghost",
-            label,
-            icon: /* @__PURE__ */ jsx(Dismiss, {})
-          }
-        ),
-        ref: forwardedRef
-      }
-    ) });
-  }
-);
-const DialogContent = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        ...props,
-        className: cx("\u{1F95D}DialogContent", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const DialogFooter = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        ...props,
-        className: cx("\u{1F95D}DialogFooter", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const DialogActionList = forwardRef(
-  (props, forwardedRef) => {
-    const { actions, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        role: "list",
-        ...rest,
-        className: cx("\u{1F95D}DialogActionList", props.className),
-        ref: forwardedRef,
-        children: React.Children.map(actions, (action) => {
-          return /* @__PURE__ */ jsx("div", { role: "listitem", children: action });
-        })
-      }
-    );
+    });
+    $[5] = popoverProps;
+    $[6] = props.children;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
   }
-);
-const DialogBackdrop = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        ...props,
-        className: cx("\u{1F95D}DialogBackdrop", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
+  return t3;
+}
+const DialogHeader = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role, {
+    ...props,
+    className: cx("\u{1F95D}DialogHeader", props.className),
+    ref: forwardedRef
+  });
+});
+const DialogHeading = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(AkDialog.DialogHeading, {
+    ...props,
+    className: cx("\u{1F95D}DialogHeading", props.className),
+    render: /* @__PURE__ */ jsx(Text, {
+      variant: "body-lg",
+      render: props.render ?? /* @__PURE__ */ jsx("h1", {})
+    }),
+    ref: forwardedRef
+  });
+});
+const DialogCloseButton = forwardRef((props, forwardedRef) => {
+  const {
+    label = "Dismiss",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(GhostAligner, {
+    align: "inline-end",
+    children: /* @__PURE__ */ jsx(AkDialog.DialogDismiss, {
+      ...rest,
+      render: /* @__PURE__ */ jsx(IconButton, {
+        render: props.render,
+        variant: "ghost",
+        label,
+        icon: /* @__PURE__ */ jsx(Dismiss, {})
+      }),
+      ref: forwardedRef
+    })
+  });
+});
+const DialogContent = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role, {
+    ...props,
+    className: cx("\u{1F95D}DialogContent", props.className),
+    ref: forwardedRef
+  });
+});
+const DialogFooter = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role, {
+    ...props,
+    className: cx("\u{1F95D}DialogFooter", props.className),
+    ref: forwardedRef
+  });
+});
+const DialogActionList = forwardRef((props, forwardedRef) => {
+  const {
+    actions,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(Role, {
+    role: "list",
+    ...rest,
+    className: cx("\u{1F95D}DialogActionList", props.className),
+    ref: forwardedRef,
+    children: React.Children.map(actions, (action) => {
+      return /* @__PURE__ */ jsx("div", {
+        role: "listitem",
+        children: action
+      });
+    })
+  });
+});
+const DialogBackdrop = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role, {
+    ...props,
+    className: cx("\u{1F95D}DialogBackdrop", props.className),
+    ref: forwardedRef
+  });
+});
 export {
   DialogActionList as ActionList,
   DialogBackdrop as Backdrop,