@cube-dev/ui-kit 0.207.0 → 0.209.0

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

@@ -0,0 +1,215 @@
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { c } from "react/compiler-runtime";
+import { useEffectEvent, useRef } from "react";
+import { flushSync } from "react-dom";
+//#region src/components/actions/Button/AutoCollapseObserver.tsx
+const rows = /* @__PURE__ */ new WeakMap();
+const pendingRows = /* @__PURE__ */ new Set();
+/**
+* One observer for every row. It watches the rows alone: collapsing changes
+* the buttons' widths but not their row's, so it never reports its own
+* decision back.
+*/
+let rowObserver = null;
+function getRowObserver() {
+	rowObserver ??= new ResizeObserver((records) => {
+		for (const record of records) scheduleRowCheck(record.target);
+	});
+	return rowObserver;
+}
+function px(value) {
+	return parseFloat(value) || 0;
+}
+function getContentWidth(row) {
+	const style = getComputedStyle(row);
+	return row.clientWidth - px(style.paddingLeft) - px(style.paddingRight);
+}
+function getLabel(element) {
+	return element.querySelector(":scope > [data-element=\"Label\"]");
+}
+/**
+* Whether a button shows its collapsed form, whichever trigger collapsed it.
+* Read from the styles the collapse applies rather than from widths: a label
+* squeezed to nothing is not collapsed.
+*/
+function isShownCollapsed(element, label) {
+	if (element.dataset.collapse === "label") {
+		const full = label.querySelector(":scope > [data-element=\"FullLabel\"]");
+		return !!full && getComputedStyle(full).display === "none";
+	}
+	return getComputedStyle(label).maxWidth === "0px";
+}
+/**
+* How much wider the row has to be for its expanded buttons to show their
+* labels whole: what their labels cut off, plus what overflows the row. A
+* button another trigger collapsed has no label on show, so it adds nothing.
+*/
+function getShortfall(row, state) {
+	let shortfall = Math.max(0, row.scrollWidth - row.clientWidth);
+	for (const { element } of state.entries) {
+		const label = getLabel(element);
+		if (!label || isShownCollapsed(element, label)) continue;
+		shortfall += Math.max(0, label.scrollWidth - label.clientWidth);
+	}
+	return shortfall;
+}
+/** Whether the row's buttons should be collapsed now. */
+function decide(row, state) {
+	const width = getContentWidth(row);
+	if (state.isStale) state.neededWidth = void 0;
+	if (state.isCollapsed) return state.neededWidth !== void 0 && width + .5 < state.neededWidth;
+	const shortfall = getShortfall(row, state);
+	if (shortfall <= 0) return false;
+	state.neededWidth = Math.max(state.neededWidth ?? 0, width + shortfall);
+	return true;
+}
+/**
+* Checks every queued row and applies the decisions in one synchronous render,
+* before paint, as `useAutoTooltip` applies its overflow verdicts. A row that
+* expanded is checked once more, which can only collapse it again.
+*/
+function runRowChecks() {
+	const queued = Array.from(pendingRows);
+	pendingRows.clear();
+	const changes = [];
+	const expanded = [];
+	for (const row of queued) {
+		const state = rows.get(row);
+		if (!state || !state.entries.size || !row.isConnected) continue;
+		const wasCollapsed = state.isCollapsed;
+		const isCollapsed = decide(row, state);
+		state.isCollapsed = isCollapsed;
+		state.isStale = false;
+		if (wasCollapsed && !isCollapsed) expanded.push(row);
+		for (const entry of state.entries) if (entry.isCollapsed !== isCollapsed) changes.push([entry, isCollapsed]);
+	}
+	if (changes.length) flushSync(() => {
+		for (const [entry, isCollapsed] of changes) {
+			entry.isCollapsed = isCollapsed;
+			entry.notify(isCollapsed);
+		}
+	});
+	for (const row of expanded) scheduleRowCheck(row);
+}
+function scheduleRowCheck(row, isStale = false) {
+	const state = rows.get(row);
+	if (!state) return;
+	if (isStale) state.isStale = true;
+	if (!pendingRows.size) queueMicrotask(runRowChecks);
+	pendingRows.add(row);
+}
+function joinRow(row, element, notify) {
+	let state = rows.get(row);
+	if (!state) {
+		const childObserver = new MutationObserver(() => scheduleRowCheck(row, true));
+		state = {
+			entries: /* @__PURE__ */ new Set(),
+			isCollapsed: false,
+			neededWidth: void 0,
+			isStale: false,
+			childObserver
+		};
+		rows.set(row, state);
+		getRowObserver().observe(row);
+		childObserver.observe(row, { childList: true });
+	}
+	const entry = {
+		element,
+		notify,
+		isCollapsed: false
+	};
+	const joined = state;
+	joined.entries.add(entry);
+	scheduleRowCheck(row, true);
+	return () => {
+		joined.entries.delete(entry);
+		if (joined.entries.size) scheduleRowCheck(row, true);
+		else {
+			rows.delete(row);
+			rowObserver?.unobserve(row);
+			joined.childObserver.disconnect();
+		}
+	};
+}
+/**
+* Renders nothing. `Button` mounts it only with `autoCollapse`, so a button
+* without the prop runs none of this.
+*/
+function AutoCollapseObserver(t0) {
+	const $ = c(13);
+	const { targetRef, contentKey, isLabelCut, onChange } = t0;
+	let t1;
+	if ($[0] !== onChange) {
+		t1 = (isCollapsed) => {
+			onChange(isCollapsed);
+		};
+		$[0] = onChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	const notify = useEffectEvent(t1);
+	const rowRef = useRef(null);
+	let t2;
+	if ($[2] !== notify || $[3] !== targetRef) {
+		t2 = () => {
+			let leave;
+			let isActive = true;
+			queueMicrotask(() => {
+				const element = targetRef.current;
+				const row = element?.parentElement;
+				if (!isActive || !element || !row) return;
+				rowRef.current = row;
+				leave = joinRow(row, element, (isCollapsed_0) => notify(isCollapsed_0));
+			});
+			return () => {
+				isActive = false;
+				rowRef.current = null;
+				leave?.();
+				notify(false);
+			};
+		};
+		$[2] = notify;
+		$[3] = targetRef;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== targetRef) {
+		t3 = [targetRef];
+		$[5] = targetRef;
+		$[6] = t3;
+	} else t3 = $[6];
+	useLayoutEffect$1(t2, t3);
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			if (rowRef.current) scheduleRowCheck(rowRef.current, true);
+		};
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== contentKey) {
+		t5 = [contentKey];
+		$[8] = contentKey;
+		$[9] = t5;
+	} else t5 = $[9];
+	useLayoutEffect$1(t4, t5);
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => {
+			if (rowRef.current) scheduleRowCheck(rowRef.current);
+		};
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== isLabelCut) {
+		t7 = [isLabelCut];
+		$[11] = isLabelCut;
+		$[12] = t7;
+	} else t7 = $[12];
+	useLayoutEffect$1(t6, t7);
+	return null;
+}
+//#endregion
+export { AutoCollapseObserver };
+
+//# sourceMappingURL=AutoCollapseObserver.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoCollapseObserver.js","names":["RefObject","useEffectEvent","useRef","flushSync","useLayoutEffect","RowEntry","element","HTMLElement","notify","isCollapsed","RowState","entries","Set","neededWidth","isStale","childObserver","MutationObserver","rows","WeakMap","pendingRows","rowObserver","ResizeObserver","getRowObserver","records","record","scheduleRowCheck","target","px","value","parseFloat","getContentWidth","row","style","getComputedStyle","clientWidth","paddingLeft","paddingRight","getLabel","querySelector","isShownCollapsed","label","dataset","collapse","full","display","maxWidth","getShortfall","state","shortfall","Math","max","scrollWidth","decide","width","undefined","runRowChecks","queued","Array","from","clear","changes","expanded","get","size","isConnected","wasCollapsed","push","entry","length","queueMicrotask","add","joinRow","set","observe","childList","joined","delete","unobserve","disconnect","AutoCollapseObserverProps","targetRef","contentKey","isLabelCut","onChange","AutoCollapseObserver","t0","$","_c","t1","rowRef","t2","leave","isActive","current","parentElement","isCollapsed_0","t3","t4","Symbol","for","t5","t6","t7","_c"],"sources":["../../../../src/components/actions/Button/AutoCollapseObserver.tsx"],"sourcesContent":["import { RefObject, useEffectEvent, useRef } from 'react';\nimport { flushSync } from 'react-dom';\n\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\n\n/**\n * Collapses the `Button`s with `autoCollapse` in a row while the row can't fit\n * them expanded, and expands them once it can. The row is the button's parent\n * element, and its buttons collapse together.\n *\n * The decision reads the buttons, not their siblings:\n *\n * - **Expanded**, the row is too narrow when one of its buttons' labels is cut\n *   off, or the row overflows. The row then collapses its buttons, and\n *   remembers how wide it would have had to be: its width plus everything that\n *   was cut off.\n * - **Collapsed**, the row expands its buttons once it is that wide. The freed\n *   width may have gone to a sibling that grows or to an auto margin, so\n *   adding up the siblings' widths would never show the row fitting again.\n * - **After expanding**, the row checks again, before paint. If the buttons\n *   are cut off after all, they collapse again with the larger width\n *   remembered, so the estimate only grows and the decision settles.\n *\n * When something the needed width depends on changes while collapsed (a\n * button's content, a child added or removed), the remembered width is stale:\n * the row expands, checks and collapses again if it has to, all before paint.\n *\n * A row as wide as its content always fits, so its buttons never collapse: its\n * width has to come from its container (a block, `flex: 1`, a fixed width).\n * Wrapping and vertical rows give their buttons room by wrapping or stacking,\n * so their buttons never collapse either.\n */\n\ninterface RowEntry {\n  element: HTMLElement;\n  notify: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\ninterface RowState {\n  entries: Set<RowEntry>;\n  isCollapsed: boolean;\n  /** The row's content width at which its buttons fit expanded. */\n  neededWidth: number | undefined;\n  /** The needed width may be wrong: try expanded, then check. */\n  isStale: boolean;\n  /** Children added or removed change what the row needs. */\n  childObserver: MutationObserver;\n}\n\nconst rows = new WeakMap<HTMLElement, RowState>();\nconst pendingRows = new Set<HTMLElement>();\n\n/**\n * One observer for every row. It watches the rows alone: collapsing changes\n * the buttons' widths but not their row's, so it never reports its own\n * decision back.\n */\nlet rowObserver: ResizeObserver | null = null;\n\nfunction getRowObserver() {\n  rowObserver ??= new ResizeObserver((records) => {\n    for (const record of records) {\n      scheduleRowCheck(record.target as HTMLElement);\n    }\n  });\n\n  return rowObserver;\n}\n\nfunction px(value: string) {\n  return parseFloat(value) || 0;\n}\n\nfunction getContentWidth(row: HTMLElement) {\n  const style = getComputedStyle(row);\n\n  return row.clientWidth - px(style.paddingLeft) - px(style.paddingRight);\n}\n\nfunction getLabel(element: HTMLElement) {\n  return element.querySelector<HTMLElement>(':scope > [data-element=\"Label\"]');\n}\n\n/**\n * Whether a button shows its collapsed form, whichever trigger collapsed it.\n * Read from the styles the collapse applies rather than from widths: a label\n * squeezed to nothing is not collapsed.\n */\nfunction isShownCollapsed(element: HTMLElement, label: HTMLElement) {\n  if (element.dataset.collapse === 'label') {\n    const full = label.querySelector<HTMLElement>(\n      ':scope > [data-element=\"FullLabel\"]',\n    );\n\n    return !!full && getComputedStyle(full).display === 'none';\n  }\n\n  return getComputedStyle(label).maxWidth === '0px';\n}\n\n/**\n * How much wider the row has to be for its expanded buttons to show their\n * labels whole: what their labels cut off, plus what overflows the row. A\n * button another trigger collapsed has no label on show, so it adds nothing.\n */\nfunction getShortfall(row: HTMLElement, state: RowState) {\n  let shortfall = Math.max(0, row.scrollWidth - row.clientWidth);\n\n  for (const { element } of state.entries) {\n    const label = getLabel(element);\n\n    if (!label || isShownCollapsed(element, label)) continue;\n\n    shortfall += Math.max(0, label.scrollWidth - label.clientWidth);\n  }\n\n  return shortfall;\n}\n\n/** Whether the row's buttons should be collapsed now. */\nfunction decide(row: HTMLElement, state: RowState) {\n  const width = getContentWidth(row);\n\n  // What the row remembered was measured on content that has since changed.\n  if (state.isStale) state.neededWidth = undefined;\n\n  if (state.isCollapsed) {\n    // Half a pixel of slack for sub-pixel widths, so an exact fit expands.\n    return state.neededWidth !== undefined && width + 0.5 < state.neededWidth;\n  }\n\n  const shortfall = getShortfall(row, state);\n\n  if (shortfall <= 0) return false;\n\n  state.neededWidth = Math.max(state.neededWidth ?? 0, width + shortfall);\n\n  return true;\n}\n\n/**\n * Checks every queued row and applies the decisions in one synchronous render,\n * before paint, as `useAutoTooltip` applies its overflow verdicts. A row that\n * expanded is checked once more, which can only collapse it again.\n */\nfunction runRowChecks() {\n  const queued = Array.from(pendingRows);\n\n  pendingRows.clear();\n\n  const changes: [RowEntry, boolean][] = [];\n  const expanded: HTMLElement[] = [];\n\n  for (const row of queued) {\n    const state = rows.get(row);\n\n    if (!state || !state.entries.size || !row.isConnected) continue;\n\n    const wasCollapsed = state.isCollapsed;\n    const isCollapsed = decide(row, state);\n\n    state.isCollapsed = isCollapsed;\n    state.isStale = false;\n    if (wasCollapsed && !isCollapsed) expanded.push(row);\n\n    for (const entry of state.entries) {\n      if (entry.isCollapsed !== isCollapsed) changes.push([entry, isCollapsed]);\n    }\n  }\n\n  if (changes.length) {\n    flushSync(() => {\n      for (const [entry, isCollapsed] of changes) {\n        entry.isCollapsed = isCollapsed;\n        entry.notify(isCollapsed);\n      }\n    });\n  }\n\n  for (const row of expanded) scheduleRowCheck(row);\n}\n\nfunction scheduleRowCheck(row: HTMLElement, isStale = false) {\n  const state = rows.get(row);\n\n  if (!state) return;\n  if (isStale) state.isStale = true;\n  if (!pendingRows.size) queueMicrotask(runRowChecks);\n\n  pendingRows.add(row);\n}\n\nfunction joinRow(\n  row: HTMLElement,\n  element: HTMLElement,\n  notify: RowEntry['notify'],\n) {\n  let state = rows.get(row);\n\n  if (!state) {\n    const childObserver = new MutationObserver(() =>\n      scheduleRowCheck(row, true),\n    );\n\n    state = {\n      entries: new Set(),\n      isCollapsed: false,\n      neededWidth: undefined,\n      isStale: false,\n      childObserver,\n    };\n    rows.set(row, state);\n    getRowObserver().observe(row);\n    childObserver.observe(row, { childList: true });\n  }\n\n  const entry: RowEntry = { element, notify, isCollapsed: false };\n  const joined = state;\n\n  joined.entries.add(entry);\n  scheduleRowCheck(row, true);\n\n  return () => {\n    joined.entries.delete(entry);\n\n    if (joined.entries.size) {\n      // The row may fit its remaining buttons now.\n      scheduleRowCheck(row, true);\n    } else {\n      rows.delete(row);\n      rowObserver?.unobserve(row);\n      joined.childObserver.disconnect();\n    }\n  };\n}\n\nexport interface AutoCollapseObserverProps {\n  /** The button element; its parent is the measured row. */\n  targetRef: RefObject<HTMLElement | null>;\n  /**\n   * Changes whenever the button's full width can: its label, short label,\n   * icons, size, and whether another trigger collapses it.\n   */\n  contentKey: string;\n  /**\n   * Whether the button's label is cut off, from its automatic tooltip. A\n   * sibling that grows squeezes the button without resizing the row.\n   */\n  isLabelCut: boolean;\n  onChange: (isCollapsed: boolean) => void;\n}\n\n/**\n * Renders nothing. `Button` mounts it only with `autoCollapse`, so a button\n * without the prop runs none of this.\n */\nexport function AutoCollapseObserver({\n  targetRef,\n  contentKey,\n  isLabelCut,\n  onChange,\n}: AutoCollapseObserverProps) {\n  const notify = useEffectEvent((isCollapsed: boolean) => {\n    onChange(isCollapsed);\n  });\n  // The row joined. The button's ref can't be read from this child's layout\n  // effects: on every update React detaches the button's callback ref before\n  // they run and attaches it again only after them.\n  const rowRef = useRef<HTMLElement | null>(null);\n\n  useLayoutEffect(() => {\n    let leave: (() => void) | undefined;\n    let isActive = true;\n\n    // The button's ref is attached after this child's layout effect, so the\n    // row is joined once the commit has finished, still before paint.\n    queueMicrotask(() => {\n      const element = targetRef.current;\n      const row = element?.parentElement;\n\n      if (!isActive || !element || !row) return;\n\n      rowRef.current = row;\n      leave = joinRow(row, element, (isCollapsed) => notify(isCollapsed));\n    });\n\n    return () => {\n      isActive = false;\n      rowRef.current = null;\n      leave?.();\n      notify(false);\n    };\n  }, [targetRef]);\n\n  // What the button needs changed, so what the row remembers may be wrong.\n  // Joining checks the row anyway, so before that there is nothing to do.\n  useLayoutEffect(() => {\n    if (rowRef.current) scheduleRowCheck(rowRef.current, true);\n  }, [contentKey]);\n\n  // The row didn't resize, but the button may no longer fit it.\n  useLayoutEffect(() => {\n    if (rowRef.current) scheduleRowCheck(rowRef.current);\n  }, [isLabelCut]);\n\n  return null;\n}\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 
 import { CubeTooltipProviderProps } from "../../overlays/Tooltip/TooltipProvider.js";
 import { DynamicIcon } from "../../../utils/react/resolveIcon.js";
-import "../../../utils/react/index.js";
 import { CubeActionProps } from "../Action/Action.js";
 import { Mods, Styles } from "@tenphi/tasty";
+import { ReactNode } from "react";
 import { Placement } from "react-aria";
 //#region src/components/actions/Button/Button.d.ts
 /** Known modifiers for Button component */
@@ -17,6 +17,13 @@ export type ButtonMods = Mods<{
   'single-icon'?: boolean;
   'text-only'?: boolean;
   'raw-children'?: boolean;
+  /**
+   * Collapsed by `isCollapsed` or `autoCollapse`; `collapseState` collapses
+   * through CSS instead.
+   */
+  collapsed?: boolean;
+  /** What a collapsing button collapses to: its icon, or its `shortLabel`. */
+  collapse?: 'icon' | 'label';
 }>;
 export interface CubeButtonProps extends CubeActionProps {
   icon?: DynamicIcon<ButtonMods>;
@@ -36,6 +43,36 @@ export interface CubeButtonProps extends CubeActionProps {
    * A `link` button and the joined edges inside a `Button.Split` keep their own radius.
    */
   shape?: 'button' | 'card' | 'sharp' | 'pill';
+  /**
+   * When the button collapses, so it fits a narrow window or container:
+   * - `true` - On `@mobile`, a viewport narrower than 920px
+   * - a string - Any state or condition, such as `'@compact'`,
+   *   `'@(page, w < 864px)'` or `'@media(w < 600px)'`. A container condition
+   *   needs that container around the button.
+   *
+   * Collapsed, a button with an icon shows only the icon: its label stays its
+   * accessible name and shows as its tooltip. A `shortLabel` replaces the label
+   * instead. The button collapses when any of `collapseState`, `isCollapsed`
+   * and `autoCollapse` says so.
+   */
+  collapseState?: boolean | string;
+  /**
+   * Collapses the button from JavaScript, as `collapseState` does from CSS.
+   */
+  isCollapsed?: boolean;
+  /**
+   * Collapses the button when the row it sits in, its parent element, can't
+   * fit every child at full width, and expands it when the row can. It
+   * follows the real width of the labels, so it holds in every locale. The
+   * row's width has to come from its own container: a row as wide as its
+   * content always fits.
+   */
+  autoCollapse?: boolean;
+  /**
+   * The label shown while the button is collapsed, beside its icon if it has
+   * one. Without it, a collapsed button shows only its icon.
+   */
+  shortLabel?: ReactNode;
   /**
    * Tooltip content and configuration:
    * - string: simple tooltip text

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

@@ -1,23 +1,24 @@
-/** @license MIT | @cube-dev/ui-kit v0.207.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.209.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
-import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";
-import { useDismissParentPopover } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { resolveIcon } from "../../../utils/react/resolveIcon.js";
-import { useWarn } from "../../../_internal/hooks/use-warn.js";
-import { useIsFirstRender } from "../../../_internal/hooks/use-is-first-render.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { useAutoTooltip } from "../../content/use-auto-tooltip.js";
 import { CURRENT_CLEAR_STYLES, CURRENT_LINK_STYLES, CURRENT_OUTLINE_2_STYLES, CURRENT_OUTLINE_STYLES, CURRENT_PRIMARY_STYLES, DANGER_CLEAR_STYLES, DANGER_LINK_STYLES, DANGER_OUTLINE_2_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_LINK_STYLES, DEFAULT_OUTLINE_2_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, NOTE_CLEAR_STYLES, NOTE_LINK_STYLES, NOTE_OUTLINE_2_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_LINK_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_LINK_STYLES, SUCCESS_OUTLINE_2_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, WARNING_CLEAR_STYLES, WARNING_LINK_STYLES, WARNING_OUTLINE_2_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES } from "../../../data/item-themes.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";
 import { mergeTooltipFocusProps } from "../../overlays/Tooltip/split-trigger-props.js";
+import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useAction } from "../use-action.js";
+import { resolveIcon } from "../../../utils/react/resolveIcon.js";
 import { IconSwitch } from "../../helpers/IconSwitch/IconSwitch.js";
+import { useIsFirstRender } from "../../../_internal/hooks/use-is-first-render.js";
+import { useDismissParentPopover } from "../../../utils/react/usePopoverSync.js";
 import { useButtonSplitContext } from "../ButtonSplit/context.js";
+import { AutoCollapseObserver } from "./AutoCollapseObserver.js";
 import { CONTAINER_STYLES, TEXT_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
 import { Children, forwardRef, isValidElement, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/actions/Button/Button.tsx
 const BUTTON_SIZE_VALUES = [
 	"xsmall",
@@ -63,10 +64,12 @@ const DEFAULT_BUTTON_STYLES = {
 		"raw-children & !has-icons": "$block-padding $inline-padding $block-padding $inline-padding",
 		"type=link": "0"
 	},
+	"@collapsed": "collapsed",
 	width: {
-		"": "min $size",
+		_: "min $size",
 		"has-icon & has-right-icon": "min ($size * 2 - 2bw)",
 		"single-icon": "fixed $size",
+		"collapse=icon & @collapsed & !has-right-icon": "fixed $size",
 		"type=link": "min 1ch"
 	},
 	height: {
@@ -86,7 +89,8 @@ const DEFAULT_BUTTON_STYLES = {
 	},
 	margin: {
 		"": 0,
-		"@parent(button-split, >) & !:first-child & (type=outline | type=outline-2 | type=primary)": "-1bw left"
+		"@parent(button-split, >) & !:first-child & (type=outline | type=outline-2)": "-1bw left",
+		"@parent(button-split, >) & !:first-child & type=primary": "1bw left"
 	},
 	zIndex: {
 		"@parent(button-split, >) & :hover": 1,
@@ -154,12 +158,30 @@ const DEFAULT_BUTTON_STYLES = {
 		whiteSpace: "nowrap",
 		overflow: "hidden",
 		textOverflow: "ellipsis",
-		width: "0 100%",
+		width: {
+			_: "0 100%",
+			"collapse=icon & @collapsed": "fixed 0px"
+		},
 		textAlign: "center",
 		transition: "theme, padding",
 		padding: {
-			"": "$block-padding $right-padding $block-padding $left-padding",
-			"type=link": "0"
+			_: "$block-padding $right-padding $block-padding $left-padding",
+			"type=link": "0",
+			"collapse=icon & @collapsed": 0
+		}
+	},
+	FullLabel: {
+		$: "> Label >",
+		hide: {
+			"": false,
+			"@collapsed": true
+		}
+	},
+	ShortLabel: {
+		$: "> Label >",
+		display: {
+			_: "none",
+			"@collapsed": "inline"
 		}
 	}
 };
@@ -205,7 +227,7 @@ const ButtonElement = tasty({
 });
 const Button = forwardRef(function Button(allProps, ref) {
 	const splitContext = useButtonSplitContext();
-	let { type, size: sizeProp, shape, label, children, theme = splitContext?.theme ?? "default", icon: iconProp, rightIcon: rightIconProp, mods, download, tooltip = true, defaultTooltipPlacement = "top", onPress: userOnPress, tokens, ...props } = allProps;
+	let { type, size: sizeProp, shape, label, children, theme = splitContext?.theme ?? "default", icon: iconProp, rightIcon: rightIconProp, mods, download, tooltip = true, defaultTooltipPlacement = "top", onPress: userOnPress, tokens, collapseState, isCollapsed, autoCollapse, shortLabel, ...props } = allProps;
 	type = type ?? splitContext?.type;
 	const size = sizeProp ?? splitContext?.size ?? (type === "link" ? "inline" : "medium");
 	const isExplicitlyDisabled = splitContext?.isDisabled || props.isDisabled;
@@ -228,7 +250,12 @@ const Button = forwardRef(function Button(allProps, ref) {
 		onPress: wrappedOnPress,
 		...label ? { label } : {}
 	}, ref);
-	const styles = extractStyles(props, STYLE_PROPS);
+	const collapseCondition = collapseState === true ? "@mobile" : collapseState || void 0;
+	const ownStyles = extractStyles(props, STYLE_PROPS);
+	const styles = collapseCondition ? {
+		"@collapsed": `collapsed | (${collapseCondition})`,
+		...ownStyles
+	} : ownStyles;
 	const isDisabledElement = actionProps.isDisabled;
 	delete actionProps.isDisabled;
 	const baseMods = useMemo(() => ({
@@ -267,6 +294,14 @@ const Button = forwardRef(function Button(allProps, ref) {
 	const singleIcon = !!((hasLeftIcon && !hasRightSlot || hasRightSlot && !hasLeftIcon) && !hasChildren);
 	const hasIcons = hasLeftIcon || hasRightSlot;
 	const rawChildren = !!(hasChildren && typeof children !== "string" && !Children.toArray(children).some((child) => typeof child === "string"));
+	const isCollapsible = !!collapseCondition || isCollapsed != null || !!autoCollapse;
+	const [isAutoCollapsed, setIsAutoCollapsed] = useState(false);
+	const isCollapsedByJs = !!isCollapsed || !!autoCollapse && isAutoCollapsed;
+	const collapse = !isCollapsible || !hasChildren || rawChildren ? void 0 : shortLabel != null ? "label" : hasLeftSlot ? "icon" : void 0;
+	useWarn(isCollapsible && hasChildren && !collapse, {
+		key: ["button-nothing-to-collapse", rawChildren],
+		args: ["Button:", rawChildren ? "`collapseState`, `isCollapsed` and `autoCollapse` collapse only a text label; this button renders raw children." : "`collapseState`, `isCollapsed` or `autoCollapse` has nothing to collapse. Give the button an `icon` to collapse to, or a `shortLabel`."]
+	});
 	const [isIconShown, setIsIconShown] = useState(hasLeftIcon);
 	const [isRightIconShown, setIsRightIconShown] = useState(hasRightSlot);
 	const isFirstRender = useIsFirstRender();
@@ -280,7 +315,9 @@ const Button = forwardRef(function Button(allProps, ref) {
 		"single-icon": singleIcon,
 		"text-only": !!(hasChildren && typeof children === "string" && !hasIcons),
 		"raw-children": rawChildren,
-		"has-content": children != null
+		"has-content": children != null,
+		collapsed: isCollapsedByJs,
+		collapse
 	}), [
 		baseMods,
 		children,
@@ -291,9 +328,11 @@ const Button = forwardRef(function Button(allProps, ref) {
 		hasChildren,
 		rawChildren,
 		isIconShown,
-		isRightIconShown
+		isRightIconShown,
+		isCollapsedByJs,
+		collapse
 	]);
-	const { labelProps: finalLabelProps, labelRef, renderWithTooltip, isTooltipActive, isAutoTooltipEnabled } = useAutoTooltip({
+	const { labelProps: finalLabelProps, labelRef, renderWithTooltip, isTooltipActive, isAutoTooltipEnabled, isOverflowed } = useAutoTooltip({
 		tooltip,
 		children,
 		labelProps: void 0
@@ -361,7 +400,13 @@ const Button = forwardRef(function Button(allProps, ref) {
 					"data-element": "Label",
 					...finalLabelProps,
 					ref: labelRef,
-					children
+					children: collapse === "label" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						"data-element": "FullLabel",
+						children
+					}), /* @__PURE__ */ jsx("span", {
+						"data-element": "ShortLabel",
+						children: shortLabel
+					})] }) : children
 				})),
 				/* @__PURE__ */ jsx(DisplayTransition, {
 					isShown: hasRightSlot,
@@ -377,7 +422,23 @@ const Button = forwardRef(function Button(allProps, ref) {
 							children: rightIcon
 						})
 					})
-				})
+				}),
+				autoCollapse ? /* @__PURE__ */ jsx(AutoCollapseObserver, {
+					targetRef: buttonElementRef,
+					contentKey: [
+						typeof children === "string" ? children : "",
+						typeof shortLabel === "string" ? shortLabel : "",
+						size,
+						collapse,
+						hasLeftSlot,
+						hasRightSlot,
+						isLoading,
+						isCollapsed,
+						collapseCondition
+					].join("|"),
+					isLabelCut: isOverflowed,
+					onChange: setIsAutoCollapsed
+				}) : null
 			]
 		});
 	};