@cube-dev/ui-kit 0.0.0-canary-a3f23c9 → 0.0.0-canary-1ffe072

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";

package/dist/components/layout/Flex.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Flow.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Grid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Panel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/layout/Prefix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";

package/dist/components/layout/ResizablePanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../_internal/hooks/use-event.js";

package/dist/components/layout/Space.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/layout/Suffix.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
 import { useLayoutEffect, useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | 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";
@@ -8,6 +8,7 @@ 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 { createMockDragState } from "../../shared/DraggableCollection.js";
 import { TabContainer, TabElement } from "./styled.js";
 import { EditableTitle } from "./EditableTitle.js";
 import { TabDropIndicator } from "./TabDropIndicator.js";
@@ -99,19 +100,7 @@ function TabButton({ item, tabData, isLastTab }) {
 	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(),
-		draggedKey: null,
-		draggingKeys: /* @__PURE__ */ new Set(),
-		getAllowedDropOperations: () => [],
-		preview: null,
-		isDisabled: false,
-		startDrag: () => {},
-		endDrag: () => {}
-	}), [state.collection, state.selectionManager]);
+	const mockDragState = useMemo(() => createMockDragState(state.collection, state.selectionManager), [state.collection, state.selectionManager]);
 	const dragResult = useDraggableItem({ key: item.key }, dragState ?? mockDragState);
 	const effectiveDragProps = isDraggable ? dragResult.dragProps : {};
 	const isDragging = isDraggable && dragResult.isDragging;

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

@@ -1 +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  // Use Children.forEach instead of Children.toArray to avoid React prepending\n  // \".$\" to element keys, which breaks selectedKeys matching in Menu.\n  const result: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      result.push(child);\n      return;\n    }\n\n    const childKey = getRawKey(child);\n    const childProps = child.props as MenuItemLikeProps;\n\n    // Handle predefined action keys\n    if (childKey === 'rename') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: childProps.children ?? 'Rename',\n          isDisabled: childProps.isDisabled ?? !effectiveIsEditable,\n        }),\n      );\n      return;\n    }\n    if (childKey === 'delete') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: childProps.children ?? 'Delete',\n          theme: childProps.theme ?? 'danger',\n          isDisabled: childProps.isDisabled ?? !isDeletable,\n        }),\n      );\n      return;\n    }\n\n    // Recursively process Menu.Section children\n    if (childProps.children && typeof childProps.children !== 'string') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: processMenuItems(\n            childProps.children,\n            effectiveIsEditable,\n            isDeletable,\n          ),\n        }),\n      );\n      return;\n    }\n\n    result.push(child);\n  });\n\n  return result;\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        draggedKey: null,\n        draggingKeys: new Set<Key>(),\n        getAllowedDropOperations: () => [],\n        preview: null,\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  const contextMenuEnabled =\n    effectiveContextMenu === true || effectiveContextMenu === 'context-only';\n  const contextMenuOnly = effectiveContextMenu === 'context-only';\n\n  // Inline close when no menu, or context-only (no overflow trigger)\n  const showDeleteButton =\n    isDeletable && (isMenuEmpty(effectiveMenu) || contextMenuOnly);\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  const menuElement = processedMenu ? (\n    <Menu {...effectiveMenuProps} onAction={handleMenuAction}>\n      {processedMenu}\n    </Menu>\n  ) : null;\n\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  // 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      if (contextMenuOnly) {\n        contextMenu.open();\n      } else {\n        setIsMenuOpen(true);\n      }\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  // Overflow trigger (hidden in context-only mode)\n  const menuAction =\n    menuElement && !contextMenuOnly ? (\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    contextMenuEnabled && processedMenu ? contextMenu.targetRef : 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      {contextMenuEnabled && 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;CAGX,MAAM,SAAsB,EAAE;AAE9B,UAAS,QAAQ,WAAW,UAAU;AACpC,MAAI,CAAC,eAAe,MAAM,EAAE;AAC1B,UAAO,KAAK,MAAM;AAClB;;EAGF,MAAM,WAAW,UAAU,MAAM;EACjC,MAAM,aAAa,MAAM;AAGzB,MAAI,aAAa,UAAU;AACzB,UAAO,KACL,aAAa,OAA0C;IACrD,UAAU,WAAW,YAAY;IACjC,YAAY,WAAW,cAAc,CAAC;IACvC,CAAC,CACH;AACD;;AAEF,MAAI,aAAa,UAAU;AACzB,UAAO,KACL,aAAa,OAA0C;IACrD,UAAU,WAAW,YAAY;IACjC,OAAO,WAAW,SAAS;IAC3B,YAAY,WAAW,cAAc,CAAC;IACvC,CAAC,CACH;AACD;;AAIF,MAAI,WAAW,YAAY,OAAO,WAAW,aAAa,UAAU;AAClE,UAAO,KACL,aAAa,OAA0C,EACrD,UAAU,iBACR,WAAW,UACX,qBACA,YACD,EACF,CAAC,CACH;AACD;;AAGF,SAAO,KAAK,MAAM;GAClB;AAEF,QAAO;;;;;AAMT,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,8BAAc,IAAI,KAAU;EAC5B,gCAAgC,EAAE;EAClC,SAAS;EACT,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;CAE9C,MAAM,qBACJ,yBAAyB,QAAQ,yBAAyB;CAC5D,MAAM,kBAAkB,yBAAyB;CAGjD,MAAM,mBACJ,gBAAgB,YAAY,cAAc,IAAI;CAGhD,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;CAEF,MAAM,cAAc,gBAClB,oBAACA;EAAK,GAAI;EAAoB,UAAU;YACrC;GACI,GACL;CAEJ,MAAM,cAAc,eAClBA,QACA,EAAE,WAAW,gBAAgB,EAC7B;EACE,GAAG;EACH,UAAU;EACV,UAAU;EACX,CACF;CAGD,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,OAAI,gBACF,aAAY,MAAM;OAElB,eAAc,KAAK;;AAMvB,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,aACJ,eAAe,CAAC,kBACd,qBAACC;EAAY,QAAQ;EAAY,cAAc;aAC7C,oBAAC;GACC,UAAU;GACV,MAAM,oBAAC,aAAW;GAClB,GAAI;IACJ,EACD;GACW,GACZ;CAGN,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,sBAAsB,gBAAgB,YAAY,YAAY;CAGhE,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,sBAAsB,iBAAiB,YAAY;GAEnD,eAAe,aAAa,aAC3B,oBAAC;IACC,QAAQ;KAAE,MAAM;KAAQ,KAAK,KAAK;KAAK,cAAc;KAAS;IACnD;IACX,UAAS;KACT;;GAES"}
+{"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';\nimport { createMockDragState } from '../../shared/DraggableCollection';\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  // Use Children.forEach instead of Children.toArray to avoid React prepending\n  // \".$\" to element keys, which breaks selectedKeys matching in Menu.\n  const result: ReactNode[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      result.push(child);\n      return;\n    }\n\n    const childKey = getRawKey(child);\n    const childProps = child.props as MenuItemLikeProps;\n\n    // Handle predefined action keys\n    if (childKey === 'rename') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: childProps.children ?? 'Rename',\n          isDisabled: childProps.isDisabled ?? !effectiveIsEditable,\n        }),\n      );\n      return;\n    }\n    if (childKey === 'delete') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: childProps.children ?? 'Delete',\n          theme: childProps.theme ?? 'danger',\n          isDisabled: childProps.isDisabled ?? !isDeletable,\n        }),\n      );\n      return;\n    }\n\n    // Recursively process Menu.Section children\n    if (childProps.children && typeof childProps.children !== 'string') {\n      result.push(\n        cloneElement(child as ReactElement<MenuItemLikeProps>, {\n          children: processMenuItems(\n            childProps.children,\n            effectiveIsEditable,\n            isDeletable,\n          ),\n        }),\n      );\n      return;\n    }\n\n    result.push(child);\n  });\n\n  return result;\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    () => createMockDragState(state.collection, state.selectionManager),\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  const contextMenuEnabled =\n    effectiveContextMenu === true || effectiveContextMenu === 'context-only';\n  const contextMenuOnly = effectiveContextMenu === 'context-only';\n\n  // Inline close when no menu, or context-only (no overflow trigger)\n  const showDeleteButton =\n    isDeletable && (isMenuEmpty(effectiveMenu) || contextMenuOnly);\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  const menuElement = processedMenu ? (\n    <Menu {...effectiveMenuProps} onAction={handleMenuAction}>\n      {processedMenu}\n    </Menu>\n  ) : null;\n\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  // 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      if (contextMenuOnly) {\n        contextMenu.open();\n      } else {\n        setIsMenuOpen(true);\n      }\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  // Overflow trigger (hidden in context-only mode)\n  const menuAction =\n    menuElement && !contextMenuOnly ? (\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    contextMenuEnabled && processedMenu ? contextMenu.targetRef : 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      {contextMenuEnabled && 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":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -56,7 +56,7 @@ function TabList(_props) {
 }
 TabList.displayName = "CubeTabList";
 function TabsComponent(props, ref) {
-	const { label = "Tabs", defaultActiveKey, activeKey, size, type = "default", onChange, onDelete, onTitleChange, autoHideActions, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, children, prefix, suffix, prerender = false, keepMounted = false, qa = "Tabs", renderPanel, panelCacheKeys, isReorderable = false, keyOrder, onReorder, showTabPicker = false, showScrollArrows = false, tabPickerPosition = "suffix", scrollArrowsPosition = "suffix", hideTabListScroll = false, tabListPadding, tabListStyles, prefixStyles, suffixStyles, ...otherProps } = props;
+	const { label = "Tabs", defaultActiveKey, activeKey, size, type = "default", onChange, onDelete, onTitleChange, autoHideActions, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, children, prefix, suffix, prerender = false, keepMounted = false, qa = "Tabs", renderPanel, panelCacheKeys, isReorderable = false, isPickerReorderable, keyOrder, onReorder, showTabPicker = false, showScrollArrows = false, tabPickerPosition = "suffix", scrollArrowsPosition = "suffix", hideTabListScroll = false, tabListPadding, tabListStyles, prefixStyles, suffixStyles, ...otherProps } = props;
 	const baseStyles = extractStyles(otherProps, OUTER_STYLES);
 	const tabListPaddingStyles = useMemo(() => tabListPadding ? { "$tablist-padding": `${tabListPadding}` } : void 0, [tabListPadding]);
 	const combinedStyles = useMergeStyles(baseStyles, {
@@ -302,7 +302,7 @@ function TabsComponent(props, ref) {
 		selectedKey: state.selectedKey,
 		size,
 		type,
-		isReorderable,
+		isReorderable: isPickerReorderable,
 		onSelect: handleTabPickerSelect,
 		onDelete,
 		onReorder

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { mergeStyles, OUTER_STYLES } from '@tenphi/tasty';\nimport {\n  Children,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n  Item as CollectionItem,\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n  CubeTabListProps,\n  CubeTabPanelProps,\n  CubeTabProps,\n  CubeTabsProps,\n  ParsedPanel,\n  ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Generic helper to check if a child is a specific component by displayName.\n */\nfunction isComponentElement<T>(\n  child: ReactNode,\n  displayName: string,\n): child is ReactElement<T> {\n  return (\n    isValidElement(child) &&\n    typeof child.type === 'function' &&\n    (child.type as any).displayName === displayName\n  );\n}\n\n/** Checks if a child is a Tab component. */\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n  isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/** Checks if a child is a TabPanel component. */\nconst isTabPanelElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n  isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/** Checks if a child is a TabList component. */\nconst isTabListElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n  isComponentElement<CubeTabListProps>(child, 'CubeTabList');\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// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement | null {\n  return null;\n}\n\nTab.displayName = 'CubeTab';\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement | null {\n  return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement | null {\n  return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n  props: CubeTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    label = 'Tabs',\n    defaultActiveKey,\n    activeKey,\n    size,\n    type = 'default',\n    onChange,\n    onDelete,\n    onTitleChange,\n    autoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    children,\n    prefix,\n    suffix,\n    prerender = false,\n    keepMounted = false,\n    qa = 'Tabs',\n    renderPanel,\n    panelCacheKeys,\n    isReorderable = false,\n    keyOrder,\n    onReorder,\n    showTabPicker = false,\n    showScrollArrows = false,\n    tabPickerPosition = 'suffix',\n    scrollArrowsPosition = 'suffix',\n    hideTabListScroll = false,\n    tabListPadding,\n    tabListStyles,\n    prefixStyles,\n    suffixStyles,\n    ...otherProps\n  } = props;\n\n  // Extract outer styles\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  // Build TabList padding style (memoized)\n  const tabListPaddingStyles = useMemo(\n    () =>\n      tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n    [tabListPadding],\n  );\n\n  // Merge tabListPaddingStyles with tabListStyles (memoized)\n  const mergedTabListStyles = useMemo(\n    () => mergeStyles(tabListPaddingStyles, tabListStyles),\n    [tabListPaddingStyles, tabListStyles],\n  );\n\n  // Merge all sub-element styles into baseStyles\n  const combinedStyles = useMergeStyles(baseStyles, {\n    TabList: mergedTabListStyles,\n    Prefix: prefixStyles,\n    Suffix: suffixStyles,\n  });\n\n  // DOM element refs\n  const listRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  // Track visited tabs for keepMounted functionality\n  const visitedKeysRef = useRef<Set<string>>(new Set());\n\n  // =========================================================================\n  // Tab Title Editing Hook\n  // =========================================================================\n  const onTitleChangeRaf = useEvent((key: string, newTitle: string) => {\n    requestAnimationFrame(() => {\n      onTitleChange?.(key, newTitle);\n    });\n  });\n\n  const {\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    cancelEditing,\n    submitEditing,\n  } = useTabEditing({\n    onChange,\n    onTitleChange: onTitleChange ? onTitleChangeRaf : undefined,\n  });\n\n  // =========================================================================\n  // Parse children to extract tabs and explicit panels\n  // =========================================================================\n  const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {\n    const childArray = Children.toArray(children);\n    const tabs: ParsedTab[] = [];\n    const panels = new Map<string, ParsedPanel>();\n    let hasExplicitList = false;\n    let tabChildren: ReactNode[] = [];\n\n    // Check for explicit Tabs.List / Tabs.Panel structure\n    for (const child of childArray) {\n      if (isTabListElement(child)) {\n        hasExplicitList = true;\n        tabChildren = Children.toArray(child.props.children);\n      } else if (isTabPanelElement(child)) {\n        const key = getRawKey(child as ReactElement);\n\n        if (key != null) {\n          panels.set(key, {\n            key,\n            content: child.props.children,\n            prerender: child.props.prerender,\n            keepMounted: child.props.keepMounted,\n            styles: child.props.styles,\n            qa: child.props.qa,\n            qaVal: child.props.qaVal,\n          });\n        }\n      }\n    }\n\n    // If no explicit list, use direct Tab children\n    if (!hasExplicitList) {\n      tabChildren = childArray;\n    }\n\n    // Parse Tab elements\n    let hasContent = panels.size > 0;\n\n    for (const child of tabChildren) {\n      if (isTabElement(child)) {\n        const key = getRawKey(child) ?? child.props.id;\n\n        if (key != null) {\n          const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n          tabs.push({\n            ...tabProps,\n            key,\n            content: tabContent,\n          });\n\n          if (tabContent != null) {\n            hasContent = true;\n          }\n        }\n      }\n    }\n\n    return {\n      parsedTabs: tabs,\n      explicitPanels: panels,\n      hasAnyContent: hasContent,\n    };\n  }, [children]);\n\n  // Clean up visitedKeys when tabs are removed\n  const currentTabKeysSet = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of visitedKeysRef.current) {\n      if (!currentTabKeysSet.has(key)) {\n        visitedKeysRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeysSet]);\n\n  // =========================================================================\n  // Order tabs according to keyOrder\n  // =========================================================================\n  const orderedParsedTabs = useMemo(() => {\n    if (!keyOrder || keyOrder.length === 0) {\n      return parsedTabs;\n    }\n\n    const tabMap = new Map<string, ParsedTab>();\n    for (const tab of parsedTabs) {\n      tabMap.set(tab.key, tab);\n    }\n\n    const ordered: ParsedTab[] = [];\n    for (const key of keyOrder) {\n      const tab = tabMap.get(String(key));\n      if (tab) {\n        ordered.push(tab);\n        tabMap.delete(String(key));\n      }\n    }\n\n    // Append any tabs not in keyOrder\n    for (const tab of parsedTabs) {\n      if (tabMap.has(tab.key)) {\n        ordered.push(tab);\n      }\n    }\n\n    return ordered;\n  }, [parsedTabs, keyOrder]);\n\n  // Create collection items for React Stately\n  const collectionItems = useMemo(() => {\n    return orderedParsedTabs.map((tab) => (\n      <CollectionItem\n        key={tab.key}\n        textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n      >\n        {tab.title}\n      </CollectionItem>\n    ));\n  }, [orderedParsedTabs]);\n\n  // Determine disabled keys\n  const disabledKeys = useMemo(() => {\n    return new Set(\n      parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n    );\n  }, [parsedTabs]);\n\n  // Handle selection change (converts React Aria's Key to string for our API)\n  const handleSelectionChange = useEvent((key: Key) => {\n    const keyStr = String(key);\n    visitedKeysRef.current.add(keyStr);\n    onChange?.(keyStr);\n  });\n\n  // Convert keys to strings for React Aria compatibility\n  const selectedKey = activeKey != null ? String(activeKey) : undefined;\n  const defaultSelectedKey =\n    defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n  // Create aria props for useTabListState\n  const ariaProps: AriaTabListProps<object> = useMemo(\n    () => ({\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange: handleSelectionChange,\n      disabledKeys,\n      children: collectionItems,\n      'aria-label': label,\n    }),\n    [\n      selectedKey,\n      defaultSelectedKey,\n      handleSelectionChange,\n      disabledKeys,\n      collectionItems,\n      label,\n    ],\n  );\n\n  // Create state using useTabListState\n  const state = useTabListState(ariaProps);\n\n  // Track initial selected key for visited tabs\n  useEffect(() => {\n    if (state.selectedKey != null) {\n      visitedKeysRef.current.add(String(state.selectedKey));\n    }\n  }, [state.selectedKey]);\n\n  // Get tablist props from react-aria\n  const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n  // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n  const handleTabPickerSelect = useEvent((key: string) => {\n    // Update internal state (for uncontrolled mode)\n    state.setSelectedKey(key);\n    // Also call the external onChange handler\n    handleSelectionChange(key);\n  });\n\n  // =========================================================================\n  // Tab Indicator (for default type)\n  // =========================================================================\n  // Create order token that changes when tab order changes (for indicator recalculation)\n  const orderToken = useMemo(\n    () => orderedParsedTabs.map((t) => t.key).join(','),\n    [orderedParsedTabs],\n  );\n\n  const indicatorStyle = useTabIndicator(\n    listRef,\n    state.selectedKey,\n    type === 'default' || type === 'narrow',\n    orderToken,\n  );\n\n  // =========================================================================\n  // Tiny Scrollbar (not for radio type)\n  // =========================================================================\n  const isTinyScrollbar = type !== 'radio';\n  const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } =\n    useTinyScrollbar(scrollRef, isTinyScrollbar);\n  const showTinyScrollbar = isTinyScrollbar && !hideTabListScroll;\n\n  const hasPanels = hasAnyContent || !!renderPanel;\n\n  // =========================================================================\n  // Tab Picker visibility\n  // =========================================================================\n  useWarn(showTabPicker && type === 'radio', {\n    key: ['tabs-tabpicker-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n    ],\n  });\n\n  const shouldShowTabPicker =\n    type !== 'radio' &&\n    (showTabPicker === true || (showTabPicker === 'auto' && hasOverflowX));\n\n  // =========================================================================\n  // Scroll Arrows visibility and handlers\n  // =========================================================================\n  useWarn(showScrollArrows && type === 'radio', {\n    key: ['tabs-scrollarrows-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n    ],\n  });\n\n  const shouldShowScrollArrows =\n    type !== 'radio' &&\n    (showScrollArrows === true ||\n      (showScrollArrows === 'auto' && hasOverflowX));\n\n  const handleScrollLeft = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft - el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  const handleScrollRight = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft + el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  // =========================================================================\n  // Base Context Value (without drag/drop states)\n  // =========================================================================\n  const baseContextValue = useMemo(\n    () => ({\n      state,\n      type,\n      size,\n      autoHideActions,\n      isEditable: parentIsEditable,\n      menu: parentMenu,\n      menuTriggerProps: parentMenuTriggerProps,\n      menuProps: parentMenuProps,\n      contextMenu: parentContextMenu,\n      onDelete,\n      onAction: parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    }),\n    [\n      state,\n      type,\n      size,\n      autoHideActions,\n      parentIsEditable,\n      parentMenu,\n      parentMenuTriggerProps,\n      parentMenuProps,\n      parentContextMenu,\n      onDelete,\n      parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    ],\n  );\n\n  // Helper to create full context value with optional drag/drop states\n  const createContextValue = (\n    dragState?: DraggableCollectionState,\n    dropState?: DroppableCollectionState,\n  ): TabsContextValue => ({\n    ...baseContextValue,\n    dragState,\n    dropState,\n  });\n\n  // =========================================================================\n  // Tab List Content Renderer\n  // =========================================================================\n  const renderTabListContent = (\n    contextValue: TabsContextValue,\n    collectionProps: Record<string, unknown> = {},\n  ) => (\n    <div\n      {...mergeProps(tabListProps, collectionProps)}\n      ref={listRef}\n      data-element=\"TabList\"\n    >\n      <TabsProvider value={contextValue}>\n        {orderedParsedTabs.map((tab, index) => {\n          const item = state.collection.getItem(tab.key);\n          if (!item) return null;\n\n          return (\n            <TabButton\n              key={item.key}\n              item={item}\n              tabData={tab}\n              isLastTab={index === orderedParsedTabs.length - 1}\n            />\n          );\n        })}\n      </TabsProvider>\n      {indicatorStyle && (\n        <TabIndicatorElement\n          style={{\n            left: indicatorStyle.left,\n            width: indicatorStyle.width,\n          }}\n        />\n      )}\n    </div>\n  );\n\n  // =========================================================================\n  // Mods for styling\n  // =========================================================================\n  const mods = useMemo(\n    () => ({\n      type,\n      size,\n      deletable: !!onDelete,\n      scrolling: showTinyScrollbar && isScrolling,\n      'fade-left': !isAtStartX,\n      'fade-right': !isAtEndX,\n      'has-panels': hasPanels,\n    }),\n    [\n      type,\n      size,\n      onDelete,\n      showTinyScrollbar,\n      isScrolling,\n      isAtStartX,\n      isAtEndX,\n      hasPanels,\n    ],\n  );\n\n  // =========================================================================\n  // Action Elements (TabPicker and Scroll Arrows)\n  // =========================================================================\n  const scrollArrowsElement = shouldShowScrollArrows ? (\n    <>\n      <TabsAction\n        icon={<DirectionIcon to=\"left\" />}\n        aria-label=\"Scroll tabs left\"\n        isDisabled={isAtStartX}\n        onPress={handleScrollLeft}\n      />\n      <TabsAction\n        icon={<DirectionIcon to=\"right\" />}\n        aria-label=\"Scroll tabs right\"\n        isDisabled={isAtEndX}\n        onPress={handleScrollRight}\n      />\n    </>\n  ) : null;\n\n  const tabPickerElement = shouldShowTabPicker ? (\n    <TabPicker\n      tabs={orderedParsedTabs}\n      selectedKey={state.selectedKey}\n      size={size}\n      type={type}\n      isReorderable={isReorderable}\n      onSelect={handleTabPickerSelect}\n      onDelete={onDelete}\n      onReorder={onReorder}\n    />\n  ) : null;\n\n  // Determine which actions go in prefix/suffix\n  // In prefix: TabPicker first (left), then scroll arrows (right)\n  // In suffix: scroll arrows first (left), then TabPicker (right)\n  const prefixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'prefix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n  const suffixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'suffix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n  // Wrap with TabsProvider so prefix/suffix can access context (size, type)\n  // The inner TabsProvider in renderTabListContent will override for tab buttons\n  return (\n    <TabsProvider value={baseContextValue}>\n      <TabsElement\n        ref={ref}\n        qa={qa}\n        mods={mods}\n        styles={combinedStyles}\n        style={showTinyScrollbar ? handleHStyle : undefined}\n        data-size={size}\n      >\n        {prefix || prefixHasActions ? (\n          <div data-element=\"Prefix\">\n            {tabPickerPosition === 'prefix' && tabPickerElement}\n            {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n            {prefix}\n          </div>\n        ) : null}\n        <div data-element=\"ScrollWrapper\">\n          <div ref={scrollRef} data-element=\"Scroll\">\n            {isReorderable ? (\n              <DraggableTabList\n                state={state}\n                listRef={listRef}\n                orderedKeys={orderedParsedTabs.map((t) => t.key)}\n                onReorder={onReorder}\n              >\n                {(dragState, dropState, collectionProps) =>\n                  renderTabListContent(\n                    createContextValue(dragState, dropState),\n                    collectionProps,\n                  )\n                }\n              </DraggableTabList>\n            ) : (\n              renderTabListContent(createContextValue())\n            )}\n          </div>\n          {showTinyScrollbar && hasOverflowX && (\n            <div data-element=\"ScrollbarH\" />\n          )}\n        </div>\n        {suffix || suffixHasActions ? (\n          <div data-element=\"Suffix\">\n            {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n            {tabPickerPosition === 'suffix' && tabPickerElement}\n            {suffix}\n          </div>\n        ) : null}\n      </TabsElement>\n\n      {/* Functional panel rendering with content caching */}\n      {renderPanel && (\n        <CachedPanelRenderer\n          parsedTabs={parsedTabs}\n          explicitPanels={explicitPanels}\n          state={state}\n          renderPanel={renderPanel}\n          panelCacheKeys={panelCacheKeys}\n          prerender={prerender}\n          keepMounted={keepMounted}\n          visitedKeys={visitedKeysRef.current}\n        />\n      )}\n\n      {/* Static panel rendering (traditional children-based approach) */}\n      {!renderPanel &&\n        hasAnyContent &&\n        parsedTabs.map((tab) => {\n          const explicitPanel = explicitPanels.get(tab.key);\n          const content = explicitPanel?.content ?? tab.content;\n\n          if (content == null) return null;\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={explicitPanel?.prerender ?? tab.prerender}\n              tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n              visitedKeys={visitedKeysRef.current}\n              panelStyles={explicitPanel?.styles}\n              qa={explicitPanel?.qa}\n              qaVal={explicitPanel?.qaVal}\n            />\n          );\n        })}\n    </TabsProvider>\n  );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/**\n * Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n *\n * **Note:** Tab keys are internally converted to strings for React Aria compatibility.\n *\n * @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n *   <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n *\n * @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n *   <Tab key=\"overview\" title=\"Overview\" />\n *   <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n *\n * @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tabs.List>\n *     <Tab key=\"tab1\" title=\"Tab 1\" />\n *     <Tab key=\"tab2\" title=\"Tab 2\" />\n *   </Tabs.List>\n *   <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n *   <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n  Tab,\n  List: TabList,\n  Panel: TabPanel,\n  Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["CollectionItem","mergeProps"],"sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import { mergeStyles, OUTER_STYLES } from '@tenphi/tasty';\nimport {\n  Children,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaTabListProps, useTabList } from 'react-aria';\nimport {\n  Item as CollectionItem,\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useTabListState,\n} from 'react-stately';\n\nimport { useEvent, useWarn } from '../../../_internal/hooks';\nimport { DirectionIcon } from '../../../icons';\nimport { mergeProps, useMergeStyles } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { useTinyScrollbar } from '../../content/Layout/hooks/useTinyScrollbar';\n\nimport { DraggableTabList } from './DraggableTabList';\nimport { TabIndicatorElement, TabsElement } from './styled';\nimport { TabButton } from './TabButton';\nimport { CachedPanelRenderer, TabPanelRenderer } from './TabPanel';\nimport { TabPicker } from './TabPicker';\nimport { TabsAction } from './TabsAction';\nimport { TabsContextValue, TabsProvider } from './TabsContext';\nimport { useTabEditing } from './use-tab-editing';\nimport { useTabIndicator } from './use-tab-indicator';\n\nimport type { Key } from '@react-types/shared';\nimport type {\n  CubeTabListProps,\n  CubeTabPanelProps,\n  CubeTabProps,\n  CubeTabsProps,\n  ParsedPanel,\n  ParsedTab,\n} from './types';\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Generic helper to check if a child is a specific component by displayName.\n */\nfunction isComponentElement<T>(\n  child: ReactNode,\n  displayName: string,\n): child is ReactElement<T> {\n  return (\n    isValidElement(child) &&\n    typeof child.type === 'function' &&\n    (child.type as any).displayName === displayName\n  );\n}\n\n/** Checks if a child is a Tab component. */\nconst isTabElement = (child: ReactNode): child is ReactElement<CubeTabProps> =>\n  isComponentElement<CubeTabProps>(child, 'CubeTab');\n\n/** Checks if a child is a TabPanel component. */\nconst isTabPanelElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabPanelProps> =>\n  isComponentElement<CubeTabPanelProps>(child, 'CubeTabPanel');\n\n/** Checks if a child is a TabList component. */\nconst isTabListElement = (\n  child: ReactNode,\n): child is ReactElement<CubeTabListProps> =>\n  isComponentElement<CubeTabListProps>(child, 'CubeTabList');\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// Tab Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction Tab(_props: CubeTabProps): ReactElement | null {\n  return null;\n}\n\nTab.displayName = 'CubeTab';\n\n// =============================================================================\n// TabPanel Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabPanel(_props: CubeTabPanelProps): ReactElement | null {\n  return null;\n}\n\nTabPanel.displayName = 'CubeTabPanel';\n\n// =============================================================================\n// TabList Component (configuration only - not rendered directly)\n// =============================================================================\n\nfunction TabList(_props: CubeTabListProps): ReactElement | null {\n  return null;\n}\n\nTabList.displayName = 'CubeTabList';\n\n// =============================================================================\n// Main Tabs Component\n// =============================================================================\n\nfunction TabsComponent(\n  props: CubeTabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    label = 'Tabs',\n    defaultActiveKey,\n    activeKey,\n    size,\n    type = 'default',\n    onChange,\n    onDelete,\n    onTitleChange,\n    autoHideActions,\n    isEditable: parentIsEditable,\n    menu: parentMenu,\n    menuTriggerProps: parentMenuTriggerProps,\n    menuProps: parentMenuProps,\n    contextMenu: parentContextMenu,\n    onAction: parentOnAction,\n    children,\n    prefix,\n    suffix,\n    prerender = false,\n    keepMounted = false,\n    qa = 'Tabs',\n    renderPanel,\n    panelCacheKeys,\n    isReorderable = false,\n    isPickerReorderable,\n    keyOrder,\n    onReorder,\n    showTabPicker = false,\n    showScrollArrows = false,\n    tabPickerPosition = 'suffix',\n    scrollArrowsPosition = 'suffix',\n    hideTabListScroll = false,\n    tabListPadding,\n    tabListStyles,\n    prefixStyles,\n    suffixStyles,\n    ...otherProps\n  } = props;\n\n  // Extract outer styles\n  const baseStyles = extractStyles(otherProps, OUTER_STYLES);\n\n  // Build TabList padding style (memoized)\n  const tabListPaddingStyles = useMemo(\n    () =>\n      tabListPadding ? { '$tablist-padding': `${tabListPadding}` } : undefined,\n    [tabListPadding],\n  );\n\n  // Merge tabListPaddingStyles with tabListStyles (memoized)\n  const mergedTabListStyles = useMemo(\n    () => mergeStyles(tabListPaddingStyles, tabListStyles),\n    [tabListPaddingStyles, tabListStyles],\n  );\n\n  // Merge all sub-element styles into baseStyles\n  const combinedStyles = useMergeStyles(baseStyles, {\n    TabList: mergedTabListStyles,\n    Prefix: prefixStyles,\n    Suffix: suffixStyles,\n  });\n\n  // DOM element refs\n  const listRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  // Track visited tabs for keepMounted functionality\n  const visitedKeysRef = useRef<Set<string>>(new Set());\n\n  // =========================================================================\n  // Tab Title Editing Hook\n  // =========================================================================\n  const onTitleChangeRaf = useEvent((key: string, newTitle: string) => {\n    requestAnimationFrame(() => {\n      onTitleChange?.(key, newTitle);\n    });\n  });\n\n  const {\n    editingKey,\n    editValue,\n    setEditValue,\n    startEditing,\n    cancelEditing,\n    submitEditing,\n  } = useTabEditing({\n    onChange,\n    onTitleChange: onTitleChange ? onTitleChangeRaf : undefined,\n  });\n\n  // =========================================================================\n  // Parse children to extract tabs and explicit panels\n  // =========================================================================\n  const { parsedTabs, explicitPanels, hasAnyContent } = useMemo(() => {\n    const childArray = Children.toArray(children);\n    const tabs: ParsedTab[] = [];\n    const panels = new Map<string, ParsedPanel>();\n    let hasExplicitList = false;\n    let tabChildren: ReactNode[] = [];\n\n    // Check for explicit Tabs.List / Tabs.Panel structure\n    for (const child of childArray) {\n      if (isTabListElement(child)) {\n        hasExplicitList = true;\n        tabChildren = Children.toArray(child.props.children);\n      } else if (isTabPanelElement(child)) {\n        const key = getRawKey(child as ReactElement);\n\n        if (key != null) {\n          panels.set(key, {\n            key,\n            content: child.props.children,\n            prerender: child.props.prerender,\n            keepMounted: child.props.keepMounted,\n            styles: child.props.styles,\n            qa: child.props.qa,\n            qaVal: child.props.qaVal,\n          });\n        }\n      }\n    }\n\n    // If no explicit list, use direct Tab children\n    if (!hasExplicitList) {\n      tabChildren = childArray;\n    }\n\n    // Parse Tab elements\n    let hasContent = panels.size > 0;\n\n    for (const child of tabChildren) {\n      if (isTabElement(child)) {\n        const key = getRawKey(child) ?? child.props.id;\n\n        if (key != null) {\n          const { id: _id, children: tabContent, ...tabProps } = child.props;\n\n          tabs.push({\n            ...tabProps,\n            key,\n            content: tabContent,\n          });\n\n          if (tabContent != null) {\n            hasContent = true;\n          }\n        }\n      }\n    }\n\n    return {\n      parsedTabs: tabs,\n      explicitPanels: panels,\n      hasAnyContent: hasContent,\n    };\n  }, [children]);\n\n  // Clean up visitedKeys when tabs are removed\n  const currentTabKeysSet = useMemo(\n    () => new Set(parsedTabs.map((t) => t.key)),\n    [parsedTabs],\n  );\n\n  useEffect(() => {\n    for (const key of visitedKeysRef.current) {\n      if (!currentTabKeysSet.has(key)) {\n        visitedKeysRef.current.delete(key);\n      }\n    }\n  }, [currentTabKeysSet]);\n\n  // =========================================================================\n  // Order tabs according to keyOrder\n  // =========================================================================\n  const orderedParsedTabs = useMemo(() => {\n    if (!keyOrder || keyOrder.length === 0) {\n      return parsedTabs;\n    }\n\n    const tabMap = new Map<string, ParsedTab>();\n    for (const tab of parsedTabs) {\n      tabMap.set(tab.key, tab);\n    }\n\n    const ordered: ParsedTab[] = [];\n    for (const key of keyOrder) {\n      const tab = tabMap.get(String(key));\n      if (tab) {\n        ordered.push(tab);\n        tabMap.delete(String(key));\n      }\n    }\n\n    // Append any tabs not in keyOrder\n    for (const tab of parsedTabs) {\n      if (tabMap.has(tab.key)) {\n        ordered.push(tab);\n      }\n    }\n\n    return ordered;\n  }, [parsedTabs, keyOrder]);\n\n  // Create collection items for React Stately\n  const collectionItems = useMemo(() => {\n    return orderedParsedTabs.map((tab) => (\n      <CollectionItem\n        key={tab.key}\n        textValue={typeof tab.title === 'string' ? tab.title : String(tab.key)}\n      >\n        {tab.title}\n      </CollectionItem>\n    ));\n  }, [orderedParsedTabs]);\n\n  // Determine disabled keys\n  const disabledKeys = useMemo(() => {\n    return new Set(\n      parsedTabs.filter((tab) => tab.isDisabled).map((tab) => tab.key),\n    );\n  }, [parsedTabs]);\n\n  // Handle selection change (converts React Aria's Key to string for our API)\n  const handleSelectionChange = useEvent((key: Key) => {\n    const keyStr = String(key);\n    visitedKeysRef.current.add(keyStr);\n    onChange?.(keyStr);\n  });\n\n  // Convert keys to strings for React Aria compatibility\n  const selectedKey = activeKey != null ? String(activeKey) : undefined;\n  const defaultSelectedKey =\n    defaultActiveKey != null ? String(defaultActiveKey) : undefined;\n\n  // Create aria props for useTabListState\n  const ariaProps: AriaTabListProps<object> = useMemo(\n    () => ({\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange: handleSelectionChange,\n      disabledKeys,\n      children: collectionItems,\n      'aria-label': label,\n    }),\n    [\n      selectedKey,\n      defaultSelectedKey,\n      handleSelectionChange,\n      disabledKeys,\n      collectionItems,\n      label,\n    ],\n  );\n\n  // Create state using useTabListState\n  const state = useTabListState(ariaProps);\n\n  // Track initial selected key for visited tabs\n  useEffect(() => {\n    if (state.selectedKey != null) {\n      visitedKeysRef.current.add(String(state.selectedKey));\n    }\n  }, [state.selectedKey]);\n\n  // Get tablist props from react-aria\n  const { tabListProps } = useTabList(ariaProps, state, listRef);\n\n  // Handle selection from TabPicker (needs to update internal state in uncontrolled mode)\n  const handleTabPickerSelect = useEvent((key: string) => {\n    // Update internal state (for uncontrolled mode)\n    state.setSelectedKey(key);\n    // Also call the external onChange handler\n    handleSelectionChange(key);\n  });\n\n  // =========================================================================\n  // Tab Indicator (for default type)\n  // =========================================================================\n  // Create order token that changes when tab order changes (for indicator recalculation)\n  const orderToken = useMemo(\n    () => orderedParsedTabs.map((t) => t.key).join(','),\n    [orderedParsedTabs],\n  );\n\n  const indicatorStyle = useTabIndicator(\n    listRef,\n    state.selectedKey,\n    type === 'default' || type === 'narrow',\n    orderToken,\n  );\n\n  // =========================================================================\n  // Tiny Scrollbar (not for radio type)\n  // =========================================================================\n  const isTinyScrollbar = type !== 'radio';\n  const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } =\n    useTinyScrollbar(scrollRef, isTinyScrollbar);\n  const showTinyScrollbar = isTinyScrollbar && !hideTabListScroll;\n\n  const hasPanels = hasAnyContent || !!renderPanel;\n\n  // =========================================================================\n  // Tab Picker visibility\n  // =========================================================================\n  useWarn(showTabPicker && type === 'radio', {\n    key: ['tabs-tabpicker-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered.',\n    ],\n  });\n\n  const shouldShowTabPicker =\n    type !== 'radio' &&\n    (showTabPicker === true || (showTabPicker === 'auto' && hasOverflowX));\n\n  // =========================================================================\n  // Scroll Arrows visibility and handlers\n  // =========================================================================\n  useWarn(showScrollArrows && type === 'radio', {\n    key: ['tabs-scrollarrows-radio-unsupported'],\n    args: [\n      'Tabs:',\n      '`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered.',\n    ],\n  });\n\n  const shouldShowScrollArrows =\n    type !== 'radio' &&\n    (showScrollArrows === true ||\n      (showScrollArrows === 'auto' && hasOverflowX));\n\n  const handleScrollLeft = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft - el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  const handleScrollRight = useEvent(() => {\n    const el = scrollRef.current;\n    if (el) {\n      el.scrollTo({\n        left: el.scrollLeft + el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  // =========================================================================\n  // Base Context Value (without drag/drop states)\n  // =========================================================================\n  const baseContextValue = useMemo(\n    () => ({\n      state,\n      type,\n      size,\n      autoHideActions,\n      isEditable: parentIsEditable,\n      menu: parentMenu,\n      menuTriggerProps: parentMenuTriggerProps,\n      menuProps: parentMenuProps,\n      contextMenu: parentContextMenu,\n      onDelete,\n      onAction: parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    }),\n    [\n      state,\n      type,\n      size,\n      autoHideActions,\n      parentIsEditable,\n      parentMenu,\n      parentMenuTriggerProps,\n      parentMenuProps,\n      parentContextMenu,\n      onDelete,\n      parentOnAction,\n      editingKey,\n      editValue,\n      setEditValue,\n      startEditing,\n      submitEditing,\n      cancelEditing,\n    ],\n  );\n\n  // Helper to create full context value with optional drag/drop states\n  const createContextValue = (\n    dragState?: DraggableCollectionState,\n    dropState?: DroppableCollectionState,\n  ): TabsContextValue => ({\n    ...baseContextValue,\n    dragState,\n    dropState,\n  });\n\n  // =========================================================================\n  // Tab List Content Renderer\n  // =========================================================================\n  const renderTabListContent = (\n    contextValue: TabsContextValue,\n    collectionProps: Record<string, unknown> = {},\n  ) => (\n    <div\n      {...mergeProps(tabListProps, collectionProps)}\n      ref={listRef}\n      data-element=\"TabList\"\n    >\n      <TabsProvider value={contextValue}>\n        {orderedParsedTabs.map((tab, index) => {\n          const item = state.collection.getItem(tab.key);\n          if (!item) return null;\n\n          return (\n            <TabButton\n              key={item.key}\n              item={item}\n              tabData={tab}\n              isLastTab={index === orderedParsedTabs.length - 1}\n            />\n          );\n        })}\n      </TabsProvider>\n      {indicatorStyle && (\n        <TabIndicatorElement\n          style={{\n            left: indicatorStyle.left,\n            width: indicatorStyle.width,\n          }}\n        />\n      )}\n    </div>\n  );\n\n  // =========================================================================\n  // Mods for styling\n  // =========================================================================\n  const mods = useMemo(\n    () => ({\n      type,\n      size,\n      deletable: !!onDelete,\n      scrolling: showTinyScrollbar && isScrolling,\n      'fade-left': !isAtStartX,\n      'fade-right': !isAtEndX,\n      'has-panels': hasPanels,\n    }),\n    [\n      type,\n      size,\n      onDelete,\n      showTinyScrollbar,\n      isScrolling,\n      isAtStartX,\n      isAtEndX,\n      hasPanels,\n    ],\n  );\n\n  // =========================================================================\n  // Action Elements (TabPicker and Scroll Arrows)\n  // =========================================================================\n  const scrollArrowsElement = shouldShowScrollArrows ? (\n    <>\n      <TabsAction\n        icon={<DirectionIcon to=\"left\" />}\n        aria-label=\"Scroll tabs left\"\n        isDisabled={isAtStartX}\n        onPress={handleScrollLeft}\n      />\n      <TabsAction\n        icon={<DirectionIcon to=\"right\" />}\n        aria-label=\"Scroll tabs right\"\n        isDisabled={isAtEndX}\n        onPress={handleScrollRight}\n      />\n    </>\n  ) : null;\n\n  const tabPickerElement = shouldShowTabPicker ? (\n    <TabPicker\n      tabs={orderedParsedTabs}\n      selectedKey={state.selectedKey}\n      size={size}\n      type={type}\n      isReorderable={isPickerReorderable}\n      onSelect={handleTabPickerSelect}\n      onDelete={onDelete}\n      onReorder={onReorder}\n    />\n  ) : null;\n\n  // Determine which actions go in prefix/suffix\n  // In prefix: TabPicker first (left), then scroll arrows (right)\n  // In suffix: scroll arrows first (left), then TabPicker (right)\n  const prefixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'prefix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'prefix');\n\n  const suffixHasActions =\n    (shouldShowTabPicker && tabPickerPosition === 'suffix') ||\n    (shouldShowScrollArrows && scrollArrowsPosition === 'suffix');\n\n  // Wrap with TabsProvider so prefix/suffix can access context (size, type)\n  // The inner TabsProvider in renderTabListContent will override for tab buttons\n  return (\n    <TabsProvider value={baseContextValue}>\n      <TabsElement\n        ref={ref}\n        qa={qa}\n        mods={mods}\n        styles={combinedStyles}\n        style={showTinyScrollbar ? handleHStyle : undefined}\n        data-size={size}\n      >\n        {prefix || prefixHasActions ? (\n          <div data-element=\"Prefix\">\n            {tabPickerPosition === 'prefix' && tabPickerElement}\n            {scrollArrowsPosition === 'prefix' && scrollArrowsElement}\n            {prefix}\n          </div>\n        ) : null}\n        <div data-element=\"ScrollWrapper\">\n          <div ref={scrollRef} data-element=\"Scroll\">\n            {isReorderable ? (\n              <DraggableTabList\n                state={state}\n                listRef={listRef}\n                orderedKeys={orderedParsedTabs.map((t) => t.key)}\n                onReorder={onReorder}\n              >\n                {(dragState, dropState, collectionProps) =>\n                  renderTabListContent(\n                    createContextValue(dragState, dropState),\n                    collectionProps,\n                  )\n                }\n              </DraggableTabList>\n            ) : (\n              renderTabListContent(createContextValue())\n            )}\n          </div>\n          {showTinyScrollbar && hasOverflowX && (\n            <div data-element=\"ScrollbarH\" />\n          )}\n        </div>\n        {suffix || suffixHasActions ? (\n          <div data-element=\"Suffix\">\n            {scrollArrowsPosition === 'suffix' && scrollArrowsElement}\n            {tabPickerPosition === 'suffix' && tabPickerElement}\n            {suffix}\n          </div>\n        ) : null}\n      </TabsElement>\n\n      {/* Functional panel rendering with content caching */}\n      {renderPanel && (\n        <CachedPanelRenderer\n          parsedTabs={parsedTabs}\n          explicitPanels={explicitPanels}\n          state={state}\n          renderPanel={renderPanel}\n          panelCacheKeys={panelCacheKeys}\n          prerender={prerender}\n          keepMounted={keepMounted}\n          visitedKeys={visitedKeysRef.current}\n        />\n      )}\n\n      {/* Static panel rendering (traditional children-based approach) */}\n      {!renderPanel &&\n        hasAnyContent &&\n        parsedTabs.map((tab) => {\n          const explicitPanel = explicitPanels.get(tab.key);\n          const content = explicitPanel?.content ?? tab.content;\n\n          if (content == null) return null;\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={explicitPanel?.prerender ?? tab.prerender}\n              tabKeepMounted={explicitPanel?.keepMounted ?? tab.keepMounted}\n              visitedKeys={visitedKeysRef.current}\n              panelStyles={explicitPanel?.styles}\n              qa={explicitPanel?.qa}\n              qaVal={explicitPanel?.qaVal}\n            />\n          );\n        })}\n    </TabsProvider>\n  );\n}\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nconst _Tabs = forwardRef(TabsComponent);\n\n/**\n * Tabs component for organizing content into multiple panels.\n * Built with React Aria for full accessibility support.\n *\n * **Note:** Tab keys are internally converted to strings for React Aria compatibility.\n *\n * @example\n * // Simple usage\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content 1</Tab>\n *   <Tab key=\"tab2\" title=\"Tab 2\">Content 2</Tab>\n * </Tabs>\n *\n * @example\n * // Tabs-only (no panels)\n * <Tabs activeKey={activeTab} onChange={setActiveTab}>\n *   <Tab key=\"overview\" title=\"Overview\" />\n *   <Tab key=\"settings\" title=\"Settings\" />\n * </Tabs>\n *\n * @example\n * // Explicit panels\n * <Tabs defaultActiveKey=\"tab1\">\n *   <Tabs.List>\n *     <Tab key=\"tab1\" title=\"Tab 1\" />\n *     <Tab key=\"tab2\" title=\"Tab 2\" />\n *   </Tabs.List>\n *   <Tabs.Panel key=\"tab1\">Content 1</Tabs.Panel>\n *   <Tabs.Panel key=\"tab2\">Content 2</Tabs.Panel>\n * </Tabs>\n */\nexport const Tabs = Object.assign(_Tabs, {\n  Tab,\n  List: TabList,\n  Panel: TabPanel,\n  Action: TabsAction,\n});\n\nexport { Tab, TabList, TabPanel, TabsAction };\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { tasty } from "@tenphi/tasty";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { _Item } from "../../content/Item/Item.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/navigation/Tabs/types.d.ts

@@ -146,6 +146,11 @@ interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
    * @default false
    */
   isReorderable?: boolean;
+  /**
+   * Enable drag-and-drop reordering in the tab picker dropdown.
+   * @default false
+   */
+  isPickerReorderable?: boolean;
   /**
    * Controlled order of tab keys.
    * When provided, tabs are displayed in this order.

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 //#region src/components/navigation/Tabs/types.ts
 /**
 * Size mapping for radio type tabs.

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Tab has its own TabType\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Visual appearance type. */\n  type?: TabType;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Content displayed in the tab button. */\n  title: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AA2BA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/navigation/Tabs/types.ts"],"sourcesContent":["import type { BaseProps, OuterStyleProps, Styles } from '@tenphi/tasty';\nimport type { ReactNode } from 'react';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { CubeItemProps } from '../../content/Item';\n\n// =============================================================================\n// Core Types\n// =============================================================================\n\n/** Visual appearance type for tabs */\nexport type TabType = 'default' | 'narrow' | 'file' | 'radio';\n\n/** Position for TabPicker and scroll arrows */\nexport type TabsActionPosition = 'prefix' | 'suffix';\n\n/**\n * Tab size options.\n * Radio type only supports 'medium' | 'large' (mapped to smaller Item sizes).\n */\nexport type TabSize = 'xsmall' | 'small' | 'medium' | 'large';\n\n/**\n * Size mapping for radio type tabs.\n * API sizes mapped to Item button sizes:\n * medium (default) -> xsmall (32px total), large -> medium (40px total).\n */\nexport const RADIO_SIZE_MAP: Record<'medium' | 'large', TabSize> = {\n  medium: 'xsmall',\n  large: 'medium',\n};\n\n/** How the tab `menu` is exposed alongside or instead of the overflow trigger. */\nexport type TabContextMenu = boolean | 'context-only';\n\n// =============================================================================\n// Shared Props Interfaces\n// =============================================================================\n\n/** Common props for panel rendering behavior */\nexport interface PanelBehaviorProps {\n  /** If true, panel is rendered but hidden when not active. */\n  prerender?: boolean;\n  /** If true, once visited the panel stays in DOM. */\n  keepMounted?: boolean;\n}\n\n/** Common props for QA attributes */\nexport interface QAProps {\n  /** QA selector attribute. */\n  qa?: string;\n  /** Additional QA value attribute. */\n  qaVal?: string;\n}\n\n// =============================================================================\n// Tab Style Props\n// =============================================================================\n\n/** Props from CubeItemProps that don't apply to Tab */\ntype OmittedItemProps =\n  | 'id' // Tab has its own id as Key type\n  | 'type' // Tab has its own TabType\n  | 'size' // Tab has its own TabSize\n  | 'theme' // Tabs have internal theming\n  | 'shape' // Tabs have internal shape logic\n  | 'description' // Tabs don't have descriptions\n  | 'descriptionPlacement'\n  | 'descriptionProps'\n  | 'hotkeys' // Tabs have their own keyboard navigation\n  | 'keyboardShortcutProps'\n  | 'labelProps' // Tabs use title prop instead\n  | 'labelRef'\n  | 'level' // Tabs don't use heading levels\n  | 'highlight' // Tabs don't use highlighting\n  | 'highlightCaseSensitive'\n  | 'highlightStyles'\n  | 'variant' // Tabs have internal variant logic\n  | 'htmlType' // Tab is always a button\n  | 'isSelected' // Handled internally by state\n  | 'preserveActionsSpace' // Set internally in TabButton\n  | 'disableActionsFocus' // Not used in Tab\n  | 'actions' // Tab has its own actions definition\n  | 'autoHideActions' // Tab has its own autoHideActions\n  | 'insideWrapper' // Internal Item wrapper prop\n  | 'showActions'; // Internal Item wrapper prop\n\n/** Common styling props for tabs - inherits style props from CubeItemProps */\nexport interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   */\n  size?: TabSize;\n  /** Visual appearance type. */\n  type?: TabType;\n  /** Whether to show actions only on hover. */\n  autoHideActions?: boolean;\n}\n\n// =============================================================================\n// Component Props\n// =============================================================================\n\n/** Cache key type - primitives only for reliable comparison */\nexport type CacheKeyValue = string | number | boolean | null | undefined;\n\nexport interface CubeTabsProps\n  extends BaseProps,\n    OuterStyleProps,\n    PanelBehaviorProps {\n  /** Controlled active tab key. When provided, component is controlled. */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. */\n  defaultActiveKey?: string;\n  /**\n   * Visual appearance type for tabs.\n   * - `default` - Standard tabs with selection indicator below (default)\n   * - `narrow` - Same as default but with collapsed vertical padding on labels\n   * - `file` - File-style tabs with border bottom highlight on selection, delimiter between tabs\n   * - `radio` - Radio button style for tab selection\n   * @default 'default'\n   */\n  type?: TabType;\n  /**\n   * Tab size. Supports 'xsmall', 'small', 'medium', 'large'.\n   * Radio type supports 'large' (default, 40px) and 'medium' (32px),\n   * mapped to Item button sizes medium (32px) and xsmall (24px).\n   * @default 'medium'\n   */\n  size?: TabSize;\n  /** Accessible label for the tab list. */\n  label?: string;\n  /** Content rendered before the tab list. */\n  prefix?: ReactNode;\n  /** Content rendered after the tab list. */\n  suffix?: ReactNode;\n  /** Callback when active tab changes. */\n  onChange?: (key: string) => void;\n  /** Callback when tab delete button is clicked. Presence enables delete buttons. */\n  onDelete?: (key: string) => void;\n  /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */\n  onTitleChange?: (key: string, newTitle: string) => void;\n  /** Whether to show tab actions only on hover. Can be overridden per-tab. */\n  autoHideActions?: boolean;\n  /**\n   * Whether tabs are editable by default.\n   * Can be overridden per-tab via Tab's isEditable prop.\n   * @default false\n   */\n  isEditable?: boolean;\n  /**\n   * Default menu items for all tabs.\n   * Can be overridden per-tab via Tab's menu prop.\n   * Set to `null` on individual Tab to disable menu for that tab.\n   */\n  menu?: ReactNode;\n  /**\n   * Default props for the menu trigger button.\n   * Can be overridden per-tab via Tab's menuTriggerProps prop.\n   * @default { icon: <MoreIcon /> }\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Default props passed to the Menu component.\n   * Can be overridden per-tab via Tab's menuProps prop.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior for tab `menu` items.\n   * - `false` (default) — overflow trigger only; no right-click menu\n   * - `true` — overflow trigger and right-click menu\n   * - `'context-only'` — right-click menu only; no overflow trigger. Inline close\n   *   (`onDelete`) shows even when `menu` is non-empty, like tabs without a menu.\n   * Can be overridden per-tab via Tab's contextMenu prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered on any tab.\n   * Called with the action key and the tab key.\n   * Tab-level onAction is called first, then this.\n   */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Custom tasty styles for the tab bar container. */\n  styles?: Styles;\n  /** QA selector attribute. */\n  qa?: string;\n  /** Tab components or Tabs.List with Tabs.Panel. */\n  children?: ReactNode;\n  /**\n   * Functional content renderer for optimized lazy evaluation.\n   * When provided, panel content is only evaluated for the active tab,\n   * while inactive tabs use cached content.\n   */\n  renderPanel?: (key: string) => ReactNode;\n  /**\n   * Cache keys for individual panels. Enables caching for specified panels.\n   */\n  panelCacheKeys?: Record<string | number, CacheKeyValue>;\n  /**\n   * Enable drag-and-drop tab reordering.\n   * @default false\n   */\n  isReorderable?: boolean;\n  /**\n   * Enable drag-and-drop reordering in the tab picker dropdown.\n   * @default false\n   */\n  isPickerReorderable?: boolean;\n  /**\n   * Controlled order of tab keys.\n   * When provided, tabs are displayed in this order.\n   */\n  keyOrder?: string[];\n  /**\n   * Callback when tabs are reordered via drag-and-drop.\n   */\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Whether to show a tab picker dropdown in the suffix area.\n   * - `true` - always show the tab picker\n   * - `false` - never show the tab picker (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showTabPicker?: boolean | 'auto';\n  /**\n   * Whether to show scroll arrow buttons in the suffix area.\n   * - `true` - always show scroll arrows\n   * - `false` - never show scroll arrows (default)\n   * - `'auto'` - show only when tabs overflow (has horizontal scroll)\n   * @default false\n   */\n  showScrollArrows?: boolean | 'auto';\n  /**\n   * Position of the tab picker dropdown.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  tabPickerPosition?: TabsActionPosition;\n  /**\n   * Position of the scroll arrow buttons.\n   * - `'prefix'` - render in the prefix slot (before tab list)\n   * - `'suffix'` - render in the suffix slot (after tab list)\n   * @default 'suffix'\n   */\n  scrollArrowsPosition?: TabsActionPosition;\n  /**\n   * Visually hide the custom horizontal scrollbar in the tab list\n   * and skip its tracking logic. Does not affect tab picker, scroll arrows,\n   * or fade indicators — only the tiny scrollbar visual.\n   * @default false\n   */\n  hideTabListScroll?: boolean;\n  /**\n   * Inline padding for the tab list container.\n   * Sets horizontal padding only (e.g., \"2x\" → padding: \"0 2x\").\n   */\n  tabListPadding?: string;\n  /** Custom tasty styles for the TabList sub-element. */\n  tabListStyles?: Styles;\n  /** Custom tasty styles for the Prefix sub-element. */\n  prefixStyles?: Styles;\n  /** Custom tasty styles for the Suffix sub-element. */\n  suffixStyles?: Styles;\n}\n\nexport interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {\n  /**\n   * Unique identifier for the tab.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Content displayed in the tab button. */\n  title: ReactNode;\n  /** Panel content rendered when tab is active. */\n  children?: ReactNode;\n  /** Disables the tab (cannot be selected). */\n  isDisabled?: boolean;\n  /** Actions to render in the tab. Rendered before menu trigger if tab has menu. */\n  actions?: ReactNode;\n  /** Whether the tab title can be edited. Overrides the Tabs-level isEditable default. */\n  isEditable?: boolean;\n  /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */\n  onTitleChange?: (newTitle: string) => void;\n  /**\n   * Menu items to display in a dropdown menu on the tab.\n   * Pass Menu.Item elements directly - they will be wrapped in a Menu internally.\n   * Overrides the Tabs-level menu default. Set to `null` to disable menu.\n   */\n  menu?: ReactNode | null;\n  /**\n   * Props to customize the menu trigger button.\n   * Overrides the Tabs-level menuTriggerProps default.\n   */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /**\n   * Props passed to the Menu component.\n   * Overrides the Tabs-level menuProps default.\n   */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /**\n   * Context menu / overflow behavior. Same values as Tabs `contextMenu`.\n   * Uses the same menu items as `menu` prop.\n   * @default false\n   */\n  contextMenu?: TabContextMenu;\n  /**\n   * Callback when a menu action is triggered.\n   * Called with the action key from Menu.Item.\n   */\n  onAction?: (action: string) => void;\n}\n\nexport interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {\n  /**\n   * Panel identifier. Must match a Tab's id.\n   * Auto-injected from the React `key` prop (converted to string).\n   */\n  id?: string;\n  /** Panel content. */\n  children?: ReactNode;\n  /** Custom tasty styles for the panel container. */\n  styles?: Styles;\n}\n\nexport interface CubeTabListProps {\n  /** Tab components. */\n  children?: ReactNode;\n}\n\n// =============================================================================\n// Internal Types\n// =============================================================================\n\n/**\n * Internal representation of a parsed Tab.\n * Uses `content` instead of `children` to distinguish panel content.\n */\nexport interface ParsedTab extends Omit<CubeTabProps, 'id' | 'children'> {\n  /** Tab key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from Tab's children prop */\n  content: ReactNode;\n}\n\n/**\n * Internal representation of a parsed TabPanel.\n */\nexport interface ParsedPanel\n  extends Omit<CubeTabPanelProps, 'id' | 'children'> {\n  /** Panel key (always a string internally for React Aria compatibility) */\n  key: string;\n  /** Panel content extracted from TabPanel's children prop */\n  content: ReactNode;\n}\n"],"mappings":";;;;;;;AA2BA,MAAa,iBAAsD;CACjE,QAAQ;CACR,OAAO;CACR"}

package/dist/components/navigation/Tabs/use-tab-editing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { useCallback, useState } from "react";
 

package/dist/components/navigation/Tabs/use-tab-indicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a3f23c9 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1ffe072 | Cube Dev Team */
 import { chainRaf } from "../../../utils/raf.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";