@cube-dev/ui-kit 0.177.0 → 0.178.0

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

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

package/dist/utils/react/useScheme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { useSyncExternalStore } from "react";
 
 //#region src/utils/react/useScheme.ts

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.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.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.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.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.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.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.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.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.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.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 
 //#region src/utils/warnings.ts

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.177.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.177.0";
+const VERSION = "0.178.0";
 const TASTY_VERSION = "3.7.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/fields/FilterPicker.md

@@ -72,6 +72,7 @@ Choose a different component when the interaction has another shape:
 - **`onEscape`** `() => void` — Callback when Escape key is pressed
 - **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked (non-checkbox area)
 - **`onClear`** `() => void` — Callback called when the clear button is pressed
+- **`actions`** `ReactNode` — Custom actions rendered inside the trigger, to the left of the built-in clear button and dropdown caret
 - **`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)
@@ -208,6 +209,19 @@ For detailed information about all available item properties, see [Item document
 </FilterPicker>
 ```
 
+### FilterPicker.Action
+
+An [ItemAction](../actions/ItemAction.md) re-exported for the `actions` slot. It picks up the trigger's size and theme, so an action matches the field it sits in without being configured. Give every icon-only action an `aria-label` (a `tooltip` string also supplies one), since the icon alone has no accessible name.
+
+```jsx
+<FilterPicker
+  label="Favorite Fruit"
+  actions={<FilterPicker.Action icon={<ReloadIcon />} aria-label="Reset" onPress={reset} />}
+>
+  {items}
+</FilterPicker>
+```
+
 ### FilterPicker.Section
 
 Groups related items together with an optional heading.
@@ -348,6 +362,37 @@ const categories = [
 </FilterPicker>
 ```
 
+### With Custom Actions
+
+Use `actions` to add your own controls inside the trigger. They render to the left of the built-in clear button and dropdown caret, and pressing one runs its handler without opening the popover — so an action can do something the clear button cannot, such as restoring a default selection instead of emptying it.
+
+Actions follow the trigger's disabled state but not `isReadOnly` — a read-only field can still host an action that does not change the value, so pass `isDisabled` yourself for one that does. Pressing an action neither opens nor closes the popover, and works while the popover is open.
+
+```jsx
+const DEFAULT_KEY = 'apple';
+
+<FilterPicker
+  label="Favorite Fruit"
+  placeholder="Choose items..."
+  selectedKey={selectedKey}
+  isClearable
+  actions={
+    selectedKey !== DEFAULT_KEY ? (
+      <FilterPicker.Action
+        icon={<ReloadIcon />}
+        aria-label="Reset to default"
+        tooltip="Reset to default"
+        onPress={() => setSelectedKey(DEFAULT_KEY)}
+      />
+    ) : null
+  }
+  onSelectionChange={setSelectedKey}
+>
+  <FilterPicker.Item key="apple">Apple</FilterPicker.Item>
+  <FilterPicker.Item key="banana">Banana</FilterPicker.Item>
+</FilterPicker>
+```
+
 ### Multiple Selection
 
 ```jsx

package/docs/components/fields/Picker.md

@@ -49,6 +49,7 @@ Choose a different component when the interaction has another shape:
 - **`disabledKeys`** `Key[]` — Array of keys for disabled items
 - **`isClearable`** `boolean` (default: `false`) — Whether the picker shows a clear button when a selection is made
 - **`onClear`** `() => void` — Callback called when the clear button is pressed
+- **`actions`** `ReactNode` — Custom actions rendered inside the trigger, to the left of the built-in clear button and dropdown caret
 - **`sortSelectedToTop`** `boolean` — Sort selected items to the top when the popover opens (only works with `items` prop)
 - **`renderSummary`** `((args: { selectedLabels, selectedKeys, selectionMode }) => ReactNode) | false` — Custom renderer for the summary shown inside the trigger
 - **`header`** `ReactNode` — Custom header content in the popover
@@ -220,6 +221,21 @@ See [Item documentation](../content/Item.md) for the complete API. Common proper
 </Picker>
 ```
 
+### Picker.Action
+
+An [ItemAction](../actions/ItemAction.md) re-exported for the `actions` slot. It picks up the trigger's size and theme, so an action matches the field it sits in without being configured.
+
+```jsx
+<Picker
+  label="Favorite Fruit"
+  actions={<Picker.Action icon={<ReloadIcon />} aria-label="Reset" onPress={reset} />}
+>
+  {items}
+</Picker>
+```
+
+Give every icon-only action an `aria-label` (a `tooltip` string also supplies one), since the icon alone has no accessible name.
+
 ### Picker.Section
 
 Groups related items together under an optional section heading. Sections provide visual and semantic grouping for better organization.
@@ -374,6 +390,37 @@ Enable users to clear their selection with a clear button that appears when an i
 </Picker>
 ```
 
+### With Custom Actions
+
+Use `actions` to add your own controls inside the trigger. They render to the left of the built-in clear button and dropdown caret, and pressing one runs its handler without opening the popover — so an action can do something the clear button cannot, such as restoring a default selection instead of emptying it.
+
+Actions follow the trigger's disabled state but not `isReadOnly` — a read-only field can still host an action that does not change the value, so pass `isDisabled` yourself for one that does. Pressing an action neither opens nor closes the popover, and works while the popover is open.
+
+```jsx
+const DEFAULT_KEY = 'apple';
+
+<Picker
+  label="Favorite Fruit"
+  placeholder="Select a fruit"
+  selectedKey={selectedKey}
+  isClearable
+  actions={
+    selectedKey !== DEFAULT_KEY ? (
+      <Picker.Action
+        icon={<ReloadIcon />}
+        aria-label="Reset to default"
+        tooltip="Reset to default"
+        onPress={() => setSelectedKey(DEFAULT_KEY)}
+      />
+    ) : null
+  }
+  onSelectionChange={setSelectedKey}
+>
+  <Picker.Item key="apple">Apple</Picker.Item>
+  <Picker.Item key="banana">Banana</Picker.Item>
+</Picker>
+```
+
 ### Multiple Selection with Select All
 
 Add a "Select All" option for quick selection of all available items in multiple selection mode.

package/docs/components/fields/Select.md

@@ -38,6 +38,7 @@ Choose a different component when the interaction has another shape:
 - **`size`** `string` (default: `medium`) — Size of the select component
 - **`direction`** `string` (default: `bottom`) — Preferred direction for the dropdown menu
 - **`isClearable`** `boolean` (default: `false`) — Whether the select is clearable using a clear button in the rightIcon slot
+- **`actions`** `ReactNode` — Custom actions rendered inside the trigger, to the left of the built-in clear button and dropdown caret
 - **`shouldFlip`** `boolean` (default: `true`) — Whether dropdown should flip to fit in viewport
 - **`overlayOffset`** `number` (default: `8`) — Distance between select and dropdown in pixels
 - **`items`** `Iterable<T>` — Item objects used when rendering dynamic collections
@@ -77,6 +78,8 @@ Choose a different component when the interaction has another shape:
 
 **onClear** - Callback fired when the clear button is pressed, allowing you to perform custom actions when the selection is cleared.
 
+**actions** - Your own controls inside the trigger, rendered to the left of the built-in clear button and dropdown caret. Pressing one runs its handler without opening or closing the popover — including while the popover is open — so an action can do something the clear button cannot, such as restoring a default selection instead of emptying it. Use `Select.Action` so they match the trigger's size and theme. Actions follow the trigger's disabled state but not `isReadOnly`; pass `isDisabled` yourself for an action that changes the value.
+
 **tooltip** - Enables tooltip display on the trigger button. Can be:
 
 - `string` - Simple tooltip text
@@ -212,6 +215,19 @@ For detailed information about all available item properties, see [Item document
 </Select>
 ```
 
+### Select.Action
+
+An [ItemAction](../actions/ItemAction.md) re-exported for the `actions` slot. It picks up the trigger's size and theme, so an action matches the field it sits in without being configured. Give every icon-only action an `aria-label` (a `tooltip` string also supplies one), since the icon alone has no accessible name.
+
+```jsx
+<Select
+  label="Color"
+  actions={<Select.Action icon={<ReloadIcon />} aria-label="Reset" onPress={reset} />}
+>
+  {items}
+</Select>
+```
+
 ### Select.Section
 
 Groups related options together with an optional heading.
@@ -286,6 +302,33 @@ Groups related options together with an optional heading.
 </Select>
 ```
 
+### With Custom Actions
+
+```jsx
+const DEFAULT_KEY = 'blue';
+
+<Select
+  isClearable
+  label="Color"
+  placeholder="Choose a color..."
+  selectedKey={selectedKey}
+  actions={
+    selectedKey !== DEFAULT_KEY ? (
+      <Select.Action
+        icon={<ReloadIcon />}
+        aria-label="Reset to default"
+        tooltip="Reset to default"
+        onPress={() => setSelectedKey(DEFAULT_KEY)}
+      />
+    ) : null
+  }
+  onSelectionChange={setSelectedKey}
+>
+  <Select.Item key="red">Red</Select.Item>
+  <Select.Item key="blue">Blue</Select.Item>
+</Select>
+```
+
 ### Validation States
 
 ```jsx

package/docs/components/navigation/Tabs.md

@@ -244,6 +244,24 @@ Action button designed for the Tabs prefix/suffix slots. Styled with sharp edges
 
 Inherits all props from `ItemButton` except `shape` (always sharp).
 
+### Tab.Action
+
+Action for a single tab's own `actions` slot, where it renders to the left of the built-in menu trigger and delete button. It is an [ItemAction](../actions/ItemAction.md), the same component those built-ins use, so it picks up the tab's size and theme without being configured. Pressing one runs its handler without selecting the tab.
+
+Not to be confused with `Tabs.Action`, which is sized for the tab bar's `prefix` / `suffix` slots rather than for a tab.
+
+```jsx
+<Tab
+  key="tab1"
+  title="Tab 1"
+  actions={<Tab.Action icon={<PinIcon />} aria-label="Pin tab" onPress={handlePin} />}
+>
+  Content
+</Tab>
+```
+
+Give every icon-only action an `aria-label` (a `tooltip` string also supplies one), since the icon alone has no accessible name.
+
 ### Tab Props
 
 `Tab` extends [Item](../content/Item.md), so it accepts all Item props except those that don't apply to tabs (`description`, `hotkeys`, `theme`, `shape`, `variant`, `highlight`, `isSelected`, `htmlType`). This includes `icon`, `rightIcon`, `prefix`, `suffix`, `tooltip`, `isLoading`, `loadingSlot`, and all style props.
@@ -254,7 +272,7 @@ In addition, Tab accepts these tab-specific props:
 - **`isDisabled`** `boolean` — Disables the tab
 - **`size`** `TabSize` — Override tab size for this tab
 - **`type`** `TabType` — Override tab type for this tab
-- **`actions`** `ReactNode` — Custom actions to render in the tab
+- **`actions`** `ReactNode` — Custom actions to render in the tab, left of the built-in menu trigger and delete button. Use `Tab.Action`
 - **`autoHideActions`** `boolean` — Show actions only on hover (overrides Tabs-level)
 - **`isEditable`** `boolean` — Whether the tab title can be edited (overrides Tabs-level)
 - **`onTitleChange`** `(newTitle: string) => void` — Callback when title changes (overrides Tabs-level)

package/docs/components/overlays/DialogTrigger.md

@@ -35,7 +35,7 @@ DialogTrigger serves as a wrapper around a Dialog and its associated trigger, li
 - **`onDismiss`** `function` — Callback fired when the dialog is dismissed
 - **`targetRef`** — The ref of the element the Dialog should visually attach itself to
 - **`styles`** — The style map for the overlay
-- **`shouldCloseOnInteractOutside`** `(element: Element) => boolean` — Function to determine if a popover type Dialog should close on outside interaction. Asked before the built-in dismiss behaviours, so returning `false` keeps the popover open even for a `Button` / `ItemButton` that would otherwise dismiss it — and the pressed control still receives its own click. The element passed is the deepest node under the pointer (for a `Button` that is the label inside it, not the `<button>`), so guard with `contains()` rather than an identity check
+- **`shouldCloseOnInteractOutside`** `(element: Element) => boolean` — Function to determine if a popover type Dialog should close on outside interaction. Asked before every built-in dismiss behaviour, so returning `false` keeps the popover open even for a `Button` / `ItemButton` that would otherwise dismiss it, or for a control the trigger itself owns (a picker's clear button, its custom `actions`) that would otherwise be read as a press on the trigger — and the pressed control still receives its own click. The element passed is the deepest node under the pointer (for a `Button` that is the label inside it, not the `<button>`), so guard with `contains()` rather than an identity check
 - **`shouldRestoreFocus`** `boolean` (default: `true`) — Whether focus returns to the trigger when the dialog closes. Only needed for a surface that claims focus _later_ than the restore (async load, entry animation); an action that focuses the surface it opens is already left alone — see [Focus Management](#best-practices)
 
 ### Base Properties

package/package.json

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