@primer/react 38.22.0-rc.984eec337 → 38.22.0-rc.e78d46560

package/CHANGELOG.md

@@ -10,6 +10,8 @@
 
 - [#7511](https://github.com/primer/react/pull/7511) [`eb73dee`](https://github.com/primer/react/commit/eb73deea0c9f8fb0fdb44b28445eebc748a39443) Thanks [@RSoeborg](https://github.com/RSoeborg)! - Fix NavList parent item flicker during static-to-interactive transitions when navigating between current sub-items in a SubNav.
 
+- [#7619](https://github.com/primer/react/pull/7619) [`68aaf61`](https://github.com/primer/react/commit/68aaf617ebbeeb36aa5a7eb4b696d0061f6c2674) Thanks [@hectahertz](https://github.com/hectahertz)! - Memoize ActionMenu context values to prevent unnecessary re-renders of menu items
+
 - [#7708](https://github.com/primer/react/pull/7708) [`d0fa0ff`](https://github.com/primer/react/commit/d0fa0ff2301b3db7a4b66e7aabf3ff544ffb4ef2) Thanks [@hectahertz](https://github.com/hectahertz)! - perf(css): audit :has() selectors and add stylelint guard for Safari
 
 - [#7780](https://github.com/primer/react/pull/7780) [`8330aad`](https://github.com/primer/react/commit/8330aadeba6231bf916a9c93757f89018838ebb4) Thanks [@francinelucca](https://github.com/francinelucca)! - fix: Checkbox indeterminate state now persists on click if the state didn't change

package/dist/ActionMenu/ActionMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAGlF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAI5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAIrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAG1E,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,KAClG,IAAI,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAC9D,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IAEH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAE7D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAA;AA8I3C,MAAM,MAAM,qBAAqB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AA2DxH,6CAA6C;AAC7C,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAA;AAe/C,KAAK,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,GAC3C,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,mBAAmB,CAAC,GAAG;IAC/E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;CACpE,CAAA;AA0GH,eAAO,MAAM,UAAU;;;kBAvLP,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC;aAC5B,MAAM;;;;CAsL4E,CAAA"}
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAGlF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAI5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAIrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAG1E,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,KAClG,IAAI,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAC9D,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IAEH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAE7D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAA;AA8I3C,MAAM,MAAM,qBAAqB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AA2DxH,6CAA6C;AAC7C,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAA;AAe/C,KAAK,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,GAC3C,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,mBAAmB,CAAC,GAAG;IAC/E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;CACpE,CAAA;AA8GH,eAAO,MAAM,UAAU;;;kBA3LP,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC;aAC5B,MAAM;;;;CA0L4E,CAAA"}

package/dist/ActionMenu/ActionMenu.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useContext, useMemo, useState, useEffect, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { ChevronRightIcon, TriangleDownIcon } from '@primer/octicons-react';
 import { Divider } from '../ActionList/Divider.js';
@@ -136,17 +136,18 @@ const Menu = ({
       return child;
     }
   });
+  const isSubmenu = parentMenuContext.isSubmenu !== undefined;
+  const menuContextValue = useMemo(() => ({
+    anchorRef,
+    renderAnchor,
+    anchorId,
+    open: combinedOpenState,
+    onOpen,
+    onClose,
+    isSubmenu
+  }), [anchorRef, renderAnchor, anchorId, combinedOpenState, onOpen, onClose, isSubmenu]);
   return /*#__PURE__*/jsx(MenuContext.Provider, {
-    value: {
-      anchorRef,
-      renderAnchor,
-      anchorId,
-      open: combinedOpenState,
-      onOpen,
-      onClose,
-      // will be undefined for the outermost level, then false for the top menu, then true inside that
-      isSubmenu: parentMenuContext.isSubmenu !== undefined
-    },
+    value: menuContextValue,
     children: contents
   });
 };
@@ -263,6 +264,15 @@ const Overlay = ({
       }
     }
   }, [anchorRef]);
+  const afterSelect = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose('item-select'), [onClose]);
+  const overlayContextValue = useMemo(() => ({
+    container: 'ActionMenu',
+    listRole: 'menu',
+    listLabelledBy: ariaLabelledby || anchorAriaLabelledby || anchorId,
+    selectionAttribute: 'aria-checked',
+    afterSelect,
+    enableFocusZone: isNarrowFullscreen
+  }), [ariaLabelledby, anchorAriaLabelledby, anchorId, afterSelect, isNarrowFullscreen]);
   const isInsideDialog = useContext(DialogContext) !== undefined;
   return /*#__PURE__*/jsx(AnchoredOverlay, {
     anchorRef: anchorRef,
@@ -293,16 +303,7 @@ const Overlay = ({
         [`data-max-height-${overlayProps.maxHeight}`]: ''
       } : {}),
       children: /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
-        value: {
-          container: 'ActionMenu',
-          listRole: 'menu',
-          // If there is a custom aria-labelledby, use that. Otherwise, if exists, use the id that labels the anchor such as tooltip. If none of them exist, use anchor id.
-          listLabelledBy: ariaLabelledby || anchorAriaLabelledby || anchorId,
-          selectionAttribute: 'aria-checked',
-          // Should this be here?
-          afterSelect: () => onClose === null || onClose === void 0 ? void 0 : onClose('item-select'),
-          enableFocusZone: isNarrowFullscreen // AnchoredOverlay takes care of focus zone. We only want to enable this if menu is narrow fullscreen.
-        },
+        value: overlayContextValue,
         children: children
       })
     })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.22.0-rc.984eec337",
+  "version": "38.22.0-rc.e78d46560",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",