@cube-dev/ui-kit 0.185.0 → 0.185.1

package/dist/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cube-dev/ui-kit
 
+## 0.185.1
+
+### Patch Changes
+
+- [#1434](https://github.com/cube-js/cube-ui-kit/pull/1434) [`e87b77bf`](https://github.com/cube-js/cube-ui-kit/commit/e87b77bf9603557066f7632afec49d1926c90318) Thanks [@tenphi](https://github.com/tenphi)! - Fix `Select`, `Picker`, `FilterPicker` and `ItemButton` triggers, and tabs with actions, growing by the width of their actions run right after mounting. The row reserves that width from a measurement, and the first measurement animated in from 0px, so a trigger widened by its caret over the first 80ms. `FilterPicker` and `Picker` size their popover from the trigger when it opens, so a popover opened in that window came out narrower than the trigger, by a different amount each time. The first measured width now applies at once. Actions revealed on hover still slide in.
+
 ## 0.185.0
 
 ### Minor Changes

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { c } from "react-compiler-runtime";
 import { useRef } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { useEvent } from "../use-event.js";
 import { Timer } from "./timer.js";
 import { c } from "react-compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { extractStyles } from "../utils/styles.js";
 import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/CollectionItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { usePaletteValue } from "../tokens/palette-config.js";
 import { getTokens } from "../tokens/all-tokens.js";
 import { c } from "react-compiler-runtime";

package/dist/components/GridProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useAction } from "../use-action.js";
 import { c } from "react-compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { useSlotProps } from "../../../utils/react/Slots.js";
 import { Space } from "../../layout/Space.js";
 import { c } from "react-compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | Cube Dev Team */
 import { c } from "react-compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/actions/ItemActionsWrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.185.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.185.1 | 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";
@@ -127,7 +127,7 @@ function ItemActionIcon(props) {
 * the row can reserve the space the run covers.
 */
 function ItemActionsWrapper(props) {
-	const $ = c(57);
+	const $ = c(60);
 	const { children, actions, type: t0, theme: t1, size: t2, isDisabled, disableActionsFocus, autoHideActions: t3, preserveActionsSpace: t4, mods, styles, actionsProps } = props;
 	const type = t0 === void 0 ? "item" : t0;
 	const theme = t1 === void 0 ? "default" : t1;
@@ -137,46 +137,56 @@ function ItemActionsWrapper(props) {
 	const actionsRef = useRef(null);
 	const [actionsWidth, setActionsWidth] = useState(0);
 	const [areActionsVisible, setAreActionsVisible] = useState(false);
+	const [skipWidthTransition, setSkipWidthTransition] = useState(false);
+	const isMountPassRef = useRef(true);
 	let t5;
-	if ($[0] !== actionsWidth) {
+	if ($[0] !== actionsWidth || $[1] !== skipWidthTransition) {
 		t5 = () => {
 			const el = actionsRef.current;
+			const isMountPass = isMountPassRef.current;
+			isMountPassRef.current = false;
 			if (!el) return;
 			const width = el.childElementCount ? Math.round(el.offsetWidth) : 0;
-			if (width !== actionsWidth) setActionsWidth(width);
+			if (width !== actionsWidth) {
+				if (isMountPass) setSkipWidthTransition(true);
+				setActionsWidth(width);
+			} else if (skipWidthTransition) setSkipWidthTransition(false);
 		};
 		$[0] = actionsWidth;
-		$[1] = t5;
-	} else t5 = $[1];
+		$[1] = skipWidthTransition;
+		$[2] = t5;
+	} else t5 = $[2];
 	let t6;
-	if ($[2] !== actions || $[3] !== actionsWidth || $[4] !== areActionsVisible) {
+	if ($[3] !== actions || $[4] !== actionsWidth || $[5] !== areActionsVisible || $[6] !== skipWidthTransition) {
 		t6 = [
 			actions,
 			areActionsVisible,
-			actionsWidth
+			actionsWidth,
+			skipWidthTransition
 		];
-		$[2] = actions;
-		$[3] = actionsWidth;
-		$[4] = areActionsVisible;
-		$[5] = t6;
-	} else t6 = $[5];
+		$[3] = actions;
+		$[4] = actionsWidth;
+		$[5] = areActionsVisible;
+		$[6] = skipWidthTransition;
+		$[7] = t6;
+	} else t6 = $[7];
 	useLayoutEffect(t5, t6);
 	const [isFocusWithin, setIsFocusWithin] = useState(false);
 	const [hasPressed, setHasPressed] = useState(false);
 	let t7;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
 		t7 = {};
-		$[6] = t7;
-	} else t7 = $[6];
+		$[8] = t7;
+	} else t7 = $[8];
 	const { hoverProps, isHovered } = useHover(t7);
 	let t8;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = { onFocusWithinChange: setIsFocusWithin };
-		$[7] = t8;
-	} else t8 = $[7];
+		$[9] = t8;
+	} else t8 = $[9];
 	const { focusWithinProps } = useFocusWithin(t8);
 	let t9;
-	if ($[8] !== autoHideActions) {
+	if ($[10] !== autoHideActions) {
 		t9 = () => {
 			const actionsEl = actionsRef.current;
 			if (!actionsEl || !autoHideActions) return;
@@ -192,79 +202,83 @@ function ItemActionsWrapper(props) {
 			checkPressed();
 			return () => observer.disconnect();
 		};
-		$[8] = autoHideActions;
-		$[9] = t9;
-	} else t9 = $[9];
+		$[10] = autoHideActions;
+		$[11] = t9;
+	} else t9 = $[11];
 	let t10;
-	if ($[10] !== areActionsVisible || $[11] !== autoHideActions) {
+	if ($[12] !== areActionsVisible || $[13] !== autoHideActions) {
 		t10 = [areActionsVisible, autoHideActions];
-		$[10] = areActionsVisible;
-		$[11] = autoHideActions;
-		$[12] = t10;
-	} else t10 = $[12];
+		$[12] = areActionsVisible;
+		$[13] = autoHideActions;
+		$[14] = t10;
+	} else t10 = $[14];
 	useLayoutEffect(t9, t10);
 	const shouldShowActions = isHovered || isFocusWithin || hasPressed || !autoHideActions;
 	let t11;
-	if ($[13] !== shouldShowActions) {
+	if ($[15] !== shouldShowActions) {
 		t11 = shouldShowActions ? { "actions-shown": true } : null;
-		$[13] = shouldShowActions;
-		$[14] = t11;
-	} else t11 = $[14];
+		$[15] = shouldShowActions;
+		$[16] = t11;
+	} else t11 = $[16];
 	let t12;
-	if ($[15] !== preserveActionsSpace) {
+	if ($[17] !== preserveActionsSpace) {
 		t12 = preserveActionsSpace ? { "preserve-actions-space": true } : null;
-		$[15] = preserveActionsSpace;
-		$[16] = t12;
-	} else t12 = $[16];
+		$[17] = preserveActionsSpace;
+		$[18] = t12;
+	} else t12 = $[18];
 	let t13;
-	if ($[17] !== isDisabled || $[18] !== mods || $[19] !== t11 || $[20] !== t12) {
+	if ($[19] !== isDisabled || $[20] !== mods || $[21] !== t11 || $[22] !== t12) {
 		t13 = {
 			...mods,
 			...t11,
 			...t12,
 			disabled: isDisabled
 		};
-		$[17] = isDisabled;
-		$[18] = mods;
-		$[19] = t11;
-		$[20] = t12;
-		$[21] = t13;
-	} else t13 = $[21];
+		$[19] = isDisabled;
+		$[20] = mods;
+		$[21] = t11;
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
 	const finalMods = t13;
 	let t14;
-	if ($[22] !== theme || $[23] !== type) {
+	if ($[24] !== theme || $[25] !== type) {
 		t14 = resolveItemVariant(theme, type);
-		$[22] = theme;
-		$[23] = type;
-		$[24] = t14;
-	} else t14 = $[24];
+		$[24] = theme;
+		$[25] = type;
+		$[26] = t14;
+	} else t14 = $[26];
 	const t15 = areActionsVisible || !autoHideActions || preserveActionsSpace ? `${actionsWidth}px` : "0px";
 	let t16;
-	if ($[25] !== size) {
+	if ($[27] !== size) {
 		t16 = typeof size === "number" && { "--size": `${size}px` };
-		$[25] = size;
-		$[26] = t16;
-	} else t16 = $[26];
+		$[27] = size;
+		$[28] = t16;
+	} else t16 = $[28];
 	let t17;
-	if ($[27] !== t15 || $[28] !== t16) {
+	if ($[29] !== t15 || $[30] !== t16) {
 		t17 = {
 			"--actions-width": t15,
 			...t16
 		};
-		$[27] = t15;
-		$[28] = t16;
-		$[29] = t17;
-	} else t17 = $[29];
+		$[29] = t15;
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
 	const t18 = t17;
 	let t19;
-	if ($[30] !== children || $[31] !== shouldShowActions) {
-		t19 = children({ showActions: shouldShowActions });
-		$[30] = children;
-		$[31] = shouldShowActions;
-		$[32] = t19;
-	} else t19 = $[32];
+	if ($[32] !== children || $[33] !== shouldShowActions || $[34] !== skipWidthTransition) {
+		t19 = children({
+			showActions: shouldShowActions,
+			skipActionsWidthTransition: skipWidthTransition
+		});
+		$[32] = children;
+		$[33] = shouldShowActions;
+		$[34] = skipWidthTransition;
+		$[35] = t19;
+	} else t19 = $[35];
 	let t20;
-	if ($[33] !== actions || $[34] !== actionsProps || $[35] !== autoHideActions || $[36] !== focusWithinProps || $[37] !== preserveActionsSpace || $[38] !== shouldShowActions) {
+	if ($[36] !== actions || $[37] !== actionsProps || $[38] !== autoHideActions || $[39] !== focusWithinProps || $[40] !== preserveActionsSpace || $[41] !== shouldShowActions) {
 		t20 = autoHideActions && !preserveActionsSpace ? /* @__PURE__ */ jsx(DisplayTransition, {
 			exposeUnmounted: true,
 			isShown: shouldShowActions,
@@ -292,16 +306,16 @@ function ItemActionsWrapper(props) {
 			"data-trigger-action": "",
 			children: actions
 		});
-		$[33] = actions;
-		$[34] = actionsProps;
-		$[35] = autoHideActions;
-		$[36] = focusWithinProps;
-		$[37] = preserveActionsSpace;
-		$[38] = shouldShowActions;
-		$[39] = t20;
-	} else t20 = $[39];
+		$[36] = actions;
+		$[37] = actionsProps;
+		$[38] = autoHideActions;
+		$[39] = focusWithinProps;
+		$[40] = preserveActionsSpace;
+		$[41] = shouldShowActions;
+		$[42] = t20;
+	} else t20 = $[42];
 	let t21;
-	if ($[40] !== disableActionsFocus || $[41] !== isDisabled || $[42] !== t20 || $[43] !== theme || $[44] !== type) {
+	if ($[43] !== disableActionsFocus || $[44] !== isDisabled || $[45] !== t20 || $[46] !== theme || $[47] !== type) {
 		t21 = /* @__PURE__ */ jsx(ClearPressResponder, { children: /* @__PURE__ */ jsx(ItemActionProvider, {
 			type,
 			theme,
@@ -309,15 +323,15 @@ function ItemActionsWrapper(props) {
 			isDisabled,
 			children: t20
 		}) });
-		$[40] = disableActionsFocus;
-		$[41] = isDisabled;
-		$[42] = t20;
-		$[43] = theme;
-		$[44] = type;
-		$[45] = t21;
-	} else t21 = $[45];
+		$[43] = disableActionsFocus;
+		$[44] = isDisabled;
+		$[45] = t20;
+		$[46] = theme;
+		$[47] = type;
+		$[48] = t21;
+	} else t21 = $[48];
 	let t22;
-	if ($[46] !== finalMods || $[47] !== hoverProps || $[48] !== size || $[49] !== styles || $[50] !== t14 || $[51] !== t18 || $[52] !== t19 || $[53] !== t21 || $[54] !== theme || $[55] !== type) {
+	if ($[49] !== finalMods || $[50] !== hoverProps || $[51] !== size || $[52] !== styles || $[53] !== t14 || $[54] !== t18 || $[55] !== t19 || $[56] !== t21 || $[57] !== theme || $[58] !== type) {
 		t22 = /* @__PURE__ */ jsxs(ItemActionsWrapperElement, {
 			...hoverProps,
 			variant: t14,
@@ -329,18 +343,18 @@ function ItemActionsWrapper(props) {
 			style: t18,
 			children: [t19, t21]
 		});
-		$[46] = finalMods;
-		$[47] = hoverProps;
-		$[48] = size;
-		$[49] = styles;
-		$[50] = t14;
-		$[51] = t18;
-		$[52] = t19;
-		$[53] = t21;
-		$[54] = theme;
-		$[55] = type;
-		$[56] = t22;
-	} else t22 = $[56];
+		$[49] = finalMods;
+		$[50] = hoverProps;
+		$[51] = size;
+		$[52] = styles;
+		$[53] = t14;
+		$[54] = t18;
+		$[55] = t19;
+		$[56] = t21;
+		$[57] = theme;
+		$[58] = type;
+		$[59] = t22;
+	} else t22 = $[59];
 	return t22;
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"ItemActionsWrapper.js","names":["ClearPressResponder","Mods","Styles","tasty","CSSProperties","HTMLAttributes","ReactNode","useLayoutEffect","useMemo","useRef","useState","useFocusWithin","useHover","ITEM_RESTING_COLOR_VARIANTS","resolveItemVariant","ROW_STATE_ALIASES","CubeItemProps","DisplayTransition","ItemActionProvider","ItemActionsWrapperElement","variants","styles","display","position","placeContent","placeItems","$size","Actions","$","inset","gap","pointerEvents","padding","height","opacity","translate","transition","ActionsChild","ActionIcon","flexShrink","width","preset","ItemActionIcon","props","_c","t0","children","ItemActionsWrapperProps","state","showActions","actions","type","theme","size","isDisabled","disableActionsFocus","autoHideActions","preserveActionsSpace","mods","actionsProps","HTMLDivElement","ItemActionsWrapper","t1","t2","t3","t4","undefined","actionsRef","actionsWidth","setActionsWidth","areActionsVisible","setAreActionsVisible","t5","el","current","childElementCount","Math","round","offsetWidth","t6","isFocusWithin","setIsFocusWithin","hasPressed","setHasPressed","t7","Symbol","for","hoverProps","isHovered","t8","onFocusWithinChange","focusWithinProps","t9","actionsEl","checkPressed","querySelector","observer","MutationObserver","observe","attributes","attributeFilter","subtree","disconnect","t10","shouldShowActions","t11","t12","t13","disabled","finalMods","t14","t15","t16","t17","t18","t19","t20","phase","t21","ref","transitionRef","node","t22"],"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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"}
+{"version":3,"file":"ItemActionsWrapper.js","names":["ClearPressResponder","Mods","Styles","tasty","CSSProperties","HTMLAttributes","ReactNode","useLayoutEffect","useMemo","useRef","useState","useFocusWithin","useHover","ITEM_RESTING_COLOR_VARIANTS","resolveItemVariant","ROW_STATE_ALIASES","CubeItemProps","DisplayTransition","ItemActionProvider","ItemActionsWrapperElement","variants","styles","display","position","placeContent","placeItems","$size","Actions","$","inset","gap","pointerEvents","padding","height","opacity","translate","transition","ActionsChild","ActionIcon","flexShrink","width","preset","ItemActionIcon","props","_c","t0","children","ItemActionsWrapperProps","state","showActions","skipActionsWidthTransition","actions","type","theme","size","isDisabled","disableActionsFocus","autoHideActions","preserveActionsSpace","mods","actionsProps","HTMLDivElement","ItemActionsWrapper","t1","t2","t3","t4","undefined","actionsRef","actionsWidth","setActionsWidth","areActionsVisible","setAreActionsVisible","skipWidthTransition","setSkipWidthTransition","isMountPassRef","t5","el","current","isMountPass","childElementCount","Math","round","offsetWidth","t6","isFocusWithin","setIsFocusWithin","hasPressed","setHasPressed","t7","Symbol","for","hoverProps","isHovered","t8","onFocusWithinChange","focusWithinProps","t9","actionsEl","checkPressed","querySelector","observer","MutationObserver","observe","attributes","attributeFilter","subtree","disconnect","t10","shouldShowActions","t11","t12","t13","disabled","finalMods","t14","t15","t16","t17","t18","t19","t20","phase","t21","ref","transitionRef","node","t22"],"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, and\n   * whether the reserved width must jump rather than animate (`Item`'s\n   * `skipActionsWidthTransition`).\n   */\n  children: (state: {\n    showActions: boolean;\n    skipActionsWidthTransition: boolean;\n  }) => 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  const [skipWidthTransition, setSkipWidthTransition] = useState(false);\n  const isMountPassRef = useRef(true);\n\n  useLayoutEffect(() => {\n    const el = actionsRef.current;\n    const isMountPass = isMountPassRef.current;\n\n    isMountPassRef.current = false;\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      // The width a run reports on mount is where the row starts, not a change\n      // to it. The `offsetWidth` read has already resolved the row at 0px, so\n      // publishing with the transition on made every trigger grow by its caret\n      // after mounting — and a click in that window sized FilterPicker's popover\n      // from a half-grown trigger. A run revealed later still slides open.\n      if (isMountPass) setSkipWidthTransition(true);\n      setActionsWidth(width);\n    } else if (skipWidthTransition) {\n      // This pass's read resolved the row at its final width with the\n      // transition off, so turning it back on animates nothing.\n      setSkipWidthTransition(false);\n    }\n  }, [actions, areActionsVisible, actionsWidth, skipWidthTransition]);\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({\n        showActions: shouldShowActions,\n        skipActionsWidthTransition: skipWidthTransition,\n      })}\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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"}