@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.09f015db1

package/dist/ActionBar/ActionBar-8ed12fe7.css

@@ -0,0 +1,2 @@
+.prc-ActionBar-List-Z4LzW{align-items:center;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));list-style:none;margin-bottom:-1px;min-width:0;position:relative;white-space:nowrap}.prc-ActionBar-List-Z4LzW:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-Z4LzW:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-Nav-hc-9G{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-hc-9G:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-CcBO8:before{background:var(--borderColor-muted,var(--color-border-muted));content:"";display:block;height:var(--base-size-20,1.25rem);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-hBx7J{display:flex;gap:inherit}
+/*# sourceMappingURL=ActionBar-8ed12fe7.css.map */

package/dist/ActionBar/ActionBar-8ed12fe7.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ActionBar/ActionBar.module.css"],"names":[],"mappings":"AAAA,0BAUE,kBAAmB,CARnB,YAAa,CASb,yDAAqD,CAFrD,eAAgB,CAFhB,kBAAmB,CAJnB,WAAY,CAFZ,iBAAkB,CAOlB,kBAaF,CAPE,iDACE,iBACF,CAEA,sDACE,iDACF,CAGF,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6DAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAD3B,sCAKF,CAGF,2BACE,YAAa,CACb,WACF","file":"ActionBar-8ed12fe7.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n"]}

package/dist/ActionBar/ActionBar.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { IconButtonProps } from '../Button';
+type Size = 'small' | 'medium' | 'large';
+type A11yProps = {
+    /** When provided, a label is added to the action bar */
+    'aria-label': React.AriaAttributes['aria-label'];
+    'aria-labelledby'?: undefined;
+} | {
+    'aria-label'?: undefined;
+    /**
+     * When provided, uses the element with that ID as the accessible name for the ActionBar
+     */
+    'aria-labelledby': React.AriaAttributes['aria-labelledby'];
+};
+type GapScale = 'none' | 'condensed';
+export type ActionBarProps = {
+    /**
+     * Size of the action bar
+     * @default 'medium'
+     * */
+    size?: Size;
+    /** Buttons in the action bar */
+    children: React.ReactNode;
+    /**
+     * Allows ActionBar to be flush with the container
+     * @default false
+     * */
+    flush?: boolean;
+    /** Custom className */
+    className?: string;
+    /**
+     * Horizontal gap scale between items (mirrors Stack gap scale)
+     * @default 'condensed'
+     */
+    gap?: GapScale;
+} & A11yProps;
+export type ActionBarIconButtonProps = {
+    disabled?: boolean;
+} & IconButtonProps;
+export declare const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>>;
+export declare const ActionBarIconButton: React.ForwardRefExoticComponent<ActionBarIconButtonProps & React.RefAttributes<unknown>>;
+export declare const ActionBarGroup: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<unknown>>;
+export declare const VerticalDivider: () => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=ActionBar.d.ts.map

package/dist/ActionBar/ActionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAS7E,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AA8C9C,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAExC,KAAK,SAAS,GACV;IACE,wDAAwD;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IAChD,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,GACD;IACE,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC3D,CAAA;AAEL,KAAK,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;AAEpC,MAAM,MAAM,cAAc,GAAG;IAC3B;;;SAGK;IACL,IAAI,CAAC,EAAE,IAAI,CAAA;IAEX,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;;SAGK;IACL,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,SAAS,CAAA;AAEb,MAAM,MAAM,wBAAwB,GAAG;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAA;AA+E7E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAyLvE,CAAA;AAED,eAAO,MAAM,mBAAmB,0FAsD/B,CAAA;AAMD,eAAO,MAAM,cAAc;;iCA6BzB,CAAA;AAEF,eAAO,MAAM,eAAe,gCAoB3B,CAAA"}

package/dist/ActionBar/ActionBar.js

@@ -0,0 +1,535 @@
+import { c } from 'react-compiler-runtime';
+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';
+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 { jsx, jsxs } 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 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 {
+    size = 'medium',
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    flush = false,
+    className,
+    gap = 'condensed'
+  } = props;
+
+  // 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(() => 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);
+  // 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);
+  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);
+  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);
+      }
+    }
+    return groupedItemsMap;
+  }, [childRegistry]);
+  return /*#__PURE__*/jsx(ActionBarContext.Provider, {
+    value: {
+      size,
+      registerChild,
+      unregisterChild,
+      isVisibleChild
+    },
+    children: /*#__PURE__*/jsx("div", {
+      ref: navRef,
+      className: clsx(className, styles.Nav),
+      "data-flush": flush,
+      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(28);
+  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] !== id || $[25] !== props || $[26] !== size) {
+    t5 = /*#__PURE__*/jsx(IconButton, {
+      "aria-disabled": disabled,
+      ref: ref,
+      size: size,
+      onClick: clickHandler,
+      ...props,
+      variant: "invisible",
+      "data-testid": id
+    });
+    $[22] = clickHandler;
+    $[23] = disabled;
+    $[24] = id;
+    $[25] = props;
+    $[26] = size;
+    $[27] = t5;
+  } else {
+    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;
+});
+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$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: "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;
+};
+
+export { ActionBar, ActionBarGroup, ActionBarIconButton, VerticalDivider };

package/dist/ActionBar/ActionBar.module.css.js

@@ -0,0 +1,5 @@
+import './ActionBar-8ed12fe7.css';
+
+var styles = {"List":"prc-ActionBar-List-Z4LzW","Nav":"prc-ActionBar-Nav-hc-9G","Divider":"prc-ActionBar-Divider-CcBO8","Group":"prc-ActionBar-Group-hBx7J"};
+
+export { styles as default };

package/dist/ActionBar/index.d.ts

@@ -0,0 +1,11 @@
+export type { ActionBarProps } from './ActionBar';
+declare const ActionBar: import("react").FC<import("react").PropsWithChildren<import("./ActionBar").ActionBarProps>> & {
+    IconButton: import("react").ForwardRefExoticComponent<import("./ActionBar").ActionBarIconButtonProps & import("react").RefAttributes<unknown>>;
+    Divider: () => import("react").JSX.Element | null;
+    Group: import("react").ForwardRefExoticComponent<{
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<unknown>>;
+};
+export default ActionBar;
+export { ActionBar };
+//# sourceMappingURL=index.d.ts.map

package/dist/ActionBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAC,cAAc,EAAC,MAAM,aAAa,CAAA;AAE/C,QAAA,MAAM,SAAS;;;;;;CAIb,CAAA;AAEF,eAAe,SAAS,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,CAAA"}

package/dist/ActionBar/index.js

@@ -0,0 +1,9 @@
+import { ActionBar as ActionBar$1, ActionBarGroup, VerticalDivider, ActionBarIconButton } from './ActionBar.js';
+
+const ActionBar = Object.assign(ActionBar$1, {
+  IconButton: ActionBarIconButton,
+  Divider: VerticalDivider,
+  Group: ActionBarGroup
+});
+
+export { ActionBar, ActionBar as default };

package/dist/ActionList/Description.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { FCWithSlotMarker } from '../utils/types/Slots';
+export type ActionListDescriptionProps = {
+    /**
+     * Secondary text style variations.
+     *
+     * - `"inline"` - Secondary text is positioned beside primary text.
+     * - `"block"` - Secondary text is positioned below primary text.
+     */
+    variant?: 'inline' | 'block';
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * Whether the inline description should truncate the text on overflow.
+     */
+    truncate?: boolean;
+};
+export declare const Description: FCWithSlotMarker<React.PropsWithChildren<ActionListDescriptionProps>>;
+//# sourceMappingURL=Description.d.ts.map

package/dist/ActionList/Description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../src/ActionList/Description.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAE1D,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CAgD7F,CAAA"}