@cube-dev/ui-kit 0.113.1 → 0.115.0

package/es/components/layout/Space.js

@@ -1,36 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * 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

@@ -1,42 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * 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

@@ -1,103 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * 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

@@ -1,116 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * 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

@@ -1,318 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * 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

@@ -1,34 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } 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 { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target }, dropState, ref);
-    if (isHidden) {
-        return null;
-    }
-    return (_jsx(DropIndicatorElement, { ref: ref, role: "option", ...dropIndicatorProps, mods: {
-            'drop-target': isDropTarget,
-            after: position === 'after',
-            before: position === 'before',
-        } }));
-}
-
-