@cube-dev/ui-kit 0.178.0 → 0.179.0

package/dist/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @cube-dev/ui-kit
 
+## 0.179.0
+
+### Minor Changes
+
+- [#1401](https://github.com/cube-js/cube-ui-kit/pull/1401) [`63f447ce`](https://github.com/cube-js/cube-ui-kit/commit/63f447ce059617ce446b25e0c2d4519c9193b647) Thanks [@tenphi](https://github.com/tenphi)! - `Select`, `Picker` and `FilterPicker` now render their trailing controls — your `actions`, the clear button, the loading spinner and the dropdown caret — through the same actions slot `ItemButton` uses, instead of the bespoke run added alongside the `actions` prop. Closes #1398.
+
+  The visible result is meant to be nothing: the trigger renders pixel-identically across sizes, types, themes, validation states and the loading, placeholder, icon-only and clearable variants, in light and dark. What changes is the DOM and the behaviour that depends on it.
+
+  - **The clear button is no longer a `<button>` nested inside a `<button>`.** The whole trailing run is now a sibling of the trigger, laid over its end.
+  - **The caret still opens the popover** even though it sits in that run: 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. This is covered by a browser spec; jsdom implements neither `pointer-events` nor hit testing and would pass against a build where the caret is dead.
+  - **The trigger's markup no longer changes shape** as a clear button appears, a spinner replaces the caret, or actions come and go. The run is rendered even when it is empty — `rightIcon={null}` with no `actions` of your own empties it — and an empty run reserves nothing, so an icon-only trigger stays square.
+  - `rightIcon` keeps its own slot, so a render function resolved against the trigger's modifiers and any `RightIcon` styles keep working. It replaces the built-in control exactly as before; if you also pass `actions`, they render after it.
+
+  `ItemButton` and `Item` share the mechanism, so three things change for rows with actions:
+
+  - **Actions are centred on the row's height**, instead of on the size token. A row with an inline description, or one whose height the caller set, now keeps its actions on its centre line rather than pinned near the top. A row with a **block** description is unchanged: there the run stays on the first line beside the label. An action is still `$action-size` whatever the row's height, so a tall row does not get oversized buttons.
+  - **The actions run is transparent to the pointer**, so a press in its padding or in a gap between two actions activates the row instead of being swallowed. The actions themselves are unaffected.
+  - **A `suffix` next to actions no longer adds its inline padding**, matching what it already did next to a `rightIcon` — the actions column carries the spacing. The gap between a suffix and the first action narrows accordingly. Restore it with `styles={{ Suffix: { padding: '$inline-padding right' } }}` if a row was relying on it.
+  - **An icon-only row with actions keeps a two-square minimum width**, as one with a `rightIcon` already did — so a trigger whose caret moved into the run does not change size. Both of these apply only to a row whose actions are rendered as a sibling run (`ItemButton` and the field triggers); a row with in-grid actions — `Tabs`, `Tag`, tree and list rows — is laid out by `Item`'s own columns and is untouched.
+
+  `ItemButton` also keeps its wrapper element once a row has had actions, so a row whose actions depend on a permission or a loading flag no longer remounts its button when they disappear, and it gains an `actionsProps` prop for attributes on the run's container. Pass `actions={null}` to ask for the run before there is anything in it, and the button is not remounted when the actions arrive either — `undefined` still means no run at all.
+
+  A row inside that wrapper also stops remounting when its actions come and go for a second reason: `Item` resolves its auto-tooltip from whether the label is dynamic, which decides whether a tooltip provider wraps the element, and `actions` used to flip that answer. A wrapped row is now always treated as having a dynamic label, which is true — its label gets whatever width the actions run leaves it.
+
+  Sibling actions now follow the row's **pressed** colour as well as its resting and disabled ones, so a caret or an action beside a label no longer stays at its resting tint while the label darkens under the finger.
+
+### Patch Changes
+
+- [#1405](https://github.com/cube-js/cube-ui-kit/pull/1405) [`af5c06af`](https://github.com/cube-js/cube-ui-kit/commit/af5c06afae53887d678828556e16bbe5fa8e0397) Thanks [@tenphi](https://github.com/tenphi)! - A control in a row's `actions` no longer answers to whatever opened around the row. An `ItemButton` — or a tab, or a `Select` / `Picker` / `FilterPicker` trigger — used as the trigger of a `DialogTrigger` or a `MenuTrigger` handed its own actions the trigger's press behaviour, because React Aria's `PressResponder` reaches every control below it. Pressing an action ran the action _and_ toggled the overlay; with the overlay already open the press was spent dismissing it instead, so the action never ran at all.
+
+  Both halves of the guard now live in the actions run itself, so every row that has actions gets them rather than only the three field triggers that had grown their own copy:
+
+  - **The run clears the press context it sits in**, so each action answers only to its own handler.
+  - **The run identifies itself to the overlay** as belonging to its row, so an overlay opened by that row reads a press on its own actions as its own rather than as a press outside. It is scoped to the row: pressing some other row's actions dismisses an open popover exactly as before.
+
+- [#1403](https://github.com/cube-js/cube-ui-kit/pull/1403) [`0ff467be`](https://github.com/cube-js/cube-ui-kit/commit/0ff467bedbbbdad8b5209965a37ba672d6f516f0) Thanks [@tenphi](https://github.com/tenphi)! - `Tabs` now renders a tab's actions — your own, the overflow menu trigger, the close button — through the same actions run `ItemButton` and the field triggers use, instead of the copy `TabButton` carried of its own.
+
+  The tab bar is meant to look exactly as it did, and does: identical across the `default`, `file`, `narrow` and `radio` types, all three sizes, and the reorderable, editable, auto-hiding, disabled and no-actions variants. What changes is behaviour the copy had drifted on.
+
+  - **A press in the run no longer disappears.** The run used to be opaque to the pointer, so a click in its padding — or in the gap between the menu trigger and the close button — hit the run and did nothing. The shared run is transparent and only its controls take presses, so those clicks now select the tab underneath. The controls themselves are unaffected, and pressing one still does not select the tab.
+  - **Actions centre on the tab's height** rather than being pinned to its top, so a tab whose height a caller has set keeps its controls on the centre line.
+  - **The active tab keeps its actions visible** under `autoHideActions` because the component asks for that, not because a CSS rule spelled out `active` next to `:hover` and `:focus-within`.
+
+  `ItemActionsWrapper` gains a `preserveActionsSpace` option for this, matching the prop `Item` already had: the run keeps its width reserved while hidden, so a bar does not reflow as the pointer crosses it, and it stays mounted rather than transitioning in and out — an unmounted run cannot be measured, so a tab that starts hidden would have nothing to reserve.
+
+  A tab's actions container is now always present in the markup, empty when the tab has none.
+
+- [#1400](https://github.com/cube-js/cube-ui-kit/pull/1400) [`0e1c9425`](https://github.com/cube-js/cube-ui-kit/commit/0e1c9425b40c839bc7f8513e074cf2769273b943) Thanks [@tenphi](https://github.com/tenphi)! - Update Tasty to 3.9.1 (from 3.7.0), and document `Tab.Action` with a story.
+
+  **Tasty 3.9.1 changes no rendered style, but it does change the CSS text.** Logical padding, margin and inset props are no longer folded into the physical shorthand: where 3.7.0 merged a `paddingBlock` / `paddingInline` pair into one `padding: <y> <x>` declaration per state, 3.9.1 emits separate `padding-block` and `padding-inline` declarations, each under its own state selector. Computed values come out the same — this was checked in real Chromium on the table cells that depend on it (`ItemTable`'s header, body and selection cells), and a canonical CSS diff across `Button`, `Item`, `ItemButton`, `Tabs`, `TextInput`, `Card`, `Tag`, `Badge` and typography is byte-identical. What changes is what an override has to beat: a rule that used to compete with a `padding` shorthand now competes with `padding-block` or `padding-inline`, and the documented priority ladder `padding < paddingBlock/paddingInline < paddingTop/...` is gone, because `paddingBlock` and `paddingInline` are ordinary CSS properties again rather than enhanced handlers.
+
+  **The replacement is a new family of logical style props**, each an enhanced handler that emits native logical CSS and lets the browser resolve `start` / `end` from `writingMode` and `direction`: `blockSize` / `inlineSize`, `blockPadding` / `inlinePadding`, `blockMargin` / `inlineMargin`, `blockInset` / `inlineInset`, `blockScrollMargin` / `inlineScrollMargin`, `blockScrollPadding` / `inlineScrollPadding`, and `blockBorder` / `inlineBorder`, alongside physical `scrollMargin` / `scrollPadding`. They take one value for both edges or two in start/end order, support `start` / `end` modifiers with comma-separated groups, and `blockSize` / `inlineSize` accept the same `min` / `max` / `fixed` syntax as `width`. Every component's Style Properties table has been regenerated to list them.
+
+  **`dotize` is gone from Tasty's public API** and is now internal to the kit. It was never re-exported, so nothing consumers import has changed; `Form.setFieldsValue({ user: { name: 'A' } })` still reaches a field registered as `name="user.name"`. The port was differential-tested against the 3.7.0 implementation across nested, empty, array-valued, numeric-key and non-object inputs at three prefixes.
+
+  **`Tab.Action` gains a story.** The component and its docs section shipped without one, so the tab `actions` slot had no rendered example and nothing in Chromatic's coverage. `Tabs` → `WithTabActions` shows a per-tab toggle action, and the docs section now renders it above its code sample. `ItemAction`'s own page also names `Tab` among its hosts and lists the `.Action` aliases, which it did not before.
+
+  **The Tasty lint plugin moves to 1.1.0** so the new props lint clean. On 1.0.5 every one of them — `blockPadding`, `inlinePadding`, `blockMargin`, `inlineInset`, `blockBorder`, `blockScrollPadding` — was reported as an unknown style property, which would have made the migration path above unusable. This is dev tooling only and does not affect the published package.
+
 ## 0.178.0
 
 ### Minor Changes

package/dist/_internal/hooks/use-debounced-value.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useEffect, useRef, useState } from "react";
 
 //#region src/_internal/hooks/use-debounced-value.ts

package/dist/_internal/hooks/use-deprecation-warning.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { deprecationWarning } from "../../utils/warnings.js";
 import React, { useEffect } from "react";
 

package/dist/_internal/hooks/use-event.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useSyncRef } from "./use-sync-ref.js";
 import { useCallback } from "react";
 

package/dist/_internal/hooks/use-is-first-render.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useRef } from "react";
 
 //#region src/_internal/hooks/use-is-first-render.ts

package/dist/_internal/hooks/use-sync-ref.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useRef } from "react";
 

package/dist/_internal/hooks/use-timer/timer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 //#region src/_internal/hooks/use-timer/timer.ts
 var Timer = class {
 	callback;

package/dist/_internal/hooks/use-timer/use-timer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useEvent } from "../use-event.js";
 import { Timer } from "./timer.js";
 import { useEffect, useState } from "react";

package/dist/_internal/hooks/use-warn.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useEvent } from "./use-event.js";
 import { warn } from "../../utils/warnings.js";
 import { useRef } from "react";

package/dist/components/Block.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { extractStyles } from "../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/CollectionItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { ItemAction } from "./actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "./content/ItemBadge/ItemBadge.js";
 import { Item } from "react-stately";

package/dist/components/GlobalStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { usePaletteVersion } from "../tokens/palette-config.js";
 import { getTokens } from "../tokens/all-tokens.js";
 import { useGlobalStyles, useRawCSS } from "@tenphi/tasty";

package/dist/components/GridProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useCombinedRefs } from "../utils/react/useCombinedRefs.js";
 import { filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useState } from "react";

package/dist/components/HiddenInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/HiddenInput.tsx

package/dist/components/Root.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { extractStyles } from "../utils/styles.js";
 import { AMBIENT_PREDEFINED_STATES } from "../utils/react/useScheme.js";
 import { EventBusProvider } from "../utils/react/useEventBus.js";

package/dist/components/actions/Action/Action.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useAction } from "../use-action.js";
 import { CONTAINER_STYLES, TEXT_STYLES, tasty } from "@tenphi/tasty";

package/dist/components/actions/Banner/Banner.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Item } from "../../content/Item/Item.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/actions/Button/Button.d.ts

@@ -4,7 +4,6 @@ import { DynamicIcon } from "../../../utils/react/resolveIcon.js";
 import "../../../utils/react/index.js";
 import { CubeActionProps } from "../Action/Action.js";
 import { Mods, Styles } from "@tenphi/tasty";
-import "react";
 import { OverlayProps } from "react-aria";
 
 //#region src/components/actions/Button/Button.d.ts

package/dist/components/actions/Button/Button.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { getDisabledElementProps } from "../../../utils/react/disabledProps.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";

package/dist/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { useSlotProps } from "../../../utils/react/Slots.js";
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/actions/ButtonSplit/ButtonSplit.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { ButtonSplitContext } from "./context.js";

package/dist/components/actions/ButtonSplit/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/actions/ButtonSplit/context.ts

package/dist/components/actions/CommandMenu/CommandMenu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";

package/dist/components/actions/CommandMenu/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/actions/CommandMenu/styled.tsx

package/dist/components/actions/ItemAction/ItemAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { CURRENT_CLEAR_STYLES, CURRENT_OUTLINE_STYLES, CURRENT_PRIMARY_STYLES, DANGER_CLEAR_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, ITEM_ACTION_BASE_STYLES, NOTE_CLEAR_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, WARNING_CLEAR_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES } from "../../../data/item-themes.js";

package/dist/components/actions/ItemActionContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/actions/ItemActionsWrapper.js

@@ -0,0 +1,218 @@
+/** @license MIT | @cube-dev/ui-kit v0.179.0 | Cube Dev Team */
+import { DisplayTransition } from "../helpers/DisplayTransition/DisplayTransition.js";
+import { ITEM_RESTING_COLOR_VARIANTS, ROW_STATE_ALIASES, resolveItemVariant } from "../../data/item-themes.js";
+import { ItemActionProvider } from "./ItemActionContext.js";
+import { tasty } from "@tenphi/tasty";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFocusWithin, useHover } from "react-aria";
+import { ClearPressResponder } from "@react-aria/interactions";
+
+//#region src/components/actions/ItemActionsWrapper.tsx
+/**
+* The sibling-actions layout shared by `ItemButton` and the field triggers
+* (`Select` / `Picker` / `FilterPicker`).
+*
+* A row's actions cannot live inside the row when the row is itself a button:
+* that nests a `<button>` in a `<button>`, and a press on an action activates
+* the row. So the run is rendered as a SIBLING, laid over the row's trailing
+* end, and the row reserves the space for it through `--actions-width` — which
+* this file measures — and `Item`'s own `actions` placeholder column.
+*
+* The run is pointer-transparent; only its children take presses. That is what
+* lets a picker put its non-interactive caret in the run and still have a click
+* on the caret reach the trigger underneath, and it stops the run's padding and
+* inter-action gaps from swallowing presses meant for the row.
+*
+* Being a sibling also puts the run OUTSIDE the row for anything that asks
+* "did this press land on my trigger?" — an overlay opened by the row would
+* read a press on its own actions as a press outside and dismiss itself,
+* swallowing that press on the way. The run therefore marks itself with
+* `data-trigger-action`, which `isOwnActionsPress` resolves back to the row it
+* belongs to. See `actions-run.ts`.
+*/
+const ItemActionsWrapperElement = tasty({
+	variants: ITEM_RESTING_COLOR_VARIANTS,
+	styles: {
+		...ROW_STATE_ALIASES,
+		"@block-description": ":has(> [data-description=\"block\"])",
+		display: "grid",
+		position: "relative",
+		placeContent: "stretch",
+		placeItems: "stretch",
+		$size: {
+			"": "$size-md",
+			"size=xsmall": "$size-xs",
+			"size=small": "$size-sm",
+			"size=medium": "$size-md",
+			"size=large": "$size-lg",
+			"size=xlarge": "$size-xl"
+		},
+		Actions: {
+			$: ">",
+			position: "absolute",
+			inset: {
+				"": "1bw right dock",
+				"type=card": "(1bw + .5x) right dock",
+				"@block-description": "1bw 1bw auto auto",
+				"type=card & @block-description": "(1bw + .5x) (1bw + .5x) auto auto"
+			},
+			display: "flex",
+			gap: "1bw",
+			placeItems: "center",
+			placeContent: "center end",
+			pointerEvents: "none",
+			padding: "0 $side-padding",
+			height: {
+				"": "min 0",
+				"@block-description": "min ($size - 2bw)"
+			},
+			opacity: {
+				"": 1,
+				"!actions-shown": 0
+			},
+			translate: {
+				"": "0 0",
+				"!actions-shown & !preserve-actions-space": ".5x 0"
+			},
+			transition: "theme, translate",
+			"$action-size": "min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))",
+			"$side-padding": "(($size - $action-size - 2bw) / 2)"
+		},
+		ActionsChild: {
+			$: ">Actions>*",
+			pointerEvents: {
+				"": "auto",
+				"!actions-shown": "none"
+			}
+		},
+		ActionIcon: {
+			$: ">Actions>",
+			display: "grid",
+			placeItems: "center",
+			placeContent: "center",
+			flexShrink: 0,
+			width: "$action-size",
+			height: "$action-size",
+			pointerEvents: "none",
+			preset: {
+				"": "t3",
+				"size=xsmall": "t4",
+				"size=xlarge": "t2"
+			}
+		}
+	}
+});
+/**
+* A non-interactive box inside an actions run — a dropdown caret, a loading
+* spinner. It occupies an action's footprint so the run stays evenly spaced,
+* and it lets presses through to the row behind it.
+*/
+function ItemActionIcon(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-element": "ActionIcon",
+		children: props.children
+	});
+}
+/**
+* Wraps a row in the sibling-actions layout and publishes `--actions-width` so
+* the row can reserve the space the run covers.
+*/
+function ItemActionsWrapper(props) {
+	const { children, actions, type = "item", theme = "default", size = "medium", isDisabled, disableActionsFocus, autoHideActions = false, preserveActionsSpace = false, mods, styles, actionsProps } = props;
+	const actionsRef = useRef(null);
+	const [actionsWidth, setActionsWidth] = useState(0);
+	const [areActionsVisible, setAreActionsVisible] = useState(false);
+	useLayoutEffect(() => {
+		const el = actionsRef.current;
+		if (!el) return;
+		const width = el.childElementCount ? Math.round(el.offsetWidth) : 0;
+		if (width !== actionsWidth) setActionsWidth(width);
+	}, [
+		actions,
+		areActionsVisible,
+		actionsWidth
+	]);
+	const [isFocusWithin, setIsFocusWithin] = useState(false);
+	const [hasPressed, setHasPressed] = useState(false);
+	const { hoverProps, isHovered } = useHover({});
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocusWithin });
+	useLayoutEffect(() => {
+		const actionsEl = actionsRef.current;
+		if (!actionsEl || !autoHideActions) return;
+		const checkPressed = () => {
+			setHasPressed(actionsEl.querySelector("[data-pressed]") !== null);
+		};
+		const observer = new MutationObserver(checkPressed);
+		observer.observe(actionsEl, {
+			attributes: true,
+			attributeFilter: ["data-pressed"],
+			subtree: true
+		});
+		checkPressed();
+		return () => observer.disconnect();
+	}, [areActionsVisible, autoHideActions]);
+	const shouldShowActions = isHovered || isFocusWithin || hasPressed || !autoHideActions;
+	const finalMods = useMemo(() => {
+		return {
+			...mods,
+			...shouldShowActions ? { "actions-shown": true } : null,
+			...preserveActionsSpace ? { "preserve-actions-space": true } : null,
+			disabled: isDisabled
+		};
+	}, [
+		mods,
+		shouldShowActions,
+		preserveActionsSpace,
+		isDisabled
+	]);
+	return /* @__PURE__ */ jsxs(ItemActionsWrapperElement, {
+		...hoverProps,
+		variant: resolveItemVariant(theme, type),
+		"data-size": size,
+		"data-type": type,
+		"data-theme": theme,
+		mods: finalMods,
+		styles,
+		style: {
+			"--actions-width": areActionsVisible || !autoHideActions || preserveActionsSpace ? `${actionsWidth}px` : "0px",
+			...typeof size === "number" && { "--size": `${size}px` }
+		},
+		children: [children({ showActions: shouldShowActions }), /* @__PURE__ */ jsx(ClearPressResponder, { children: /* @__PURE__ */ jsx(ItemActionProvider, {
+			type,
+			theme,
+			disableActionsFocus,
+			isDisabled,
+			children: autoHideActions && !preserveActionsSpace ? /* @__PURE__ */ jsx(DisplayTransition, {
+				exposeUnmounted: true,
+				isShown: shouldShowActions,
+				onPhaseChange: (phase) => {
+					setAreActionsVisible(phase !== "unmounted");
+				},
+				children: ({ ref: transitionRef }) => {
+					return /* @__PURE__ */ jsx("div", {
+						...focusWithinProps,
+						...actionsProps,
+						ref: (node) => {
+							actionsRef.current = node;
+							transitionRef(node);
+						},
+						"data-element": "Actions",
+						"data-trigger-action": "",
+						children: actions
+					});
+				}
+			}) : /* @__PURE__ */ jsx("div", {
+				ref: actionsRef,
+				...actionsProps,
+				"data-element": "Actions",
+				"data-trigger-action": "",
+				children: actions
+			})
+		}) })]
+	});
+}
+
+//#endregion
+export { ItemActionIcon, ItemActionsWrapper };
+//# sourceMappingURL=ItemActionsWrapper.js.map

package/dist/components/actions/ItemActionsWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemActionsWrapper.js","names":[],"sources":["../../../src/components/actions/ItemActionsWrapper.tsx"],"sourcesContent":["import { ClearPressResponder } from '@react-aria/interactions';\nimport { Mods, Styles, tasty } from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin, useHover } from 'react-aria';\n\nimport {\n  ITEM_RESTING_COLOR_VARIANTS,\n  resolveItemVariant,\n  ROW_STATE_ALIASES,\n} from '../../data/item-themes';\nimport { CubeItemProps } from '../content/Item/Item';\nimport { DisplayTransition } from '../helpers/DisplayTransition/DisplayTransition';\n\nimport { ItemActionProvider } from './ItemActionContext';\n\n/**\n * The sibling-actions layout shared by `ItemButton` and the field triggers\n * (`Select` / `Picker` / `FilterPicker`).\n *\n * A row's actions cannot live inside the row when the row is itself a button:\n * that nests a `<button>` in a `<button>`, and a press on an action activates\n * the row. So the run is rendered as a SIBLING, laid over the row's trailing\n * end, and the row reserves the space for it through `--actions-width` — which\n * this file measures — and `Item`'s own `actions` placeholder column.\n *\n * The run is pointer-transparent; only its children take presses. That is what\n * lets a picker put its non-interactive caret in the run and still have a click\n * on the caret reach the trigger underneath, and it stops the run's padding and\n * inter-action gaps from swallowing presses meant for the row.\n *\n * Being a sibling also puts the run OUTSIDE the row for anything that asks\n * \"did this press land on my trigger?\" — an overlay opened by the row would\n * read a press on its own actions as a press outside and dismiss itself,\n * swallowing that press on the way. The run therefore marks itself with\n * `data-trigger-action`, which `isOwnActionsPress` resolves back to the row it\n * belongs to. See `actions-run.ts`.\n */\nconst ItemActionsWrapperElement = tasty({\n  // Actions default to the `current` type, which paints from the inherited\n  // `currentcolor` — but they are rendered as a SIBLING of the row here, not\n  // inside it, so without this they would inherit the page color instead of the\n  // row's. Harmless on the default theme (the two match) and plainly wrong on\n  // any other: a `special` row would hand its actions the page's dark text to\n  // tint with, on a dark purple surface. The variant carries the row's resting\n  // color down so `currentcolor` means the same thing it does inside an `Item`.\n  variants: ITEM_RESTING_COLOR_VARIANTS,\n  styles: {\n    // The row is the wrapper's own child, so the wrapper can read the one\n    // interaction the row expresses as a COLOR change rather than a fill change.\n    // Without it the label darkened under the finger while the caret and the\n    // actions laid over the same row — which paint from the color this element\n    // hands down — stayed at their resting tint. The variants restate it,\n    // because that is where the colors keyed on it live.\n    ...ROW_STATE_ALIASES,\n\n    // The one layout the row does not want its actions centred in. A block\n    // description stacks under the label and can make the row arbitrarily tall;\n    // there the actions belong in the first line, beside the label, which is\n    // what anchoring them to a `$size`-tall box at the top achieves. Every other\n    // row — including one with an INLINE description — is a single band, and\n    // centring is both what it wants and what survives a caller overriding the\n    // height. Read off the row rather than plumbed through as a prop, because\n    // `Item` is what decides the placement and it defaults by type.\n    '@block-description': ':has(> [data-description=\"block\"])',\n\n    display: 'grid',\n    position: 'relative',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      // Both insets set, so the run's BOX spans the row and `placeItems: center`\n      // puts the actions on its centre line. What sits in the box does not grow\n      // with it — every child is a fixed `$action-size`, which is capped so a\n      // large row does not get oversized buttons.\n      inset: {\n        '': '1bw right dock',\n        'type=card': '(1bw + .5x) right dock',\n        '@block-description': '1bw 1bw auto auto',\n        'type=card & @block-description': '(1bw + .5x) (1bw + .5x) auto auto',\n      },\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n\n      // The run lies OVER the row. Left opaque, its padding and the gaps between\n      // its actions eat presses that belong to the row behind it, and a\n      // non-interactive control inside it (a picker's caret) could never reach\n      // its own trigger. The run itself is therefore transparent to the pointer\n      // and its children opt back in — see `ActionsChild` — so a child that\n      // wants to stay transparent, like that caret, only has to say so.\n      pointerEvents: 'none',\n\n      padding: '0 $side-padding',\n      // Only where the run is top-anchored: there the box has no bottom to\n      // measure from, so `$size` is what gives it one. Everywhere else the two\n      // insets decide the height, and this floor would force the box back to\n      // `$size` and re-anchor it at the top.\n      height: {\n        '': 'min 0',\n        '@block-description': 'min ($size - 2bw)',\n      },\n      opacity: {\n        '': 1,\n        '!actions-shown': 0,\n      },\n      // The run slides in as it fades, but only where it was taking no space to\n      // begin with. Where the space is reserved the run has a fixed place in the\n      // layout, and sliding it would read as the actions drifting rather than\n      // appearing.\n      translate: {\n        '': '0 0',\n        '!actions-shown & !preserve-actions-space': '.5x 0',\n      },\n      transition: 'theme, translate',\n\n      // Size for the action buttons\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      // Side padding for the button\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n\n    // Whatever a caller put in the run: interactive again, so the transparency\n    // above applies only to the space BETWEEN and AROUND the actions. `*`\n    // because the run's content is the caller's — there is no element name to\n    // key on.\n    ActionsChild: {\n      $: '>Actions>*',\n      pointerEvents: {\n        '': 'auto',\n        '!actions-shown': 'none',\n      },\n    },\n\n    // A non-interactive box in the run, the same size as an action so it lines\n    // up with one. `$side-padding + $action-size / 2` collapses to\n    // `($size - 2bw) / 2` — the centre of `Item`'s own `rightIcon` square — so a\n    // caret moved out of that slot and into the run does not move on screen.\n    ActionIcon: {\n      $: '>Actions>',\n      display: 'grid',\n      placeItems: 'center',\n      placeContent: 'center',\n      flexShrink: 0,\n      width: '$action-size',\n      height: '$action-size',\n      // The run's children are interactive by default; this one is not, and a\n      // press on it belongs to the row underneath.\n      pointerEvents: 'none',\n      // `--icon-size` comes from the preset, and the run is outside the row that\n      // sets one — so the box restates the ladder `Item` uses. The `m` weights a\n      // non-`item` type picks carry the same icon size as their plain\n      // counterparts, so weight is not a factor here.\n      preset: {\n        '': 't3',\n        'size=xsmall': 't4',\n        'size=xlarge': 't2',\n      },\n    },\n  },\n});\n\n/**\n * A non-interactive box inside an actions run — a dropdown caret, a loading\n * spinner. It occupies an action's footprint so the run stays evenly spaced,\n * and it lets presses through to the row behind it.\n */\nexport function ItemActionIcon(props: { children: ReactNode }) {\n  return <div data-element=\"ActionIcon\">{props.children}</div>;\n}\n\nexport interface ItemActionsWrapperProps {\n  /**\n   * The row or trigger the actions are laid over. Receives the resolved\n   * visibility so it can reserve space for the run while it is shown.\n   */\n  children: (state: { showActions: boolean }) => ReactNode;\n  /**\n   * The run's content. Rendering the wrapper with an empty run is supported and\n   * costs nothing — the measured width is 0 — which is how a trigger keeps its\n   * markup stable across states that do and do not have trailing controls.\n   */\n  actions?: ReactNode;\n  type?: string;\n  theme?: string;\n  /** `Item`'s size token, or a pixel number. */\n  size?: CubeItemProps['size'];\n  isDisabled?: boolean;\n  disableActionsFocus?: boolean;\n  /**\n   * Hide the actions until the row is hovered, focused, or holds a pressed\n   * control.\n   * @default false\n   */\n  autoHideActions?: boolean;\n  /**\n   * Keep the run's width reserved while it is hidden, so the row does not\n   * change size as the actions come and go. Only meaningful with\n   * `autoHideActions`.\n   *\n   * It also keeps the run MOUNTED rather than transitioning it in and out:\n   * an unmounted run cannot be measured, so a row that starts hidden would\n   * have nothing to reserve.\n   * @default false\n   */\n  preserveActionsSpace?: boolean;\n  /** Extra modifiers for the wrapper, merged after the ones it derives itself. */\n  mods?: Mods;\n  /** Styles for the wrapper element — the one that is the row's layout box. */\n  styles?: Styles;\n  /** Extra props spread on the run's container, e.g. event handlers. */\n  actionsProps?: HTMLAttributes<HTMLDivElement>;\n}\n\n/**\n * Wraps a row in the sibling-actions layout and publishes `--actions-width` so\n * the row can reserve the space the run covers.\n */\nexport function ItemActionsWrapper(props: ItemActionsWrapperProps) {\n  const {\n    children,\n    actions,\n    type = 'item',\n    theme = 'default',\n    size = 'medium',\n    isDisabled,\n    disableActionsFocus,\n    autoHideActions = false,\n    preserveActionsSpace = false,\n    mods,\n    styles,\n    actionsProps,\n  } = props;\n\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWidth, setActionsWidth] = useState(0);\n  const [areActionsVisible, setAreActionsVisible] = useState(false);\n\n  useLayoutEffect(() => {\n    const el = actionsRef.current;\n\n    if (!el) return;\n\n    // An empty run still has the container's side padding, which would reserve\n    // space inside the row for nothing. Nothing rendered means nothing to\n    // reserve.\n    const width = el.childElementCount ? Math.round(el.offsetWidth) : 0;\n\n    if (width !== actionsWidth) {\n      setActionsWidth(width);\n    }\n  }, [actions, areActionsVisible, actionsWidth]);\n\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const [hasPressed, setHasPressed] = useState(false);\n  const { hoverProps, isHovered } = useHover({});\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: setIsFocusWithin,\n  });\n\n  // Watch for data-pressed attribute on any descendant element\n  useLayoutEffect(() => {\n    const actionsEl = actionsRef.current;\n\n    if (!actionsEl || !autoHideActions) return;\n\n    const checkPressed = () => {\n      setHasPressed(actionsEl.querySelector('[data-pressed]') !== null);\n    };\n\n    const observer = new MutationObserver(checkPressed);\n\n    observer.observe(actionsEl, {\n      attributes: true,\n      attributeFilter: ['data-pressed'],\n      subtree: true,\n    });\n\n    checkPressed();\n\n    return () => observer.disconnect();\n  }, [areActionsVisible, autoHideActions]);\n\n  const shouldShowActions =\n    isHovered || isFocusWithin || hasPressed || !autoHideActions;\n\n  // `disabled` is on the wrapper so its variant can paint the row's DISABLED\n  // label color, not just the resting one. Actions default to the `current` type\n  // and suppress their own fade when the disabled state is inherited — on the\n  // grounds that the host already faded the color they paint from — so without\n  // this the wrapper would hand them a full-strength color and a disabled button\n  // would sit next to full-strength actions. See `ITEM_RESTING_COLOR_VARIANTS`.\n  const finalMods = useMemo(() => {\n    return {\n      ...mods,\n      ...(shouldShowActions ? { 'actions-shown': true } : null),\n      ...(preserveActionsSpace ? { 'preserve-actions-space': true } : null),\n      disabled: isDisabled,\n    };\n  }, [mods, shouldShowActions, preserveActionsSpace, isDisabled]);\n\n  return (\n    <ItemActionsWrapperElement\n      {...hoverProps}\n      // The same resolver `Item` uses, so the wrapper cannot land on a\n      // different variant than the row it wraps.\n      variant={resolveItemVariant(theme, type)}\n      data-size={size}\n      data-type={type}\n      data-theme={theme}\n      mods={finalMods}\n      styles={styles}\n      style={\n        {\n          '--actions-width':\n            areActionsVisible || !autoHideActions || preserveActionsSpace\n              ? `${actionsWidth}px`\n              : '0px',\n          ...(typeof size === 'number' && { '--size': `${size}px` }),\n        } as CSSProperties\n      }\n    >\n      {children({ showActions: shouldShowActions })}\n      {/*\n        The run is rendered under whatever press context the row sits in, and a\n        `PressResponder` in that context reaches EVERY `usePress` below it — so\n        an `ItemButton` / `TabButton` / picker trigger inside a `DialogTrigger`\n        or a `MenuTrigger` handed its own actions the trigger's `onPress`, and\n        pressing one toggled the overlay on top of running the action. The run\n        belongs to the row, not to whatever opened around it: it clears the\n        context so each action answers only to its own handler.\n      */}\n      <ClearPressResponder>\n        <ItemActionProvider\n          type={type}\n          theme={theme}\n          disableActionsFocus={disableActionsFocus}\n          isDisabled={isDisabled}\n        >\n          {autoHideActions && !preserveActionsSpace ? (\n            <DisplayTransition\n              exposeUnmounted\n              isShown={shouldShowActions}\n              onPhaseChange={(phase) => {\n                setAreActionsVisible(phase !== 'unmounted');\n              }}\n            >\n              {({ ref: transitionRef }) => {\n                return (\n                  <div\n                    {...focusWithinProps}\n                    {...actionsProps}\n                    ref={(node: any) => {\n                      actionsRef.current = node;\n                      transitionRef(node);\n                    }}\n                    data-element=\"Actions\"\n                    data-trigger-action=\"\"\n                  >\n                    {actions}\n                  </div>\n                );\n              }}\n            </DisplayTransition>\n          ) : (\n            <div\n              ref={actionsRef}\n              {...actionsProps}\n              data-element=\"Actions\"\n              data-trigger-action=\"\"\n            >\n              {actions}\n            </div>\n          )}\n        </ItemActionProvider>\n      </ClearPressResponder>\n    </ItemActionsWrapperElement>\n  );\n}\n"],"mappings":"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"}

package/dist/components/actions/ItemButton/ItemButton.d.ts

@@ -8,14 +8,24 @@ import "../ItemAction/index.js";
 import "../../../index.js";
 import { Styles } from "@tenphi/tasty";
 import * as react from "react";
-import { ReactNode } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/actions/ItemButton/ItemButton.d.ts
 interface CubeItemButtonProps extends Omit<CubeItemProps, 'size'>, Omit<CubeUseActionProps, 'as'> {
+  /**
+   * The row's trailing controls, rendered beside the button rather than inside
+   * it. Pass `null` to keep an empty run — the row reserves no space for it, and
+   * the button is not remounted when the actions arrive later.
+   */
   actions?: ReactNode;
   size?: Omit<CubeItemProps['size'], 'inline'>;
   wrapperStyles?: Styles;
+  /**
+   * Extra props spread on the actions run's container, e.g. event handlers.
+   * Only meaningful together with `actions`.
+   */
+  actionsProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const _ItemButton: react.ForwardRefExoticComponent<Omit<CubeItemButtonProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>> & {
   Action: react.ForwardRefExoticComponent<Omit<CubeItemActionProps, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;