@primer/react 38.30.1-rc.bce2a87c7 → 38.31.0-rc.2630f104b

package/dist/NavList/NavList.js

@@ -1,827 +1,588 @@
-import { c } from 'react-compiler-runtime';
-import { PlusIcon, ChevronDownIcon } from '@primer/octicons-react';
-import React, { createElement, isValidElement } from 'react';
-import { clsx } from 'clsx';
-import { ActionList } from '../ActionList/index.js';
-import { SubItem } from '../ActionList/Item.js';
-import { ActionListContainerContext } from '../ActionList/ActionListContainerContext.js';
-import { useId } from '../hooks/useId.js';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
-import classes from '../ActionList/ActionList.module.css.js';
-import navListClasses from './NavList.module.css.js';
-import { flushSync } from 'react-dom';
-import { useSlots } from '../hooks/useSlots.js';
-import { fixedForwardRef } from '../utils/modern-polymorphic.js';
-import visuallyHiddenClasses from '../_VisuallyHidden.module.css.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Heading$1 from '../Heading/Heading.js';
-
-// Publishes the resolved numeric level of a NavList.Heading (e.g. 2 for an h2) so
-// NavList.Group/NavList.GroupHeading can default to one level deeper. `null` when
-// there is no NavList.Heading, in which case groups keep their historical h3 default.
-const NavListHeadingLevelContext = /*#__PURE__*/React.createContext(null);
+import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
+import { useId as useId$1 } from "../hooks/useId.js";
+import { fixedForwardRef } from "../utils/modern-polymorphic.js";
+import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
+import { useSlots } from "../hooks/useSlots.js";
+import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
+import Heading$1 from "../Heading/Heading.js";
+import ActionList_module_css_default from "../ActionList/ActionList.module.css.js";
+import { SubItem } from "../ActionList/Item.js";
+import { ActionList } from "../ActionList/index.js";
+import NavList_module_css_default from "./NavList.module.css.js";
+import { c } from "react-compiler-runtime";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { createElement, isValidElement } from "react";
+import { ChevronDownIcon, PlusIcon } from "@primer/octicons-react";
+import { flushSync } from "react-dom";
+//#region src/NavList/NavList.tsx
+const NavListHeadingLevelContext = /*#__PURE__*/ React.createContext(null);
 function headingTagToLevel(as) {
-  return Number.parseInt(as.slice(1), 10);
+	return Number.parseInt(as.slice(1), 10);
 }
 function levelToHeadingTag(level) {
-  // Clamp to h4 so group headings never go deeper than the supported hierarchy.
-  const clamped = Math.min(Math.max(level, 1), 4);
-  return `h${clamped}`;
+	return `h${Math.min(Math.max(level, 1), 4)}`;
 }
-
-// ----------------------------------------------------------------------------
-// NavList
-
-const Root = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  var _heading$props$id, _ariaLabelledby;
-  const $ = c(24);
-  let ariaLabel;
-  let ariaLabelledby;
-  let children;
-  let props;
-  if ($[0] !== t0) {
-    ({
-      children,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = ariaLabel;
-    $[2] = ariaLabelledby;
-    $[3] = children;
-    $[4] = props;
-  } else {
-    ariaLabel = $[1];
-    ariaLabelledby = $[2];
-    children = $[3];
-    props = $[4];
-  }
-  let t1;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = {
-      heading: Heading
-    };
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  const [slots, childrenWithoutHeading] = useSlots(children, t1);
-  const fallbackHeadingId = useId();
-  const heading = slots.heading;
-  const headingId = heading ? (_heading$props$id = heading.props.id) !== null && _heading$props$id !== void 0 ? _heading$props$id : fallbackHeadingId : undefined;
-  let t2;
-  if ($[6] !== heading) {
-    var _heading$props$as;
-    t2 = heading ? headingTagToLevel((_heading$props$as = heading.props.as) !== null && _heading$props$as !== void 0 ? _heading$props$as : "h2") : null;
-    $[6] = heading;
-    $[7] = t2;
-  } else {
-    t2 = $[7];
-  }
-  const headingLevel = t2;
-  const navLabelledby = (_ariaLabelledby = ariaLabelledby) !== null && _ariaLabelledby !== void 0 ? _ariaLabelledby : ariaLabel ? undefined : headingId;
-  let t3;
-  if ($[8] !== heading || $[9] !== headingId) {
-    t3 = heading ? /*#__PURE__*/React.cloneElement(heading, {
-      id: headingId
-    }) : null;
-    $[8] = heading;
-    $[9] = headingId;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
-  }
-  let t4;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = {
-      container: "NavList"
-    };
-    $[11] = t4;
-  } else {
-    t4 = $[11];
-  }
-  let t5;
-  if ($[12] !== childrenWithoutHeading) {
-    t5 = /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
-      value: t4,
-      children: /*#__PURE__*/jsx(ActionList, {
-        children: childrenWithoutHeading
-      })
-    });
-    $[12] = childrenWithoutHeading;
-    $[13] = t5;
-  } else {
-    t5 = $[13];
-  }
-  let t6;
-  if ($[14] !== headingLevel || $[15] !== t3 || $[16] !== t5) {
-    t6 = /*#__PURE__*/jsxs(NavListHeadingLevelContext.Provider, {
-      value: headingLevel,
-      children: [t3, t5]
-    });
-    $[14] = headingLevel;
-    $[15] = t3;
-    $[16] = t5;
-    $[17] = t6;
-  } else {
-    t6 = $[17];
-  }
-  let t7;
-  if ($[18] !== ariaLabel || $[19] !== navLabelledby || $[20] !== props || $[21] !== ref || $[22] !== t6) {
-    t7 = /*#__PURE__*/jsx("nav", {
-      ...props,
-      "aria-label": ariaLabel,
-      "aria-labelledby": navLabelledby,
-      ref: ref,
-      "data-component": "NavList",
-      children: t6
-    });
-    $[18] = ariaLabel;
-    $[19] = navLabelledby;
-    $[20] = props;
-    $[21] = ref;
-    $[22] = t6;
-    $[23] = t7;
-  } else {
-    t7 = $[23];
-  }
-  return t7;
+const Root = /*#__PURE__*/ React.forwardRef((t0, ref) => {
+	var _heading$props$id, _ariaLabelledby;
+	const $ = c(24);
+	let ariaLabel;
+	let ariaLabelledby;
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = ariaLabelledby;
+		$[3] = children;
+		$[4] = props;
+	} else {
+		ariaLabel = $[1];
+		ariaLabelledby = $[2];
+		children = $[3];
+		props = $[4];
+	}
+	let t1;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { heading: Heading };
+		$[5] = t1;
+	} else t1 = $[5];
+	const [slots, childrenWithoutHeading] = useSlots(children, t1);
+	const fallbackHeadingId = useId$1();
+	const heading = slots.heading;
+	const headingId = heading ? (_heading$props$id = heading.props.id) !== null && _heading$props$id !== void 0 ? _heading$props$id : fallbackHeadingId : void 0;
+	let t2;
+	if ($[6] !== heading) {
+		var _heading$props$as;
+		t2 = heading ? headingTagToLevel((_heading$props$as = heading.props.as) !== null && _heading$props$as !== void 0 ? _heading$props$as : "h2") : null;
+		$[6] = heading;
+		$[7] = t2;
+	} else t2 = $[7];
+	const headingLevel = t2;
+	const navLabelledby = (_ariaLabelledby = ariaLabelledby) !== null && _ariaLabelledby !== void 0 ? _ariaLabelledby : ariaLabel ? void 0 : headingId;
+	let t3;
+	if ($[8] !== heading || $[9] !== headingId) {
+		t3 = heading ? /*#__PURE__*/ React.cloneElement(heading, { id: headingId }) : null;
+		$[8] = heading;
+		$[9] = headingId;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { container: "NavList" };
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== childrenWithoutHeading) {
+		t5 = /*#__PURE__*/ jsx(ActionListContainerContext.Provider, {
+			value: t4,
+			children: /*#__PURE__*/ jsx(ActionList, { children: childrenWithoutHeading })
+		});
+		$[12] = childrenWithoutHeading;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== headingLevel || $[15] !== t3 || $[16] !== t5) {
+		t6 = /*#__PURE__*/ jsxs(NavListHeadingLevelContext.Provider, {
+			value: headingLevel,
+			children: [t3, t5]
+		});
+		$[14] = headingLevel;
+		$[15] = t3;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== ariaLabel || $[19] !== navLabelledby || $[20] !== props || $[21] !== ref || $[22] !== t6) {
+		t7 = /*#__PURE__*/ jsx("nav", {
+			...props,
+			"aria-label": ariaLabel,
+			"aria-labelledby": navLabelledby,
+			ref,
+			"data-component": "NavList",
+			children: t6
+		});
+		$[18] = ariaLabel;
+		$[19] = navLabelledby;
+		$[20] = props;
+		$[21] = ref;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
 });
-Root.displayName = 'NavList';
-
-// ----------------------------------------------------------------------------
-// NavList.Heading
-
-const Heading = t0 => {
-  const $ = c(14);
-  let children;
-  let className;
-  let props;
-  let t1;
-  let t2;
-  if ($[0] !== t0) {
-    ({
-      as: t1,
-      visuallyHidden: t2,
-      className,
-      children,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = props;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    children = $[1];
-    className = $[2];
-    props = $[3];
-    t1 = $[4];
-    t2 = $[5];
-  }
-  const as = t1 === undefined ? "h2" : t1;
-  const visuallyHidden = t2 === undefined ? false : t2;
-  const t3 = visuallyHidden ? visuallyHiddenClasses.InternalVisuallyHidden : navListClasses.Heading;
-  let t4;
-  if ($[6] !== className || $[7] !== t3) {
-    t4 = clsx(t3, className);
-    $[6] = className;
-    $[7] = t3;
-    $[8] = t4;
-  } else {
-    t4 = $[8];
-  }
-  let t5;
-  if ($[9] !== as || $[10] !== children || $[11] !== props || $[12] !== t4) {
-    t5 = /*#__PURE__*/jsx(Heading$1, {
-      as: as,
-      variant: "small",
-      className: t4,
-      "data-component": "NavList.Heading",
-      ...props,
-      children: children
-    });
-    $[9] = as;
-    $[10] = children;
-    $[11] = props;
-    $[12] = t4;
-    $[13] = t5;
-  } else {
-    t5 = $[13];
-  }
-  return t5;
+Root.displayName = "NavList";
+const Heading = (t0) => {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({as: t1, visuallyHidden: t2, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const as = t1 === void 0 ? "h2" : t1;
+	const t3 = (t2 === void 0 ? false : t2) ? _VisuallyHidden_module_css_default.InternalVisuallyHidden : NavList_module_css_default.Heading;
+	let t4;
+	if ($[6] !== className || $[7] !== t3) {
+		t4 = clsx(t3, className);
+		$[6] = className;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== as || $[10] !== children || $[11] !== props || $[12] !== t4) {
+		t5 = /*#__PURE__*/ jsx(Heading$1, {
+			as,
+			variant: "small",
+			className: t4,
+			"data-component": "NavList.Heading",
+			...props,
+			children
+		});
+		$[9] = as;
+		$[10] = children;
+		$[11] = props;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
 };
-Heading.displayName = 'NavList.Heading';
-Heading.__SLOT__ = Symbol('NavList.Heading');
-
-// ----------------------------------------------------------------------------
-// NavList.Item
-
-const ItemComponent = fixedForwardRef(({
-  'aria-current': ariaCurrent,
-  children,
-  defaultOpen,
-  as: Component,
-  ...props
-}, ref) => {
-  const {
-    depth
-  } = React.useContext(SubNavContext);
-
-  // Extract SubNav from children; useSlots also returns `rest` with TrailingAction filtered out.
-  const [slots, childrenWithoutSubNavOrTrailingAction] = useSlots(children, {
-    subNav: SubNav,
-    trailingAction: TrailingAction
-  });
-  const subNav = slots.subNav;
-  if (! /*#__PURE__*/isValidElement(subNav) && defaultOpen)
-    // eslint-disable-next-line no-console
-    console.error('NavList.Item must have a NavList.SubNav to use defaultOpen.');
-
-  // Render ItemWithSubNav if SubNav is present
-  if (subNav && /*#__PURE__*/isValidElement(subNav)) {
-    return /*#__PURE__*/jsx(ItemWithSubNav, {
-      subNav: subNav,
-      depth: depth,
-      defaultOpen: defaultOpen,
-      style: {
-        '--subitem-depth': depth
-      },
-      children: childrenWithoutSubNavOrTrailingAction
-    });
-  }
-
-  // Type safety for the polymorphic `as` prop is enforced at the
-  // Item boundary via fixedForwardRef. Internally we widen
-  // LinkItem's type so TypeScript doesn't re-check the generic
-  // constraint across two polymorphic layers.
-  const InternalLinkItem = ActionList.LinkItem;
-  return /*#__PURE__*/jsx(InternalLinkItem, {
-    ref: ref,
-    as: Component,
-    "aria-current": ariaCurrent,
-    active: Boolean(ariaCurrent) && ariaCurrent !== 'false',
-    style: {
-      '--subitem-depth': depth
-    },
-    "data-component": "NavList.Item",
-    ...props,
-    children: children
-  });
+Heading.displayName = "NavList.Heading";
+Heading.__SLOT__ = Symbol("NavList.Heading");
+const ItemComponent = fixedForwardRef(({ "aria-current": ariaCurrent, children, defaultOpen, as: Component, ...props }, ref) => {
+	const { depth } = React.useContext(SubNavContext);
+	const [slots, childrenWithoutSubNavOrTrailingAction] = useSlots(children, {
+		subNav: SubNav,
+		trailingAction: TrailingAction
+	});
+	const subNav = slots.subNav;
+	if (!/*#__PURE__*/ isValidElement(subNav) && defaultOpen) console.error("NavList.Item must have a NavList.SubNav to use defaultOpen.");
+	if (subNav && /*#__PURE__*/ isValidElement(subNav)) return /*#__PURE__*/ jsx(ItemWithSubNav, {
+		subNav,
+		depth,
+		defaultOpen,
+		style: { "--subitem-depth": depth },
+		children: childrenWithoutSubNavOrTrailingAction
+	});
+	const InternalLinkItem = ActionList.LinkItem;
+	return /*#__PURE__*/ jsx(InternalLinkItem, {
+		ref,
+		as: Component,
+		"aria-current": ariaCurrent,
+		active: Boolean(ariaCurrent) && ariaCurrent !== "false",
+		style: { "--subitem-depth": depth },
+		"data-component": "NavList.Item",
+		...props,
+		children
+	});
 });
-const Item = Object.assign(ItemComponent, {
-  displayName: 'NavList.Item'
-});
-
-// ----------------------------------------------------------------------------
-// ItemWithSubNav (internal)
-
-const ItemWithSubNavContext = /*#__PURE__*/React.createContext({
-  buttonId: '',
-  subNavId: '',
-  isOpen: false
+const Item = Object.assign(ItemComponent, { displayName: "NavList.Item" });
+const ItemWithSubNavContext = /*#__PURE__*/ React.createContext({
+	buttonId: "",
+	subNavId: "",
+	isOpen: false
 });
 function hasCurrentNavItem(node) {
-  if (! /*#__PURE__*/isValidElement(node)) {
-    return false;
-  }
-  const ariaCurrent = node.props['aria-current'];
-  if (Boolean(ariaCurrent) && ariaCurrent !== 'false') {
-    return true;
-  }
-  if (!node.props.children) {
-    return false;
-  }
-  return React.Children.toArray(node.props.children).some(hasCurrentNavItem);
+	if (!/*#__PURE__*/ isValidElement(node)) return false;
+	const ariaCurrent = node.props["aria-current"];
+	if (Boolean(ariaCurrent) && ariaCurrent !== "false") return true;
+	if (!node.props.children) return false;
+	return React.Children.toArray(node.props.children).some(hasCurrentNavItem);
 }
 function ItemWithSubNav(t0) {
-  var _ref;
-  const $ = c(29);
-  const {
-    children,
-    subNav,
-    defaultOpen,
-    style
-  } = t0;
-  const buttonId = useId();
-  const subNavId = useId();
-  let t1;
-  if ($[0] !== subNav) {
-    t1 = hasCurrentNavItem(subNav);
-    $[0] = subNav;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const hasCurrentItem = t1;
-  const [isOpen, setIsOpen] = React.useState((_ref = defaultOpen || null) !== null && _ref !== void 0 ? _ref : hasCurrentItem);
-  const subNavRef = React.useRef(null);
-  const [containsCurrentItem, setContainsCurrentItem] = React.useState(hasCurrentItem);
-  let t2;
-  if ($[2] !== subNav) {
-    t2 = () => {
-      var _subNavRef$current;
-      const currentItem = hasCurrentNavItem(subNav) || Boolean((_subNavRef$current = subNavRef.current) === null || _subNavRef$current === void 0 ? void 0 : _subNavRef$current.querySelector("[aria-current]:not([aria-current=false])"));
-      setContainsCurrentItem(currentItem);
-      if (currentItem) {
-        setIsOpen(true);
-      }
-    };
-    $[2] = subNav;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  let t3;
-  if ($[4] !== buttonId || $[5] !== subNav) {
-    t3 = [subNav, buttonId];
-    $[4] = buttonId;
-    $[5] = subNav;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  useIsomorphicLayoutEffect(t2, t3);
-  let t4;
-  if ($[7] !== buttonId || $[8] !== isOpen || $[9] !== subNavId) {
-    t4 = {
-      buttonId,
-      subNavId,
-      isOpen
-    };
-    $[7] = buttonId;
-    $[8] = isOpen;
-    $[9] = subNavId;
-    $[10] = t4;
-  } else {
-    t4 = $[10];
-  }
-  const t5 = !isOpen && containsCurrentItem;
-  let t6;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = () => setIsOpen(_temp);
-    $[11] = t6;
-  } else {
-    t6 = $[11];
-  }
-  let t7;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = /*#__PURE__*/jsx(ActionList.TrailingVisual, {
-      children: /*#__PURE__*/jsx(ChevronDownIcon, {
-        className: classes.ExpandIcon
-      })
-    });
-    $[12] = t7;
-  } else {
-    t7 = $[12];
-  }
-  let t8;
-  if ($[13] !== subNav) {
-    let t9;
-    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-      t9 = {
-        ref: subNavRef
-      };
-      $[15] = t9;
-    } else {
-      t9 = $[15];
-    }
-    t8 = /*#__PURE__*/React.cloneElement(subNav, t9);
-    $[13] = subNav;
-    $[14] = t8;
-  } else {
-    t8 = $[14];
-  }
-  let t9;
-  if ($[16] !== t8) {
-    t9 = /*#__PURE__*/jsx(SubItem, {
-      children: t8
-    });
-    $[16] = t8;
-    $[17] = t9;
-  } else {
-    t9 = $[17];
-  }
-  let t10;
-  if ($[18] !== buttonId || $[19] !== children || $[20] !== isOpen || $[21] !== style || $[22] !== subNavId || $[23] !== t5 || $[24] !== t9) {
-    t10 = /*#__PURE__*/jsxs(ActionList.Item, {
-      id: buttonId,
-      "aria-expanded": isOpen,
-      "aria-controls": subNavId,
-      active: t5,
-      onSelect: t6,
-      style: style,
-      "data-component": "NavList.Item",
-      children: [children, t7, t9]
-    });
-    $[18] = buttonId;
-    $[19] = children;
-    $[20] = isOpen;
-    $[21] = style;
-    $[22] = subNavId;
-    $[23] = t5;
-    $[24] = t9;
-    $[25] = t10;
-  } else {
-    t10 = $[25];
-  }
-  let t11;
-  if ($[26] !== t10 || $[27] !== t4) {
-    t11 = /*#__PURE__*/jsx(ItemWithSubNavContext.Provider, {
-      value: t4,
-      children: t10
-    });
-    $[26] = t10;
-    $[27] = t4;
-    $[28] = t11;
-  } else {
-    t11 = $[28];
-  }
-  return t11;
+	var _ref;
+	const $ = c(29);
+	const { children, subNav, defaultOpen, style } = t0;
+	const buttonId = useId$1();
+	const subNavId = useId$1();
+	let t1;
+	if ($[0] !== subNav) {
+		t1 = hasCurrentNavItem(subNav);
+		$[0] = subNav;
+		$[1] = t1;
+	} else t1 = $[1];
+	const hasCurrentItem = t1;
+	const [isOpen, setIsOpen] = React.useState((_ref = defaultOpen || null) !== null && _ref !== void 0 ? _ref : hasCurrentItem);
+	const subNavRef = React.useRef(null);
+	const [containsCurrentItem, setContainsCurrentItem] = React.useState(hasCurrentItem);
+	let t2;
+	if ($[2] !== subNav) {
+		t2 = () => {
+			var _subNavRef$current;
+			const currentItem = hasCurrentNavItem(subNav) || Boolean((_subNavRef$current = subNavRef.current) === null || _subNavRef$current === void 0 ? void 0 : _subNavRef$current.querySelector("[aria-current]:not([aria-current=false])"));
+			setContainsCurrentItem(currentItem);
+			if (currentItem) setIsOpen(true);
+		};
+		$[2] = subNav;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== buttonId || $[5] !== subNav) {
+		t3 = [subNav, buttonId];
+		$[4] = buttonId;
+		$[5] = subNav;
+		$[6] = t3;
+	} else t3 = $[6];
+	useIsomorphicLayoutEffect(t2, t3);
+	let t4;
+	if ($[7] !== buttonId || $[8] !== isOpen || $[9] !== subNavId) {
+		t4 = {
+			buttonId,
+			subNavId,
+			isOpen
+		};
+		$[7] = buttonId;
+		$[8] = isOpen;
+		$[9] = subNavId;
+		$[10] = t4;
+	} else t4 = $[10];
+	const t5 = !isOpen && containsCurrentItem;
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => setIsOpen(_temp);
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx(ChevronDownIcon, { className: ActionList_module_css_default.ExpandIcon }) });
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== subNav) {
+		let t9;
+		if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+			t9 = { ref: subNavRef };
+			$[15] = t9;
+		} else t9 = $[15];
+		t8 = /*#__PURE__*/ React.cloneElement(subNav, t9);
+		$[13] = subNav;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[16] !== t8) {
+		t9 = /*#__PURE__*/ jsx(SubItem, { children: t8 });
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== buttonId || $[19] !== children || $[20] !== isOpen || $[21] !== style || $[22] !== subNavId || $[23] !== t5 || $[24] !== t9) {
+		t10 = /*#__PURE__*/ jsxs(ActionList.Item, {
+			id: buttonId,
+			"aria-expanded": isOpen,
+			"aria-controls": subNavId,
+			active: t5,
+			onSelect: t6,
+			style,
+			"data-component": "NavList.Item",
+			children: [
+				children,
+				t7,
+				t9
+			]
+		});
+		$[18] = buttonId;
+		$[19] = children;
+		$[20] = isOpen;
+		$[21] = style;
+		$[22] = subNavId;
+		$[23] = t5;
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== t10 || $[27] !== t4) {
+		t11 = /*#__PURE__*/ jsx(ItemWithSubNavContext.Provider, {
+			value: t4,
+			children: t10
+		});
+		$[26] = t10;
+		$[27] = t4;
+		$[28] = t11;
+	} else t11 = $[28];
+	return t11;
 }
-
-// ----------------------------------------------------------------------------
-// NavList.SubNav
 function _temp(open) {
-  return !open;
+	return !open;
 }
-const SubNavContext = /*#__PURE__*/React.createContext({
-  depth: 0
-});
-
-// NOTE: SubNav must be a direct child of an Item
-const SubNav = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(10);
-  const {
-    children
-  } = t0;
-  const {
-    buttonId,
-    subNavId
-  } = React.useContext(ItemWithSubNavContext);
-  const {
-    depth
-  } = React.useContext(SubNavContext);
-  if (!buttonId || !subNavId) {
-    console.error("NavList.SubNav must be a child of a NavList.Item");
-  }
-  if (depth > 3) {
-    console.error("NavList.SubNav only supports four levels of nesting");
-    return null;
-  }
-  const t1 = depth + 1;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = {
-      depth: t1
-    };
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  let t3;
-  if ($[2] !== buttonId || $[3] !== children || $[4] !== forwardedRef || $[5] !== subNavId) {
-    t3 = /*#__PURE__*/jsx("ul", {
-      className: classes.SubGroup,
-      id: subNavId,
-      "aria-labelledby": buttonId,
-      ref: forwardedRef,
-      "data-component": "NavList.SubNav",
-      children: children
-    });
-    $[2] = buttonId;
-    $[3] = children;
-    $[4] = forwardedRef;
-    $[5] = subNavId;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  let t4;
-  if ($[7] !== t2 || $[8] !== t3) {
-    t4 = /*#__PURE__*/jsx(SubNavContext.Provider, {
-      value: t2,
-      children: t3
-    });
-    $[7] = t2;
-    $[8] = t3;
-    $[9] = t4;
-  } else {
-    t4 = $[9];
-  }
-  return t4;
+const SubNavContext = /*#__PURE__*/ React.createContext({ depth: 0 });
+const SubNav = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
+	const $ = c(10);
+	const { children } = t0;
+	const { buttonId, subNavId } = React.useContext(ItemWithSubNavContext);
+	const { depth } = React.useContext(SubNavContext);
+	if (!buttonId || !subNavId) console.error("NavList.SubNav must be a child of a NavList.Item");
+	if (depth > 3) {
+		console.error("NavList.SubNav only supports four levels of nesting");
+		return null;
+	}
+	const t1 = depth + 1;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = { depth: t1 };
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== buttonId || $[3] !== children || $[4] !== forwardedRef || $[5] !== subNavId) {
+		t3 = /*#__PURE__*/ jsx("ul", {
+			className: ActionList_module_css_default.SubGroup,
+			id: subNavId,
+			"aria-labelledby": buttonId,
+			ref: forwardedRef,
+			"data-component": "NavList.SubNav",
+			children
+		});
+		$[2] = buttonId;
+		$[3] = children;
+		$[4] = forwardedRef;
+		$[5] = subNavId;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = /*#__PURE__*/ jsx(SubNavContext.Provider, {
+			value: t2,
+			children: t3
+		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 });
-SubNav.displayName = 'NavList.SubNav';
-
-// ----------------------------------------------------------------------------
-// NavList.LeadingVisual
-
+SubNav.displayName = "NavList.SubNav";
 const LeadingVisual = ActionList.LeadingVisual;
-LeadingVisual.displayName = 'NavList.LeadingVisual';
-
-// ----------------------------------------------------------------------------
-// NavList.TrailingVisual
-
+LeadingVisual.displayName = "NavList.LeadingVisual";
 const TrailingVisual = ActionList.TrailingVisual;
-TrailingVisual.displayName = 'NavList.TrailingVisual';
-
-// ----------------------------------------------------------------------------
-// NavList.Divider
-
+TrailingVisual.displayName = "NavList.TrailingVisual";
 const Divider = ActionList.Divider;
-Divider.displayName = 'NavList.Divider';
-
-// NavList.TrailingAction
-
+Divider.displayName = "NavList.Divider";
 const TrailingAction = ActionList.TrailingAction;
-TrailingAction.displayName = 'NavList.TrailingAction';
-
-// ----------------------------------------------------------------------------
-// NavList.Group
-
-const Group = t0 => {
-  const $ = c(14);
-  let children;
-  let props;
-  let title;
-  if ($[0] !== t0) {
-    ({
-      title,
-      children,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = props;
-    $[3] = title;
-  } else {
-    children = $[1];
-    props = $[2];
-    title = $[3];
-  }
-  const headingLevel = React.useContext(NavListHeadingLevelContext);
-  let t1;
-  if ($[4] !== headingLevel) {
-    t1 = headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
-    $[4] = headingLevel;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  const groupHeadingAs = t1;
-  let t2;
-  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = /*#__PURE__*/jsx(ActionList.Divider, {});
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  let t3;
-  if ($[7] !== groupHeadingAs || $[8] !== title) {
-    t3 = title ? /*#__PURE__*/jsx(ActionList.GroupHeading, {
-      as: groupHeadingAs,
-      "data-component": "ActionList.GroupHeading",
-      children: title
-    }) : null;
-    $[7] = groupHeadingAs;
-    $[8] = title;
-    $[9] = t3;
-  } else {
-    t3 = $[9];
-  }
-  let t4;
-  if ($[10] !== children || $[11] !== props || $[12] !== t3) {
-    t4 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t2, /*#__PURE__*/jsxs(ActionList.Group, {
-        ...props,
-        children: [t3, children]
-      })]
-    });
-    $[10] = children;
-    $[11] = props;
-    $[12] = t3;
-    $[13] = t4;
-  } else {
-    t4 = $[13];
-  }
-  return t4;
+TrailingAction.displayName = "NavList.TrailingAction";
+const Group = (t0) => {
+	const $ = c(14);
+	let children;
+	let props;
+	let title;
+	if ($[0] !== t0) {
+		({title, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = title;
+	} else {
+		children = $[1];
+		props = $[2];
+		title = $[3];
+	}
+	const headingLevel = React.useContext(NavListHeadingLevelContext);
+	let t1;
+	if ($[4] !== headingLevel) {
+		t1 = headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
+		$[4] = headingLevel;
+		$[5] = t1;
+	} else t1 = $[5];
+	const groupHeadingAs = t1;
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /*#__PURE__*/ jsx(ActionList.Divider, {});
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== groupHeadingAs || $[8] !== title) {
+		t3 = title ? /*#__PURE__*/ jsx(ActionList.GroupHeading, {
+			as: groupHeadingAs,
+			"data-component": "ActionList.GroupHeading",
+			children: title
+		}) : null;
+		$[7] = groupHeadingAs;
+		$[8] = title;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== children || $[11] !== props || $[12] !== t3) {
+		t4 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, /*#__PURE__*/ jsxs(ActionList.Group, {
+			...props,
+			children: [t3, children]
+		})] });
+		$[10] = children;
+		$[11] = props;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 };
-// ----------------------------------------------------------------------------
-// NavList.GroupExpand
-
-const GroupExpand = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(23);
-  let items;
-  let props;
-  let renderItem;
-  let t1;
-  let t2;
-  if ($[0] !== t0) {
-    ({
-      label: t1,
-      pages: t2,
-      items,
-      renderItem,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = items;
-    $[2] = props;
-    $[3] = renderItem;
-    $[4] = t1;
-    $[5] = t2;
-  } else {
-    items = $[1];
-    props = $[2];
-    renderItem = $[3];
-    t1 = $[4];
-    t2 = $[5];
-  }
-  const label = t1 === undefined ? "Show more" : t1;
-  const pages = t2 === undefined ? 0 : t2;
-  const [currentPage, setCurrentPage] = React.useState(0);
-  const groupId = useId();
-  const itemsPerPage = items.length / pages;
-  const amountToShow = pages === 0 ? items.length : Math.ceil(itemsPerPage * currentPage);
-  const focusTargetIndex = currentPage === 1 ? 0 : amountToShow - Math.floor(itemsPerPage);
-  let t3;
-  if ($[6] !== amountToShow || $[7] !== currentPage || $[8] !== focusTargetIndex || $[9] !== groupId || $[10] !== items || $[11] !== renderItem) {
-    t3 = currentPage > 0 ? /*#__PURE__*/jsx(Fragment, {
-      children: items.map((itemArr, index) => {
-        const {
-          text,
-          trailingVisual: TrailingVisualIcon,
-          leadingVisual: LeadingVisualIcon,
-          trailingAction,
-          ...rest
-        } = itemArr;
-        const {
-          icon,
-          label: actionLabel,
-          ...actionProps
-        } = trailingAction || {};
-        const focusTarget = index === focusTargetIndex ? groupId : undefined;
-        if (index < amountToShow) {
-          if (renderItem) {
-            return renderItem({
-              ...itemArr,
-              "data-expand-focus-target": focusTarget
-            });
-          }
-          return /*#__PURE__*/createElement(Item, {
-            ...rest,
-            key: index,
-            "data-expand-focus-target": focusTarget
-          }, LeadingVisualIcon ? /*#__PURE__*/jsx(LeadingVisual, {
-            children: /*#__PURE__*/jsx(LeadingVisualIcon, {})
-          }) : null, text, TrailingVisualIcon ? /*#__PURE__*/jsx(TrailingVisual, {
-            children: /*#__PURE__*/jsx(TrailingVisualIcon, {})
-          }) : null, trailingAction ? /*#__PURE__*/jsx(TrailingAction, {
-            ...actionProps,
-            icon: icon,
-            label: actionLabel || ""
-          }) : null);
-        }
-      })
-    }) : null;
-    $[6] = amountToShow;
-    $[7] = currentPage;
-    $[8] = focusTargetIndex;
-    $[9] = groupId;
-    $[10] = items;
-    $[11] = renderItem;
-    $[12] = t3;
-  } else {
-    t3 = $[12];
-  }
-  let t4;
-  if ($[13] !== currentPage || $[14] !== forwardedRef || $[15] !== groupId || $[16] !== label || $[17] !== pages || $[18] !== props) {
-    t4 = currentPage < pages || currentPage === 0 ? /*#__PURE__*/jsxs(ActionList.Item, {
-      as: "button",
-      "aria-expanded": "false",
-      ref: forwardedRef,
-      onSelect: () => {
-        flushSync(() => {
-          setCurrentPage(currentPage + 1);
-        });
-        const focusTarget_0 = Array.from(document.querySelectorAll(`[data-expand-focus-target="${groupId}"]`));
-        if (focusTarget_0.length > 0) {
-          focusTarget_0[focusTarget_0.length - 1].focus();
-        }
-      },
-      ...props,
-      children: [label, /*#__PURE__*/jsx(TrailingVisual, {
-        children: /*#__PURE__*/jsx(PlusIcon, {})
-      })]
-    }) : null;
-    $[13] = currentPage;
-    $[14] = forwardedRef;
-    $[15] = groupId;
-    $[16] = label;
-    $[17] = pages;
-    $[18] = props;
-    $[19] = t4;
-  } else {
-    t4 = $[19];
-  }
-  let t5;
-  if ($[20] !== t3 || $[21] !== t4) {
-    t5 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t3, t4]
-    });
-    $[20] = t3;
-    $[21] = t4;
-    $[22] = t5;
-  } else {
-    t5 = $[22];
-  }
-  return t5;
+const GroupExpand = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
+	const $ = c(23);
+	let items;
+	let props;
+	let renderItem;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({label: t1, pages: t2, items, renderItem, ...props} = t0);
+		$[0] = t0;
+		$[1] = items;
+		$[2] = props;
+		$[3] = renderItem;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		items = $[1];
+		props = $[2];
+		renderItem = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const label = t1 === void 0 ? "Show more" : t1;
+	const pages = t2 === void 0 ? 0 : t2;
+	const [currentPage, setCurrentPage] = React.useState(0);
+	const groupId = useId$1();
+	const itemsPerPage = items.length / pages;
+	const amountToShow = pages === 0 ? items.length : Math.ceil(itemsPerPage * currentPage);
+	const focusTargetIndex = currentPage === 1 ? 0 : amountToShow - Math.floor(itemsPerPage);
+	let t3;
+	if ($[6] !== amountToShow || $[7] !== currentPage || $[8] !== focusTargetIndex || $[9] !== groupId || $[10] !== items || $[11] !== renderItem) {
+		t3 = currentPage > 0 ? /*#__PURE__*/ jsx(Fragment, { children: items.map((itemArr, index) => {
+			const { text, trailingVisual: TrailingVisualIcon, leadingVisual: LeadingVisualIcon, trailingAction, ...rest } = itemArr;
+			const { icon, label: actionLabel, ...actionProps } = trailingAction || {};
+			const focusTarget = index === focusTargetIndex ? groupId : void 0;
+			if (index < amountToShow) {
+				if (renderItem) return renderItem({
+					...itemArr,
+					"data-expand-focus-target": focusTarget
+				});
+				return /*#__PURE__*/ createElement(Item, {
+					...rest,
+					key: index,
+					"data-expand-focus-target": focusTarget
+				}, LeadingVisualIcon ? /*#__PURE__*/ jsx(LeadingVisual, { children: /*#__PURE__*/ jsx(LeadingVisualIcon, {}) }) : null, text, TrailingVisualIcon ? /*#__PURE__*/ jsx(TrailingVisual, { children: /*#__PURE__*/ jsx(TrailingVisualIcon, {}) }) : null, trailingAction ? /*#__PURE__*/ jsx(TrailingAction, {
+					...actionProps,
+					icon,
+					label: actionLabel || ""
+				}) : null);
+			}
+		}) }) : null;
+		$[6] = amountToShow;
+		$[7] = currentPage;
+		$[8] = focusTargetIndex;
+		$[9] = groupId;
+		$[10] = items;
+		$[11] = renderItem;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== currentPage || $[14] !== forwardedRef || $[15] !== groupId || $[16] !== label || $[17] !== pages || $[18] !== props) {
+		t4 = currentPage < pages || currentPage === 0 ? /*#__PURE__*/ jsxs(ActionList.Item, {
+			as: "button",
+			"aria-expanded": "false",
+			ref: forwardedRef,
+			onSelect: () => {
+				flushSync(() => {
+					setCurrentPage(currentPage + 1);
+				});
+				const focusTarget_0 = Array.from(document.querySelectorAll(`[data-expand-focus-target="${groupId}"]`));
+				if (focusTarget_0.length > 0) focusTarget_0[focusTarget_0.length - 1].focus();
+			},
+			...props,
+			children: [label, /*#__PURE__*/ jsx(TrailingVisual, { children: /*#__PURE__*/ jsx(PlusIcon, {}) })]
+		}) : null;
+		$[13] = currentPage;
+		$[14] = forwardedRef;
+		$[15] = groupId;
+		$[16] = label;
+		$[17] = pages;
+		$[18] = props;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== t3 || $[21] !== t4) {
+		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t3, t4] });
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
 });
-
-// ----------------------------------------------------------------------------
-// NavList.GroupHeading
-
 /**
- * This is an alternative to the `title` prop on `NavList.Group`.
- * It was primarily added to allow links in group headings.
- */
-const GroupHeading = t0 => {
-  const $ = c(13);
-  let as;
-  let className;
-  let rest;
-  if ($[0] !== t0) {
-    ({
-      as,
-      className,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = as;
-    $[2] = className;
-    $[3] = rest;
-  } else {
-    as = $[1];
-    className = $[2];
-    rest = $[3];
-  }
-  const headingLevel = React.useContext(NavListHeadingLevelContext);
-  let t1;
-  if ($[4] !== as || $[5] !== headingLevel) {
-    var _as;
-    t1 = (_as = as) !== null && _as !== void 0 ? _as : headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
-    $[4] = as;
-    $[5] = headingLevel;
-    $[6] = t1;
-  } else {
-    t1 = $[6];
-  }
-  const resolvedAs = t1;
-  let t2;
-  if ($[7] !== className) {
-    t2 = clsx(navListClasses.GroupHeading, className);
-    $[7] = className;
-    $[8] = t2;
-  } else {
-    t2 = $[8];
-  }
-  let t3;
-  if ($[9] !== resolvedAs || $[10] !== rest || $[11] !== t2) {
-    t3 = /*#__PURE__*/jsx(ActionList.GroupHeading, {
-      as: resolvedAs,
-      className: t2,
-      "data-component": "NavList.GroupHeading",
-      headingWrapElement: "li",
-      ...rest
-    });
-    $[9] = resolvedAs;
-    $[10] = rest;
-    $[11] = t2;
-    $[12] = t3;
-  } else {
-    t3 = $[12];
-  }
-  return t3;
+* This is an alternative to the `title` prop on `NavList.Group`.
+* It was primarily added to allow links in group headings.
+*/
+const GroupHeading = (t0) => {
+	const $ = c(13);
+	let as;
+	let className;
+	let rest;
+	if ($[0] !== t0) {
+		({as, className, ...rest} = t0);
+		$[0] = t0;
+		$[1] = as;
+		$[2] = className;
+		$[3] = rest;
+	} else {
+		as = $[1];
+		className = $[2];
+		rest = $[3];
+	}
+	const headingLevel = React.useContext(NavListHeadingLevelContext);
+	let t1;
+	if ($[4] !== as || $[5] !== headingLevel) {
+		var _as;
+		t1 = (_as = as) !== null && _as !== void 0 ? _as : headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
+		$[4] = as;
+		$[5] = headingLevel;
+		$[6] = t1;
+	} else t1 = $[6];
+	const resolvedAs = t1;
+	let t2;
+	if ($[7] !== className) {
+		t2 = clsx(NavList_module_css_default.GroupHeading, className);
+		$[7] = className;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== resolvedAs || $[10] !== rest || $[11] !== t2) {
+		t3 = /*#__PURE__*/ jsx(ActionList.GroupHeading, {
+			as: resolvedAs,
+			className: t2,
+			"data-component": "NavList.GroupHeading",
+			headingWrapElement: "li",
+			...rest
+		});
+		$[9] = resolvedAs;
+		$[10] = rest;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
 };
-
-// ----------------------------------------------------------------------------
-// Export
-
 const NavList = Object.assign(Root, {
-  Description: ActionList.Description,
-  Heading,
-  Item,
-  SubNav,
-  LeadingVisual,
-  TrailingVisual,
-  TrailingAction,
-  Divider,
-  Group,
-  GroupExpand,
-  GroupHeading
+	Description: ActionList.Description,
+	Heading,
+	Item,
+	SubNav,
+	LeadingVisual,
+	TrailingVisual,
+	TrailingAction,
+	Divider,
+	Group,
+	GroupExpand,
+	GroupHeading
 });
-
+//#endregion
 export { GroupExpand, NavList };