@cube-dev/ui-kit 0.138.6 → 0.140.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | 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,10 +56,13 @@ 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", placement = "top", 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, barStyles, tabListStyles, prefixStyles, suffixStyles, ...otherProps } = props;
+	const orientation = placement === "left" || placement === "right" ? "vertical" : "horizontal";
+	const effectiveType = orientation === "vertical" && type === "narrow" ? "default" : type;
 	const baseStyles = extractStyles(otherProps, OUTER_STYLES);
 	const tabListPaddingStyles = useMemo(() => tabListPadding ? { "$tablist-padding": `${tabListPadding}` } : void 0, [tabListPadding]);
 	const combinedStyles = useMergeStyles(baseStyles, {
+		Bar: barStyles,
 		TabList: useMemo(() => mergeStyles(tabListPaddingStyles, tabListStyles), [tabListPaddingStyles, tabListStyles]),
 		Prefix: prefixStyles,
 		Suffix: suffixStyles
@@ -158,14 +161,16 @@ function TabsComponent(props, ref) {
 		onSelectionChange: handleSelectionChange,
 		disabledKeys,
 		children: collectionItems,
-		"aria-label": label
+		"aria-label": label,
+		orientation
 	}), [
 		selectedKey,
 		defaultSelectedKey,
 		handleSelectionChange,
 		disabledKeys,
 		collectionItems,
-		label
+		label,
+		orientation
 	]);
 	const state = useTabListState(ariaProps);
 	useEffect(() => {
@@ -177,39 +182,53 @@ function TabsComponent(props, ref) {
 		handleSelectionChange(key);
 	});
 	const orderToken = useMemo(() => orderedParsedTabs.map((t) => t.key).join(","), [orderedParsedTabs]);
-	const indicatorStyle = useTabIndicator(listRef, state.selectedKey, type === "default" || type === "narrow", orderToken);
-	const isTinyScrollbar = type !== "radio";
-	const { handleHStyle, hasOverflowX, isScrolling, isAtStartX, isAtEndX } = useTinyScrollbar(scrollRef, isTinyScrollbar);
+	const indicatorStyle = useTabIndicator(listRef, state.selectedKey, effectiveType === "default" || effectiveType === "narrow", orientation, orderToken);
+	const isTinyScrollbar = effectiveType !== "radio";
+	const { handleHStyle, handleVStyle, hasOverflowX, hasOverflowY, isScrolling, isAtStartX, isAtEndX, isAtStartY, isAtEndY } = useTinyScrollbar(scrollRef, isTinyScrollbar);
 	const showTinyScrollbar = isTinyScrollbar && !hideTabListScroll;
+	const hasOverflow = orientation === "vertical" ? hasOverflowY : hasOverflowX;
+	const isAtStart = orientation === "vertical" ? isAtStartY : isAtStartX;
+	const isAtEnd = orientation === "vertical" ? isAtEndY : isAtEndX;
 	const hasPanels = hasAnyContent || !!renderPanel;
-	useWarn(showTabPicker && type === "radio", {
+	useWarn(showTabPicker && effectiveType === "radio", {
 		key: ["tabs-tabpicker-radio-unsupported"],
 		args: ["Tabs:", "`showTabPicker` is not supported when `type=\"radio\"`. The TabPicker will not be rendered."]
 	});
-	const shouldShowTabPicker = type !== "radio" && (showTabPicker === true || showTabPicker === "auto" && hasOverflowX);
-	useWarn(showScrollArrows && type === "radio", {
+	const shouldShowTabPicker = effectiveType !== "radio" && (showTabPicker === true || showTabPicker === "auto" && hasOverflow);
+	useWarn(showScrollArrows && effectiveType === "radio", {
 		key: ["tabs-scrollarrows-radio-unsupported"],
 		args: ["Tabs:", "`showScrollArrows` is not supported when `type=\"radio\"`. The scroll arrows will not be rendered."]
 	});
-	const shouldShowScrollArrows = type !== "radio" && (showScrollArrows === true || showScrollArrows === "auto" && hasOverflowX);
-	const handleScrollLeft = useEvent(() => {
+	const shouldShowScrollArrows = effectiveType !== "radio" && (showScrollArrows === true || showScrollArrows === "auto" && hasOverflow);
+	const handleScrollStart = useEvent(() => {
 		const el = scrollRef.current;
-		if (el) el.scrollTo({
+		if (!el) return;
+		if (orientation === "vertical") el.scrollTo({
+			top: el.scrollTop - el.clientHeight,
+			behavior: "smooth"
+		});
+		else el.scrollTo({
 			left: el.scrollLeft - el.clientWidth,
 			behavior: "smooth"
 		});
 	});
-	const handleScrollRight = useEvent(() => {
+	const handleScrollEnd = useEvent(() => {
 		const el = scrollRef.current;
-		if (el) el.scrollTo({
+		if (!el) return;
+		if (orientation === "vertical") el.scrollTo({
+			top: el.scrollTop + el.clientHeight,
+			behavior: "smooth"
+		});
+		else el.scrollTo({
 			left: el.scrollLeft + el.clientWidth,
 			behavior: "smooth"
 		});
 	});
 	const baseContextValue = useMemo(() => ({
 		state,
-		type,
+		type: effectiveType,
 		size,
+		placement,
 		autoHideActions,
 		isEditable: parentIsEditable,
 		menu: parentMenu,
@@ -224,8 +243,9 @@ function TabsComponent(props, ref) {
 		cancelEditing
 	}), [
 		state,
-		type,
+		effectiveType,
 		size,
+		placement,
 		autoHideActions,
 		parentIsEditable,
 		parentMenu,
@@ -259,45 +279,54 @@ function TabsComponent(props, ref) {
 					isLastTab: index === orderedParsedTabs.length - 1
 				}, item.key);
 			})
-		}), indicatorStyle && /* @__PURE__ */ jsx(TabIndicatorElement, { style: {
-			left: indicatorStyle.left,
-			width: indicatorStyle.width
-		} })]
+		}), indicatorStyle && /* @__PURE__ */ jsx(TabIndicatorElement, {
+			mods: { placement },
+			style: orientation === "vertical" ? {
+				top: indicatorStyle.start,
+				height: indicatorStyle.size
+			} : {
+				left: indicatorStyle.start,
+				width: indicatorStyle.size
+			}
+		})]
 	});
 	const mods = useMemo(() => ({
-		type,
+		type: effectiveType,
 		size,
+		placement,
 		deletable: !!onDelete,
 		scrolling: showTinyScrollbar && isScrolling,
-		"fade-left": !isAtStartX,
-		"fade-right": !isAtEndX,
+		"fade-start": !isAtStart,
+		"fade-end": !isAtEnd,
 		"has-panels": hasPanels
 	}), [
-		type,
+		effectiveType,
 		size,
+		placement,
 		onDelete,
 		showTinyScrollbar,
 		isScrolling,
-		isAtStartX,
-		isAtEndX,
+		isAtStart,
+		isAtEnd,
 		hasPanels
 	]);
 	const scrollArrowsElement = shouldShowScrollArrows ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TabsAction, {
-		icon: /* @__PURE__ */ jsx(DirectionIcon, { to: "left" }),
-		"aria-label": "Scroll tabs left",
-		isDisabled: isAtStartX,
-		onPress: handleScrollLeft
+		icon: /* @__PURE__ */ jsx(DirectionIcon, { to: orientation === "vertical" ? "top" : "left" }),
+		"aria-label": orientation === "vertical" ? "Scroll tabs up" : "Scroll tabs left",
+		isDisabled: isAtStart,
+		onPress: handleScrollStart
 	}), /* @__PURE__ */ jsx(TabsAction, {
-		icon: /* @__PURE__ */ jsx(DirectionIcon, { to: "right" }),
-		"aria-label": "Scroll tabs right",
-		isDisabled: isAtEndX,
-		onPress: handleScrollRight
+		icon: /* @__PURE__ */ jsx(DirectionIcon, { to: orientation === "vertical" ? "bottom" : "right" }),
+		"aria-label": orientation === "vertical" ? "Scroll tabs down" : "Scroll tabs right",
+		isDisabled: isAtEnd,
+		onPress: handleScrollEnd
 	})] }) : null;
 	const tabPickerElement = shouldShowTabPicker ? /* @__PURE__ */ jsx(TabPicker, {
 		tabs: orderedParsedTabs,
 		selectedKey: state.selectedKey,
 		size,
-		type,
+		type: effectiveType,
+		placement,
 		isReorderable,
 		onSelect: handleTabPickerSelect,
 		onDelete,
@@ -305,78 +334,82 @@ function TabsComponent(props, ref) {
 	}) : null;
 	const prefixHasActions = shouldShowTabPicker && tabPickerPosition === "prefix" || shouldShowScrollArrows && scrollArrowsPosition === "prefix";
 	const suffixHasActions = shouldShowTabPicker && tabPickerPosition === "suffix" || shouldShowScrollArrows && scrollArrowsPosition === "suffix";
-	return /* @__PURE__ */ jsxs(TabsProvider, {
+	return /* @__PURE__ */ jsx(TabsProvider, {
 		value: baseContextValue,
-		children: [
-			/* @__PURE__ */ jsxs(TabsElement, {
-				ref,
-				qa,
-				mods,
-				styles: combinedStyles,
-				style: showTinyScrollbar ? handleHStyle : void 0,
-				"data-size": size,
-				children: [
-					prefix || prefixHasActions ? /* @__PURE__ */ jsxs("div", {
-						"data-element": "Prefix",
-						children: [
-							tabPickerPosition === "prefix" && tabPickerElement,
-							scrollArrowsPosition === "prefix" && scrollArrowsElement,
-							prefix
-						]
-					}) : null,
-					/* @__PURE__ */ jsxs("div", {
-						"data-element": "ScrollWrapper",
-						children: [/* @__PURE__ */ jsx("div", {
-							ref: scrollRef,
-							"data-element": "Scroll",
-							children: isReorderable ? /* @__PURE__ */ jsx(DraggableTabList, {
-								state,
-								listRef,
-								orderedKeys: orderedParsedTabs.map((t) => t.key),
-								onReorder,
-								children: (dragState, dropState, collectionProps) => renderTabListContent(createContextValue(dragState, dropState), collectionProps)
-							}) : renderTabListContent(createContextValue())
-						}), showTinyScrollbar && hasOverflowX && /* @__PURE__ */ jsx("div", { "data-element": "ScrollbarH" })]
-					}),
-					suffix || suffixHasActions ? /* @__PURE__ */ jsxs("div", {
-						"data-element": "Suffix",
-						children: [
-							scrollArrowsPosition === "suffix" && scrollArrowsElement,
-							tabPickerPosition === "suffix" && tabPickerElement,
-							suffix
-						]
-					}) : null
-				]
-			}),
-			renderPanel && /* @__PURE__ */ jsx(CachedPanelRenderer, {
-				parsedTabs,
-				explicitPanels,
-				state,
-				renderPanel,
-				panelCacheKeys,
-				prerender,
-				keepMounted,
-				visitedKeys: visitedKeysRef.current
-			}),
-			!renderPanel && hasAnyContent && parsedTabs.map((tab) => {
-				const explicitPanel = explicitPanels.get(tab.key);
-				const content = explicitPanel?.content ?? tab.content;
-				if (content == null) return null;
-				return /* @__PURE__ */ jsx(TabPanelRenderer, {
-					tabKey: tab.key,
+		children: /* @__PURE__ */ jsxs(TabsElement, {
+			ref,
+			qa,
+			mods,
+			styles: combinedStyles,
+			style: showTinyScrollbar ? orientation === "vertical" ? handleVStyle : handleHStyle : void 0,
+			"data-size": size,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					"data-element": "Bar",
+					children: [
+						prefix || prefixHasActions ? /* @__PURE__ */ jsxs("div", {
+							"data-element": "Prefix",
+							children: [
+								tabPickerPosition === "prefix" && tabPickerElement,
+								scrollArrowsPosition === "prefix" && scrollArrowsElement,
+								prefix
+							]
+						}) : null,
+						/* @__PURE__ */ jsxs("div", {
+							"data-element": "ScrollWrapper",
+							children: [/* @__PURE__ */ jsx("div", {
+								ref: scrollRef,
+								"data-element": "Scroll",
+								children: isReorderable ? /* @__PURE__ */ jsx(DraggableTabList, {
+									state,
+									listRef,
+									orderedKeys: orderedParsedTabs.map((t) => t.key),
+									orientation,
+									onReorder,
+									children: (dragState, dropState, collectionProps) => renderTabListContent(createContextValue(dragState, dropState), collectionProps)
+								}) : renderTabListContent(createContextValue())
+							}), showTinyScrollbar && hasOverflow && /* @__PURE__ */ jsx("div", { "data-element": "Scrollbar" })]
+						}),
+						suffix || suffixHasActions ? /* @__PURE__ */ jsxs("div", {
+							"data-element": "Suffix",
+							children: [
+								scrollArrowsPosition === "suffix" && scrollArrowsElement,
+								tabPickerPosition === "suffix" && tabPickerElement,
+								suffix
+							]
+						}) : null
+					]
+				}),
+				renderPanel && /* @__PURE__ */ jsx(CachedPanelRenderer, {
+					parsedTabs,
+					explicitPanels,
 					state,
-					content,
+					renderPanel,
+					panelCacheKeys,
 					prerender,
 					keepMounted,
-					tabPrerender: explicitPanel?.prerender ?? tab.prerender,
-					tabKeepMounted: explicitPanel?.keepMounted ?? tab.keepMounted,
-					visitedKeys: visitedKeysRef.current,
-					panelStyles: explicitPanel?.styles,
-					qa: explicitPanel?.qa,
-					qaVal: explicitPanel?.qaVal
-				}, tab.key);
-			})
-		]
+					visitedKeys: visitedKeysRef.current
+				}),
+				!renderPanel && hasAnyContent && parsedTabs.map((tab) => {
+					const explicitPanel = explicitPanels.get(tab.key);
+					const content = explicitPanel?.content ?? tab.content;
+					if (content == null) return null;
+					return /* @__PURE__ */ jsx(TabPanelRenderer, {
+						tabKey: tab.key,
+						state,
+						content,
+						prerender,
+						keepMounted,
+						tabPrerender: explicitPanel?.prerender ?? tab.prerender,
+						tabKeepMounted: explicitPanel?.keepMounted ?? tab.keepMounted,
+						visitedKeys: visitedKeysRef.current,
+						panelStyles: explicitPanel?.styles,
+						qa: explicitPanel?.qa,
+						qaVal: explicitPanel?.qaVal
+					}, tab.key);
+				})
+			]
+		})
 	});
 }
 const _Tabs = forwardRef(TabsComponent);

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 { editingKey, startEditing, cancelEditing, 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      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      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    placement = 'top',\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    barStyles,\n    tabListStyles,\n    prefixStyles,\n    suffixStyles,\n    ...otherProps\n  } = props;\n\n  // Derive orientation from placement\n  const orientation: 'horizontal' | 'vertical' =\n    placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal';\n\n  // `narrow` only makes sense for a horizontal strip — its whole point is\n  // collapsed horizontal padding for a denser row of tabs. Force `default`\n  // when the strip is vertical.\n  const effectiveType =\n    orientation === 'vertical' && type === 'narrow' ? 'default' : type;\n\n  // Extract outer styles (these go on the new outer wrapper)\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. The outer `TabsElement`\n  // exposes `Bar`, `Prefix`, `Suffix`, `TabList`, `ScrollWrapper`, `Scroll`,\n  // and `Scrollbar` sub-elements (defined in styled.ts).\n  const combinedStyles = useMergeStyles(baseStyles, {\n    Bar: barStyles,\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 { editingKey, startEditing, cancelEditing, 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      orientation,\n    }),\n    [\n      selectedKey,\n      defaultSelectedKey,\n      handleSelectionChange,\n      disabledKeys,\n      collectionItems,\n      label,\n      orientation,\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    effectiveType === 'default' || effectiveType === 'narrow',\n    orientation,\n    orderToken,\n  );\n\n  // =========================================================================\n  // Tiny Scrollbar (not for radio type)\n  // =========================================================================\n  const isTinyScrollbar = effectiveType !== 'radio';\n  const {\n    handleHStyle,\n    handleVStyle,\n    hasOverflowX,\n    hasOverflowY,\n    isScrolling,\n    isAtStartX,\n    isAtEndX,\n    isAtStartY,\n    isAtEndY,\n  } = useTinyScrollbar(scrollRef, isTinyScrollbar);\n  const showTinyScrollbar = isTinyScrollbar && !hideTabListScroll;\n\n  // Active-axis aggregates (used everywhere downstream so we don't sprinkle\n  // orientation checks around).\n  const hasOverflow = orientation === 'vertical' ? hasOverflowY : hasOverflowX;\n  const isAtStart = orientation === 'vertical' ? isAtStartY : isAtStartX;\n  const isAtEnd = orientation === 'vertical' ? isAtEndY : isAtEndX;\n\n  const hasPanels = hasAnyContent || !!renderPanel;\n\n  // =========================================================================\n  // Tab Picker visibility\n  // =========================================================================\n  useWarn(showTabPicker && effectiveType === '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    effectiveType !== 'radio' &&\n    (showTabPicker === true || (showTabPicker === 'auto' && hasOverflow));\n\n  // =========================================================================\n  // Scroll Arrows visibility and handlers\n  // =========================================================================\n  useWarn(showScrollArrows && effectiveType === '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    effectiveType !== 'radio' &&\n    (showScrollArrows === true || (showScrollArrows === 'auto' && hasOverflow));\n\n  const handleScrollStart = useEvent(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (orientation === 'vertical') {\n      el.scrollTo({\n        top: el.scrollTop - el.clientHeight,\n        behavior: 'smooth',\n      });\n    } else {\n      el.scrollTo({\n        left: el.scrollLeft - el.clientWidth,\n        behavior: 'smooth',\n      });\n    }\n  });\n\n  const handleScrollEnd = useEvent(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    if (orientation === 'vertical') {\n      el.scrollTo({\n        top: el.scrollTop + el.clientHeight,\n        behavior: 'smooth',\n      });\n    } else {\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: effectiveType,\n      size,\n      placement,\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      startEditing,\n      submitEditing,\n      cancelEditing,\n    }),\n    [\n      state,\n      effectiveType,\n      size,\n      placement,\n      autoHideActions,\n      parentIsEditable,\n      parentMenu,\n      parentMenuTriggerProps,\n      parentMenuProps,\n      parentContextMenu,\n      onDelete,\n      parentOnAction,\n      editingKey,\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          mods={{ placement }}\n          style={\n            orientation === 'vertical'\n              ? {\n                  top: indicatorStyle.start,\n                  height: indicatorStyle.size,\n                }\n              : {\n                  left: indicatorStyle.start,\n                  width: indicatorStyle.size,\n                }\n          }\n        />\n      )}\n    </div>\n  );\n\n  // =========================================================================\n  // Mods for styling\n  // =========================================================================\n  const mods = useMemo(\n    () => ({\n      type: effectiveType,\n      size,\n      placement,\n      deletable: !!onDelete,\n      scrolling: showTinyScrollbar && isScrolling,\n      'fade-start': !isAtStart,\n      'fade-end': !isAtEnd,\n      'has-panels': hasPanels,\n    }),\n    [\n      effectiveType,\n      size,\n      placement,\n      onDelete,\n      showTinyScrollbar,\n      isScrolling,\n      isAtStart,\n      isAtEnd,\n      hasPanels,\n    ],\n  );\n\n  // =========================================================================\n  // Action Elements (TabPicker and Scroll Arrows)\n  // =========================================================================\n  const scrollArrowsElement = shouldShowScrollArrows ? (\n    <>\n      <TabsAction\n        icon={\n          <DirectionIcon to={orientation === 'vertical' ? 'top' : 'left'} />\n        }\n        aria-label={\n          orientation === 'vertical' ? 'Scroll tabs up' : 'Scroll tabs left'\n        }\n        isDisabled={isAtStart}\n        onPress={handleScrollStart}\n      />\n      <TabsAction\n        icon={\n          <DirectionIcon to={orientation === 'vertical' ? 'bottom' : 'right'} />\n        }\n        aria-label={\n          orientation === 'vertical' ? 'Scroll tabs down' : 'Scroll tabs right'\n        }\n        isDisabled={isAtEnd}\n        onPress={handleScrollEnd}\n      />\n    </>\n  ) : null;\n\n  const tabPickerElement = shouldShowTabPicker ? (\n    <TabPicker\n      tabs={orderedParsedTabs}\n      selectedKey={state.selectedKey}\n      size={size}\n      type={effectiveType}\n      placement={placement}\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  // Apply the active-axis scrollbar handle vars to the outer wrapper so the\n  // `Scrollbar` sub-element can read them via CSS variables.\n  const handleStyle = showTinyScrollbar\n    ? orientation === 'vertical'\n      ? handleVStyle\n      : handleHStyle\n    : undefined;\n\n  // Wrap with TabsProvider so prefix/suffix can access context (size, type, placement).\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={handleStyle}\n        data-size={size}\n      >\n        <div data-element=\"Bar\">\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                  orientation={orientation}\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 && hasOverflow && (\n              <div data-element=\"Scrollbar\" />\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        </div>\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      </TabsElement>\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.138.6 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { useOptionalTabsContext } from "./TabsContext.js";
 import { tasty } from "@tenphi/tasty";
@@ -8,10 +8,11 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/Tabs/TabsAction.tsx
 const TabsActionElement = tasty(_ItemButton, { styles: {
 	border: {
-		"type=neutral": 0,
-		"type=neutral & tabs-type-file & !:first-child": "left"
+		"type=clear": 0,
+		"type=clear & tabs-type-file & !:first-child & !tabs-vertical": "left",
+		"type=clear & tabs-type-file & !:first-child & tabs-vertical": "top"
 	},
-	radius: { "type=neutral": 0 }
+	radius: { "type=clear": 0 }
 } });
 /**
 * Action button designed for the Tabs prefix/suffix slots.
@@ -46,13 +47,20 @@ const TabsAction = forwardRef(function TabsAction(props, ref) {
 	const tabsContext = useOptionalTabsContext();
 	const effectiveSize = size ?? tabsContext?.size ?? "medium";
 	const tabsType = tabsContext?.type ?? "default";
+	const tabsPlacement = tabsContext?.placement ?? "top";
+	const tabsVertical = tabsPlacement === "left" || tabsPlacement === "right";
 	const combinedMods = useMemo(() => ({
 		"tabs-type-file": tabsType === "file",
+		"tabs-vertical": tabsVertical,
 		...mods
-	}), [tabsType, mods]);
+	}), [
+		tabsType,
+		tabsVertical,
+		mods
+	]);
 	return /* @__PURE__ */ jsx(TabsActionElement, {
 		ref,
-		type: type ?? (tabsType === "default" ? "outline" : "neutral"),
+		type: type ?? (tabsType === "default" ? "outline" : "clear"),
 		size: effectiveSize,
 		mods: combinedMods,
 		...rest

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

@@ -1 +1 @@
-{"version":3,"file":"TabsAction.js","names":["ItemButton"],"sources":["../../../../src/components/navigation/Tabs/TabsAction.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { tasty } from '@tenphi/tasty';\nimport { forwardRef, useMemo } from 'react';\n\nimport {\n  CubeItemButtonProps,\n  ItemButton,\n} from '../../actions/ItemButton/ItemButton';\n\nimport { useOptionalTabsContext } from './TabsContext';\n\nimport type { TabSize } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CubeTabsActionProps\n  extends Omit<CubeItemButtonProps, 'size' | 'shape'> {\n  /**\n   * Size of the action button.\n   * When used inside Tabs prefix/suffix, inherits from Tabs size by default.\n   */\n  size?: TabSize;\n}\n\n// =============================================================================\n// Styled Component\n// =============================================================================\n\nconst TabsActionElement = tasty(ItemButton, {\n  styles: {\n    border: {\n      'type=neutral': 0,\n      'type=neutral & tabs-type-file & !:first-child': 'left',\n    },\n    radius: {\n      'type=neutral': 0,\n    },\n  },\n});\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Action button designed for the Tabs prefix/suffix slots.\n *\n * Styled with sharp edges and no border to match the TabPicker trigger.\n * When multiple TabsAction components are placed together, they automatically\n * display dividers between them using CSS :not(:first-child) border styling\n * (only for file tab type).\n *\n * Inherits size from the parent Tabs component when used inside prefix/suffix slots.\n *\n * @example\n * <Tabs suffix={<Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />}>\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n *\n * @example\n * // Multiple actions with automatic dividers\n * <Tabs\n *   suffix={\n *     <>\n *       <Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />\n *       <Tabs.Action icon={<SettingsIcon />} onPress={handleSettings} />\n *     </>\n *   }\n * >\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n */\nexport const TabsAction = forwardRef(function TabsAction(\n  props: CubeTabsActionProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { size, mods, type, ...rest } = props;\n\n  // Get size and type from context if available (when used inside Tabs)\n  const tabsContext = useOptionalTabsContext();\n  const effectiveSize = size ?? tabsContext?.size ?? 'medium';\n  const tabsType = tabsContext?.type ?? 'default';\n\n  const combinedMods = useMemo(\n    () => ({\n      'tabs-type-file': tabsType === 'file',\n      ...mods,\n    }),\n    [tabsType, mods],\n  );\n\n  return (\n    <TabsActionElement\n      ref={ref}\n      type={type ?? (tabsType === 'default' ? 'outline' : 'neutral')}\n      size={effectiveSize}\n      mods={combinedMods}\n      {...rest}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AA8BA,MAAM,oBAAoB,MAAMA,aAAY,EAC1C,QAAQ;CACN,QAAQ;EACN,gBAAgB;EAChB,iDAAiD;EAClD;CACD,QAAQ,EACN,gBAAgB,GACjB;CACF,EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAa,aAAa,WAAW,SAAS,WAC5C,OACA,KACA;CACA,MAAM,EAAE,MAAM,MAAM,MAAM,GAAG,SAAS;CAGtC,MAAM,cAAc,wBAAwB;CAC5C,MAAM,gBAAgB,QAAQ,aAAa,QAAQ;CACnD,MAAM,WAAW,aAAa,QAAQ;CAEtC,MAAM,eAAe,eACZ;EACL,kBAAkB,aAAa;EAC/B,GAAG;EACJ,GACD,CAAC,UAAU,KAAK,CACjB;AAED,QACE,oBAAC;EACM;EACL,MAAM,SAAS,aAAa,YAAY,YAAY;EACpD,MAAM;EACN,MAAM;EACN,GAAI;GACJ;EAEJ"}
+{"version":3,"file":"TabsAction.js","names":["ItemButton"],"sources":["../../../../src/components/navigation/Tabs/TabsAction.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { tasty } from '@tenphi/tasty';\nimport { forwardRef, useMemo } from 'react';\n\nimport {\n  CubeItemButtonProps,\n  ItemButton,\n} from '../../actions/ItemButton/ItemButton';\n\nimport { useOptionalTabsContext } from './TabsContext';\n\nimport type { TabSize } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface CubeTabsActionProps\n  extends Omit<CubeItemButtonProps, 'size' | 'shape'> {\n  /**\n   * Size of the action button.\n   * When used inside Tabs prefix/suffix, inherits from Tabs size by default.\n   */\n  size?: TabSize;\n}\n\n// =============================================================================\n// Styled Component\n// =============================================================================\n\nconst TabsActionElement = tasty(ItemButton, {\n  styles: {\n    border: {\n      'type=clear': 0,\n      'type=clear & tabs-type-file & !:first-child & !tabs-vertical': 'left',\n      'type=clear & tabs-type-file & !:first-child & tabs-vertical': 'top',\n    },\n    radius: {\n      'type=clear': 0,\n    },\n  },\n});\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Action button designed for the Tabs prefix/suffix slots.\n *\n * Styled with sharp edges and no border to match the TabPicker trigger.\n * When multiple TabsAction components are placed together, they automatically\n * display dividers between them using CSS :not(:first-child) border styling\n * (only for file tab type).\n *\n * Inherits size from the parent Tabs component when used inside prefix/suffix slots.\n *\n * @example\n * <Tabs suffix={<Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />}>\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n *\n * @example\n * // Multiple actions with automatic dividers\n * <Tabs\n *   suffix={\n *     <>\n *       <Tabs.Action icon={<PlusIcon />} onPress={handleAdd} />\n *       <Tabs.Action icon={<SettingsIcon />} onPress={handleSettings} />\n *     </>\n *   }\n * >\n *   <Tab key=\"tab1\" title=\"Tab 1\">Content</Tab>\n * </Tabs>\n */\nexport const TabsAction = forwardRef(function TabsAction(\n  props: CubeTabsActionProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const { size, mods, type, ...rest } = props;\n\n  // Get size, type, and placement from context if available (when used inside Tabs)\n  const tabsContext = useOptionalTabsContext();\n  const effectiveSize = size ?? tabsContext?.size ?? 'medium';\n  const tabsType = tabsContext?.type ?? 'default';\n  const tabsPlacement = tabsContext?.placement ?? 'top';\n  const tabsVertical = tabsPlacement === 'left' || tabsPlacement === 'right';\n\n  const combinedMods = useMemo(\n    () => ({\n      'tabs-type-file': tabsType === 'file',\n      'tabs-vertical': tabsVertical,\n      ...mods,\n    }),\n    [tabsType, tabsVertical, mods],\n  );\n\n  return (\n    <TabsActionElement\n      ref={ref}\n      type={type ?? (tabsType === 'default' ? 'outline' : 'clear')}\n      size={effectiveSize}\n      mods={combinedMods}\n      {...rest}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AA8BA,MAAM,oBAAoB,MAAMA,aAAY,EAC1C,QAAQ;CACN,QAAQ;EACN,cAAc;EACd,gEAAgE;EAChE,+DAA+D;EAChE;CACD,QAAQ,EACN,cAAc,GACf;CACF,EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAa,aAAa,WAAW,SAAS,WAC5C,OACA,KACA;CACA,MAAM,EAAE,MAAM,MAAM,MAAM,GAAG,SAAS;CAGtC,MAAM,cAAc,wBAAwB;CAC5C,MAAM,gBAAgB,QAAQ,aAAa,QAAQ;CACnD,MAAM,WAAW,aAAa,QAAQ;CACtC,MAAM,gBAAgB,aAAa,aAAa;CAChD,MAAM,eAAe,kBAAkB,UAAU,kBAAkB;CAEnE,MAAM,eAAe,eACZ;EACL,kBAAkB,aAAa;EAC/B,iBAAiB;EACjB,GAAG;EACJ,GACD;EAAC;EAAU;EAAc;EAAK,CAC/B;AAED,QACE,oBAAC;EACM;EACL,MAAM,SAAS,aAAa,YAAY,YAAY;EACpD,MAAM;EACN,MAAM;EACN,GAAI;GACJ;EAEJ"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TabsContext.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  TabListState,\n} from 'react-stately';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { TabContextMenu, TabSize, TabType } from './types';\n\n// =============================================================================\n// Context Value Interface\n// =============================================================================\n\nexport interface TabsContextValue {\n  /** Tab list state from React Stately */\n  state: TabListState<object>;\n  /** Parent-level type default */\n  type: TabType;\n  /** Parent-level size default */\n  size?: TabSize;\n  /** Parent-level autoHideActions default */\n  autoHideActions?: boolean;\n  /** Parent-level isEditable default */\n  isEditable?: boolean;\n  /** Parent-level menu default */\n  menu?: ReactNode;\n  /** Parent-level menuTriggerProps default */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /** Parent-level menuProps default */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /** Parent-level contextMenu default */\n  contextMenu?: TabContextMenu;\n  /** Callback when tab is deleted */\n  onDelete?: (key: string) => void;\n  /** Parent-level onAction callback */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Drag state for reorderable tabs (undefined if not reorderable) */\n  dragState?: DraggableCollectionState;\n  /** Drop state for reorderable tabs (undefined if not reorderable) */\n  dropState?: DroppableCollectionState;\n\n  // Editing callbacks\n  /** Current tab being edited (null if none) */\n  editingKey: string | null;\n  /** Start editing a tab */\n  startEditing: (key: string, currentTitle: string) => void;\n  /** Submit the current edit */\n  submitEditing: (\n    key: string,\n    newTitle: string,\n    tabOnTitleChange?: (title: string) => void,\n  ) => void;\n  /** Cancel the current edit */\n  cancelEditing: () => void;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nTabsContext.displayName = 'TabsContext';\n\n// =============================================================================\n// Provider\n// =============================================================================\n\nexport interface TabsProviderProps {\n  value: TabsContextValue;\n  children: ReactNode;\n}\n\nexport function TabsProvider({ value, children }: TabsProviderProps) {\n  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    throw new Error('useTabsContext must be used within a TabsProvider');\n  }\n\n  return context;\n}\n\n/**\n * Optional hook to get TabsContext value.\n * Returns null when used outside a TabsProvider (e.g., for TabsAction in standalone usage).\n */\nexport function useOptionalTabsContext(): TabsContextValue | null {\n  return useContext(TabsContext);\n}\n"],"mappings":";;;;;AA8DA,MAAM,cAAc,cAAuC,KAAK;AAEhE,YAAY,cAAc;AAW1B,SAAgB,aAAa,EAAE,OAAO,YAA+B;AACnE,QAAO,oBAAC,YAAY;EAAgB;EAAQ;GAAgC;;AAO9E,SAAgB,iBAAmC;CACjD,MAAM,UAAU,WAAW,YAAY;AAEvC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,oDAAoD;AAGtE,QAAO;;;;;;AAOT,SAAgB,yBAAkD;AAChE,QAAO,WAAW,YAAY"}
+{"version":3,"file":"TabsContext.js","names":[],"sources":["../../../../src/components/navigation/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from 'react';\n\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  TabListState,\n} from 'react-stately';\nimport type { CubeItemActionProps } from '../../actions/ItemAction';\nimport type { CubeMenuProps } from '../../actions/Menu';\nimport type { TabContextMenu, TabPlacement, TabSize, TabType } from './types';\n\n// =============================================================================\n// Context Value Interface\n// =============================================================================\n\nexport interface TabsContextValue {\n  /** Tab list state from React Stately */\n  state: TabListState<object>;\n  /** Parent-level type default */\n  type: TabType;\n  /** Parent-level size default */\n  size?: TabSize;\n  /** Where the tab bar sits relative to its panels */\n  placement: TabPlacement;\n  /** Parent-level autoHideActions default */\n  autoHideActions?: boolean;\n  /** Parent-level isEditable default */\n  isEditable?: boolean;\n  /** Parent-level menu default */\n  menu?: ReactNode;\n  /** Parent-level menuTriggerProps default */\n  menuTriggerProps?: Partial<CubeItemActionProps>;\n  /** Parent-level menuProps default */\n  menuProps?: Partial<CubeMenuProps<object>>;\n  /** Parent-level contextMenu default */\n  contextMenu?: TabContextMenu;\n  /** Callback when tab is deleted */\n  onDelete?: (key: string) => void;\n  /** Parent-level onAction callback */\n  onAction?: (action: string, tabKey: string) => void;\n  /** Drag state for reorderable tabs (undefined if not reorderable) */\n  dragState?: DraggableCollectionState;\n  /** Drop state for reorderable tabs (undefined if not reorderable) */\n  dropState?: DroppableCollectionState;\n\n  // Editing callbacks\n  /** Current tab being edited (null if none) */\n  editingKey: string | null;\n  /** Start editing a tab */\n  startEditing: (key: string, currentTitle: string) => void;\n  /** Submit the current edit */\n  submitEditing: (\n    key: string,\n    newTitle: string,\n    tabOnTitleChange?: (title: string) => void,\n  ) => void;\n  /** Cancel the current edit */\n  cancelEditing: () => void;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nTabsContext.displayName = 'TabsContext';\n\n// =============================================================================\n// Provider\n// =============================================================================\n\nexport interface TabsProviderProps {\n  value: TabsContextValue;\n  children: ReactNode;\n}\n\nexport function TabsProvider({ value, children }: TabsProviderProps) {\n  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    throw new Error('useTabsContext must be used within a TabsProvider');\n  }\n\n  return context;\n}\n\n/**\n * Optional hook to get TabsContext value.\n * Returns null when used outside a TabsProvider (e.g., for TabsAction in standalone usage).\n */\nexport function useOptionalTabsContext(): TabsContextValue | null {\n  return useContext(TabsContext);\n}\n"],"mappings":";;;;;AAgEA,MAAM,cAAc,cAAuC,KAAK;AAEhE,YAAY,cAAc;AAW1B,SAAgB,aAAa,EAAE,OAAO,YAA+B;AACnE,QAAO,oBAAC,YAAY;EAAgB;EAAQ;GAAgC;;AAO9E,SAAgB,iBAAmC;CACjD,MAAM,UAAU,WAAW,YAAY;AAEvC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,oDAAoD;AAGtE,QAAO;;;;;;AAOT,SAAgB,yBAAkD;AAChE,QAAO,WAAW,YAAY"}

package/dist/components/navigation/Tabs/popover-placement.js

@@ -0,0 +1,21 @@
+/** @license MIT | @cube-dev/ui-kit v0.140.0 | Cube Dev Team */
+//#region src/components/navigation/Tabs/popover-placement.ts
+/**
+* Maps the parent Tabs `placement` to the popover placement for menus and
+* pickers anchored to the strip (tab overflow menu, context menu, TabPicker).
+*
+* The popover always opens **toward the panel area** so it never covers the
+* bar itself and stays inside the visible Tabs region. Tooltips are the only
+* surface that opens on the outer-edge side; menus and pickers must flow into
+* the content side instead.
+*/
+const POPOVER_PLACEMENT_BY_TABS_PLACEMENT = {
+	top: "bottom start",
+	bottom: "top start",
+	left: "right top",
+	right: "left top"
+};
+
+//#endregion
+export { POPOVER_PLACEMENT_BY_TABS_PLACEMENT };
+//# sourceMappingURL=popover-placement.js.map