@cube-dev/ui-kit 0.0.0-canary-f786737 → 0.0.0-canary-140dab2

package/dist/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @cube-dev/ui-kit
 
+## 0.185.0
+
+### Minor Changes
+
+- [#1427](https://github.com/cube-js/cube-ui-kit/pull/1427) [`997e22cc`](https://github.com/cube-js/cube-ui-kit/commit/997e22cc5e9eb5c727f2eb6dec90280e435e3435) Thanks [@tenphi](https://github.com/tenphi)! - Add the `t4n` typography preset: 12px text at normal (400) weight, with `t4`'s 18px line height. `t4` is 500 so small text keeps its presence next to 14px body text, and until now it had no lighter option — the only 12px/400 preset was the monospace `s4`, so secondary metadata such as timestamps and counts needed `preset: 't4'` plus a hand-set `fontWeight: 400`. Use `preset: 't4n'` instead.
+
+- [#1428](https://github.com/cube-js/cube-ui-kit/pull/1428) [`4d7a65e6`](https://github.com/cube-js/cube-ui-kit/commit/4d7a65e63c1b8d555a4095c6de4cdcf9a91cf270) Thanks [@tenphi](https://github.com/tenphi)! - Add `TagInput`, a multi-value field whose values show as removable chips below a single-line input. Values are committed with Enter or a delimiter (a comma by default), and Enter never submits a surrounding form; pasted lists are split into chips, `validateTag` rejects a value with a message, `normalizeTag` rewrites typed values before they are checked, and `maxTags` caps the list. With `TagInput.Item` options it becomes a combobox that toggles several options in a row, and `allowsCustomValue` lets the user add values that are not in the list. Backspace in the empty input moves to the last chip and the next one removes it; Escape or typing on a chip goes back to the input. `isClearable` adds a button that clears the typed text, and `tagProps` sets per-chip props, including a label and `isDisabled` to lock a value. With `allowsCustomValue`, the custom values already added are listed with the options, so they can be unpicked there too. `inputMode` and `enterKeyHint` pick the virtual keyboard. The field value is a `string[]` and works with `Form` rules.
+
+- [#1428](https://github.com/cube-js/cube-ui-kit/pull/1428) [`4d7a65e6`](https://github.com/cube-js/cube-ui-kit/commit/4d7a65e63c1b8d555a4095c6de4cdcf9a91cf270) Thanks [@tenphi](https://github.com/tenphi)! - `TextInputBase` takes an `actions` slot for controls that always sit last in the suffix, after the validation and loading icons and after `suffix` in either position, such as a popover trigger.
+
+- [#1427](https://github.com/cube-js/cube-ui-kit/pull/1427) [`997e22cc`](https://github.com/cube-js/cube-ui-kit/commit/997e22cc5e9eb5c727f2eb6dec90280e435e3435) Thanks [@tenphi](https://github.com/tenphi)! - `TooltipProvider` takes a `qa` for the tooltip it renders, and so does every component's `tooltip` object: `<Button tooltip={{ title: 'Copy', qa: 'CopyTooltip' }}>`. Only `tooltipStyles` and `width` used to reach the tooltip, and `Tooltip` itself dropped the `qa` its props accept, so a test could only find a tooltip by `role="tooltip"` — which works while exactly one is open and never says whose it is.
+
+### Patch Changes
+
+- [#1429](https://github.com/cube-js/cube-ui-kit/pull/1429) [`694068ba`](https://github.com/cube-js/cube-ui-kit/commit/694068ba678ae34a8efe05017583a7afa4f7933c) Thanks [@tenphi](https://github.com/tenphi)! - Stop `useAutoTooltip` from setting its overflow verdict inside the mount effect. React 19 flushes a sync commit's passive effects before the commit returns, so an overflowing `Button`, `Item`, `TextItem`, `LayoutHeader`, `InlineInput` or `Radio` label made a nested update of every commit it mounted in. ag-grid-react 33 wraps every new row in `flushSync`, so a long table crashed with "Maximum update depth exceeded" once about 50 such rows mounted in one task, for example when it jumped back to its top. Labels now queue their checks for one shared microtask. It reads every pending label, then commits the verdicts that changed in a single `flushSync`, after the commit but still before paint and before any other task. The teardown moved from an unmount effect to the label's callback ref, so React 18 Strict Mode, which replays effects with refs still attached, no longer loses the measurement. After a synchronous `render` in a test, the verdict lands in a microtask: `await act(async () => …)` first, then look the label up, since turning the tooltip on remounts it under `TooltipProvider`.
+
+- [#1428](https://github.com/cube-js/cube-ui-kit/pull/1428) [`4d7a65e6`](https://github.com/cube-js/cube-ui-kit/commit/4d7a65e63c1b8d555a4095c6de4cdcf9a91cf270) Thanks [@tenphi](https://github.com/tenphi)! - Screen readers now announce the focused option while arrowing through `ComboBox`, `SearchComboBox`, `CommandTextArea` and `FilterListBox` options: `aria-activedescendant` pointed at an id no option had, and in `ComboBox` and `FilterListBox` it also stopped following the arrow keys. `FilterListBox`'s search input now names its list with `aria-controls`.
+
+- [#1428](https://github.com/cube-js/cube-ui-kit/pull/1428) [`4d7a65e6`](https://github.com/cube-js/cube-ui-kit/commit/4d7a65e63c1b8d555a4095c6de4cdcf9a91cf270) Thanks [@tenphi](https://github.com/tenphi)! - `ComboBox`, `SearchComboBox` and `CommandTextArea` no longer miss a blur when focus enters and leaves them within one animation frame, as it does in a fast automated test. Commit-on-blur and `onBlur` now run in that case too.
+
+- [#1427](https://github.com/cube-js/cube-ui-kit/pull/1427) [`997e22cc`](https://github.com/cube-js/cube-ui-kit/commit/997e22cc5e9eb5c727f2eb6dec90280e435e3435) Thanks [@tenphi](https://github.com/tenphi)! - A `Badge` or `Tag` in a field's `labelSuffix` no longer grows the label row by a pixel. The suffix was wrapped in a block, where an inline-level element sits in a line box whose strut added space under it, so the row measured 21px instead of 20px and the field below stepped out of line with its neighbours. A single-element suffix is now a flex item, centred on the row. Mixed content — text, a fragment, several elements — is wrapped in a `<span>` and keeps flowing inline, spaces included.
+
+- [#1427](https://github.com/cube-js/cube-ui-kit/pull/1427) [`997e22cc`](https://github.com/cube-js/cube-ui-kit/commit/997e22cc5e9eb5c727f2eb6dec90280e435e3435) Thanks [@tenphi](https://github.com/tenphi)! - `ItemButton` announces `isSelected` as `aria-pressed`, as its documentation says, instead of `aria-selected`. `aria-selected` is not a state of role `button`, so screen readers ignored it and a toggle or multi-select built from `ItemButton isSelected` read as a plain button. `isSelected={false}` renders `aria-pressed="false"`, so an unpressed toggle announces as one. As on `Button`, it is skipped for a link (`to`) and for a call site's own `role` — a tab or option keeps `aria-selected` — and also for a trigger that reports `aria-expanded`, such as `Disclosure.Trigger`. An explicit `aria-pressed` still wins. A selector that found a selected toggle `ItemButton` by `[aria-selected="true"]` should use `[aria-pressed="true"]`.
+
+- [#1427](https://github.com/cube-js/cube-ui-kit/pull/1427) [`997e22cc`](https://github.com/cube-js/cube-ui-kit/commit/997e22cc5e9eb5c727f2eb6dec90280e435e3435) Thanks [@tenphi](https://github.com/tenphi)! - `ListBox` and `FilterListBox` accept their documented style props in TypeScript: `height`, `width`, `flex`, `margin` and the rest of the base, outer and color groups. They were always applied at runtime, but the props type did not declare them, so `<ListBox height="20x">` failed to type-check and callers routed it through `styles` instead.
+
+- [#1430](https://github.com/cube-js/cube-ui-kit/pull/1430) [`b4d48336`](https://github.com/cube-js/cube-ui-kit/commit/b4d48336a8f4559f649e5852ebcd10a42a3cce3d) Thanks [@tenphi](https://github.com/tenphi)! - Fix runtime palette changes that stopped recoloring the app in 0.183.0. In the published build, a `setPaletteConfig()` call, or a `<Root palette>` that changed after mount, updated the palette store, but the page kept the tokens of its first render, so the whole UI stayed on the palette it loaded with. `usePaletteConfig()` likewise kept returning its first render's config, and `useColorTheme()` kept injecting a theme's old tokens after the palette changed. All three follow every change again. The bug was in the React Compiler build only, so tests against the source did not show it.
+
+- [#1427](https://github.com/cube-js/cube-ui-kit/pull/1427) [`997e22cc`](https://github.com/cube-js/cube-ui-kit/commit/997e22cc5e9eb5c727f2eb6dec90280e435e3435) Thanks [@tenphi](https://github.com/tenphi)! - Fix the caret of a `Select`, `Picker` or `FilterPicker` trigger not opening the dropdown. The trigger keeps an empty placeholder under its actions run to reserve that run's width, and the placeholder stopped every press that reached it. Once the run had been measured it sat right under the caret, so a press there only closed an open dropdown and never opened a closed one. The placeholder now lets presses through; real actions still keep a press on them from pressing the row. The same dead zone covered the padding and gaps of any `ItemButton`'s actions run.
+
+- [#1427](https://github.com/cube-js/cube-ui-kit/pull/1427) [`997e22cc`](https://github.com/cube-js/cube-ui-kit/commit/997e22cc5e9eb5c727f2eb6dec90280e435e3435) Thanks [@tenphi](https://github.com/tenphi)! - `Link`, `Button`, `ItemButton` and every other `to`-driven action no longer resolve a `!` or `@` prefixed `to` through the router. The rendered `href` was already correct, but the raw value was resolved too, so `<Link to="!https://cube.dev">` — the documented way to open an external URL in a new tab — made a `HashRouter` warn on every render. Only the stripped path is resolved now.
+
+- [#1427](https://github.com/cube-js/cube-ui-kit/pull/1427) [`997e22cc`](https://github.com/cube-js/cube-ui-kit/commit/997e22cc5e9eb5c727f2eb6dec90280e435e3435) Thanks [@tenphi](https://github.com/tenphi)! - Under React 19, a fragment passed as `Result`'s `title` or `subtitle`, or as a field's `description`, is wrapped like any other mixed content again: `Result` renders it in its heading styles instead of as bare text. The check that tells a fragment from a single element used `react-is@18`, which does not recognise React 19 elements, so every fragment was taken for a single element and left unwrapped.
+
 ## 0.184.0
 
 ### Minor Changes

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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.0.0-canary-f786737 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-140dab2 | 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;
 }