@cube-dev/ui-kit 0.113.1 → 0.115.0

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

@@ -0,0 +1,321 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { ItemActionProvider } from "../../actions/ItemActionContext.js";
+import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { MoreIcon } from "../../../icons/MoreIcon.js";
+import { _MenuTrigger } from "../../actions/Menu/MenuTrigger.js";
+import { __Menu } from "../../actions/Menu/Menu.js";
+import { useContextMenu } from "../../actions/use-context-menu.js";
+import { TabContainer, TabElement } from "./styled.js";
+import { EditableTitle } from "./EditableTitle.js";
+import { TabDropIndicator } from "./TabDropIndicator.js";
+import { useTabsContext } from "./TabsContext.js";
+import { RADIO_SIZE_MAP } from "./types.js";
+import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useDraggableItem, useFocus, useFocusVisible, useHover, useTab } from "react-aria";
+
+//#region src/components/navigation/Tabs/TabButton.tsx
+const ACTIONS_EVENT_HANDLERS = {
+	onClick: (e) => e.stopPropagation(),
+	onPointerDown: (e) => e.stopPropagation(),
+	onPointerUp: (e) => e.stopPropagation(),
+	onMouseDown: (e) => e.stopPropagation(),
+	onMouseUp: (e) => e.stopPropagation(),
+	onKeyDown: (e) => {
+		if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+	}
+};
+/**
+* Extracts the raw key from a React element, stripping the ".$" prefix
+* that React adds via Children.map/toArray.
+*/
+function getRawKey(element) {
+	if (element.key == null) return null;
+	const keyStr = String(element.key);
+	return keyStr.startsWith(".$") ? keyStr.slice(2) : keyStr;
+}
+/**
+* Process menu items for predefined action keys (rename, delete).
+* Auto-adds labels and disables items when requirements aren't met.
+*/
+function processMenuItems(children, effectiveIsEditable, isDeletable) {
+	return Children.toArray(children).map((child) => {
+		if (!isValidElement(child)) return child;
+		const childKey = getRawKey(child);
+		const childProps = child.props;
+		if (childKey === "rename") return cloneElement(child, {
+			children: childProps.children ?? "Rename",
+			isDisabled: childProps.isDisabled ?? !effectiveIsEditable
+		});
+		if (childKey === "delete") return cloneElement(child, {
+			children: childProps.children ?? "Delete",
+			theme: childProps.theme ?? "danger",
+			isDisabled: childProps.isDisabled ?? !isDeletable
+		});
+		if (childProps.children && typeof childProps.children !== "string") return cloneElement(child, { children: processMenuItems(childProps.children, effectiveIsEditable, isDeletable) });
+		return child;
+	});
+}
+/**
+* Check if menu children is empty (null, undefined, or empty fragment)
+*/
+function isMenuEmpty(menu) {
+	if (menu === null || menu === void 0) return true;
+	return Children.toArray(menu).length === 0;
+}
+/**
+* Individual tab button component.
+*
+* Uses TabsContext to access shared props, dramatically reducing prop drilling.
+* Handles:
+* - Tab selection and keyboard navigation
+* - Inline title editing
+* - Menu and context menu
+* - Drag-and-drop reordering
+* - Focus and hover states
+*/
+function TabButton({ item, tabData, isLastTab }) {
+	const { state, type, size, autoHideActions: parentAutoHideActions, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, onDelete, dragState, dropState, editingKey, editValue, setEditValue, startEditing, submitEditing, cancelEditing } = useTabsContext();
+	const ref = useRef(null);
+	const containerRef = useRef(null);
+	const actionsRef = useRef(null);
+	const { tabProps } = useTab({ key: item.key }, state, ref);
+	const [actionsWidth, setActionsWidth] = useState(0);
+	const isDraggable = !!dragState && !!dropState;
+	const mockDragState = useMemo(() => ({
+		collection: state.collection,
+		selectionManager: state.selectionManager,
+		isDragging: () => false,
+		getKeysForDrag: () => /* @__PURE__ */ new Set(),
+		isDisabled: false,
+		startDrag: () => {},
+		endDrag: () => {}
+	}), [state.collection, state.selectionManager]);
+	const dragResult = useDraggableItem({ key: item.key }, dragState ?? mockDragState);
+	const effectiveDragProps = isDraggable ? dragResult.dragProps : {};
+	const isDragging = isDraggable && dragResult.isDragging;
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const { hoverProps, isHovered } = useHover({});
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusProps } = useFocus({ onFocusChange: setIsFocused });
+	const { isFocusVisible } = useFocusVisible();
+	const [suppressFocusVisible, setSuppressFocusVisible] = useState(false);
+	const effectiveFocusVisible = isFocusVisible && !suppressFocusVisible;
+	const isActive = state.selectedKey === item.key;
+	const isDisabled = state.disabledKeys.has(item.key);
+	const isDeletable = !!onDelete;
+	const isEditing = editingKey === item.key;
+	const effectiveIsEditable = tabData.isEditable ?? parentIsEditable ?? false;
+	const effectiveMenu = tabData.menu === null ? null : tabData.menu ?? parentMenu;
+	const effectiveMenuTriggerProps = {
+		...parentMenuTriggerProps,
+		...tabData.menuTriggerProps
+	};
+	const effectiveMenuProps = {
+		...parentMenuProps,
+		...tabData.menuProps
+	};
+	const effectiveContextMenu = tabData.contextMenu ?? parentContextMenu ?? false;
+	const effectiveType = tabData.type ?? type ?? "default";
+	const showDeleteButton = isDeletable && isMenuEmpty(effectiveMenu);
+	const processedMenu = effectiveMenu && !isMenuEmpty(effectiveMenu) ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable) : null;
+	const itemKeyStr = String(item.key);
+	const handleDelete = useEvent(() => {
+		onDelete?.(itemKeyStr);
+	});
+	const handleStartEditing = useEvent(() => {
+		if (!effectiveIsEditable || isDisabled) return;
+		startEditing(itemKeyStr, typeof tabData.title === "string" ? tabData.title : itemKeyStr);
+	});
+	const handleSubmitEditing = useEvent(() => {
+		submitEditing(itemKeyStr, editValue, tabData.onTitleChange);
+		setSuppressFocusVisible(true);
+		requestAnimationFrame(() => {
+			ref.current?.focus();
+		});
+	});
+	const handleCancelEditing = useEvent(() => {
+		cancelEditing();
+		setSuppressFocusVisible(true);
+		requestAnimationFrame(() => {
+			ref.current?.focus();
+		});
+	});
+	const handleEditValueChange = useEvent((value) => {
+		setEditValue(value);
+	});
+	const handleMenuAction = useEvent((action) => {
+		const actionStr = String(action);
+		const normalizedAction = actionStr.startsWith(".$") ? actionStr.slice(2) : actionStr;
+		if (normalizedAction === "rename" && effectiveIsEditable) handleStartEditing();
+		if (normalizedAction === "delete" && isDeletable) onDelete?.(itemKeyStr);
+		tabData.onAction?.(normalizedAction);
+		parentOnAction?.(normalizedAction, itemKeyStr);
+	});
+	const handleKeyDown = useEvent((e) => {
+		if (suppressFocusVisible) setSuppressFocusVisible(false);
+		if (e.key === "F2" && effectiveIsEditable && !isDisabled) {
+			e.preventDefault();
+			e.stopPropagation();
+			handleStartEditing();
+		}
+		if (e.key === "F10" && e.shiftKey && processedMenu) {
+			e.preventDefault();
+			e.stopPropagation();
+			setIsMenuOpen(true);
+		}
+		if ((e.key === "Delete" || e.key === "Backspace") && isDeletable && !isEditing) {
+			e.preventDefault();
+			onDelete?.(itemKeyStr);
+		}
+	});
+	const mods = useMemo(() => ({
+		type: effectiveType,
+		active: isActive,
+		deletable: isDeletable,
+		disabled: isDisabled,
+		editing: isEditing,
+		hovered: isHovered,
+		focused: isFocused,
+		"focus-visible": effectiveFocusVisible,
+		draggable: isDraggable,
+		dragging: isDragging
+	}), [
+		effectiveType,
+		isActive,
+		isDeletable,
+		isDisabled,
+		isEditing,
+		isHovered,
+		isFocused,
+		effectiveFocusVisible,
+		isDraggable,
+		isDragging
+	]);
+	useEffect(() => {
+		if (ref.current && isActive) ref.current.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [isActive]);
+	const menuElement = processedMenu ? /* @__PURE__ */ jsx(__Menu, {
+		...effectiveMenuProps,
+		onAction: handleMenuAction,
+		children: processedMenu
+	}) : null;
+	const contextMenu = useContextMenu(__Menu, { placement: "bottom start" }, {
+		...effectiveMenuProps,
+		onAction: handleMenuAction,
+		children: processedMenu
+	});
+	const menuAction = menuElement ? /* @__PURE__ */ jsxs(_MenuTrigger, {
+		isOpen: isMenuOpen,
+		onOpenChange: setIsMenuOpen,
+		children: [/* @__PURE__ */ jsx(ItemAction, {
+			tabIndex: -1,
+			icon: /* @__PURE__ */ jsx(MoreIcon, {}),
+			...effectiveMenuTriggerProps
+		}), menuElement]
+	}) : null;
+	const deleteAction = showDeleteButton ? /* @__PURE__ */ jsx(ItemAction, {
+		tabIndex: -1,
+		icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+		tooltip: "Close",
+		onPress: handleDelete
+	}) : null;
+	const actions = tabData.actions || menuAction || deleteAction ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		tabData.actions,
+		menuAction,
+		deleteAction
+	] }) : void 0;
+	useLayoutEffect(() => {
+		if (actions && actionsRef.current) setActionsWidth(Math.round(actionsRef.current.offsetWidth));
+	}, [actions]);
+	const effectiveSize = tabData.size ?? size ?? "medium";
+	const itemSize = effectiveType === "radio" ? RADIO_SIZE_MAP[effectiveSize === "large" ? "large" : "medium"] : effectiveSize;
+	const itemType = effectiveType === "default" ? isActive ? "clear" : "neutral" : "neutral";
+	const itemShape = effectiveType === "file" ? "sharp" : void 0;
+	const effectiveAutoHideActions = tabData.autoHideActions ?? parentAutoHideActions;
+	const titleContent = effectiveIsEditable ? /* @__PURE__ */ jsx(EditableTitle, {
+		title: tabData.title,
+		isEditing,
+		editValue: isEditing ? editValue : "",
+		onEditValueChange: handleEditValueChange,
+		onStartEditing: handleStartEditing,
+		onSubmit: handleSubmitEditing,
+		onCancel: handleCancelEditing
+	}) : tabData.title;
+	const { title: _title, content: _content, key: _key, isDisabled: _isDisabled, prerender: _prerender, keepMounted: _keepMounted, size: _size, type: _type, actions: _actions, autoHideActions: _autoHideActions, isEditable: _isEditable, onTitleChange: _onTitleChange, menu: _menu, menuTriggerProps: _menuTriggerProps, menuProps: _menuProps, contextMenu: _contextMenu, onAction: _onAction, qa, qaVal, styles, ...itemStyleProps } = tabData;
+	const effectiveContainerRef = effectiveContextMenu && processedMenu ? contextMenu.targetRef : containerRef;
+	const ariaProps = processedMenu ? { "aria-haspopup": "menu" } : {};
+	const containerMods = {
+		...mods,
+		"auto-hide-actions": effectiveAutoHideActions
+	};
+	return /* @__PURE__ */ jsxs(TabContainer, {
+		ref: effectiveContainerRef,
+		"data-size": itemSize,
+		mods: containerMods,
+		tokens: { "$actions-width": `${actionsWidth}px` },
+		...effectiveDragProps,
+		children: [
+			isDraggable && dropState && /* @__PURE__ */ jsx(TabDropIndicator, {
+				target: {
+					type: "item",
+					key: item.key,
+					dropPosition: "before"
+				},
+				dropState,
+				position: "before"
+			}),
+			/* @__PURE__ */ jsx(TabElement, {
+				preserveActionsSpace: true,
+				autoHideActions: effectiveAutoHideActions,
+				as: "button",
+				...mergeProps$1(tabProps, hoverProps, focusProps, { onKeyDown: handleKeyDown }),
+				...ariaProps,
+				...itemStyleProps,
+				ref,
+				qa: qa ?? `Tab-${String(item.key)}`,
+				qaVal,
+				styles,
+				mods,
+				isSelected: isActive,
+				isDisabled,
+				size: itemSize,
+				type: itemType,
+				shape: itemShape,
+				actions: actions ? true : void 0,
+				children: titleContent
+			}),
+			actions && /* @__PURE__ */ jsx("div", {
+				ref: actionsRef,
+				"data-element": "Actions",
+				...ACTIONS_EVENT_HANDLERS,
+				children: /* @__PURE__ */ jsx(ItemActionProvider, {
+					type: itemType,
+					theme: "default",
+					isDisabled,
+					children: actions
+				})
+			}),
+			effectiveContextMenu && processedMenu && contextMenu.rendered,
+			isDraggable && dropState && isLastTab && /* @__PURE__ */ jsx(TabDropIndicator, {
+				target: {
+					type: "item",
+					key: item.key,
+					dropPosition: "after"
+				},
+				dropState,
+				position: "after"
+			})
+		]
+	});
+}
+
+//#endregion
+export { TabButton };
+//# sourceMappingURL=TabButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabButton.js","names":["Menu","MenuTrigger","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/TabButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  useDraggableItem,\n  useFocus,\n  useFocusVisible,\n  useHover,\n  useTab,\n} from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { CloseIcon, MoreIcon } from '../../../icons';\nimport { mergeProps } from '../../../utils/react';\nimport { CubeItemActionProps, ItemAction } from '../../actions/ItemAction';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { CubeMenuProps, Menu, MenuTrigger } from '../../actions/Menu';\nimport { useContextMenu } from '../../actions/use-context-menu';\n\nimport { EditableTitle } from './EditableTitle';\nimport { TabContainer, TabElement } from './styled';\nimport { TabDropIndicator } from './TabDropIndicator';\nimport { useTabsContext } from './TabsContext';\nimport { ParsedTab, RADIO_SIZE_MAP } from './types';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { KeyboardEvent, MouseEvent, PointerEvent } from 'react';\nimport type { DraggableCollectionState } from 'react-stately';\n\n// =============================================================================\n// Event handlers for actions to prevent event propagation to tab button\n// =============================================================================\n\nconst ACTIONS_EVENT_HANDLERS = {\n  onClick: (e: MouseEvent) => e.stopPropagation(),\n  onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n  onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n  onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n  onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n  onKeyDown: (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n    }\n  },\n};\n\n// =============================================================================\n// Menu Processing Utilities\n// =============================================================================\n\ninterface MenuItemLikeProps {\n  children?: ReactNode;\n  isDisabled?: boolean;\n  theme?: string;\n}\n\n/**\n * Extracts the raw key from a React element, stripping the \".$\" prefix\n * that React adds via Children.map/toArray.\n */\nfunction getRawKey(element: ReactElement): string | null {\n  if (element.key == null) return null;\n  const keyStr = String(element.key);\n  return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;\n}\n\n/**\n * Process menu items for predefined action keys (rename, delete).\n * Auto-adds labels and disables items when requirements aren't met.\n */\nfunction processMenuItems(\n  children: ReactNode,\n  effectiveIsEditable: boolean,\n  isDeletable: boolean,\n): ReactNode {\n  return Children.toArray(children).map((child) => {\n    if (!isValidElement(child)) return child;\n\n    const childKey = getRawKey(child);\n    const childProps = child.props as MenuItemLikeProps;\n\n    // Handle predefined action keys\n    if (childKey === 'rename') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: childProps.children ?? 'Rename',\n        isDisabled: childProps.isDisabled ?? !effectiveIsEditable,\n      });\n    }\n    if (childKey === 'delete') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: childProps.children ?? 'Delete',\n        theme: childProps.theme ?? 'danger',\n        isDisabled: childProps.isDisabled ?? !isDeletable,\n      });\n    }\n\n    // Recursively process Menu.Section children\n    if (childProps.children && typeof childProps.children !== 'string') {\n      return cloneElement(child as ReactElement<MenuItemLikeProps>, {\n        children: processMenuItems(\n          childProps.children,\n          effectiveIsEditable,\n          isDeletable,\n        ),\n      });\n    }\n\n    return child;\n  });\n}\n\n/**\n * Check if menu children is empty (null, undefined, or empty fragment)\n */\nfunction isMenuEmpty(menu: ReactNode): boolean {\n  if (menu === null || menu === undefined) return true;\n  const children = Children.toArray(menu);\n  return children.length === 0;\n}\n\n// =============================================================================\n// TabButton Props\n// =============================================================================\n\nexport interface TabButtonProps {\n  /** React Aria collection item */\n  item: Node<object>;\n  /** Parsed tab data */\n  tabData: ParsedTab;\n  /** Whether this is the last tab (for drop indicator) */\n  isLastTab?: boolean;\n}\n\n// =============================================================================\n// TabButton Component\n// =============================================================================\n\n/**\n * Individual tab button component.\n *\n * Uses TabsContext to access shared props, dramatically reducing prop drilling.\n * Handles:\n * - Tab selection and keyboard navigation\n * - Inline title editing\n * - Menu and context menu\n * - Drag-and-drop reordering\n * - Focus and hover states\n */\nexport function TabButton({ item, tabData, isLastTab }: TabButtonProps) {\n  // Get shared context\n  const {\n    state,\n    type,\n    size,\n    autoHideActions: parentAutoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    onDelete,\n    dragState,\n    dropState,\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    submitEditing,\n    cancelEditing,\n  } = useTabsContext();\n\n  const ref = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const { tabProps } = useTab({ key: item.key }, state, ref);\n\n  // Measure actions width for proper space allocation in Item\n  const [actionsWidth, setActionsWidth] = useState(0);\n\n  // Drag-and-drop support - only enable when both states are provided\n  const isDraggable = !!dragState && !!dropState;\n\n  // useDraggableItem must be called unconditionally (Rules of Hooks)\n  // When dragState is undefined, we pass a minimal mock state to satisfy the hook\n  const mockDragState = useMemo(\n    () =>\n      ({\n        collection: state.collection,\n        selectionManager: state.selectionManager,\n        isDragging: () => false,\n        getKeysForDrag: () => new Set<Key>(),\n        isDisabled: false,\n        startDrag: () => {},\n        endDrag: () => {},\n      }) as DraggableCollectionState,\n    [state.collection, state.selectionManager],\n  );\n\n  const dragResult = useDraggableItem(\n    { key: item.key },\n    dragState ?? mockDragState,\n  );\n  const effectiveDragProps = isDraggable ? dragResult.dragProps : {};\n  const isDragging = isDraggable && dragResult.isDragging;\n\n  // Controlled state for menu trigger (enables keyboard opening with Shift+F10)\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  // Hover, focus, and focus-visible state handling\n  const { hoverProps, isHovered } = useHover({});\n  const [isFocused, setIsFocused] = useState(false);\n  const { focusProps } = useFocus({ onFocusChange: setIsFocused });\n  const { isFocusVisible } = useFocusVisible();\n\n  // Suppress focus-visible when restoring focus after editing\n  const [suppressFocusVisible, setSuppressFocusVisible] = useState(false);\n  const effectiveFocusVisible = isFocusVisible && !suppressFocusVisible;\n\n  const isActive = state.selectedKey === item.key;\n  const isDisabled = state.disabledKeys.has(item.key);\n  const isDeletable = !!onDelete;\n  const isEditing = editingKey === item.key;\n\n  // Compute effective values - Tab-level overrides Tabs-level\n  const effectiveIsEditable = tabData.isEditable ?? parentIsEditable ?? false;\n  const effectiveMenu =\n    tabData.menu === null ? null : tabData.menu ?? parentMenu;\n  const effectiveMenuTriggerProps: Partial<CubeItemActionProps> = {\n    ...parentMenuTriggerProps,\n    ...tabData.menuTriggerProps,\n  };\n  const effectiveMenuProps: Partial<CubeMenuProps<object>> = {\n    ...parentMenuProps,\n    ...tabData.menuProps,\n  };\n  const effectiveContextMenu =\n    tabData.contextMenu ?? parentContextMenu ?? false;\n  const effectiveType = tabData.type ?? type ?? 'default';\n\n  // Delete button shown only if onDelete is set AND no menu\n  const showDeleteButton = isDeletable && isMenuEmpty(effectiveMenu);\n\n  // Process menu items for auto-labels and disabled states\n  const processedMenu =\n    effectiveMenu && !isMenuEmpty(effectiveMenu)\n      ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable)\n      : null;\n\n  const itemKeyStr = String(item.key);\n\n  const handleDelete = useEvent(() => {\n    onDelete?.(itemKeyStr);\n  });\n\n  const handleStartEditing = useEvent(() => {\n    if (!effectiveIsEditable || isDisabled) return;\n\n    const titleText =\n      typeof tabData.title === 'string' ? tabData.title : itemKeyStr;\n\n    startEditing(itemKeyStr, titleText);\n  });\n\n  const handleSubmitEditing = useEvent(() => {\n    submitEditing(itemKeyStr, editValue, tabData.onTitleChange);\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    requestAnimationFrame(() => {\n      ref.current?.focus();\n    });\n  });\n\n  const handleCancelEditing = useEvent(() => {\n    cancelEditing();\n    // Suppress focus-visible and restore focus to the tab button after editing\n    setSuppressFocusVisible(true);\n    requestAnimationFrame(() => {\n      ref.current?.focus();\n    });\n  });\n\n  const handleEditValueChange = useEvent((value: string) => {\n    setEditValue(value);\n  });\n\n  // Handle menu actions - predefined actions first, then callbacks\n  const handleMenuAction = useEvent((action: Key) => {\n    // Strip the \".$\" prefix that React adds via Children.toArray/map\n    const actionStr = String(action);\n    const normalizedAction = actionStr.startsWith('.$')\n      ? actionStr.slice(2)\n      : actionStr;\n\n    // Handle predefined actions first (only if requirements are met)\n    if (normalizedAction === 'rename' && effectiveIsEditable) {\n      handleStartEditing();\n    }\n    if (normalizedAction === 'delete' && isDeletable) {\n      onDelete?.(itemKeyStr);\n    }\n    // Call Tab-level onAction first (with normalized action)\n    tabData.onAction?.(normalizedAction);\n    // Then call Tabs-level onAction with tab key (with normalized action)\n    parentOnAction?.(normalizedAction, itemKeyStr);\n  });\n\n  // Keyboard handler for accessibility shortcuts (WAI-ARIA Tabs Pattern)\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    // Reset focus-visible suppression on any keyboard interaction\n    if (suppressFocusVisible) {\n      setSuppressFocusVisible(false);\n    }\n\n    // F2 to start editing (standard rename shortcut)\n    if (e.key === 'F2' && effectiveIsEditable && !isDisabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      handleStartEditing();\n    }\n\n    // Shift+F10 opens the menu (standard context menu shortcut)\n    if (e.key === 'F10' && e.shiftKey && processedMenu) {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsMenuOpen(true);\n    }\n\n    // Delete key for direct tab deletion (ARIA Tabs pattern optional feature)\n    // Skip when editing to allow normal text editing operations\n    if (\n      (e.key === 'Delete' || e.key === 'Backspace') &&\n      isDeletable &&\n      !isEditing\n    ) {\n      e.preventDefault();\n      onDelete?.(itemKeyStr);\n    }\n  });\n\n  const mods = useMemo(\n    () => ({\n      type: effectiveType,\n      active: isActive,\n      deletable: isDeletable,\n      disabled: isDisabled,\n      editing: isEditing,\n      hovered: isHovered,\n      focused: isFocused,\n      'focus-visible': effectiveFocusVisible,\n      draggable: isDraggable,\n      dragging: isDragging,\n    }),\n    [\n      effectiveType,\n      isActive,\n      isDeletable,\n      isDisabled,\n      isEditing,\n      isHovered,\n      isFocused,\n      effectiveFocusVisible,\n      isDraggable,\n      isDragging,\n    ],\n  );\n\n  // Scroll active tab into view\n  useEffect(() => {\n    if (ref.current && isActive) {\n      ref.current.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n    }\n  }, [isActive]);\n\n  // Build menu element\n  const menuElement = processedMenu ? (\n    <Menu {...effectiveMenuProps} onAction={handleMenuAction}>\n      {processedMenu}\n    </Menu>\n  ) : null;\n\n  // Use the useContextMenu hook for context menu handling\n  const contextMenu = useContextMenu<HTMLDivElement, CubeMenuProps<object>>(\n    Menu,\n    { placement: 'bottom start' },\n    {\n      ...effectiveMenuProps,\n      onAction: handleMenuAction,\n      children: processedMenu,\n    },\n  );\n\n  // Build menu trigger action with controlled state for keyboard accessibility\n  const menuAction = menuElement ? (\n    <MenuTrigger isOpen={isMenuOpen} onOpenChange={setIsMenuOpen}>\n      <ItemAction\n        tabIndex={-1}\n        icon={<MoreIcon />}\n        {...effectiveMenuTriggerProps}\n      />\n      {menuElement}\n    </MenuTrigger>\n  ) : null;\n\n  // Build delete button (only shown when no menu)\n  const deleteAction = showDeleteButton ? (\n    <ItemAction\n      tabIndex={-1}\n      icon={<CloseIcon />}\n      tooltip=\"Close\"\n      onPress={handleDelete}\n    />\n  ) : null;\n\n  // Order: custom actions → menu trigger → delete button\n  const actions =\n    tabData.actions || menuAction || deleteAction ? (\n      <>\n        {tabData.actions}\n        {menuAction}\n        {deleteAction}\n      </>\n    ) : undefined;\n\n  // Measure actions width to pass to Item for proper space allocation\n  useLayoutEffect(() => {\n    if (actions && actionsRef.current) {\n      setActionsWidth(Math.round(actionsRef.current.offsetWidth));\n    }\n  }, [actions]);\n\n  // Determine effective size\n  const effectiveSize = tabData.size ?? size ?? 'medium';\n  const itemSize =\n    effectiveType === 'radio'\n      ? RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium']\n      : effectiveSize;\n\n  // Determine Item type prop\n  const itemType =\n    effectiveType === 'default' ? (isActive ? 'clear' : 'neutral') : 'neutral';\n\n  // Determine shape - file type uses sharp edges\n  const isFileType = effectiveType === 'file';\n  const itemShape = isFileType ? 'sharp' : undefined;\n\n  // Determine autoHideActions - tab-level overrides parent-level\n  const effectiveAutoHideActions =\n    tabData.autoHideActions ?? parentAutoHideActions;\n\n  // Render title with editing support if editable\n  const titleContent = effectiveIsEditable ? (\n    <EditableTitle\n      title={tabData.title}\n      isEditing={isEditing}\n      editValue={isEditing ? editValue : ''}\n      onEditValueChange={handleEditValueChange}\n      onStartEditing={handleStartEditing}\n      onSubmit={handleSubmitEditing}\n      onCancel={handleCancelEditing}\n    />\n  ) : (\n    tabData.title\n  );\n\n  // Extract tab-specific props and pass through the rest (style props) to the Item\n  const {\n    title: _title,\n    content: _content,\n    key: _key,\n    isDisabled: _isDisabled,\n    prerender: _prerender,\n    keepMounted: _keepMounted,\n    size: _size,\n    type: _type,\n    actions: _actions,\n    autoHideActions: _autoHideActions,\n    isEditable: _isEditable,\n    onTitleChange: _onTitleChange,\n    menu: _menu,\n    menuTriggerProps: _menuTriggerProps,\n    menuProps: _menuProps,\n    contextMenu: _contextMenu,\n    onAction: _onAction,\n    qa,\n    qaVal,\n    styles,\n    ...itemStyleProps\n  } = tabData;\n\n  // Use the hook's targetRef when context menu is enabled\n  const effectiveContainerRef =\n    effectiveContextMenu && processedMenu\n      ? contextMenu.targetRef\n      : containerRef;\n\n  // ARIA: indicate popup menu presence\n  const ariaProps = processedMenu ? { 'aria-haspopup': 'menu' as const } : {};\n\n  // Mods for TabContainer\n  const containerMods = {\n    ...mods,\n    'auto-hide-actions': effectiveAutoHideActions,\n  };\n\n  return (\n    <TabContainer\n      ref={effectiveContainerRef}\n      data-size={itemSize}\n      mods={containerMods}\n      tokens={{ '$actions-width': `${actionsWidth}px` }}\n      {...effectiveDragProps}\n    >\n      {/* Drop indicator before this tab */}\n      {isDraggable && dropState && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'before' }}\n          dropState={dropState}\n          position=\"before\"\n        />\n      )}\n      <TabElement\n        preserveActionsSpace\n        autoHideActions={effectiveAutoHideActions}\n        as=\"button\"\n        {...mergeProps(tabProps, hoverProps, focusProps, {\n          onKeyDown: handleKeyDown,\n        })}\n        {...ariaProps}\n        {...itemStyleProps}\n        ref={ref}\n        qa={qa ?? `Tab-${String(item.key)}`}\n        qaVal={qaVal}\n        styles={styles}\n        mods={mods}\n        isSelected={isActive}\n        isDisabled={isDisabled}\n        size={itemSize}\n        type={itemType}\n        shape={itemShape}\n        actions={actions ? true : undefined}\n      >\n        {titleContent}\n      </TabElement>\n      {/* Actions rendered outside the button for accessibility */}\n      {actions && (\n        <div\n          ref={actionsRef}\n          data-element=\"Actions\"\n          {...ACTIONS_EVENT_HANDLERS}\n        >\n          <ItemActionProvider\n            type={itemType}\n            theme=\"default\"\n            isDisabled={isDisabled}\n          >\n            {actions}\n          </ItemActionProvider>\n        </div>\n      )}\n      {effectiveContextMenu && processedMenu && contextMenu.rendered}\n      {/* Drop indicator after the last tab */}\n      {isDraggable && dropState && isLastTab && (\n        <TabDropIndicator\n          target={{ type: 'item', key: item.key, dropPosition: 'after' }}\n          dropState={dropState}\n          position=\"after\"\n        />\n      )}\n    </TabContainer>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,yBAAyB;CAC7B,UAAU,MAAkB,EAAE,iBAAiB;CAC/C,gBAAgB,MAAoB,EAAE,iBAAiB;CACvD,cAAc,MAAoB,EAAE,iBAAiB;CACrD,cAAc,MAAkB,EAAE,iBAAiB;CACnD,YAAY,MAAkB,EAAE,iBAAiB;CACjD,YAAY,MAAqB;AAC/B,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,GAAE,iBAAiB;;CAGxB;;;;;AAgBD,SAAS,UAAU,SAAsC;AACvD,KAAI,QAAQ,OAAO,KAAM,QAAO;CAChC,MAAM,SAAS,OAAO,QAAQ,IAAI;AAClC,QAAO,OAAO,WAAW,KAAK,GAAG,OAAO,MAAM,EAAE,GAAG;;;;;;AAOrD,SAAS,iBACP,UACA,qBACA,aACW;AACX,QAAO,SAAS,QAAQ,SAAS,CAAC,KAAK,UAAU;AAC/C,MAAI,CAAC,eAAe,MAAM,CAAE,QAAO;EAEnC,MAAM,WAAW,UAAU,MAAM;EACjC,MAAM,aAAa,MAAM;AAGzB,MAAI,aAAa,SACf,QAAO,aAAa,OAA0C;GAC5D,UAAU,WAAW,YAAY;GACjC,YAAY,WAAW,cAAc,CAAC;GACvC,CAAC;AAEJ,MAAI,aAAa,SACf,QAAO,aAAa,OAA0C;GAC5D,UAAU,WAAW,YAAY;GACjC,OAAO,WAAW,SAAS;GAC3B,YAAY,WAAW,cAAc,CAAC;GACvC,CAAC;AAIJ,MAAI,WAAW,YAAY,OAAO,WAAW,aAAa,SACxD,QAAO,aAAa,OAA0C,EAC5D,UAAU,iBACR,WAAW,UACX,qBACA,YACD,EACF,CAAC;AAGJ,SAAO;GACP;;;;;AAMJ,SAAS,YAAY,MAA0B;AAC7C,KAAI,SAAS,QAAQ,SAAS,OAAW,QAAO;AAEhD,QADiB,SAAS,QAAQ,KAAK,CACvB,WAAW;;;;;;;;;;;;;AA+B7B,SAAgB,UAAU,EAAE,MAAM,SAAS,aAA6B;CAEtE,MAAM,EACJ,OACA,MACA,MACA,iBAAiB,uBACjB,YAAY,kBACZ,MAAM,YACN,kBAAkB,wBAClB,WAAW,iBACX,aAAa,mBACb,UAAU,gBACV,UACA,WACA,WACA,YACA,WACA,cACA,cACA,eACA,kBACE,gBAAgB;CAEpB,MAAM,MAAM,OAA0B,KAAK;CAC3C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,aAAa,OAAO,EAAE,KAAK,KAAK,KAAK,EAAE,OAAO,IAAI;CAG1D,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CAGnD,MAAM,cAAc,CAAC,CAAC,aAAa,CAAC,CAAC;CAIrC,MAAM,gBAAgB,eAEjB;EACC,YAAY,MAAM;EAClB,kBAAkB,MAAM;EACxB,kBAAkB;EAClB,sCAAsB,IAAI,KAAU;EACpC,YAAY;EACZ,iBAAiB;EACjB,eAAe;EAChB,GACH,CAAC,MAAM,YAAY,MAAM,iBAAiB,CAC3C;CAED,MAAM,aAAa,iBACjB,EAAE,KAAK,KAAK,KAAK,EACjB,aAAa,cACd;CACD,MAAM,qBAAqB,cAAc,WAAW,YAAY,EAAE;CAClE,MAAM,aAAa,eAAe,WAAW;CAG7C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAC9C,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,EAAE,eAAe,SAAS,EAAE,eAAe,cAAc,CAAC;CAChE,MAAM,EAAE,mBAAmB,iBAAiB;CAG5C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,MAAM;CACvE,MAAM,wBAAwB,kBAAkB,CAAC;CAEjD,MAAM,WAAW,MAAM,gBAAgB,KAAK;CAC5C,MAAM,aAAa,MAAM,aAAa,IAAI,KAAK,IAAI;CACnD,MAAM,cAAc,CAAC,CAAC;CACtB,MAAM,YAAY,eAAe,KAAK;CAGtC,MAAM,sBAAsB,QAAQ,cAAc,oBAAoB;CACtE,MAAM,gBACJ,QAAQ,SAAS,OAAO,OAAO,QAAQ,QAAQ;CACjD,MAAM,4BAA0D;EAC9D,GAAG;EACH,GAAG,QAAQ;EACZ;CACD,MAAM,qBAAqD;EACzD,GAAG;EACH,GAAG,QAAQ;EACZ;CACD,MAAM,uBACJ,QAAQ,eAAe,qBAAqB;CAC9C,MAAM,gBAAgB,QAAQ,QAAQ,QAAQ;CAG9C,MAAM,mBAAmB,eAAe,YAAY,cAAc;CAGlE,MAAM,gBACJ,iBAAiB,CAAC,YAAY,cAAc,GACxC,iBAAiB,eAAe,qBAAqB,YAAY,GACjE;CAEN,MAAM,aAAa,OAAO,KAAK,IAAI;CAEnC,MAAM,eAAe,eAAe;AAClC,aAAW,WAAW;GACtB;CAEF,MAAM,qBAAqB,eAAe;AACxC,MAAI,CAAC,uBAAuB,WAAY;AAKxC,eAAa,YAFX,OAAO,QAAQ,UAAU,WAAW,QAAQ,QAAQ,WAEnB;GACnC;CAEF,MAAM,sBAAsB,eAAe;AACzC,gBAAc,YAAY,WAAW,QAAQ,cAAc;AAE3D,0BAAwB,KAAK;AAC7B,8BAA4B;AAC1B,OAAI,SAAS,OAAO;IACpB;GACF;CAEF,MAAM,sBAAsB,eAAe;AACzC,iBAAe;AAEf,0BAAwB,KAAK;AAC7B,8BAA4B;AAC1B,OAAI,SAAS,OAAO;IACpB;GACF;CAEF,MAAM,wBAAwB,UAAU,UAAkB;AACxD,eAAa,MAAM;GACnB;CAGF,MAAM,mBAAmB,UAAU,WAAgB;EAEjD,MAAM,YAAY,OAAO,OAAO;EAChC,MAAM,mBAAmB,UAAU,WAAW,KAAK,GAC/C,UAAU,MAAM,EAAE,GAClB;AAGJ,MAAI,qBAAqB,YAAY,oBACnC,qBAAoB;AAEtB,MAAI,qBAAqB,YAAY,YACnC,YAAW,WAAW;AAGxB,UAAQ,WAAW,iBAAiB;AAEpC,mBAAiB,kBAAkB,WAAW;GAC9C;CAGF,MAAM,gBAAgB,UAAU,MAAqB;AAEnD,MAAI,qBACF,yBAAwB,MAAM;AAIhC,MAAI,EAAE,QAAQ,QAAQ,uBAAuB,CAAC,YAAY;AACxD,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;AACnB,uBAAoB;;AAItB,MAAI,EAAE,QAAQ,SAAS,EAAE,YAAY,eAAe;AAClD,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;AACnB,iBAAc,KAAK;;AAKrB,OACG,EAAE,QAAQ,YAAY,EAAE,QAAQ,gBACjC,eACA,CAAC,WACD;AACA,KAAE,gBAAgB;AAClB,cAAW,WAAW;;GAExB;CAEF,MAAM,OAAO,eACJ;EACL,MAAM;EACN,QAAQ;EACR,WAAW;EACX,UAAU;EACV,SAAS;EACT,SAAS;EACT,SAAS;EACT,iBAAiB;EACjB,WAAW;EACX,UAAU;EACX,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAGD,iBAAgB;AACd,MAAI,IAAI,WAAW,SACjB,KAAI,QAAQ,iBAAiB;GAAE,OAAO;GAAW,QAAQ;GAAW,CAAC;IAEtE,CAAC,SAAS,CAAC;CAGd,MAAM,cAAc,gBAClB,oBAACA;EAAK,GAAI;EAAoB,UAAU;YACrC;GACI,GACL;CAGJ,MAAM,cAAc,eAClBA,QACA,EAAE,WAAW,gBAAgB,EAC7B;EACE,GAAG;EACH,UAAU;EACV,UAAU;EACX,CACF;CAGD,MAAM,aAAa,cACjB,qBAACC;EAAY,QAAQ;EAAY,cAAc;aAC7C,oBAAC;GACC,UAAU;GACV,MAAM,oBAAC,aAAW;GAClB,GAAI;IACJ,EACD;GACW,GACZ;CAGJ,MAAM,eAAe,mBACnB,oBAAC;EACC,UAAU;EACV,MAAM,oBAAC,cAAY;EACnB,SAAQ;EACR,SAAS;GACT,GACA;CAGJ,MAAM,UACJ,QAAQ,WAAW,cAAc,eAC/B;EACG,QAAQ;EACR;EACA;KACA,GACD;AAGN,uBAAsB;AACpB,MAAI,WAAW,WAAW,QACxB,iBAAgB,KAAK,MAAM,WAAW,QAAQ,YAAY,CAAC;IAE5D,CAAC,QAAQ,CAAC;CAGb,MAAM,gBAAgB,QAAQ,QAAQ,QAAQ;CAC9C,MAAM,WACJ,kBAAkB,UACd,eAAe,kBAAkB,UAAU,UAAU,YACrD;CAGN,MAAM,WACJ,kBAAkB,YAAa,WAAW,UAAU,YAAa;CAInE,MAAM,YADa,kBAAkB,SACN,UAAU;CAGzC,MAAM,2BACJ,QAAQ,mBAAmB;CAG7B,MAAM,eAAe,sBACnB,oBAAC;EACC,OAAO,QAAQ;EACJ;EACX,WAAW,YAAY,YAAY;EACnC,mBAAmB;EACnB,gBAAgB;EAChB,UAAU;EACV,UAAU;GACV,GAEF,QAAQ;CAIV,MAAM,EACJ,OAAO,QACP,SAAS,UACT,KAAK,MACL,YAAY,aACZ,WAAW,YACX,aAAa,cACb,MAAM,OACN,MAAM,OACN,SAAS,UACT,iBAAiB,kBACjB,YAAY,aACZ,eAAe,gBACf,MAAM,OACN,kBAAkB,mBAClB,WAAW,YACX,aAAa,cACb,UAAU,WACV,IACA,OACA,QACA,GAAG,mBACD;CAGJ,MAAM,wBACJ,wBAAwB,gBACpB,YAAY,YACZ;CAGN,MAAM,YAAY,gBAAgB,EAAE,iBAAiB,QAAiB,GAAG,EAAE;CAG3E,MAAM,gBAAgB;EACpB,GAAG;EACH,qBAAqB;EACtB;AAED,QACE,qBAAC;EACC,KAAK;EACL,aAAW;EACX,MAAM;EACN,QAAQ,EAAE,kBAAkB,GAAG,aAAa,KAAK;EACjD,GAAI;;GAGH,eAAe,aACd,oBAAC;IACC,QAAQ;KAAE,MAAM;KAAQ,KAAK,KAAK;KAAK,cAAc;KAAU;IACpD;IACX,UAAS;KACT;GAEJ,oBAAC;IACC;IACA,iBAAiB;IACjB,IAAG;IACH,GAAIC,aAAW,UAAU,YAAY,YAAY,EAC/C,WAAW,eACZ,CAAC;IACF,GAAI;IACJ,GAAI;IACC;IACL,IAAI,MAAM,OAAO,OAAO,KAAK,IAAI;IAC1B;IACC;IACF;IACN,YAAY;IACA;IACZ,MAAM;IACN,MAAM;IACN,OAAO;IACP,SAAS,UAAU,OAAO;cAEzB;KACU;GAEZ,WACC,oBAAC;IACC,KAAK;IACL,gBAAa;IACb,GAAI;cAEJ,oBAAC;KACC,MAAM;KACN,OAAM;KACM;eAEX;MACkB;KACjB;GAEP,wBAAwB,iBAAiB,YAAY;GAErD,eAAe,aAAa,aAC3B,oBAAC;IACC,QAAQ;KAAE,MAAM;KAAQ,KAAK,KAAK;KAAK,cAAc;KAAS;IACnD;IACX,UAAS;KACT;;GAES"}

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

@@ -0,0 +1,54 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { DropIndicatorElement } from "./styled.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDropIndicator } from "react-aria";
+
+//#region src/components/navigation/Tabs/TabDropIndicator.tsx
+/**
+* Visual drop indicator for drag-and-drop tab reordering.
+*
+* Renders a vertical line showing where the dragged tab will be dropped.
+* Only visible when the drop target is active.
+*/
+function TabDropIndicator({ target, dropState, position }) {
+	const ref = useRef(null);
+	const prevContentRef = useRef(null);
+	const [, setTick] = useState(0);
+	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target }, dropState, ref);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const tabList = element.closest("[data-element=\"TabList\"]");
+		if (!tabList) return;
+		prevContentRef.current = tabList.textContent;
+		const observer = new MutationObserver(() => {
+			const currentContent = tabList.textContent;
+			if (currentContent !== prevContentRef.current) {
+				prevContentRef.current = currentContent;
+				setTick((n) => n + 1);
+			}
+		});
+		observer.observe(tabList, {
+			subtree: true,
+			characterData: true,
+			childList: true
+		});
+		return () => observer.disconnect();
+	}, [isHidden]);
+	if (isHidden) return null;
+	return /* @__PURE__ */ jsx(DropIndicatorElement, {
+		ref,
+		role: "option",
+		...dropIndicatorProps,
+		mods: {
+			"drop-target": isDropTarget,
+			after: position === "after",
+			before: position === "before"
+		}
+	});
+}
+
+//#endregion
+export { TabDropIndicator };
+//# sourceMappingURL=TabDropIndicator.js.map

package/dist/components/navigation/Tabs/TabDropIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabDropIndicator.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabDropIndicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useDropIndicator } from 'react-aria';\n\nimport { DropIndicatorElement } from './styled';\n\nimport type { DropTarget } from 'react-aria';\nimport type { DroppableCollectionState } from 'react-stately';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface TabDropIndicatorProps {\n  /** Drop target configuration */\n  target: DropTarget;\n  /** Droppable collection state from React Aria */\n  dropState: DroppableCollectionState;\n  /** Position of the indicator (before or after the tab) */\n  position: 'before' | 'after';\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Visual drop indicator for drag-and-drop tab reordering.\n *\n * Renders a vertical line showing where the dragged tab will be dropped.\n * Only visible when the drop target is active.\n */\nexport function TabDropIndicator({\n  target,\n  dropState,\n  position,\n}: TabDropIndicatorProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const prevContentRef = useRef<string | null>(null);\n  const [, setTick] = useState(0);\n\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target },\n    dropState,\n    ref,\n  );\n\n  // Re-evaluate drop target registration when tab content changes.\n  // Active only while the indicator is rendered in the DOM (during drags).\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const tabList = element.closest('[data-element=\"TabList\"]');\n    if (!tabList) return;\n\n    prevContentRef.current = tabList.textContent;\n\n    const observer = new MutationObserver(() => {\n      const currentContent = tabList.textContent;\n\n      if (currentContent !== prevContentRef.current) {\n        prevContentRef.current = currentContent;\n        setTick((n) => n + 1);\n      }\n    });\n\n    observer.observe(tabList, {\n      subtree: true,\n      characterData: true,\n      childList: true,\n    });\n\n    return () => observer.disconnect();\n  }, [isHidden]);\n\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <DropIndicatorElement\n      ref={ref}\n      role=\"option\"\n      {...dropIndicatorProps}\n      mods={{\n        'drop-target': isDropTarget,\n        after: position === 'after',\n        before: position === 'before',\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAgB,iBAAiB,EAC/B,QACA,WACA,YACwB;CACxB,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,iBAAiB,OAAsB,KAAK;CAClD,MAAM,GAAG,WAAW,SAAS,EAAE;CAE/B,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ,EACV,WACA,IACD;AAID,iBAAgB;EACd,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QAAS;EAEd,MAAM,UAAU,QAAQ,QAAQ,6BAA2B;AAC3D,MAAI,CAAC,QAAS;AAEd,iBAAe,UAAU,QAAQ;EAEjC,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,iBAAiB,QAAQ;AAE/B,OAAI,mBAAmB,eAAe,SAAS;AAC7C,mBAAe,UAAU;AACzB,aAAS,MAAM,IAAI,EAAE;;IAEvB;AAEF,WAAS,QAAQ,SAAS;GACxB,SAAS;GACT,eAAe;GACf,WAAW;GACZ,CAAC;AAEF,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,CAAC;AAEd,KAAI,SACF,QAAO;AAGT,QACE,oBAAC;EACM;EACL,MAAK;EACL,GAAI;EACJ,MAAM;GACJ,eAAe;GACf,OAAO,aAAa;GACpB,QAAQ,aAAa;GACtB;GACD"}

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

@@ -0,0 +1,109 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { TabPanelElement } from "./styled.js";
+import { useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { useTabPanel } from "react-aria";
+
+//#region src/components/navigation/Tabs/TabPanel.tsx
+/**
+* Determines if a panel should be rendered based on prerender/keepMounted settings.
+*/
+function shouldRenderPanel(isActive, wasVisited, effectivePrerender, effectiveKeepMounted) {
+	return !!effectivePrerender || isActive || !!effectiveKeepMounted && wasVisited;
+}
+/**
+* Renders a single tab panel with proper ARIA attributes.
+*/
+function TabPanelRenderer({ tabKey, state, content, prerender, keepMounted, tabPrerender, tabKeepMounted, visitedKeys, panelStyles, qa, qaVal }) {
+	const ref = useRef(null);
+	const { tabPanelProps } = useTabPanel({ key: tabKey }, state, ref);
+	const isActive = state.selectedKey === tabKey;
+	const effectivePrerender = tabPrerender ?? prerender;
+	const effectiveKeepMounted = tabKeepMounted ?? keepMounted;
+	if (!shouldRenderPanel(isActive, visitedKeys.has(tabKey), effectivePrerender, effectiveKeepMounted)) return null;
+	return /* @__PURE__ */ jsx(TabPanelElement, {
+		...tabPanelProps,
+		ref,
+		mods: { active: isActive },
+		qa: qa ?? "TabPanel",
+		qaVal: qaVal ?? String(tabKey),
+		styles: panelStyles,
+		children: content
+	});
+}
+/**
+* Renders panels with content caching for `renderPanel`.
+*
+* Core principle: `renderPanel` is only called when the tab is active
+* (or once on mount for `prerender`). Inactive panels use cached content.
+*
+* Caching behavior:
+* - `keepMounted=true`: Cache content after first activation, reuse while inactive
+* - `prerender=true`: Call `renderPanel` once on mount, reuse until active again
+* - `panelCacheKeys`: Adds cache-key-based invalidation (lazy - only when active)
+* - No caching props: Only active panel is rendered, unmount when inactive
+*/
+function CachedPanelRenderer({ parsedTabs, explicitPanels, state, renderPanel, panelCacheKeys, prerender, keepMounted, visitedKeys }) {
+	const contentCacheRef = useRef(/* @__PURE__ */ new Map());
+	/** Get the cache key for a panel. Returns undefined if not defined. */
+	const getCacheKey = (key) => panelCacheKeys?.[key];
+	/** Check if a panel has a defined (non-undefined) cache key. */
+	const hasCacheKey = (key) => panelCacheKeys != null && key in panelCacheKeys && panelCacheKeys[key] !== void 0;
+	/**
+	* Determine if we should call renderPanel for this tab.
+	*/
+	const shouldCallRenderPanel = (tabKey, isActive) => {
+		const cached = contentCacheRef.current.get(tabKey);
+		if (!cached) return true;
+		if (isActive) {
+			if (hasCacheKey(tabKey)) {
+				const currentCacheKey = getCacheKey(tabKey);
+				return cached.cacheKey !== currentCacheKey;
+			}
+			return true;
+		}
+		return false;
+	};
+	const currentTabKeys = useMemo(() => new Set(parsedTabs.map((t) => t.key)), [parsedTabs]);
+	useEffect(() => {
+		for (const key of contentCacheRef.current.keys()) if (!currentTabKeys.has(key)) contentCacheRef.current.delete(key);
+	}, [currentTabKeys]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: parsedTabs.map((tab) => {
+		const explicitPanel = explicitPanels.get(tab.key);
+		const tabPrerender = explicitPanel?.prerender ?? tab.prerender;
+		const tabKeepMounted = explicitPanel?.keepMounted ?? tab.keepMounted;
+		const effectivePrerender = tabPrerender ?? prerender;
+		const effectiveKeepMounted = tabKeepMounted ?? keepMounted;
+		const isActive = state.selectedKey === tab.key;
+		if (!shouldRenderPanel(isActive, visitedKeys.has(tab.key), effectivePrerender, effectiveKeepMounted)) {
+			if (!effectiveKeepMounted && !effectivePrerender) contentCacheRef.current.delete(tab.key);
+			return null;
+		}
+		let content;
+		if (shouldCallRenderPanel(tab.key, isActive)) {
+			content = renderPanel(tab.key);
+			const currentCacheKey = getCacheKey(tab.key);
+			contentCacheRef.current.set(tab.key, {
+				content,
+				cacheKey: currentCacheKey
+			});
+		} else content = contentCacheRef.current.get(tab.key)?.content ?? null;
+		return /* @__PURE__ */ jsx(TabPanelRenderer, {
+			tabKey: tab.key,
+			state,
+			content,
+			prerender,
+			keepMounted,
+			tabPrerender,
+			tabKeepMounted,
+			visitedKeys,
+			panelStyles: explicitPanel?.styles,
+			qa: explicitPanel?.qa,
+			qaVal: explicitPanel?.qaVal
+		}, tab.key);
+	}) });
+}
+
+//#endregion
+export { CachedPanelRenderer, TabPanelRenderer };
+//# sourceMappingURL=TabPanel.js.map

package/dist/components/navigation/Tabs/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabPanel.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useTabPanel } from 'react-aria';\n\nimport { TabPanelElement } from './styled';\n\nimport type { ReactNode } from 'react';\nimport type { AriaTabPanelProps } from 'react-aria';\nimport type { TabListState } from 'react-stately';\nimport type { Styles } from '../../../tasty';\nimport type { CacheKeyValue, ParsedPanel, ParsedTab } from './types';\n\n// =============================================================================\n// Panel Rendering Utilities\n// =============================================================================\n\n/**\n * Determines if a panel should be rendered based on prerender/keepMounted settings.\n */\nexport function shouldRenderPanel(\n  isActive: boolean,\n  wasVisited: boolean,\n  effectivePrerender: boolean | undefined,\n  effectiveKeepMounted: boolean | undefined,\n): boolean {\n  return (\n    !!effectivePrerender || isActive || (!!effectiveKeepMounted && wasVisited)\n  );\n}\n\n// =============================================================================\n// TabPanelRenderer Component\n// =============================================================================\n\nexport interface TabPanelRendererProps {\n  tabKey: string;\n  state: TabListState<object>;\n  content: ReactNode;\n  prerender?: boolean;\n  keepMounted?: boolean;\n  tabPrerender?: boolean;\n  tabKeepMounted?: boolean;\n  visitedKeys: Set<string>;\n  panelStyles?: Styles;\n  qa?: string;\n  qaVal?: string;\n}\n\n/**\n * Renders a single tab panel with proper ARIA attributes.\n */\nexport function TabPanelRenderer({\n  tabKey,\n  state,\n  content,\n  prerender,\n  keepMounted,\n  tabPrerender,\n  tabKeepMounted,\n  visitedKeys,\n  panelStyles,\n  qa,\n  qaVal,\n}: TabPanelRendererProps) {\n  const ref = useRef<HTMLElement>(null);\n  const { tabPanelProps } = useTabPanel(\n    { key: tabKey } as AriaTabPanelProps,\n    state,\n    ref,\n  );\n\n  const isActive = state.selectedKey === tabKey;\n\n  // Determine effective prerender/keepMounted (tab-level overrides global)\n  const effectivePrerender = tabPrerender ?? prerender;\n  const effectiveKeepMounted = tabKeepMounted ?? keepMounted;\n\n  // Determine if panel should render\n  if (\n    !shouldRenderPanel(\n      isActive,\n      visitedKeys.has(tabKey),\n      effectivePrerender,\n      effectiveKeepMounted,\n    )\n  ) {\n    return null;\n  }\n\n  return (\n    <TabPanelElement\n      {...tabPanelProps}\n      ref={ref}\n      mods={{ active: isActive }}\n      qa={qa ?? 'TabPanel'}\n      qaVal={qaVal ?? String(tabKey)}\n      styles={panelStyles}\n    >\n      {content}\n    </TabPanelElement>\n  );\n}\n\n// =============================================================================\n// CachedPanelRenderer Component\n// =============================================================================\n\nexport interface CachedPanelRendererProps {\n  parsedTabs: ParsedTab[];\n  explicitPanels: Map<string, ParsedPanel>;\n  state: TabListState<object>;\n  renderPanel: (key: string) => ReactNode;\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  prerender: boolean;\n  keepMounted: boolean;\n  visitedKeys: Set<string>;\n}\n\n/**\n * Renders panels with content caching for `renderPanel`.\n *\n * Core principle: `renderPanel` is only called when the tab is active\n * (or once on mount for `prerender`). Inactive panels use cached content.\n *\n * Caching behavior:\n * - `keepMounted=true`: Cache content after first activation, reuse while inactive\n * - `prerender=true`: Call `renderPanel` once on mount, reuse until active again\n * - `panelCacheKeys`: Adds cache-key-based invalidation (lazy - only when active)\n * - No caching props: Only active panel is rendered, unmount when inactive\n */\nexport function CachedPanelRenderer({\n  parsedTabs,\n  explicitPanels,\n  state,\n  renderPanel,\n  panelCacheKeys,\n  prerender,\n  keepMounted,\n  visitedKeys,\n}: CachedPanelRendererProps) {\n  // Cache for rendered content - stores { content, cacheKey } per panel\n  const contentCacheRef = useRef<\n    Map<string, { content: ReactNode; cacheKey: CacheKeyValue }>\n  >(new Map());\n\n  /** Get the cache key for a panel. Returns undefined if not defined. */\n  const getCacheKey = (key: string): CacheKeyValue => panelCacheKeys?.[key];\n\n  /** Check if a panel has a defined (non-undefined) cache key. */\n  const hasCacheKey = (key: string): boolean =>\n    panelCacheKeys != null &&\n    key in panelCacheKeys &&\n    panelCacheKeys[key] !== undefined;\n\n  /**\n   * Determine if we should call renderPanel for this tab.\n   */\n  const shouldCallRenderPanel = (\n    tabKey: string,\n    isActive: boolean,\n  ): boolean => {\n    const cached = contentCacheRef.current.get(tabKey);\n\n    // No cache exists - always need to populate on first render\n    if (!cached) {\n      return true;\n    }\n\n    // Cache exists\n    if (isActive) {\n      // If panelCacheKeys has an entry for this panel, use cache-key-based invalidation\n      if (hasCacheKey(tabKey)) {\n        const currentCacheKey = getCacheKey(tabKey);\n        return cached.cacheKey !== currentCacheKey;\n      }\n\n      // No panelCacheKeys entry = always re-render when active\n      return true;\n    }\n\n    // Inactive with cache - use cache\n    return false;\n  };\n\n  // Clean up cache entries for removed tabs\n  const currentTabKeys = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of contentCacheRef.current.keys()) {\n      if (!currentTabKeys.has(key)) {\n        contentCacheRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeys]);\n\n  return (\n    <>\n      {parsedTabs.map((tab) => {\n        const explicitPanel = explicitPanels.get(tab.key);\n        const tabPrerender = explicitPanel?.prerender ?? tab.prerender;\n        const tabKeepMounted = explicitPanel?.keepMounted ?? tab.keepMounted;\n        const effectivePrerender = tabPrerender ?? prerender;\n        const effectiveKeepMounted = tabKeepMounted ?? keepMounted;\n\n        const isActive = state.selectedKey === tab.key;\n        const wasVisited = visitedKeys.has(tab.key);\n\n        // Determine if panel should be in DOM (visibility)\n        if (\n          !shouldRenderPanel(\n            isActive,\n            wasVisited,\n            effectivePrerender,\n            effectiveKeepMounted,\n          )\n        ) {\n          // Panel not in DOM - clear cache if no caching strategy\n          if (!effectiveKeepMounted && !effectivePrerender) {\n            contentCacheRef.current.delete(tab.key);\n          }\n          return null;\n        }\n\n        // Determine if we need to call renderPanel\n        let content: ReactNode;\n        const needsRender = shouldCallRenderPanel(tab.key, isActive);\n\n        if (needsRender) {\n          // Call renderPanel and cache the result\n          content = renderPanel(tab.key);\n          const currentCacheKey = getCacheKey(tab.key);\n          contentCacheRef.current.set(tab.key, {\n            content,\n            cacheKey: currentCacheKey,\n          });\n        } else {\n          // Use cached content\n          const cached = contentCacheRef.current.get(tab.key);\n          content = cached?.content ?? null;\n        }\n\n        return (\n          <TabPanelRenderer\n            key={tab.key}\n            tabKey={tab.key}\n            state={state}\n            content={content}\n            prerender={prerender}\n            keepMounted={keepMounted}\n            tabPrerender={tabPrerender}\n            tabKeepMounted={tabKeepMounted}\n            visitedKeys={visitedKeys}\n            panelStyles={explicitPanel?.styles}\n            qa={explicitPanel?.qa}\n            qaVal={explicitPanel?.qaVal}\n          />\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,kBACd,UACA,YACA,oBACA,sBACS;AACT,QACE,CAAC,CAAC,sBAAsB,YAAa,CAAC,CAAC,wBAAwB;;;;;AAyBnE,SAAgB,iBAAiB,EAC/B,QACA,OACA,SACA,WACA,aACA,cACA,gBACA,aACA,aACA,IACA,SACwB;CACxB,MAAM,MAAM,OAAoB,KAAK;CACrC,MAAM,EAAE,kBAAkB,YACxB,EAAE,KAAK,QAAQ,EACf,OACA,IACD;CAED,MAAM,WAAW,MAAM,gBAAgB;CAGvC,MAAM,qBAAqB,gBAAgB;CAC3C,MAAM,uBAAuB,kBAAkB;AAG/C,KACE,CAAC,kBACC,UACA,YAAY,IAAI,OAAO,EACvB,oBACA,qBACD,CAED,QAAO;AAGT,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM,EAAE,QAAQ,UAAU;EAC1B,IAAI,MAAM;EACV,OAAO,SAAS,OAAO,OAAO;EAC9B,QAAQ;YAEP;GACe;;;;;;;;;;;;;;AA+BtB,SAAgB,oBAAoB,EAClC,YACA,gBACA,OACA,aACA,gBACA,WACA,aACA,eAC2B;CAE3B,MAAM,kBAAkB,uBAEtB,IAAI,KAAK,CAAC;;CAGZ,MAAM,eAAe,QAA+B,iBAAiB;;CAGrE,MAAM,eAAe,QACnB,kBAAkB,QAClB,OAAO,kBACP,eAAe,SAAS;;;;CAK1B,MAAM,yBACJ,QACA,aACY;EACZ,MAAM,SAAS,gBAAgB,QAAQ,IAAI,OAAO;AAGlD,MAAI,CAAC,OACH,QAAO;AAIT,MAAI,UAAU;AAEZ,OAAI,YAAY,OAAO,EAAE;IACvB,MAAM,kBAAkB,YAAY,OAAO;AAC3C,WAAO,OAAO,aAAa;;AAI7B,UAAO;;AAIT,SAAO;;CAIT,MAAM,iBAAiB,cACf,IAAI,IAAI,WAAW,KAAK,MAAM,EAAE,IAAI,CAAC,EAC3C,CAAC,WAAW,CACb;AAED,iBAAgB;AACd,OAAK,MAAM,OAAO,gBAAgB,QAAQ,MAAM,CAC9C,KAAI,CAAC,eAAe,IAAI,IAAI,CAC1B,iBAAgB,QAAQ,OAAO,IAAI;IAGtC,CAAC,eAAe,CAAC;AAEpB,QACE,4CACG,WAAW,KAAK,QAAQ;EACvB,MAAM,gBAAgB,eAAe,IAAI,IAAI,IAAI;EACjD,MAAM,eAAe,eAAe,aAAa,IAAI;EACrD,MAAM,iBAAiB,eAAe,eAAe,IAAI;EACzD,MAAM,qBAAqB,gBAAgB;EAC3C,MAAM,uBAAuB,kBAAkB;EAE/C,MAAM,WAAW,MAAM,gBAAgB,IAAI;AAI3C,MACE,CAAC,kBACC,UALe,YAAY,IAAI,IAAI,IAAI,EAOvC,oBACA,qBACD,EACD;AAEA,OAAI,CAAC,wBAAwB,CAAC,mBAC5B,iBAAgB,QAAQ,OAAO,IAAI,IAAI;AAEzC,UAAO;;EAIT,IAAI;AAGJ,MAFoB,sBAAsB,IAAI,KAAK,SAAS,EAE3C;AAEf,aAAU,YAAY,IAAI,IAAI;GAC9B,MAAM,kBAAkB,YAAY,IAAI,IAAI;AAC5C,mBAAgB,QAAQ,IAAI,IAAI,KAAK;IACnC;IACA,UAAU;IACX,CAAC;QAIF,WADe,gBAAgB,QAAQ,IAAI,IAAI,IAAI,EACjC,WAAW;AAG/B,SACE,oBAAC;GAEC,QAAQ,IAAI;GACL;GACE;GACE;GACE;GACC;GACE;GACH;GACb,aAAa,eAAe;GAC5B,IAAI,eAAe;GACnB,OAAO,eAAe;KAXjB,IAAI,IAYT;GAEJ,GACD"}

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

@@ -0,0 +1,53 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { MoreIcon } from "../../../icons/MoreIcon.js";
+import { FilterPicker } from "../../fields/FilterPicker/FilterPicker.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/navigation/Tabs/TabPicker.tsx
+/**
+* Tab picker component that displays a dropdown menu of all tabs.
+*
+* Used in the Tabs suffix area when tabs overflow to provide quick navigation
+* to any tab without scrolling.
+*/
+function TabPicker({ tabs, selectedKey, onSelect, onDelete, size, type = "default" }) {
+	const isDeletable = !!onDelete;
+	return /* @__PURE__ */ jsx(FilterPicker, {
+		selectionMode: "single",
+		selectedKey,
+		renderSummary: false,
+		icon: /* @__PURE__ */ jsx(MoreIcon, {}),
+		rightIcon: null,
+		shape: "sharp",
+		type: "neutral",
+		size: size === "xsmall" ? "small" : size,
+		styles: { border: type === "file" ? {
+			"": 0,
+			"!:first-child": "left"
+		} : 0 },
+		triggerStyles: { border: 0 },
+		"aria-label": "Select tab",
+		onSelectionChange: (key) => {
+			if (key != null) onSelect(String(key));
+		},
+		children: tabs.map((tab) => /* @__PURE__ */ jsx(FilterPicker.Item, {
+			textValue: typeof tab.title === "string" ? tab.title : String(tab.key),
+			autoHideActions: isDeletable,
+			actions: isDeletable ? /* @__PURE__ */ jsx(ItemAction, {
+				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+				theme: "danger",
+				"aria-label": "Close",
+				onPress: () => {
+					onDelete(tab.key);
+				}
+			}) : void 0,
+			children: tab.title
+		}, tab.key))
+	});
+}
+
+//#endregion
+export { TabPicker };
+//# sourceMappingURL=TabPicker.js.map

package/dist/components/navigation/Tabs/TabPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPicker.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabPicker.tsx"],"sourcesContent":["import { CloseIcon, MoreIcon } from '../../../icons';\nimport { ItemAction } from '../../actions/ItemAction';\nimport { FilterPicker } from '../../fields/FilterPicker/FilterPicker';\n\nimport type { ParsedTab, TabSize, TabType } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface TabPickerProps {\n  /** Ordered list of parsed tabs to display in the picker */\n  tabs: ParsedTab[];\n  /** Currently selected tab key */\n  selectedKey: string | null;\n  /** Callback when a tab is selected from the picker */\n  onSelect: (key: string) => void;\n  /** Callback when a tab should be deleted. When provided, shows delete action on items. */\n  onDelete?: (key: string) => void;\n  /** Size of the picker trigger button */\n  size?: TabSize;\n  /** Type of the parent Tabs component (for border styling) */\n  type?: TabType;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Tab picker component that displays a dropdown menu of all tabs.\n *\n * Used in the Tabs suffix area when tabs overflow to provide quick navigation\n * to any tab without scrolling.\n */\nexport function TabPicker({\n  tabs,\n  selectedKey,\n  onSelect,\n  onDelete,\n  size,\n  type = 'default',\n}: TabPickerProps) {\n  const isDeletable = !!onDelete;\n\n  // Map TabSize to FilterPicker size (xsmall -> small)\n  const pickerSize = size === 'xsmall' ? 'small' : size;\n\n  // Only show border divider for file type\n  const showBorderDivider = type === 'file';\n\n  return (\n    <FilterPicker\n      selectionMode=\"single\"\n      selectedKey={selectedKey}\n      renderSummary={false}\n      icon={<MoreIcon />}\n      rightIcon={null}\n      shape=\"sharp\"\n      type=\"neutral\"\n      size={pickerSize}\n      // Apply border to wrapper (FilterPickerWrapper) so :first-child evaluates\n      // relative to Suffix container, not the internal DialogTrigger\n      styles={{\n        border: showBorderDivider\n          ? {\n              '': 0,\n              '!:first-child': 'left',\n            }\n          : 0,\n      }}\n      triggerStyles={{ border: 0 }}\n      aria-label=\"Select tab\"\n      onSelectionChange={(key) => {\n        if (key != null) {\n          onSelect(String(key));\n        }\n      }}\n    >\n      {tabs.map((tab) => (\n        <FilterPicker.Item\n          key={tab.key}\n          textValue={\n            typeof tab.title === 'string' ? tab.title : String(tab.key)\n          }\n          autoHideActions={isDeletable}\n          actions={\n            isDeletable ? (\n              <ItemAction\n                icon={<CloseIcon />}\n                theme=\"danger\"\n                aria-label=\"Close\"\n                onPress={() => {\n                  onDelete(tab.key);\n                }}\n              />\n            ) : undefined\n          }\n        >\n          {tab.title}\n        </FilterPicker.Item>\n      ))}\n    </FilterPicker>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAmCA,SAAgB,UAAU,EACxB,MACA,aACA,UACA,UACA,MACA,OAAO,aACU;CACjB,MAAM,cAAc,CAAC,CAAC;AAQtB,QACE,oBAAC;EACC,eAAc;EACD;EACb,eAAe;EACf,MAAM,oBAAC,aAAW;EAClB,WAAW;EACX,OAAM;EACN,MAAK;EACL,MAde,SAAS,WAAW,UAAU;EAiB7C,QAAQ,EACN,QAfoB,SAAS,SAgBzB;GACE,IAAI;GACJ,iBAAiB;GAClB,GACD,GACL;EACD,eAAe,EAAE,QAAQ,GAAG;EAC5B,cAAW;EACX,oBAAoB,QAAQ;AAC1B,OAAI,OAAO,KACT,UAAS,OAAO,IAAI,CAAC;;YAIxB,KAAK,KAAK,QACT,oBAAC,aAAa;GAEZ,WACE,OAAO,IAAI,UAAU,WAAW,IAAI,QAAQ,OAAO,IAAI,IAAI;GAE7D,iBAAiB;GACjB,SACE,cACE,oBAAC;IACC,MAAM,oBAAC,cAAY;IACnB,OAAM;IACN,cAAW;IACX,eAAe;AACb,cAAS,IAAI,IAAI;;KAEnB,GACA;aAGL,IAAI;KAlBA,IAAI,IAmBS,CACpB;GACW"}