braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/private/Modal/Modal.cjs

@@ -0,0 +1,215 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const FocusLock = require("react-focus-lock");
+const lib_components_private_Modal_ariaHideOthers_cjs = require("./ariaHideOthers.cjs");
+const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
+const lib_components_BraidPortal_BraidPortal_cjs = require("../../BraidPortal/BraidPortal.cjs");
+const lib_components_private_Modal_ModalExternalGutter_cjs = require("./ModalExternalGutter.cjs");
+const lib_components_private_Modal_ModalContent_cjs = require("./ModalContent.cjs");
+const lib_components_private_Modal_Modal_css_cjs = require("./Modal.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const FocusLock__default = /* @__PURE__ */ _interopDefaultCompat(FocusLock);
+const AllowCloseContext = React.createContext(true);
+const ModalPortal = ({ children }) => {
+  const [modalElement, setElement] = React.useState(null);
+  React.useEffect(() => {
+    const modalContainerId = "braid-modal-container";
+    let element = document.getElementById(modalContainerId);
+    if (!element) {
+      element = document.createElement("div");
+      element.setAttribute("id", modalContainerId);
+      element.setAttribute("class", lib_components_private_Modal_Modal_css_cjs.fixedStackingContext);
+      document.body.appendChild(element);
+    }
+    setElement(element);
+  }, []);
+  if (!modalElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidPortal_BraidPortal_cjs.BraidPortal, { container: modalElement, children });
+};
+const OPEN_MODAL = 1;
+const CLOSE_MODAL = 2;
+const ANIMATION_COMPLETE = 3;
+const INITIAL = 1;
+const OPEN = 2;
+const OPENING = 3;
+const CLOSED = 4;
+const CLOSING = 5;
+const reducer = (prevState, action) => {
+  switch (action) {
+    case OPEN_MODAL: {
+      switch (prevState) {
+        case INITIAL:
+        case CLOSING:
+        case CLOSED: {
+          return OPENING;
+        }
+      }
+    }
+    case CLOSE_MODAL: {
+      switch (prevState) {
+        case OPEN:
+        case OPENING: {
+          return CLOSING;
+        }
+      }
+    }
+    case ANIMATION_COMPLETE: {
+      switch (prevState) {
+        case CLOSING: {
+          return CLOSED;
+        }
+        case OPENING: {
+          return OPEN;
+        }
+      }
+    }
+  }
+  return prevState;
+};
+const ANIMATION_DURATION = 300;
+const Modal = ({
+  id,
+  open,
+  children,
+  description,
+  onClose,
+  width,
+  closeLabel,
+  illustration,
+  title,
+  headingLevel,
+  position,
+  ...restProps
+}) => {
+  const [trapActive, setTrapActive] = React.useState(true);
+  const [state, dispatch] = React.useReducer(reducer, INITIAL);
+  const allowClose = React.useContext(AllowCloseContext);
+  const shouldFocus = typeof document !== "undefined" && typeof document.hasFocus === "function" && document.hasFocus();
+  const openRef = React.useRef(open);
+  const modalRef = React.useRef(null);
+  const headingRef = React.useRef(null);
+  const closeHandlerRef = React.useRef(onClose);
+  const initiateClose = () => {
+    if (allowClose) {
+      const result = closeHandlerRef.current(false);
+      if (result === false) {
+        return result;
+      }
+      if (openRef.current) {
+        dispatch(CLOSE_MODAL);
+      }
+    }
+  };
+  React.useEffect(() => {
+    openRef.current = open;
+    dispatch(open ? OPEN_MODAL : CLOSE_MODAL);
+  }, [open]);
+  const closing = state === CLOSING;
+  React.useEffect(() => {
+    if (closing) {
+      const timer = setTimeout(() => {
+        dispatch(ANIMATION_COMPLETE);
+      }, ANIMATION_DURATION);
+      return () => clearTimeout(timer);
+    }
+  }, [closing]);
+  const shouldAriaHideOthers = state === OPEN || state === CLOSING;
+  React.useEffect(() => {
+    if (shouldAriaHideOthers && modalRef.current) {
+      return lib_components_private_Modal_ariaHideOthers_cjs.ariaHideOthers(modalRef.current, { delay: ANIMATION_DURATION });
+    }
+  }, [shouldAriaHideOthers]);
+  React.useEffect(() => {
+    if (typeof onClose === "function") {
+      closeHandlerRef.current = onClose;
+    }
+  }, [onClose]);
+  React.useEffect(() => {
+    const event = trapActive ? "blur" : "focus";
+    const handleEvent = () => setTrapActive(!trapActive);
+    window.addEventListener(event, handleEvent);
+    return () => {
+      window.removeEventListener(event, handleEvent);
+    };
+  }, [trapActive]);
+  return state === OPENING || state === OPEN || state === CLOSING ? /* @__PURE__ */ jsxRuntime.jsx(ModalPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    FocusLock__default.default,
+    {
+      className: lib_components_private_Modal_Modal_css_cjs.resetStackingContext,
+      disabled: !trapActive,
+      autoFocus: false,
+      onActivation: () => {
+        if (state === OPEN) {
+          return;
+        }
+        if (headingRef.current && shouldFocus) {
+          headingRef.current.focus();
+        }
+        dispatch(ANIMATION_COMPLETE);
+      },
+      returnFocus: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            onClick: state === OPEN ? initiateClose : void 0,
+            position: "fixed",
+            inset: 0,
+            zIndex: "modalBackdrop",
+            transition: position === "center" ? "fast" : void 0,
+            opacity: state !== OPEN ? 0 : void 0,
+            pointerEvents: state === CLOSING ? "none" : void 0,
+            className: [
+              lib_components_private_Modal_Modal_css_cjs.backdrop,
+              position === "left" || position === "right" && lib_components_private_Modal_Modal_css_cjs.horiztontalTransition
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            position: "fixed",
+            inset: 0,
+            zIndex: "modal",
+            pointerEvents: "none",
+            transition: "fast",
+            opacity: state !== OPEN ? 0 : void 0,
+            paddingLeft: position === "right" ? ["none", "xlarge"] : void 0,
+            paddingRight: position === "left" ? ["none", "xlarge"] : void 0,
+            padding: position === "center" ? lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter : void 0,
+            className: [
+              lib_components_private_Modal_Modal_css_cjs.modalContainer,
+              (position === "left" || position === "right") && lib_components_private_Modal_Modal_css_cjs.horiztontalTransition,
+              state === OPENING && lib_components_private_Modal_Modal_css_cjs.entrance[position],
+              state === CLOSING && position in lib_components_private_Modal_Modal_css_cjs.exit && lib_components_private_Modal_Modal_css_cjs.exit[position]
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_private_Modal_ModalContent_cjs.ModalContent,
+              {
+                id,
+                description,
+                onClose: initiateClose,
+                width,
+                closeLabel,
+                illustration,
+                title,
+                headingLevel,
+                headingRef,
+                modalRef,
+                position,
+                scrollLock: !(state === CLOSING),
+                ...restProps,
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) : null;
+};
+exports.AllowCloseContext = AllowCloseContext;
+exports.Modal = Modal;

package/dist/lib/components/private/Modal/Modal.css.cjs

@@ -0,0 +1,167 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const lib_components_private_Modal_ModalExternalGutter_cjs = require("./ModalExternalGutter.cjs");
+const lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
+const lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
+const lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
+const lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/private/Modal/Modal.css.ts", "braid-design-system");
+const fixedStackingContext = lib_css_atoms_atoms_cjs.atoms({
+  position: "fixed",
+  zIndex: "modal"
+});
+const resetStackingContext = lib_css_atoms_atoms_cjs.atoms({
+  position: "relative",
+  zIndex: 0
+});
+const backdrop = css.style(lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    background: "#000",
+    opacity: 0.4
+  },
+  darkMode: {
+    background: "#000",
+    opacity: 0.6
+  }
+}), "backdrop");
+const reducedMotion = css.style({
+  "@media": {
+    "screen and (prefers-reduced-motion)": {
+      transform: "none !important"
+    }
+  }
+}, "reducedMotion");
+const entrance = {
+  center: [reducedMotion, css.style({
+    transform: "scale(.8)"
+  }, "entrance_center")],
+  right: [reducedMotion, css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
+    mobile: {
+      opacity: 1,
+      transform: "translateX(110%)"
+    },
+    tablet: {
+      opacity: 0,
+      transform: "translateX(40px)"
+    }
+  }), "entrance_right")],
+  left: [reducedMotion, css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
+    mobile: {
+      opacity: 1,
+      transform: "translateX(-110%)"
+    },
+    tablet: {
+      opacity: 0,
+      transform: "translateX(-40px)"
+    }
+  }), "entrance_left")]
+};
+const exit = {
+  right: [reducedMotion, css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
+    mobile: {
+      opacity: 1,
+      transform: "translateX(110%)"
+    },
+    tablet: {
+      opacity: 0,
+      transform: "translateX(10px)"
+    }
+  }), "exit_right")],
+  left: [reducedMotion, css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
+    mobile: {
+      opacity: 1,
+      transform: "translateX(-110%)"
+    },
+    tablet: {
+      opacity: 0,
+      transform: "translateX(-10px)"
+    }
+  }), "exit_left")]
+};
+const easeOut = "cubic-bezier(0.4, 0, 0, 1)";
+const horiztontalTransition = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    transition: `transform .3s ${easeOut}, opacity .3s ${easeOut}`
+  },
+  tablet: {
+    transition: `transform .175s ${easeOut}, opacity .175s ${easeOut}`
+  }
+}), "horiztontalTransition");
+const pointerEventsAll = css.style({
+  pointerEvents: "all"
+}, "pointerEventsAll");
+const gutterSizeVar = css.createVar("gutterSizeVar");
+const fullHeightVar = css.createVar("fullHeightVar");
+const fullWidthVar = css.createVar("fullWidthVar");
+const viewportHeight = css.style({
+  maxHeight: fullHeightVar
+}, "viewportHeight");
+const maxSize = {
+  center: css.style([{
+    maxHeight: cssUtils.calc.subtract(fullHeightVar, cssUtils.calc.multiply(gutterSizeVar, 2)),
+    maxWidth: cssUtils.calc.subtract(fullWidthVar, cssUtils.calc.multiply(gutterSizeVar, 2))
+  }, lib_css_responsiveStyle_cjs.responsiveStyle({
+    mobile: {
+      vars: {
+        [gutterSizeVar]: lib_themes_vars_css_cjs.vars.space[lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.mobile]
+      }
+    },
+    tablet: {
+      vars: {
+        [gutterSizeVar]: lib_themes_vars_css_cjs.vars.space[lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.tablet]
+      }
+    },
+    desktop: {
+      vars: {
+        [gutterSizeVar]: lib_themes_vars_css_cjs.vars.space[lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.desktop]
+      }
+    }
+  })], "maxSize_center"),
+  right: viewportHeight,
+  left: viewportHeight
+};
+const modalContainer = css.style({
+  vars: {
+    [fullHeightVar]: "100vh",
+    [fullWidthVar]: "100vw"
+  },
+  "@supports": {
+    "(height: 1dvh)": {
+      vars: {
+        [fullHeightVar]: "100dvh",
+        [fullWidthVar]: "100dvw"
+      }
+    }
+  },
+  maxHeight: fullHeightVar,
+  maxWidth: fullWidthVar
+}, "modalContainer");
+const headingRoot = css.style({
+  overflowWrap: "break-word"
+}, "headingRoot");
+const headingFocus = css.style({
+  selectors: {
+    [`${headingRoot}:focus &`]: {
+      opacity: 1
+    }
+  }
+}, "headingFocus");
+const closeIconOffset = css.style({
+  top: "-5px",
+  right: "-5px"
+}, "closeIconOffset");
+__vanilla_filescope__.endFileScope();
+exports.backdrop = backdrop;
+exports.closeIconOffset = closeIconOffset;
+exports.entrance = entrance;
+exports.exit = exit;
+exports.fixedStackingContext = fixedStackingContext;
+exports.headingFocus = headingFocus;
+exports.headingRoot = headingRoot;
+exports.horiztontalTransition = horiztontalTransition;
+exports.maxSize = maxSize;
+exports.modalContainer = modalContainer;
+exports.pointerEventsAll = pointerEventsAll;
+exports.resetStackingContext = resetStackingContext;

package/dist/lib/components/private/Modal/Modal.mjs

@@ -0,0 +1,214 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useState, useReducer, useContext, useRef, useEffect } from "react";
+import FocusLock from "react-focus-lock";
+import { ariaHideOthers } from "./ariaHideOthers.mjs";
+import { Box } from "../../Box/Box.mjs";
+import { BraidPortal } from "../../BraidPortal/BraidPortal.mjs";
+import { externalGutter } from "./ModalExternalGutter.mjs";
+import { ModalContent } from "./ModalContent.mjs";
+import { resetStackingContext, backdrop, horiztontalTransition, modalContainer, entrance, exit, fixedStackingContext } from "./Modal.css.mjs";
+const AllowCloseContext = createContext(true);
+const ModalPortal = ({ children }) => {
+  const [modalElement, setElement] = useState(null);
+  useEffect(() => {
+    const modalContainerId = "braid-modal-container";
+    let element = document.getElementById(modalContainerId);
+    if (!element) {
+      element = document.createElement("div");
+      element.setAttribute("id", modalContainerId);
+      element.setAttribute("class", fixedStackingContext);
+      document.body.appendChild(element);
+    }
+    setElement(element);
+  }, []);
+  if (!modalElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BraidPortal, { container: modalElement, children });
+};
+const OPEN_MODAL = 1;
+const CLOSE_MODAL = 2;
+const ANIMATION_COMPLETE = 3;
+const INITIAL = 1;
+const OPEN = 2;
+const OPENING = 3;
+const CLOSED = 4;
+const CLOSING = 5;
+const reducer = (prevState, action) => {
+  switch (action) {
+    case OPEN_MODAL: {
+      switch (prevState) {
+        case INITIAL:
+        case CLOSING:
+        case CLOSED: {
+          return OPENING;
+        }
+      }
+    }
+    case CLOSE_MODAL: {
+      switch (prevState) {
+        case OPEN:
+        case OPENING: {
+          return CLOSING;
+        }
+      }
+    }
+    case ANIMATION_COMPLETE: {
+      switch (prevState) {
+        case CLOSING: {
+          return CLOSED;
+        }
+        case OPENING: {
+          return OPEN;
+        }
+      }
+    }
+  }
+  return prevState;
+};
+const ANIMATION_DURATION = 300;
+const Modal = ({
+  id,
+  open,
+  children,
+  description,
+  onClose,
+  width,
+  closeLabel,
+  illustration,
+  title,
+  headingLevel,
+  position,
+  ...restProps
+}) => {
+  const [trapActive, setTrapActive] = useState(true);
+  const [state, dispatch] = useReducer(reducer, INITIAL);
+  const allowClose = useContext(AllowCloseContext);
+  const shouldFocus = typeof document !== "undefined" && typeof document.hasFocus === "function" && document.hasFocus();
+  const openRef = useRef(open);
+  const modalRef = useRef(null);
+  const headingRef = useRef(null);
+  const closeHandlerRef = useRef(onClose);
+  const initiateClose = () => {
+    if (allowClose) {
+      const result = closeHandlerRef.current(false);
+      if (result === false) {
+        return result;
+      }
+      if (openRef.current) {
+        dispatch(CLOSE_MODAL);
+      }
+    }
+  };
+  useEffect(() => {
+    openRef.current = open;
+    dispatch(open ? OPEN_MODAL : CLOSE_MODAL);
+  }, [open]);
+  const closing = state === CLOSING;
+  useEffect(() => {
+    if (closing) {
+      const timer = setTimeout(() => {
+        dispatch(ANIMATION_COMPLETE);
+      }, ANIMATION_DURATION);
+      return () => clearTimeout(timer);
+    }
+  }, [closing]);
+  const shouldAriaHideOthers = state === OPEN || state === CLOSING;
+  useEffect(() => {
+    if (shouldAriaHideOthers && modalRef.current) {
+      return ariaHideOthers(modalRef.current, { delay: ANIMATION_DURATION });
+    }
+  }, [shouldAriaHideOthers]);
+  useEffect(() => {
+    if (typeof onClose === "function") {
+      closeHandlerRef.current = onClose;
+    }
+  }, [onClose]);
+  useEffect(() => {
+    const event = trapActive ? "blur" : "focus";
+    const handleEvent = () => setTrapActive(!trapActive);
+    window.addEventListener(event, handleEvent);
+    return () => {
+      window.removeEventListener(event, handleEvent);
+    };
+  }, [trapActive]);
+  return state === OPENING || state === OPEN || state === CLOSING ? /* @__PURE__ */ jsx(ModalPortal, { children: /* @__PURE__ */ jsxs(
+    FocusLock,
+    {
+      className: resetStackingContext,
+      disabled: !trapActive,
+      autoFocus: false,
+      onActivation: () => {
+        if (state === OPEN) {
+          return;
+        }
+        if (headingRef.current && shouldFocus) {
+          headingRef.current.focus();
+        }
+        dispatch(ANIMATION_COMPLETE);
+      },
+      returnFocus: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            onClick: state === OPEN ? initiateClose : void 0,
+            position: "fixed",
+            inset: 0,
+            zIndex: "modalBackdrop",
+            transition: position === "center" ? "fast" : void 0,
+            opacity: state !== OPEN ? 0 : void 0,
+            pointerEvents: state === CLOSING ? "none" : void 0,
+            className: [
+              backdrop,
+              position === "left" || position === "right" && horiztontalTransition
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            position: "fixed",
+            inset: 0,
+            zIndex: "modal",
+            pointerEvents: "none",
+            transition: "fast",
+            opacity: state !== OPEN ? 0 : void 0,
+            paddingLeft: position === "right" ? ["none", "xlarge"] : void 0,
+            paddingRight: position === "left" ? ["none", "xlarge"] : void 0,
+            padding: position === "center" ? externalGutter : void 0,
+            className: [
+              modalContainer,
+              (position === "left" || position === "right") && horiztontalTransition,
+              state === OPENING && entrance[position],
+              state === CLOSING && position in exit && exit[position]
+            ],
+            children: /* @__PURE__ */ jsx(
+              ModalContent,
+              {
+                id,
+                description,
+                onClose: initiateClose,
+                width,
+                closeLabel,
+                illustration,
+                title,
+                headingLevel,
+                headingRef,
+                modalRef,
+                position,
+                scrollLock: !(state === CLOSING),
+                ...restProps,
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) : null;
+};
+export {
+  AllowCloseContext,
+  Modal
+};