@primer/react 38.0.0-rc.5 → 38.0.0-rc.7

package/dist/ActionBar/ActionBar.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import React, { forwardRef, useState, useCallback, useRef } from 'react';
+import React, { forwardRef, useState, useRef, useId } from 'react';
 import { KebabHorizontalIcon } from '@primer/octicons-react';
 import { ActionList } from '../ActionList/index.js';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
@@ -10,14 +10,23 @@ import { IconButton } from '../Button/IconButton.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import styles from './ActionBar.module.css.js';
 import { clsx } from 'clsx';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { FocusKeys } from '@primer/behaviors';
 import { ActionMenu } from '../ActionMenu/ActionMenu.js';
 
 const ACTIONBAR_ITEM_GAP = 8;
+
+/**
+ * Registry of descendants to render in the list or menu. To preserve insertion order across updates, children are
+ * set to `null` when unregistered rather than fully dropped from the map.
+ */
+
 const ActionBarContext = /*#__PURE__*/React.createContext({
   size: 'medium',
-  setChildrenWidth: () => null
+  registerChild: () => {},
+  unregisterChild: () => {},
+  isVisibleChild: () => true
 });
 
 /*
@@ -25,17 +34,12 @@ small (28px), medium (32px), large (40px)
 */
 
 const MORE_BTN_WIDTH = 32;
-const getValidChildren = children => {
-  return React.Children.toArray(children).filter(child => {
-    return /*#__PURE__*/React.isValidElement(child);
-  });
-};
-const calculatePossibleItems = (childWidthArray, navWidth, moreMenuWidth = 0) => {
+const calculatePossibleItems = (registryEntries, navWidth, moreMenuWidth = 0) => {
   const widthToFit = navWidth - moreMenuWidth;
-  let breakpoint = childWidthArray.length; // assume all items will fit
+  let breakpoint = registryEntries.length; // assume all items will fit
   let sumsOfChildWidth = 0;
-  for (const [index, childWidth] of childWidthArray.entries()) {
-    sumsOfChildWidth += index > 0 ? childWidth.width + ACTIONBAR_ITEM_GAP : childWidth.width;
+  for (const [index, [, child]] of registryEntries.entries()) {
+    sumsOfChildWidth += index > 0 ? child.width + ACTIONBAR_ITEM_GAP : child.width;
     if (sumsOfChildWidth > widthToFit) {
       breakpoint = index;
       break;
@@ -45,188 +49,295 @@ const calculatePossibleItems = (childWidthArray, navWidth, moreMenuWidth = 0) =>
   }
   return breakpoint;
 };
-const overflowEffect = (navWidth, moreMenuWidth, childArray, childWidthArray, updateListAndMenu, hasActiveMenu) => {
-  if (childWidthArray.length === 0) {
-    updateListAndMenu({
-      items: childArray,
-      menuItems: []
-    });
-  }
-  const numberOfItemsPossible = calculatePossibleItems(childWidthArray, navWidth);
-  const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(childWidthArray, navWidth, moreMenuWidth || MORE_BTN_WIDTH);
-  const items = [];
-  const menuItems = [];
+const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu) => {
+  const registryEntries = Array.from(childRegistry).filter(entry => entry[1] !== null);
+  if (registryEntries.length === 0) return new Set();
+  const numberOfItemsPossible = calculatePossibleItems(registryEntries, navWidth);
+  const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(registryEntries, navWidth, moreMenuWidth || MORE_BTN_WIDTH);
+  const menuItems = new Set();
 
   // First, we check if we can fit all the items with their icons
-  if (childArray.length >= numberOfItemsPossible) {
+  if (registryEntries.length >= numberOfItemsPossible) {
     /* Below is an accessibility requirement. Never show only one item in the overflow menu.
      * If there is only one item left to display in the overflow menu according to the calculation,
      * we need to pull another item from the list into the overflow menu.
      */
-    const numberOfItemsInMenu = childArray.length - numberOfItemsPossibleWithMoreMenu;
+    const numberOfItemsInMenu = registryEntries.length - numberOfItemsPossibleWithMoreMenu;
     const numberOfListItems = numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu;
-    for (const [index, child] of childArray.entries()) {
+    for (const [index, [id, child]] of registryEntries.entries()) {
       if (index < numberOfListItems) {
-        items.push(child);
+        continue;
         //if the last item is a divider
-      } else if (childWidthArray[index].text === 'divider') {
+      } else if (child.type === 'divider') {
         if (index === numberOfListItems - 1 || index === numberOfListItems) {
           continue;
         } else {
-          const divider = /*#__PURE__*/React.createElement(ActionList.Divider, {
-            key: index
-          });
-          menuItems.push(divider);
+          menuItems.add(id);
         }
       } else {
-        menuItems.push(child);
+        menuItems.add(id);
       }
     }
-    updateListAndMenu({
-      items,
-      menuItems
-    });
-  } else if (numberOfItemsPossible > childArray.length && hasActiveMenu) {
+    return menuItems;
+  } else if (numberOfItemsPossible > registryEntries.length && hasActiveMenu) {
     /* If the items fit in the list and there are items in the overflow menu, we need to move them back to the list */
-    updateListAndMenu({
-      items: childArray,
-      menuItems: []
-    });
+    return new Set();
   }
 };
 const ActionBar = props => {
+  const $ = c(34);
   const {
-    size = 'medium',
+    size: t0,
     children,
-    'aria-label': ariaLabel,
-    flush = false,
+    "aria-label": ariaLabel,
+    flush: t1,
     className
   } = props;
-  const [childWidthArray, setChildWidthArray] = useState([]);
-  const setChildrenWidth = useCallback(size_0 => {
-    setChildWidthArray(arr => {
-      const newArr = [...arr, size_0];
-      return newArr;
-    });
-  }, []);
+  const size = t0 === undefined ? "medium" : t0;
+  const flush = t1 === undefined ? false : t1;
+  const [childRegistry, setChildRegistry] = useState(_temp);
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = (id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps));
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  const registerChild = t2;
+  let t3;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null));
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const unregisterChild = t3;
+  const [menuItemIds, setMenuItemIds] = useState(_temp2);
   const navRef = useRef(null);
   const listRef = useRef(null);
   const moreMenuRef = useRef(null);
   const moreMenuBtnRef = useRef(null);
   const containerRef = React.useRef(null);
-  const validChildren = getValidChildren(children);
-  // Responsive props object manages which items are in the list and which items are in the menu.
-  const [responsiveProps, setResponsiveProps] = useState({
-    items: validChildren,
-    menuItems: []
-  });
-
-  // Make sure to have the fresh props data for list items when children are changed (keeping aria-current up-to-date)
-  const listItems = responsiveProps.items.map(item => {
-    var _validChildren$find;
-    return (_validChildren$find = validChildren.find(child => child.key === item.key)) !== null && _validChildren$find !== void 0 ? _validChildren$find : item;
-  });
-
-  // Make sure to have the fresh props data for menu items when children are changed (keeping aria-current up-to-date)
-  const menuItems = responsiveProps.menuItems.map(menuItem => {
-    var _validChildren$find2;
-    return (_validChildren$find2 = validChildren.find(child_0 => child_0.key === menuItem.key)) !== null && _validChildren$find2 !== void 0 ? _validChildren$find2 : menuItem;
-  });
-  const updateListAndMenu = useCallback(props_0 => {
-    setResponsiveProps(props_0);
-  }, []);
-  useResizeObserver(resizeObserverEntries => {
-    var _moreMenuRef$current$, _moreMenuRef$current;
-    const navWidth = resizeObserverEntries[0].contentRect.width;
-    const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
-    const hasActiveMenu = menuItems.length > 0;
-    navWidth !== 0 && overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, updateListAndMenu, hasActiveMenu);
-  }, navRef);
+  let t4;
+  if ($[2] !== childRegistry || $[3] !== menuItemIds.size) {
+    t4 = resizeObserverEntries => {
+      var _moreMenuRef$current$, _moreMenuRef$current;
+      const navWidth = resizeObserverEntries[0].contentRect.width;
+      const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
+      const hasActiveMenu = menuItemIds.size > 0;
+      if (navWidth > 0) {
+        const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu);
+        if (newMenuItemIds) {
+          setMenuItemIds(newMenuItemIds);
+        }
+      }
+    };
+    $[2] = childRegistry;
+    $[3] = menuItemIds.size;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  useResizeObserver(t4, navRef);
+  let t5;
+  if ($[5] !== menuItemIds) {
+    t5 = id_1 => !menuItemIds.has(id_1);
+    $[5] = menuItemIds;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const isVisibleChild = t5;
   const [isWidgetOpen, setIsWidgetOpen] = useState(false);
-  const closeOverlay = React.useCallback(() => {
-    setIsWidgetOpen(false);
-  }, [setIsWidgetOpen]);
-  const focusOnMoreMenuBtn = React.useCallback(() => {
-    var _moreMenuBtnRef$curre;
-    (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
-  }, []);
-  useOnEscapePress(event => {
-    if (isWidgetOpen) {
-      event.preventDefault();
-      closeOverlay();
-      focusOnMoreMenuBtn();
-    }
-  }, [isWidgetOpen]);
-  useOnOutsideClick({
-    onClickOutside: closeOverlay,
-    containerRef,
-    ignoreClickRefs: [moreMenuBtnRef]
-  });
-  useFocusZone({
-    containerRef: listRef,
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusOutBehavior: 'wrap'
-  });
-  return /*#__PURE__*/jsx(ActionBarContext.Provider, {
-    value: {
+  let t6;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => {
+      setIsWidgetOpen(false);
+    };
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  const closeOverlay = t6;
+  let t7;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => {
+      var _moreMenuBtnRef$curre;
+      (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
+    };
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  const focusOnMoreMenuBtn = t7;
+  let t8;
+  let t9;
+  if ($[9] !== isWidgetOpen) {
+    t8 = event => {
+      if (isWidgetOpen) {
+        event.preventDefault();
+        closeOverlay();
+        focusOnMoreMenuBtn();
+      }
+    };
+    t9 = [isWidgetOpen];
+    $[9] = isWidgetOpen;
+    $[10] = t8;
+    $[11] = t9;
+  } else {
+    t8 = $[10];
+    t9 = $[11];
+  }
+  useOnEscapePress(t8, t9);
+  let t10;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      onClickOutside: closeOverlay,
+      containerRef,
+      ignoreClickRefs: [moreMenuBtnRef]
+    };
+    $[12] = t10;
+  } else {
+    t10 = $[12];
+  }
+  useOnOutsideClick(t10);
+  let t11;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      containerRef: listRef,
+      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusOutBehavior: "wrap"
+    };
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+  useFocusZone(t11);
+  let t12;
+  if ($[14] !== isVisibleChild || $[15] !== size) {
+    t12 = {
       size,
-      setChildrenWidth
-    },
-    children: /*#__PURE__*/jsx("div", {
+      registerChild,
+      unregisterChild,
+      isVisibleChild
+    };
+    $[14] = isVisibleChild;
+    $[15] = size;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] !== className) {
+    t13 = clsx(className, styles.Nav);
+    $[17] = className;
+    $[18] = t13;
+  } else {
+    t13 = $[18];
+  }
+  let t14;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      gap: `${ACTIONBAR_ITEM_GAP}px`
+    };
+    $[19] = t14;
+  } else {
+    t14 = $[19];
+  }
+  let t15;
+  if ($[20] !== ariaLabel || $[21] !== childRegistry || $[22] !== menuItemIds) {
+    t15 = menuItemIds.size > 0 && /*#__PURE__*/jsxs(ActionMenu, {
+      children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
+        children: /*#__PURE__*/jsx(IconButton, {
+          variant: "invisible",
+          "aria-label": `More ${ariaLabel} items`,
+          icon: KebabHorizontalIcon
+        })
+      }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+        children: /*#__PURE__*/jsx(ActionList, {
+          children: Array.from(menuItemIds).map(id_2 => {
+            const menuItem = childRegistry.get(id_2);
+            if (!menuItem) {
+              return null;
+            }
+            if (menuItem.type === "divider") {
+              return /*#__PURE__*/jsx(ActionList.Divider, {}, id_2);
+            } else {
+              const {
+                onClick,
+                icon: Icon,
+                label,
+                disabled
+              } = menuItem;
+              return /*#__PURE__*/jsxs(ActionList.Item, {
+                onClick: event_0 => {
+                  closeOverlay();
+                  focusOnMoreMenuBtn();
+                  typeof onClick === "function" && onClick(event_0);
+                },
+                disabled: disabled,
+                children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+                  children: /*#__PURE__*/jsx(Icon, {})
+                }), label]
+              }, label);
+            }
+          })
+        })
+      })]
+    });
+    $[20] = ariaLabel;
+    $[21] = childRegistry;
+    $[22] = menuItemIds;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  let t16;
+  if ($[24] !== children || $[25] !== t15) {
+    t16 = /*#__PURE__*/jsxs("div", {
+      ref: listRef,
+      role: "toolbar",
+      className: styles.List,
+      style: t14,
+      children: [children, t15]
+    });
+    $[24] = children;
+    $[25] = t15;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  let t17;
+  if ($[27] !== flush || $[28] !== t13 || $[29] !== t16) {
+    t17 = /*#__PURE__*/jsx("div", {
       ref: navRef,
-      className: clsx(className, styles.Nav),
+      className: t13,
       "data-flush": flush,
-      children: /*#__PURE__*/jsxs("div", {
-        ref: listRef,
-        role: "toolbar",
-        className: styles.List,
-        style: {
-          gap: `${ACTIONBAR_ITEM_GAP}px`
-        },
-        children: [listItems, menuItems.length > 0 && /*#__PURE__*/jsxs(ActionMenu, {
-          children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
-            children: /*#__PURE__*/jsx(IconButton, {
-              variant: "invisible",
-              "aria-label": `More ${ariaLabel} items`,
-              icon: KebabHorizontalIcon
-            })
-          }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
-            children: /*#__PURE__*/jsx(ActionList, {
-              children: menuItems.map((menuItem_0, index) => {
-                if (menuItem_0.type === ActionList.Divider) {
-                  return /*#__PURE__*/jsx(ActionList.Divider, {}, index);
-                } else {
-                  const {
-                    children: menuItemChildren,
-                    onClick,
-                    icon: Icon,
-                    'aria-label': ariaLabel_0,
-                    disabled
-                  } = menuItem_0.props;
-                  return /*#__PURE__*/jsxs(ActionList.Item, {
-                    // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
-                    onClick: event_0 => {
-                      closeOverlay();
-                      focusOnMoreMenuBtn();
-                      typeof onClick === 'function' && onClick(event_0);
-                    },
-                    disabled: disabled,
-                    children: [Icon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
-                      children: /*#__PURE__*/jsx(Icon, {})
-                    }) : null, ariaLabel_0]
-                  }, menuItemChildren);
-                }
-              })
-            })
-          })]
-        })]
-      })
-    })
-  });
+      children: t16
+    });
+    $[27] = flush;
+    $[28] = t13;
+    $[29] = t16;
+    $[30] = t17;
+  } else {
+    t17 = $[30];
+  }
+  let t18;
+  if ($[31] !== t12 || $[32] !== t17) {
+    t18 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
+      value: t12,
+      children: t17
+    });
+    $[31] = t12;
+    $[32] = t17;
+    $[33] = t18;
+  } else {
+    t18 = $[33];
+  }
+  return t18;
 };
-ActionBar.displayName = "ActionBar";
 const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(20);
+  const $ = c(26);
   let disabled;
   let onClick;
   let props;
@@ -245,58 +356,84 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     onClick = $[2];
     props = $[3];
   }
-  const backupRef = useRef(null);
-  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+  const ref = useRef(null);
+  useRefObjectAsForwardedRef(forwardedRef, ref);
+  const id = useId();
   const {
     size,
-    setChildrenWidth
+    registerChild,
+    unregisterChild,
+    isVisibleChild
   } = React.useContext(ActionBarContext);
+  const widthRef = useRef();
   let t1;
-  if ($[4] !== props || $[5] !== ref || $[6] !== setChildrenWidth) {
+  if ($[4] !== disabled || $[5] !== id || $[6] !== onClick || $[7] !== props || $[8] !== registerChild || $[9] !== unregisterChild) {
     t1 = () => {
-      const text = props["aria-label"] ? props["aria-label"] : "";
-      const domRect = ref.current.getBoundingClientRect();
-      setChildrenWidth({
-        text,
-        width: domRect.width
+      var _ref$current, _props$ariaLabel;
+      const width = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().width;
+      if (width) {
+        widthRef.current = width;
+      }
+      if (!widthRef.current) {
+        return;
+      }
+      registerChild(id, {
+        type: "action",
+        label: (_props$ariaLabel = props["aria-label"]) !== null && _props$ariaLabel !== void 0 ? _props$ariaLabel : "",
+        icon: props.icon,
+        disabled: !!disabled,
+        onClick: onClick,
+        width: widthRef.current
       });
+      return () => unregisterChild(id);
     };
-    $[4] = props;
-    $[5] = ref;
-    $[6] = setChildrenWidth;
-    $[7] = t1;
+    $[4] = disabled;
+    $[5] = id;
+    $[6] = onClick;
+    $[7] = props;
+    $[8] = registerChild;
+    $[9] = unregisterChild;
+    $[10] = t1;
   } else {
-    t1 = $[7];
+    t1 = $[10];
   }
-  let t2;
-  if ($[8] !== ref || $[9] !== setChildrenWidth) {
-    t2 = [ref, setChildrenWidth];
-    $[8] = ref;
-    $[9] = setChildrenWidth;
-    $[10] = t2;
+  const t2 = props["aria-label"];
+  let t3;
+  if ($[11] !== disabled || $[12] !== onClick || $[13] !== props.icon || $[14] !== registerChild || $[15] !== t2 || $[16] !== unregisterChild) {
+    t3 = [registerChild, unregisterChild, t2, props.icon, disabled, onClick];
+    $[11] = disabled;
+    $[12] = onClick;
+    $[13] = props.icon;
+    $[14] = registerChild;
+    $[15] = t2;
+    $[16] = unregisterChild;
+    $[17] = t3;
   } else {
-    t2 = $[10];
+    t3 = $[17];
   }
-  useIsomorphicLayoutEffect(t1, t2);
-  let t3;
-  if ($[11] !== disabled || $[12] !== onClick) {
-    t3 = event => {
+  useIsomorphicLayoutEffect(t1, t3);
+  let t4;
+  if ($[18] !== disabled || $[19] !== onClick) {
+    t4 = event => {
       var _onClick;
       if (disabled) {
         return;
       }
       (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
     };
-    $[11] = disabled;
-    $[12] = onClick;
-    $[13] = t3;
+    $[18] = disabled;
+    $[19] = onClick;
+    $[20] = t4;
   } else {
-    t3 = $[13];
+    t4 = $[20];
   }
-  const clickHandler = t3;
-  let t4;
-  if ($[14] !== clickHandler || $[15] !== disabled || $[16] !== props || $[17] !== ref || $[18] !== size) {
-    t4 = /*#__PURE__*/jsx(IconButton, {
+  const clickHandler = t4;
+  if (!isVisibleChild(id)) {
+    return null;
+  }
+  let t5;
+  if ($[21] !== clickHandler || $[22] !== disabled || $[23] !== props || $[24] !== size) {
+    t5 = /*#__PURE__*/jsx(IconButton, {
       "aria-disabled": disabled,
       ref: ref,
       size: size,
@@ -304,55 +441,82 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
       ...props,
       variant: "invisible"
     });
-    $[14] = clickHandler;
-    $[15] = disabled;
-    $[16] = props;
-    $[17] = ref;
-    $[18] = size;
-    $[19] = t4;
+    $[21] = clickHandler;
+    $[22] = disabled;
+    $[23] = props;
+    $[24] = size;
+    $[25] = t5;
   } else {
-    t4 = $[19];
+    t5 = $[25];
   }
-  return t4;
+  return t5;
 });
 const VerticalDivider = () => {
-  const $ = c(4);
+  const $ = c(8);
   const ref = useRef(null);
+  const id = useId();
   const {
-    setChildrenWidth
+    registerChild,
+    unregisterChild,
+    isVisibleChild
   } = React.useContext(ActionBarContext);
+  const widthRef = useRef();
   let t0;
-  let t1;
-  if ($[0] !== setChildrenWidth) {
+  if ($[0] !== id || $[1] !== registerChild || $[2] !== unregisterChild) {
     t0 = () => {
-      const domRect = ref.current.getBoundingClientRect();
-      setChildrenWidth({
-        text: "divider",
-        width: domRect.width
+      var _ref$current2;
+      const width = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect().width;
+      if (width) {
+        widthRef.current = width;
+      }
+      if (!widthRef.current) {
+        return;
+      }
+      registerChild(id, {
+        type: "divider",
+        width: widthRef.current
       });
+      return () => unregisterChild(id);
     };
-    t1 = [ref, setChildrenWidth];
-    $[0] = setChildrenWidth;
-    $[1] = t0;
-    $[2] = t1;
+    $[0] = id;
+    $[1] = registerChild;
+    $[2] = unregisterChild;
+    $[3] = t0;
   } else {
-    t0 = $[1];
-    t1 = $[2];
+    t0 = $[3];
+  }
+  let t1;
+  if ($[4] !== registerChild || $[5] !== unregisterChild) {
+    t1 = [registerChild, unregisterChild];
+    $[4] = registerChild;
+    $[5] = unregisterChild;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
   }
   useIsomorphicLayoutEffect(t0, t1);
+  if (!isVisibleChild(id)) {
+    return null;
+  }
   let t2;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = /*#__PURE__*/jsx("div", {
       ref: ref,
       "data-component": "ActionBar.VerticalDivider",
       "aria-hidden": "true",
       className: styles.Divider
     });
-    $[3] = t2;
+    $[7] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[7];
   }
   return t2;
 };
+function _temp() {
+  return new Map();
+}
+function _temp2() {
+  return new Set();
+}
 
 export { ActionBar, ActionBarIconButton, VerticalDivider };