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

package/lib/deprecated/ActionList/List.js

@@ -1,19 +1,16 @@
 'use strict';
 
-var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 var Group = require('./Group.js');
 var Item = require('./Item.js');
 var Divider = require('./Divider.js');
-var styled = require('styled-components');
-var constants = require('../../constants.js');
 var behaviors = require('@primer/behaviors');
+var BoxWithFallback = require('../../internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 /**
  * Asserts that the given value fulfills the `GroupedListProps` contract.
@@ -27,13 +24,16 @@ function isGroupedListProps(props) {
  * Contract for props passed to the `List` component.
  */
 
-const StyledList = styled__default.default.div.withConfig({
-  displayName: "List__StyledList",
-  componentId: "sc-hkz3q0-0"
-})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], constants.get('fontSizes.1'), behaviors.hasActiveDescendantAttribute, constants.get('colors.border.muted'));
+// Base styles for the List component
+const listStyles = {
+  fontSize: 'var(--text-body-size-medium, 14px)',
+  // 14px font-size * 1.428571429 = 20px line height
+  // TODO: When rem-based spacing on a 4px scale lands, replace hardcoded '20px'
+  lineHeight: '20px'
+};
 
 /**
- * Returns `sx` prop values for `List` children matching the given `List` style variation.
+ * Returns style objects for `List` children matching the given `List` style variation.
  * @param variant `List` style variation.
  */
 function useListVariant(variant = 'inset') {
@@ -41,7 +41,8 @@ function useListVariant(variant = 'inset') {
     case 'full':
       return {
         headerStyle: {
-          paddingX: constants.get('space.2')
+          paddingLeft: 'var(--base-size-8, 8px)',
+          paddingRight: 'var(--base-size-8, 8px)'
         },
         itemStyle: {
           borderRadius: 0
@@ -50,13 +51,14 @@ function useListVariant(variant = 'inset') {
     default:
       return {
         firstGroupStyle: {
-          marginTop: constants.get('space.2')
+          marginTop: 'var(--base-size-8, 8px)'
         },
         lastGroupStyle: {
-          marginBottom: constants.get('space.2')
+          marginBottom: 'var(--base-size-8, 8px)'
         },
         itemStyle: {
-          marginX: constants.get('space.2')
+          marginLeft: 'var(--base-size-8, 8px)',
+          marginRight: 'var(--base-size-8, 8px)'
         }
       };
   }
@@ -66,103 +68,113 @@ function useListVariant(variant = 'inset') {
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
 const List = /*#__PURE__*/React__default.default.forwardRef((props, forwardedRef) => {
-  const $ = reactCompilerRuntime.c(25);
+  // Extract style prop to avoid conflicts with BoxWithFallback
+  const {
+    style,
+    ...restProps
+  } = props;
+  // Get style objects for `List` children matching the given `List` style variation.
   const {
     firstGroupStyle,
     lastGroupStyle,
     headerStyle,
     itemStyle
-  } = useListVariant(props.variant);
-  let t0;
-  if ($[0] !== props.renderGroup) {
-    t0 = groupProps => {
-      var _ref;
-      const GroupComponent = ((_ref = "renderGroup" in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : props.renderGroup) || Group.Group;
-      return /*#__PURE__*/React.createElement(GroupComponent, {
-        ...groupProps,
-        key: groupProps.groupId
-      });
-    };
-    $[0] = props.renderGroup;
-    $[1] = t0;
+  } = useListVariant(restProps.variant);
+
+  /**
+   * Render a `Group` using the first of the following renderers that is defined:
+   * A `Group`-level or `List`-level custom `Group` renderer, or
+   * the default `Group` renderer.
+   */
+  const renderGroup = groupProps => {
+    var _ref;
+    const GroupComponent = ((_ref = 'renderGroup' in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : restProps.renderGroup) || Group.Group;
+    return /*#__PURE__*/React.createElement(GroupComponent, {
+      ...groupProps,
+      key: groupProps.groupId
+    });
+  };
+
+  /**
+   * Render an `Item` using the first of the following renderers that is defined:
+   * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
+   * or the default `Item` renderer.
+   */
+  const renderItem = (itemProps, item, itemIndex) => {
+    var _ref2, _ref3, _itemProps$id;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || restProps.renderItem || Item.Item;
+    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    return /*#__PURE__*/React.createElement(ItemComponent, {
+      showDivider: restProps.showItemDividers,
+      selectionVariant: restProps.selectionVariant,
+      ...itemProps,
+      key: key,
+      sx: {
+        ...itemStyle,
+        ...itemProps.sx
+      },
+      item: item
+    });
+  };
+
+  /**
+   * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
+   */
+  let groups = [];
+
+  // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
+  if (!isGroupedListProps(restProps)) {
+    // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
+    groups = [{
+      items: restProps.items.map((item_0, index) => renderItem(item_0, item_0, index)),
+      groupId: '0'
+    }];
   } else {
-    t0 = $[1];
-  }
-  const renderGroup = t0;
-  let t1;
-  if ($[2] !== itemStyle || $[3] !== props.renderItem || $[4] !== props.selectionVariant || $[5] !== props.showItemDividers) {
-    t1 = (itemProps, item, itemIndex) => {
-      var _ref2, _ref3, _itemProps$id;
-      const ItemComponent = "renderItem" in itemProps && itemProps.renderItem || props.renderItem || Item.Item;
-      const key = (_ref2 = (_ref3 = "key" in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
-      return /*#__PURE__*/React.createElement(ItemComponent, {
-        showDivider: props.showItemDividers,
-        selectionVariant: props.selectionVariant,
-        ...itemProps,
-        key: key,
-        sx: {
-          ...itemStyle,
-          ...itemProps.sx
-        },
-        item: item
+    // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
+
+    /**
+     * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
+     */
+    const groupMap = restProps.groupMetadata.reduce((groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata), new Map());
+    for (const itemProps_0 of restProps.items) {
+      var _group$items$length, _group$items, _group$items2;
+      // Look up the group associated with the current item.
+      const group = groupMap.get(itemProps_0.groupId);
+      const itemIndex_0 = (_group$items$length = group === null || group === void 0 ? void 0 : (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0;
+
+      // Upsert the group to include the current item (rendered).
+      groupMap.set(itemProps_0.groupId, {
+        ...group,
+        items: [...((_group$items2 = group === null || group === void 0 ? void 0 : group.items) !== null && _group$items2 !== void 0 ? _group$items2 : []), renderItem({
+          showDivider: group === null || group === void 0 ? void 0 : group.showItemDividers,
+          ...(group && 'renderItem' in group && {
+            renderItem: group.renderItem
+          }),
+          ...itemProps_0
+        }, itemProps_0, itemIndex_0)]
       });
-    };
-    $[2] = itemStyle;
-    $[3] = props.renderItem;
-    $[4] = props.selectionVariant;
-    $[5] = props.showItemDividers;
-    $[6] = t1;
-  } else {
-    t1 = $[6];
+    }
+    groups = [...groupMap.values()];
   }
-  const renderItem = t1;
-  let T0;
-  let t2;
-  let t3;
-  let t4;
-  if ($[7] !== firstGroupStyle || $[8] !== forwardedRef || $[9] !== headerStyle || $[10] !== lastGroupStyle || $[11] !== props || $[12] !== renderGroup || $[13] !== renderItem) {
-    let groups = [];
-    if (!isGroupedListProps(props)) {
-      let t5;
-      if ($[18] !== renderItem) {
-        t5 = (item_0, index) => renderItem(item_0, item_0, index);
-        $[18] = renderItem;
-        $[19] = t5;
-      } else {
-        t5 = $[19];
+  return /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
+    ...restProps,
+    ref: forwardedRef,
+    style: {
+      ...listStyles,
+      ...(style || {})
+    },
+    sx: {
+      [`&[${behaviors.hasActiveDescendantAttribute}], &:focus-within`]: {
+        '--item-hover-bg-override': 'none',
+        '--item-hover-divider-border-color-override': 'var(--borderColor-muted)'
       }
-      groups = [{
-        items: props.items.map(t5),
-        groupId: "0"
-      }];
-    } else {
-      const groupMap = props.groupMetadata.reduce(_temp, new Map());
-      for (const itemProps_0 of props.items) {
-        var _group$items$length, _group$items, _group$items2;
-        const group = groupMap.get(itemProps_0.groupId);
-        const itemIndex_0 = (_group$items$length = group === null || group === void 0 ? void 0 : (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0;
-        groupMap.set(itemProps_0.groupId, {
-          ...group,
-          items: [...((_group$items2 = group === null || group === void 0 ? void 0 : group.items) !== null && _group$items2 !== void 0 ? _group$items2 : []), renderItem({
-            showDivider: group === null || group === void 0 ? void 0 : group.showItemDividers,
-            ...(group && "renderItem" in group && {
-              renderItem: group.renderItem
-            }),
-            ...itemProps_0
-          }, itemProps_0, itemIndex_0)]
-        });
-      }
-      groups = [...groupMap.values()];
-    }
-    T0 = StyledList;
-    t2 = props;
-    t3 = forwardedRef;
-    t4 = groups.map((t5, index_0) => {
-      const {
-        header,
-        ...groupProps_0
-      } = t5;
-      const hasFilledHeader = (header === null || header === void 0 ? void 0 : header.variant) === "filled";
+    },
+    children: groups.map(({
+      header,
+      ...groupProps_0
+    }, index_0) => {
+      const hasFilledHeader = (header === null || header === void 0 ? void 0 : header.variant) === 'filled';
       const shouldShowDivider = index_0 > 0 && !hasFilledHeader;
       return /*#__PURE__*/jsxRuntime.jsxs(React__default.default.Fragment, {
         children: [shouldShowDivider ? /*#__PURE__*/jsxRuntime.jsx(Divider.Divider, {}, `${groupProps_0.groupId}-divider`) : null, renderGroup({
@@ -185,44 +197,9 @@ const List = /*#__PURE__*/React__default.default.forwardRef((props, forwardedRef
           ...groupProps_0
         })]
       }, groupProps_0.groupId);
-    });
-    $[7] = firstGroupStyle;
-    $[8] = forwardedRef;
-    $[9] = headerStyle;
-    $[10] = lastGroupStyle;
-    $[11] = props;
-    $[12] = renderGroup;
-    $[13] = renderItem;
-    $[14] = T0;
-    $[15] = t2;
-    $[16] = t3;
-    $[17] = t4;
-  } else {
-    T0 = $[14];
-    t2 = $[15];
-    t3 = $[16];
-    t4 = $[17];
-  }
-  let t5;
-  if ($[20] !== T0 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4) {
-    t5 = /*#__PURE__*/jsxRuntime.jsx(T0, {
-      ...t2,
-      ref: t3,
-      children: t4
-    });
-    $[20] = T0;
-    $[21] = t2;
-    $[22] = t3;
-    $[23] = t4;
-    $[24] = t5;
-  } else {
-    t5 = $[24];
-  }
-  return t5;
+    })
+  });
 });
 List.displayName = 'ActionList';
-function _temp(groupAccumulator, groupMetadata) {
-  return groupAccumulator.set(groupMetadata.groupId, groupMetadata);
-}
 
 exports.List = List;

package/lib/deprecated/ActionMenu.js

@@ -119,11 +119,10 @@ const ActionMenuBase = t0 => {
   }
   const renderMenuAnchor = t4;
   let t5;
-  let t6;
   if ($[17] !== items || $[18] !== onAction || $[19] !== onClose) {
-    let t7;
+    let t6;
     if ($[21] !== onAction || $[22] !== onClose) {
-      t7 = item => ({
+      t6 = item => ({
         ...item,
         role: "menuitem",
         onAction: (props_0, event) => {
@@ -137,43 +136,42 @@ const ActionMenuBase = t0 => {
       });
       $[21] = onAction;
       $[22] = onClose;
-      $[23] = t7;
+      $[23] = t6;
     } else {
-      t7 = $[23];
+      t6 = $[23];
     }
-    t6 = items.map(t7);
+    t5 = items.map(t6);
     $[17] = items;
     $[18] = onAction;
     $[19] = onClose;
-    $[20] = t6;
+    $[20] = t5;
   } else {
-    t6 = $[20];
+    t5 = $[20];
   }
-  t5 = t6;
   const itemsToRender = t5;
-  let t7;
+  let t6;
   if ($[24] !== itemsToRender || $[25] !== listProps) {
-    t7 = /*#__PURE__*/jsxRuntime.jsx(List.List, {
+    t6 = /*#__PURE__*/jsxRuntime.jsx(List.List, {
       ...listProps,
       role: "menu",
       items: itemsToRender
     });
     $[24] = itemsToRender;
     $[25] = listProps;
-    $[26] = t7;
+    $[26] = t6;
   } else {
-    t7 = $[26];
+    t6 = $[26];
   }
-  let t8;
-  if ($[27] !== anchorRef || $[28] !== combinedOpenState || $[29] !== onClose || $[30] !== onOpen || $[31] !== overlayProps || $[32] !== renderMenuAnchor || $[33] !== t7) {
-    t8 = /*#__PURE__*/jsxRuntime.jsx(AnchoredOverlay.AnchoredOverlay, {
+  let t7;
+  if ($[27] !== anchorRef || $[28] !== combinedOpenState || $[29] !== onClose || $[30] !== onOpen || $[31] !== overlayProps || $[32] !== renderMenuAnchor || $[33] !== t6) {
+    t7 = /*#__PURE__*/jsxRuntime.jsx(AnchoredOverlay.AnchoredOverlay, {
       renderAnchor: renderMenuAnchor,
       anchorRef: anchorRef,
       open: combinedOpenState,
       onOpen: onOpen,
       onClose: onClose,
       overlayProps: overlayProps,
-      children: t7
+      children: t6
     });
     $[27] = anchorRef;
     $[28] = combinedOpenState;
@@ -181,12 +179,12 @@ const ActionMenuBase = t0 => {
     $[30] = onOpen;
     $[31] = overlayProps;
     $[32] = renderMenuAnchor;
-    $[33] = t7;
-    $[34] = t8;
+    $[33] = t6;
+    $[34] = t7;
   } else {
-    t8 = $[34];
+    t7 = $[34];
   }
-  return t8;
+  return t7;
 };
 ActionMenuBase.displayName = 'ActionMenu';
 

package/lib/deprecated/index.d.ts

@@ -23,4 +23,6 @@ export { default as TabNav } from '../TabNav';
 export type { TabNavProps, TabNavLinkProps } from '../TabNav';
 export { default as Tooltip } from '../Tooltip/Tooltip';
 export type { TooltipProps } from '../Tooltip/Tooltip';
+export { default as PointerBox } from '../PointerBox';
+export type { PointerBoxProps } from '../PointerBox';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/deprecated/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EACV,eAAe,EACf,SAAS,IAAI,mBAAmB,EAChC,UAAU,IAAI,oBAAoB,EAClC,gBAAgB,IAAI,0BAA0B,EAC9C,SAAS,IAAI,mBAAmB,GACjC,MAAM,cAAc,CAAA;AACrB,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AAKjD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,YAAY,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,MAAM,gBAAgB,CAAA;AAI5E,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,YAAY,EAAC,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,YAAY,CAAA;AAC7C,YAAY,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,aAAa,CAAA;AAC/C,YAAY,EAAC,aAAa,EAAC,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,WAAW,CAAA;AAC3C,YAAY,EAAC,WAAW,EAAE,eAAe,EAAC,MAAM,WAAW,CAAA;AAC3D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/deprecated/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EACV,eAAe,EACf,SAAS,IAAI,mBAAmB,EAChC,UAAU,IAAI,oBAAoB,EAClC,gBAAgB,IAAI,0BAA0B,EAC9C,SAAS,IAAI,mBAAmB,GACjC,MAAM,cAAc,CAAA;AACrB,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AAKjD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,YAAY,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,MAAM,gBAAgB,CAAA;AAI5E,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,YAAY,EAAC,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,YAAY,CAAA;AAC7C,YAAY,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,aAAa,CAAA;AAC/C,YAAY,EAAC,aAAa,EAAC,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,WAAW,CAAA;AAC3C,YAAY,EAAC,WAAW,EAAE,eAAe,EAAC,MAAM,WAAW,CAAA;AAC3D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAIpD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,eAAe,CAAA;AACnD,YAAY,EAAC,eAAe,EAAC,MAAM,eAAe,CAAA"}

package/lib/deprecated/index.js

@@ -7,6 +7,7 @@ var Tooltip = require('../Tooltip/Tooltip.js');
 var FilteredSearch = require('./FilteredSearch/FilteredSearch.js');
 var Octicon = require('../Octicon/Octicon.js');
 var Pagehead = require('../Pagehead/Pagehead.js');
+var PointerBox = require('../PointerBox/PointerBox.js');
 var UnderlineNav = require('./UnderlineNav/UnderlineNav.js');
 var Dialog = require('../DialogV1/Dialog.js');
 var TabNav = require('../TabNav/TabNav.js');
@@ -19,6 +20,7 @@ exports.Tooltip = Tooltip.default;
 exports.FilteredSearch = FilteredSearch;
 exports.Octicon = Octicon;
 exports.Pagehead = Pagehead;
+exports.PointerBox = PointerBox;
 exports.UnderlineNav = UnderlineNav;
 exports.Dialog = Dialog;
 exports.TabNav = TabNav;

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);
 };