@cube-dev/ui-kit 0.155.0 → 0.157.0

package/dist/components/shared/DraggableCollection.js

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { ListDropTargetDelegate, ListKeyboardDelegate, mergeProps, useDraggableCollection, useDroppableCollection } from "react-aria";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DragPreview, ListDropTargetDelegate, ListKeyboardDelegate, mergeProps, useDraggableCollection, useDroppableCollection } from "react-aria";
 import { useDraggableCollectionState, useDroppableCollectionState } from "react-stately";
 
 //#region src/components/shared/DraggableCollection.tsx
@@ -32,7 +33,7 @@ function createMockDragState(collection, selectionManager) {
 * Encapsulates all drag/drop hook calls so they are only invoked when
 * reordering is actually enabled.
 */
-function DraggableCollection({ state, listRef, orderedKeys, orientation, onReorder, children }) {
+function DraggableCollection({ state, listRef, orderedKeys, orientation, onReorder, onItemDrop, shouldAcceptItemDrop, renderPreview, children }) {
 	const handleReorder = useEvent((e) => {
 		if (!onReorder) return;
 		const { target, keys: movableKeys } = e;
@@ -55,6 +56,7 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 		}, []) : orderedKeys);
 	});
 	const getItems = useCallback((keys) => {
+		dragKeysRef.current = [...keys];
 		return [...keys].map((key) => {
 			const item = state.collection.getItem(key);
 			return { "text/plain": item?.textValue || String(key) };
@@ -66,20 +68,30 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 		const value = Reflect.get(target, prop);
 		return typeof value === "function" ? value.bind(target) : value;
 	} }), [state.selectionManager]);
+	const previewRef = useRef(null);
 	const dragState = useDraggableCollectionState({
 		collection: state.collection,
 		selectionManager: dragSelectionManager,
 		getItems,
-		getAllowedDropOperations
+		getAllowedDropOperations,
+		preview: renderPreview ? previewRef : void 0
 	});
 	useDraggableCollection({
 		getItems,
 		getAllowedDropOperations
 	}, dragState, listRef);
+	const handleItemDrop = useEvent((e) => {
+		if (!onItemDrop) return;
+		const keys = [...e.dropOperation === "cancel" ? [] : dragKeysRef.current];
+		onItemDrop(e.target.key, keys);
+	});
+	const dragKeysRef = useRef([]);
 	const dropState = useDroppableCollectionState({
 		collection: state.collection,
 		selectionManager: state.selectionManager,
-		onReorder: handleReorder
+		onReorder: onReorder ? handleReorder : void 0,
+		onItemDrop: onItemDrop ? handleItemDrop : void 0,
+		shouldAcceptItemDrop: shouldAcceptItemDrop ? (target) => shouldAcceptItemDrop(target.key) : void 0
 	});
 	const { collectionProps } = useDroppableCollection({
 		keyboardDelegate: useMemo(() => new ListKeyboardDelegate({
@@ -98,7 +110,8 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 			listRef,
 			orientation
 		]),
-		onReorder: handleReorder
+		onReorder: onReorder ? handleReorder : void 0,
+		onItemDrop: onItemDrop ? handleItemDrop : void 0
 	}, dropState, listRef);
 	const isDragActive = dragState.draggingKeys.size > 0;
 	const endDragRef = useRef(dragState.endDrag);
@@ -117,7 +130,7 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 		document.addEventListener("keydown", handleEscape, true);
 		return () => document.removeEventListener("keydown", handleEscape, true);
 	}, [isDragActive]);
-	return children(dragState, dropState, mergeProps(collectionProps, { onKeyDownCapture: useEvent((e) => {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(dragState, dropState, mergeProps(collectionProps, { onKeyDownCapture: useEvent((e) => {
 		if (!e.altKey || !onReorder) return;
 		const target = e.target;
 		if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target.isContentEditable) return;
@@ -140,7 +153,10 @@ function DraggableCollection({ state, listRef, orderedKeys, orientation, onReord
 		const newKeys = [...orderedKeys];
 		[newKeys[idx], newKeys[targetIdx]] = [newKeys[targetIdx], newKeys[idx]];
 		onReorder(newKeys);
-	}) }));
+	}) })), renderPreview ? /* @__PURE__ */ jsx(DragPreview, {
+		ref: previewRef,
+		children: () => renderPreview(dragKeysRef.current)
+	}) : null] });
 }
 
 //#endregion

package/dist/components/shared/DraggableCollection.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableCollection.js","names":[],"sources":["../../../src/components/shared/DraggableCollection.tsx"],"sourcesContent":["import {\n  KeyboardEvent,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  DragItem,\n  DroppableCollectionReorderEvent,\n  ListDropTargetDelegate,\n  ListKeyboardDelegate,\n  mergeProps,\n  useDraggableCollection,\n  useDroppableCollection,\n} from 'react-aria';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useDraggableCollectionState,\n  useDroppableCollectionState,\n} from 'react-stately';\n\nimport { useEvent } from '../../_internal/hooks';\n\nimport type { Collection, DropOperation, Key, Node } from '@react-types/shared';\n\nconst getAllowedDropOperations = (): DropOperation[] => ['move'];\n\n/**\n * Creates a no-op mock of DraggableCollectionState.\n * Used to satisfy useDraggableItem when drag is disabled (Rules of Hooks).\n */\nexport function createMockDragState(\n  collection: Collection<Node<any>>,\n  selectionManager: Record<string, any>,\n): DraggableCollectionState {\n  return {\n    collection,\n    selectionManager,\n    isDragging: () => false,\n    getKeysForDrag: () => new Set<Key>(),\n    draggedKey: null,\n    draggingKeys: new Set<Key>(),\n    getAllowedDropOperations: () => [],\n    preview: null,\n    isDisabled: false,\n    startDrag: () => {},\n    endDrag: () => {},\n  } as DraggableCollectionState;\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableCollectionProps {\n  state: {\n    collection: Collection<Node<any>>;\n    selectionManager: { selectedKeys: Set<Key> } & Record<string, any>;\n    disabledKeys: Set<Key>;\n  };\n  listRef: RefObject<HTMLElement | null>;\n  orderedKeys: string[];\n  orientation: 'horizontal' | 'vertical';\n  onReorder?: (newOrder: string[]) => void;\n  /** Render function receiving drag/drop states and merged collection+keyboard props */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Generic wrapper that enables drag-and-drop reordering for a collection.\n *\n * Used by both DraggableTabList (horizontal) and DraggableListBox (vertical).\n * Encapsulates all drag/drop hook calls so they are only invoked when\n * reordering is actually enabled.\n */\nexport function DraggableCollection({\n  state,\n  listRef,\n  orderedKeys,\n  orientation,\n  onReorder,\n  children,\n}: DraggableCollectionProps) {\n  const handleReorder = useEvent((e: DroppableCollectionReorderEvent) => {\n    if (!onReorder) return;\n\n    const { target, keys: movableKeys } = e;\n    const { dropPosition, key: targetKey } = target;\n    const movableKey = [...movableKeys][0] as string;\n\n    const movableIndex = orderedKeys.indexOf(movableKey);\n    const targetIndex = orderedKeys.indexOf(String(targetKey));\n\n    if (movableIndex === -1 || targetIndex === -1) return;\n\n    const newKeys =\n      movableIndex !== targetIndex\n        ? orderedKeys.reduce((arr, key, i) => {\n            if (i === movableIndex) {\n              return arr;\n            }\n\n            if (i === targetIndex) {\n              if (dropPosition === 'before') {\n                arr.push(movableKey);\n                arr.push(key);\n              } else {\n                arr.push(key);\n                arr.push(movableKey);\n              }\n            } else {\n              arr.push(key);\n            }\n\n            return arr;\n          }, [] as string[])\n        : orderedKeys;\n\n    onReorder(newKeys);\n  });\n\n  const getItems = useCallback(\n    (keys: Set<Key>): DragItem[] => {\n      return [...keys].map((key) => {\n        const item = state.collection.getItem(key);\n        return {\n          'text/plain': item?.textValue || String(key),\n        };\n      });\n    },\n    [state.collection],\n  );\n\n  // Proxy selectionManager to hide selection from react-aria's drag logic.\n  // Without this, react-aria drags ALL selected items when any selected item\n  // is grabbed (hardcoded in useDraggableCollectionState → internal getKeys).\n  // The proxy intercepts `selectedKeys` and `isSelected` so every item looks\n  // unselected for drag, while all other methods (isDisabled, setFocusedKey, …)\n  // delegate to the real manager. `bind(target)` preserves `this` for methods\n  // that live on the prototype chain.\n  const dragSelectionManager = useMemo(\n    () =>\n      new Proxy(state.selectionManager, {\n        get(target, prop) {\n          if (prop === 'selectedKeys') return new Set<Key>();\n          if (prop === 'isSelected') return () => false;\n          const value = Reflect.get(target, prop);\n          return typeof value === 'function' ? value.bind(target) : value;\n        },\n      }),\n    [state.selectionManager],\n  );\n\n  const dragState = useDraggableCollectionState({\n    collection: state.collection,\n    selectionManager: dragSelectionManager,\n    getItems,\n    getAllowedDropOperations,\n  });\n\n  useDraggableCollection(\n    {\n      getItems,\n      getAllowedDropOperations,\n    },\n    dragState,\n    listRef,\n  );\n\n  const dropState = useDroppableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    onReorder: handleReorder,\n  });\n\n  const keyboardDelegate = useMemo(\n    () =>\n      new ListKeyboardDelegate({\n        collection: state.collection,\n        disabledKeys: state.disabledKeys,\n        ref: listRef,\n        orientation,\n      }),\n    [state.collection, state.disabledKeys, listRef, orientation],\n  );\n\n  const dropTargetDelegate = useMemo(\n    () =>\n      new ListDropTargetDelegate(state.collection, listRef, {\n        orientation,\n      }),\n    [state.collection, listRef, orientation],\n  );\n\n  const { collectionProps } = useDroppableCollection(\n    {\n      keyboardDelegate,\n      dropTargetDelegate,\n      onReorder: handleReorder,\n    },\n    dropState,\n    listRef,\n  );\n\n  // Force-cancel drag on Escape. Native HTML5 drag cancels visually, but some\n  // browsers (Safari) don't fire `dragend` synchronously, leaving react-aria's\n  // `isDragging` stale until a second keypress.\n  const isDragActive = dragState.draggingKeys.size > 0;\n  const endDragRef = useRef(dragState.endDrag);\n  endDragRef.current = dragState.endDrag;\n\n  useEffect(() => {\n    if (!isDragActive) return;\n\n    const handleEscape = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        endDragRef.current({\n          type: 'cancel',\n          x: 0,\n          y: 0,\n          dropOperation: 'cancel',\n          isInternal: false,\n        });\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape, true);\n\n    return () => document.removeEventListener('keydown', handleEscape, true);\n  }, [isDragActive]);\n\n  // Alt+Arrow keyboard shortcut for reordering.\n  // Uses capture phase so we read focusedKey BEFORE react-aria moves focus.\n  // Skip when the event originates from a text input — Alt+Arrow is\n  // word-by-word cursor navigation on macOS.\n  const handleKeyDownCapture = useEvent((e: KeyboardEvent) => {\n    if (!e.altKey || !onReorder) return;\n\n    const target = e.target as HTMLElement;\n\n    if (\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target.isContentEditable\n    ) {\n      return;\n    }\n\n    const moveKeys =\n      orientation === 'vertical'\n        ? { backward: 'ArrowUp', forward: 'ArrowDown' }\n        : { backward: 'ArrowLeft', forward: 'ArrowRight' };\n\n    const direction =\n      e.key === moveKeys.backward ? -1 : e.key === moveKeys.forward ? 1 : 0;\n\n    if (direction === 0) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const focusedKey = String(state.selectionManager.focusedKey);\n    const idx = orderedKeys.indexOf(focusedKey);\n\n    if (idx === -1) return;\n\n    const targetIdx = idx + direction;\n\n    if (targetIdx < 0 || targetIdx >= orderedKeys.length) return;\n\n    const newKeys = [...orderedKeys];\n    [newKeys[idx], newKeys[targetIdx]] = [newKeys[targetIdx], newKeys[idx]];\n    onReorder(newKeys);\n  });\n\n  return children(\n    dragState,\n    dropState,\n    mergeProps(collectionProps, { onKeyDownCapture: handleKeyDownCapture }),\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DraggableCollection.js","names":[],"sources":["../../../src/components/shared/DraggableCollection.tsx"],"sourcesContent":["import {\n  KeyboardEvent,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  DragItem,\n  DragPreview,\n  DragPreviewRenderer,\n  DroppableCollectionReorderEvent,\n  ListDropTargetDelegate,\n  ListKeyboardDelegate,\n  mergeProps,\n  useDraggableCollection,\n  useDroppableCollection,\n} from 'react-aria';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useDraggableCollectionState,\n  useDroppableCollectionState,\n} from 'react-stately';\n\nimport { useEvent } from '../../_internal/hooks';\n\nimport type { Collection, DropOperation, Key, Node } from '@react-types/shared';\n\nconst getAllowedDropOperations = (): DropOperation[] => ['move'];\n\n/**\n * Creates a no-op mock of DraggableCollectionState.\n * Used to satisfy useDraggableItem when drag is disabled (Rules of Hooks).\n */\nexport function createMockDragState(\n  collection: Collection<Node<any>>,\n  selectionManager: Record<string, any>,\n): DraggableCollectionState {\n  return {\n    collection,\n    selectionManager,\n    isDragging: () => false,\n    getKeysForDrag: () => new Set<Key>(),\n    draggedKey: null,\n    draggingKeys: new Set<Key>(),\n    getAllowedDropOperations: () => [],\n    preview: null,\n    isDisabled: false,\n    startDrag: () => {},\n    endDrag: () => {},\n  } as DraggableCollectionState;\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableCollectionProps {\n  state: {\n    collection: Collection<Node<any>>;\n    selectionManager: { selectedKeys: Set<Key> } & Record<string, any>;\n    disabledKeys: Set<Key>;\n  };\n  listRef: RefObject<HTMLElement | null>;\n  orderedKeys: string[];\n  orientation: 'horizontal' | 'vertical';\n  onReorder?: (newOrder: string[]) => void;\n  /**\n   * Dropping *onto* an item rather than between items — a row that is a folder,\n   * a tab that is a group. Mutually exclusive with reordering in practice: a\n   * collection that accepts item drops usually has a meaningful order already.\n   */\n  onItemDrop?: (targetKey: Key, draggedKeys: Key[]) => void;\n  /** Which items may receive a drop. Without it, none may. */\n  shouldAcceptItemDrop?: (targetKey: Key) => boolean;\n  /**\n   * The image dragged under the cursor. Receives the keys being dragged rather\n   * than React Aria's serialized `DragItem`s, because a caller that wants to\n   * render an icon needs the record, not its `text/plain` form.\n   *\n   * Without one the browser drags a screenshot of the source element, which for\n   * a full-width table row is a page-wide slab.\n   */\n  renderPreview?: (keys: Key[]) => ReactNode;\n  /** Render function receiving drag/drop states and merged collection+keyboard props */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Generic wrapper that enables drag-and-drop reordering for a collection.\n *\n * Used by both DraggableTabList (horizontal) and DraggableListBox (vertical).\n * Encapsulates all drag/drop hook calls so they are only invoked when\n * reordering is actually enabled.\n */\nexport function DraggableCollection({\n  state,\n  listRef,\n  orderedKeys,\n  orientation,\n  onReorder,\n  onItemDrop,\n  shouldAcceptItemDrop,\n  renderPreview,\n  children,\n}: DraggableCollectionProps) {\n  const handleReorder = useEvent((e: DroppableCollectionReorderEvent) => {\n    if (!onReorder) return;\n\n    const { target, keys: movableKeys } = e;\n    const { dropPosition, key: targetKey } = target;\n    const movableKey = [...movableKeys][0] as string;\n\n    const movableIndex = orderedKeys.indexOf(movableKey);\n    const targetIndex = orderedKeys.indexOf(String(targetKey));\n\n    if (movableIndex === -1 || targetIndex === -1) return;\n\n    const newKeys =\n      movableIndex !== targetIndex\n        ? orderedKeys.reduce((arr, key, i) => {\n            if (i === movableIndex) {\n              return arr;\n            }\n\n            if (i === targetIndex) {\n              if (dropPosition === 'before') {\n                arr.push(movableKey);\n                arr.push(key);\n              } else {\n                arr.push(key);\n                arr.push(movableKey);\n              }\n            } else {\n              arr.push(key);\n            }\n\n            return arr;\n          }, [] as string[])\n        : orderedKeys;\n\n    onReorder(newKeys);\n  });\n\n  const getItems = useCallback(\n    (keys: Set<Key>): DragItem[] => {\n      dragKeysRef.current = [...keys];\n\n      return [...keys].map((key) => {\n        const item = state.collection.getItem(key);\n        return {\n          'text/plain': item?.textValue || String(key),\n        };\n      });\n    },\n    [state.collection],\n  );\n\n  // Proxy selectionManager to hide selection from react-aria's drag logic.\n  // Without this, react-aria drags ALL selected items when any selected item\n  // is grabbed (hardcoded in useDraggableCollectionState → internal getKeys).\n  // The proxy intercepts `selectedKeys` and `isSelected` so every item looks\n  // unselected for drag, while all other methods (isDisabled, setFocusedKey, …)\n  // delegate to the real manager. `bind(target)` preserves `this` for methods\n  // that live on the prototype chain.\n  const dragSelectionManager = useMemo(\n    () =>\n      new Proxy(state.selectionManager, {\n        get(target, prop) {\n          if (prop === 'selectedKeys') return new Set<Key>();\n          if (prop === 'isSelected') return () => false;\n          const value = Reflect.get(target, prop);\n          return typeof value === 'function' ? value.bind(target) : value;\n        },\n      }),\n    [state.selectionManager],\n  );\n\n  const previewRef = useRef<DragPreviewRenderer>(null);\n\n  const dragState = useDraggableCollectionState({\n    collection: state.collection,\n    selectionManager: dragSelectionManager,\n    getItems,\n    getAllowedDropOperations,\n    preview: renderPreview ? previewRef : undefined,\n  });\n\n  useDraggableCollection(\n    {\n      getItems,\n      getAllowedDropOperations,\n    },\n    dragState,\n    listRef,\n  );\n\n  const handleItemDrop = useEvent((e: any) => {\n    if (!onItemDrop) return;\n\n    const keys = [...(e.dropOperation === 'cancel' ? [] : dragKeysRef.current)];\n\n    onItemDrop(e.target.key, keys);\n  });\n\n  // The keys being dragged, captured at drag start: by the time the drop lands\n  // React Aria has already cleared them from the drag state.\n  const dragKeysRef = useRef<Key[]>([]);\n\n  const dropState = useDroppableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    onReorder: onReorder ? handleReorder : undefined,\n    onItemDrop: onItemDrop ? handleItemDrop : undefined,\n    // `'on'` is only offered for items that accept it; everything else falls\n    // back to reordering, or to nothing.\n    shouldAcceptItemDrop: shouldAcceptItemDrop\n      ? (target: any) => shouldAcceptItemDrop(target.key)\n      : undefined,\n  });\n\n  const keyboardDelegate = useMemo(\n    () =>\n      new ListKeyboardDelegate({\n        collection: state.collection,\n        disabledKeys: state.disabledKeys,\n        ref: listRef,\n        orientation,\n      }),\n    [state.collection, state.disabledKeys, listRef, orientation],\n  );\n\n  const dropTargetDelegate = useMemo(\n    () =>\n      new ListDropTargetDelegate(state.collection, listRef, {\n        orientation,\n      }),\n    [state.collection, listRef, orientation],\n  );\n\n  const { collectionProps } = useDroppableCollection(\n    {\n      keyboardDelegate,\n      dropTargetDelegate,\n      onReorder: onReorder ? handleReorder : undefined,\n      onItemDrop: onItemDrop ? handleItemDrop : undefined,\n    },\n    dropState,\n    listRef,\n  );\n\n  // Force-cancel drag on Escape. Native HTML5 drag cancels visually, but some\n  // browsers (Safari) don't fire `dragend` synchronously, leaving react-aria's\n  // `isDragging` stale until a second keypress.\n  const isDragActive = dragState.draggingKeys.size > 0;\n  const endDragRef = useRef(dragState.endDrag);\n  endDragRef.current = dragState.endDrag;\n\n  useEffect(() => {\n    if (!isDragActive) return;\n\n    const handleEscape = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        endDragRef.current({\n          type: 'cancel',\n          x: 0,\n          y: 0,\n          dropOperation: 'cancel',\n          isInternal: false,\n        });\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape, true);\n\n    return () => document.removeEventListener('keydown', handleEscape, true);\n  }, [isDragActive]);\n\n  // Alt+Arrow keyboard shortcut for reordering.\n  // Uses capture phase so we read focusedKey BEFORE react-aria moves focus.\n  // Skip when the event originates from a text input — Alt+Arrow is\n  // word-by-word cursor navigation on macOS.\n  const handleKeyDownCapture = useEvent((e: KeyboardEvent) => {\n    if (!e.altKey || !onReorder) return;\n\n    const target = e.target as HTMLElement;\n\n    if (\n      target instanceof HTMLInputElement ||\n      target instanceof HTMLTextAreaElement ||\n      target.isContentEditable\n    ) {\n      return;\n    }\n\n    const moveKeys =\n      orientation === 'vertical'\n        ? { backward: 'ArrowUp', forward: 'ArrowDown' }\n        : { backward: 'ArrowLeft', forward: 'ArrowRight' };\n\n    const direction =\n      e.key === moveKeys.backward ? -1 : e.key === moveKeys.forward ? 1 : 0;\n\n    if (direction === 0) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const focusedKey = String(state.selectionManager.focusedKey);\n    const idx = orderedKeys.indexOf(focusedKey);\n\n    if (idx === -1) return;\n\n    const targetIdx = idx + direction;\n\n    if (targetIdx < 0 || targetIdx >= orderedKeys.length) return;\n\n    const newKeys = [...orderedKeys];\n    [newKeys[idx], newKeys[targetIdx]] = [newKeys[targetIdx], newKeys[idx]];\n    onReorder(newKeys);\n  });\n\n  return (\n    <>\n      {children(\n        dragState,\n        dropState,\n        mergeProps(collectionProps, { onKeyDownCapture: handleKeyDownCapture }),\n      )}\n      {renderPreview ? (\n        // Rendered off-screen by React Aria and snapshotted at drag start. The\n        // keys come from the ref rather than the `DragItem`s the render\n        // function is handed, which only carry `text/plain`.\n        <DragPreview ref={previewRef}>\n          {() => renderPreview(dragKeysRef.current)}\n        </DragPreview>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/InvalidIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { WarningIcon } from "../../icons/WarningIcon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/shared/ValidIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { CheckIcon } from "../../icons/CheckIcon.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/status/LoadingAnimation/LoadingAnimation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { Block } from "../../Block.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/status/Spin/Cube.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/status/Spin/InternalSpinner.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { Cube } from "./Cube.js";
 import { SpinsContainer } from "./SpinsContainer.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/status/Spin/Spin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { Block } from "../../Block.js";
 import { InternalSpinner } from "./InternalSpinner.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/status/Spin/SpinsContainer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { jsx } from "react/jsx-runtime";
 

package/dist/data/item-themes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
 	invalid: "#danger-accent-text",

package/dist/data/themes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/data/themes.ts
 var themes_default = {
 	special: {

package/dist/eslint-plugin/defaults.generated.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/eslint-plugin/defaults.generated.ts
 const DEFAULTS = { components: {
 	Alert: { props: {
@@ -150,6 +150,14 @@ const DEFAULTS = { components: {
 			kind: "default",
 			value: 100
 		},
+		selectionCancel: {
+			kind: "default",
+			value: "BOARD_SELECTION_CANCEL"
+		},
+		selectionMode: {
+			kind: "default",
+			value: "none"
+		},
 		showGridLines: {
 			kind: "default",
 			value: false
@@ -350,6 +358,68 @@ const DEFAULTS = { components: {
 			value: "Code example"
 		}
 	} },
+	DataTable: { props: {
+		autoHidePagination: {
+			kind: "default",
+			value: true
+		},
+		cellSelectionMode: {
+			kind: "default",
+			value: "range"
+		},
+		defaultPageSize: {
+			kind: "default",
+			value: 100
+		},
+		isHeaderSticky: {
+			kind: "default",
+			value: true
+		},
+		isResizable: {
+			kind: "default",
+			value: true
+		},
+		isRowMoveAnimated: {
+			kind: "default",
+			value: true
+		},
+		isStriped: {
+			kind: "default",
+			value: true
+		},
+		isVirtualized: {
+			kind: "default",
+			value: "auto"
+		},
+		loadingIndicator: {
+			kind: "default",
+			value: "overlay"
+		},
+		paginationMode: {
+			kind: "default",
+			value: "client"
+		},
+		rowKey: {
+			kind: "default",
+			value: "id"
+		},
+		shape: {
+			kind: "default",
+			value: "plain"
+		},
+		showRowNumbers: {
+			kind: "default",
+			value: false
+		},
+		size: {
+			kind: "default",
+			value: "small"
+		},
+		skeletonRowCount: {
+			kind: "default",
+			value: 6
+		}
+	} },
 	DatePicker: { props: {
 		granularity: {
 			kind: "default",
@@ -497,10 +567,6 @@ const DEFAULTS = { components: {
 			value: "file"
 		}
 	} },
-	FileTabs: { props: { isClosable: {
-		kind: "default",
-		value: true
-	} } },
 	FilterListBox: { props: {
 		allowsCustomValue: {
 			kind: "default",
@@ -895,6 +961,116 @@ const DEFAULTS = { components: {
 			value: true
 		}
 	} },
+	ItemTable: { props: {
+		autoHidePagination: {
+			kind: "default",
+			value: true
+		},
+		bulkBarPlacement: {
+			kind: "default",
+			value: "floating"
+		},
+		defaultPage: {
+			kind: "default",
+			value: 1
+		},
+		defaultPageSize: {
+			kind: "default",
+			value: 50
+		},
+		headerPreset: {
+			kind: "default",
+			value: "c3"
+		},
+		isHeaderHidden: {
+			kind: "default",
+			value: false
+		},
+		isHeaderSticky: {
+			kind: "default",
+			value: true
+		},
+		isLoading: {
+			kind: "default",
+			value: false
+		},
+		isReorderable: {
+			kind: "default",
+			value: false
+		},
+		isResizable: {
+			kind: "default",
+			value: false
+		},
+		isRowMoveAnimated: {
+			kind: "default",
+			value: true
+		},
+		isSearchable: {
+			kind: "default",
+			value: false
+		},
+		isStriped: {
+			kind: "default",
+			value: false
+		},
+		isVirtualized: {
+			kind: "default",
+			value: "auto"
+		},
+		loadingIndicator: {
+			kind: "default",
+			value: "overlay"
+		},
+		overscan: {
+			kind: "default",
+			value: 12
+		},
+		paginationMode: {
+			kind: "default",
+			value: "client"
+		},
+		rowContextMenu: {
+			kind: "default",
+			value: false
+		},
+		rowKey: {
+			kind: "default",
+			value: "id"
+		},
+		searchDelay: {
+			kind: "default",
+			value: 500
+		},
+		searchMode: {
+			kind: "default",
+			value: "client"
+		},
+		selectAllMode: {
+			kind: "default",
+			value: "page"
+		},
+		selectionMode: {
+			kind: "default",
+			value: "none"
+		},
+		shape: {
+			kind: "default",
+			value: "plain"
+		},
+		skeletonRowCount: {
+			kind: "default",
+			value: 6
+		},
+		sortMode: {
+			kind: "default",
+			value: "client"
+		},
+		virtualizeThreshold: {
+			kind: "default",
+			value: 50
+		}
+	} },
 	Layout: { props: {
 		contentPadding: {
 			kind: "default",
@@ -1017,7 +1193,41 @@ const DEFAULTS = { components: {
 			value: "before"
 		}
 	} },
+	Pagination: { props: {
+		boundaryCount: {
+			kind: "default",
+			value: 1
+		},
+		defaultPage: {
+			kind: "default",
+			value: 1
+		},
+		defaultPageSize: {
+			kind: "default",
+			value: 50
+		},
+		isCompact: {
+			kind: "default",
+			value: false
+		},
+		siblingCount: {
+			kind: "default",
+			value: 1
+		},
+		size: {
+			kind: "default",
+			value: "small"
+		},
+		type: {
+			kind: "default",
+			value: "numbers"
+		}
+	} },
 	PasswordInput: { props: {
+		isBuffered: {
+			kind: "default",
+			value: true
+		},
 		size: {
 			kind: "default",
 			value: "medium"
@@ -1155,6 +1365,10 @@ const DEFAULTS = { components: {
 		}
 	} },
 	SearchInput: { props: {
+		isBuffered: {
+			kind: "default",
+			value: true
+		},
 		isClearable: {
 			kind: "default",
 			value: false
@@ -1413,6 +1627,10 @@ const DEFAULTS = { components: {
 			kind: "default",
 			value: false
 		},
+		isBuffered: {
+			kind: "default",
+			value: true
+		},
 		maxRows: {
 			kind: "default",
 			value: 10
@@ -1431,6 +1649,10 @@ const DEFAULTS = { components: {
 		}
 	} },
 	TextInput: { props: {
+		isBuffered: {
+			kind: "default",
+			value: true
+		},
 		multiLine: {
 			kind: "default",
 			value: false