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

package/dist/TreeView/TreeView.module.css.js

@@ -1,5 +1,23 @@
-import './TreeView-1bf45a33.css';
-
-var classes = {"TreeViewRootUlStyles":"prc-TreeView-TreeViewRootUlStyles-Mzrmj","TreeViewItem":"prc-TreeView-TreeViewItem-Ter5f","TreeViewItemContainer":"prc-TreeView-TreeViewItemContainer-z6qqQ","TreeViewItemToggle":"prc-TreeView-TreeViewItemToggle-hq3Xq","TreeViewItemToggleHover":"prc-TreeView-TreeViewItemToggleHover-H9tbt","TreeViewItemToggleEnd":"prc-TreeView-TreeViewItemToggleEnd-nWt9I","TreeViewItemContent":"prc-TreeView-TreeViewItemContent-RKsCI","TreeViewItemContentText":"prc-TreeView-TreeViewItemContentText-FFaKp","TreeViewItemVisual":"prc-TreeView-TreeViewItemVisual-naWzj","TreeViewItemLeadingAction":"prc-TreeView-TreeViewItemLeadingAction-vmOIV","TreeViewItemTrailingAction":"prc-TreeView-TreeViewItemTrailingAction-h9M5g","TreeViewItemTrailingActionButton":"prc-TreeView-TreeViewItemTrailingActionButton-pCTdP","TreeViewItemLevelLine":"prc-TreeView-TreeViewItemLevelLine-F-0-2","TreeViewDirectoryIcon":"prc-TreeView-TreeViewDirectoryIcon-yP1oY","TreeViewVisuallyHidden":"prc-TreeView-TreeViewVisuallyHidden-1N8xK","TreeViewSkeletonItemContainerStyle":"prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd","TreeItemSkeletonTextStyles":"prc-TreeView-TreeItemSkeletonTextStyles-8VJ-g"};
-
-export { classes as default };
+import "./TreeView-1bf45a33.css";
+//#region src/TreeView/TreeView.module.css.js
+var TreeView_module_css_default = {
+	"TreeViewRootUlStyles": "prc-TreeView-TreeViewRootUlStyles-Mzrmj",
+	"TreeViewItem": "prc-TreeView-TreeViewItem-Ter5f",
+	"TreeViewItemContainer": "prc-TreeView-TreeViewItemContainer-z6qqQ",
+	"TreeViewItemToggle": "prc-TreeView-TreeViewItemToggle-hq3Xq",
+	"TreeViewItemToggleHover": "prc-TreeView-TreeViewItemToggleHover-H9tbt",
+	"TreeViewItemToggleEnd": "prc-TreeView-TreeViewItemToggleEnd-nWt9I",
+	"TreeViewItemContent": "prc-TreeView-TreeViewItemContent-RKsCI",
+	"TreeViewItemContentText": "prc-TreeView-TreeViewItemContentText-FFaKp",
+	"TreeViewItemVisual": "prc-TreeView-TreeViewItemVisual-naWzj",
+	"TreeViewItemLeadingAction": "prc-TreeView-TreeViewItemLeadingAction-vmOIV",
+	"TreeViewItemTrailingAction": "prc-TreeView-TreeViewItemTrailingAction-h9M5g",
+	"TreeViewItemTrailingActionButton": "prc-TreeView-TreeViewItemTrailingActionButton-pCTdP",
+	"TreeViewItemLevelLine": "prc-TreeView-TreeViewItemLevelLine-F-0-2",
+	"TreeViewDirectoryIcon": "prc-TreeView-TreeViewDirectoryIcon-yP1oY",
+	"TreeViewVisuallyHidden": "prc-TreeView-TreeViewVisuallyHidden-1N8xK",
+	"TreeViewSkeletonItemContainerStyle": "prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd",
+	"TreeItemSkeletonTextStyles": "prc-TreeView-TreeItemSkeletonTextStyles-8VJ-g"
+};
+//#endregion
+export { TreeView_module_css_default as default };

package/dist/TreeView/index.d.ts

@@ -1,2 +1,2 @@
-export * from './TreeView';
-//# sourceMappingURL=index.d.ts.map
+import { SubTreeState, TreeView, TreeViewErrorDialogProps, TreeViewItemProps, TreeViewProps, TreeViewSecondaryActions, TreeViewSubTreeProps, TreeViewVisualProps } from "./TreeView.js";
+export { SubTreeState, TreeView, TreeViewErrorDialogProps, TreeViewItemProps, TreeViewProps, TreeViewSecondaryActions, TreeViewSubTreeProps, TreeViewVisualProps };

package/dist/TreeView/shared.js

@@ -1,13 +1,14 @@
+//#region src/TreeView/shared.ts
 /**
- * Returns the accessible name of an element
- */
+* Returns the accessible name of an element
+*/
 function getAccessibleName(element) {
-  var _document$getElementB, _document$getElementB2;
-  const label = element.getAttribute('aria-label');
-  const labelledby = element.getAttribute('aria-labelledby');
-  if (label) return label;
-  if (labelledby) return (_document$getElementB = (_document$getElementB2 = document.getElementById(labelledby)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.textContent) !== null && _document$getElementB !== void 0 ? _document$getElementB : '';
-  return element.textContent;
+	var _document$getElementB, _document$getElementB2;
+	const label = element.getAttribute("aria-label");
+	const labelledby = element.getAttribute("aria-labelledby");
+	if (label) return label;
+	if (labelledby) return (_document$getElementB = (_document$getElementB2 = document.getElementById(labelledby)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.textContent) !== null && _document$getElementB !== void 0 ? _document$getElementB : "";
+	return element.textContent;
 }
-
+//#endregion
 export { getAccessibleName };

package/dist/TreeView/useRovingTabIndex.d.ts

@@ -1,14 +1,14 @@
-import type React from 'react';
-export declare function useRovingTabIndex({ containerRef, mouseDownRef, preventScroll, }: {
-    containerRef: React.RefObject<HTMLElement>;
-    mouseDownRef?: React.RefObject<boolean>;
-    preventScroll?: boolean;
+import React from "react";
+
+//#region src/TreeView/useRovingTabIndex.d.ts
+declare function useRovingTabIndex({
+  containerRef,
+  mouseDownRef,
+  preventScroll
+}: {
+  containerRef: React.RefObject<HTMLElement>;
+  mouseDownRef?: React.RefObject<boolean>;
+  preventScroll?: boolean;
 }, dependencies?: React.DependencyList): void;
-export declare function getNextFocusableElement(activeElement: HTMLElement, event: KeyboardEvent): HTMLElement | undefined;
-export declare function getElementState(element: HTMLElement): 'open' | 'closed' | 'end';
-export declare function getVisibleElement(element: HTMLElement, direction: 'next' | 'previous'): HTMLElement | undefined;
-export declare function getFirstChildElement(element: HTMLElement): HTMLElement | undefined;
-export declare function getParentElement(element: HTMLElement): HTMLElement | undefined;
-export declare function getFirstElement(element: HTMLElement): HTMLElement | undefined;
-export declare function getLastElement(element: HTMLElement): HTMLElement | undefined;
-//# sourceMappingURL=useRovingTabIndex.d.ts.map
+//#endregion
+export { useRovingTabIndex };

package/dist/TreeView/useRovingTabIndex.js

@@ -1,249 +1,170 @@
-import { c } from 'react-compiler-runtime';
-import { useFocusZone } from '../hooks/useFocusZone.js';
-import { getScrollContainer } from '../utils/scroll.js';
-import { FocusKeys } from '@primer/behaviors';
-
+import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
+import { getScrollContainer } from "../utils/scroll.js";
+import { c } from "react-compiler-runtime";
+//#region src/TreeView/useRovingTabIndex.ts
 function useRovingTabIndex(t0, t1) {
-  const $ = c(12);
-  const {
-    containerRef,
-    mouseDownRef,
-    preventScroll: t2
-  } = t0;
-  const preventScroll = t2 === undefined ? true : t2;
-  let t3;
-  if ($[0] !== t1) {
-    t3 = t1 === undefined ? [] : t1;
-    $[0] = t1;
-    $[1] = t3;
-  } else {
-    t3 = $[1];
-  }
-  const dependencies = t3;
-  let t4;
-  if ($[2] !== containerRef || $[3] !== mouseDownRef) {
-    t4 = () => {
-      var _containerRef$current, _containerRef$current2, _containerRef$current3;
-      if (mouseDownRef !== null && mouseDownRef !== void 0 && mouseDownRef.current) {
-        return;
-      }
-      const currentItem = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector("[aria-current]");
-      const firstItem = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.querySelector("[role=\"treeitem\"]");
-      if (currentItem instanceof HTMLElement) {
-        return currentItem;
-      }
-      if (document.activeElement instanceof HTMLElement && (_containerRef$current3 = containerRef.current) !== null && _containerRef$current3 !== void 0 && _containerRef$current3.contains(document.activeElement) && document.activeElement.getAttribute("role") === "treeitem") {
-        return document.activeElement;
-      }
-      return firstItem instanceof HTMLElement ? firstItem : undefined;
-    };
-    $[2] = containerRef;
-    $[3] = mouseDownRef;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  let t5;
-  if ($[5] !== containerRef || $[6] !== preventScroll || $[7] !== t4) {
-    t5 = {
-      containerRef,
-      bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd | FocusKeys.Backspace | FocusKeys.PageUpDown,
-      preventScroll,
-      getNextFocusable: _temp,
-      focusInStrategy: t4
-    };
-    $[5] = containerRef;
-    $[6] = preventScroll;
-    $[7] = t4;
-    $[8] = t5;
-  } else {
-    t5 = $[8];
-  }
-  let t6;
-  if ($[9] !== dependencies || $[10] !== preventScroll) {
-    t6 = [preventScroll, ...dependencies];
-    $[9] = dependencies;
-    $[10] = preventScroll;
-    $[11] = t6;
-  } else {
-    t6 = $[11];
-  }
-  useFocusZone(t5, t6);
+	const $ = c(12);
+	const { containerRef, mouseDownRef, preventScroll: t2 } = t0;
+	const preventScroll = t2 === void 0 ? true : t2;
+	let t3;
+	if ($[0] !== t1) {
+		t3 = t1 === void 0 ? [] : t1;
+		$[0] = t1;
+		$[1] = t3;
+	} else t3 = $[1];
+	const dependencies = t3;
+	let t4;
+	if ($[2] !== containerRef || $[3] !== mouseDownRef) {
+		t4 = () => {
+			var _containerRef$current, _containerRef$current2, _containerRef$current3;
+			if (mouseDownRef !== null && mouseDownRef !== void 0 && mouseDownRef.current) return;
+			const currentItem = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector("[aria-current]");
+			const firstItem = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.querySelector("[role=\"treeitem\"]");
+			if (currentItem instanceof HTMLElement) return currentItem;
+			if (document.activeElement instanceof HTMLElement && (_containerRef$current3 = containerRef.current) !== null && _containerRef$current3 !== void 0 && _containerRef$current3.contains(document.activeElement) && document.activeElement.getAttribute("role") === "treeitem") return document.activeElement;
+			return firstItem instanceof HTMLElement ? firstItem : void 0;
+		};
+		$[2] = containerRef;
+		$[3] = mouseDownRef;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== containerRef || $[6] !== preventScroll || $[7] !== t4) {
+		t5 = {
+			containerRef,
+			bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd | FocusKeys.Backspace | FocusKeys.PageUpDown,
+			preventScroll,
+			getNextFocusable: _temp,
+			focusInStrategy: t4
+		};
+		$[5] = containerRef;
+		$[6] = preventScroll;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== dependencies || $[10] !== preventScroll) {
+		t6 = [preventScroll, ...dependencies];
+		$[9] = dependencies;
+		$[10] = preventScroll;
+		$[11] = t6;
+	} else t6 = $[11];
+	useFocusZone(t5, t6);
 }
-
-// DOM utilities used for focus management
 function _temp(direction, from, event) {
-  var _getNextFocusableElem;
-  if (!(from instanceof HTMLElement)) {
-    return;
-  }
-  try {
-    if (from.closest("dialog:modal")) {
-      return;
-    }
-  } catch {}
-  return (_getNextFocusableElem = getNextFocusableElement(from, event)) !== null && _getNextFocusableElem !== void 0 ? _getNextFocusableElem : from;
+	var _getNextFocusableElem;
+	if (!(from instanceof HTMLElement)) return;
+	try {
+		if (from.closest("dialog:modal")) return;
+	} catch {}
+	return (_getNextFocusableElem = getNextFocusableElement(from, event)) !== null && _getNextFocusableElem !== void 0 ? _getNextFocusableElem : from;
 }
 function getNextFocusableElement(activeElement, event) {
-  const elementState = getElementState(activeElement);
-
-  // Reference: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboard-interaction-24
-  switch (`${elementState} ${event.key}`) {
-    case 'open ArrowRight':
-      // Focus first child node
-      return getFirstChildElement(activeElement);
-    case 'open ArrowLeft':
-      // Close node; don't change focus
-      return;
-    case 'closed ArrowRight':
-      // Open node; don't change focus
-      return;
-    case 'closed ArrowLeft':
-      // Focus parent element
-      return getParentElement(activeElement);
-    case 'end ArrowRight':
-      // Do nothing
-      return;
-    case 'end ArrowLeft':
-      // Focus parent element
-      return getParentElement(activeElement);
-  }
-
-  // ArrowUp, ArrowDown, Home, and End behavior are the same regardless of element state
-  switch (event.key) {
-    case 'ArrowUp':
-      // Focus previous visible element
-      return getVisibleElement(activeElement, 'previous');
-    case 'ArrowDown':
-      // Focus next visible element
-      return getVisibleElement(activeElement, 'next');
-    case 'Backspace':
-      return getParentElement(activeElement);
-    case 'Home':
-      // Focus first visible element
-      return getFirstElement(activeElement);
-    case 'End':
-      // Focus last visible element
-      return getLastElement(activeElement);
-    case 'PageUp':
-      return getPreviousPageElement(activeElement);
-    case 'PageDown':
-      return getNextPageElement(activeElement);
-  }
+	switch (`${getElementState(activeElement)} ${event.key}`) {
+		case "open ArrowRight": return getFirstChildElement(activeElement);
+		case "open ArrowLeft": return;
+		case "closed ArrowRight": return;
+		case "closed ArrowLeft": return getParentElement(activeElement);
+		case "end ArrowRight": return;
+		case "end ArrowLeft": return getParentElement(activeElement);
+	}
+	switch (event.key) {
+		case "ArrowUp": return getVisibleElement(activeElement, "previous");
+		case "ArrowDown": return getVisibleElement(activeElement, "next");
+		case "Backspace": return getParentElement(activeElement);
+		case "Home": return getFirstElement(activeElement);
+		case "End": return getLastElement(activeElement);
+		case "PageUp": return getPreviousPageElement(activeElement);
+		case "PageDown": return getNextPageElement(activeElement);
+	}
 }
 function getElementState(element) {
-  if (element.getAttribute('role') !== 'treeitem') {
-    throw new Error('Element is not a treeitem');
-  }
-  switch (element.getAttribute('aria-expanded')) {
-    case 'true':
-      return 'open';
-    case 'false':
-      return 'closed';
-    default:
-      return 'end';
-  }
+	if (element.getAttribute("role") !== "treeitem") throw new Error("Element is not a treeitem");
+	switch (element.getAttribute("aria-expanded")) {
+		case "true": return "open";
+		case "false": return "closed";
+		default: return "end";
+	}
 }
 function getVisibleElement(element, direction) {
-  const root = element.closest('[role=tree]');
-  if (!root) return;
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, node => {
-    if (!(node instanceof HTMLElement)) return NodeFilter.FILTER_SKIP;
-    return node.getAttribute('role') === 'treeitem' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-  });
-  let current = walker.firstChild();
-  while (current !== element) {
-    current = walker.nextNode();
-  }
-  let next = direction === 'next' ? walker.nextNode() : walker.previousNode();
-
-  // If next element is nested inside a collapsed subtree, continue iterating
-  while (next instanceof HTMLElement && (_next$parentElement = next.parentElement) !== null && _next$parentElement !== void 0 && _next$parentElement.closest('[role=treeitem][aria-expanded=false]')) {
-    var _next$parentElement;
-    next = direction === 'next' ? walker.nextNode() : walker.previousNode();
-  }
-  return next instanceof HTMLElement ? next : undefined;
+	const root = element.closest("[role=tree]");
+	if (!root) return;
+	const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, (node) => {
+		if (!(node instanceof HTMLElement)) return NodeFilter.FILTER_SKIP;
+		return node.getAttribute("role") === "treeitem" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+	});
+	let current = walker.firstChild();
+	while (current !== element) current = walker.nextNode();
+	let next = direction === "next" ? walker.nextNode() : walker.previousNode();
+	while (next instanceof HTMLElement && (_next$parentElement = next.parentElement) !== null && _next$parentElement !== void 0 && _next$parentElement.closest("[role=treeitem][aria-expanded=false]")) {
+		var _next$parentElement;
+		next = direction === "next" ? walker.nextNode() : walker.previousNode();
+	}
+	return next instanceof HTMLElement ? next : void 0;
 }
 function getFirstChildElement(element) {
-  const firstChild = element.querySelector('[role=treeitem]');
-  return firstChild instanceof HTMLElement ? firstChild : undefined;
+	const firstChild = element.querySelector("[role=treeitem]");
+	return firstChild instanceof HTMLElement ? firstChild : void 0;
 }
 function getParentElement(element) {
-  const group = element.closest('[role=group]');
-  const parent = group === null || group === void 0 ? void 0 : group.closest('[role=treeitem]');
-  return parent instanceof HTMLElement ? parent : undefined;
+	const group = element.closest("[role=group]");
+	const parent = group === null || group === void 0 ? void 0 : group.closest("[role=treeitem]");
+	return parent instanceof HTMLElement ? parent : void 0;
 }
 function getFirstElement(element) {
-  const root = element.closest('[role=tree]');
-  const first = root === null || root === void 0 ? void 0 : root.querySelector('[role=treeitem]');
-  return first instanceof HTMLElement ? first : undefined;
+	const root = element.closest("[role=tree]");
+	const first = root === null || root === void 0 ? void 0 : root.querySelector("[role=treeitem]");
+	return first instanceof HTMLElement ? first : void 0;
 }
 function getLastElement(element) {
-  const root = element.closest('[role=tree]');
-  if (!root) return;
-  const items = Array.from(root.querySelectorAll('[role=treeitem]'));
-
-  // If there are no items, return undefined
-  if (items.length === 0) return;
-  let index = items.length - 1;
-  let last = items[index];
-
-  // If last element is nested inside a collapsed subtree, continue iterating
-  while (index > 0 && last instanceof HTMLElement && (_last$parentElement = last.parentElement) !== null && _last$parentElement !== void 0 && _last$parentElement.closest('[role=treeitem][aria-expanded=false]')) {
-    var _last$parentElement;
-    index -= 1;
-    last = items[index];
-  }
-  return last instanceof HTMLElement ? last : undefined;
+	const root = element.closest("[role=tree]");
+	if (!root) return;
+	const items = Array.from(root.querySelectorAll("[role=treeitem]"));
+	if (items.length === 0) return;
+	let index = items.length - 1;
+	let last = items[index];
+	while (index > 0 && last instanceof HTMLElement && (_last$parentElement = last.parentElement) !== null && _last$parentElement !== void 0 && _last$parentElement.closest("[role=treeitem][aria-expanded=false]")) {
+		var _last$parentElement;
+		index -= 1;
+		last = items[index];
+	}
+	return last instanceof HTMLElement ? last : void 0;
 }
-const defaultSize = {
-  height: 32
-};
-
+const defaultSize = { height: 32 };
 /**
- * Determine the page size for the given tree based on an item in the tree. We
- * estimate this size by trying to see how many items will fit in the given
- * tree. If the tree is within a scroll container, we will use the height of
- * that container. Otherwise, we'll use the current window height
- */
+* Determine the page size for the given tree based on an item in the tree. We
+* estimate this size by trying to see how many items will fit in the given
+* tree. If the tree is within a scroll container, we will use the height of
+* that container. Otherwise, we'll use the current window height
+*/
 function getPageSize(root, item) {
-  var _item$getBoundingClie, _scrollContainer$clie;
-  const scrollContainer = getScrollContainer(root);
-  const {
-    height: itemHeight
-  } = (_item$getBoundingClie = item === null || item === void 0 ? void 0 : item.getBoundingClientRect()) !== null && _item$getBoundingClie !== void 0 ? _item$getBoundingClie : defaultSize;
-  const availableHeight = (_scrollContainer$clie = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight) !== null && _scrollContainer$clie !== void 0 ? _scrollContainer$clie : window.innerHeight;
-  return Math.floor(availableHeight / itemHeight);
+	var _item$getBoundingClie, _scrollContainer$clie;
+	const scrollContainer = getScrollContainer(root);
+	const { height: itemHeight } = (_item$getBoundingClie = item === null || item === void 0 ? void 0 : item.getBoundingClientRect()) !== null && _item$getBoundingClie !== void 0 ? _item$getBoundingClie : defaultSize;
+	const availableHeight = (_scrollContainer$clie = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight) !== null && _scrollContainer$clie !== void 0 ? _scrollContainer$clie : window.innerHeight;
+	return Math.floor(availableHeight / itemHeight);
 }
 function getNextPageElement(element) {
-  const root = element.closest('[role="tree"]');
-  if (!root) {
-    return;
-  }
-  const items = Array.from(root.querySelectorAll('[role="treeitem"]'));
-  if (items.length === 0) {
-    return;
-  }
-  const itemLabel = items[0].firstElementChild;
-  const pageSize = getPageSize(root, itemLabel);
-  const page = Math.floor(items.indexOf(element) / pageSize);
-  const offset = items.indexOf(element) - pageSize * page;
-  return items[Math.min(items.length - 1, (page + 1) * pageSize + offset)];
+	const root = element.closest("[role=\"tree\"]");
+	if (!root) return;
+	const items = Array.from(root.querySelectorAll("[role=\"treeitem\"]"));
+	if (items.length === 0) return;
+	const itemLabel = items[0].firstElementChild;
+	const pageSize = getPageSize(root, itemLabel);
+	const page = Math.floor(items.indexOf(element) / pageSize);
+	const offset = items.indexOf(element) - pageSize * page;
+	return items[Math.min(items.length - 1, (page + 1) * pageSize + offset)];
 }
 function getPreviousPageElement(element) {
-  const root = element.closest('[role="tree"]');
-  if (!root) {
-    return;
-  }
-  const items = Array.from(root.querySelectorAll('[role="treeitem"]'));
-  if (items.length === 0) {
-    return;
-  }
-  const itemLabel = items[0].firstElementChild;
-  const pageSize = getPageSize(root, itemLabel);
-  const page = Math.floor(items.indexOf(element) / pageSize);
-  const offset = items.indexOf(element) - pageSize * page;
-  return items[Math.max(0, (page - 1) * pageSize + offset)];
+	const root = element.closest("[role=\"tree\"]");
+	if (!root) return;
+	const items = Array.from(root.querySelectorAll("[role=\"treeitem\"]"));
+	if (items.length === 0) return;
+	const itemLabel = items[0].firstElementChild;
+	const pageSize = getPageSize(root, itemLabel);
+	const page = Math.floor(items.indexOf(element) / pageSize);
+	const offset = items.indexOf(element) - pageSize * page;
+	return items[Math.max(0, (page - 1) * pageSize + offset)];
 }
-
+//#endregion
 export { getElementState, getFirstChildElement, getFirstElement, getLastElement, getNextFocusableElement, getParentElement, getVisibleElement, useRovingTabIndex };

package/dist/TreeView/useTreeItemCache.js

@@ -1,85 +1,70 @@
-import { c } from 'react-compiler-runtime';
-import React from 'react';
-
+import { c } from "react-compiler-runtime";
+import React from "react";
+//#region src/TreeView/useTreeItemCache.ts
 /**
- * A hook that caches tree items to avoid expensive querySelectorAll calls on every keypress.
- * The cache is invalidated when the tree structure changes (via MutationObserver).
- *
- * PERFORMANCE: This is critical for INP because querySelectorAll('[role="treeitem"]')
- * on large trees can take 10-50ms, which directly blocks user input response.
- *
- * Note: useRovingTabIndex also uses querySelectorAll for Home/End/PageUp/PageDown navigation,
- * but those are infrequent single keypresses. Typeahead fires on every character typed,
- * making it the priority optimization target.
- */
+* A hook that caches tree items to avoid expensive querySelectorAll calls on every keypress.
+* The cache is invalidated when the tree structure changes (via MutationObserver).
+*
+* PERFORMANCE: This is critical for INP because querySelectorAll('[role="treeitem"]')
+* on large trees can take 10-50ms, which directly blocks user input response.
+*
+* Note: useRovingTabIndex also uses querySelectorAll for Home/End/PageUp/PageDown navigation,
+* but those are infrequent single keypresses. Typeahead fires on every character typed,
+* making it the priority optimization target.
+*/
 function useTreeItemCache(containerRef) {
-  const $ = c(7);
-  const cacheRef = React.useRef(null);
-  let t0;
-  let t1;
-  if ($[0] !== containerRef) {
-    t0 = () => {
-      const container = containerRef.current;
-      if (!container) {
-        return;
-      }
-      const observer = new MutationObserver(mutations => {
-        const hasStructuralChange = mutations.some(_temp);
-        if (hasStructuralChange) {
-          cacheRef.current = null;
-        }
-      });
-      observer.observe(container, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ["role"]
-      });
-      cacheRef.current = null;
-      return () => observer.disconnect();
-    };
-    t1 = [containerRef];
-    $[0] = containerRef;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  React.useEffect(t0, t1);
-  let t2;
-  if ($[3] !== containerRef) {
-    t2 = () => {
-      const container_0 = containerRef.current;
-      if (!container_0) {
-        return [];
-      }
-      if (cacheRef.current !== null) {
-        return cacheRef.current;
-      }
-      cacheRef.current = Array.from(container_0.querySelectorAll("[role=\"treeitem\"]"));
-      return cacheRef.current;
-    };
-    $[3] = containerRef;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  const getTreeItems = t2;
-  let t3;
-  if ($[5] !== getTreeItems) {
-    t3 = {
-      getTreeItems
-    };
-    $[5] = getTreeItems;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  return t3;
+	const $ = c(7);
+	const cacheRef = React.useRef(null);
+	let t0;
+	let t1;
+	if ($[0] !== containerRef) {
+		t0 = () => {
+			const container = containerRef.current;
+			if (!container) return;
+			const observer = new MutationObserver((mutations) => {
+				if (mutations.some(_temp)) cacheRef.current = null;
+			});
+			observer.observe(container, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: ["role"]
+			});
+			cacheRef.current = null;
+			return () => observer.disconnect();
+		};
+		t1 = [containerRef];
+		$[0] = containerRef;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	if ($[3] !== containerRef) {
+		t2 = () => {
+			const container_0 = containerRef.current;
+			if (!container_0) return [];
+			if (cacheRef.current !== null) return cacheRef.current;
+			cacheRef.current = Array.from(container_0.querySelectorAll("[role=\"treeitem\"]"));
+			return cacheRef.current;
+		};
+		$[3] = containerRef;
+		$[4] = t2;
+	} else t2 = $[4];
+	const getTreeItems = t2;
+	let t3;
+	if ($[5] !== getTreeItems) {
+		t3 = { getTreeItems };
+		$[5] = getTreeItems;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
 }
 function _temp(mutation) {
-  return mutation.type === "childList" || mutation.type === "attributes" && mutation.attributeName === "role";
+	return mutation.type === "childList" || mutation.type === "attributes" && mutation.attributeName === "role";
 }
-
+//#endregion
 export { useTreeItemCache };