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

package/dist/components/actions/ItemButton/ItemButton.js

@@ -1,19 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
-import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
+import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useDismissParentPopover } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
-import { ITEM_RESTING_COLOR_VARIANTS, resolveItemVariant } from "../../../data/item-themes.js";
-import { ItemActionProvider } from "../ItemActionContext.js";
 import { useAction } from "../use-action.js";
 import { ItemAction } from "../ItemAction/ItemAction.js";
 import { ItemBadge } from "../../content/ItemBadge/ItemBadge.js";
 import { _Item } from "../../content/Item/Item.js";
+import { ItemActionsWrapper } from "../ItemActionsWrapper.js";
 import { tasty } from "@tenphi/tasty";
-import { forwardRef, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useFocusWithin, useHover } from "react-aria";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/actions/ItemButton/ItemButton.tsx
 const StyledItem = tasty(_Item, {
@@ -25,85 +22,9 @@ const StyledItem = tasty(_Item, {
 		placeContent: "center stretch"
 	}
 });
-const ActionsWrapper = tasty({
-	variants: ITEM_RESTING_COLOR_VARIANTS,
-	styles: {
-		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 1bw auto auto",
-				"type=card": "(1bw + .5x) (1bw + .5x) auto auto"
-			},
-			display: "flex",
-			gap: "1bw",
-			placeItems: "center",
-			placeContent: "center end",
-			pointerEvents: {
-				"": "auto",
-				"!actions-shown": "none"
-			},
-			padding: "0 $side-padding",
-			height: "min ($size - 2bw)",
-			opacity: {
-				"": 1,
-				"!actions-shown": 0
-			},
-			translate: {
-				"": "0 0",
-				"!actions-shown": ".5x 0"
-			},
-			transition: "theme, translate",
-			"$action-size": "min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))",
-			"$side-padding": "(($size - $action-size - 2bw) / 2)"
-		}
-	}
-});
 const ItemButton = forwardRef(function ItemButton(allProps, ref) {
-	const { mods, to, htmlType, as, type = "item", theme = "default", onPress, onPressStart: _onPressStart, onPressEnd: _onPressEnd, onPressChange: _onPressChange, onPressUp: _onPressUp, actions, size = "medium", wrapperStyles, autoHideActions = false, disableActionsFocus = false, isDisabled, isLoading = false, ...rest } = allProps;
+	const { mods, to, htmlType, as, type = "item", theme = "default", onPress, onPressStart: _onPressStart, onPressEnd: _onPressEnd, onPressChange: _onPressChange, onPressUp: _onPressUp, actions, actionsProps, size = "medium", wrapperStyles, autoHideActions = false, disableActionsFocus = false, isDisabled, isLoading = false, ...rest } = allProps;
 	const finalIsDisabled = isDisabled === true || isLoading && isDisabled !== false;
-	const actionsRef = useRef(null);
-	const [actionsWidth, setActionsWidth] = useState(0);
-	const [areActionsVisible, setAreActionsVisible] = useState(false);
-	const [areActionsShown, setAreActionsShown] = useState(false);
-	useLayoutEffect(() => {
-		if (actions && actionsRef.current) {
-			const width = Math.round(actionsRef.current.offsetWidth);
-			if (width !== actionsWidth) setActionsWidth(width);
-		}
-	}, [actions, areActionsVisible]);
-	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 dismissParentPopover = useDismissParentPopover();
 	const buttonElementRef = useRef(null);
 	const wrappedOnPress = useEvent((e) => {
@@ -123,23 +44,15 @@ const ItemButton = forwardRef(function ItemButton(allProps, ref) {
 		isDisabled: finalIsDisabled,
 		onPress: wrappedOnPress
 	}, ref);
-	const finalMods = useMemo(() => {
-		return {
-			...mods,
-			...shouldShowActions ? { "actions-shown": true } : null,
-			disabled: finalIsDisabled
-		};
-	}, [
-		mods,
-		shouldShowActions,
-		finalIsDisabled
-	]);
 	const combinedRef = useMemo(() => mergeRefs(actionProps.ref, buttonElementRef), [actionProps.ref]);
-	const button = /* @__PURE__ */ jsx(StyledItem, {
-		insideWrapper: !!actions,
-		showActions: shouldShowActions,
+	const hasHadActions = useRef(false);
+	if (actions !== void 0) hasHadActions.current = true;
+	const withWrapper = hasHadActions.current;
+	const renderButton = (showActions) => /* @__PURE__ */ jsx(StyledItem, {
+		insideWrapper: withWrapper,
+		showActions,
 		actions: actions ? true : void 0,
-		...mergeProps$1(rest, actionProps),
+		...mergeProps(rest, actionProps),
 		ref: combinedRef,
 		"data-popover-dismiss": "",
 		htmlType: actionProps.type,
@@ -149,51 +62,20 @@ const ItemButton = forwardRef(function ItemButton(allProps, ref) {
 		isLoading,
 		isDisabled
 	});
-	if (actions) return /* @__PURE__ */ jsxs(ActionsWrapper, {
-		...hoverProps,
-		variant: resolveItemVariant(theme, type),
-		"data-size": size,
-		"data-type": type,
-		"data-theme": theme,
-		mods: finalMods,
+	if (withWrapper) return /* @__PURE__ */ jsx(ItemActionsWrapper, {
+		type,
+		theme,
+		size,
+		mods,
 		styles: wrapperStyles,
-		style: {
-			"--actions-width": areActionsVisible || !autoHideActions ? `${actionsWidth}px` : "0px",
-			...typeof size === "number" && { "--size": `${size}px` }
-		},
-		children: [button, /* @__PURE__ */ jsx(ItemActionProvider, {
-			type,
-			theme,
-			disableActionsFocus,
-			isDisabled: finalIsDisabled,
-			children: autoHideActions ? /* @__PURE__ */ jsx(DisplayTransition, {
-				exposeUnmounted: true,
-				isShown: shouldShowActions,
-				onPhaseChange: (phase) => {
-					setAreActionsVisible(phase !== "unmounted");
-				},
-				onToggle: (isShown) => {
-					setAreActionsShown(isShown);
-				},
-				children: ({ ref: transitionRef }) => {
-					return /* @__PURE__ */ jsx("div", {
-						...focusWithinProps,
-						ref: (node) => {
-							actionsRef.current = node;
-							transitionRef(node);
-						},
-						"data-element": "Actions",
-						children: actions
-					});
-				}
-			}) : /* @__PURE__ */ jsx("div", {
-				ref: actionsRef,
-				"data-element": "Actions",
-				children: actions
-			})
-		})]
+		actions,
+		actionsProps,
+		autoHideActions,
+		disableActionsFocus,
+		isDisabled: finalIsDisabled,
+		children: ({ showActions }) => renderButton(showActions)
 	});
-	return button;
+	return renderButton(false);
 });
 const _ItemButton = Object.assign(ItemButton, {
 	Action: ItemAction,

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

@@ -1 +1 @@
-{"version":3,"file":"ItemButton.js","names":["Item","mergeProps"],"sources":["../../../../src/components/actions/ItemButton/ItemButton.tsx"],"sourcesContent":["import { FocusableRef, PressEvent } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  forwardRef,\n  ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin, useHover } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport {\n  ITEM_RESTING_COLOR_VARIANTS,\n  resolveItemVariant,\n} from '../../../data/item-themes';\nimport {\n  mergeProps,\n  mergeRefs,\n  useDismissParentPopover,\n} from '../../../utils/react';\nimport { CubeItemProps, Item } from '../../content/Item';\nimport { ItemBadge } from '../../content/ItemBadge';\nimport { DisplayTransition } from '../../helpers';\nimport { CubeItemActionProps, ItemAction } from '../ItemAction';\nimport { ItemActionProvider } from '../ItemActionContext';\nimport { CubeUseActionProps, useAction } from '../use-action';\n\nexport interface CubeItemButtonProps\n  extends Omit<CubeItemProps, 'size'>,\n    Omit<CubeUseActionProps, 'as'> {\n  actions?: ReactNode;\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  wrapperStyles?: Styles;\n}\n\nconst StyledItem = tasty(Item, {\n  as: 'button',\n  type: 'item',\n  theme: 'default',\n  styles: {\n    recipe: 'reset button',\n    placeContent: 'center stretch',\n  },\n});\n\nconst ActionsWrapper = tasty({\n  // Actions default to the `current` type, which paints from the inherited\n  // `currentcolor` — but they are rendered as a SIBLING of the button 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    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      inset: {\n        '': '1bw 1bw auto auto',\n        'type=card': '(1bw + .5x) (1bw + .5x) auto auto',\n      },\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: {\n        '': 'auto',\n        '!actions-shown': 'none',\n      },\n      padding: '0 $side-padding',\n      height: 'min ($size - 2bw)',\n      opacity: {\n        '': 1,\n        '!actions-shown': 0,\n      },\n      translate: {\n        '': '0 0',\n        '!actions-shown': '.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});\n\nconst ItemButton = forwardRef(function ItemButton(\n  allProps: CubeItemButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const {\n    mods,\n    to,\n    htmlType,\n    as,\n    type = 'item',\n    theme = 'default',\n    onPress,\n    // Extract react-aria press callbacks to prevent them from leaking to DOM via rest.\n    // These are handled by useButton inside useAction.\n    onPressStart: _onPressStart,\n    onPressEnd: _onPressEnd,\n    onPressChange: _onPressChange,\n    onPressUp: _onPressUp,\n    actions,\n    size = 'medium',\n    wrapperStyles,\n    autoHideActions = false,\n    disableActionsFocus = false,\n    isDisabled,\n    isLoading = false,\n    ...rest\n  } = allProps as CubeItemButtonProps & {\n    as?: 'a' | 'button' | 'div' | 'span';\n  };\n\n  // Loading state makes the component disabled (same logic as Item)\n  const finalIsDisabled =\n    isDisabled === true || (isLoading && isDisabled !== false);\n\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWidth, setActionsWidth] = useState(0);\n  const [areActionsVisible, setAreActionsVisible] = useState(false);\n  const [areActionsShown, setAreActionsShown] = useState(false);\n\n  useLayoutEffect(() => {\n    if (actions && actionsRef.current) {\n      const width = Math.round(actionsRef.current.offsetWidth);\n      if (width !== actionsWidth) {\n        setActionsWidth(width);\n      }\n    }\n  }, [actions, areActionsVisible]);\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  // Default: pressing an ItemButton inside an open popover closes that\n  // popover. Opt-outs: `data-popover-trigger` on self (applied by\n  // FilterPicker / Picker / Select / MenuTrigger for their own triggers) and\n  // `data-popover-keep` on self or any ancestor. Modals don't subscribe.\n  const dismissParentPopover = useDismissParentPopover();\n  const buttonElementRef = useRef<HTMLElement | null>(null);\n\n  const wrappedOnPress = useEvent((e: PressEvent) => {\n    onPress?.(e);\n    const el = buttonElementRef.current;\n    if (!el) return;\n    if (el.hasAttribute('data-popover-trigger')) return;\n    if (el.closest('[data-popover-keep]')) return;\n    dismissParentPopover(el);\n  });\n\n  const { actionProps } = useAction(\n    {\n      ...(allProps as any),\n      htmlType,\n      to,\n      as,\n      mods,\n      isDisabled: finalIsDisabled,\n      onPress: wrappedOnPress,\n    },\n    ref,\n  );\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      disabled: finalIsDisabled,\n    };\n  }, [mods, shouldShowActions, finalIsDisabled]);\n\n  // Merge the useAction-supplied ref with our internal ref so the dismiss\n  // wrapper can read the rendered DOM node at press time.\n  const combinedRef = useMemo(\n    () => mergeRefs(actionProps.ref as any, buttonElementRef),\n    [actionProps.ref],\n  );\n\n  const button = (\n    <StyledItem\n      insideWrapper={!!actions}\n      showActions={shouldShowActions}\n      actions={actions ? true : undefined}\n      {...(mergeProps(rest, actionProps) as any)}\n      ref={combinedRef}\n      data-popover-dismiss=\"\"\n      htmlType={actionProps.type}\n      type={type}\n      theme={theme}\n      size={size}\n      isLoading={isLoading}\n      isDisabled={isDisabled}\n    />\n  );\n\n  if (actions) {\n    return (\n      <ActionsWrapper\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={wrapperStyles}\n        style={\n          {\n            '--actions-width':\n              areActionsVisible || !autoHideActions\n                ? `${actionsWidth}px`\n                : '0px',\n            ...(typeof size === 'number' && { '--size': `${size}px` }),\n          } as CSSProperties\n        }\n      >\n        {button}\n        <ItemActionProvider\n          type={type}\n          theme={theme}\n          disableActionsFocus={disableActionsFocus}\n          isDisabled={finalIsDisabled}\n        >\n          {autoHideActions ? (\n            <DisplayTransition\n              exposeUnmounted\n              isShown={shouldShowActions}\n              onPhaseChange={(phase) => {\n                setAreActionsVisible(phase !== 'unmounted');\n              }}\n              onToggle={(isShown) => {\n                setAreActionsShown(isShown);\n              }}\n            >\n              {({ ref: transitionRef }) => {\n                return (\n                  <div\n                    {...focusWithinProps}\n                    ref={(node: any) => {\n                      actionsRef.current = node;\n                      transitionRef(node);\n                    }}\n                    data-element=\"Actions\"\n                  >\n                    {actions}\n                  </div>\n                );\n              }}\n            </DisplayTransition>\n          ) : (\n            <div ref={actionsRef} data-element=\"Actions\">\n              {actions}\n            </div>\n          )}\n        </ItemActionProvider>\n      </ActionsWrapper>\n    );\n  }\n\n  return button;\n});\n\nconst _ItemButton = Object.assign(ItemButton, {\n  Action: ItemAction,\n  Badge: ItemBadge,\n});\n\nexport { _ItemButton as ItemButton };\nexport type {\n  CubeItemButtonProps as ItemButtonProps,\n  CubeItemActionProps as ItemActionProps,\n};\n"],"mappings":"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"}
+{"version":3,"file":"ItemButton.js","names":["Item"],"sources":["../../../../src/components/actions/ItemButton/ItemButton.tsx"],"sourcesContent":["import { FocusableRef, PressEvent } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, HTMLAttributes, ReactNode, useMemo, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport {\n  mergeProps,\n  mergeRefs,\n  useDismissParentPopover,\n} from '../../../utils/react';\nimport { CubeItemProps, Item } from '../../content/Item';\nimport { ItemBadge } from '../../content/ItemBadge';\nimport { CubeItemActionProps, ItemAction } from '../ItemAction';\nimport { ItemActionsWrapper } from '../ItemActionsWrapper';\nimport { CubeUseActionProps, useAction } from '../use-action';\n\nexport interface CubeItemButtonProps\n  extends Omit<CubeItemProps, 'size'>,\n    Omit<CubeUseActionProps, 'as'> {\n  /**\n   * The row's trailing controls, rendered beside the button rather than inside\n   * it. Pass `null` to keep an empty run — the row reserves no space for it, and\n   * the button is not remounted when the actions arrive later.\n   */\n  actions?: ReactNode;\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  wrapperStyles?: Styles;\n  /**\n   * Props spread on the actions run's container — `data-trigger-action` and\n   * friends. Only meaningful together with `actions`.\n   */\n  actionsProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nconst StyledItem = tasty(Item, {\n  as: 'button',\n  type: 'item',\n  theme: 'default',\n  styles: {\n    recipe: 'reset button',\n    placeContent: 'center stretch',\n  },\n});\n\nconst ItemButton = forwardRef(function ItemButton(\n  allProps: CubeItemButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const {\n    mods,\n    to,\n    htmlType,\n    as,\n    type = 'item',\n    theme = 'default',\n    onPress,\n    // Extract react-aria press callbacks to prevent them from leaking to DOM via rest.\n    // These are handled by useButton inside useAction.\n    onPressStart: _onPressStart,\n    onPressEnd: _onPressEnd,\n    onPressChange: _onPressChange,\n    onPressUp: _onPressUp,\n    actions,\n    actionsProps,\n    size = 'medium',\n    wrapperStyles,\n    autoHideActions = false,\n    disableActionsFocus = false,\n    isDisabled,\n    isLoading = false,\n    ...rest\n  } = allProps as CubeItemButtonProps & {\n    as?: 'a' | 'button' | 'div' | 'span';\n  };\n\n  // Loading state makes the component disabled (same logic as Item)\n  const finalIsDisabled =\n    isDisabled === true || (isLoading && isDisabled !== false);\n\n  // Default: pressing an ItemButton inside an open popover closes that\n  // popover. Opt-outs: `data-popover-trigger` on self (applied by\n  // FilterPicker / Picker / Select / MenuTrigger for their own triggers) and\n  // `data-popover-keep` on self or any ancestor. Modals don't subscribe.\n  const dismissParentPopover = useDismissParentPopover();\n  const buttonElementRef = useRef<HTMLElement | null>(null);\n\n  const wrappedOnPress = useEvent((e: PressEvent) => {\n    onPress?.(e);\n    const el = buttonElementRef.current;\n    if (!el) return;\n    if (el.hasAttribute('data-popover-trigger')) return;\n    if (el.closest('[data-popover-keep]')) return;\n    dismissParentPopover(el);\n  });\n\n  const { actionProps } = useAction(\n    {\n      ...(allProps as any),\n      htmlType,\n      to,\n      as,\n      mods,\n      isDisabled: finalIsDisabled,\n      onPress: wrappedOnPress,\n    },\n    ref,\n  );\n\n  // Merge the useAction-supplied ref with our internal ref so the dismiss\n  // wrapper can read the rendered DOM node at press time.\n  const combinedRef = useMemo(\n    () => mergeRefs(actionProps.ref as any, buttonElementRef),\n    [actionProps.ref],\n  );\n\n  // Once a row has had actions it keeps the wrapper, even after they go away.\n  // Adding or removing a DOM level around the button remounts it — losing focus,\n  // any running transition, and the element every ref in the tree is holding —\n  // and a row whose actions come and go with a permission or a loading flag\n  // would do that on every flip. The empty run costs nothing: it publishes a\n  // width of 0, so the row reserves no space for it.\n  //\n  // `null` is how a caller asks for the run up front — \"there is a run here, it\n  // just has nothing in it right now\" — so a row that knows its actions are\n  // coming never has to remount to receive them. Only `undefined` means the row\n  // has no run at all.\n  const hasHadActions = useRef(false);\n\n  if (actions !== undefined) {\n    hasHadActions.current = true;\n  }\n\n  const withWrapper = hasHadActions.current;\n\n  const renderButton = (showActions: boolean) => (\n    <StyledItem\n      // Two different questions. `insideWrapper` is \"am I laid out for a\n      // sibling run\", which stays true so the DOM does not restructure;\n      // `actions` is \"is there anything in that run to reserve width for\",\n      // which must go back to false when the run empties — it drives the\n      // two-square minimum width and the suffix's padding, and a row that\n      // reserved space for nothing would sit wider than it needs to.\n      insideWrapper={withWrapper}\n      showActions={showActions}\n      actions={actions ? true : undefined}\n      {...(mergeProps(rest, actionProps) as any)}\n      ref={combinedRef}\n      data-popover-dismiss=\"\"\n      htmlType={actionProps.type}\n      type={type}\n      theme={theme}\n      size={size}\n      isLoading={isLoading}\n      isDisabled={isDisabled}\n    />\n  );\n\n  if (withWrapper) {\n    return (\n      <ItemActionsWrapper\n        type={type}\n        theme={theme}\n        size={size as CubeItemProps['size']}\n        mods={mods}\n        styles={wrapperStyles}\n        actions={actions}\n        actionsProps={actionsProps}\n        autoHideActions={autoHideActions}\n        disableActionsFocus={disableActionsFocus}\n        isDisabled={finalIsDisabled}\n      >\n        {({ showActions }) => renderButton(showActions)}\n      </ItemActionsWrapper>\n    );\n  }\n\n  return renderButton(false);\n});\n\nconst _ItemButton = Object.assign(ItemButton, {\n  Action: ItemAction,\n  Badge: ItemBadge,\n});\n\nexport { _ItemButton as ItemButton };\nexport type {\n  CubeItemButtonProps as ItemButtonProps,\n  CubeItemActionProps as ItemActionProps,\n};\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,MAAM,aAAa,MAAMA,OAAM;CAC7B,IAAI;CACJ,MAAM;CACN,OAAO;CACP,QAAQ;EACN,QAAQ;EACR,cAAc;EACf;CACF,CAAC;AAEF,MAAM,aAAa,WAAW,SAAS,WACrC,UACA,KACA;CACA,MAAM,EACJ,MACA,IACA,UACA,IACA,OAAO,QACP,QAAQ,WACR,SAGA,cAAc,eACd,YAAY,aACZ,eAAe,gBACf,WAAW,YACX,SACA,cACA,OAAO,UACP,eACA,kBAAkB,OAClB,sBAAsB,OACtB,YACA,YAAY,OACZ,GAAG,SACD;CAKJ,MAAM,kBACJ,eAAe,QAAS,aAAa,eAAe;CAMtD,MAAM,uBAAuB,yBAAyB;CACtD,MAAM,mBAAmB,OAA2B,KAAK;CAEzD,MAAM,iBAAiB,UAAU,MAAkB;AACjD,YAAU,EAAE;EACZ,MAAM,KAAK,iBAAiB;AAC5B,MAAI,CAAC,GAAI;AACT,MAAI,GAAG,aAAa,uBAAuB,CAAE;AAC7C,MAAI,GAAG,QAAQ,sBAAsB,CAAE;AACvC,uBAAqB,GAAG;GACxB;CAEF,MAAM,EAAE,gBAAgB,UACtB;EACE,GAAI;EACJ;EACA;EACA;EACA;EACA,YAAY;EACZ,SAAS;EACV,EACD,IACD;CAID,MAAM,cAAc,cACZ,UAAU,YAAY,KAAY,iBAAiB,EACzD,CAAC,YAAY,IAAI,CAClB;CAaD,MAAM,gBAAgB,OAAO,MAAM;AAEnC,KAAI,YAAY,OACd,eAAc,UAAU;CAG1B,MAAM,cAAc,cAAc;CAElC,MAAM,gBAAgB,gBACpB,oBAAC;EAOC,eAAe;EACF;EACb,SAAS,UAAU,OAAO;EAC1B,GAAK,WAAW,MAAM,YAAY;EAClC,KAAK;EACL,wBAAqB;EACrB,UAAU,YAAY;EAChB;EACC;EACD;EACK;EACC;GACZ;AAGJ,KAAI,YACF,QACE,oBAAC;EACO;EACC;EACD;EACA;EACN,QAAQ;EACC;EACK;EACG;EACI;EACrB,YAAY;aAEV,EAAE,kBAAkB,aAAa,YAAY;GAC5B;AAIzB,QAAO,aAAa,MAAM;EAC1B;AAEF,MAAM,cAAc,OAAO,OAAO,YAAY;CAC5C,QAAQ;CACR,OAAO;CACR,CAAC"}

package/dist/components/actions/Link/Link.js

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

package/dist/components/actions/Menu/Menu.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _CollectionItem } from "../../CollectionItem.js";

package/dist/components/actions/Menu/MenuItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { filterCollectionItemProps } from "../../CollectionItem.js";
 import { _Item } from "../../content/Item/Item.js";

package/dist/components/actions/Menu/MenuSection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { MenuItem } from "./MenuItem.js";
 import { StyledMenu, StyledSection, StyledSectionHeading } from "./styled.js";

package/dist/components/actions/Menu/MenuTrigger.js

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

package/dist/components/actions/Menu/SubMenuTrigger.js

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

package/dist/components/actions/Menu/SubmenuTriggerContext.js

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import React, { useContext } from "react";
 
 //#region src/components/actions/Menu/context.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { DEFAULT_CLEAR_STYLES } from "../../../data/item-themes.js";
 import { Space } from "../../layout/Space.js";
 import { DEFAULT_BUTTON_STYLES } from "../Button/Button.js";

package/dist/components/actions/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { ItemActionProvider, useItemActionContext } from "./ItemActionContext.js";
 import { openLink, parseTo, performClickHandler, useAction } from "./use-action.js";
 import { ItemAction } from "./ItemAction/ItemAction.js";

package/dist/components/actions/use-action.js

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

package/dist/components/actions/use-anchored-menu.js

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

package/dist/components/actions/use-context-menu.js

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

package/dist/components/content/ActiveZone/ActiveZone.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";

package/dist/components/content/Alert/Alert.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import themes_default from "../../../data/themes.js";
 import { useAlert } from "./use-alert.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Alert/use-alert.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useDeprecationWarning } from "../../../_internal/hooks/use-deprecation-warning.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps } from "@tenphi/tasty";

package/dist/components/content/Avatar/Avatar.js

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

package/dist/components/content/Badge/Badge.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import themes_default from "../../../data/themes.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Card/Card.js

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

package/dist/components/content/Content.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useTimer } from "../../../_internal/hooks/use-timer/use-timer.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/content/CopySnippet/CopySnippet.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { _Tooltip } from "../../overlays/Tooltip/Tooltip.js";
 import { TooltipTrigger } from "../../overlays/Tooltip/TooltipTrigger.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/content/Disclosure/Disclosure.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";

package/dist/components/content/Divider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/Footer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/Header.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { CONTAINER_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/HotKeys/HotKeys.js

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

package/dist/components/content/InfoBadge/InfoBadge.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "../ItemBadge/ItemBadge.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/content/InlineInput/InlineInput.js

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

package/dist/components/content/Item/Item.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b54b6e8 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ef464b | Cube Dev Team */
 import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { resolveIcon } from "../../../utils/react/resolveIcon.js";
@@ -97,7 +97,7 @@ const ItemElement = tasty({
 		},
 		width: {
 			"": "min $size",
-			"has-icon & has-right-icon": "min ($size * 2)",
+			"has-icon & (has-right-icon | (has-actions & inside-wrapper))": "min ($size * 2)",
 			"size=inline": "min (1lh + 2bw)"
 		},
 		border: "#clear",
@@ -245,7 +245,7 @@ const ItemElement = tasty({
 			gridArea: "suffix",
 			padding: {
 				"": "$inline-padding right",
-				"has-right-icon": 0
+				"has-right-icon | (has-actions & inside-wrapper)": 0
 			}
 		},
 		Actions: {
@@ -258,7 +258,7 @@ const ItemElement = tasty({
 			placeSelf: "stretch",
 			padding: {
 				"": "0 $side-padding",
-				"inside-wrapper & !actions-shown": 0
+				"inside-wrapper": 0
 			},
 			boxSizing: "border-box",
 			height: "min ($size - 2bw)",
@@ -440,7 +440,7 @@ const Item = (props, ref) => {
 		tooltip,
 		children,
 		labelProps,
-		isDynamicLabel: !!actions
+		isDynamicLabel: !!actions || insideWrapper
 	});
 	const { isNativelyDisabled, isInert, inertProps } = getDisabledElementProps({
 		isDisabled: finalIsDisabled,