@cube-dev/ui-kit 0.132.0 → 0.133.0

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.132.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.132.0";
+const VERSION = "0.133.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/components/content/Tree.md

@@ -58,13 +58,6 @@ consumers can be migrated with minimal churn.
   — Called when a node is checked or unchecked.
 - **`onSelect`** `(selectedKeys: Key[], info: TreeOnSelectInfo) => void` —
   Called when row selection changes.
-- **`expandOnFolderClick`** `boolean` (default: `false`) — When `true`,
-  activating a non-leaf row toggles its expansion instead of selecting
-  it. Activation happens on mouse click, `Enter`, or `Space` (in
-  checkable trees `Space` is reserved for the row checkbox; `Enter`
-  always expands). The chevron and keyboard navigation continue to
-  work independently. Useful for file-tree UX where only leaves are
-  meaningful selection targets.
 - **`menu`** `ReactNode | ((data, state) => ReactNode | null)` — Default
   `Menu.Item` children rendered on every row that doesn't override via
   `data.menu`. Returning `null` from the callback hides the menu for
@@ -324,24 +317,6 @@ Set `data.menu` to override the tree-level menu for a specific row,
 or `null` to hide it entirely. `data.contextMenu` and
 `data.onAction` follow the same per-row override pattern.
 
-### Expand on Folder Click
-
-`expandOnFolderClick` makes folder rows toggle their expansion when
-activated instead of triggering selection. Leaves still select normally,
-which mirrors typical file-tree UX. Folder rows remain focusable for
-keyboard navigation, and the chevron toggle keeps working.
-
-Activation rules for folder rows:
-
-- Mouse click → expand / collapse.
-- `Enter` → expand / collapse (always, including in `isCheckable` trees).
-- `Space` → expand / collapse in non-checkable trees; in `isCheckable`
-  trees `Space` toggles the row's checkbox instead.
-
-```jsx
-<Tree treeData={data} expandOnFolderClick />
-```
-
 ## Accessibility
 
 Tree implements the

package/docs/components/fields/FilterPicker.md

@@ -66,6 +66,8 @@ A versatile selection component that combines a trigger button with a searchable
 - **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked (non-checkbox area)
 - **`onClear`** `() => void` — Callback called when the clear button is pressed
 - **`onOpenChange`** `(isOpen: boolean) => void` — Callback called when the popover open state changes
+- **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop item reordering in the dropdown list
+- **`onReorder`** `(newOrder: string[]) => void` — Callback when items are reordered via drag-and-drop or keyboard (Alt+Arrow)
 
 ### Base Properties
 
@@ -503,6 +505,30 @@ Use `isLoadingItems` to indicate that items are currently being fetched. Unlike
 </FilterPicker>
 ```
 
+### Reorderable
+
+Enable drag-and-drop reordering inside the dropdown with `isReorderable`. Items display a grip handle and can be dragged to new positions. Use `Alt+Arrow` keys to reorder via keyboard.
+
+```jsx
+const [keyOrder, setKeyOrder] = useState([
+  'revenue', 'orders', 'customers', 'sessions',
+  'page-views', 'bounce-rate', 'conversion', 'aov',
+  'retention', 'churn', 'ltv', 'arpu',
+]);
+
+<FilterPicker
+  isReorderable
+  selectionMode="multiple"
+  defaultSelectedKeys={['revenue', 'orders', 'customers']}
+  label="Metrics"
+  onReorder={(newOrder) => setKeyOrder(newOrder)}
+>
+  {keyOrder.map((key) => (
+    <FilterPicker.Item key={key}>{key}</FilterPicker.Item>
+  ))}
+</FilterPicker>
+```
+
 ## Accessibility
 
 ### Keyboard Navigation
@@ -512,6 +538,7 @@ Use `isLoadingItems` to indicate that items are currently being fetched. Unlike
 - `Arrow Up/Down` - Opens the popover (when closed) or navigates through options (when open)
 - `Escape` - Closes the popover or clears search
 - `Home/End` - Navigate to first/last option
+- `Alt+ArrowUp` / `Alt+ArrowDown` - Reorder the focused item (when `isReorderable`)
 
 ### Screen Reader Support
 

package/docs/components/fields/ListBox.md

@@ -46,6 +46,8 @@ A versatile list selection component that allows users to select one or more ite
 - **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked (non-checkbox area)
 - **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
 - **`disableSelectionToggle`** `boolean` (default: `false`) — When true, clicking an already-selected item keeps it selected instead of toggling it off
+- **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop item reordering. Disables virtualization when active
+- **`onReorder`** `(newOrder: string[]) => void` — Callback when items are reordered via drag-and-drop or keyboard (Alt+Arrow)
 
 ### Base Properties
 
@@ -116,6 +118,8 @@ The `mods` property accepts the following modifiers you can override:
 - **`header`** `boolean` — Applied when header prop is provided or `showSelectAll={true}`
 - **`footer`** `boolean` — Applied when footer prop is provided
 - **`selectAll`** `boolean` — Applied when `showSelectAll={true}` in multiple selection mode
+- **`draggable`** `boolean` — Applied to options when `isReorderable={true}`
+- **`dragging`** `boolean` — Applied to the option currently being dragged
 
 ## Key Properties
 
@@ -604,6 +608,34 @@ const [selectedKey, setSelectedKey] = useState('apple');
 </Form>
 ```
 
+### Reorderable
+
+Enable drag-and-drop reordering with `isReorderable`. Items display a grip handle and can be dragged to new positions. Use `Alt+Arrow` keys to reorder via keyboard.
+
+```jsx
+const [keyOrder, setKeyOrder] = useState([
+  'revenue', 'orders', 'customers', 'sessions',
+]);
+
+<ListBox
+  isReorderable
+  selectionMode="multiple"
+  label="Metrics"
+  onReorder={(newOrder) => setKeyOrder(newOrder)}
+>
+  {keyOrder.map((key) => (
+    <ListBox.Item key={key}>{key}</ListBox.Item>
+  ))}
+</ListBox>
+```
+
+**Key features:**
+
+- **Drag-and-drop**: Reorder items by dragging the grip handle
+- **Keyboard reordering**: Use `Alt+ArrowUp` / `Alt+ArrowDown` to move the focused item
+- **Callback**: `onReorder` is called with the new key order after a drop or keyboard move
+- **Virtualization**: Automatically disabled when reordering is active
+
 ## Accessibility
 
 ### Keyboard Navigation
@@ -614,6 +646,7 @@ const [selectedKey, setSelectedKey] = useState('apple');
 - `Home/End` - Move to first/last option
 - `Page Up/Page Down` - Move up/down by multiple items
 - `Escape` - Deselect all items (if onEscape not provided)
+- `Alt+ArrowUp` / `Alt+ArrowDown` - Reorder the focused item (when `isReorderable`)
 
 ### Screen Reader Support
 

package/docs/components/navigation/Tabs.md

@@ -37,7 +37,7 @@ An accessible tabbed interface for organizing content into multiple panels, show
 - **`onAction`** `(action: string, tabKey: string) => void` — Callback when a menu action is triggered
 - **`renderPanel`** `(key: string) => ReactNode` — Render function for lazy panel content
 - **`panelCacheKeys`** `Record<string, any>` — Cache keys for `renderPanel` content
-- **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop tab reordering
+- **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop tab reordering. When a tab picker is shown, reordering is automatically enabled in the picker dropdown as well
 - **`keyOrder`** `string[]` — Controlled tab display order
 - **`onReorder`** `(newOrder: string[]) => void` — Callback when tabs are reordered
 - **`showTabPicker`** `boolean | 'auto'` (default: `false`) — Show dropdown tab picker
@@ -169,9 +169,7 @@ Optional wrapper for tabs when using explicit panel placement.
 Explicit panel definition for advanced layout control.
 
 ```jsx
-<Tabs.Panel key="tab1">
-  Panel 1 content
-</Tabs.Panel>
+<Tabs.Panel key="tab1">Panel 1 content</Tabs.Panel>
 ```
 
 ### Tabs.Action
@@ -187,7 +185,9 @@ Action button designed for the Tabs prefix/suffix slots. Styled with sharp edges
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -243,16 +243,22 @@ Control the active tab externally with `activeKey` and `onChange`.
 const [activeKey, setActiveKey] = useState('tab1');
 
 <Tabs activeKey={activeKey} onChange={setActiveKey}>
-  <Tab key="tab1" title="Tab 1">Content 1</Tab>
-  <Tab key="tab2" title="Tab 2">Content 2</Tab>
-</Tabs>
+  <Tab key="tab1" title="Tab 1">
+    Content 1
+  </Tab>
+  <Tab key="tab2" title="Tab 2">
+    Content 2
+  </Tab>
+</Tabs>;
 ```
 
 ### Disabled Tab
 
 ```jsx
 <Tabs defaultActiveKey="tab1">
-  <Tab key="tab1" title="Active Tab">Content</Tab>
+  <Tab key="tab1" title="Active Tab">
+    Content
+  </Tab>
   <Tab key="tab2" title="Disabled Tab" isDisabled>
     Inaccessible content
   </Tab>
@@ -269,8 +275,12 @@ Add buttons or other elements before or after the tab list.
   prefix={<Button size="small">Menu</Button>}
   suffix={<Button size="small">Add New</Button>}
 >
-  <Tab key="items" title="Items">Item list</Tab>
-  <Tab key="archived" title="Archived">Archived items</Tab>
+  <Tab key="items" title="Items">
+    Item list
+  </Tab>
+  <Tab key="archived" title="Archived">
+    Archived items
+  </Tab>
 </Tabs>
 ```
 
@@ -286,21 +296,17 @@ const [tabs, setTabs] = useState([
 
 <Tabs
   defaultActiveKey="tab1"
-  onDelete={(key) => setTabs(tabs.filter(t => t.key !== key))}
+  onDelete={(key) => setTabs(tabs.filter((t) => t.key !== key))}
   suffix={
-    <Tabs.Action
-      icon={<PlusIcon />}
-      aria-label="Add tab"
-      onPress={handleAdd}
-    />
+    <Tabs.Action icon={<PlusIcon />} aria-label="Add tab" onPress={handleAdd} />
   }
 >
-  {tabs.map(tab => (
+  {tabs.map((tab) => (
     <Tab key={tab.key} title={tab.title}>
       Content for {tab.title}
     </Tab>
   ))}
-</Tabs>
+</Tabs>;
 ```
 
 ### Tab Menus
@@ -321,7 +327,9 @@ Add dropdown menus to tabs using the `menu` prop. This replaces the need for man
     // 'delete' is handled automatically via onDelete
   }}
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -355,7 +363,9 @@ Combine editable tabs with a menu for rename, duplicate, and delete actions.
     // 'delete' triggers onDelete automatically
   }}
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -373,7 +383,9 @@ Enable right-click context menus with the `contextMenu` prop. Uses the same menu
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -388,7 +400,9 @@ Enable right-click context menus with the `contextMenu` prop. Uses the same menu
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -405,9 +419,11 @@ Override or disable menus on individual tabs.
     </>
   }
 >
-  <Tab key="tab1" title="Uses Default Menu">Content</Tab>
-  <Tab 
-    key="tab2" 
+  <Tab key="tab1" title="Uses Default Menu">
+    Content
+  </Tab>
+  <Tab
+    key="tab2"
     title="Custom Menu"
     menu={
       <>
@@ -417,7 +433,9 @@ Override or disable menus on individual tabs.
   >
     Content
   </Tab>
-  <Tab key="tab3" title="No Menu" menu={null}>Content</Tab>
+  <Tab key="tab3" title="No Menu" menu={null}>
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -437,7 +455,9 @@ Use `Menu.Section` for organized menus.
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">Content</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content
+  </Tab>
 </Tabs>
 ```
 
@@ -453,10 +473,16 @@ const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
   keyOrder={keyOrder}
   onReorder={(newOrder) => setKeyOrder(newOrder)}
 >
-  <Tab key="tab1" title="Tab 1">Content 1</Tab>
-  <Tab key="tab2" title="Tab 2">Content 2</Tab>
-  <Tab key="tab3" title="Tab 3">Content 3</Tab>
-</Tabs>
+  <Tab key="tab1" title="Tab 1">
+    Content 1
+  </Tab>
+  <Tab key="tab2" title="Tab 2">
+    Content 2
+  </Tab>
+  <Tab key="tab3" title="Tab 3">
+    Content 3
+  </Tab>
+</Tabs>;
 ```
 
 **Key features:**
@@ -494,6 +520,32 @@ const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
 </Tabs>
 ```
 
+### Reorderable Tab Picker
+
+When `isReorderable` is enabled and a tab picker is shown, the picker dropdown automatically supports drag-and-drop reordering as well. Items in the dropdown display a grip handle and can be dragged to reorder. The same `onReorder` callback is shared between the horizontal tab bar and the vertical tab picker.
+
+```jsx
+const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
+
+<Tabs
+  isReorderable
+  showTabPicker
+  type="file"
+  keyOrder={keyOrder}
+  onReorder={(newOrder) => setKeyOrder(newOrder)}
+>
+  <Tab key="tab1" title="Tab 1">
+    Content 1
+  </Tab>
+  <Tab key="tab2" title="Tab 2">
+    Content 2
+  </Tab>
+  <Tab key="tab3" title="Tab 3">
+    Content 3
+  </Tab>
+</Tabs>;
+```
+
 ### Scroll Arrows
 
 Add left/right navigation arrows to scroll overflowed tabs. Use `showScrollArrows` with `true`, `false`, or `'auto'` (shows only when tabs overflow).
@@ -504,7 +556,7 @@ Add left/right navigation arrows to scroll overflowed tabs. Use `showScrollArrow
   showScrollArrows="auto"
   styles={{ width: '500px' }}
 >
-  {tabs.map(tab => (
+  {tabs.map((tab) => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -521,7 +573,7 @@ Combine with `showTabPicker` for both scroll arrows and a dropdown picker:
   showTabPicker="auto"
   type="file"
 >
-  {tabs.map(tab => (
+  {tabs.map((tab) => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -543,7 +595,7 @@ By default, scroll arrows and the tab picker appear in the suffix (after the tab
   type="file"
   styles={{ width: '500px' }}
 >
-  {tabs.map(tab => (
+  {tabs.map((tab) => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -552,6 +604,7 @@ By default, scroll arrows and the tab picker appear in the suffix (after the tab
 ```
 
 When both are in the same slot:
+
 - In **prefix**: TabPicker appears first (left), then scroll arrows (right)
 - In **suffix**: Scroll arrows appear first (left), then TabPicker (right)
 
@@ -565,10 +618,14 @@ const [view, setView] = useState('overview');
 <Tabs activeKey={view} onChange={setView}>
   <Tab key="overview" title="Overview" />
   <Tab key="settings" title="Settings" />
-</Tabs>
-
-{view === 'overview' && <OverviewPage />}
-{view === 'settings' && <SettingsPage />}
+</Tabs>;
+
+{
+  view === 'overview' && <OverviewPage />;
+}
+{
+  view === 'settings' && <SettingsPage />;
+}
 ```
 
 ### Explicit Panels
@@ -592,8 +649,12 @@ Render all panels immediately but keep inactive ones hidden.
 
 ```jsx
 <Tabs defaultActiveKey="tab1" prerender>
-  <Tab key="tab1" title="Tab 1">Content 1</Tab>
-  <Tab key="tab2" title="Tab 2">Content 2</Tab>
+  <Tab key="tab1" title="Tab 1">
+    Content 1
+  </Tab>
+  <Tab key="tab2" title="Tab 2">
+    Content 2
+  </Tab>
 </Tabs>
 ```
 
@@ -622,8 +683,12 @@ Override per-tab/panel:
 
 ```jsx
 <Tabs prerender>
-  <Tab key="tab1" title="Prerendered">Always in DOM</Tab>
-  <Tab key="tab2" title="Lazy" prerender={false}>Lazy loaded</Tab>
+  <Tab key="tab1" title="Prerendered">
+    Always in DOM
+  </Tab>
+  <Tab key="tab2" title="Lazy" prerender={false}>
+    Lazy loaded
+  </Tab>
 </Tabs>
 ```
 
@@ -638,10 +703,14 @@ content is computed, while inactive tabs use cached content.
   defaultActiveKey="tab1"
   renderPanel={(key) => {
     switch (key) {
-      case 'tab1': return <ExpensiveChart data={chartData} />;
-      case 'tab2': return <LargeTable rows={tableRows} />;
-      case 'tab3': return <ComplexForm fields={formFields} />;
-      default: return null;
+      case 'tab1':
+        return <ExpensiveChart data={chartData} />;
+      case 'tab2':
+        return <LargeTable rows={tableRows} />;
+      case 'tab3':
+        return <ComplexForm fields={formFields} />;
+      default:
+        return null;
     }
   }}
 >
@@ -662,8 +731,8 @@ content is computed, while inactive tabs use cached content.
 <Tabs
   renderPanel={(key) => <Panel data={data[key]} />}
   panelCacheKeys={{
-    tab1: data.tab1.version,  // Cached, re-renders when version changes
-    tab2: data.tab2.version,  // Cached, re-renders when version changes
+    tab1: data.tab1.version, // Cached, re-renders when version changes
+    tab2: data.tab2.version, // Cached, re-renders when version changes
     // tab3 has no cache key - re-renders on every Tabs render
   }}
 >
@@ -672,6 +741,7 @@ content is computed, while inactive tabs use cached content.
 ```
 
 This approach is ideal for:
+
 - Tabs with complex visualizations or charts
 - Large data tables that are expensive to render
 - Forms with many fields
@@ -706,6 +776,7 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 ```
 
 **How it works:**
+
 - The tab bar has fixed height and doesn't grow
 - Tab panels use `display: contents`, allowing children to participate in parent flex layout
 - Nested Layout components with `flexGrow: 1` (default) stretch to fill remaining space
@@ -722,6 +793,7 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 - `Shift+F10` - Open tab menu (when menu is present)
 - `Delete` - Delete focused tab (when deletable)
 - `F2` - Start editing tab title (when editable)
+- `Alt+ArrowLeft` / `Alt+ArrowRight` - Reorder the focused tab (when `isReorderable`)
 
 ### Screen Reader Support
 
@@ -744,13 +816,17 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 1. **Do**: Use clear, descriptive tab titles
 
    ```jsx
-   <Tab key="billing" title="Billing & Payments">...</Tab>
+   <Tab key="billing" title="Billing & Payments">
+     ...
+   </Tab>
    ```
 
 2. **Don't**: Use vague or single-letter titles
 
    ```jsx
-   <Tab key="b" title="B">...</Tab>
+   <Tab key="b" title="B">
+     ...
+   </Tab>
    ```
 
 3. **Do**: Provide meaningful accessible labels

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.132.0",
+  "version": "0.133.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {