@cube-dev/ui-kit 0.0.0-canary-b54b6e8 → 0.0.0-canary-4ef464b

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { isDevEnv } from "../is-dev-env.js";
 import { useSyncExternalStore } from "react";

package/dist/utils/react/useBufferedValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

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

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

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

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | 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.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-b54b6e8";
+const VERSION = "0.0.0-canary-4ef464b";
 const TASTY_VERSION = "3.9.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/actions/ItemButton.md

@@ -31,7 +31,8 @@ An interactive button component built on top of `Item` that provides all the lay
 - **`htmlType`** `'button' | 'submit' | 'reset'` — HTML button type attribute
 - **`description`** `string` — Secondary text shown below the main content
 - **`isLoading`** `boolean` — Whether the button shows loading state with disabled interaction
-- **`actions`** `ReactNode` — Inline action buttons displayed on the right side. Use `ItemButton.Action` for consistent styling. Actions automatically inherit the parent button's `type` prop
+- **`actions`** `ReactNode` — Inline action buttons displayed on the right side. Use `ItemButton.Action` for consistent styling. Actions automatically inherit the parent button's `type` prop. Pass `null` to keep an empty run, so actions arriving later do not remount the button
+- **`actionsProps`** `HTMLAttributes<HTMLDivElement>` — Props spread on the actions run's container. Only meaningful together with `actions`
 - **`autoHideActions`** `boolean` — When true, actions are hidden by default and fade in on hover
 - **`preserveActionsSpace`** `boolean` (default: `false`) — Preserve the actions width when hidden (only changes opacity, not layout)
 - **`disableActionsFocus`** `boolean` (default: `false`) — Disable focus on action buttons by setting tabIndex to -1
@@ -158,6 +159,19 @@ ItemButton supports inline actions that appear on the right side. Use the `ItemB
 
 Actions automatically inherit the parent button's `type` prop and adjust their styling accordingly. The component reserves space for actions to prevent content overlap.
 
+#### How the actions run is laid out
+
+Actions are rendered **outside** the `<button>`, in a run laid over its trailing end, and the button reserves the width they cover. That is what keeps an action from being a `<button>` nested inside a `<button>`, and what stops pressing one from also activating the row.
+
+Three consequences worth knowing:
+
+- **The run is transparent to the pointer; its children are not.** A press in the padding or in a gap between two actions falls through to the row, so the row stays clickable right up to its edge. A non-interactive control placed in the run — an icon, a spinner — should set `pointerEvents: 'none'` on itself so presses reach the row too.
+- **Actions are centred on the row's height**, and stay `$action-size` whatever that height is, so a `large` row does not get oversized buttons. The exception is a row with a **block** description, where the run is pinned to the first line beside the label instead of floating to the middle of a tall row.
+- **The wrapper element is kept once a row has had actions**, even if they later go away. Adding or removing a DOM level around the button would remount it — dropping focus, any running transition, and the node every ref is holding — so a row whose actions depend on a permission or a loading flag stays stable. An empty run reserves no space: the row stops treating it as end content, so an icon-only row stays square.
+- **Pass `actions={null}` to ask for the run up front.** A row that knows its actions are coming — on a permission, a fetch — gets the wrapper from its first render and never remounts when they arrive. `undefined` means no run at all, and is still the default.
+
+`wrapperStyles` targets that wrapper, which is the row's layout box when actions are present; `styles` targets the button inside it.
+
 ## Accessibility
 
 ### Keyboard Navigation

package/docs/components/fields/FilterPicker.md

@@ -368,6 +368,16 @@ Use `actions` to add your own controls inside the trigger. They render to the le
 
 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.
 
+#### Where the trailing controls live
+
+Your actions, the clear button and the caret share one run, rendered **outside** the trigger `<button>` and laid over its trailing end — the same layout `ItemButton` uses for a row's actions. The clear button is therefore a real sibling of the trigger rather than a `<button>` nested inside one, and the run reserves its width so nothing overlaps the label.
+
+The caret is in that run too, and still opens the popover: the run is transparent to the pointer and only its interactive children take presses, so a press on the caret — or anywhere in the run's padding — hit-tests through to the trigger underneath.
+
+`rightIcon` is the one thing that stays in its own slot, because it accepts a render function resolved against the trigger's modifiers and is what a caller's `RightIcon` styles target. Passing it replaces the built-in caret exactly as before; if you pass `actions` as well, they render after it.
+
+The run is rendered whether or not it has anything in it, so the trigger's markup does not change shape as a clear button appears or a spinner replaces the caret. `rightIcon={null}` empties it — the caret moves into the `rightIcon` slot and nothing takes its place — and an empty run reserves nothing, so an icon-only trigger stays square.
+
 ```jsx
 const DEFAULT_KEY = 'apple';
 

package/docs/components/fields/Picker.md

@@ -396,6 +396,16 @@ Use `actions` to add your own controls inside the trigger. They render to the le
 
 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.
 
+#### Where the trailing controls live
+
+Your actions, the clear button and the caret share one run, rendered **outside** the trigger `<button>` and laid over its trailing end — the same layout `ItemButton` uses for a row's actions. The clear button is therefore a real sibling of the trigger rather than a `<button>` nested inside one, and the run reserves its width so nothing overlaps the label.
+
+The caret is in that run too, and still opens the popover: the run is transparent to the pointer and only its interactive children take presses, so a press on the caret — or anywhere in the run's padding — hit-tests through to the trigger underneath.
+
+`rightIcon` is the one thing that stays in its own slot, because it accepts a render function resolved against the trigger's modifiers and is what a caller's `RightIcon` styles target. Passing it replaces the built-in caret exactly as before; if you pass `actions` as well, they render after it.
+
+The run is rendered whether or not it has anything in it, so the trigger's markup does not change shape as a clear button appears or a spinner replaces the caret. `rightIcon={null}` empties it — the caret moves into the `rightIcon` slot and nothing takes its place — and an empty run reserves nothing, so an icon-only trigger stays square.
+
 ```jsx
 const DEFAULT_KEY = 'apple';
 

package/docs/components/fields/Select.md

@@ -304,6 +304,16 @@ Groups related options together with an optional heading.
 
 ### With Custom Actions
 
+#### Where the trailing controls live
+
+Your actions, the clear button and the caret share one run, rendered **outside** the trigger `<button>` and laid over its trailing end — the same layout `ItemButton` uses for a row's actions. The clear button is therefore a real sibling of the trigger rather than a `<button>` nested inside one, and the run reserves its width so nothing overlaps the label.
+
+The caret is in that run too, and still opens the popover: the run is transparent to the pointer and only its interactive children take presses, so a press on the caret — or anywhere in the run's padding — hit-tests through to the trigger underneath.
+
+`rightIcon` is the one thing that stays in its own slot, because it accepts a render function resolved against the trigger's modifiers and is what a caller's `RightIcon` styles target. Passing it replaces the built-in caret exactly as before; if you pass `actions` as well, they render after it.
+
+The run is rendered whether or not it has anything in it, so the trigger's markup does not change shape as a clear button appears or a spinner replaces the caret. `rightIcon={null}` empties it — the caret moves into the `rightIcon` slot and nothing takes its place — and an empty run reserves nothing, so an icon-only trigger stays square.
+
 ```jsx
 const DEFAULT_KEY = 'blue';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-b54b6e8",
+  "version": "0.0.0-canary-4ef464b",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {