@stratakit/structures/dist/DEV/Dialog.js

Medium-sized component structures for the Strata design system

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 })
      ]
    }
  ) }) });
});
DEV: DialogRoot.displayName = "Dialog.Root";
function DialogWrapper(props) {
  const [wrapper, setWrapper] = React.useState(null);
  const store = AkDialog.useDialogContext();
  const open = useStoreState(store, (state) => {
    return props.open ?? state?.open;
  });
  const setOpen = useUnreactiveCallback(store?.setOpen);
  const popoverProps = usePopoverApi({
    element: wrapper,
    open,
    setOpen
  });
  const mounted = useStoreState(store, "mounted");
  return /* @__PURE__ */ jsx(
    Portal,
    {
      className: "\u{1F95D}DialogWrapper",
      ref: setWrapper,
      ...popoverProps,
      hidden: mounted ? void 0 : true,
      children: props.children
    }
  );
}
DEV: DialogWrapper.displayName = "DialogWrapper";
const DialogHeader = forwardRef(
  (props, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      Role,
      {
        ...props,
        className: cx("\u{1F95D}DialogHeader", props.className),
        ref: forwardedRef
      }
    );
  }
);
DEV: DialogHeader.displayName = "Dialog.Header";
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
      }
    );
  }
);
DEV: DialogHeading.displayName = "Dialog.Heading";
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
      }
    ) });
  }
);
DEV: DialogCloseButton.displayName = "Dialog.CloseButton";
const DialogContent = forwardRef(
  (props, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      Role,
      {
        ...props,
        className: cx("\u{1F95D}DialogContent", props.className),
        ref: forwardedRef
      }
    );
  }
);
DEV: DialogContent.displayName = "Dialog.Content";
const DialogFooter = forwardRef(
  (props, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      Role,
      {
        ...props,
        className: cx("\u{1F95D}DialogFooter", props.className),
        ref: forwardedRef
      }
    );
  }
);
DEV: DialogFooter.displayName = "Dialog.Footer";
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 });
        })
      }
    );
  }
);
DEV: DialogActionList.displayName = "Dialog.ActionList";
const DialogBackdrop = forwardRef(
  (props, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      Role,
      {
        ...props,
        className: cx("\u{1F95D}DialogBackdrop", props.className),
        ref: forwardedRef
      }
    );
  }
);
DEV: DialogBackdrop.displayName = "Dialog.Backdrop";
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
};