@cube-dev/ui-kit 0.131.0 → 0.133.0

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.131.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.131.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.131.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.131.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.131.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.131.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.131.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.131.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.131.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.133.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.131.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,6 +58,31 @@ 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.
+- **`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
+  that specific row.
+- **`contextMenu`** `boolean | 'context-only'` (default: `false`) — How
+  the row menu is exposed.
+
+  - `false` — no menu at all.
+  - `true` — render an overflow `⋮` trigger inside `actions` AND open
+    the same menu on right-click / Shift+F10.
+  - `'context-only'` — right-click / Shift+F10 only; no `⋮` trigger.
+
+  Per-node `data.contextMenu` wins when provided.
+
+- **`onAction`** `(action: string, key: Key) => void` — Called when a
+  menu action is triggered on any row. Receives the action key (with
+  React's `.$` prefix stripped) and the row key. Per-node
+  `data.onAction` is called first.
+- **`menuTriggerProps`** `Partial<CubeMenuTriggerProps>` — Forwarded to
+  every per-row `MenuTrigger`.
+- **`menuProps`** `Partial<CubeMenuProps<object>>` — Forwarded to every
+  per-row `Menu` (both the overflow `⋮` menu and the right-click context
+  menu). If you pass `onAction` here, it is **chained with** the
+  tree-level `onAction`/per-node `data.onAction` callbacks (it does not
+  override them) and receives the same normalized action key.
 - **`rowStyles`** `Styles` — Override styles for `[data-element="Row"]`.
 
 #### `CubeTreeNodeData`
@@ -74,6 +99,13 @@ consumers can be migrated with minimal churn.
   row.
 - **`isCheckable`** `boolean` — Per-node override; `false` hides the
   checkbox for this row even when the tree is `isCheckable`.
+- **`menu`** `ReactNode | null` — Per-node menu override. Wins over
+  the tree-level `menu`. Pass `null` to hide the menu for this row
+  when the tree provides a default.
+- **`contextMenu`** `boolean | 'context-only'` — Per-node override of
+  the tree-level `contextMenu`.
+- **`onAction`** `(action: string) => void` — Per-node action callback.
+  Called before the tree-level `onAction`.
 
 ### Base Properties
 
@@ -102,21 +134,30 @@ spacing, hover/selected colors, or cell layout without re-targeting via
 - `Checkbox` — The checkbox slot (visible only when `isCheckable`).
 - `Title` — The title label.
 
+### Style Properties
+
+These properties allow direct style application without using the `styles` prop:
+
+- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
+- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
+- **Block:** `border`, `radius`, `shadow`, `outline`
+
 ### Modifiers
 
 The following row-level modifiers are emitted automatically. They are
 useful when overriding `rowStyles`:
 
-| Modifier        | Type      | Description                                            |
-| --------------- | --------- | ------------------------------------------------------ |
-| `selected`      | `boolean` | Row is selected.                                       |
-| `checked`       | `boolean` | Row is fully checked.                                  |
-| `indeterminate` | `boolean` | Row is in the half-checked state.                      |
-| `expanded`      | `boolean` | Row is expanded.                                       |
-| `disabled`      | `boolean` | Row is disabled.                                       |
-| `loading`       | `boolean` | The row's children are being fetched via `loadData`.   |
-| `leaf`          | `boolean` | Row has no children.                                   |
-| `has-checkbox`  | `boolean` | Row renders a checkbox.                                |
+| Modifier        | Type      | Description                                          |
+| --------------- | --------- | ---------------------------------------------------- |
+| `selected`      | `boolean` | Row is selected.                                     |
+| `checked`       | `boolean` | Row is fully checked.                                |
+| `indeterminate` | `boolean` | Row is in the half-checked state.                    |
+| `expanded`      | `boolean` | Row is expanded.                                     |
+| `disabled`      | `boolean` | Row is disabled.                                     |
+| `loading`       | `boolean` | The row's children are being fetched via `loadData`. |
+| `leaf`          | `boolean` | Row has no children.                                 |
+| `has-checkbox`  | `boolean` | Row renders a checkbox.                              |
+| `has-menu`      | `boolean` | Row resolves a non-empty menu.                       |
 
 ## Variants
 
@@ -133,13 +174,19 @@ useful when overriding `rowStyles`:
 
 ```jsx
 const data = [
-  { key: 'fruits', title: 'Fruits', children: [
-    { key: 'apple', title: 'Apple' },
-    { key: 'banana', title: 'Banana' },
-  ]},
-  { key: 'vegetables', title: 'Vegetables', children: [
-    { key: 'carrot', title: 'Carrot' },
-  ]},
+  {
+    key: 'fruits',
+    title: 'Fruits',
+    children: [
+      { key: 'apple', title: 'Apple' },
+      { key: 'banana', title: 'Banana' },
+    ],
+  },
+  {
+    key: 'vegetables',
+    title: 'Vegetables',
+    children: [{ key: 'carrot', title: 'Carrot' }],
+  },
 ];
 
 <Tree treeData={data} defaultExpandedKeys={['fruits']} />;
@@ -171,14 +218,17 @@ To match AntD's object-shape API, pass `checkedKeys` as
 `{ checked, halfChecked }`. `onCheck` returns the same shape.
 
 ```jsx
-const [checkedKeys, setCheckedKeys] = useState({ checked: [], halfChecked: [] });
+const [checkedKeys, setCheckedKeys] = useState({
+  checked: [],
+  halfChecked: [],
+});
 
 <Tree
   treeData={data}
   isCheckable
   checkedKeys={checkedKeys}
   onCheck={(next) => setCheckedKeys(next)}
-/>
+/>;
 ```
 
 ### Lazy Loading
@@ -194,7 +244,7 @@ const handleLoadData = (node) =>
     .then((r) => r.json())
     .then((children) => mergeIntoTreeData(node.key, children));
 
-<Tree treeData={data} loadData={handleLoadData} />
+<Tree treeData={data} loadData={handleLoadData} />;
 ```
 
 ### Auto-expand Parent (Filtering)
@@ -203,11 +253,7 @@ Pass the matching keys via `expandedKeys` and set `autoExpandParent` to
 keep their ancestors expanded.
 
 ```jsx
-<Tree
-  treeData={data}
-  expandedKeys={matchedKeys}
-  autoExpandParent
-/>
+<Tree treeData={data} expandedKeys={matchedKeys} autoExpandParent />
 ```
 
 ### Per-node Disabling
@@ -217,14 +263,18 @@ node-level flags.
 
 ```jsx
 const data = [
-  { key: 'a', title: 'A', children: [
-    { key: 'a-1', title: 'A-1', isDisabled: true },
-    { key: 'a-2', title: 'A-2', isCheckboxDisabled: true },
-    { key: 'a-3', title: 'A-3', isCheckable: false },
-  ]},
+  {
+    key: 'a',
+    title: 'A',
+    children: [
+      { key: 'a-1', title: 'A-1', isDisabled: true },
+      { key: 'a-2', title: 'A-2', isCheckboxDisabled: true },
+      { key: 'a-3', title: 'A-3', isCheckable: false },
+    ],
+  },
 ];
 
-<Tree treeData={data} isCheckable defaultExpandedKeys={['a']} />
+<Tree treeData={data} isCheckable defaultExpandedKeys={['a']} />;
 ```
 
 ### Fixed Height
@@ -233,6 +283,40 @@ const data = [
 <Tree treeData={data} height={300} />
 ```
 
+### Per-row Menu (Overflow + Right-Click)
+
+Pass `menu` (a `ReactNode` of `Menu.Item`s, or a callback) plus
+`contextMenu={true}` to render a built-in `⋮` overflow trigger AND
+open the same menu on right-click / `Shift+F10`. Use
+`onAction(action, key)` at the tree level to handle actions, or
+`data.onAction` for per-node behavior.
+
+```jsx
+<Tree
+  treeData={data}
+  contextMenu
+  menu={
+    <>
+      <Menu.Item key="rename">Rename</Menu.Item>
+      <Menu.Item key="duplicate">Duplicate</Menu.Item>
+      <Menu.Item key="delete">Delete</Menu.Item>
+    </>
+  }
+  onAction={(action, key) => console.log(action, 'on', key)}
+/>
+```
+
+### Right-Click Only
+
+`contextMenu="context-only"` keeps the right-click / `Shift+F10`
+behavior but hides the `⋮` trigger — handy for clean file-tree UIs.
+
+### Per-Node Menu Overrides
+
+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.
+
 ## Accessibility
 
 Tree implements the
@@ -287,7 +371,6 @@ via `useTree` from React Aria.
 
 - Built-in virtualization for very large trees (10k+ rows).
 - Drag-and-drop reordering, mirroring AntD's `draggable` API.
-- An `onRightClick`/context menu hook.
 - Reveal-on-mount: scroll the focused row into view when expanded
   programmatically.
 - Optional inline title editing.

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