braid-design-system 33.2.0 → 33.2.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # braid-design-system
 
+## 33.2.1
+
+### Patch Changes
+
+- **MenuRenderer**: Ensure menu is visible, even when its trigger element is inside a container with overflow hidden. ([#1658](https://github.com/seek-oss/braid-design-system/pull/1658))
+
+- **MenuRenderer, OverflowMenu:** Provide improved scroll affordance ([#1661](https://github.com/seek-oss/braid-design-system/pull/1661))
+
+  Introduce scroll affordance to menus, providing a visual cue that there are more items overflowing vertically.
+
+- **OverflowMenu**: Simplify internal layout. ([#1658](https://github.com/seek-oss/braid-design-system/pull/1658))
+
+  Refactor the internal layout of `OverflowMenu` to improve the alignment of the menu with the button.
+
 ## 33.2.0
 
 ### Minor Changes

package/dist/lib/components/MenuRenderer/MenuRenderer.actions.cjs

@@ -15,6 +15,7 @@ const actionTypes = {
   MENU_TRIGGER_CLICK: 12,
   MENU_TRIGGER_TAB: 13,
   MENU_TRIGGER_ESCAPE: 14,
-  BACKDROP_CLICK: 15
+  BACKDROP_CLICK: 15,
+  WINDOW_RESIZE: 16
 };
 exports.actionTypes = actionTypes;

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

@@ -14,7 +14,8 @@ const actionTypes = {
   MENU_TRIGGER_CLICK: 12,
   MENU_TRIGGER_TAB: 13,
   MENU_TRIGGER_ESCAPE: 14,
-  BACKDROP_CLICK: 15
+  BACKDROP_CLICK: 15,
+  WINDOW_RESIZE: 16
 };
 export {
   actionTypes

package/dist/lib/components/MenuRenderer/MenuRenderer.cjs

@@ -8,11 +8,14 @@ const lib_components_MenuItemDivider_MenuItemDivider_cjs = require("../MenuItemD
 const lib_components_private_normalizeKey_cjs = require("../private/normalizeKey.cjs");
 const lib_components_private_getNextIndex_cjs = require("../private/getNextIndex.cjs");
 const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
+const lib_components_private_ScrollContainer_ScrollContainer_cjs = require("../private/ScrollContainer/ScrollContainer.cjs");
 const lib_components_MenuRenderer_MenuRenderer_actions_cjs = require("./MenuRenderer.actions.cjs");
 const lib_components_MenuRenderer_MenuRendererContext_cjs = require("./MenuRendererContext.cjs");
 const lib_components_MenuRenderer_MenuRendererItemContext_cjs = require("./MenuRendererItemContext.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const lib_components_MenuRenderer_MenuRenderer_css_cjs = require("./MenuRenderer.css.cjs");
+const lib_components_BraidPortal_BraidPortal_cjs = require("../BraidPortal/BraidPortal.cjs");
+const dynamic = require("@vanilla-extract/dynamic");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
 const {
@@ -31,14 +34,29 @@ const {
   MENU_TRIGGER_CLICK,
   MENU_TRIGGER_TAB,
   MENU_TRIGGER_ESCAPE,
-  BACKDROP_CLICK
+  BACKDROP_CLICK,
+  WINDOW_RESIZE
 } = lib_components_MenuRenderer_MenuRenderer_actions_cjs.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,
@@ -53,6 +71,7 @@ const MenuRenderer = ({
   data,
   ...restProps
 }) => {
+  const menuContainerRef = React.useRef(null);
   const buttonRef = React.useRef(null);
   const lastOpen = React.useRef(false);
   const items = lib_utils_flattenChildren_cjs.flattenChildren(children);
@@ -64,83 +83,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] = React.useReducer(
-    (state, action) => {
-      switch (action.type) {
-        case MENU_TRIGGER_UP:
-        case MENU_ITEM_UP: {
-          return {
-            ...state,
-            open: true,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: lib_components_private_getNextIndex_cjs.getNextIndex(-1, state.highlightIndex, itemCount)
-          };
-        }
-        case MENU_TRIGGER_DOWN:
-        case MENU_ITEM_DOWN: {
-          return {
-            ...state,
-            open: true,
-            closeReason: CLOSE_REASON_EXIT,
-            highlightIndex: lib_components_private_getNextIndex_cjs.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] = React.useReducer((state, action) => {
+    switch (action.type) {
+      case MENU_TRIGGER_UP:
+      case MENU_ITEM_UP: {
+        return {
+          ...state,
+          open: true,
+          closeReason: CLOSE_REASON_EXIT,
+          highlightIndex: lib_components_private_getNextIndex_cjs.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: lib_components_private_getNextIndex_cjs.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);
   React.useEffect(() => {
     if (lastOpen.current === open) {
       return;
@@ -157,6 +183,17 @@ const MenuRenderer = ({
       buttonRef.current.focus();
     }
   };
+  React.useEffect(() => {
+    const handleResize = () => {
+      dispatch({ type: WINDOW_RESIZE });
+    };
+    if (open) {
+      window.addEventListener("resize", handleResize);
+    }
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [open]);
   const onTriggerKeyUp = (event) => {
     const targetKey = lib_components_private_normalizeKey_cjs.normalizeKey(event);
     if (targetKey === " " && /firefox|iceweasel|fxios/i.test(navigator.userAgent)) {
@@ -198,41 +235,48 @@ const MenuRenderer = ({
       dispatch({ type: MENU_TRIGGER_CLICK });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { position: "relative", children: [
-      trigger(triggerProps, { open }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Menu,
-        {
-          open,
-          align,
-          width,
-          placement,
-          offsetSpace,
-          highlightIndex,
-          reserveIconSpace,
-          focusTrigger,
-          dispatch,
-          children: items
-        }
-      )
-    ] }),
-    open ? /* @__PURE__ */ jsxRuntime.jsx(
-      lib_components_Box_Box_cjs.Box,
-      {
-        onClick: (event) => {
-          event.stopPropagation();
-          event.preventDefault();
-          dispatch({ type: BACKDROP_CLICK });
-        },
-        position: "fixed",
-        zIndex: "dropdownBackdrop",
-        top: 0,
-        left: 0,
-        className: lib_components_MenuRenderer_MenuRenderer_css_cjs.backdrop
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    lib_components_Box_Box_cjs.Box,
+    {
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      ref: menuContainerRef,
+      children: [
+        trigger(triggerProps, { open }),
+        open ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidPortal_BraidPortal_cjs.BraidPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            Menu,
+            {
+              align,
+              width,
+              placement,
+              offsetSpace,
+              highlightIndex,
+              reserveIconSpace,
+              focusTrigger,
+              dispatch,
+              triggerPosition,
+              children: items
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                dispatch({ type: BACKDROP_CLICK });
+              },
+              position: "fixed",
+              zIndex: "dropdownBackdrop",
+              top: 0,
+              left: 0,
+              className: lib_components_MenuRenderer_MenuRenderer_css_cjs.backdrop
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
 };
 const isDivider = (node) => typeof node === "object" && node !== null && "type" in node && node.type === lib_components_MenuItemDivider_MenuItemDivider_cjs.MenuItemDivider;
 const borderRadius = "large";
@@ -242,14 +286,18 @@ function Menu({
   width,
   placement,
   children,
-  open,
   dispatch,
   focusTrigger,
   highlightIndex,
   reserveIconSpace,
+  triggerPosition,
   position = "absolute"
 }) {
   let dividerCount = 0;
+  const inlineVars = triggerPosition && dynamic.assignInlineVars({
+    [lib_components_MenuRenderer_MenuRenderer_css_cjs.triggerVars[placement]]: `${triggerPosition[placement]}px`,
+    [lib_components_MenuRenderer_MenuRenderer_css_cjs.triggerVars[align]]: `${triggerPosition[align]}px`
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(lib_components_MenuRenderer_MenuRendererContext_cjs.MenuRendererContext.Provider, { value: { reserveIconSpace }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     lib_components_Box_Box_cjs.Box,
     {
@@ -259,19 +307,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 && lib_components_MenuRenderer_MenuRenderer_css_cjs.menuIsClosed,
-        width !== "content" && lib_components_MenuRenderer_MenuRenderer_css_cjs.width[width],
-        placement === "top" && lib_components_MenuRenderer_MenuRenderer_css_cjs.placementBottom
+        lib_components_MenuRenderer_MenuRenderer_css_cjs.menuPosition,
+        lib_components_MenuRenderer_MenuRenderer_css_cjs.animation,
+        width !== "content" && lib_components_MenuRenderer_MenuRenderer_css_cjs.width[width]
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingY: lib_components_MenuRenderer_MenuRenderer_css_cjs.menuYPadding, className: lib_components_MenuRenderer_MenuRenderer_css_cjs.menuHeightLimit, children: React.Children.map(children, (item, i) => {
+        /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_ScrollContainer_ScrollContainer_cjs.ScrollContainer, { direction: "vertical", fadeSize: "small", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { className: lib_components_MenuRenderer_MenuRenderer_css_cjs.menuHeightLimit, children: React.Children.map(children, (item, i) => {
           if (isDivider(item)) {
             dividerCount++;
             return item;
@@ -290,7 +338,7 @@ function Menu({
             },
             menuItemIndex
           );
-        }) }),
+        }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           lib_components_private_Overlay_Overlay_cjs.Overlay,
           {

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

@@ -8,10 +8,26 @@ const backdrop = css.style({
   width: "100vw",
   height: "100vh"
 }, "backdrop");
-const menuIsClosed = css.style({
-  transform: `translateY(${cssUtils.calc(lib_themes_vars_css_cjs.vars.grid).negate().multiply(2)})`,
-  visibility: "hidden"
-}, "menuIsClosed");
+const triggerVars = {
+  top: css.createVar("triggerVars_top"),
+  left: css.createVar("triggerVars_left"),
+  bottom: css.createVar("triggerVars_bottom"),
+  right: css.createVar("triggerVars_right")
+};
+const menuPosition = css.style({
+  top: triggerVars.bottom,
+  bottom: triggerVars.top,
+  left: triggerVars.left,
+  right: triggerVars.right
+}, "menuPosition");
+const animation = css.style({
+  animation: `${css.keyframes({
+    from: {
+      transform: `translateY(${cssUtils.calc(lib_themes_vars_css_cjs.vars.grid).negate().multiply(2)})`,
+      opacity: 0
+    }
+  })} .125s ease forwards`
+}, "animation");
 const widthVar = css.createVar("widthVar");
 const baseWidth = css.style({
   width: cssUtils.calc(widthVar).divide(4).toString()
@@ -30,18 +46,13 @@ const width = css.styleVariants({
     [widthVar]: w
   }
 }], "width");
-const placementBottom = css.style({
-  bottom: "100%"
-}, "placementBottom");
-const menuYPadding = "xxsmall";
 const menuHeightLimit = css.style({
-  maxHeight: cssUtils.calc(lib_themes_vars_css_cjs.vars.touchableSize).multiply(9.5).add(lib_themes_vars_css_cjs.vars.space[menuYPadding]).toString(),
-  overflowY: "auto"
+  maxHeight: cssUtils.calc(lib_themes_vars_css_cjs.vars.touchableSize).multiply(9.5).toString()
 }, "menuHeightLimit");
 fileScope.endFileScope();
+exports.animation = animation;
 exports.backdrop = backdrop;
 exports.menuHeightLimit = menuHeightLimit;
-exports.menuIsClosed = menuIsClosed;
-exports.menuYPadding = menuYPadding;
-exports.placementBottom = placementBottom;
+exports.menuPosition = menuPosition;
+exports.triggerVars = triggerVars;
 exports.width = width;

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

@@ -1,5 +1,5 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, createVar, styleVariants } from "@vanilla-extract/css";
+import { style, createVar, keyframes, styleVariants } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/MenuRenderer/MenuRenderer.css.ts", "braid-design-system");
@@ -7,10 +7,26 @@ const backdrop = style({
   width: "100vw",
   height: "100vh"
 }, "backdrop");
-const menuIsClosed = style({
-  transform: `translateY(${calc(vars.grid).negate().multiply(2)})`,
-  visibility: "hidden"
-}, "menuIsClosed");
+const triggerVars = {
+  top: createVar("triggerVars_top"),
+  left: createVar("triggerVars_left"),
+  bottom: createVar("triggerVars_bottom"),
+  right: createVar("triggerVars_right")
+};
+const menuPosition = style({
+  top: triggerVars.bottom,
+  bottom: triggerVars.top,
+  left: triggerVars.left,
+  right: triggerVars.right
+}, "menuPosition");
+const animation = style({
+  animation: `${keyframes({
+    from: {
+      transform: `translateY(${calc(vars.grid).negate().multiply(2)})`,
+      opacity: 0
+    }
+  })} .125s ease forwards`
+}, "animation");
 const widthVar = createVar("widthVar");
 const baseWidth = style({
   width: calc(widthVar).divide(4).toString()
@@ -29,20 +45,15 @@ const width = styleVariants({
     [widthVar]: w
   }
 }], "width");
-const placementBottom = style({
-  bottom: "100%"
-}, "placementBottom");
-const menuYPadding = "xxsmall";
 const menuHeightLimit = style({
-  maxHeight: calc(vars.touchableSize).multiply(9.5).add(vars.space[menuYPadding]).toString(),
-  overflowY: "auto"
+  maxHeight: calc(vars.touchableSize).multiply(9.5).toString()
 }, "menuHeightLimit");
 endFileScope();
 export {
+  animation,
   backdrop,
   menuHeightLimit,
-  menuIsClosed,
-  menuYPadding,
-  placementBottom,
+  menuPosition,
+  triggerVars,
   width
 };