@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib/experimental/UnderlinePanels/UnderlinePanels.js

@@ -7,14 +7,13 @@ require('../../node_modules/@github/tab-container-element/dist/tab-container-ele
 var createComponent = require('../../utils/create-component.js');
 var UnderlineTabbedInterface = require('../../internal/components/UnderlineTabbedInterface.js');
 var invariant = require('../../utils/invariant.js');
-var defaultSxProp = require('../../utils/defaultSxProp.js');
 var useResizeObserver = require('../../hooks/useResizeObserver.js');
 var useIsomorphicLayoutEffect = require('../../utils/useIsomorphicLayoutEffect.js');
 var UnderlinePanels_module = require('./UnderlinePanels.module.css.js');
 var clsx = require('clsx');
+var BoxWithFallback = require('../../internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useId = require('../../hooks/useId.js');
-var Box = require('../../Box/Box.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -26,7 +25,6 @@ const UnderlinePanels = ({
   'aria-labelledby': ariaLabelledBy,
   children,
   loadingCounters,
-  sx: sxProp = defaultSxProp.defaultSxProp,
   className,
   ...props
 }) => {
@@ -101,7 +99,6 @@ const UnderlinePanels = ({
       ref: wrapperRef,
       slot: "tablist-wrapper",
       "data-icons-visible": iconsVisible,
-      sx: sxProp,
       className: clsx.clsx(className, UnderlinePanels_module.StyledUnderlineWrapper),
       ...props,
       children: /*#__PURE__*/jsxRuntime.jsx(UnderlineTabbedInterface.UnderlineItemList, {
@@ -116,15 +113,13 @@ const UnderlinePanels = ({
 };
 UnderlinePanels.displayName = "UnderlinePanels";
 const Tab = t0 => {
-  const $ = reactCompilerRuntime.c(16);
+  const $ = reactCompilerRuntime.c(14);
   let ariaSelected;
   let onSelect;
   let props;
-  let t1;
   if ($[0] !== t0) {
     ({
       "aria-selected": ariaSelected,
-      sx: t1,
       onSelect,
       ...props
     } = t0);
@@ -132,72 +127,67 @@ const Tab = t0 => {
     $[1] = ariaSelected;
     $[2] = onSelect;
     $[3] = props;
-    $[4] = t1;
   } else {
     ariaSelected = $[1];
     onSelect = $[2];
     props = $[3];
-    t1 = $[4];
   }
-  const sxProp = t1 === undefined ? defaultSxProp.defaultSxProp : t1;
-  let t2;
-  if ($[5] !== onSelect) {
-    t2 = event => {
+  let t1;
+  if ($[4] !== onSelect) {
+    t1 = event => {
       if (!event.defaultPrevented && typeof onSelect === "function") {
         onSelect(event);
       }
     };
-    $[5] = onSelect;
-    $[6] = t2;
+    $[4] = onSelect;
+    $[5] = t1;
   } else {
-    t2 = $[6];
+    t1 = $[5];
   }
-  const clickHandler = t2;
-  let t3;
-  if ($[7] !== onSelect) {
-    t3 = event_0 => {
+  const clickHandler = t1;
+  let t2;
+  if ($[6] !== onSelect) {
+    t2 = event_0 => {
       if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") {
         onSelect(event_0);
       }
     };
-    $[7] = onSelect;
-    $[8] = t3;
+    $[6] = onSelect;
+    $[7] = t2;
   } else {
-    t3 = $[8];
+    t2 = $[7];
   }
-  const keyDownHandler = t3;
-  const t4 = ariaSelected ? 0 : -1;
-  let t5;
-  if ($[9] !== ariaSelected || $[10] !== clickHandler || $[11] !== keyDownHandler || $[12] !== props || $[13] !== sxProp || $[14] !== t4) {
-    t5 = /*#__PURE__*/jsxRuntime.jsx(UnderlineTabbedInterface.UnderlineItem, {
+  const keyDownHandler = t2;
+  const t3 = ariaSelected ? 0 : -1;
+  let t4;
+  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== props || $[12] !== t3) {
+    t4 = /*#__PURE__*/jsxRuntime.jsx(UnderlineTabbedInterface.UnderlineItem, {
       as: "button",
       role: "tab",
-      tabIndex: t4,
+      tabIndex: t3,
       "aria-selected": ariaSelected,
-      sx: sxProp,
       type: "button",
       onClick: clickHandler,
       onKeyDown: keyDownHandler,
       ...props
     });
-    $[9] = ariaSelected;
-    $[10] = clickHandler;
-    $[11] = keyDownHandler;
-    $[12] = props;
-    $[13] = sxProp;
-    $[14] = t4;
-    $[15] = t5;
+    $[8] = ariaSelected;
+    $[9] = clickHandler;
+    $[10] = keyDownHandler;
+    $[11] = props;
+    $[12] = t3;
+    $[13] = t4;
   } else {
-    t5 = $[15];
+    t4 = $[13];
   }
-  return t5;
+  return t4;
 };
 Tab.displayName = 'UnderlinePanels.Tab';
 const Panel = props => {
   const $ = reactCompilerRuntime.c(2);
   let t0;
   if ($[0] !== props) {
-    t0 = /*#__PURE__*/jsxRuntime.jsx(Box, {
+    t0 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
       as: "div",
       role: "tabpanel",
       ...props

package/lib/experimental/index.d.ts

@@ -33,7 +33,12 @@ export { Announce, AriaStatus, AriaAlert } from '../live-region';
 export type { AnnounceProps, AriaStatusProps, AriaAlertProps } from '../live-region';
 export { UnderlinePanels } from './UnderlinePanels';
 export type { UnderlinePanelsProps, UnderlinePanelsTabProps, UnderlinePanelsPanelProps } from './UnderlinePanels';
-export { SkeletonBox, SkeletonText, SkeletonAvatar } from './Skeleton';
+export { SkeletonBox } from '../Skeleton';
+export type { SkeletonBoxProps } from '../Skeleton';
+export { SkeletonText } from '../SkeletonText';
+export type { SkeletonTextProps } from '../SkeletonText';
+export { SkeletonAvatar } from '../SkeletonAvatar';
+export type { SkeletonAvatarProps } from '../SkeletonAvatar';
 export { FeatureFlags, DefaultFeatureFlags, useFeatureFlag } from '../FeatureFlags';
 export type { FeatureFlagsProps } from '../FeatureFlags';
 export { FilteredActionList } from '../FilteredActionList';

package/lib/experimental/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,eAAe,CAAA;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAA;AACpC,YAAY,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAA;AAChC,YAAY,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAE1C,OAAO,EAAC,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAA;AACjE,YAAY,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,GACZ,MAAM,cAAc,CAAA;AAErB,cAAc,kBAAkB,CAAA;AAEhC,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAA;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAA;AAExD,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AAEzB,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAA;AAClC,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AACpC,YAAY,EAAC,YAAY,EAAC,MAAM,cAAc,CAAA;AAC9C,cAAc,cAAc,CAAA;AAE5B,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAA;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAA;AAE9D,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAA;AAC9B,YAAY,EAAC,UAAU,EAAE,cAAc,EAAC,MAAM,UAAU,CAAA;AAExD,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAC9D,YAAY,EAAC,aAAa,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElF,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAE,uBAAuB,EAAE,yBAAyB,EAAC,MAAM,mBAAmB,CAAA;AAE/G,OAAO,EAAC,WAAW,EAAE,YAAY,EAAE,cAAc,EAAC,MAAM,YAAY,CAAA;AACpE,OAAO,EAAC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAA;AACjF,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AAEtD,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAA;AACxD,YAAY,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AAEjD,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,eAAe,CAAA;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAA;AACpC,YAAY,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAA;AAChC,YAAY,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAE1C,OAAO,EAAC,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAC,MAAM,cAAc,CAAA;AACjE,YAAY,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,GACZ,MAAM,cAAc,CAAA;AAErB,cAAc,kBAAkB,CAAA;AAEhC,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAA;AAC9C,YAAY,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAA;AAExD,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AAEzB,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAA;AAClC,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,yBAAyB,EACzB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,YAAY,CAAA;AACnB,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AACpC,YAAY,EAAC,YAAY,EAAC,MAAM,cAAc,CAAA;AAC9C,cAAc,cAAc,CAAA;AAE5B,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAA;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,qBAAqB,CAAA;AAE9D,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAA;AAC9B,YAAY,EAAC,UAAU,EAAE,cAAc,EAAC,MAAM,UAAU,CAAA;AAExD,OAAO,EAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAA;AAC9D,YAAY,EAAC,aAAa,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElF,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAA;AACjD,YAAY,EAAC,oBAAoB,EAAE,uBAAuB,EAAE,yBAAyB,EAAC,MAAM,mBAAmB,CAAA;AAE/G,OAAO,EAAC,WAAW,EAAC,MAAM,aAAa,CAAA;AACvC,YAAY,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAA;AACjD,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAC,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAA;AACjF,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAA;AAEtD,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAA;AACxD,YAAY,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AAEjD,cAAc,mBAAmB,CAAA"}

package/lib/experimental/index.js

@@ -19,12 +19,12 @@ var AriaStatus = require('../live-region/AriaStatus.js');
 var AriaAlert = require('../live-region/AriaAlert.js');
 var UnderlinePanels = require('./UnderlinePanels/UnderlinePanels.js');
 var SkeletonBox = require('../Skeleton/SkeletonBox.js');
-var SkeletonText = require('./Skeleton/SkeletonText.js');
-var SkeletonAvatar = require('./Skeleton/SkeletonAvatar.js');
+var SkeletonText = require('../SkeletonText/SkeletonText.js');
+var SkeletonAvatar = require('../SkeletonAvatar/SkeletonAvatar.js');
 var FeatureFlags = require('../FeatureFlags/FeatureFlags.js');
 var DefaultFeatureFlags = require('../FeatureFlags/DefaultFeatureFlags.js');
 var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
-var FilteredActionListEntry = require('../FilteredActionList/FilteredActionListEntry.js');
+var FilteredActionList = require('../FilteredActionList/FilteredActionList.js');
 var IssueLabel = require('./IssueLabel/IssueLabel.js');
 var PageHeader = require('../PageHeader/PageHeader.js');
 var Hidden = require('../Hidden/Hidden.js');
@@ -58,7 +58,7 @@ exports.SkeletonAvatar = SkeletonAvatar.SkeletonAvatar;
 exports.FeatureFlags = FeatureFlags.FeatureFlags;
 exports.DefaultFeatureFlags = DefaultFeatureFlags.DefaultFeatureFlags;
 exports.useFeatureFlag = useFeatureFlag.useFeatureFlag;
-exports.FilteredActionList = FilteredActionListEntry.FilteredActionList;
+exports.FilteredActionList = FilteredActionList.FilteredActionList;
 exports.IssueLabel = IssueLabel.IssueLabel;
 exports.PageHeader = PageHeader.PageHeader;
 exports.Hidden = Hidden.Hidden;

package/lib/hooks/useMenuKeyboardNavigation.js

@@ -31,9 +31,10 @@ const useMenuKeyboardNavigation = (open, onClose, containerRef, anchorRef, t0) =
  * and the focus should naturally move to the next item
  */
 const useCloseMenuOnTab = (open, onClose, containerRef, anchorRef) => {
-  const $ = reactCompilerRuntime.c(10);
+  const $ = reactCompilerRuntime.c(6);
   let t0;
-  if ($[0] !== (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) || $[1] !== (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || $[2] !== onClose || $[3] !== open) {
+  let t1;
+  if ($[0] !== anchorRef || $[1] !== containerRef || $[2] !== onClose || $[3] !== open) {
     t0 = () => {
       const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
       const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
@@ -49,24 +50,16 @@ const useCloseMenuOnTab = (open, onClose, containerRef, anchorRef) => {
         anchor === null || anchor === void 0 ? void 0 : anchor.removeEventListener("keydown", handler);
       };
     };
-    $[0] = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
-    $[1] = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+    t1 = [open, onClose, containerRef, anchorRef];
+    $[0] = anchorRef;
+    $[1] = containerRef;
     $[2] = onClose;
     $[3] = open;
     $[4] = t0;
+    $[5] = t1;
   } else {
     t0 = $[4];
-  }
-  let t1;
-  if ($[5] !== anchorRef || $[6] !== containerRef || $[7] !== onClose || $[8] !== open) {
-    t1 = [open, onClose, containerRef, anchorRef];
-    $[5] = anchorRef;
-    $[6] = containerRef;
-    $[7] = onClose;
-    $[8] = open;
-    $[9] = t1;
-  } else {
-    t1 = $[9];
+    t1 = $[5];
   }
   React__default.default.useEffect(t0, t1);
 };
@@ -75,9 +68,10 @@ const useCloseMenuOnTab = (open, onClose, containerRef, anchorRef) => {
  * Close submenu when left arrow key is pressed
  */
 const useCloseSubmenuOnArrow = (open, isSubmenu, onClose, containerRef) => {
-  const $ = reactCompilerRuntime.c(10);
+  const $ = reactCompilerRuntime.c(6);
   let t0;
-  if ($[0] !== (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || $[1] !== isSubmenu || $[2] !== onClose || $[3] !== open) {
+  let t1;
+  if ($[0] !== containerRef || $[1] !== isSubmenu || $[2] !== onClose || $[3] !== open) {
     t0 = () => {
       const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
       const handler = event => {
@@ -90,24 +84,16 @@ const useCloseSubmenuOnArrow = (open, isSubmenu, onClose, containerRef) => {
         container === null || container === void 0 ? void 0 : container.removeEventListener("keydown", handler);
       };
     };
-    $[0] = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+    t1 = [open, onClose, containerRef, isSubmenu];
+    $[0] = containerRef;
     $[1] = isSubmenu;
     $[2] = onClose;
     $[3] = open;
     $[4] = t0;
+    $[5] = t1;
   } else {
     t0 = $[4];
-  }
-  let t1;
-  if ($[5] !== containerRef || $[6] !== isSubmenu || $[7] !== onClose || $[8] !== open) {
-    t1 = [open, onClose, containerRef, isSubmenu];
-    $[5] = containerRef;
-    $[6] = isSubmenu;
-    $[7] = onClose;
-    $[8] = open;
-    $[9] = t1;
-  } else {
-    t1 = $[9];
+    t1 = $[5];
   }
   React__default.default.useEffect(t0, t1);
 };
@@ -117,9 +103,10 @@ const useCloseSubmenuOnArrow = (open, isSubmenu, onClose, containerRef) => {
  * focus should move to a menu item
  */
 const useMoveFocusToMenuItem = (open, containerRef, anchorRef) => {
-  const $ = reactCompilerRuntime.c(8);
+  const $ = reactCompilerRuntime.c(5);
   let t0;
-  if ($[0] !== (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) || $[1] !== (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || $[2] !== open) {
+  let t1;
+  if ($[0] !== anchorRef || $[1] !== containerRef || $[2] !== open) {
     t0 = () => {
       const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
       const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
@@ -142,22 +129,15 @@ const useMoveFocusToMenuItem = (open, containerRef, anchorRef) => {
       anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
       return () => anchor === null || anchor === void 0 ? void 0 : anchor.addEventListener("keydown", handler);
     };
-    $[0] = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
-    $[1] = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+    t1 = [open, containerRef, anchorRef];
+    $[0] = anchorRef;
+    $[1] = containerRef;
     $[2] = open;
     $[3] = t0;
+    $[4] = t1;
   } else {
     t0 = $[3];
-  }
-  let t1;
-  if ($[4] !== anchorRef || $[5] !== containerRef || $[6] !== open) {
-    t1 = [open, containerRef, anchorRef];
-    $[4] = anchorRef;
-    $[5] = containerRef;
-    $[6] = open;
-    $[7] = t1;
-  } else {
-    t1 = $[7];
+    t1 = $[4];
   }
   React__default.default.useEffect(t0, t1);
 };

package/lib/hooks/useMnemonics.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 var utils = require('@primer/behaviors/utils');
 var useProvidedRefOrCreate = require('./useProvidedRefOrCreate.js');
@@ -16,104 +15,65 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  */
 
 const useMnemonics = (open, providedRef) => {
-  const $ = reactCompilerRuntime.c(9);
   const containerRef = useProvidedRefOrCreate.useProvidedRefOrCreate(providedRef);
-  let t0;
-  let t1;
-  if ($[0] !== containerRef || $[1] !== open) {
-    t0 = function addAriaKeyshortcuts() {
-      if (!open || !containerRef.current) {
-        return;
-      }
-      const container = containerRef.current;
-      const focusableItems = [...utils.iterateFocusableElements(container)];
-      focusableItems.map(_temp);
-    };
-    t1 = [open, containerRef];
-    $[0] = containerRef;
-    $[1] = open;
-    $[2] = t0;
-    $[3] = t1;
-  } else {
-    t0 = $[2];
-    t1 = $[3];
-  }
-  React__default.default.useEffect(t0, t1);
-  let t2;
-  if ($[4] !== containerRef || $[5] !== open) {
-    t2 = [open, containerRef];
-    $[4] = containerRef;
-    $[5] = open;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
+  React__default.default.useEffect(function addAriaKeyshortcuts() {
+    if (!open || !containerRef.current) return;
+    const container = containerRef.current;
+    const focusableItems = [...utils.iterateFocusableElements(container)];
+    focusableItems.map(item => {
+      // if item already has aria-keyshortcuts defined by user, skip
+      if (item.getAttribute('aria-keyshortcuts')) return;
+      const firstLetter = item.textContent.toLowerCase()[0];
+      if (firstLetter) item.setAttribute('aria-keyshortcuts', firstLetter);
+    });
+  }, [open, containerRef]);
   React__default.default.useEffect(function handleKeyDown() {
-    if (!open || !containerRef.current) {
-      return;
-    }
+    if (!open || !containerRef.current) return;
     const container_0 = containerRef.current;
     const handler = event => {
       var _elementToFocus;
+      // skip if a TextInput has focus
       const activeElement = document.activeElement;
-      if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") {
-        return;
-      }
+      if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') return;
+
+      // skip if used with modifier to preserve shortcuts like ⌘ + F
       const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
-      if (hasModifier) {
-        return;
-      }
-      if (!isAlphabetKey(event)) {
-        return;
-      }
+      if (hasModifier) return;
+
+      // skip if it's not a alphabet key
+      if (!isAlphabetKey(event)) return;
+
+      // if this is a typeahead event, don't propagate outside of menu
       event.stopPropagation();
       const query = event.key.toLowerCase();
       let elementToFocus;
       const focusableItems_0 = [...utils.iterateFocusableElements(container_0)];
       const itemsMatchingKey = focusableItems_0.filter(item_0 => {
         var _item_0$getAttribute;
-        const keyshortcuts = (_item_0$getAttribute = item_0.getAttribute("aria-keyshortcuts")) === null || _item_0$getAttribute === void 0 ? void 0 : _item_0$getAttribute.split(" ").map(_temp2);
+        const keyshortcuts = (_item_0$getAttribute = item_0.getAttribute('aria-keyshortcuts')) === null || _item_0$getAttribute === void 0 ? void 0 : _item_0$getAttribute.split(' ').map(shortcut => shortcut.toLowerCase());
         return keyshortcuts && keyshortcuts.includes(query);
       });
       const currentActiveIndex = itemsMatchingKey.indexOf(activeElement);
+
+      // If the last element is already selected, cycle through the list
       if (currentActiveIndex === itemsMatchingKey.length - 1) {
         elementToFocus = itemsMatchingKey[0];
       } else {
-        elementToFocus = itemsMatchingKey.find((item_1, index) => index > currentActiveIndex);
+        elementToFocus = itemsMatchingKey.find((item_1, index) => {
+          return index > currentActiveIndex;
+        });
       }
       (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus();
     };
-    container_0.addEventListener("keydown", handler);
-    return () => container_0.removeEventListener("keydown", handler);
-  }, t2);
-  const isAlphabetKey = _temp3;
-  let t3;
-  if ($[7] !== containerRef) {
-    t3 = {
-      containerRef
-    };
-    $[7] = containerRef;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  return t3;
+    container_0.addEventListener('keydown', handler);
+    return () => container_0.removeEventListener('keydown', handler);
+  }, [open, containerRef]);
+  const isAlphabetKey = event_0 => {
+    return event_0.key.length === 1 && /[a-z\d]/i.test(event_0.key);
+  };
+  return {
+    containerRef
+  };
 };
-function _temp(item) {
-  var _item$textContent;
-  if (item.getAttribute("aria-keyshortcuts")) {
-    return;
-  }
-  const firstLetter = (_item$textContent = item.textContent) === null || _item$textContent === void 0 ? void 0 : _item$textContent.toLowerCase()[0];
-  if (firstLetter) {
-    item.setAttribute("aria-keyshortcuts", firstLetter);
-  }
-}
-function _temp2(shortcut) {
-  return shortcut.toLowerCase();
-}
-function _temp3(event_0) {
-  return event_0.key.length === 1 && /[a-z\d]/i.test(event_0.key);
-}
 
 exports.useMnemonics = useMnemonics;

package/lib/hooks/useOpenAndCloseFocus.js

@@ -5,7 +5,7 @@ var React = require('react');
 var utils = require('@primer/behaviors/utils');
 
 function useOpenAndCloseFocus(t0) {
-  const $ = reactCompilerRuntime.c(10);
+  const $ = reactCompilerRuntime.c(6);
   const {
     initialFocusRef,
     returnFocusRef,
@@ -13,7 +13,8 @@ function useOpenAndCloseFocus(t0) {
     preventFocusOnOpen
   } = t0;
   let t1;
-  if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef.current) {
+  let t2;
+  if ($[0] !== containerRef || $[1] !== initialFocusRef || $[2] !== preventFocusOnOpen || $[3] !== returnFocusRef) {
     t1 = () => {
       if (!preventFocusOnOpen) {
         if (initialFocusRef && initialFocusRef.current) {
@@ -30,24 +31,16 @@ function useOpenAndCloseFocus(t0) {
         returnFocusRefCurrent === null || returnFocusRefCurrent === void 0 ? void 0 : returnFocusRefCurrent.focus();
       };
     };
+    t2 = [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen];
     $[0] = containerRef;
     $[1] = initialFocusRef;
     $[2] = preventFocusOnOpen;
-    $[3] = returnFocusRef.current;
+    $[3] = returnFocusRef;
     $[4] = t1;
+    $[5] = t2;
   } else {
     t1 = $[4];
-  }
-  let t2;
-  if ($[5] !== containerRef || $[6] !== initialFocusRef || $[7] !== preventFocusOnOpen || $[8] !== returnFocusRef) {
-    t2 = [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen];
-    $[5] = containerRef;
-    $[6] = initialFocusRef;
-    $[7] = preventFocusOnOpen;
-    $[8] = returnFocusRef;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
+    t2 = $[5];
   }
   React.useEffect(t1, t2);
 }

package/lib/hooks/useOverflow.js

@@ -4,10 +4,11 @@ var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 
 function useOverflow(ref) {
-  const $ = reactCompilerRuntime.c(4);
+  const $ = reactCompilerRuntime.c(3);
   const [hasOverflow, setHasOverflow] = React.useState(false);
   let t0;
-  if ($[0] !== ref.current) {
+  let t1;
+  if ($[0] !== ref) {
     t0 = () => {
       if (ref.current === null) {
         return;
@@ -25,18 +26,13 @@ function useOverflow(ref) {
         observer.disconnect();
       };
     };
-    $[0] = ref.current;
+    t1 = [ref];
+    $[0] = ref;
     $[1] = t0;
+    $[2] = t1;
   } else {
     t0 = $[1];
-  }
-  let t1;
-  if ($[2] !== ref) {
-    t1 = [ref];
-    $[2] = ref;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
+    t1 = $[2];
   }
   React.useEffect(t0, t1);
   return hasOverflow;

package/lib/hooks/useScrollFlash.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 
 /**
@@ -7,20 +8,30 @@ var React = require('react');
  * @param scrollContainerRef The ref of the scrollable content
  */
 function useScrollFlash(scrollContainerRef) {
-  // https://adxlv.computer/projects/flash-scrollers/
-  React.useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
-    if (!scrollContainer) {
-      return;
-    }
-    const currentScroll = scrollContainer.scrollTop;
-    const maxScroll = scrollContainer.scrollHeight;
-    const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
-
-    // eslint-disable-next-line react-compiler/react-compiler
-    scrollContainer.scrollTop = altScroll;
-    scrollContainer.scrollTop = currentScroll;
-  }, [scrollContainerRef]);
+  const $ = reactCompilerRuntime.c(3);
+  let t0;
+  let t1;
+  if ($[0] !== scrollContainerRef) {
+    t0 = () => {
+      const scrollContainer = scrollContainerRef.current;
+      if (!scrollContainer) {
+        return;
+      }
+      const currentScroll = scrollContainer.scrollTop;
+      const maxScroll = scrollContainer.scrollHeight;
+      const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
+      scrollContainer.scrollTop = altScroll;
+      scrollContainer.scrollTop = currentScroll;
+    };
+    t1 = [scrollContainerRef];
+    $[0] = scrollContainerRef;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  React.useEffect(t0, t1);
 }
 
 module.exports = useScrollFlash;