@cube-dev/ui-kit 0.102.0 → 0.103.0

package/es/components/form/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/form/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/form/wrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/helpers/DisplayTransition/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/helpers/IconSwitch/IconSwitch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/helpers/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/layout/Flex.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/layout/Flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/layout/Grid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/layout/Panel.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/layout/Prefix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/layout/ResizablePanel.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/layout/Space.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

package/es/components/layout/Suffix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.102.0
+ * @cube-dev/ui-kit v0.103.0
  * Released under the MIT license.
  */
 

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

@@ -0,0 +1,101 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.103.0
+ * 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';
+// =============================================================================
+// 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: () => ['move'],
+    });
+    // Enable the draggable collection
+    useDraggableCollection({
+        getItems,
+        getAllowedDropOperations: () => ['move'],
+    }, 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.103.0
+ * 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 });
+}
+
+