@primer/react 38.0.0-rc.9 → 38.0.0-rc.95d10bdfe

package/dist/ActionBar/ActionBar.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import React, { forwardRef, useRef, useState, useId } from 'react';
+import React, { forwardRef, useRef, useState, useCallback, useId } from 'react';
 import { KebabHorizontalIcon } from '@primer/octicons-react';
 import { ActionList } from '../ActionList/index.js';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
@@ -10,7 +10,7 @@ import { IconButton } from '../Button/IconButton.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import styles from './ActionBar.module.css.js';
 import { clsx } from 'clsx';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { FocusKeys } from '@primer/behaviors';
 import { ActionMenu } from '../ActionMenu/ActionMenu.js';
@@ -26,7 +26,8 @@ const ActionBarContext = /*#__PURE__*/React.createContext({
   size: 'medium',
   registerChild: () => {},
   unregisterChild: () => {},
-  isVisibleChild: () => true
+  isVisibleChild: () => true,
+  groupId: undefined
 });
 
 /*
@@ -50,7 +51,7 @@ const calculatePossibleItems = (registryEntries, navWidth, gap, moreMenuWidth =
   return breakpoint;
 };
 const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap) => {
-  const registryEntries = Array.from(childRegistry).filter(entry => entry[1] !== null);
+  const registryEntries = Array.from(childRegistry).filter(entry => entry[1] !== null && (entry[1].type !== 'action' || entry[1].groupId === undefined));
   if (registryEntries.length === 0) return new Set();
   const numberOfItemsPossible = calculatePossibleItems(registryEntries, navWidth, gap);
   const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(registryEntries, navWidth, gap, moreMenuWidth || MORE_BTN_WIDTH);
@@ -85,285 +86,178 @@ const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap
   }
 };
 const ActionBar = props => {
-  const $ = c(40);
   const {
-    size: t0,
+    size = 'medium',
     children,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    flush: t1,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    flush = false,
     className,
-    gap: t2
+    gap = 'condensed'
   } = props;
-  const size = t0 === undefined ? "medium" : t0;
-  const flush = t1 === undefined ? false : t1;
-  const gap = t2 === undefined ? "condensed" : t2;
+
+  // We derive the numeric gap from computed style so layout math stays in sync with CSS
   const listRef = useRef(null);
   const [computedGap, setComputedGap] = useState(ACTIONBAR_ITEM_GAP);
-  const [childRegistry, setChildRegistry] = useState(_temp);
-  let t3;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = (id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps));
-    $[0] = t3;
-  } else {
-    t3 = $[0];
-  }
-  const registerChild = t3;
-  let t4;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null));
-    $[1] = t4;
-  } else {
-    t4 = $[1];
-  }
-  const unregisterChild = t4;
-  const [menuItemIds, setMenuItemIds] = useState(_temp2);
+  const [childRegistry, setChildRegistry] = useState(() => new Map());
+  const registerChild = useCallback((id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps)), []);
+  const unregisterChild = useCallback(id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null)), []);
+  const [menuItemIds, setMenuItemIds] = useState(() => new Set());
   const navRef = useRef(null);
-  let t5;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = () => {
-      if (!listRef.current) {
-        return;
-      }
-      const g = window.getComputedStyle(listRef.current).gap;
-      const parsed = parseFloat(g);
-      if (!Number.isNaN(parsed)) {
-        setComputedGap(parsed);
-      }
-    };
-    $[2] = t5;
-  } else {
-    t5 = $[2];
-  }
-  let t6;
-  if ($[3] !== gap) {
-    t6 = [gap];
-    $[3] = gap;
-    $[4] = t6;
-  } else {
-    t6 = $[4];
-  }
-  useIsomorphicLayoutEffect(t5, t6);
+  // measure gap after first render & whenever gap scale changes
+  useIsomorphicLayoutEffect(() => {
+    if (!listRef.current) return;
+    const g = window.getComputedStyle(listRef.current).gap;
+    const parsed = parseFloat(g);
+    if (!Number.isNaN(parsed)) setComputedGap(parsed);
+  }, [gap]);
   const moreMenuRef = useRef(null);
   const moreMenuBtnRef = useRef(null);
   const containerRef = React.useRef(null);
-  let t7;
-  if ($[5] !== childRegistry || $[6] !== computedGap || $[7] !== menuItemIds.size) {
-    t7 = 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, computedGap);
-        if (newMenuItemIds) {
-          setMenuItemIds(newMenuItemIds);
-        }
-      }
-    };
-    $[5] = childRegistry;
-    $[6] = computedGap;
-    $[7] = menuItemIds.size;
-    $[8] = t7;
-  } else {
-    t7 = $[8];
-  }
-  useResizeObserver(t7, navRef);
-  let t8;
-  if ($[9] !== menuItemIds) {
-    t8 = id_1 => !menuItemIds.has(id_1);
-    $[9] = menuItemIds;
-    $[10] = t8;
-  } else {
-    t8 = $[10];
-  }
-  const isVisibleChild = t8;
+  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 = menuItemIds.size > 0;
+    if (navWidth > 0) {
+      const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap);
+      if (newMenuItemIds) setMenuItemIds(newMenuItemIds);
+    }
+  }, navRef);
+  const isVisibleChild = useCallback(id_1 => {
+    return !menuItemIds.has(id_1);
+  }, [menuItemIds]);
   const [isWidgetOpen, setIsWidgetOpen] = useState(false);
-  let t9;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = () => {
-      setIsWidgetOpen(false);
-    };
-    $[11] = t9;
-  } else {
-    t9 = $[11];
-  }
-  const closeOverlay = t9;
-  let t10;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = () => {
-      var _moreMenuBtnRef$curre;
-      (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
-    };
-    $[12] = t10;
-  } else {
-    t10 = $[12];
-  }
-  const focusOnMoreMenuBtn = t10;
-  let t11;
-  let t12;
-  if ($[13] !== isWidgetOpen) {
-    t11 = event => {
-      if (isWidgetOpen) {
-        event.preventDefault();
-        closeOverlay();
-        focusOnMoreMenuBtn();
+  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'
+  });
+  const groupedItems = React.useMemo(() => {
+    const groupedItemsMap = new Map();
+    for (const [key, childProps_0] of childRegistry) {
+      if ((childProps_0 === null || childProps_0 === void 0 ? void 0 : childProps_0.type) === 'action' && childProps_0.groupId) {
+        const existingGroup = groupedItemsMap.get(childProps_0.groupId) || [];
+        existingGroup.push([key, childProps_0]);
+        groupedItemsMap.set(childProps_0.groupId, existingGroup);
       }
-    };
-    t12 = [isWidgetOpen];
-    $[13] = isWidgetOpen;
-    $[14] = t11;
-    $[15] = t12;
-  } else {
-    t11 = $[14];
-    t12 = $[15];
-  }
-  useOnEscapePress(t11, t12);
-  let t13;
-  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = {
-      onClickOutside: closeOverlay,
-      containerRef,
-      ignoreClickRefs: [moreMenuBtnRef]
-    };
-    $[16] = t13;
-  } else {
-    t13 = $[16];
-  }
-  useOnOutsideClick(t13);
-  let t14;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = {
-      containerRef: listRef,
-      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-      focusOutBehavior: "wrap"
-    };
-    $[17] = t14;
-  } else {
-    t14 = $[17];
-  }
-  useFocusZone(t14);
-  let t15;
-  if ($[18] !== isVisibleChild || $[19] !== size) {
-    t15 = {
+    }
+    return groupedItemsMap;
+  }, [childRegistry]);
+  return /*#__PURE__*/jsx(ActionBarContext.Provider, {
+    value: {
       size,
       registerChild,
       unregisterChild,
       isVisibleChild
-    };
-    $[18] = isVisibleChild;
-    $[19] = size;
-    $[20] = t15;
-  } else {
-    t15 = $[20];
-  }
-  let t16;
-  if ($[21] !== className) {
-    t16 = clsx(className, styles.Nav);
-    $[21] = className;
-    $[22] = t16;
-  } else {
-    t16 = $[22];
-  }
-  let t17;
-  if ($[23] !== ariaLabel || $[24] !== childRegistry || $[25] !== menuItemIds) {
-    t17 = 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);
-            }
-          })
-        })
-      })]
-    });
-    $[23] = ariaLabel;
-    $[24] = childRegistry;
-    $[25] = menuItemIds;
-    $[26] = t17;
-  } else {
-    t17 = $[26];
-  }
-  let t18;
-  if ($[27] !== ariaLabel || $[28] !== ariaLabelledBy || $[29] !== children || $[30] !== gap || $[31] !== t17) {
-    t18 = /*#__PURE__*/jsxs("div", {
-      ref: listRef,
-      role: "toolbar",
-      className: styles.List,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "data-gap": gap,
-      children: [children, t17]
-    });
-    $[27] = ariaLabel;
-    $[28] = ariaLabelledBy;
-    $[29] = children;
-    $[30] = gap;
-    $[31] = t17;
-    $[32] = t18;
-  } else {
-    t18 = $[32];
-  }
-  let t19;
-  if ($[33] !== flush || $[34] !== t16 || $[35] !== t18) {
-    t19 = /*#__PURE__*/jsx("div", {
+    },
+    children: /*#__PURE__*/jsx("div", {
       ref: navRef,
-      className: t16,
+      className: clsx(className, styles.Nav),
       "data-flush": flush,
-      children: t18
-    });
-    $[33] = flush;
-    $[34] = t16;
-    $[35] = t18;
-    $[36] = t19;
-  } else {
-    t19 = $[36];
-  }
-  let t20;
-  if ($[37] !== t15 || $[38] !== t19) {
-    t20 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
-      value: t15,
-      children: t19
-    });
-    $[37] = t15;
-    $[38] = t19;
-    $[39] = t20;
-  } else {
-    t20 = $[39];
-  }
-  return t20;
+      children: /*#__PURE__*/jsxs("div", {
+        ref: listRef,
+        role: "toolbar",
+        className: styles.List,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "data-gap": gap,
+        children: [children, 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 if (menuItem.type === 'action') {
+                  const {
+                    onClick,
+                    icon: Icon,
+                    label,
+                    disabled
+                  } = menuItem;
+                  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: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+                      children: /*#__PURE__*/jsx(Icon, {})
+                    }), label]
+                  }, label);
+                }
+
+                // Use the memoized map instead of filtering each time
+                const groupedMenuItems = groupedItems.get(id_2) || [];
+
+                // If we ever add additional types, this condition will be necessary
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (menuItem.type === 'group') {
+                  return /*#__PURE__*/jsx(React.Fragment, {
+                    children: groupedMenuItems.map(([key_0, childProps_1]) => {
+                      if (childProps_1.type === 'action') {
+                        const {
+                          onClick: onClick_0,
+                          icon: Icon_0,
+                          label: label_0,
+                          disabled: disabled_0
+                        } = childProps_1;
+                        return /*#__PURE__*/jsxs(ActionList.Item, {
+                          onSelect: event_1 => {
+                            closeOverlay();
+                            focusOnMoreMenuBtn();
+                            typeof onClick_0 === 'function' && onClick_0(event_1);
+                          },
+                          disabled: disabled_0,
+                          children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+                            children: /*#__PURE__*/jsx(Icon_0, {})
+                          }), label_0]
+                        }, key_0);
+                      }
+                      return null;
+                    })
+                  }, id_2);
+                }
+              })
+            })
+          })]
+        })]
+      })
+    })
+  });
 };
+ActionBar.displayName = "ActionBar";
 const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(26);
+  const $ = c(28);
   let disabled;
   let onClick;
   let props;
@@ -391,9 +285,12 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     unregisterChild,
     isVisibleChild
   } = React.useContext(ActionBarContext);
+  const {
+    groupId
+  } = React.useContext(ActionBarGroupContext);
   const widthRef = useRef();
   let t1;
-  if ($[4] !== disabled || $[5] !== id || $[6] !== onClick || $[7] !== props || $[8] !== registerChild || $[9] !== unregisterChild) {
+  if ($[4] !== disabled || $[5] !== groupId || $[6] !== id || $[7] !== onClick || $[8] !== props || $[9] !== registerChild || $[10] !== unregisterChild) {
     t1 = () => {
       var _ref$current, _props$ariaLabel;
       const width = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().width;
@@ -409,37 +306,41 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
         icon: props.icon,
         disabled: !!disabled,
         onClick: onClick,
-        width: widthRef.current
+        width: widthRef.current,
+        groupId: groupId !== null && groupId !== void 0 ? groupId : undefined
       });
-      return () => unregisterChild(id);
+      return () => {
+        unregisterChild(id);
+      };
     };
     $[4] = disabled;
-    $[5] = id;
-    $[6] = onClick;
-    $[7] = props;
-    $[8] = registerChild;
-    $[9] = unregisterChild;
-    $[10] = t1;
+    $[5] = groupId;
+    $[6] = id;
+    $[7] = onClick;
+    $[8] = props;
+    $[9] = registerChild;
+    $[10] = unregisterChild;
+    $[11] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[11];
   }
   const t2 = props["aria-label"];
   let t3;
-  if ($[11] !== disabled || $[12] !== onClick || $[13] !== props.icon || $[14] !== registerChild || $[15] !== t2 || $[16] !== unregisterChild) {
+  if ($[12] !== disabled || $[13] !== onClick || $[14] !== props.icon || $[15] !== registerChild || $[16] !== t2 || $[17] !== unregisterChild) {
     t3 = [registerChild, unregisterChild, t2, props.icon, disabled, onClick];
-    $[11] = disabled;
-    $[12] = onClick;
-    $[13] = props.icon;
-    $[14] = registerChild;
-    $[15] = t2;
-    $[16] = unregisterChild;
-    $[17] = t3;
+    $[12] = disabled;
+    $[13] = onClick;
+    $[14] = props.icon;
+    $[15] = registerChild;
+    $[16] = t2;
+    $[17] = unregisterChild;
+    $[18] = t3;
   } else {
-    t3 = $[17];
+    t3 = $[18];
   }
   useIsomorphicLayoutEffect(t1, t3);
   let t4;
-  if ($[18] !== disabled || $[19] !== onClick) {
+  if ($[19] !== disabled || $[20] !== onClick) {
     t4 = event => {
       var _onClick;
       if (disabled) {
@@ -447,33 +348,125 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
       }
       (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
     };
-    $[18] = disabled;
-    $[19] = onClick;
-    $[20] = t4;
+    $[19] = disabled;
+    $[20] = onClick;
+    $[21] = t4;
   } else {
-    t4 = $[20];
+    t4 = $[21];
   }
   const clickHandler = t4;
-  if (!isVisibleChild(id)) {
+  if (!isVisibleChild(id) || groupId && !isVisibleChild(groupId)) {
     return null;
   }
   let t5;
-  if ($[21] !== clickHandler || $[22] !== disabled || $[23] !== props || $[24] !== size) {
+  if ($[22] !== clickHandler || $[23] !== disabled || $[24] !== id || $[25] !== props || $[26] !== size) {
     t5 = /*#__PURE__*/jsx(IconButton, {
       "aria-disabled": disabled,
       ref: ref,
       size: size,
       onClick: clickHandler,
       ...props,
-      variant: "invisible"
+      variant: "invisible",
+      "data-testid": id
     });
-    $[21] = clickHandler;
-    $[22] = disabled;
-    $[23] = props;
-    $[24] = size;
-    $[25] = t5;
+    $[22] = clickHandler;
+    $[23] = disabled;
+    $[24] = id;
+    $[25] = props;
+    $[26] = size;
+    $[27] = t5;
   } else {
-    t5 = $[25];
+    t5 = $[27];
+  }
+  return t5;
+});
+const ActionBarGroupContext = /*#__PURE__*/React.createContext({
+  groupId: null
+});
+const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
+  const $ = c(16);
+  const {
+    children
+  } = t0;
+  const backupRef = useRef(null);
+  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+  const id = useId();
+  const {
+    registerChild,
+    unregisterChild
+  } = React.useContext(ActionBarContext);
+  const widthRef = useRef();
+  let t1;
+  if ($[0] !== id || $[1] !== ref || $[2] !== registerChild || $[3] !== unregisterChild) {
+    t1 = () => {
+      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: "group",
+        width: widthRef.current
+      });
+      return () => {
+        unregisterChild(id);
+      };
+    };
+    $[0] = id;
+    $[1] = ref;
+    $[2] = registerChild;
+    $[3] = unregisterChild;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== registerChild || $[6] !== unregisterChild) {
+    t2 = [registerChild, unregisterChild];
+    $[5] = registerChild;
+    $[6] = unregisterChild;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  useIsomorphicLayoutEffect(t1, t2);
+  let t3;
+  if ($[8] !== id) {
+    t3 = {
+      groupId: id
+    };
+    $[8] = id;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== children || $[11] !== ref) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: styles.Group,
+      ref: ref,
+      children: children
+    });
+    $[10] = children;
+    $[11] = ref;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== t3 || $[14] !== t4) {
+    t5 = /*#__PURE__*/jsx(ActionBarGroupContext.Provider, {
+      value: t3,
+      children: t4
+    });
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
   }
   return t5;
 });
@@ -490,8 +483,8 @@ const VerticalDivider = () => {
   let t0;
   if ($[0] !== id || $[1] !== registerChild || $[2] !== unregisterChild) {
     t0 = () => {
-      var _ref$current2;
-      const width = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect().width;
+      var _ref$current3;
+      const width = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.getBoundingClientRect().width;
       if (width) {
         widthRef.current = width;
       }
@@ -538,11 +531,5 @@ const VerticalDivider = () => {
   }
   return t2;
 };
-function _temp() {
-  return new Map();
-}
-function _temp2() {
-  return new Set();
-}
 
-export { ActionBar, ActionBarIconButton, VerticalDivider };
+export { ActionBar, ActionBarGroup, ActionBarIconButton, VerticalDivider };