@cube-dev/ui-kit 0.187.2 → 0.188.0

package/dist/components/navigation/Tabs/TabButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.187.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.188.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
@@ -100,6 +100,35 @@ function disableTooltip(tooltip) {
 	return tooltip;
 }
 /**
+* Scroll the tab strip, and only the strip, so the tab is fully inside it.
+* Unlike `scrollIntoView` this never scrolls the page: it runs in response to a
+* layout change rather than to the user, so it must not move anything else.
+*/
+function scrollTabIntoStrip(tab, placement) {
+	const strip = tab.closest("[data-element=\"Scroll\"]");
+	if (!strip) return;
+	const isVertical = placement === "left" || placement === "right";
+	const stripRect = strip.getBoundingClientRect();
+	const tabRect = tab.getBoundingClientRect();
+	const start = isVertical ? tabRect.top - stripRect.top : tabRect.left - stripRect.left;
+	const end = isVertical ? tabRect.bottom - stripRect.bottom : tabRect.right - stripRect.right;
+	const delta = start < 0 ? start : end > 0 ? Math.min(end, start) : 0;
+	if (!delta) return;
+	if (isVertical) strip.scrollTop += delta;
+	else strip.scrollLeft += delta;
+}
+/**
+* Events on the tab bar that mean the user has taken over the strip's scroll
+* position. Listened for on the whole `Bar`, not just the `Scroll` element: the
+* custom scrollbar and the scroll arrows sit outside it.
+*/
+const STRIP_INTERACTION_EVENTS = [
+	"wheel",
+	"pointerdown",
+	"touchstart",
+	"keydown"
+];
+/**
 * Individual tab button component.
 *
 * Uses TabsContext to access shared props, dramatically reducing prop drilling.
@@ -111,98 +140,107 @@ function disableTooltip(tooltip) {
 * - Focus and hover states
 */
 function TabButton(t0) {
-	const $ = c(195);
-	const { item, tabData, isLastTab } = t0;
+	const $ = c(200);
+	const { item, tabData, isLastTab, hasPanel: t1 } = t0;
+	const hasPanel = t1 === void 0 ? true : t1;
 	const { t } = useI18n();
-	let t1;
+	let t2;
 	if ($[0] !== t) {
-		t1 = t("tabs.editTabTitle", "Edit tab title");
+		t2 = t("tabs.editTabTitle", "Edit tab title");
 		$[0] = t;
-		$[1] = t1;
-	} else t1 = $[1];
-	const editTabTitleLabel = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const editTabTitleLabel = t2;
 	const { state, type, size, placement, autoHideActions: parentAutoHideActions, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, onDelete, dragState, dropState, editingKey, startEditing, submitEditing, cancelEditing } = useTabsContext();
 	const ref = useRef(null);
 	const containerRef = useRef(null);
 	const inlineInputRef = useRef(null);
-	let t2;
+	let t3;
 	if ($[2] !== item.key) {
-		t2 = { key: item.key };
+		t3 = { key: item.key };
 		$[2] = item.key;
-		$[3] = t2;
-	} else t2 = $[3];
-	const { tabProps } = useTab(t2, state, ref);
+		$[3] = t3;
+	} else t3 = $[3];
+	const { tabProps: ariaTabProps } = useTab(t3, state, ref);
+	let tabPropsWithoutControls;
+	if ($[4] !== ariaTabProps) {
+		const { "aria-controls": _ariaControls, ...t4 } = ariaTabProps;
+		tabPropsWithoutControls = t4;
+		$[4] = ariaTabProps;
+		$[5] = tabPropsWithoutControls;
+	} else tabPropsWithoutControls = $[5];
+	const tabProps = hasPanel ? ariaTabProps : tabPropsWithoutControls;
 	const isDraggable = !!dragState && !!dropState;
-	let t3;
-	if ($[4] !== state.collection || $[5] !== state.selectionManager) {
-		t3 = createMockDragState(state.collection, state.selectionManager);
-		$[4] = state.collection;
-		$[5] = state.selectionManager;
-		$[6] = t3;
-	} else t3 = $[6];
-	const mockDragState = t3;
 	let t4;
-	if ($[7] !== item.key) {
-		t4 = { key: item.key };
-		$[7] = item.key;
+	if ($[6] !== state.collection || $[7] !== state.selectionManager) {
+		t4 = createMockDragState(state.collection, state.selectionManager);
+		$[6] = state.collection;
+		$[7] = state.selectionManager;
 		$[8] = t4;
 	} else t4 = $[8];
-	const dragResult = useDraggableItem(t4, dragState ?? mockDragState);
+	const mockDragState = t4;
 	let t5;
-	if ($[9] !== dragResult || $[10] !== isDraggable) {
-		t5 = isDraggable ? dragResult.dragProps : {};
-		$[9] = dragResult;
-		$[10] = isDraggable;
-		$[11] = t5;
-	} else t5 = $[11];
-	const effectiveDragProps = t5;
+	if ($[9] !== item.key) {
+		t5 = { key: item.key };
+		$[9] = item.key;
+		$[10] = t5;
+	} else t5 = $[10];
+	const dragResult = useDraggableItem(t5, dragState ?? mockDragState);
+	let t6;
+	if ($[11] !== dragResult || $[12] !== isDraggable) {
+		t6 = isDraggable ? dragResult.dragProps : {};
+		$[11] = dragResult;
+		$[12] = isDraggable;
+		$[13] = t6;
+	} else t6 = $[13];
+	const effectiveDragProps = t6;
 	const isDragging = isDraggable && dragResult.isDragging;
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
-	let t6;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = {};
-		$[12] = t6;
-	} else t6 = $[12];
-	const { hoverProps, isHovered } = useHover(t6);
-	const [isFocused, setIsFocused] = useState(false);
 	let t7;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = { onFocusChange: setIsFocused };
-		$[13] = t7;
-	} else t7 = $[13];
-	const { focusProps } = useFocus(t7);
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {};
+		$[14] = t7;
+	} else t7 = $[14];
+	const { hoverProps, isHovered } = useHover(t7);
+	const [isFocused, setIsFocused] = useState(false);
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = { onFocusChange: setIsFocused };
+		$[15] = t8;
+	} else t8 = $[15];
+	const { focusProps } = useFocus(t8);
 	const { isFocusVisible } = useFocusVisible();
 	const [suppressFocusVisible, setSuppressFocusVisible] = useState(false);
 	const effectiveFocusVisible = isFocusVisible && !suppressFocusVisible;
 	const isActive = state.selectedKey === item.key;
-	let t8;
-	if ($[14] !== item.key || $[15] !== state.disabledKeys) {
-		t8 = state.disabledKeys.has(item.key);
-		$[14] = item.key;
-		$[15] = state.disabledKeys;
-		$[16] = t8;
-	} else t8 = $[16];
-	const isDisabled = t8;
+	let t9;
+	if ($[16] !== item.key || $[17] !== state.disabledKeys) {
+		t9 = state.disabledKeys.has(item.key);
+		$[16] = item.key;
+		$[17] = state.disabledKeys;
+		$[18] = t9;
+	} else t9 = $[18];
+	const isDisabled = t9;
 	const isDeletable = !!onDelete;
 	const isEditing = editingKey === item.key;
 	const isBoardDragActive = useBoardDragActive();
 	const [isDropPending, setIsDropPending] = useState(false);
 	const springLoadTimerRef = useRef(null);
-	let t9;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = () => {
+	let t10;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = () => {
 			if (springLoadTimerRef.current != null) {
 				clearTimeout(springLoadTimerRef.current);
 				springLoadTimerRef.current = null;
 			}
 			setIsDropPending(false);
 		};
-		$[17] = t9;
-	} else t9 = $[17];
-	const clearSpringLoad = useEvent(t9);
-	let t10;
-	if ($[18] !== isActive || $[19] !== isBoardDragActive || $[20] !== isDisabled || $[21] !== item.key || $[22] !== state) {
-		t10 = () => {
+		$[19] = t10;
+	} else t10 = $[19];
+	const clearSpringLoad = useEvent(t10);
+	let t11;
+	if ($[20] !== isActive || $[21] !== isBoardDragActive || $[22] !== isDisabled || $[23] !== item.key || $[24] !== state) {
+		t11 = () => {
 			if (!isBoardDragActive || isActive || isDisabled) return;
 			if (springLoadTimerRef.current != null) return;
 			setIsDropPending(true);
@@ -212,140 +250,140 @@ function TabButton(t0) {
 				state.setSelectedKey(item.key);
 			}, SPRING_LOAD_DELAY);
 		};
-		$[18] = isActive;
-		$[19] = isBoardDragActive;
-		$[20] = isDisabled;
-		$[21] = item.key;
-		$[22] = state;
-		$[23] = t10;
-	} else t10 = $[23];
-	const handleSpringLoadEnter = useEvent(t10);
-	let t11;
+		$[20] = isActive;
+		$[21] = isBoardDragActive;
+		$[22] = isDisabled;
+		$[23] = item.key;
+		$[24] = state;
+		$[25] = t11;
+	} else t11 = $[25];
+	const handleSpringLoadEnter = useEvent(t11);
 	let t12;
-	if ($[24] !== clearSpringLoad || $[25] !== isBoardDragActive) {
-		t11 = () => {
+	let t13;
+	if ($[26] !== clearSpringLoad || $[27] !== isBoardDragActive) {
+		t12 = () => {
 			if (!isBoardDragActive) clearSpringLoad();
 			return clearSpringLoad;
 		};
-		t12 = [isBoardDragActive, clearSpringLoad];
-		$[24] = clearSpringLoad;
-		$[25] = isBoardDragActive;
-		$[26] = t11;
-		$[27] = t12;
+		t13 = [isBoardDragActive, clearSpringLoad];
+		$[26] = clearSpringLoad;
+		$[27] = isBoardDragActive;
+		$[28] = t12;
+		$[29] = t13;
 	} else {
-		t11 = $[26];
-		t12 = $[27];
+		t12 = $[28];
+		t13 = $[29];
 	}
-	useEffect(t11, t12);
+	useEffect(t12, t13);
 	const effectiveIsEditable = (tabData.isEditable ?? parentIsEditable ?? false) && tabData.title != null;
 	const effectiveMenu = tabData.menu === null ? null : tabData.menu ?? parentMenu;
-	let t13;
-	if ($[28] !== parentMenuTriggerProps || $[29] !== tabData.menuTriggerProps) {
-		t13 = {
+	let t14;
+	if ($[30] !== parentMenuTriggerProps || $[31] !== tabData.menuTriggerProps) {
+		t14 = {
 			...parentMenuTriggerProps,
 			...tabData.menuTriggerProps
 		};
-		$[28] = parentMenuTriggerProps;
-		$[29] = tabData.menuTriggerProps;
-		$[30] = t13;
-	} else t13 = $[30];
-	const effectiveMenuTriggerProps = t13;
-	let t14;
-	if ($[31] !== parentMenuProps || $[32] !== tabData.menuProps) {
-		t14 = {
+		$[30] = parentMenuTriggerProps;
+		$[31] = tabData.menuTriggerProps;
+		$[32] = t14;
+	} else t14 = $[32];
+	const effectiveMenuTriggerProps = t14;
+	let t15;
+	if ($[33] !== parentMenuProps || $[34] !== tabData.menuProps) {
+		t15 = {
 			...parentMenuProps,
 			...tabData.menuProps
 		};
-		$[31] = parentMenuProps;
-		$[32] = tabData.menuProps;
-		$[33] = t14;
-	} else t14 = $[33];
-	const effectiveMenuProps = t14;
+		$[33] = parentMenuProps;
+		$[34] = tabData.menuProps;
+		$[35] = t15;
+	} else t15 = $[35];
+	const effectiveMenuProps = t15;
 	const effectiveContextMenu = tabData.contextMenu ?? parentContextMenu ?? false;
 	const effectiveType = type ?? "default";
 	const contextMenuEnabled = effectiveContextMenu === true || effectiveContextMenu === "context-only";
 	const contextMenuOnly = effectiveContextMenu === "context-only";
-	let t15;
-	if ($[34] !== contextMenuOnly || $[35] !== effectiveMenu || $[36] !== isDeletable) {
-		t15 = isDeletable && (isMenuEmpty(effectiveMenu) || contextMenuOnly);
-		$[34] = contextMenuOnly;
-		$[35] = effectiveMenu;
-		$[36] = isDeletable;
-		$[37] = t15;
-	} else t15 = $[37];
-	const showDeleteButton = t15;
 	let t16;
-	if ($[38] !== effectiveIsEditable || $[39] !== effectiveMenu || $[40] !== isDeletable) {
-		t16 = effectiveMenu && !isMenuEmpty(effectiveMenu) ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable) : null;
-		$[38] = effectiveIsEditable;
-		$[39] = effectiveMenu;
-		$[40] = isDeletable;
-		$[41] = t16;
-	} else t16 = $[41];
-	const processedMenu = t16;
-	const itemKeyStr = String(item.key);
+	if ($[36] !== contextMenuOnly || $[37] !== effectiveMenu || $[38] !== isDeletable) {
+		t16 = isDeletable && (isMenuEmpty(effectiveMenu) || contextMenuOnly);
+		$[36] = contextMenuOnly;
+		$[37] = effectiveMenu;
+		$[38] = isDeletable;
+		$[39] = t16;
+	} else t16 = $[39];
+	const showDeleteButton = t16;
 	let t17;
-	if ($[42] !== itemKeyStr || $[43] !== onDelete) {
-		t17 = () => {
+	if ($[40] !== effectiveIsEditable || $[41] !== effectiveMenu || $[42] !== isDeletable) {
+		t17 = effectiveMenu && !isMenuEmpty(effectiveMenu) ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable) : null;
+		$[40] = effectiveIsEditable;
+		$[41] = effectiveMenu;
+		$[42] = isDeletable;
+		$[43] = t17;
+	} else t17 = $[43];
+	const processedMenu = t17;
+	const itemKeyStr = String(item.key);
+	let t18;
+	if ($[44] !== itemKeyStr || $[45] !== onDelete) {
+		t18 = () => {
 			onDelete?.(itemKeyStr);
 		};
-		$[42] = itemKeyStr;
-		$[43] = onDelete;
-		$[44] = t17;
-	} else t17 = $[44];
-	const handleDelete = useEvent(t17);
+		$[44] = itemKeyStr;
+		$[45] = onDelete;
+		$[46] = t18;
+	} else t18 = $[46];
+	const handleDelete = useEvent(t18);
 	const titleString = typeof tabData.title === "string" ? tabData.title : itemKeyStr;
-	let t18;
-	if ($[45] !== effectiveIsEditable || $[46] !== isDisabled || $[47] !== itemKeyStr || $[48] !== startEditing || $[49] !== titleString) {
-		t18 = () => {
+	let t19;
+	if ($[47] !== effectiveIsEditable || $[48] !== isDisabled || $[49] !== itemKeyStr || $[50] !== startEditing || $[51] !== titleString) {
+		t19 = () => {
 			if (!effectiveIsEditable || isDisabled) return;
 			startEditing(itemKeyStr, titleString);
 		};
-		$[45] = effectiveIsEditable;
-		$[46] = isDisabled;
-		$[47] = itemKeyStr;
-		$[48] = startEditing;
-		$[49] = titleString;
-		$[50] = t18;
-	} else t18 = $[50];
-	const handleStartEditing = useEvent(t18);
-	let t19;
-	if ($[51] !== itemKeyStr || $[52] !== submitEditing || $[53] !== tabData.onTitleChange) {
-		t19 = (newTitle) => {
+		$[47] = effectiveIsEditable;
+		$[48] = isDisabled;
+		$[49] = itemKeyStr;
+		$[50] = startEditing;
+		$[51] = titleString;
+		$[52] = t19;
+	} else t19 = $[52];
+	const handleStartEditing = useEvent(t19);
+	let t20;
+	if ($[53] !== itemKeyStr || $[54] !== submitEditing || $[55] !== tabData.onTitleChange) {
+		t20 = (newTitle) => {
 			submitEditing(itemKeyStr, newTitle, tabData.onTitleChange);
 			setSuppressFocusVisible(true);
 			ref.current?.focus();
 		};
-		$[51] = itemKeyStr;
-		$[52] = submitEditing;
-		$[53] = tabData.onTitleChange;
-		$[54] = t19;
-	} else t19 = $[54];
-	const handleSubmitEditing = useEvent(t19);
-	let t20;
-	if ($[55] !== cancelEditing) {
-		t20 = () => {
+		$[53] = itemKeyStr;
+		$[54] = submitEditing;
+		$[55] = tabData.onTitleChange;
+		$[56] = t20;
+	} else t20 = $[56];
+	const handleSubmitEditing = useEvent(t20);
+	let t21;
+	if ($[57] !== cancelEditing) {
+		t21 = () => {
 			cancelEditing();
 			setSuppressFocusVisible(true);
 			ref.current?.focus();
 		};
-		$[55] = cancelEditing;
-		$[56] = t20;
-	} else t20 = $[56];
-	const handleCancelEditing = useEvent(t20);
-	let t21;
-	if ($[57] !== handleStartEditing || $[58] !== isEditing) {
-		t21 = (editing) => {
+		$[57] = cancelEditing;
+		$[58] = t21;
+	} else t21 = $[58];
+	const handleCancelEditing = useEvent(t21);
+	let t22;
+	if ($[59] !== handleStartEditing || $[60] !== isEditing) {
+		t22 = (editing) => {
 			if (editing && !isEditing) handleStartEditing();
 		};
-		$[57] = handleStartEditing;
-		$[58] = isEditing;
-		$[59] = t21;
-	} else t21 = $[59];
-	const handleEditingChange = useEvent(t21);
-	let t22;
-	if ($[60] !== effectiveIsEditable || $[61] !== isDeletable || $[62] !== itemKeyStr || $[63] !== onDelete || $[64] !== parentOnAction || $[65] !== tabData) {
-		t22 = (action) => {
+		$[59] = handleStartEditing;
+		$[60] = isEditing;
+		$[61] = t22;
+	} else t22 = $[61];
+	const handleEditingChange = useEvent(t22);
+	let t23;
+	if ($[62] !== effectiveIsEditable || $[63] !== isDeletable || $[64] !== itemKeyStr || $[65] !== onDelete || $[66] !== parentOnAction || $[67] !== tabData) {
+		t23 = (action) => {
 			const actionStr = String(action);
 			const normalizedAction = actionStr.startsWith(".$") ? actionStr.slice(2) : actionStr;
 			if (normalizedAction === "rename" && effectiveIsEditable) inlineInputRef.current?.startEditing();
@@ -353,51 +391,51 @@ function TabButton(t0) {
 			tabData.onAction?.(normalizedAction);
 			parentOnAction?.(normalizedAction, itemKeyStr);
 		};
-		$[60] = effectiveIsEditable;
-		$[61] = isDeletable;
-		$[62] = itemKeyStr;
-		$[63] = onDelete;
-		$[64] = parentOnAction;
-		$[65] = tabData;
-		$[66] = t22;
-	} else t22 = $[66];
-	const handleMenuAction = useEvent(t22);
-	let t23;
-	if ($[67] !== effectiveMenuProps || $[68] !== handleMenuAction || $[69] !== processedMenu) {
-		t23 = processedMenu ? /* @__PURE__ */ jsx(__Menu, {
+		$[62] = effectiveIsEditable;
+		$[63] = isDeletable;
+		$[64] = itemKeyStr;
+		$[65] = onDelete;
+		$[66] = parentOnAction;
+		$[67] = tabData;
+		$[68] = t23;
+	} else t23 = $[68];
+	const handleMenuAction = useEvent(t23);
+	let t24;
+	if ($[69] !== effectiveMenuProps || $[70] !== handleMenuAction || $[71] !== processedMenu) {
+		t24 = processedMenu ? /* @__PURE__ */ jsx(__Menu, {
 			...effectiveMenuProps,
 			onAction: handleMenuAction,
 			children: processedMenu
 		}) : null;
-		$[67] = effectiveMenuProps;
-		$[68] = handleMenuAction;
-		$[69] = processedMenu;
-		$[70] = t23;
-	} else t23 = $[70];
-	const menuElement = t23;
-	const menuPopoverPlacement = POPOVER_PLACEMENT_BY_TABS_PLACEMENT[placement];
-	let t24;
-	if ($[71] !== menuPopoverPlacement) {
-		t24 = { placement: menuPopoverPlacement };
-		$[71] = menuPopoverPlacement;
+		$[69] = effectiveMenuProps;
+		$[70] = handleMenuAction;
+		$[71] = processedMenu;
 		$[72] = t24;
 	} else t24 = $[72];
+	const menuElement = t24;
+	const menuPopoverPlacement = POPOVER_PLACEMENT_BY_TABS_PLACEMENT[placement];
 	let t25;
-	if ($[73] !== effectiveMenuProps || $[74] !== handleMenuAction || $[75] !== processedMenu) {
-		t25 = {
+	if ($[73] !== menuPopoverPlacement) {
+		t25 = { placement: menuPopoverPlacement };
+		$[73] = menuPopoverPlacement;
+		$[74] = t25;
+	} else t25 = $[74];
+	let t26;
+	if ($[75] !== effectiveMenuProps || $[76] !== handleMenuAction || $[77] !== processedMenu) {
+		t26 = {
 			...effectiveMenuProps,
 			onAction: handleMenuAction,
 			children: processedMenu
 		};
-		$[73] = effectiveMenuProps;
-		$[74] = handleMenuAction;
-		$[75] = processedMenu;
-		$[76] = t25;
-	} else t25 = $[76];
-	const contextMenu = useContextMenu(__Menu, t24, t25);
-	let t26;
-	if ($[77] !== contextMenu || $[78] !== contextMenuOnly || $[79] !== effectiveIsEditable || $[80] !== isDeletable || $[81] !== isDisabled || $[82] !== isEditing || $[83] !== itemKeyStr || $[84] !== onDelete || $[85] !== processedMenu || $[86] !== suppressFocusVisible) {
-		t26 = (e) => {
+		$[75] = effectiveMenuProps;
+		$[76] = handleMenuAction;
+		$[77] = processedMenu;
+		$[78] = t26;
+	} else t26 = $[78];
+	const contextMenu = useContextMenu(__Menu, t25, t26);
+	let t27;
+	if ($[79] !== contextMenu || $[80] !== contextMenuOnly || $[81] !== effectiveIsEditable || $[82] !== isDeletable || $[83] !== isDisabled || $[84] !== isEditing || $[85] !== itemKeyStr || $[86] !== onDelete || $[87] !== processedMenu || $[88] !== suppressFocusVisible) {
+		t27 = (e) => {
 			if (suppressFocusVisible) setSuppressFocusVisible(false);
 			if (e.key === "F2" && effectiveIsEditable && !isDisabled) {
 				e.preventDefault();
@@ -415,22 +453,22 @@ function TabButton(t0) {
 				onDelete?.(itemKeyStr);
 			}
 		};
-		$[77] = contextMenu;
-		$[78] = contextMenuOnly;
-		$[79] = effectiveIsEditable;
-		$[80] = isDeletable;
-		$[81] = isDisabled;
-		$[82] = isEditing;
-		$[83] = itemKeyStr;
-		$[84] = onDelete;
-		$[85] = processedMenu;
-		$[86] = suppressFocusVisible;
-		$[87] = t26;
-	} else t26 = $[87];
-	const handleKeyDown = useEvent(t26);
-	let t27;
-	if ($[88] !== effectiveFocusVisible || $[89] !== effectiveType || $[90] !== isActive || $[91] !== isDeletable || $[92] !== isDisabled || $[93] !== isDraggable || $[94] !== isDragging || $[95] !== isDropPending || $[96] !== isEditing || $[97] !== isFocused || $[98] !== isHovered || $[99] !== placement) {
-		t27 = {
+		$[79] = contextMenu;
+		$[80] = contextMenuOnly;
+		$[81] = effectiveIsEditable;
+		$[82] = isDeletable;
+		$[83] = isDisabled;
+		$[84] = isEditing;
+		$[85] = itemKeyStr;
+		$[86] = onDelete;
+		$[87] = processedMenu;
+		$[88] = suppressFocusVisible;
+		$[89] = t27;
+	} else t27 = $[89];
+	const handleKeyDown = useEvent(t27);
+	let t28;
+	if ($[90] !== effectiveFocusVisible || $[91] !== effectiveType || $[92] !== isActive || $[93] !== isDeletable || $[94] !== isDisabled || $[95] !== isDraggable || $[96] !== isDragging || $[97] !== isDropPending || $[98] !== isEditing || $[99] !== isFocused || $[100] !== isHovered || $[101] !== placement) {
+		t28 = {
 			type: effectiveType,
 			placement,
 			active: isActive,
@@ -444,42 +482,67 @@ function TabButton(t0) {
 			dragging: isDragging,
 			"drop-pending": isDropPending
 		};
-		$[88] = effectiveFocusVisible;
-		$[89] = effectiveType;
-		$[90] = isActive;
-		$[91] = isDeletable;
-		$[92] = isDisabled;
-		$[93] = isDraggable;
-		$[94] = isDragging;
-		$[95] = isDropPending;
-		$[96] = isEditing;
-		$[97] = isFocused;
-		$[98] = isHovered;
-		$[99] = placement;
-		$[100] = t27;
-	} else t27 = $[100];
-	const mods = t27;
-	let t28;
+		$[90] = effectiveFocusVisible;
+		$[91] = effectiveType;
+		$[92] = isActive;
+		$[93] = isDeletable;
+		$[94] = isDisabled;
+		$[95] = isDraggable;
+		$[96] = isDragging;
+		$[97] = isDropPending;
+		$[98] = isEditing;
+		$[99] = isFocused;
+		$[100] = isHovered;
+		$[101] = placement;
+		$[102] = t28;
+	} else t28 = $[102];
+	const mods = t28;
 	let t29;
-	if ($[101] !== isActive) {
-		t28 = () => {
-			if (ref.current && isActive) ref.current.scrollIntoView?.({
+	if ($[103] !== placement) {
+		t29 = () => {
+			if (ref.current) scrollTabIntoStrip(ref.current, placement);
+		};
+		$[103] = placement;
+		$[104] = t29;
+	} else t29 = $[104];
+	const keepActiveTabInStrip = useEvent(t29);
+	let t30;
+	let t31;
+	if ($[105] !== isActive || $[106] !== keepActiveTabInStrip) {
+		t30 = () => {
+			const tab = ref.current;
+			if (!tab || !isActive) return;
+			tab.scrollIntoView?.({
 				block: "nearest",
 				inline: "nearest"
 			});
+			if (typeof ResizeObserver === "undefined") return;
+			const bar = tab.closest("[data-element=\"Bar\"]");
+			const observer = new ResizeObserver(keepActiveTabInStrip);
+			const stopFollowing = () => {
+				observer.disconnect();
+				for (const type_0 of STRIP_INTERACTION_EVENTS) bar?.removeEventListener(type_0, stopFollowing, true);
+			};
+			observer.observe(tab);
+			for (const type_1 of STRIP_INTERACTION_EVENTS) bar?.addEventListener(type_1, stopFollowing, {
+				capture: true,
+				passive: true
+			});
+			return stopFollowing;
 		};
-		t29 = [isActive];
-		$[101] = isActive;
-		$[102] = t28;
-		$[103] = t29;
+		t31 = [isActive, keepActiveTabInStrip];
+		$[105] = isActive;
+		$[106] = keepActiveTabInStrip;
+		$[107] = t30;
+		$[108] = t31;
 	} else {
-		t28 = $[102];
-		t29 = $[103];
+		t30 = $[107];
+		t31 = $[108];
 	}
-	useEffect(t28, t29);
-	let t30;
-	if ($[104] !== contextMenuOnly || $[105] !== effectiveMenuTriggerProps || $[106] !== isMenuOpen || $[107] !== menuElement || $[108] !== menuPopoverPlacement) {
-		t30 = menuElement && !contextMenuOnly ? /* @__PURE__ */ jsxs(_MenuTrigger, {
+	useEffect(t30, t31);
+	let t32;
+	if ($[109] !== contextMenuOnly || $[110] !== effectiveMenuTriggerProps || $[111] !== isMenuOpen || $[112] !== menuElement || $[113] !== menuPopoverPlacement) {
+		t32 = menuElement && !contextMenuOnly ? /* @__PURE__ */ jsxs(_MenuTrigger, {
 			isOpen: isMenuOpen,
 			placement: menuPopoverPlacement,
 			onOpenChange: setIsMenuOpen,
@@ -489,41 +552,41 @@ function TabButton(t0) {
 				...effectiveMenuTriggerProps
 			}), menuElement]
 		}) : null;
-		$[104] = contextMenuOnly;
-		$[105] = effectiveMenuTriggerProps;
-		$[106] = isMenuOpen;
-		$[107] = menuElement;
-		$[108] = menuPopoverPlacement;
-		$[109] = t30;
-	} else t30 = $[109];
-	const menuAction = t30;
-	let t31;
-	if ($[110] !== handleDelete || $[111] !== showDeleteButton || $[112] !== t) {
-		t31 = showDeleteButton ? /* @__PURE__ */ jsx(ItemAction, {
+		$[109] = contextMenuOnly;
+		$[110] = effectiveMenuTriggerProps;
+		$[111] = isMenuOpen;
+		$[112] = menuElement;
+		$[113] = menuPopoverPlacement;
+		$[114] = t32;
+	} else t32 = $[114];
+	const menuAction = t32;
+	let t33;
+	if ($[115] !== handleDelete || $[116] !== showDeleteButton || $[117] !== t) {
+		t33 = showDeleteButton ? /* @__PURE__ */ jsx(ItemAction, {
 			tabIndex: -1,
 			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			tooltip: t("tabs.close", "Close"),
 			onPress: handleDelete
 		}) : null;
-		$[110] = handleDelete;
-		$[111] = showDeleteButton;
-		$[112] = t;
-		$[113] = t31;
-	} else t31 = $[113];
-	const deleteAction = t31;
-	let t32;
-	if ($[114] !== deleteAction || $[115] !== menuAction || $[116] !== tabData.actions) {
-		t32 = tabData.actions || menuAction || deleteAction ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		$[115] = handleDelete;
+		$[116] = showDeleteButton;
+		$[117] = t;
+		$[118] = t33;
+	} else t33 = $[118];
+	const deleteAction = t33;
+	let t34;
+	if ($[119] !== deleteAction || $[120] !== menuAction || $[121] !== tabData.actions) {
+		t34 = tabData.actions || menuAction || deleteAction ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			tabData.actions,
 			menuAction,
 			deleteAction
 		] }) : void 0;
-		$[114] = deleteAction;
-		$[115] = menuAction;
-		$[116] = tabData.actions;
-		$[117] = t32;
-	} else t32 = $[117];
-	const actions = t32;
+		$[119] = deleteAction;
+		$[120] = menuAction;
+		$[121] = tabData.actions;
+		$[122] = t34;
+	} else t34 = $[122];
+	const actions = t34;
 	const effectiveSize = tabData.size ?? size ?? "medium";
 	const itemSize = effectiveType === "radio" ? RADIO_SIZE_MAP[effectiveSize === "large" ? "large" : "medium"] : effectiveSize;
 	const itemShape = effectiveType === "file" ? "sharp" : void 0;
@@ -533,46 +596,46 @@ function TabButton(t0) {
 	let qaVal;
 	let styles;
 	let tabTooltip;
-	if ($[118] !== tabData) {
-		const { title: _title, content: _content, key: _key, isDisabled: _isDisabled, prerender: _prerender, keepMounted: _keepMounted, size: _size, actions: _actions, autoHideActions: _autoHideActions, isEditable: _isEditable, onTitleChange: _onTitleChange, menu: _menu, menuTriggerProps: _menuTriggerProps, menuProps: _menuProps, contextMenu: _contextMenu, onAction: _onAction, tooltip: t33, qa: t34, qaVal: t35, styles: t36, ...t37 } = tabData;
-		tabTooltip = t33;
-		qa = t34;
-		qaVal = t35;
-		styles = t36;
-		itemStyleProps = t37;
-		$[118] = tabData;
-		$[119] = itemStyleProps;
-		$[120] = qa;
-		$[121] = qaVal;
-		$[122] = styles;
-		$[123] = tabTooltip;
+	if ($[123] !== tabData) {
+		const { title: _title, content: _content, key: _key, isDisabled: _isDisabled, prerender: _prerender, keepMounted: _keepMounted, size: _size, actions: _actions, autoHideActions: _autoHideActions, isEditable: _isEditable, onTitleChange: _onTitleChange, menu: _menu, menuTriggerProps: _menuTriggerProps, menuProps: _menuProps, contextMenu: _contextMenu, onAction: _onAction, tooltip: t35, qa: t36, qaVal: t37, styles: t38, ...t39 } = tabData;
+		tabTooltip = t35;
+		qa = t36;
+		qaVal = t37;
+		styles = t38;
+		itemStyleProps = t39;
+		$[123] = tabData;
+		$[124] = itemStyleProps;
+		$[125] = qa;
+		$[126] = qaVal;
+		$[127] = styles;
+		$[128] = tabTooltip;
 	} else {
-		itemStyleProps = $[119];
-		qa = $[120];
-		qaVal = $[121];
-		styles = $[122];
-		tabTooltip = $[123];
+		itemStyleProps = $[124];
+		qa = $[125];
+		qaVal = $[126];
+		styles = $[127];
+		tabTooltip = $[128];
 	}
-	let t33;
-	if ($[124] !== tabData.title) {
-		t33 = typeof tabData.title === "string" ? void 0 : () => tabData.title;
-		$[124] = tabData.title;
-		$[125] = t33;
-	} else t33 = $[125];
-	const renderTitleDisplay = t33;
-	let t34;
-	if ($[126] !== effectiveIsEditable || $[127] !== isEditing || $[128] !== renderTitleDisplay || $[129] !== tabTooltip) {
-		t34 = !effectiveIsEditable ? tabTooltip : !renderTitleDisplay ? false : isEditing ? disableTooltip(tabTooltip) : tabTooltip;
-		$[126] = effectiveIsEditable;
-		$[127] = isEditing;
-		$[128] = renderTitleDisplay;
-		$[129] = tabTooltip;
-		$[130] = t34;
-	} else t34 = $[130];
-	const tabElementTooltip = t34;
 	let t35;
-	if ($[131] !== editTabTitleLabel || $[132] !== effectiveIsEditable || $[133] !== handleCancelEditing || $[134] !== handleEditingChange || $[135] !== handleSubmitEditing || $[136] !== isDisabled || $[137] !== isEditing || $[138] !== renderTitleDisplay || $[139] !== tabData.title || $[140] !== tabTooltip || $[141] !== titleString) {
-		t35 = effectiveIsEditable ? /* @__PURE__ */ jsx(InlineInput, {
+	if ($[129] !== tabData.title) {
+		t35 = typeof tabData.title === "string" ? void 0 : () => tabData.title;
+		$[129] = tabData.title;
+		$[130] = t35;
+	} else t35 = $[130];
+	const renderTitleDisplay = t35;
+	let t36;
+	if ($[131] !== effectiveIsEditable || $[132] !== isEditing || $[133] !== renderTitleDisplay || $[134] !== tabTooltip) {
+		t36 = !effectiveIsEditable ? tabTooltip : !renderTitleDisplay ? false : isEditing ? disableTooltip(tabTooltip) : tabTooltip;
+		$[131] = effectiveIsEditable;
+		$[132] = isEditing;
+		$[133] = renderTitleDisplay;
+		$[134] = tabTooltip;
+		$[135] = t36;
+	} else t36 = $[135];
+	const tabElementTooltip = t36;
+	let t37;
+	if ($[136] !== editTabTitleLabel || $[137] !== effectiveIsEditable || $[138] !== handleCancelEditing || $[139] !== handleEditingChange || $[140] !== handleSubmitEditing || $[141] !== isDisabled || $[142] !== isEditing || $[143] !== renderTitleDisplay || $[144] !== tabData.title || $[145] !== tabTooltip || $[146] !== titleString) {
+		t37 = effectiveIsEditable ? /* @__PURE__ */ jsx(InlineInput, {
 			ref: inlineInputRef,
 			value: titleString,
 			isEditing,
@@ -586,42 +649,42 @@ function TabButton(t0) {
 			onSubmit: handleSubmitEditing,
 			onCancel: handleCancelEditing
 		}) : tabData.title;
-		$[131] = editTabTitleLabel;
-		$[132] = effectiveIsEditable;
-		$[133] = handleCancelEditing;
-		$[134] = handleEditingChange;
-		$[135] = handleSubmitEditing;
-		$[136] = isDisabled;
-		$[137] = isEditing;
-		$[138] = renderTitleDisplay;
-		$[139] = tabData.title;
-		$[140] = tabTooltip;
-		$[141] = titleString;
-		$[142] = t35;
-	} else t35 = $[142];
-	const titleContent = t35;
+		$[136] = editTabTitleLabel;
+		$[137] = effectiveIsEditable;
+		$[138] = handleCancelEditing;
+		$[139] = handleEditingChange;
+		$[140] = handleSubmitEditing;
+		$[141] = isDisabled;
+		$[142] = isEditing;
+		$[143] = renderTitleDisplay;
+		$[144] = tabData.title;
+		$[145] = tabTooltip;
+		$[146] = titleString;
+		$[147] = t37;
+	} else t37 = $[147];
+	const titleContent = t37;
 	const effectiveContainerRef = contextMenuEnabled && processedMenu ? contextMenu.targetRef : containerRef;
-	let t36;
-	if ($[143] !== processedMenu) {
-		t36 = processedMenu ? { "aria-haspopup": "menu" } : {};
-		$[143] = processedMenu;
-		$[144] = t36;
-	} else t36 = $[144];
-	const ariaProps = t36;
-	let t37;
-	if ($[145] !== effectiveAutoHideActions || $[146] !== mods) {
-		t37 = {
+	let t38;
+	if ($[148] !== processedMenu) {
+		t38 = processedMenu ? { "aria-haspopup": "menu" } : {};
+		$[148] = processedMenu;
+		$[149] = t38;
+	} else t38 = $[149];
+	const ariaProps = t38;
+	let t39;
+	if ($[150] !== effectiveAutoHideActions || $[151] !== mods) {
+		t39 = {
 			...mods,
 			"auto-hide-actions": effectiveAutoHideActions
 		};
-		$[145] = effectiveAutoHideActions;
-		$[146] = mods;
-		$[147] = t37;
-	} else t37 = $[147];
-	const containerMods = t37;
-	let t38;
-	if ($[148] !== dropState || $[149] !== isDraggable || $[150] !== item.key) {
-		t38 = isDraggable && dropState && /* @__PURE__ */ jsx(TabDropIndicator, {
+		$[150] = effectiveAutoHideActions;
+		$[151] = mods;
+		$[152] = t39;
+	} else t39 = $[152];
+	const containerMods = t39;
+	let t40;
+	if ($[153] !== dropState || $[154] !== isDraggable || $[155] !== item.key) {
+		t40 = isDraggable && dropState && /* @__PURE__ */ jsx(TabDropIndicator, {
 			target: {
 				type: "item",
 				key: item.key,
@@ -630,16 +693,16 @@ function TabButton(t0) {
 			dropState,
 			position: "before"
 		});
-		$[148] = dropState;
-		$[149] = isDraggable;
-		$[150] = item.key;
-		$[151] = t38;
-	} else t38 = $[151];
-	const t39 = effectiveAutoHideActions && !isActive;
-	let t40;
-	if ($[152] !== actions || $[153] !== ariaProps || $[154] !== clearSpringLoad || $[155] !== effectiveAutoHideActions || $[156] !== focusProps || $[157] !== handleKeyDown || $[158] !== handleSpringLoadEnter || $[159] !== hoverProps || $[160] !== isActive || $[161] !== isDisabled || $[162] !== item.key || $[163] !== itemShape || $[164] !== itemSize || $[165] !== itemStyleProps || $[166] !== mods || $[167] !== qa || $[168] !== qaVal || $[169] !== styles || $[170] !== tabElementTooltip || $[171] !== tabProps || $[172] !== titleContent) {
-		t40 = (t41) => {
-			const { showActions, skipActionsWidthTransition } = t41;
+		$[153] = dropState;
+		$[154] = isDraggable;
+		$[155] = item.key;
+		$[156] = t40;
+	} else t40 = $[156];
+	const t41 = effectiveAutoHideActions && !isActive;
+	let t42;
+	if ($[157] !== actions || $[158] !== ariaProps || $[159] !== clearSpringLoad || $[160] !== effectiveAutoHideActions || $[161] !== focusProps || $[162] !== handleKeyDown || $[163] !== handleSpringLoadEnter || $[164] !== hoverProps || $[165] !== isActive || $[166] !== isDisabled || $[167] !== item.key || $[168] !== itemShape || $[169] !== itemSize || $[170] !== itemStyleProps || $[171] !== mods || $[172] !== qa || $[173] !== qaVal || $[174] !== styles || $[175] !== tabElementTooltip || $[176] !== tabProps || $[177] !== titleContent) {
+		t42 = (t43) => {
+			const { showActions, skipActionsWidthTransition } = t43;
 			return /* @__PURE__ */ jsx(TabElement, {
 				insideWrapper: true,
 				preserveActionsSpace: true,
@@ -669,34 +732,34 @@ function TabButton(t0) {
 				children: titleContent
 			});
 		};
-		$[152] = actions;
-		$[153] = ariaProps;
-		$[154] = clearSpringLoad;
-		$[155] = effectiveAutoHideActions;
-		$[156] = focusProps;
-		$[157] = handleKeyDown;
-		$[158] = handleSpringLoadEnter;
-		$[159] = hoverProps;
-		$[160] = isActive;
-		$[161] = isDisabled;
-		$[162] = item.key;
-		$[163] = itemShape;
-		$[164] = itemSize;
-		$[165] = itemStyleProps;
-		$[166] = mods;
-		$[167] = qa;
-		$[168] = qaVal;
-		$[169] = styles;
-		$[170] = tabElementTooltip;
-		$[171] = tabProps;
-		$[172] = titleContent;
-		$[173] = t40;
-	} else t40 = $[173];
-	let t41;
-	if ($[174] !== actions || $[175] !== isDisabled || $[176] !== itemSize || $[177] !== mods || $[178] !== t39 || $[179] !== t40) {
-		t41 = /* @__PURE__ */ jsx(ItemActionsWrapper, {
+		$[157] = actions;
+		$[158] = ariaProps;
+		$[159] = clearSpringLoad;
+		$[160] = effectiveAutoHideActions;
+		$[161] = focusProps;
+		$[162] = handleKeyDown;
+		$[163] = handleSpringLoadEnter;
+		$[164] = hoverProps;
+		$[165] = isActive;
+		$[166] = isDisabled;
+		$[167] = item.key;
+		$[168] = itemShape;
+		$[169] = itemSize;
+		$[170] = itemStyleProps;
+		$[171] = mods;
+		$[172] = qa;
+		$[173] = qaVal;
+		$[174] = styles;
+		$[175] = tabElementTooltip;
+		$[176] = tabProps;
+		$[177] = titleContent;
+		$[178] = t42;
+	} else t42 = $[178];
+	let t43;
+	if ($[179] !== actions || $[180] !== isDisabled || $[181] !== itemSize || $[182] !== mods || $[183] !== t41 || $[184] !== t42) {
+		t43 = /* @__PURE__ */ jsx(ItemActionsWrapper, {
 			preserveActionsSpace: true,
-			autoHideActions: t39,
+			autoHideActions: t41,
 			type: "clear",
 			theme: "default",
 			size: itemSize,
@@ -704,20 +767,20 @@ function TabButton(t0) {
 			mods,
 			actions,
 			actionsProps: ACTIONS_EVENT_HANDLERS,
-			children: t40
+			children: t42
 		});
-		$[174] = actions;
-		$[175] = isDisabled;
-		$[176] = itemSize;
-		$[177] = mods;
-		$[178] = t39;
-		$[179] = t40;
-		$[180] = t41;
-	} else t41 = $[180];
-	const t42 = contextMenuEnabled && processedMenu && contextMenu.rendered;
-	let t43;
-	if ($[181] !== dropState || $[182] !== isDraggable || $[183] !== isLastTab || $[184] !== item.key) {
-		t43 = isDraggable && dropState && isLastTab && /* @__PURE__ */ jsx(TabDropIndicator, {
+		$[179] = actions;
+		$[180] = isDisabled;
+		$[181] = itemSize;
+		$[182] = mods;
+		$[183] = t41;
+		$[184] = t42;
+		$[185] = t43;
+	} else t43 = $[185];
+	const t44 = contextMenuEnabled && processedMenu && contextMenu.rendered;
+	let t45;
+	if ($[186] !== dropState || $[187] !== isDraggable || $[188] !== isLastTab || $[189] !== item.key) {
+		t45 = isDraggable && dropState && isLastTab && /* @__PURE__ */ jsx(TabDropIndicator, {
 			target: {
 				type: "item",
 				key: item.key,
@@ -726,37 +789,37 @@ function TabButton(t0) {
 			dropState,
 			position: "after"
 		});
-		$[181] = dropState;
-		$[182] = isDraggable;
-		$[183] = isLastTab;
-		$[184] = item.key;
-		$[185] = t43;
-	} else t43 = $[185];
-	let t44;
-	if ($[186] !== containerMods || $[187] !== effectiveContainerRef || $[188] !== effectiveDragProps || $[189] !== itemSize || $[190] !== t38 || $[191] !== t41 || $[192] !== t42 || $[193] !== t43) {
-		t44 = /* @__PURE__ */ jsxs(TabContainer, {
+		$[186] = dropState;
+		$[187] = isDraggable;
+		$[188] = isLastTab;
+		$[189] = item.key;
+		$[190] = t45;
+	} else t45 = $[190];
+	let t46;
+	if ($[191] !== containerMods || $[192] !== effectiveContainerRef || $[193] !== effectiveDragProps || $[194] !== itemSize || $[195] !== t40 || $[196] !== t43 || $[197] !== t44 || $[198] !== t45) {
+		t46 = /* @__PURE__ */ jsxs(TabContainer, {
 			ref: effectiveContainerRef,
 			"data-size": itemSize,
 			mods: containerMods,
 			...effectiveDragProps,
 			children: [
-				t38,
-				t41,
-				t42,
-				t43
+				t40,
+				t43,
+				t44,
+				t45
 			]
 		});
-		$[186] = containerMods;
-		$[187] = effectiveContainerRef;
-		$[188] = effectiveDragProps;
-		$[189] = itemSize;
-		$[190] = t38;
-		$[191] = t41;
-		$[192] = t42;
-		$[193] = t43;
-		$[194] = t44;
-	} else t44 = $[194];
-	return t44;
+		$[191] = containerMods;
+		$[192] = effectiveContainerRef;
+		$[193] = effectiveDragProps;
+		$[194] = itemSize;
+		$[195] = t40;
+		$[196] = t43;
+		$[197] = t44;
+		$[198] = t45;
+		$[199] = t46;
+	} else t46 = $[199];
+	return t46;
 }
 
 //#endregion