@cube-dev/ui-kit 0.0.0-canary-855d62e → 0.0.0-canary-29fafcf

package/es/components/layout/Space.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty/index.js';
+const SpaceElement = tasty({
+    styles: {
+        display: 'flex',
+        gap: true,
+        flow: {
+            '': 'row',
+            vertical: 'column',
+        },
+        placeItems: {
+            '': 'center stretch',
+            vertical: 'stretch',
+        },
+    },
+});
+export const Space = forwardRef(function Space(props, ref) {
+    const { mods, direction, ...otherProps } = props;
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    return (_jsx(SpaceElement, { ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, mods: {
+            vertical: direction === 'vertical' ||
+                otherProps.flow === 'column' ||
+                styles.flow === 'column',
+            ...mods,
+        }, styles: styles }));
+});
+
+        

package/es/components/layout/Suffix.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from 'react';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty, } from '../../tasty/index.js';
+import { useCombinedRefs } from '../../utils/react/index.js';
+const SuffixElement = tasty({
+    element: 'Suffix',
+    styles: {
+        position: 'absolute',
+        display: 'grid',
+        placeContent: 'stretch',
+        placeItems: 'center',
+        flow: 'column',
+        gap: 0,
+        right: '$suffix-gap',
+        top: '$suffix-gap',
+        bottom: '$suffix-gap',
+        color: '#dark-02',
+        height: '(100% - (2 * $suffix-gap))',
+    },
+});
+export const Suffix = forwardRef(function Suffix(allProps, outerRef) {
+    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
+    const styles = extractStyles(props, CONTAINER_STYLES);
+    const ref = useCombinedRefs(outerRef);
+    useEffect(() => {
+        if (ref && ref.current && onWidthChange) {
+            onWidthChange(ref.current.offsetWidth);
+        }
+    }, [children, ref, onWidthChange]);
+    return (_jsx(SuffixElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, style: {
+            '--suffix-gap': parseStyle(outerGap).output,
+        }, children: children }));
+});
+
+        

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

@@ -0,0 +1,103 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { useCallback, useMemo } from 'react';
+import { ListDropTargetDelegate, ListKeyboardDelegate, useDraggableCollection, useDroppableCollection, } from 'react-aria';
+import { useDraggableCollectionState, useDroppableCollectionState, } from 'react-stately';
+import { useEvent } from '../../../_internal/hooks/index.js';
+// Stable function reference to avoid re-renders in drag/drop hooks
+const getAllowedDropOperations = () => ['move'];
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * Component that enables drag-and-drop reordering for tabs.
+ *
+ * This component encapsulates all drag/drop hook calls, ensuring they're only
+ * called when reordering is actually enabled. It uses the render prop pattern
+ * to pass the drag/drop states to its children.
+ */
+export function DraggableTabList({ state, listRef, orderedKeys, onReorder, children, }) {
+    // Handle reorder event from drag-and-drop
+    const handleReorder = useEvent((e) => {
+        if (!onReorder)
+            return;
+        const { target, keys: movableKeys } = e;
+        const { dropPosition, key: targetKey } = target;
+        const movableKey = [...movableKeys][0];
+        const movableIndex = orderedKeys.indexOf(movableKey);
+        const targetIndex = orderedKeys.indexOf(String(targetKey));
+        if (movableIndex === -1 || targetIndex === -1)
+            return;
+        // Reorder keys
+        const newKeys = movableIndex !== targetIndex
+            ? orderedKeys.reduce((arr, key, i) => {
+                // Skip the key we are moving
+                if (i === movableIndex) {
+                    return arr;
+                }
+                // Insert the movable key at the target position
+                if (i === targetIndex) {
+                    if (dropPosition === 'before') {
+                        arr.push(movableKey);
+                        arr.push(key);
+                    }
+                    else {
+                        // 'after' or 'on' - treat 'on' as 'after' since tabs are linear
+                        arr.push(key);
+                        arr.push(movableKey);
+                    }
+                }
+                else {
+                    arr.push(key);
+                }
+                return arr;
+            }, [])
+            : orderedKeys;
+        onReorder(newKeys);
+    });
+    // Get items for draggable collection
+    const getItems = useCallback((keys) => {
+        return [...keys].map((key) => {
+            const item = state.collection.getItem(key);
+            return {
+                'text/plain': item?.textValue || String(key),
+            };
+        });
+    }, [state.collection]);
+    // Setup drag state for the collection
+    const dragState = useDraggableCollectionState({
+        collection: state.collection,
+        selectionManager: state.selectionManager,
+        getItems,
+        getAllowedDropOperations,
+    });
+    // Enable the draggable collection
+    useDraggableCollection({
+        getItems,
+        getAllowedDropOperations,
+    }, dragState, listRef);
+    // Setup drop state for the collection
+    const dropState = useDroppableCollectionState({
+        collection: state.collection,
+        selectionManager: state.selectionManager,
+        onReorder: handleReorder,
+    });
+    // Create delegates for drop handling
+    const keyboardDelegate = useMemo(() => new ListKeyboardDelegate(state.collection, state.disabledKeys, listRef), [state.collection, state.disabledKeys, listRef]);
+    const dropTargetDelegate = useMemo(() => new ListDropTargetDelegate(state.collection, listRef, {
+        orientation: 'horizontal',
+    }), [state.collection, listRef]);
+    const { collectionProps } = useDroppableCollection({
+        keyboardDelegate,
+        dropTargetDelegate,
+        onReorder: handleReorder,
+    }, dropState, listRef);
+    return children(dragState, dropState, collectionProps);
+}
+
+        

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

@@ -0,0 +1,116 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useTextField } from 'react-aria';
+import { useEvent } from '../../../_internal/hooks/index.js';
+import { EditableTitleInputElement, HiddenMeasure } from './styled.js';
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * Inline editable title component for tab labels.
+ *
+ * When not editing, displays the title as a span with double-click to edit.
+ * When editing, displays an auto-sizing input field.
+ */
+export function EditableTitle({ title, isEditing, editValue, onEditValueChange, onStartEditing, onSubmit, onCancel, }) {
+    const inputRef = useRef(null);
+    const measureRef = useRef(null);
+    const [inputWidth, setInputWidth] = useState(null);
+    const justEnteredEditModeRef = useRef(false);
+    // React Aria text field hook
+    const { inputProps } = useTextField({
+        'aria-label': 'Edit tab title',
+        value: editValue,
+        onChange: onEditValueChange,
+    }, inputRef);
+    // Focus and select input when entering edit mode
+    useLayoutEffect(() => {
+        if (isEditing && inputRef.current) {
+            const input = inputRef.current;
+            // Set flag to ignore immediate blur events
+            justEnteredEditModeRef.current = true;
+            input.focus();
+            // Use requestAnimationFrame to ensure selection happens after focus
+            requestAnimationFrame(() => {
+                input.select();
+                // Clear the flag after focus is established (allow 2 frames for menu to fully close)
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        justEnteredEditModeRef.current = false;
+                    });
+                });
+            });
+        }
+        else {
+            justEnteredEditModeRef.current = false;
+        }
+    }, [isEditing]);
+    // Measure text width and update input width
+    useLayoutEffect(() => {
+        if (isEditing && measureRef.current) {
+            const width = measureRef.current.scrollWidth;
+            setInputWidth(width);
+        }
+    }, [isEditing, editValue]);
+    const handleKeyDown = useEvent((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onSubmit();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            onCancel();
+        }
+        else if (e.key === 'ArrowLeft' ||
+            e.key === 'ArrowRight' ||
+            e.key === ' ' ||
+            e.key === 'Delete' ||
+            e.key === 'Backspace') {
+            // Stop propagation to prevent tab navigation/deletion while editing
+            e.stopPropagation();
+        }
+    });
+    const handleBlur = useEvent(() => {
+        // Ignore blur events immediately after entering edit mode (menu closing causes focus loss)
+        if (justEnteredEditModeRef.current) {
+            // Re-focus the input since something else stole focus
+            requestAnimationFrame(() => {
+                inputRef.current?.focus();
+                inputRef.current?.select();
+            });
+            return;
+        }
+        // Submit on blur
+        onSubmit();
+    });
+    const handleDoubleClick = useEvent((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onStartEditing();
+    });
+    if (isEditing) {
+        // Merge our handlers with React Aria's inputProps
+        const mergedProps = {
+            ...inputProps,
+            onKeyDown: (e) => {
+                handleKeyDown(e);
+                inputProps.onKeyDown?.(e);
+            },
+            onBlur: (e) => {
+                handleBlur();
+                inputProps.onBlur?.(e);
+            },
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(HiddenMeasure, { ref: measureRef, "aria-hidden": "true", children: editValue || ' ' }), _jsx(EditableTitleInputElement, { ...mergedProps, ref: inputRef, tokens: { '$input-width': inputWidth ? `${inputWidth}px` : 'auto' } })] }));
+    }
+    return _jsx("span", { onDoubleClick: handleDoubleClick, children: title });
+}
+
+        

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

@@ -0,0 +1,318 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useDraggableItem, useFocus, useFocusVisible, useHover, useTab, } from 'react-aria';
+import { useEvent } from '../../../_internal/hooks/index.js';
+import { CloseIcon, MoreIcon } from '../../../icons/index.js';
+import { mergeProps } from '../../../utils/react/index.js';
+import { ItemAction } from '../../actions/ItemAction/index.js';
+import { ItemActionProvider } from '../../actions/ItemActionContext.js';
+import { Menu, MenuTrigger } from '../../actions/Menu/index.js';
+import { useContextMenu } from '../../actions/use-context-menu.js';
+import { EditableTitle } from './EditableTitle.js';
+import { TabContainer, TabElement } from './styled.js';
+import { TabDropIndicator } from './TabDropIndicator.js';
+import { useTabsContext } from './TabsContext.js';
+import { RADIO_SIZE_MAP } from './types.js';
+// =============================================================================
+// Event handlers for actions to prevent event propagation to tab button
+// =============================================================================
+const ACTIONS_EVENT_HANDLERS = {
+    onClick: (e) => e.stopPropagation(),
+    onPointerDown: (e) => e.stopPropagation(),
+    onPointerUp: (e) => e.stopPropagation(),
+    onMouseDown: (e) => e.stopPropagation(),
+    onMouseUp: (e) => e.stopPropagation(),
+    onKeyDown: (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.stopPropagation();
+        }
+    },
+};
+/**
+ * Extracts the raw key from a React element, stripping the ".$" prefix
+ * that React adds via Children.map/toArray.
+ */
+function getRawKey(element) {
+    if (element.key == null)
+        return null;
+    const keyStr = String(element.key);
+    return keyStr.startsWith('.$') ? keyStr.slice(2) : keyStr;
+}
+/**
+ * Process menu items for predefined action keys (rename, delete).
+ * Auto-adds labels and disables items when requirements aren't met.
+ */
+function processMenuItems(children, effectiveIsEditable, isDeletable) {
+    return Children.toArray(children).map((child) => {
+        if (!isValidElement(child))
+            return child;
+        const childKey = getRawKey(child);
+        const childProps = child.props;
+        // Handle predefined action keys
+        if (childKey === 'rename') {
+            return cloneElement(child, {
+                children: childProps.children ?? 'Rename',
+                isDisabled: childProps.isDisabled ?? !effectiveIsEditable,
+            });
+        }
+        if (childKey === 'delete') {
+            return cloneElement(child, {
+                children: childProps.children ?? 'Delete',
+                theme: childProps.theme ?? 'danger',
+                isDisabled: childProps.isDisabled ?? !isDeletable,
+            });
+        }
+        // Recursively process Menu.Section children
+        if (childProps.children && typeof childProps.children !== 'string') {
+            return cloneElement(child, {
+                children: processMenuItems(childProps.children, effectiveIsEditable, isDeletable),
+            });
+        }
+        return child;
+    });
+}
+/**
+ * Check if menu children is empty (null, undefined, or empty fragment)
+ */
+function isMenuEmpty(menu) {
+    if (menu === null || menu === undefined)
+        return true;
+    const children = Children.toArray(menu);
+    return children.length === 0;
+}
+// =============================================================================
+// TabButton Component
+// =============================================================================
+/**
+ * Individual tab button component.
+ *
+ * Uses TabsContext to access shared props, dramatically reducing prop drilling.
+ * Handles:
+ * - Tab selection and keyboard navigation
+ * - Inline title editing
+ * - Menu and context menu
+ * - Drag-and-drop reordering
+ * - Focus and hover states
+ */
+export function TabButton({ item, tabData, isLastTab }) {
+    // Get shared context
+    const { state, type, size, autoHideActions: parentAutoHideActions, isEditable: parentIsEditable, menu: parentMenu, menuTriggerProps: parentMenuTriggerProps, menuProps: parentMenuProps, contextMenu: parentContextMenu, onAction: parentOnAction, onDelete, dragState, dropState, editingKey, editValue, setEditValue, startEditing, submitEditing, cancelEditing, } = useTabsContext();
+    const ref = useRef(null);
+    const containerRef = useRef(null);
+    const actionsRef = useRef(null);
+    const { tabProps } = useTab({ key: item.key }, state, ref);
+    // Measure actions width for proper space allocation in Item
+    const [actionsWidth, setActionsWidth] = useState(0);
+    // Drag-and-drop support - only enable when both states are provided
+    const isDraggable = !!dragState && !!dropState;
+    // useDraggableItem must be called unconditionally (Rules of Hooks)
+    // When dragState is undefined, we pass a minimal mock state to satisfy the hook
+    const mockDragState = useMemo(() => ({
+        collection: state.collection,
+        selectionManager: state.selectionManager,
+        isDragging: () => false,
+        getKeysForDrag: () => new Set(),
+        isDisabled: false,
+        startDrag: () => { },
+        endDrag: () => { },
+    }), [state.collection, state.selectionManager]);
+    const dragResult = useDraggableItem({ key: item.key }, dragState ?? mockDragState);
+    const effectiveDragProps = isDraggable ? dragResult.dragProps : {};
+    const isDragging = isDraggable && dragResult.isDragging;
+    // Controlled state for menu trigger (enables keyboard opening with Shift+F10)
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    // Hover, focus, and focus-visible state handling
+    const { hoverProps, isHovered } = useHover({});
+    const [isFocused, setIsFocused] = useState(false);
+    const { focusProps } = useFocus({ onFocusChange: setIsFocused });
+    const { isFocusVisible } = useFocusVisible();
+    // Suppress focus-visible when restoring focus after editing
+    const [suppressFocusVisible, setSuppressFocusVisible] = useState(false);
+    const effectiveFocusVisible = isFocusVisible && !suppressFocusVisible;
+    const isActive = state.selectedKey === item.key;
+    const isDisabled = state.disabledKeys.has(item.key);
+    const isDeletable = !!onDelete;
+    const isEditing = editingKey === item.key;
+    // Compute effective values - Tab-level overrides Tabs-level
+    const effectiveIsEditable = tabData.isEditable ?? parentIsEditable ?? false;
+    const effectiveMenu = tabData.menu === null ? null : tabData.menu ?? parentMenu;
+    const effectiveMenuTriggerProps = {
+        ...parentMenuTriggerProps,
+        ...tabData.menuTriggerProps,
+    };
+    const effectiveMenuProps = {
+        ...parentMenuProps,
+        ...tabData.menuProps,
+    };
+    const effectiveContextMenu = tabData.contextMenu ?? parentContextMenu ?? false;
+    const effectiveType = tabData.type ?? type ?? 'default';
+    // Delete button shown only if onDelete is set AND no menu
+    const showDeleteButton = isDeletable && isMenuEmpty(effectiveMenu);
+    // Process menu items for auto-labels and disabled states
+    const processedMenu = effectiveMenu && !isMenuEmpty(effectiveMenu)
+        ? processMenuItems(effectiveMenu, effectiveIsEditable, isDeletable)
+        : null;
+    const itemKeyStr = String(item.key);
+    const handleDelete = useEvent(() => {
+        onDelete?.(itemKeyStr);
+    });
+    const handleStartEditing = useEvent(() => {
+        if (!effectiveIsEditable || isDisabled)
+            return;
+        const titleText = typeof tabData.title === 'string' ? tabData.title : itemKeyStr;
+        startEditing(itemKeyStr, titleText);
+    });
+    const handleSubmitEditing = useEvent(() => {
+        submitEditing(itemKeyStr, editValue, tabData.onTitleChange);
+        // Suppress focus-visible and restore focus to the tab button after editing
+        setSuppressFocusVisible(true);
+        requestAnimationFrame(() => {
+            ref.current?.focus();
+        });
+    });
+    const handleCancelEditing = useEvent(() => {
+        cancelEditing();
+        // Suppress focus-visible and restore focus to the tab button after editing
+        setSuppressFocusVisible(true);
+        requestAnimationFrame(() => {
+            ref.current?.focus();
+        });
+    });
+    const handleEditValueChange = useEvent((value) => {
+        setEditValue(value);
+    });
+    // Handle menu actions - predefined actions first, then callbacks
+    const handleMenuAction = useEvent((action) => {
+        // Strip the ".$" prefix that React adds via Children.toArray/map
+        const actionStr = String(action);
+        const normalizedAction = actionStr.startsWith('.$')
+            ? actionStr.slice(2)
+            : actionStr;
+        // Handle predefined actions first (only if requirements are met)
+        if (normalizedAction === 'rename' && effectiveIsEditable) {
+            handleStartEditing();
+        }
+        if (normalizedAction === 'delete' && isDeletable) {
+            onDelete?.(itemKeyStr);
+        }
+        // Call Tab-level onAction first (with normalized action)
+        tabData.onAction?.(normalizedAction);
+        // Then call Tabs-level onAction with tab key (with normalized action)
+        parentOnAction?.(normalizedAction, itemKeyStr);
+    });
+    // Keyboard handler for accessibility shortcuts (WAI-ARIA Tabs Pattern)
+    const handleKeyDown = useEvent((e) => {
+        // Reset focus-visible suppression on any keyboard interaction
+        if (suppressFocusVisible) {
+            setSuppressFocusVisible(false);
+        }
+        // F2 to start editing (standard rename shortcut)
+        if (e.key === 'F2' && effectiveIsEditable && !isDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            handleStartEditing();
+        }
+        // Shift+F10 opens the menu (standard context menu shortcut)
+        if (e.key === 'F10' && e.shiftKey && processedMenu) {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsMenuOpen(true);
+        }
+        // Delete key for direct tab deletion (ARIA Tabs pattern optional feature)
+        // Skip when editing to allow normal text editing operations
+        if ((e.key === 'Delete' || e.key === 'Backspace') &&
+            isDeletable &&
+            !isEditing) {
+            e.preventDefault();
+            onDelete?.(itemKeyStr);
+        }
+    });
+    const mods = useMemo(() => ({
+        type: effectiveType,
+        active: isActive,
+        deletable: isDeletable,
+        disabled: isDisabled,
+        editing: isEditing,
+        hovered: isHovered,
+        focused: isFocused,
+        'focus-visible': effectiveFocusVisible,
+        draggable: isDraggable,
+        dragging: isDragging,
+    }), [
+        effectiveType,
+        isActive,
+        isDeletable,
+        isDisabled,
+        isEditing,
+        isHovered,
+        isFocused,
+        effectiveFocusVisible,
+        isDraggable,
+        isDragging,
+    ]);
+    // Scroll active tab into view
+    useEffect(() => {
+        if (ref.current && isActive) {
+            ref.current.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+        }
+    }, [isActive]);
+    // Build menu element
+    const menuElement = processedMenu ? (_jsx(Menu, { ...effectiveMenuProps, onAction: handleMenuAction, children: processedMenu })) : null;
+    // Use the useContextMenu hook for context menu handling
+    const contextMenu = useContextMenu(Menu, { placement: 'bottom start' }, {
+        ...effectiveMenuProps,
+        onAction: handleMenuAction,
+        children: processedMenu,
+    });
+    // Build menu trigger action with controlled state for keyboard accessibility
+    const menuAction = menuElement ? (_jsxs(MenuTrigger, { isOpen: isMenuOpen, onOpenChange: setIsMenuOpen, children: [_jsx(ItemAction, { tabIndex: -1, icon: _jsx(MoreIcon, {}), ...effectiveMenuTriggerProps }), menuElement] })) : null;
+    // Build delete button (only shown when no menu)
+    const deleteAction = showDeleteButton ? (_jsx(ItemAction, { tabIndex: -1, icon: _jsx(CloseIcon, {}), tooltip: "Close", onPress: handleDelete })) : null;
+    // Order: custom actions → menu trigger → delete button
+    const actions = tabData.actions || menuAction || deleteAction ? (_jsxs(_Fragment, { children: [tabData.actions, menuAction, deleteAction] })) : undefined;
+    // Measure actions width to pass to Item for proper space allocation
+    useLayoutEffect(() => {
+        if (actions && actionsRef.current) {
+            setActionsWidth(Math.round(actionsRef.current.offsetWidth));
+        }
+    }, [actions]);
+    // Determine effective size
+    const effectiveSize = tabData.size ?? size ?? 'medium';
+    const itemSize = effectiveType === 'radio'
+        ? RADIO_SIZE_MAP[effectiveSize === 'large' ? 'large' : 'medium']
+        : effectiveSize;
+    // Determine Item type prop
+    const itemType = effectiveType === 'default' ? (isActive ? 'clear' : 'neutral') : 'neutral';
+    // Determine shape - file type uses sharp edges
+    const isFileType = effectiveType === 'file';
+    const itemShape = isFileType ? 'sharp' : undefined;
+    // Determine autoHideActions - tab-level overrides parent-level
+    const effectiveAutoHideActions = tabData.autoHideActions ?? parentAutoHideActions;
+    // Render title with editing support if editable
+    const titleContent = effectiveIsEditable ? (_jsx(EditableTitle, { title: tabData.title, isEditing: isEditing, editValue: isEditing ? editValue : '', onEditValueChange: handleEditValueChange, onStartEditing: handleStartEditing, onSubmit: handleSubmitEditing, onCancel: handleCancelEditing })) : (tabData.title);
+    // Extract tab-specific props and pass through the rest (style props) to the Item
+    const { title: _title, content: _content, key: _key, isDisabled: _isDisabled, prerender: _prerender, keepMounted: _keepMounted, size: _size, type: _type, actions: _actions, autoHideActions: _autoHideActions, isEditable: _isEditable, onTitleChange: _onTitleChange, menu: _menu, menuTriggerProps: _menuTriggerProps, menuProps: _menuProps, contextMenu: _contextMenu, onAction: _onAction, qa, qaVal, styles, ...itemStyleProps } = tabData;
+    // Use the hook's targetRef when context menu is enabled
+    const effectiveContainerRef = effectiveContextMenu && processedMenu
+        ? contextMenu.targetRef
+        : containerRef;
+    // ARIA: indicate popup menu presence
+    const ariaProps = processedMenu ? { 'aria-haspopup': 'menu' } : {};
+    // Mods for TabContainer
+    const containerMods = {
+        ...mods,
+        'auto-hide-actions': effectiveAutoHideActions,
+    };
+    return (_jsxs(TabContainer, { ref: effectiveContainerRef, "data-size": itemSize, mods: containerMods, tokens: { '$actions-width': `${actionsWidth}px` }, ...effectiveDragProps, children: [isDraggable && dropState && (_jsx(TabDropIndicator, { target: { type: 'item', key: item.key, dropPosition: 'before' }, dropState: dropState, position: "before" })), _jsx(TabElement, { preserveActionsSpace: true, autoHideActions: effectiveAutoHideActions, as: "button", ...mergeProps(tabProps, hoverProps, focusProps, {
+                    onKeyDown: handleKeyDown,
+                }), ...ariaProps, ...itemStyleProps, ref: ref, qa: qa ?? `Tab-${String(item.key)}`, qaVal: qaVal, styles: styles, mods: mods, isSelected: isActive, isDisabled: isDisabled, size: itemSize, type: itemType, shape: itemShape, actions: actions ? true : undefined, children: titleContent }), actions && (_jsx("div", { ref: actionsRef, "data-element": "Actions", ...ACTIONS_EVENT_HANDLERS, children: _jsx(ItemActionProvider, { type: itemType, theme: "default", isDisabled: isDisabled, children: actions }) })), effectiveContextMenu && processedMenu && contextMenu.rendered, isDraggable && dropState && isLastTab && (_jsx(TabDropIndicator, { target: { type: 'item', key: item.key, dropPosition: 'after' }, dropState: dropState, position: "after" }))] }));
+}
+
+        

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

@@ -0,0 +1,60 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-29fafcf
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useDropIndicator } from 'react-aria';
+import { DropIndicatorElement } from './styled.js';
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * Visual drop indicator for drag-and-drop tab reordering.
+ *
+ * Renders a vertical line showing where the dragged tab will be dropped.
+ * Only visible when the drop target is active.
+ */
+export function TabDropIndicator({ target, dropState, position, }) {
+    const ref = useRef(null);
+    const prevContentRef = useRef(null);
+    const [, setTick] = useState(0);
+    const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target }, dropState, ref);
+    // Re-evaluate drop target registration when tab content changes.
+    // Active only while the indicator is rendered in the DOM (during drags).
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const tabList = element.closest('[data-element="TabList"]');
+        if (!tabList)
+            return;
+        prevContentRef.current = tabList.textContent;
+        const observer = new MutationObserver(() => {
+            const currentContent = tabList.textContent;
+            if (currentContent !== prevContentRef.current) {
+                prevContentRef.current = currentContent;
+                setTick((n) => n + 1);
+            }
+        });
+        observer.observe(tabList, {
+            subtree: true,
+            characterData: true,
+            childList: true,
+        });
+        return () => observer.disconnect();
+    }, [isHidden]);
+    if (isHidden) {
+        return null;
+    }
+    return (_jsx(DropIndicatorElement, { ref: ref, role: "option", ...dropIndicatorProps, mods: {
+            'drop-target': isDropTarget,
+            after: position === 'after',
+            before: position === 'before',
+        } }));
+}
+
+