@cerberus-design/react/dist/context/confirm-modal.cjs

The Cerberus Design React component library.

'use client';
'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const css = require('styled-system/css');
const jsx = require('styled-system/jsx');
const button = require('../components/button/button.cjs');
const show = require('../components/show/show.cjs');
const avatar = require('../components/avatar/avatar.cjs');
const primitives = require('../components/dialog/primitives.cjs');
const dialog = require('../components/dialog/dialog.cjs');
const cerberus = require('./cerberus.cjs');

const ConfirmModalContext = React.createContext(null);
function ConfirmModal(props) {
  const [open, setOpen] = React.useState(false);
  const [content, setContent] = React.useState(null);
  const resolveRef = React.useRef(null);
  const showAvatar = content?.showAvatar ?? true;
  const kind = content?.kind ?? "non-destructive";
  const { icons } = cerberus.useCerberusContext();
  const { confirmModal: ConfirmIcon } = icons;
  const palette = React.useMemo(
    () => kind === "destructive" ? "danger" : "action",
    [kind]
  );
  const handleChoice = React.useCallback(
    (e) => {
      const target = e.currentTarget;
      if (target.value === "true") {
        resolveRef.current?.(true);
      }
      resolveRef.current?.(false);
      setOpen(false);
    },
    [setOpen]
  );
  const handleShow = React.useCallback(
    (options) => {
      return new Promise((resolve) => {
        setContent({ ...options });
        setOpen(true);
        resolveRef.current = resolve;
      });
    },
    [setOpen, setContent]
  );
  const handleOpenChange = React.useCallback(
    ({ open: open2 }) => {
      setOpen(open2);
      if (!open2) {
        resolveRef.current?.(null);
        resolveRef.current = null;
      }
    },
    [setOpen]
  );
  const value = React.useMemo(
    () => ({
      show: handleShow
    }),
    [handleShow]
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(ConfirmModalContext.Provider, { value, children: [
    props.children,
    /* @__PURE__ */ jsxRuntime.jsx(
      primitives.DialogProvider,
      {
        lazyMount: true,
        open,
        onOpenChange: handleOpenChange,
        unmountOnExit: true,
        children: /* @__PURE__ */ jsxRuntime.jsx(
          dialog.Dialog,
          {
            size: "sm",
            style: {
              "--dialog-content-min-h": "auto"
            },
            children: /* @__PURE__ */ jsxRuntime.jsxs(
              jsx.VStack,
              {
                alignItems: "flex-start",
                gap: "md",
                justify: "space-between",
                w: "full",
                children: [
                  /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: showAvatar, children: /* @__PURE__ */ jsxRuntime.jsx(
                    jsx.HStack,
                    {
                      alignSelf: "center",
                      justify: "center",
                      paddingBlockEnd: "md",
                      w: "full",
                      children: /* @__PURE__ */ jsxRuntime.jsx(
                        show.Show,
                        {
                          when: palette === "danger",
                          fallback: /* @__PURE__ */ jsxRuntime.jsx(
                            avatar.Avatar,
                            {
                              gradient: "charon-light",
                              fallback: /* @__PURE__ */ jsxRuntime.jsx(ConfirmIcon, { size: 24 })
                            }
                          ),
                          children: /* @__PURE__ */ jsxRuntime.jsx(
                            avatar.Avatar,
                            {
                              gradient: "hades-dark",
                              fallback: /* @__PURE__ */ jsxRuntime.jsx(ConfirmIcon, { size: 24 })
                            }
                          )
                        }
                      )
                    }
                  ) }),
                  /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogHeading, { children: content?.heading }),
                  /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: content?.description, children: /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogDescription, { children: content?.description }) }),
                  /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "md", pt: "md", w: "full", children: [
                    /* @__PURE__ */ jsxRuntime.jsx(
                      button.Button,
                      {
                        autoFocus: true,
                        className: css.css({
                          w: "1/2"
                        }),
                        name: "confirm",
                        onClick: handleChoice,
                        palette,
                        value: "true",
                        children: content?.actionText
                      }
                    ),
                    /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                      button.Button,
                      {
                        className: css.css({
                          w: "1/2"
                        }),
                        name: "cancel",
                        onClick: handleChoice,
                        usage: "outlined",
                        value: "false",
                        children: content?.cancelText
                      }
                    ) })
                  ] })
                ]
              }
            )
          }
        )
      }
    )
  ] });
}
function useConfirmModal() {
  const context = React.useContext(ConfirmModalContext);
  if (context === null) {
    throw new Error(
      "useConfirmModal must be used within a ConfirmModal Provider"
    );
  }
  return context;
}

exports.ConfirmModal = ConfirmModal;
exports.useConfirmModal = useConfirmModal;