braid-design-system 33.2.0 → 33.2.1

package/dist/lib/components/MenuRenderer/MenuRenderer.mjs

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import assert from "assert";
 import { useRef, useReducer, useEffect, Children } from "react";
 import { flattenChildren } from "../../utils/flattenChildren.mjs";
@@ -7,11 +7,14 @@ import { MenuItemDivider } from "../MenuItemDivider/MenuItemDivider.mjs";
 import { normalizeKey } from "../private/normalizeKey.mjs";
 import { getNextIndex } from "../private/getNextIndex.mjs";
 import { Overlay } from "../private/Overlay/Overlay.mjs";
+import { ScrollContainer } from "../private/ScrollContainer/ScrollContainer.mjs";
 import { actionTypes } from "./MenuRenderer.actions.mjs";
 import { MenuRendererContext } from "./MenuRendererContext.mjs";
 import { MenuRendererItemContext } from "./MenuRendererItemContext.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
-import { backdrop, menuIsClosed, width, placementBottom, menuYPadding, menuHeightLimit } from "./MenuRenderer.css.mjs";
+import { backdrop, triggerVars, menuPosition, animation, width, menuHeightLimit } from "./MenuRenderer.css.mjs";
+import { BraidPortal } from "../BraidPortal/BraidPortal.mjs";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 const {
   MENU_TRIGGER_UP,
   MENU_ITEM_UP,
@@ -28,14 +31,29 @@ const {
   MENU_TRIGGER_CLICK,
   MENU_TRIGGER_TAB,
   MENU_TRIGGER_ESCAPE,
-  BACKDROP_CLICK
+  BACKDROP_CLICK,
+  WINDOW_RESIZE
 } = actionTypes;
+const getPosition = (element) => {
+  if (!element) {
+    return void 0;
+  }
+  const { top, bottom, left, right } = element.getBoundingClientRect();
+  const { scrollX, scrollY, innerWidth, innerHeight } = window;
+  return {
+    top: innerHeight - top - scrollY,
+    bottom: bottom + scrollY,
+    left: left + scrollX,
+    right: innerWidth - right - scrollX
+  };
+};
 const CLOSED_INDEX = -1;
 const CLOSE_REASON_EXIT = { reason: "exit" };
 const initialState = {
   open: false,
   highlightIndex: CLOSED_INDEX,
-  closeReason: CLOSE_REASON_EXIT
+  closeReason: CLOSE_REASON_EXIT,
+  triggerPosition: void 0
 };
 const MenuRenderer = ({
   onOpen,
@@ -50,6 +68,7 @@ const MenuRenderer = ({
   data,
   ...restProps
 }) => {
+  const menuContainerRef = useRef(null);
   const buttonRef = useRef(null);
   const lastOpen = useRef(false);
   const items = flattenChildren(children);
@@ -61,83 +80,90 @@ const MenuRenderer = ({
     ),
     "All child nodes within a menu component must be a MenuItem, MenuItemLink, MenuItemCheckbox or MenuItemDivider: https://seek-oss.github.io/braid-design-system/components/MenuRenderer"
   );
-  const [{ open, highlightIndex, closeReason }, dispatch] = useReducer(
-    (state, action) => {
-      switch (action.type) {
-        case MENU_TRIGGER_UP:
-        case MENU_ITEM_UP: {
-          return {
-            ...state,
-            open: true,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: getNextIndex(-1, state.highlightIndex, itemCount)
-          };
-        }
-        case MENU_TRIGGER_DOWN:
-        case MENU_ITEM_DOWN: {
-          return {
-            ...state,
-            open: true,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: getNextIndex(1, state.highlightIndex, itemCount)
-          };
-        }
-        case BACKDROP_CLICK:
-        case MENU_TRIGGER_ESCAPE:
-        case MENU_TRIGGER_TAB:
-        case MENU_ITEM_ESCAPE:
-        case MENU_ITEM_TAB: {
-          return {
-            ...state,
-            open: false,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: CLOSED_INDEX
-          };
-        }
-        case MENU_ITEM_ENTER:
-        case MENU_ITEM_SPACE:
-        case MENU_ITEM_CLICK: {
-          if ("formElement" in action && action.formElement) {
-            return state;
-          }
-          return {
-            ...state,
-            open: false,
-            closeReason: {
-              reason: "selection",
-              index: action.index,
-              id: action.id
-            },
-            highlightIndex: CLOSED_INDEX
-          };
-        }
-        case MENU_ITEM_HOVER: {
-          return { ...state, highlightIndex: action.value };
-        }
-        case MENU_TRIGGER_ENTER:
-        case MENU_TRIGGER_SPACE: {
-          const nextOpen = !state.open;
-          return {
-            ...state,
-            open: nextOpen,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: nextOpen ? 0 : CLOSED_INDEX
-          };
-        }
-        case MENU_TRIGGER_CLICK: {
-          const nextOpen = !state.open;
-          return {
-            ...state,
-            open: nextOpen,
-            closeReason: CLOSE_REASON_EXIT
-          };
-        }
-        default:
+  const [{ open, highlightIndex, closeReason, triggerPosition }, dispatch] = useReducer((state, action) => {
+    switch (action.type) {
+      case MENU_TRIGGER_UP:
+      case MENU_ITEM_UP: {
+        return {
+          ...state,
+          open: true,
+          closeReason: CLOSE_REASON_EXIT,
+          highlightIndex: getNextIndex(-1, state.highlightIndex, itemCount),
+          triggerPosition: getPosition(menuContainerRef.current)
+        };
+      }
+      case MENU_TRIGGER_DOWN:
+      case MENU_ITEM_DOWN: {
+        return {
+          ...state,
+          open: true,
+          closeReason: CLOSE_REASON_EXIT,
+          highlightIndex: getNextIndex(1, state.highlightIndex, itemCount),
+          triggerPosition: getPosition(menuContainerRef.current)
+        };
+      }
+      case BACKDROP_CLICK:
+      case MENU_TRIGGER_ESCAPE:
+      case MENU_TRIGGER_TAB:
+      case MENU_ITEM_ESCAPE:
+      case MENU_ITEM_TAB: {
+        return {
+          ...state,
+          open: false,
+          closeReason: CLOSE_REASON_EXIT,
+          highlightIndex: CLOSED_INDEX
+        };
+      }
+      case MENU_ITEM_ENTER:
+      case MENU_ITEM_SPACE:
+      case MENU_ITEM_CLICK: {
+        if ("formElement" in action && action.formElement) {
           return state;
+        }
+        return {
+          ...state,
+          open: false,
+          closeReason: {
+            reason: "selection",
+            index: action.index,
+            id: action.id
+          },
+          highlightIndex: CLOSED_INDEX
+        };
       }
-    },
-    initialState
-  );
+      case MENU_ITEM_HOVER: {
+        return { ...state, highlightIndex: action.value };
+      }
+      case MENU_TRIGGER_ENTER:
+      case MENU_TRIGGER_SPACE: {
+        const nextOpen = !state.open;
+        return {
+          ...state,
+          open: nextOpen,
+          closeReason: CLOSE_REASON_EXIT,
+          highlightIndex: nextOpen ? 0 : CLOSED_INDEX,
+          triggerPosition: getPosition(menuContainerRef.current)
+        };
+      }
+      case MENU_TRIGGER_CLICK: {
+        const nextOpen = !state.open;
+        return {
+          ...state,
+          open: nextOpen,
+          closeReason: CLOSE_REASON_EXIT,
+          triggerPosition: getPosition(menuContainerRef.current)
+        };
+      }
+      case WINDOW_RESIZE: {
+        return {
+          ...state,
+          triggerPosition: getPosition(menuContainerRef.current)
+        };
+      }
+      default:
+        return state;
+    }
+  }, initialState);
   useEffect(() => {
     if (lastOpen.current === open) {
       return;
@@ -154,6 +180,17 @@ const MenuRenderer = ({
       buttonRef.current.focus();
     }
   };
+  useEffect(() => {
+    const handleResize = () => {
+      dispatch({ type: WINDOW_RESIZE });
+    };
+    if (open) {
+      window.addEventListener("resize", handleResize);
+    }
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [open]);
   const onTriggerKeyUp = (event) => {
     const targetKey = normalizeKey(event);
     if (targetKey === " " && /firefox|iceweasel|fxios/i.test(navigator.userAgent)) {
@@ -195,41 +232,48 @@ const MenuRenderer = ({
       dispatch({ type: MENU_TRIGGER_CLICK });
     }
   };
-  return /* @__PURE__ */ jsxs(Box, { ...buildDataAttributes({ data, validateRestProps: restProps }), children: [
-    /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
-      trigger(triggerProps, { open }),
-      /* @__PURE__ */ jsx(
-        Menu,
-        {
-          open,
-          align,
-          width: width2,
-          placement,
-          offsetSpace,
-          highlightIndex,
-          reserveIconSpace,
-          focusTrigger,
-          dispatch,
-          children: items
-        }
-      )
-    ] }),
-    open ? /* @__PURE__ */ jsx(
-      Box,
-      {
-        onClick: (event) => {
-          event.stopPropagation();
-          event.preventDefault();
-          dispatch({ type: BACKDROP_CLICK });
-        },
-        position: "fixed",
-        zIndex: "dropdownBackdrop",
-        top: 0,
-        left: 0,
-        className: backdrop
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      ref: menuContainerRef,
+      children: [
+        trigger(triggerProps, { open }),
+        open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(BraidPortal, { children: /* @__PURE__ */ jsx(
+            Menu,
+            {
+              align,
+              width: width2,
+              placement,
+              offsetSpace,
+              highlightIndex,
+              reserveIconSpace,
+              focusTrigger,
+              dispatch,
+              triggerPosition,
+              children: items
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                dispatch({ type: BACKDROP_CLICK });
+              },
+              position: "fixed",
+              zIndex: "dropdownBackdrop",
+              top: 0,
+              left: 0,
+              className: backdrop
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
 };
 const isDivider = (node) => typeof node === "object" && node !== null && "type" in node && node.type === MenuItemDivider;
 const borderRadius = "large";
@@ -239,14 +283,18 @@ function Menu({
   width: width$1,
   placement,
   children,
-  open,
   dispatch,
   focusTrigger,
   highlightIndex,
   reserveIconSpace,
+  triggerPosition,
   position = "absolute"
 }) {
   let dividerCount = 0;
+  const inlineVars = triggerPosition && assignInlineVars({
+    [triggerVars[placement]]: `${triggerPosition[placement]}px`,
+    [triggerVars[align]]: `${triggerPosition[align]}px`
+  });
   return /* @__PURE__ */ jsx(MenuRendererContext.Provider, { value: { reserveIconSpace }, children: /* @__PURE__ */ jsxs(
     Box,
     {
@@ -256,19 +304,19 @@ function Menu({
       boxShadow: placement === "top" ? "small" : "medium",
       borderRadius,
       background: "surface",
+      paddingY: "xxsmall",
       marginTop: placement === "bottom" ? offsetSpace : void 0,
       marginBottom: placement === "top" ? offsetSpace : void 0,
       transition: "fast",
-      right: align === "right" ? 0 : void 0,
-      opacity: !open ? 0 : void 0,
       overflow: "hidden",
+      style: inlineVars,
       className: [
-        !open && menuIsClosed,
-        width$1 !== "content" && width[width$1],
-        placement === "top" && placementBottom
+        menuPosition,
+        animation,
+        width$1 !== "content" && width[width$1]
       ],
       children: [
-        /* @__PURE__ */ jsx(Box, { paddingY: menuYPadding, className: menuHeightLimit, children: Children.map(children, (item, i) => {
+        /* @__PURE__ */ jsx(ScrollContainer, { direction: "vertical", fadeSize: "small", children: /* @__PURE__ */ jsx(Box, { className: menuHeightLimit, children: Children.map(children, (item, i) => {
           if (isDivider(item)) {
             dividerCount++;
             return item;
@@ -287,7 +335,7 @@ function Menu({
             },
             menuItemIndex
           );
-        }) }),
+        }) }) }),
         /* @__PURE__ */ jsx(
           Overlay,
           {

package/dist/lib/components/OverflowMenu/OverflowMenu.cjs

@@ -11,15 +11,15 @@ const OverflowMenu = ({
   id,
   ...menuProps
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  lib_components_MenuRenderer_MenuRenderer_cjs.MenuRenderer,
+  lib_components_Box_Box_cjs.Box,
   {
-    trigger: (triggerProps) => /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_Box_Box_cjs.Box,
+    className: lib_components_OverflowMenu_OverflowMenu_css_cjs.wrapperPositioning,
+    display: "flex",
+    justifyContent: "flexEnd",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_MenuRenderer_MenuRenderer_cjs.MenuRenderer,
       {
-        display: "flex",
-        justifyContent: "flexEnd",
-        className: lib_components_OverflowMenu_OverflowMenu_css_cjs.triggerOffset,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
+        trigger: (triggerProps) => /* @__PURE__ */ jsxRuntime.jsx(
           lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
           {
             id,
@@ -28,13 +28,13 @@ const OverflowMenu = ({
             label,
             ...triggerProps
           }
-        )
+        ),
+        align: "right",
+        offsetSpace: "small",
+        ...menuProps,
+        children
       }
-    ),
-    align: "right",
-    offsetSpace: "small",
-    ...menuProps,
-    children
+    )
   }
 );
 exports.OverflowMenu = OverflowMenu;

package/dist/lib/components/OverflowMenu/OverflowMenu.css.cjs

@@ -2,8 +2,8 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 fileScope.setFileScope("src/lib/components/OverflowMenu/OverflowMenu.css.ts", "braid-design-system");
-const triggerOffset = css.style({
+const wrapperPositioning = css.style({
   margin: "-1px -6px"
-}, "triggerOffset");
+}, "wrapperPositioning");
 fileScope.endFileScope();
-exports.triggerOffset = triggerOffset;
+exports.wrapperPositioning = wrapperPositioning;

package/dist/lib/components/OverflowMenu/OverflowMenu.css.mjs

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/lib/components/OverflowMenu/OverflowMenu.css.ts", "braid-design-system");
-const triggerOffset = style({
+const wrapperPositioning = style({
   margin: "-1px -6px"
-}, "triggerOffset");
+}, "wrapperPositioning");
 endFileScope();
 export {
-  triggerOffset
+  wrapperPositioning
 };

package/dist/lib/components/OverflowMenu/OverflowMenu.mjs

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { MenuRenderer } from "../MenuRenderer/MenuRenderer.mjs";
 import { ButtonIcon } from "../ButtonIcon/ButtonIcon.mjs";
 import { Box } from "../Box/Box.mjs";
-import { triggerOffset } from "./OverflowMenu.css.mjs";
+import { wrapperPositioning } from "./OverflowMenu.css.mjs";
 import { IconOverflow } from "../icons/IconOverflow/IconOverflow.mjs";
 const OverflowMenu = ({
   label,
@@ -10,15 +10,15 @@ const OverflowMenu = ({
   id,
   ...menuProps
 }) => /* @__PURE__ */ jsx(
-  MenuRenderer,
+  Box,
   {
-    trigger: (triggerProps) => /* @__PURE__ */ jsx(
-      Box,
+    className: wrapperPositioning,
+    display: "flex",
+    justifyContent: "flexEnd",
+    children: /* @__PURE__ */ jsx(
+      MenuRenderer,
       {
-        display: "flex",
-        justifyContent: "flexEnd",
-        className: triggerOffset,
-        children: /* @__PURE__ */ jsx(
+        trigger: (triggerProps) => /* @__PURE__ */ jsx(
           ButtonIcon,
           {
             id,
@@ -27,13 +27,13 @@ const OverflowMenu = ({
             label,
             ...triggerProps
           }
-        )
+        ),
+        align: "right",
+        offsetSpace: "small",
+        ...menuProps,
+        children
       }
-    ),
-    align: "right",
-    offsetSpace: "small",
-    ...menuProps,
-    children
+    )
   }
 );
 export {

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

@@ -0,0 +1,67 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_hooks_useIsomorphicLayoutEffect_cjs = require("../../../hooks/useIsomorphicLayoutEffect.cjs");
+const lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../buildDataAttributes.cjs");
+const throttleDebounce = require("throttle-debounce");
+const lib_components_private_ScrollContainer_ScrollContainer_css_cjs = require("./ScrollContainer.css.cjs");
+const scrollOffset = 2;
+const maskOverflow = (element, direction) => {
+  const atTop = element.scrollTop <= 0;
+  const atBottom = element.scrollHeight - element.offsetHeight - element.scrollTop < scrollOffset;
+  const atLeft = element.scrollLeft <= 0;
+  const atRight = element.scrollWidth - element.offsetWidth - element.scrollLeft < scrollOffset;
+  if (direction === "vertical" || direction === "all") {
+    element.classList[atTop ? "remove" : "add"](lib_components_private_ScrollContainer_ScrollContainer_css_cjs.maskTop);
+    element.classList[atBottom ? "remove" : "add"](lib_components_private_ScrollContainer_ScrollContainer_css_cjs.maskBottom);
+  }
+  if (direction === "horizontal" || direction === "all") {
+    element.classList[atLeft ? "remove" : "add"](lib_components_private_ScrollContainer_ScrollContainer_css_cjs.maskLeft);
+    element.classList[atRight ? "remove" : "add"](lib_components_private_ScrollContainer_ScrollContainer_css_cjs.maskRight);
+  }
+};
+const ScrollContainer = ({
+  children,
+  direction = "horizontal",
+  fadeSize = "medium",
+  hideScrollbar = false,
+  data,
+  ...restProps
+}) => {
+  const containerRef = React.useRef(null);
+  const updateMask = throttleDebounce.throttle(
+    100,
+    React.useCallback(() => {
+      if (containerRef.current) {
+        maskOverflow(containerRef.current, direction);
+      }
+    }, [containerRef, direction])
+  );
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    if (containerRef.current) {
+      updateMask();
+    }
+    window.addEventListener("resize", updateMask);
+    return () => window.removeEventListener("resize", updateMask);
+  }, [updateMask]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      ref: containerRef,
+      onScroll: updateMask,
+      position: "relative",
+      height: "full",
+      className: [
+        lib_components_private_ScrollContainer_ScrollContainer_css_cjs.container,
+        lib_components_private_ScrollContainer_ScrollContainer_css_cjs.mask,
+        hideScrollbar ? lib_components_private_ScrollContainer_ScrollContainer_css_cjs.hideScrollbar : null,
+        lib_components_private_ScrollContainer_ScrollContainer_css_cjs.fadeSize[fadeSize],
+        lib_components_private_ScrollContainer_ScrollContainer_css_cjs.direction[direction]
+      ],
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children
+    }
+  );
+};
+exports.ScrollContainer = ScrollContainer;

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

@@ -0,0 +1,86 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/lib/components/private/ScrollContainer/ScrollContainer.css.ts", "braid-design-system");
+const container = css.style({
+  WebkitOverflowScrolling: "touch",
+  WebkitMaskComposite: "destination-in",
+  // Fallback for browsers that don't support mask-composite
+  maskComposite: "intersect"
+}, "container");
+const hideScrollbar = css.style({
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  "::-webkit-scrollbar": {
+    width: 0,
+    height: 0
+  }
+}, "hideScrollbar");
+const scrollOverlaySize = css.createVar("scrollOverlaySize");
+const fadeSize = css.styleVariants({
+  small: {
+    vars: {
+      [scrollOverlaySize]: "40px"
+    }
+  },
+  medium: {
+    vars: {
+      [scrollOverlaySize]: "60px"
+    }
+  },
+  large: {
+    vars: {
+      [scrollOverlaySize]: "80px"
+    }
+  }
+}, "fadeSize");
+const direction = css.styleVariants({
+  horizontal: {
+    overflowX: "auto",
+    overflowY: "hidden"
+  },
+  vertical: {
+    overflowX: "hidden",
+    overflowY: "auto"
+  },
+  all: {
+    overflow: "auto"
+  }
+}, "direction");
+const left = css.createVar("left");
+const right = css.createVar("right");
+const top = css.createVar("top");
+const bottom = css.createVar("bottom");
+const mask = css.style({
+  maskImage: [`linear-gradient(to bottom, transparent 0, black ${css.fallbackVar(top, "0")})`, `linear-gradient(to right, transparent 0, black ${css.fallbackVar(left, "0")})`, `linear-gradient(to left, transparent 0, black ${css.fallbackVar(right, "0")})`, `linear-gradient(to top, transparent 0, black ${css.fallbackVar(bottom, "0")})`].join(",")
+}, "mask");
+const maskLeft = css.style({
+  vars: {
+    [left]: scrollOverlaySize
+  }
+}, "maskLeft");
+const maskRight = css.style({
+  vars: {
+    [right]: scrollOverlaySize
+  }
+}, "maskRight");
+const maskTop = css.style({
+  vars: {
+    [top]: scrollOverlaySize
+  }
+}, "maskTop");
+const maskBottom = css.style({
+  vars: {
+    [bottom]: scrollOverlaySize
+  }
+}, "maskBottom");
+fileScope.endFileScope();
+exports.container = container;
+exports.direction = direction;
+exports.fadeSize = fadeSize;
+exports.hideScrollbar = hideScrollbar;
+exports.mask = mask;
+exports.maskBottom = maskBottom;
+exports.maskLeft = maskLeft;
+exports.maskRight = maskRight;
+exports.maskTop = maskTop;