@mirohq/design-system-dialog 0.1.0-dialog.0

package/dist/module.js

@@ -0,0 +1,688 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useRef, useEffect, forwardRef } from 'react';
+import { useId } from '@mirohq/design-system-use-id';
+import { useBrowserNavigation } from '@mirohq/design-system-use-browser-navigation';
+import { isTopmostLayer, useOverlay, useOverlayExit } from '@mirohq/design-system-use-overlay';
+import { Primitive } from '@mirohq/design-system-primitive';
+import { composeHandlers, mergeRefs } from '@mirohq/design-system-utils';
+import { createPortal } from 'react-dom';
+import { useFocusTrap } from '@mirohq/design-system-use-focus-trap';
+import { useScrollLock } from '@mirohq/design-system-use-scroll-lock';
+import { keyframes, styled } from '@mirohq/design-system-stitches';
+
+const DialogContext = createContext(
+  void 0
+);
+const useDialogContext = () => {
+  const context = useContext(DialogContext);
+  if (context === void 0) {
+    throw new Error("Dialog parts must be rendered within a <Dialog> root");
+  }
+  return context;
+};
+
+const Root = ({ children, ...options }) => {
+  var _a, _b, _c, _d, _e;
+  const depth = ((_b = (_a = useContext(DialogContext)) == null ? void 0 : _a.depth) != null ? _b : 0) + 1;
+  const generatedId = useId();
+  const id = (_c = options.id) != null ? _c : generatedId;
+  const role = (_d = options.role) != null ? _d : "dialog";
+  const modal = (_e = options.modal) != null ? _e : true;
+  const animated = options.animated === true;
+  const controlled = options.open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    options.defaultOpen === true
+  );
+  const open = controlled ? options.open === true : uncontrolledOpen;
+  if (controlled && uncontrolledOpen !== open) setUncontrolledOpen(open);
+  const [exiting, setExiting] = useState(false);
+  const previousOpen = useRef(open);
+  if (previousOpen.current !== open) {
+    previousOpen.current = open;
+    if (open) {
+      if (exiting) setExiting(false);
+    } else if (animated) {
+      setExiting(true);
+    }
+  }
+  const state = open ? "open" : exiting ? "closing" : "closed";
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const reportedOpen = useRef(open);
+  const resolvedOpen = useRef(open);
+  useEffect(() => {
+    var _a2, _b2;
+    if (resolvedOpen.current === open) return;
+    resolvedOpen.current = open;
+    if (reportedOpen.current === open) return;
+    reportedOpen.current = open;
+    (_b2 = (_a2 = optionsRef.current).onOpenChange) == null ? void 0 : _b2.call(_a2, open);
+  });
+  const setOpen = (next) => {
+    var _a2, _b2;
+    if (open === next) return;
+    reportedOpen.current = next;
+    (_b2 = (_a2 = optionsRef.current).onOpenChange) == null ? void 0 : _b2.call(_a2, next);
+    if (!controlled) setUncontrolledOpen(next);
+  };
+  const onEscapeRef = useRef(() => {
+  });
+  onEscapeRef.current = (event) => {
+    var _a2, _b2;
+    if (!isTopmostLayer(id)) return;
+    (_b2 = (_a2 = optionsRef.current).onEscapeKeyDown) == null ? void 0 : _b2.call(_a2, event);
+    if (event.defaultPrevented) return;
+    if (optionsRef.current.closeOnEscape === false) return;
+    setOpen(false);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onEscapeRef.current(event);
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [open]);
+  const onBackRef = useRef(() => false);
+  onBackRef.current = () => {
+    var _a2, _b2;
+    const payload = {
+      defaultPrevented: false,
+      preventDefault() {
+        payload.defaultPrevented = true;
+      }
+    };
+    (_b2 = (_a2 = optionsRef.current).onBackNavigation) == null ? void 0 : _b2.call(_a2, payload);
+    if (payload.defaultPrevented === true) return false;
+    setOpen(false);
+    return !controlled;
+  };
+  const onForwardRef = useRef(() => false);
+  onForwardRef.current = () => {
+    var _a2, _b2;
+    const payload = {
+      defaultPrevented: false,
+      preventDefault() {
+        payload.defaultPrevented = true;
+      }
+    };
+    (_b2 = (_a2 = optionsRef.current).onForwardNavigation) == null ? void 0 : _b2.call(_a2, payload);
+    if (payload.defaultPrevented === true) return false;
+    if (optionsRef.current.closeOnBack !== true) return false;
+    setOpen(true);
+    return !controlled;
+  };
+  useBrowserNavigation({
+    enabled: options.closeOnBack === true,
+    open,
+    onBack: () => onBackRef.current(),
+    onForward: () => onForwardRef.current(),
+    // The dialog's nesting depth is what a returning dialog recognizes its
+    // own spent entry by: the instance is new after a remount, but the
+    // position in the stack is the same.
+    claim: "dialog:".concat(depth)
+  });
+  const insidePressRef = useRef(false);
+  useEffect(() => {
+    if (!open) return;
+    const contentId = "".concat(id, "-content");
+    const onPointerDown = (event) => {
+      const content = document.getElementById(contentId);
+      insidePressRef.current = content !== null && event.target instanceof Node && content.contains(event.target);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, id]);
+  const interactOutside = (event) => {
+    var _a2, _b2;
+    if (insidePressRef.current) return;
+    (_a2 = options.onInteractOutside) == null ? void 0 : _a2.call(options, event);
+    if (event.defaultPrevented) return;
+    if (!((_b2 = options.closeOnInteractOutside) != null ? _b2 : role === "dialog")) return;
+    setOpen(false);
+  };
+  const interactOutsideRef = useRef(interactOutside);
+  interactOutsideRef.current = interactOutside;
+  const backdropRef = useRef(null);
+  const triggerRef = useRef(null);
+  const closeRef = useRef(null);
+  useEffect(() => {
+    if (!open || modal) return;
+    const contentId = "".concat(id, "-content");
+    const onClick = (event) => {
+      var _a2, _b2;
+      if (!isTopmostLayer(id)) return;
+      if (!(event.target instanceof Node)) return;
+      if (((_a2 = document.getElementById(contentId)) == null ? void 0 : _a2.contains(event.target)) === true)
+        return;
+      if (((_b2 = triggerRef.current) == null ? void 0 : _b2.contains(event.target)) === true) return;
+      interactOutsideRef.current(event);
+    };
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, [open, modal, id]);
+  const [parts, setParts] = useState({
+    title: false,
+    description: false
+  });
+  return /* @__PURE__ */ jsx(
+    DialogContext.Provider,
+    {
+      value: {
+        state,
+        open,
+        mounted: state !== "closed",
+        modal,
+        role,
+        id,
+        ids: {
+          content: "".concat(id, "-content"),
+          title: "".concat(id, "-title"),
+          description: "".concat(id, "-description")
+        },
+        depth,
+        container: null,
+        backdropRef,
+        triggerRef,
+        closeRef,
+        parts,
+        setParts,
+        toggle: () => setOpen(!open),
+        close: () => setOpen(false),
+        interactOutside,
+        exitComplete: () => setExiting(false)
+      },
+      children
+    }
+  );
+};
+
+const Trigger$1 = forwardRef(
+  ({ asChild = false, ...props }, forwardedRef) => {
+    const { open, state, ids, toggle, triggerRef } = useDialogContext();
+    const consumer = composeHandlers(
+      { onClick: toggle },
+      asChild ? props : { type: "button", ...props }
+    );
+    return /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        ...consumer,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? ids.content : void 0,
+        "data-state": state,
+        asChild,
+        ref: mergeRefs([triggerRef, forwardedRef])
+      }
+    );
+  }
+);
+
+const Portal$1 = ({ children, container }) => {
+  const context = useDialogContext();
+  if (!context.mounted || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      DialogContext.Provider,
+      {
+        value: { ...context, container: container != null ? container : null },
+        children
+      }
+    ),
+    container != null ? container : document.body
+  );
+};
+
+const Backdrop$1 = forwardRef(
+  (props, forwardedRef) => {
+    const { modal, state, id, container, backdropRef, interactOutside } = useDialogContext();
+    if (!modal) return null;
+    const consumer = composeHandlers(
+      {
+        // Only the topmost dialog of a stack answers an outside press.
+        onClick: (event) => {
+          if (isTopmostLayer(id)) interactOutside(event.nativeEvent);
+        }
+      },
+      props
+    );
+    return (
+      // role=presentation: the backdrop is a purely visual layer; its press
+      // is the pointer half of an outside dismissal, with Escape as the
+      // keyboard path (jsx-a11y's keyboard pairing doesn't apply).
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "presentation",
+          ...consumer,
+          "data-state": state,
+          "data-scoped": container === null ? void 0 : "",
+          ref: mergeRefs([backdropRef, forwardedRef])
+        }
+      )
+    );
+  }
+);
+
+const Viewport = forwardRef(
+  ({ fullScreen, ...props }, forwardedRef) => {
+    const { state, id, modal, container, interactOutside } = useDialogContext();
+    const consumer = composeHandlers(
+      {
+        // Box presses bubble up here — only a press that started on the
+        // viewport itself is an outside interaction, and only the topmost
+        // dialog of a stack answers it.
+        onClick: (event) => {
+          if (event.target !== event.currentTarget) return;
+          if (!isTopmostLayer(id)) return;
+          interactOutside(event.nativeEvent);
+        }
+      },
+      props
+    );
+    return (
+      // role=presentation: a purely presentational positioning wrapper — the
+      // press it answers is the pointer half of an outside dismissal, with
+      // Escape as the keyboard path.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "presentation",
+          ...consumer,
+          "data-state": state,
+          "data-scoped": container === null ? void 0 : "",
+          "data-modal": modal ? "" : void 0,
+          "data-full-screen": fullScreen === true ? "" : void 0,
+          ref: forwardedRef
+        }
+      )
+    );
+  }
+);
+
+const Content$1 = forwardRef(
+  ({ initialFocus, ...props }, forwardedRef) => {
+    const {
+      state,
+      open,
+      modal,
+      role,
+      id,
+      ids,
+      depth,
+      container,
+      backdropRef,
+      triggerRef,
+      closeRef,
+      parts,
+      exitComplete
+    } = useDialogContext();
+    const contentRef = useRef(null);
+    useOverlay(contentRef, {
+      enabled: open,
+      id,
+      depth,
+      modal,
+      backdrop: () => backdropRef.current,
+      initialFocus,
+      // A pointer press opens without focusing the trigger (the DS Button
+      // suppresses mousedown's native focus), so the close would find only
+      // the body to restore to — fall back to the trigger, the invoker APG
+      // says focus returns to.
+      restoreFocus: () => triggerRef.current
+    });
+    useOverlayExit(contentRef, {
+      exiting: !open,
+      boundary: container,
+      backdrop: () => backdropRef.current,
+      onExitComplete: exitComplete
+    });
+    useScrollLock(modal, container != null ? container : void 0);
+    useFocusTrap(contentRef, {
+      // Only a modal dialog traps, and only while topmost — a nested dialog
+      // owns focus while open.
+      enabled: () => modal && isTopmostLayer(id),
+      // The Close part is the cycle's last stop wherever it renders (SPEC).
+      last: () => closeRef.current
+    });
+    useEffect(() => {
+      if (!open) return;
+      const element = contentRef.current;
+      if (element === null) return;
+      if (parts.title || document.getElementById(ids.title) !== null) return;
+      if (element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby")) {
+        return;
+      }
+      console.warn(
+        "[Dialog] the dialog resolves no accessible name: render a <Dialog.Title>, or give Content an aria-label when it truly cannot have one."
+      );
+    }, [open, parts.title, ids.title]);
+    const labelling = {};
+    if (parts.title && props["aria-labelledby"] == null) {
+      labelling["aria-labelledby"] = ids.title;
+    }
+    if (parts.description && props["aria-describedby"] == null) {
+      labelling["aria-describedby"] = ids.description;
+    }
+    return (
+      // A neutral element with the role, not <dialog>: the window is the
+      // initial focus target, so it carries tabindex — which HTML forbids on
+      // <dialog> — and the native element only pays off via showModal(),
+      // which this contract deliberately doesn't use.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          ...labelling,
+          role,
+          id: ids.content,
+          "aria-modal": modal || void 0,
+          tabIndex: -1,
+          "data-state": state,
+          ref: mergeRefs([contentRef, forwardedRef])
+        }
+      )
+    );
+  }
+);
+
+const Title$1 = forwardRef(
+  ({ asChild = false, ...props }, forwardedRef) => {
+    const { ids, setParts } = useDialogContext();
+    useEffect(() => {
+      setParts((parts) => parts.title ? parts : { ...parts, title: true });
+      return () => setParts((parts) => parts.title ? { ...parts, title: false } : parts);
+    }, [setParts]);
+    return /* @__PURE__ */ jsx(
+      Primitive.h2,
+      {
+        ...props,
+        id: ids.title,
+        asChild,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+
+const Description$1 = forwardRef(
+  ({ asChild = false, ...props }, forwardedRef) => {
+    const { ids, setParts } = useDialogContext();
+    useEffect(() => {
+      setParts(
+        (parts) => parts.description ? parts : { ...parts, description: true }
+      );
+      return () => setParts(
+        (parts) => parts.description ? { ...parts, description: false } : parts
+      );
+    }, [setParts]);
+    return /* @__PURE__ */ jsx(
+      Primitive.p,
+      {
+        ...props,
+        id: ids.description,
+        asChild,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+
+const Close$1 = forwardRef(
+  ({ asChild = false, ...props }, forwardedRef) => {
+    const { close, closeRef } = useDialogContext();
+    const consumer = composeHandlers(
+      { onClick: close },
+      asChild ? props : { type: "button", ...props }
+    );
+    return /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        ...consumer,
+        asChild,
+        ref: mergeRefs([closeRef, forwardedRef])
+      }
+    );
+  }
+);
+
+const useDialog = () => {
+  const context = useDialogContext();
+  return {
+    id: context.id,
+    isOpen: context.open,
+    state: context.state,
+    modal: context.modal,
+    // Idempotent: toggle() would close an already-open dialog.
+    open: () => {
+      if (!context.open) context.toggle();
+    },
+    close: context.close,
+    toggle: context.toggle
+  };
+};
+
+const ANIMATION_DURATION = "250ms";
+const MOTION = "@media (prefers-reduced-motion: no-preference)";
+
+const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 }
+});
+const fadeOut = keyframes({
+  from: { opacity: 1 },
+  to: { opacity: 0 }
+});
+const Backdrop = styled(Backdrop$1, {
+  position: "fixed",
+  inset: 0,
+  zIndex: "$dialog",
+  backgroundColor: "$background-alpha-neutrals-overlay",
+  // A scoped dialog (Portal container) pins to the container, not the page.
+  "&[data-scoped]": {
+    position: "absolute"
+  },
+  [MOTION]: {
+    animation: "".concat(fadeIn, " ").concat(ANIMATION_DURATION, " ease-out"),
+    // `forwards` holds the final frame until the unmount lands.
+    '&[data-state="closing"]': {
+      animation: "".concat(fadeOut, " ").concat(ANIMATION_DURATION, " ease-out forwards")
+    }
+  }
+});
+
+const Close = styled(Close$1, {
+  position: "absolute",
+  top: "$300",
+  right: "$300"
+});
+
+const Banner = styled(Primitive.div, {
+  margin: "-$500 -$500 0",
+  // The floor yields on short screens (text zoom, 400% reflow): the media
+  // must not eat the space the title and actions need.
+  minHeight: "min(300px, 40vh)",
+  borderTopLeftRadius: "$100",
+  borderTopRightRadius: "$100",
+  overflow: "hidden",
+  backgroundColor: "$background-primary-subtle",
+  // Media dropped in fills the slot with no hand-made styles.
+  "& > img, & > video": {
+    display: "block",
+    width: "100%",
+    height: "100%",
+    objectFit: "contain"
+  }
+});
+const Title = styled(Title$1, {
+  fontFamily: "$heading",
+  fontSize: "$300",
+  lineHeight: 1.35,
+  fontWeight: 400,
+  fontFeatureSettings: "'ss01'",
+  padding: "$400 $1200 $100 $500",
+  margin: "-$500 -$500 0",
+  // A banner before it already consumed the window's top inset, so the title
+  // must not escape it a second time.
+  ["".concat(Banner, " ~ &")]: {
+    marginTop: 0
+  }
+});
+const Description = styled(Description$1, {
+  fontFamily: "$body",
+  fontSize: "$200",
+  lineHeight: 1.5,
+  padding: "$200 $500",
+  margin: "0 -$500",
+  // As the last part, its own $200 plus the window's $500 would overshoot
+  // the $500 closing inset.
+  "&:last-child": {
+    marginBottom: "-$200"
+  }
+});
+const Actions = styled(Primitive.div, {
+  display: "flex",
+  gap: "$100",
+  // The window's inset supplies the $500 closing edge below the row.
+  padding: "$200 $500 0",
+  margin: "0 -$500"
+});
+
+const scaleIn = keyframes({
+  from: { opacity: 0, transform: "scale(0.8)" },
+  to: { opacity: 1, transform: "scale(1)" }
+});
+const scaleOut = keyframes({
+  from: { opacity: 1, transform: "scale(1)" },
+  to: { opacity: 0, transform: "scale(0.8)" }
+});
+const StyledViewport = styled(Viewport, {
+  position: "fixed",
+  inset: 0,
+  zIndex: "$dialog",
+  display: "flex",
+  overflow: "auto",
+  padding: "$300",
+  "&[data-scoped]": {
+    position: "absolute"
+  },
+  "&[data-full-screen]": {
+    padding: 0
+  },
+  "&:not([data-modal])": {
+    pointerEvents: "none"
+  }
+});
+const StyledContent = styled(Content$1, {
+  position: "relative",
+  margin: "auto",
+  boxSizing: "border-box",
+  width: "fit-content",
+  // The floors yield to the screen: WCAG 1.4.10 reflow requires the window
+  // to fit a 320px viewport (400% zoom), so neither bound may exceed the
+  // layer's width.
+  minWidth: "min(560px, 100%)",
+  maxWidth: "min(960px, 100%)",
+  backgroundColor: "$background-neutrals",
+  color: "$text-neutrals",
+  borderRadius: "$100",
+  boxShadow: "$elevation-300",
+  overflowWrap: "break-word",
+  outline: "none",
+  // The window stays interactive when its (non-modal) layer stops
+  // intercepting presses.
+  pointerEvents: "auto",
+  padding: "$500",
+  ["&:has(".concat(Title, ")")]: {
+    paddingTop: 0,
+    ["& ".concat(Banner)]: { marginTop: 0 },
+    ["& ".concat(Title)]: { marginTop: 0 }
+  },
+  ["&:has(".concat(Actions, ")")]: {
+    paddingBottom: 0,
+    ["& ".concat(Actions)]: { paddingBottom: "$500" },
+    ["& ".concat(Description, ":last-child")]: { marginBottom: 0, paddingBottom: "$500" }
+  },
+  [MOTION]: {
+    animation: "".concat(scaleIn, " ").concat(ANIMATION_DURATION, " ease-out"),
+    '&[data-state="closing"]': {
+      animation: "".concat(scaleOut, " ").concat(ANIMATION_DURATION, " ease-out forwards")
+    }
+  },
+  variants: {
+    scroll: {
+      viewport: {},
+      window: {
+        maxHeight: "100%",
+        overflow: "auto",
+        ["& ".concat(Title)]: {
+          position: "sticky",
+          top: 0,
+          backgroundColor: "$background-neutrals"
+        },
+        ["& ".concat(Close)]: {
+          position: "sticky",
+          top: "$300",
+          right: "auto",
+          float: "right",
+          marginRight: "-$200",
+          zIndex: 1
+        },
+        ["& ".concat(Banner)]: {
+          overflow: "visible"
+        }
+      }
+    },
+    flat: {
+      true: {
+        padding: 0,
+        overflow: "hidden",
+        ["& ".concat(Banner)]: { margin: 0 },
+        ["& ".concat(Title)]: { margin: 0 },
+        ["& ".concat(Description)]: { margin: 0 },
+        ["& ".concat(Description, ":last-child")]: { paddingBottom: "$500" },
+        ["& ".concat(Actions)]: { margin: 0, paddingBottom: "$500" }
+      }
+    },
+    fullScreen: {
+      true: {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        maxWidth: "none",
+        margin: 0,
+        borderRadius: 0
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      flat: true,
+      scroll: "window",
+      css: { overflow: "auto" }
+    }
+  ],
+  defaultVariants: {
+    scroll: "viewport"
+  }
+});
+const Content = forwardRef(({ fullScreen, ...props }, forwardedRef) => /* @__PURE__ */ jsx(StyledViewport, { fullScreen: fullScreen === true, children: /* @__PURE__ */ jsx(StyledContent, { ...props, fullScreen, ref: forwardedRef }) }));
+
+const Portal = Portal$1;
+
+const Trigger = Trigger$1;
+
+const Dialog = (props) => /* @__PURE__ */ jsx(Root, { ...props });
+Dialog.Trigger = Trigger;
+Dialog.Portal = Portal;
+Dialog.Backdrop = Backdrop;
+Dialog.Content = Content;
+Dialog.Banner = Banner;
+Dialog.Title = Title;
+Dialog.Description = Description;
+Dialog.Actions = Actions;
+Dialog.Close = Close;
+
+export { Dialog, useDialog };
+//# sourceMappingURL=module.js.map