@stratakit/structures/dist/Dialog.js

Medium-sized component structures for the Strata design system

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";
import { Portal, PortalContext } from "@ariakit/react/portal";
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, useUnreactiveCallback } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { Dismiss } from "./~utils.icons.js";
import { useInit } from "./~utils.useInit.js";
const DialogRoot = forwardRef((props, forwardedRef) => {
  useInit();
  const {
    backdrop = true,
    unmountOnHide = true,
    ...rest
  } = props;
  const store = AkDialog.useDialogStore();
  const contentElement = useStoreState(store, "contentElement");
  const mounted = useStoreState(store, (state) => {
    if (!unmountOnHide) return true;
    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
        })]
      })
    })
  });
});
function DialogWrapper(props) {
  const $ = _c(10);
  const [wrapper, setWrapper] = React.useState(null);
  const store = AkDialog.useDialogContext();
  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);
  const setOpen = useUnreactiveCallback(store?.setOpen);
  let t1;
  if ($[2] !== open || $[3] !== setOpen || $[4] !== wrapper) {
    t1 = {
      element: wrapper,
      open,
      setOpen
    };
    $[2] = open;
    $[3] = setOpen;
    $[4] = wrapper;
    $[5] = t1;
  } else {
    t1 = $[5];
  }
  const popoverProps = usePopoverApi(t1);
  const mounted = useStoreState(store, "mounted");
  const t2 = mounted ? void 0 : true;
  let t3;
  if ($[6] !== popoverProps || $[7] !== props.children || $[8] !== t2) {
    t3 = jsx(Portal, {
      className: "\u{1F95D}DialogWrapper",
      ref: setWrapper,
      ...popoverProps,
      hidden: t2,
      children: props.children
    });
    $[6] = popoverProps;
    $[7] = props.children;
    $[8] = t2;
    $[9] = t3;
  } else {
    t3 = $[9];
  }
  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,
  DialogCloseButton as CloseButton,
  DialogContent as Content,
  DialogFooter as Footer,
  DialogHeader as Header,
  DialogHeading as Heading,
  DialogRoot as Root
};