@workday/canvas-kit-react 16.2.3 → 16.2.5

package/menu/lib/Submenu.tsx

@@ -1,3 +1,4 @@
+import {Rect} from '@popperjs/core';
 import React from 'react';
 
 import {
@@ -11,10 +12,11 @@ import {
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
+  isElementRTL,
   subModelHook,
   useForkRef,
 } from '@workday/canvas-kit-react/common';
-import {Popper} from '@workday/canvas-kit-react/popup';
+import {Placement, Popper} from '@workday/canvas-kit-react/popup';
 import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
 
 import {MenuCard} from './MenuCard';
@@ -23,7 +25,7 @@ import {MenuGroup} from './MenuGroup';
 import {MenuItem, StyledMenuItem, useMenuItemArrowReturn, useMenuItemFocus} from './MenuItem';
 import {MenuList} from './MenuList';
 import {MenuOption} from './MenuOption';
-import {defaultMenuPopperOptions, useMenuPopper} from './MenuPopper';
+import {menuPopperOffset, useMenuPopper} from './MenuPopper';
 import {useMenuModel} from './useMenuModel';
 
 type MenuModelConfig = (typeof useMenuModel)['TConfig'];
@@ -37,16 +39,100 @@ export interface SubmenuProps
   children: React.ReactNode;
 }
 
+type ElementRef = React.RefObject<HTMLElement | null>;
+
+// The target sits inside the parent menu, so placements are measured against the parent's visible
+// box instead. Otherwise vertical placements cover the parent, and a target scrolled out of the
+// parent's list fails the side placements' fallback checks.
+const getSubmenuAnchorRects = (parentRef?: ElementRef, targetRef?: ElementRef) => {
+  const parentEl = parentRef?.current;
+  const targetEl = targetRef?.current;
+  if (!parentEl || !targetEl) {
+    return undefined;
+  }
+  const parent = parentEl.getBoundingClientRect();
+  const target = targetEl.getBoundingClientRect();
+  const top = Math.min(Math.max(target.top, parent.top), parent.bottom);
+  const bottom = Math.max(Math.min(target.bottom, parent.bottom), parent.top);
+  return {parent, anchor: {top, bottom, left: parent.left, right: parent.right}};
+};
+
+const getSubmenuOffsetModifier = (parentRef?: ElementRef, targetRef?: ElementRef) => ({
+  name: 'offset',
+  options: {
+    // Popper includes these offsets when checking overflow, so vertical fallbacks are only chosen
+    // when the submenu fits fully above or below the parent.
+    offset: ({placement, popper}: {placement: Placement; popper: Rect}) => {
+      const [skidding, distance] = menuPopperOffset;
+      const rects = getSubmenuAnchorRects(parentRef, targetRef);
+      const side = placement.split('-')[0];
+      if (!rects || (side !== 'top' && side !== 'bottom')) {
+        return [skidding, distance];
+      }
+      const {parent, anchor} = rects;
+      const wanted = side === 'bottom' ? parent.bottom - anchor.bottom : anchor.top - parent.top;
+      // How far the submenu can move before it leaves the viewport it is portalled into.
+      const available =
+        side === 'bottom'
+          ? document.documentElement.clientHeight - popper.height - distance - anchor.bottom
+          : anchor.top - distance - popper.height;
+      // Clear the parent where there is room, and clear as much of it as the viewport allows where
+      // there is not. Going further would only push the submenu off screen, and clamping to the
+      // viewport edge also holds the submenu still while the parent scrolls underneath it.
+      return [skidding, distance + Math.max(0, Math.min(wanted, available))];
+    },
+  },
+});
+
 export const SubmenuPopper = createSubcomponent('div')({
   modelHook: useMenuModel,
   elemPropsHook: useMenuPopper,
-})<ExtractProps<typeof Popper>>(({children, ...elemProps}) => {
-  return (
-    <Popper placement="right-start" popperOptions={defaultMenuPopperOptions} {...elemProps}>
-      {children}
-    </Popper>
-  );
-});
+})<ExtractProps<typeof Popper>>(
+  ({children, fallbackPlacements, popperOptions, ...elemProps}, Element, model) => {
+    const parentContainerRef = model.UNSTABLE_parentModel?.state.containerRef;
+    const targetRef = model.state.targetRef;
+    const align = targetRef.current && isElementRTL(targetRef.current) ? 'end' : 'start';
+
+    const submenuFallbackPlacements = React.useMemo(
+      (): Placement[] => fallbackPlacements ?? [`bottom-${align}`, `top-${align}`],
+      [fallbackPlacements, align]
+    );
+
+    // Popper measures this rect for both positioning and overflow checks, and still listens to the
+    // target's scroll containers through `anchorElement`.
+    const getAnchorClientRect = React.useCallback(() => {
+      const rects = getSubmenuAnchorRects(parentContainerRef, targetRef);
+      if (!rects) {
+        return targetRef.current?.getBoundingClientRect() ?? new DOMRect();
+      }
+      const {top, bottom, left, right} = rects.anchor;
+      return new DOMRect(left, top, right - left, bottom - top);
+    }, [parentContainerRef, targetRef]);
+
+    const submenuPopperOptions = React.useMemo(
+      () => ({
+        ...popperOptions,
+        modifiers: [
+          getSubmenuOffsetModifier(parentContainerRef, targetRef),
+          ...(popperOptions?.modifiers ?? []),
+        ],
+      }),
+      [popperOptions, parentContainerRef, targetRef]
+    );
+
+    return (
+      <Popper
+        placement="right-start"
+        getAnchorClientRect={getAnchorClientRect}
+        fallbackPlacements={submenuFallbackPlacements}
+        popperOptions={submenuPopperOptions}
+        {...elemProps}
+      >
+        {children}
+      </Popper>
+    );
+  }
+);
 
 const useIntentTimer = (fn: Function, waitMs: number = 0): {start(): void; clear(): void} => {
   const timer = React.useRef<number | undefined>(undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "16.2.3",
+  "version": "16.2.5",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,8 +53,8 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-popup-stack": "^16.2.3",
-    "@workday/canvas-kit-styling": "^16.2.3",
+    "@workday/canvas-kit-popup-stack": "^16.2.5",
+    "@workday/canvas-kit-styling": "^16.2.5",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "dd5a27ab062642ac115722808e063150f7866115"
+  "gitHead": "e5b96bcbbd1f827623f9e75b13699b74b4ac03dd"
 }

package/popup/lib/Popper.tsx

@@ -36,7 +36,8 @@ export interface PopperProps {
    * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
    * complete control over positioning. When this prop is specified, it is safe to pass `null` into the
    * `anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be
-   * provided for the `PopupStack`.
+   * provided for the `PopupStack`. If an `anchorElement` is also provided, Popper listens to its
+   * scroll containers and uses it for clipping, so the Popper still updates when it scrolls.
    */
   getAnchorClientRect?: () => DOMRect;
   /**
@@ -164,7 +165,10 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
     // useLayoutEffect prevents flashing of the popup before position is determined
     React.useLayoutEffect(() => {
       const anchorEl = getAnchorClientRect
-        ? {getBoundingClientRect: getAnchorClientRect}
+        ? {
+            getBoundingClientRect: getAnchorClientRect,
+            contextElement: getElementFromRefOrElement(anchorElement ?? null),
+          }
         : getElementFromRefOrElement(anchorElement ?? null);
       if (!anchorEl) {
         console.warn(