@carbon/react 1.114.0 → 1.115.0

package/es/components/Loading/Loading.js

@@ -7,7 +7,9 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import "react";
+import { Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { useEffect, useRef } from "react";
 import cx from "classnames";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -18,8 +20,78 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
+const isModalDialog = (element) => {
+	if (element.matches("[aria-modal=\"true\"]")) return true;
+	if (!(element instanceof HTMLDialogElement) || !element.open) return false;
+	try {
+		return element.matches(":modal");
+	} catch {
+		return true;
+	}
+};
+const isLayeredOnTop = (target, overlay) => {
+	if (!(target instanceof Element)) return false;
+	for (let element = target; element; element = element.parentElement) if (isModalDialog(element)) return !element.contains(overlay);
+	return false;
+};
+const focusWithBorrowedTabIndex = (element) => {
+	const hadTabIndex = element.hasAttribute("tabindex");
+	if (!hadTabIndex) element.setAttribute("tabindex", "-1");
+	element.focus();
+	if (hadTabIndex) return;
+	if (document.activeElement === element) element.addEventListener("blur", () => element.removeAttribute("tabindex"), { once: true });
+	else element.removeAttribute("tabindex");
+};
+const restoreFocus = (overlay, previouslyFocused) => {
+	const activeElement = document.activeElement;
+	if (!(!activeElement || activeElement === document.body || overlay.contains(activeElement)) || !previouslyFocused?.isConnected) return;
+	previouslyFocused.focus();
+	if (document.activeElement === previouslyFocused) return;
+	const fallback = previouslyFocused.parentElement;
+	if (!fallback || fallback === document.body || fallback === document.documentElement) return;
+	focusWithBorrowedTabIndex(fallback);
+};
+const useFocusTrap = (overlayRef, active) => {
+	useEffect(() => {
+		const overlay = overlayRef.current;
+		if (!active || !overlay) return;
+		const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		if (!isLayeredOnTop(previouslyFocused, overlay)) overlay.focus();
+		let reclaiming = false;
+		const reclaimFocus = () => {
+			if (reclaiming) return;
+			reclaiming = true;
+			try {
+				overlay.focus();
+			} finally {
+				reclaiming = false;
+			}
+		};
+		const handleFocusIn = (event) => {
+			const { target } = event;
+			if (!(target instanceof Node) || overlay.contains(target)) return;
+			if (isLayeredOnTop(target, overlay)) return;
+			reclaimFocus();
+		};
+		const handleKeyDown = (event) => {
+			if (!match(event, Tab)) return;
+			if (isLayeredOnTop(event.target, overlay)) return;
+			event.preventDefault();
+			reclaimFocus();
+		};
+		document.addEventListener("focusin", handleFocusIn, true);
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => {
+			document.removeEventListener("focusin", handleFocusIn, true);
+			document.removeEventListener("keydown", handleKeyDown, true);
+			restoreFocus(overlay, previouslyFocused);
+		};
+	}, [overlayRef, active]);
+};
 function Loading({ active = true, className: customClassName, withOverlay = true, small = false, description = "loading", ...rest }) {
 	const prefix = usePrefix();
+	const overlayRef = useRef(null);
+	useFocusTrap(overlayRef, withOverlay && active);
 	const loadingClassName = cx(customClassName, {
 		[`${prefix}--loading`]: true,
 		[`${prefix}--loading--small`]: small,
@@ -58,7 +130,15 @@ function Loading({ active = true, className: customClassName, withOverlay = true
 	});
 	return withOverlay ? /* @__PURE__ */ jsx("div", {
 		className: overlayClassName,
-		children: loading
+		role: "presentation",
+		children: /* @__PURE__ */ jsx("div", {
+			ref: overlayRef,
+			role: active ? "dialog" : void 0,
+			"aria-modal": active ? "true" : void 0,
+			"aria-label": active ? description : void 0,
+			tabIndex: active ? -1 : void 0,
+			children: loading
+		})
 	}) : loading;
 }
 Loading.propTypes = {

package/es/components/Menu/Menu.js

@@ -6,10 +6,10 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { ArrowDown, ArrowLeft, ArrowUp, Escape, Tab } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { ArrowDown, ArrowLeft, ArrowUp, Escape, Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { MenuContext, menuReducer } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { canUseDOM } from "../../internal/environment.js";

package/es/components/Menu/MenuItem.js

@@ -7,11 +7,11 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { ArrowRight as ArrowRight$1, Enter, Space } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { ArrowRight as ArrowRight$1, Enter, Space } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { MenuContext } from "./MenuContext.js";
 import { useLayoutDirection } from "../LayoutDirection/useLayoutDirection.js";
 import { Menu as Menu$1 } from "./Menu.js";

package/es/components/Modal/Modal.js

@@ -9,13 +9,13 @@ import { noopFn } from "../../internal/noopFn.js";
 import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
-import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { Enter, Escape, Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { IconButton } from "../IconButton/index.js";
 import Button_default from "../Button/index.js";

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -6,14 +6,14 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Delete, End, Enter, Escape, Home, Space, Tab } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { Delete, End, Enter, Escape, Home, Space, Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { hasHelperText } from "../../internal/hasHelperText.js";

package/es/components/MultiSelect/MultiSelect.js

@@ -7,14 +7,14 @@
 
 import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
-import { ArrowDown, Delete, Enter, Escape, Space, Tab } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { defaultItemToString } from "../../internal/defaultItemToString.js";
 import { isItemDisabled } from "../../internal/isItemDisabled.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { ArrowDown, Delete, Enter, Escape, Space, Tab } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { AILabel } from "../AILabel/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";

package/es/components/Notification/Notification.js

@@ -9,12 +9,12 @@ import { noopFn } from "../../internal/noopFn.js";
 import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { Escape, Tab } from "../../internal/keyboard/keys.js";
-import { match, matches } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
+import { Escape, Tab } from "../../internal/keyboard/keys.js";
+import { match, matches } from "../../internal/keyboard/match.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useInteractiveChildrenNeedDescription, useNoInteractiveChildren } from "../../internal/useNoInteractiveChildren.js";
 import Button_default from "../Button/index.js";

package/es/components/NumberInput/NumberInput.js

@@ -7,11 +7,11 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { ArrowDown, ArrowUp as ArrowUp$1 } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { ArrowDown, ArrowUp as ArrowUp$1 } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { AILabel } from "../AILabel/index.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";

package/es/components/OverflowMenu/OverflowMenu.js

@@ -7,11 +7,11 @@
 
 import { noopFn } from "../../internal/noopFn.js";
 import { PrefixContext } from "../../internal/usePrefix.js";
-import { ArrowDown, ArrowLeft, ArrowRight as ArrowRight$1, ArrowUp as ArrowUp$1, Escape, Tab } from "../../internal/keyboard/keys.js";
-import { matches } from "../../internal/keyboard/match.js";
 import { setupGetInstanceId } from "../../tools/setupGetInstanceId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
+import { ArrowDown, ArrowLeft, ArrowRight as ArrowRight$1, ArrowUp as ArrowUp$1, Escape, Tab } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { IconButton } from "../IconButton/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -8,9 +8,9 @@
 import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
+import { useId } from "../../internal/useId.js";
 import { ArrowDown, ArrowUp } from "../../internal/keyboard/keys.js";
 import { match } from "../../internal/keyboard/match.js";
-import { useId } from "../../internal/useId.js";
 import { forwardRef } from "react";
 import cx from "classnames";
 import PropTypes from "prop-types";

package/es/components/Pagination/Pagination.d.ts

@@ -108,7 +108,7 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /**
      * The choices for `pageSize`.
      */
-    pageSizes: number[] | PaginationPageSize[];
+    pageSizes?: Array<number | PaginationPageSize>;
     /**
      * The translatable text showing the current page.
      */

package/es/components/Pagination/Pagination.js

@@ -25,14 +25,11 @@ import isEqual from "react-fast-compare";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const isPaginationPageSizeArray = (sizes) => typeof sizes[0] === "object" && sizes[0] !== null;
-const mapPageSizesToObject = (sizes) => {
-	if (isPaginationPageSizeArray(sizes)) return sizes;
-	return sizes.map((size) => ({
-		text: String(size),
-		value: size
-	}));
-};
+const mapPageSizesToObject = (sizes) => sizes && sizes.length ? sizes.map((size) => typeof size === "object" ? size : {
+	text: String(size),
+	value: size
+}) : void 0;
+const DEFAULT_PAGE_SIZE = 10;
 function renderSelectItems(total) {
 	let counter = 1;
 	const itemArr = [];
@@ -46,12 +43,11 @@ function renderSelectItems(total) {
 	return itemArr;
 }
 const getPageSize = (pageSizes, pageSize) => {
-	if (typeof pageSize !== "undefined") {
-		if (pageSizes.find((size) => {
-			return pageSize === size.value;
-		})) return pageSize;
+	if (!pageSizes) {
+		const resolved = pageSize ?? DEFAULT_PAGE_SIZE;
+		return resolved > 0 ? resolved : DEFAULT_PAGE_SIZE;
 	}
-	return pageSizes[0].value;
+	return typeof pageSize !== "undefined" && pageSizes.some((size) => pageSize === size.value) ? pageSize : pageSizes[0].value;
 };
 const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardTextTooltipPosition = "top", className: customClassName = "", disabled = false, forwardText = "Next page", forwardTextTooltipPosition = "top", id, isLastPage = false, itemText = (min, max) => `${min}–${max} items`, itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`, itemsPerPageText = "Items per page:", onChange, pageNumberText: _pageNumberText, pageRangeText = (_current, total) => `of ${total} ${total === 1 ? "page" : "pages"}`, pageSelectLabelText = (total) => `Page of ${total} ${total === 1 ? "page" : "pages"}`, page: controlledPage = 1, pageInputDisabled, renderPageSelect, pageSize: controlledPageSize, pageSizeInputDisabled, pageSizes: controlledPageSizes, pageText = (page) => `page ${page}`, pagesUnknown = false, size = "md", totalItems, ...rest }, ref) => {
 	const prefix = usePrefix();
@@ -88,6 +84,13 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 		[`${prefix}--pagination__button--no-index`]: forwardButtonDisabled
 	});
 	const selectItems = renderPageSelect ? [] : renderSelectItems(totalPages);
+	const pageSelectNode = pagesUnknown ? null : renderPageSelect?.({
+		currentPage: page,
+		totalPages,
+		currentPageSize: pageSize,
+		pageSelectLabelText: pageSelectLabelText(totalPages),
+		onSetPage: handleSetPage
+	}) ?? null;
 	const focusMap = {
 		backward: backBtnRef,
 		forward: forwardBtnRef
@@ -116,7 +119,13 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 		setPage(controlledPage);
 	}, [controlledPage]);
 	useEffect(() => {
-		if (typeof prevControlledPageSizes === "undefined" || isEqual(prevControlledPageSizes, normalizedControlledPageSizes)) return;
+		if (isEqual(prevControlledPageSizes, normalizedControlledPageSizes)) return;
+		if (!normalizedControlledPageSizes) {
+			const nextPageSize = getPageSize(void 0, controlledPageSize);
+			setPageSizes(void 0);
+			setPageSize(nextPageSize);
+			return;
+		}
 		setPageSizes((prev) => isEqual(normalizedControlledPageSizes, prev) ? prev : normalizedControlledPageSizes);
 		const nextPageSize = getPageSize(normalizedControlledPageSizes, controlledPageSize ?? pageSize);
 		const hasPageSize = normalizedControlledPageSizes.some((size) => {
@@ -204,46 +213,36 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 		ref,
 		...rest,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: `${prefix}--pagination__left`,
-			children: [
-				/* @__PURE__ */ jsx("label", {
-					id: `${prefix}-pagination-select-${inputId}-count-label`,
-					className: `${prefix}--pagination__text`,
-					htmlFor: `${prefix}-pagination-select-${inputId}`,
-					children: itemsPerPageText
-				}),
-				/* @__PURE__ */ jsx(Select_default, {
-					id: `${prefix}-pagination-select-${inputId}`,
-					className: `${prefix}--select__item-count`,
-					labelText: "",
-					hideLabel: true,
-					noLabel: true,
-					inline: true,
-					onChange: handleSizeChange,
-					disabled: pageSizeInputDisabled || disabled,
-					value: pageSize,
-					children: pageSizes.map((sizeObj) => /* @__PURE__ */ jsx(SelectItem_default, {
-						value: sizeObj.value,
-						text: String(sizeObj.text)
-					}, sizeObj.value))
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: `${prefix}--pagination__text ${prefix}--pagination__items-count`,
-					children: pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)
-				})
-			]
+			className: cx(`${prefix}--pagination__left`, { [`${prefix}--pagination__left--no-sizer`]: !pageSizes }),
+			children: [pageSizes && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+				id: `${prefix}-pagination-select-${inputId}-count-label`,
+				className: `${prefix}--pagination__text`,
+				htmlFor: `${prefix}-pagination-select-${inputId}`,
+				children: itemsPerPageText
+			}), /* @__PURE__ */ jsx(Select_default, {
+				id: `${prefix}-pagination-select-${inputId}`,
+				className: `${prefix}--select__item-count`,
+				labelText: "",
+				hideLabel: true,
+				noLabel: true,
+				inline: true,
+				onChange: handleSizeChange,
+				disabled: pageSizeInputDisabled || disabled,
+				value: pageSize,
+				children: pageSizes.map((sizeObj) => /* @__PURE__ */ jsx(SelectItem_default, {
+					value: sizeObj.value,
+					text: String(sizeObj.text)
+				}, sizeObj.value))
+			})] }), /* @__PURE__ */ jsx("span", {
+				className: `${prefix}--pagination__text ${prefix}--pagination__items-count`,
+				children: pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)
+			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: `${prefix}--pagination__right`,
+			className: cx(`${prefix}--pagination__right`, { [`${prefix}--pagination__right--no-content`]: !pagesUnknown && !!renderPageSelect }),
 			children: [pagesUnknown ? /* @__PURE__ */ jsx("span", {
 				className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`,
 				children: pageText(page)
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [renderPageSelect ? renderPageSelect({
-				currentPage: page,
-				totalPages,
-				currentPageSize: pageSize,
-				pageSelectLabelText: pageSelectLabelText(totalPages),
-				onSetPage: handleSetPage
-			}) : /* @__PURE__ */ jsx(Select_default, {
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [renderPageSelect ? pageSelectNode : /* @__PURE__ */ jsx(Select_default, {
 				id: `${prefix}-pagination-select-${inputId}-right`,
 				className: `${prefix}--select__page-number`,
 				labelText: pageSelectLabelText(totalPages),
@@ -255,7 +254,7 @@ const Pagination = React.forwardRef(({ backwardText = "Previous page", backwardT
 				children: selectItems
 			}, page), /* @__PURE__ */ jsx("span", {
 				className: `${prefix}--pagination__text`,
-				children: pageRangeText(page, totalPages)
+				children: pageSelectNode == null && renderPageSelect ? `${page} ${pageRangeText(page, totalPages)}` : pageRangeText(page, totalPages)
 			})] }), /* @__PURE__ */ jsxs("div", {
 				className: `${prefix}--pagination__control-buttons`,
 				children: [/* @__PURE__ */ jsx(IconButton, {
@@ -376,10 +375,10 @@ Pagination.propTypes = {
 	/**
 	* The choices for `pageSize`.
 	*/
-	pageSizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.arrayOf(PropTypes.shape({
+	pageSizes: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
 		text: PropTypes.string.isRequired,
 		value: PropTypes.number.isRequired
-	}).isRequired)]).isRequired,
+	})])),
 	/**
 	* The translatable text showing the current page.
 	*/

package/es/components/Popover/index.js

@@ -6,12 +6,12 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { useEvent, useWindowEvent } from "../../internal/useEvent.js";
+import { selectorTabbable } from "../../internal/keyboard/navigation.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import React, { forwardRef, useEffect, useMemo, useRef } from "react";

package/es/components/RadioTile/RadioTile.js

@@ -8,11 +8,11 @@
 import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { Enter, Space } from "../../internal/keyboard/keys.js";
-import { matches } from "../../internal/keyboard/match.js";
 import { useFallbackId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
+import { Enter, Space } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { AILabel } from "../AILabel/index.js";
 import React, { cloneElement } from "react";

package/es/components/Search/Search.js

@@ -7,11 +7,11 @@
 
 import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { FormContext } from "../FluidForm/FormContext.js";

package/es/components/Slider/Slider.js

@@ -7,10 +7,10 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { ArrowDown, ArrowLeft, ArrowRight as ArrowRight$1, ArrowUp as ArrowUp$1, Enter } from "../../internal/keyboard/keys.js";
-import { matches } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { ArrowDown, ArrowLeft, ArrowRight as ArrowRight$1, ArrowUp as ArrowUp$1, Enter } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { clamp } from "../../internal/clamp.js";

package/es/components/Tabs/Tabs.js

@@ -7,14 +7,14 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { ArrowDown, ArrowLeft, ArrowRight as ArrowRight$1, ArrowUp as ArrowUp$1, Delete, End, Home } from "../../internal/keyboard/keys.js";
-import { match, matches } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
 import { useEvent } from "../../internal/useEvent.js";
+import { ArrowDown, ArrowLeft, ArrowRight as ArrowRight$1, ArrowUp as ArrowUp$1, Delete, End, Home } from "../../internal/keyboard/keys.js";
+import { match, matches } from "../../internal/keyboard/match.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { BadgeIndicator } from "../BadgeIndicator/index.js";
 import { useControllableState } from "../../internal/useControllableState.js";
@@ -193,6 +193,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 	const ref = useRef(null);
 	const previousButton = useRef(null);
 	const nextButton = useRef(null);
+	const resizeAnimationFrame = useRef(null);
 	const [isScrollable, setIsScrollable] = useState(false);
 	const [scrollLeft, setScrollLeft] = useState(0);
 	const hasSecondaryLabelTabs = contained && Children.toArray(children).some((child) => isComponentElement(child, Tab) && typeof child.props.secondaryLabel !== "undefined");
@@ -298,9 +299,19 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		const element = containerRef.current;
 		if (!element) return;
 		updateOverflowState();
-		const resizeObserver = new ResizeObserver(updateOverflowState);
+		const resizeObserver = new ResizeObserver(() => {
+			if (resizeAnimationFrame.current !== null) cancelAnimationFrame(resizeAnimationFrame.current);
+			resizeAnimationFrame.current = requestAnimationFrame(() => {
+				resizeAnimationFrame.current = null;
+				updateOverflowState();
+			});
+		});
 		resizeObserver.observe(element);
 		return () => {
+			if (resizeAnimationFrame.current !== null) {
+				cancelAnimationFrame(resizeAnimationFrame.current);
+				resizeAnimationFrame.current = null;
+			}
 			resizeObserver.disconnect();
 		};
 	}, [updateOverflowState]);
@@ -861,7 +872,7 @@ const IconTab = React.forwardRef(({ badgeIndicator, children, className: customC
 			className: `${prefix}--icon-tooltip`,
 			enterDelayMs,
 			label,
-			leaveDelayMs,
+			leaveDelayMs: leaveDelayMs ?? 0,
 			children: /* @__PURE__ */ jsx(Tab, {
 				className: classNames,
 				ref,

package/es/components/Tile/Tile.js

@@ -7,14 +7,14 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
-import { Enter, Space } from "../../internal/keyboard/keys.js";
-import { matches } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import Link_default from "../Link/index.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { Enter, Space } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { getInteractiveContent, getRoleContent } from "../../internal/useNoInteractiveChildren.js";
 import { AILabel } from "../AILabel/index.js";
@@ -197,7 +197,7 @@ ClickableTile.propTypes = {
 	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-const SelectableTile = React.forwardRef(({ children, className, decorator, disabled, id, light, onClick = () => {}, onChange = () => {}, onKeyDown = () => {}, selected = false, tabIndex = 0, title = "title", slug, hasRoundedCorners, ...rest }, ref) => {
+const SelectableTile = React.forwardRef(({ children, className, decorator, disabled, id, light, onClick = () => {}, onChange = () => {}, onKeyDown = () => {}, selected = false, tabIndex = 0, title, slug, hasRoundedCorners, ...rest }, ref) => {
 	const prefix = usePrefix();
 	const clickHandler = onClick;
 	const keyDownHandler = onKeyDown;

package/es/components/Toggletip/index.js

@@ -6,10 +6,10 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Escape } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { useWindowEvent } from "../../internal/useEvent.js";
+import { Escape } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
 import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
 import cx from "classnames";

package/es/components/Tooltip/DefinitionTooltip.js

@@ -6,10 +6,10 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import { useFallbackId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
 import { useState } from "react";
 import cx from "classnames";

package/es/components/Tooltip/Tooltip.js

@@ -6,10 +6,10 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
-import { match } from "../../internal/keyboard/match.js";
 import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
 import { useId } from "../../internal/useId.js";
+import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
 import { useDelayedState } from "../../internal/useDelayedState.js";
 import { useNoInteractiveChildren } from "../../internal/useNoInteractiveChildren.js";

package/es/components/TreeView/TreeNode.js

@@ -6,10 +6,10 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import { ArrowLeft, ArrowRight as ArrowRight$1, Enter, Space } from "../../internal/keyboard/keys.js";
-import { match, matches } from "../../internal/keyboard/match.js";
 import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
+import { ArrowLeft, ArrowRight as ArrowRight$1, Enter, Space } from "../../internal/keyboard/keys.js";
+import { match, matches } from "../../internal/keyboard/match.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { IconButton } from "../IconButton/index.js";
 import { useControllableState } from "../../internal/useControllableState.js";

package/es/components/TreeView/TreeView.js

@@ -6,9 +6,9 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { useId } from "../../internal/useId.js";
 import { ArrowDown, ArrowUp, End, Home } from "../../internal/keyboard/keys.js";
 import { match, matches } from "../../internal/keyboard/match.js";
-import { useId } from "../../internal/useId.js";
 import { useFeatureFlag } from "../FeatureFlags/index.js";
 import { useControllableState } from "../../internal/useControllableState.js";
 import { DepthContext, TreeContext } from "./TreeContext.js";