@cube-dev/ui-kit 0.101.0 → 0.103.0

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

@@ -0,0 +1,23 @@
+import { ReactNode, RefObject } from 'react';
+import { DraggableCollectionState, DroppableCollectionState, TabListState } from 'react-stately';
+import type { Key } from '@react-types/shared';
+export interface DraggableTabListProps {
+    /** Tab list state from React Stately */
+    state: TabListState<object>;
+    /** Ref to the tab list container */
+    listRef: RefObject<HTMLDivElement | null>;
+    /** Current ordered keys */
+    orderedKeys: string[];
+    /** Callback when tabs are reordered */
+    onReorder?: (newOrder: Key[]) => void;
+    /** Render function that receives drag/drop states */
+    children: (dragState: DraggableCollectionState, dropState: DroppableCollectionState, collectionProps: Record<string, unknown>) => ReactNode;
+}
+/**
+ * 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 declare function DraggableTabList({ state, listRef, orderedKeys, onReorder, children, }: DraggableTabListProps): ReactNode;

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface EditableTitleProps {
+    /** The current title to display (when not editing) */
+    title: ReactNode;
+    /** Whether the title is currently being edited */
+    isEditing: boolean;
+    /** Current edit input value */
+    editValue: string;
+    /** Callback when edit value changes */
+    onEditValueChange: (value: string) => void;
+    /** Callback to start editing (e.g., on double-click) */
+    onStartEditing: () => void;
+    /** Callback when editing is submitted (Enter or blur) */
+    onSubmit: () => void;
+    /** Callback when editing is cancelled (Escape) */
+    onCancel: () => void;
+}
+/**
+ * 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 declare function EditableTitle({ title, isEditing, editValue, onEditValueChange, onStartEditing, onSubmit, onCancel, }: EditableTitleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { ParsedTab } from './types';
+import type { Node } from '@react-types/shared';
+export interface TabButtonProps {
+    /** React Aria collection item */
+    item: Node<object>;
+    /** Parsed tab data */
+    tabData: ParsedTab;
+    /** Whether this is the last tab (for drop indicator) */
+    isLastTab?: boolean;
+}
+/**
+ * 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 declare function TabButton({ item, tabData, isLastTab }: TabButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import type { DropTarget } from 'react-aria';
+import type { DroppableCollectionState } from 'react-stately';
+export interface TabDropIndicatorProps {
+    /** Drop target configuration */
+    target: DropTarget;
+    /** Droppable collection state from React Aria */
+    dropState: DroppableCollectionState;
+    /** Position of the indicator (before or after the tab) */
+    position: 'before' | 'after';
+}
+/**
+ * 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 declare function TabDropIndicator({ target, dropState, position, }: TabDropIndicatorProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,49 @@
+import type { Key } from '@react-types/shared';
+import type { ReactNode } from 'react';
+import type { TabListState } from 'react-stately';
+import type { Styles } from '../../../tasty';
+import type { CacheKeyValue, ParsedPanel, ParsedTab } from './types';
+/**
+ * Determines if a panel should be rendered based on prerender/keepMounted settings.
+ */
+export declare function shouldRenderPanel(isActive: boolean, wasVisited: boolean, effectivePrerender: boolean | undefined, effectiveKeepMounted: boolean | undefined): boolean;
+export interface TabPanelRendererProps {
+    tabKey: string;
+    state: TabListState<object>;
+    content: ReactNode;
+    prerender?: boolean;
+    keepMounted?: boolean;
+    tabPrerender?: boolean;
+    tabKeepMounted?: boolean;
+    visitedKeys: Set<string>;
+    panelStyles?: Styles;
+    qa?: string;
+    qaVal?: string;
+}
+/**
+ * Renders a single tab panel with proper ARIA attributes.
+ */
+export declare function TabPanelRenderer({ tabKey, state, content, prerender, keepMounted, tabPrerender, tabKeepMounted, visitedKeys, panelStyles, qa, qaVal, }: TabPanelRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export interface CachedPanelRendererProps {
+    parsedTabs: ParsedTab[];
+    explicitPanels: Map<string, ParsedPanel>;
+    state: TabListState<object>;
+    renderPanel: (key: Key) => ReactNode;
+    panelCacheKeys?: Record<string | number, CacheKeyValue>;
+    prerender: boolean;
+    keepMounted: boolean;
+    visitedKeys: Set<string>;
+}
+/**
+ * Renders panels with content caching for `renderPanel`.
+ *
+ * Core principle: `renderPanel` is only called when the tab is active
+ * (or once on mount for `prerender`). Inactive panels use cached content.
+ *
+ * Caching behavior:
+ * - `keepMounted=true`: Cache content after first activation, reuse while inactive
+ * - `prerender=true`: Call `renderPanel` once on mount, reuse until active again
+ * - `panelCacheKeys`: Adds cache-key-based invalidation (lazy - only when active)
+ * - No caching props: Only active panel is rendered, unmount when inactive
+ */
+export declare function CachedPanelRenderer({ parsedTabs, explicitPanels, state, renderPanel, panelCacheKeys, prerender, keepMounted, visitedKeys, }: CachedPanelRendererProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { Key } from 'react-aria';
+import type { ParsedTab } from './types';
+export interface TabPickerProps {
+    /** Ordered list of parsed tabs to display in the picker */
+    tabs: ParsedTab[];
+    /** Currently selected tab key */
+    selectedKey: Key | null;
+    /** Callback when a tab is selected from the picker */
+    onSelect: (key: Key) => void;
+    /** Callback when a tab should be deleted. When provided, shows delete action on items. */
+    onDelete?: (key: Key) => void;
+}
+/**
+ * Tab picker component that displays a dropdown menu of all tabs.
+ *
+ * Used in the Tabs suffix area when tabs overflow to provide quick navigation
+ * to any tab without scrolling.
+ */
+export declare function TabPicker({ tabs, selectedKey, onSelect, onDelete, }: TabPickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,172 +1,5 @@
-import { Key } from '@react-types/shared';
-import { ReactElement, ReactNode } from 'react';
-import { BaseProps, OuterStyleProps, Styles } from '../../../tasty';
-import { CubeItemProps } from '../../content/Item';
-/** Visual appearance type for tabs */
-export type TabType = 'default' | 'file' | 'panel' | 'radio';
-/** Tab size options */
-export type TabSize = 'medium' | 'large';
-/** Common props for panel rendering behavior */
-interface PanelBehaviorProps {
-    /** If true, panel is rendered but hidden when not active. */
-    prerender?: boolean;
-    /** If true, once visited the panel stays in DOM. */
-    keepMounted?: boolean;
-}
-/** Common props for QA attributes */
-interface QAProps {
-    /** QA selector attribute. */
-    qa?: string;
-    /** Additional QA value attribute. */
-    qaVal?: string;
-}
-/** Props from CubeItemProps that don't apply to Tab */
-type OmittedItemProps = 'id' | 'type' | 'size' | 'theme' | 'shape' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'description' | 'descriptionPlacement' | 'descriptionProps' | 'tooltip' | 'defaultTooltipPlacement' | 'hotkeys' | 'keyboardShortcutProps' | 'loadingSlot' | 'isLoading' | 'labelProps' | 'labelRef' | 'level' | 'highlight' | 'highlightCaseSensitive' | 'highlightStyles' | 'variant' | 'htmlType' | 'isSelected' | 'preserveActionsSpace' | 'disableActionsFocus' | 'actions' | 'showActionsOnHover';
-/** Common styling props for tabs - inherits style props from CubeItemProps */
-interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
-    /** Tab size. Large uses `t2m` preset, medium uses `t3m`. */
-    size?: TabSize;
-    /** Visual appearance type. */
-    type?: TabType;
-    /** Whether to show actions only on hover. */
-    showActionsOnHover?: boolean;
-}
-export interface CubeTabsProps extends BaseProps, OuterStyleProps, PanelBehaviorProps {
-    /** Controlled active tab key. When provided, component is controlled. */
-    activeKey?: Key;
-    /** Initial active tab key for uncontrolled mode. */
-    defaultActiveKey?: Key;
-    /**
-     * Visual appearance type for tabs.
-     * - `default` - Standard tabs with selection indicator below (default)
-     * - `file` - File-style tabs with fill highlight on selection, delimiter between tabs
-     * - `panel` - Panel-style tabs with border bottom highlight on selection, delimiter between tabs
-     * - `radio` - Radio button style for tab selection
-     * @default 'default'
-     */
-    type?: TabType;
-    /** Tab size. Large uses `t2m` preset, medium uses `t3m`. */
-    size?: TabSize;
-    /** Accessible label for the tab list. */
-    label?: string;
-    /** Content rendered before the tab list. */
-    prefix?: ReactNode;
-    /** Content rendered after the tab list. */
-    suffix?: ReactNode;
-    /** Callback when active tab changes. */
-    onChange?: (key: Key) => void;
-    /** Callback when tab delete button is clicked. Presence enables delete buttons. */
-    onDelete?: (key: Key) => void;
-    /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */
-    onTitleChange?: (key: Key, newTitle: string) => void;
-    /** Whether to show tab actions only on hover. Can be overridden per-tab. */
-    showActionsOnHover?: boolean;
-    /** Custom tasty styles for the tab bar container. */
-    styles?: Styles;
-    /** QA selector attribute. */
-    qa?: string;
-    /** Tab components or Tabs.List with Tabs.Panel. */
-    children?: ReactNode;
-    /**
-     * Functional content renderer for optimized lazy evaluation.
-     * When provided, panel content is only evaluated for the active tab,
-     * while inactive tabs use cached content. This prevents expensive
-     * re-renders of tab content on every parent render.
-     *
-     * Use with tabs that have no children for maximum optimization.
-     *
-     * @param key - The key of the tab to render content for
-     * @returns Panel content for the given tab
-     *
-     * @example
-     * ```tsx
-     * <Tabs
-     *   renderPanel={(key) => {
-     *     switch (key) {
-     *       case 'tab1': return <ExpensiveComponent />;
-     *       case 'tab2': return <AnotherExpensive />;
-     *       default: return null;
-     *     }
-     *   }}
-     * >
-     *   <Tab key="tab1" title="Tab 1" />
-     *   <Tab key="tab2" title="Tab 2" />
-     * </Tabs>
-     * ```
-     */
-    renderPanel?: (key: Key) => ReactNode;
-    /**
-     * Cache keys for individual panels. Enables caching for specified panels.
-     *
-     * By default (without cache keys), panels re-render on every Tabs render.
-     * When a panel has a non-undefined cache key defined, its content is cached
-     * and reused until the cache key changes.
-     *
-     * **Important:**
-     * - Cache keys must be primitive values (string, number, boolean, null).
-     * - Objects/arrays will cause cache misses on every render (reference comparison).
-     * - Symbol tab keys are not supported for caching (use string keys instead).
-     * - Setting a key to `undefined` is the same as not having it (no caching).
-     *
-     * @example
-     * ```tsx
-     * // Enable caching for specific panels with their dependencies as cache keys
-     * <Tabs
-     *   renderPanel={(key) => <Panel data={data[key]} />}
-     *   panelCacheKeys={{
-     *     tab1: data.tab1.version,  // Cached, invalidates when version changes
-     *     tab2: data.tab2.version,  // Cached, invalidates when version changes
-     *     // tab3 has no cache key - re-renders on every Tabs render
-     *   }}
-     * />
-     * ```
-     */
-    panelCacheKeys?: Record<string | number, string | number | boolean | null | undefined>;
-}
-export interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {
-    /**
-     * Unique identifier for the tab. Used for activeKey matching.
-     * Auto-injected from the React `key` prop (converted to string).
-     * Note: All keys are internally converted to strings for React Aria compatibility.
-     */
-    id?: string;
-    /** Content displayed in the tab button. */
-    title: ReactNode;
-    /** Panel content rendered when tab is active. */
-    children?: ReactNode;
-    /** Disables the tab (cannot be selected). */
-    isDisabled?: boolean;
-    /** Actions to render in the tab (e.g., icons, buttons). Rendered before delete action if tab is deletable. */
-    actions?: ReactNode;
-    /** Whether the tab title can be edited. Requires onTitleChange on Tabs or Tab. */
-    isEditable?: boolean;
-    /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */
-    onTitleChange?: (newTitle: string) => void;
-}
-export interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {
-    /**
-     * Panel identifier. Must match a Tab's id.
-     * Auto-injected from the React `key` prop (converted to string).
-     */
-    id?: string;
-    /** Panel content. */
-    children?: ReactNode;
-    /** Custom tasty styles for the panel container. */
-    styles?: Styles;
-}
-export interface CubeTabListProps {
-    /** Tab components. */
-    children?: ReactNode;
-}
-/** Ref API for programmatic control of Tabs component */
-export interface CubeTabsRef {
-    /** The root DOM element of the Tabs component */
-    element: HTMLDivElement | null;
-    /** Start editing a tab's title by its key */
-    startEditing: (key: Key) => void;
-    /** Cancel the current editing session */
-    cancelEditing: () => void;
-}
+import { ReactElement } from 'react';
+import type { CubeTabListProps, CubeTabPanelProps, CubeTabProps, CubeTabsProps } from './types';
 declare function Tab(_props: CubeTabProps): ReactElement | null;
 declare namespace Tab {
     var displayName: string;
@@ -184,8 +17,6 @@ declare namespace TabList {
  * Built with React Aria for full accessibility support.
  *
  * **Note:** Tab keys are internally converted to strings for React Aria compatibility.
- * When using `activeKey`, `onChange`, etc., be aware that numeric keys will be
- * converted to their string equivalents.
  *
  * @example
  * // Simple usage
@@ -211,24 +42,8 @@ declare namespace TabList {
  *   <Tabs.Panel key="tab1">Content 1</Tabs.Panel>
  *   <Tabs.Panel key="tab2">Content 2</Tabs.Panel>
  * </Tabs>
- *
- * @example
- * // Optimized lazy rendering with renderPanel
- * <Tabs
- *   defaultActiveKey="tab1"
- *   renderPanel={(key) => {
- *     switch (key) {
- *       case 'tab1': return <ExpensiveComponent />;
- *       case 'tab2': return <AnotherExpensive />;
- *       default: return null;
- *     }
- *   }}
- * >
- *   <Tab key="tab1" title="Tab 1" />
- *   <Tab key="tab2" title="Tab 2" />
- * </Tabs>
  */
-export declare const Tabs: import("react").ForwardRefExoticComponent<CubeTabsProps & import("react").RefAttributes<CubeTabsRef>> & {
+export declare const Tabs: import("react").ForwardRefExoticComponent<CubeTabsProps & import("react").RefAttributes<HTMLDivElement>> & {
     Tab: typeof Tab;
     List: typeof TabList;
     Panel: typeof TabPanel;

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

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import type { Key } from '@react-types/shared';
+import type { DraggableCollectionState, DroppableCollectionState, TabListState } from 'react-stately';
+import type { CubeItemActionProps } from '../../actions/ItemAction';
+import type { CubeMenuProps } from '../../actions/Menu';
+import type { TabSize, TabType } from './types';
+export interface TabsContextValue {
+    /** Tab list state from React Stately */
+    state: TabListState<object>;
+    /** Parent-level type default */
+    type: TabType;
+    /** Parent-level size default */
+    size?: TabSize;
+    /** Parent-level showActionsOnHover default */
+    showActionsOnHover?: boolean;
+    /** Parent-level isEditable default */
+    isEditable?: boolean;
+    /** Parent-level menu default */
+    menu?: ReactNode;
+    /** Parent-level menuTriggerProps default */
+    menuTriggerProps?: Partial<CubeItemActionProps>;
+    /** Parent-level menuProps default */
+    menuProps?: Partial<CubeMenuProps<object>>;
+    /** Parent-level contextMenu default */
+    contextMenu?: boolean;
+    /** Callback when tab is deleted */
+    onDelete?: (key: Key) => void;
+    /** Parent-level onAction callback */
+    onAction?: (action: Key, tabKey: Key) => void;
+    /** Drag state for reorderable tabs (undefined if not reorderable) */
+    dragState?: DraggableCollectionState;
+    /** Drop state for reorderable tabs (undefined if not reorderable) */
+    dropState?: DroppableCollectionState;
+    /** Current tab being edited (null if none) */
+    editingKey: Key | null;
+    /** Current edit value */
+    editValue: string;
+    /** Set the edit value */
+    setEditValue: (value: string) => void;
+    /** Start editing a tab */
+    startEditing: (key: Key, currentTitle: string) => void;
+    /** Submit the current edit */
+    submitEditing: (key: Key, newTitle: string, tabOnTitleChange?: (title: string) => void) => void;
+    /** Cancel the current edit */
+    cancelEditing: () => void;
+}
+export interface TabsProviderProps {
+    value: TabsContextValue;
+    children: ReactNode;
+}
+export declare function TabsProvider({ value, children }: TabsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTabsContext(): TabsContextValue;

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

@@ -1,2 +1,2 @@
 export { Tabs, Tab } from './Tabs';
-export type { CubeTabsProps, CubeTabsRef, CubeTabProps, CubeTabPanelProps, CubeTabListProps, } from './Tabs';
+export type { CubeTabsProps, CubeTabProps, CubeTabPanelProps, CubeTabListProps, TabType, TabSize, } from './types';