@primer/react
Version:
An implementation of GitHub's Primer Design System using React
912 lines (904 loc) • 26.3 kB
JavaScript
import { c } from 'react-compiler-runtime';
import React, { forwardRef, useRef, useState, useId } from 'react';
import { KebabHorizontalIcon } from '@primer/octicons-react';
import { ActionList } from '../ActionList/index.js';
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
import { useResizeObserver } from '../hooks/useResizeObserver.js';
import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
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 { 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',
registerChild: () => {},
unregisterChild: () => {},
isVisibleChild: () => true,
groupId: undefined
});
/*
small (28px), medium (32px), large (40px)
*/
const MORE_BTN_WIDTH = 32;
const calculatePossibleItems = (registryEntries, navWidth, gap, moreMenuWidth = 0) => {
const widthToFit = navWidth - moreMenuWidth;
let breakpoint = registryEntries.length; // assume all items will fit
let sumsOfChildWidth = 0;
for (const [index, [, child]] of registryEntries.entries()) {
sumsOfChildWidth += index > 0 ? child.width + gap : child.width;
if (sumsOfChildWidth > widthToFit) {
breakpoint = index;
break;
} else {
continue;
}
}
return breakpoint;
};
const renderMenuItem = (item, index) => {
if (item.type === 'divider') {
return /*#__PURE__*/jsx(ActionList.Divider, {}, index);
}
const {
label,
onClick,
disabled,
trailingVisual: TrailingIcon,
leadingVisual: LeadingIcon,
items,
variant
} = item;
if (items && items.length > 0) {
return /*#__PURE__*/jsxs(ActionMenu, {
children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
children: /*#__PURE__*/jsxs(ActionList.Item, {
disabled: disabled,
variant: variant,
children: [LeadingIcon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
children: /*#__PURE__*/jsx(LeadingIcon, {})
}) : null, label, TrailingIcon ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
children: typeof TrailingIcon === 'string' ? /*#__PURE__*/jsx("span", {
children: TrailingIcon
}) : /*#__PURE__*/jsx(TrailingIcon, {})
}) : null]
})
}), /*#__PURE__*/jsx(ActionMenu.Overlay, {
children: /*#__PURE__*/jsx(ActionList, {
children: items.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))
})
})]
}, label);
}
return /*#__PURE__*/jsxs(ActionList.Item, {
onSelect: onClick,
disabled: disabled,
variant: variant,
children: [LeadingIcon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
children: /*#__PURE__*/jsx(LeadingIcon, {})
}) : null, label, TrailingIcon ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
children: typeof TrailingIcon === 'string' ? /*#__PURE__*/jsx("span", {
children: TrailingIcon
}) : /*#__PURE__*/jsx(TrailingIcon, {})
}) : null]
}, label);
};
renderMenuItem.displayName = "renderMenuItem";
const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap) => {
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);
const menuItems = new Set();
// First, we check if we can fit all the items with their icons
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 = registryEntries.length - numberOfItemsPossibleWithMoreMenu;
const numberOfListItems = numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu;
for (const [index, [id, child]] of registryEntries.entries()) {
if (index < numberOfListItems) {
continue;
//if the last item is a divider
} else if (child.type === 'divider') {
if (index === numberOfListItems - 1 || index === numberOfListItems) {
continue;
} else {
menuItems.add(id);
}
} else {
menuItems.add(id);
}
}
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 */
return new Set();
}
};
const ActionBar = props => {
const $ = c(43);
const {
size: t0,
children,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
flush: t1,
className,
gap: t2
} = props;
const size = t0 === undefined ? "medium" : t0;
const flush = t1 === undefined ? false : t1;
const gap = t2 === undefined ? "condensed" : t2;
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 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);
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;
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();
}
};
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 groupedItemsMap;
if ($[18] !== childRegistry) {
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);
}
}
$[18] = childRegistry;
$[19] = groupedItemsMap;
} else {
groupedItemsMap = $[19];
}
const groupedItems = groupedItemsMap;
let t15;
if ($[20] !== isVisibleChild || $[21] !== size) {
t15 = {
size,
registerChild,
unregisterChild,
isVisibleChild
};
$[20] = isVisibleChild;
$[21] = size;
$[22] = t15;
} else {
t15 = $[22];
}
let t16;
if ($[23] !== className) {
t16 = clsx(className, styles.Nav);
$[23] = className;
$[24] = t16;
} else {
t16 = $[24];
}
let t17;
if ($[25] !== ariaLabel || $[26] !== childRegistry || $[27] !== groupedItems || $[28] !== 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 {
if (menuItem.type === "action") {
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);
}
}
if (menuItem.type === "menu") {
const menuItems = menuItem.items;
const {
icon: Icon_0,
label: label_0
} = menuItem;
return /*#__PURE__*/jsxs(ActionMenu, {
children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
children: /*#__PURE__*/jsxs(ActionList.Item, {
children: [Icon_0 !== "none" ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
children: /*#__PURE__*/jsx(Icon_0, {})
}) : null, label_0]
})
}), /*#__PURE__*/jsx(ActionMenu.Overlay, {
children: /*#__PURE__*/jsx(ActionList, {
children: menuItems.map(_temp3)
})
})]
}, id_2);
}
const groupedMenuItems = groupedItems.get(id_2) || [];
if (menuItem.type === "group") {
return /*#__PURE__*/jsx(React.Fragment, {
children: groupedMenuItems.map(t18 => {
const [key_0, childProps_1] = t18;
if (childProps_1.type === "action") {
const {
onClick: onClick_0,
icon: Icon_1,
label: label_1,
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_1, {})
}), label_1]
}, key_0);
}
return null;
})
}, id_2);
}
})
})
})]
});
$[25] = ariaLabel;
$[26] = childRegistry;
$[27] = groupedItems;
$[28] = menuItemIds;
$[29] = t17;
} else {
t17 = $[29];
}
let t18;
if ($[30] !== ariaLabel || $[31] !== ariaLabelledBy || $[32] !== children || $[33] !== gap || $[34] !== t17) {
t18 = /*#__PURE__*/jsxs("div", {
ref: listRef,
role: "toolbar",
className: styles.List,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"data-gap": gap,
children: [children, t17]
});
$[30] = ariaLabel;
$[31] = ariaLabelledBy;
$[32] = children;
$[33] = gap;
$[34] = t17;
$[35] = t18;
} else {
t18 = $[35];
}
let t19;
if ($[36] !== flush || $[37] !== t16 || $[38] !== t18) {
t19 = /*#__PURE__*/jsx("div", {
ref: navRef,
className: t16,
"data-flush": flush,
children: t18
});
$[36] = flush;
$[37] = t16;
$[38] = t18;
$[39] = t19;
} else {
t19 = $[39];
}
let t20;
if ($[40] !== t15 || $[41] !== t19) {
t20 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
value: t15,
children: t19
});
$[40] = t15;
$[41] = t19;
$[42] = t20;
} else {
t20 = $[42];
}
return t20;
};
const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
const $ = c(27);
let disabled;
let onClick;
let props;
if ($[0] !== t0) {
({
disabled,
onClick,
...props
} = t0);
$[0] = t0;
$[1] = disabled;
$[2] = onClick;
$[3] = props;
} else {
disabled = $[1];
onClick = $[2];
props = $[3];
}
const ref = useRef(null);
useRefObjectAsForwardedRef(forwardedRef, ref);
const id = useId();
const {
size,
registerChild,
unregisterChild,
isVisibleChild
} = React.useContext(ActionBarContext);
const {
groupId
} = React.useContext(ActionBarGroupContext);
const widthRef = useRef();
let t1;
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;
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,
groupId: groupId !== null && groupId !== void 0 ? groupId : undefined
});
return () => {
unregisterChild(id);
};
};
$[4] = disabled;
$[5] = groupId;
$[6] = id;
$[7] = onClick;
$[8] = props;
$[9] = registerChild;
$[10] = unregisterChild;
$[11] = t1;
} else {
t1 = $[11];
}
const t2 = props["aria-label"];
let t3;
if ($[12] !== disabled || $[13] !== onClick || $[14] !== props.icon || $[15] !== registerChild || $[16] !== t2 || $[17] !== unregisterChild) {
t3 = [registerChild, unregisterChild, t2, props.icon, disabled, onClick];
$[12] = disabled;
$[13] = onClick;
$[14] = props.icon;
$[15] = registerChild;
$[16] = t2;
$[17] = unregisterChild;
$[18] = t3;
} else {
t3 = $[18];
}
useIsomorphicLayoutEffect(t1, t3);
let t4;
if ($[19] !== disabled || $[20] !== onClick) {
t4 = event => {
var _onClick;
if (disabled) {
return;
}
(_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
};
$[19] = disabled;
$[20] = onClick;
$[21] = t4;
} else {
t4 = $[21];
}
const clickHandler = t4;
if (!isVisibleChild(id) || groupId && !isVisibleChild(groupId)) {
return null;
}
let t5;
if ($[22] !== clickHandler || $[23] !== disabled || $[24] !== props || $[25] !== size) {
t5 = /*#__PURE__*/jsx(IconButton, {
"aria-disabled": disabled,
ref: ref,
size: size,
onClick: clickHandler,
...props,
variant: "invisible"
});
$[22] = clickHandler;
$[23] = disabled;
$[24] = props;
$[25] = size;
$[26] = t5;
} else {
t5 = $[26];
}
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;
});
const ActionBarMenu = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
const $ = c(35);
let ariaLabel;
let icon;
let items;
let overflowIcon;
let props;
if ($[0] !== t0) {
({
"aria-label": ariaLabel,
icon,
overflowIcon,
items,
...props
} = t0);
$[0] = t0;
$[1] = ariaLabel;
$[2] = icon;
$[3] = items;
$[4] = overflowIcon;
$[5] = props;
} else {
ariaLabel = $[1];
icon = $[2];
items = $[3];
overflowIcon = $[4];
props = $[5];
}
const backupRef = useRef(null);
const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
const id = useId();
const {
registerChild,
unregisterChild,
isVisibleChild
} = React.useContext(ActionBarContext);
const [menuOpen, setMenuOpen] = useState(false);
const widthRef = useRef();
let t1;
if ($[6] !== ariaLabel || $[7] !== icon || $[8] !== id || $[9] !== items || $[10] !== overflowIcon || $[11] !== ref || $[12] !== registerChild || $[13] !== unregisterChild) {
t1 = () => {
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;
}
if (!widthRef.current) {
return;
}
registerChild(id, {
type: "menu",
width: widthRef.current,
label: ariaLabel,
icon: overflowIcon ? overflowIcon : icon,
items
});
return () => {
unregisterChild(id);
};
};
$[6] = ariaLabel;
$[7] = icon;
$[8] = id;
$[9] = items;
$[10] = overflowIcon;
$[11] = ref;
$[12] = registerChild;
$[13] = unregisterChild;
$[14] = t1;
} else {
t1 = $[14];
}
let t2;
if ($[15] !== ariaLabel || $[16] !== icon || $[17] !== items || $[18] !== overflowIcon || $[19] !== registerChild || $[20] !== unregisterChild) {
t2 = [registerChild, unregisterChild, ariaLabel, overflowIcon, icon, items];
$[15] = ariaLabel;
$[16] = icon;
$[17] = items;
$[18] = overflowIcon;
$[19] = registerChild;
$[20] = unregisterChild;
$[21] = t2;
} else {
t2 = $[21];
}
useIsomorphicLayoutEffect(t1, t2);
if (!isVisibleChild(id)) {
return null;
}
let t3;
if ($[22] !== ariaLabel || $[23] !== icon || $[24] !== props) {
t3 = /*#__PURE__*/jsx(ActionMenu.Anchor, {
children: /*#__PURE__*/jsx(IconButton, {
variant: "invisible",
"aria-label": ariaLabel,
icon: icon,
...props
})
});
$[22] = ariaLabel;
$[23] = icon;
$[24] = props;
$[25] = t3;
} else {
t3 = $[25];
}
let t4;
if ($[26] !== items) {
t4 = items.map(_temp4);
$[26] = items;
$[27] = t4;
} else {
t4 = $[27];
}
let t5;
if ($[28] !== t4) {
t5 = /*#__PURE__*/jsx(ActionMenu.Overlay, {
children: /*#__PURE__*/jsx(ActionList, {
children: t4
})
});
$[28] = t4;
$[29] = t5;
} else {
t5 = $[29];
}
let t6;
if ($[30] !== menuOpen || $[31] !== ref || $[32] !== t3 || $[33] !== t5) {
t6 = /*#__PURE__*/jsxs(ActionMenu, {
anchorRef: ref,
open: menuOpen,
onOpenChange: setMenuOpen,
children: [t3, t5]
});
$[30] = menuOpen;
$[31] = ref;
$[32] = t3;
$[33] = t5;
$[34] = t6;
} else {
t6 = $[34];
}
return t6;
});
const VerticalDivider = () => {
const $ = c(8);
const ref = useRef(null);
const id = useId();
const {
registerChild,
unregisterChild,
isVisibleChild
} = React.useContext(ActionBarContext);
const widthRef = useRef();
let t0;
if ($[0] !== id || $[1] !== registerChild || $[2] !== unregisterChild) {
t0 = () => {
var _ref$current4;
const width = (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.getBoundingClientRect().width;
if (width) {
widthRef.current = width;
}
if (!widthRef.current) {
return;
}
registerChild(id, {
type: "divider",
width: widthRef.current
});
return () => unregisterChild(id);
};
$[0] = id;
$[1] = registerChild;
$[2] = unregisterChild;
$[3] = t0;
} else {
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 ($[7] === Symbol.for("react.memo_cache_sentinel")) {
t2 = /*#__PURE__*/jsx("div", {
ref: ref,
"data-component": "ActionBar.VerticalDivider",
"aria-hidden": "true",
className: styles.Divider
});
$[7] = t2;
} else {
t2 = $[7];
}
return t2;
};
function _temp() {
return new Map();
}
function _temp2() {
return new Set();
}
function _temp3(item, index) {
return renderMenuItem(item, index);
}
function _temp4(item, index) {
return renderMenuItem(item, index);
}
export { ActionBar, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };