@cube-dev/ui-kit 0.201.0 → 0.203.0

package/dist/components/content/Divider/Divider.js

@@ -0,0 +1,159 @@
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { useSlotProps } from "../../../utils/react/Slots.js";
+import { c } from "react/compiler-runtime";
+import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
+import { forwardRef, useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useSeparator } from "react-aria";
+//#region src/components/content/Divider/Divider.tsx
+const STYLE_LIST = [
+	...BASE_STYLES,
+	...OUTER_STYLES,
+	...COLOR_STYLES
+];
+const DividerElement = tasty({
+	qa: "Divider",
+	styles: {
+		display: {
+			"": "block",
+			text: "grid"
+		},
+		gridColumns: {
+			"": "1fr auto 1fr",
+			vertical: "auto"
+		},
+		gridRows: {
+			"": false,
+			vertical: "1fr auto 1fr"
+		},
+		placeItems: {
+			"": "center stretch",
+			vertical: "stretch center"
+		},
+		gap: "1x",
+		preset: "c1",
+		width: {
+			"": false,
+			"vertical & !text": "1bw 1bw"
+		},
+		height: {
+			"": "1bw 1bw",
+			"vertical | text": false
+		},
+		alignSelf: {
+			"": false,
+			"vertical & !sized": "stretch"
+		},
+		fill: {
+			"": "#border",
+			text: "none"
+		},
+		border: "0",
+		margin: "0",
+		Line: {
+			width: {
+				"": false,
+				vertical: "1bw 1bw"
+			},
+			height: {
+				"": "1bw 1bw",
+				vertical: false
+			},
+			fill: "#border"
+		}
+	}
+});
+const Divider = forwardRef(function Divider(props, ref) {
+	const $ = c(25);
+	const allProps = useSlotProps(props, "divider");
+	const { mods, children, orientation: t0 } = allProps;
+	const orientation = t0 === void 0 ? "horizontal" : t0;
+	const labelId = useId();
+	const hasText = children != null && children !== false && children !== "";
+	const isVertical = orientation === "vertical";
+	const elementType = hasText || isVertical ? "div" : "hr";
+	let t1;
+	if ($[0] !== elementType || $[1] !== orientation) {
+		t1 = {
+			orientation,
+			elementType
+		};
+		$[0] = elementType;
+		$[1] = orientation;
+		$[2] = t1;
+	} else t1 = $[2];
+	const { separatorProps } = useSeparator(t1);
+	let t2;
+	if ($[3] !== allProps) {
+		t2 = extractStyles(allProps, STYLE_LIST);
+		$[3] = allProps;
+		$[4] = t2;
+	} else t2 = $[4];
+	const styles = t2;
+	const labelledBy = allProps["aria-labelledby"] ?? (hasText && !allProps["aria-label"] ? labelId : void 0);
+	let t3;
+	if ($[5] !== allProps) {
+		t3 = filterBaseProps(allProps, { eventProps: true });
+		$[5] = allProps;
+		$[6] = t3;
+	} else t3 = $[6];
+	const t4 = styles.height != null || styles.blockSize != null;
+	let t5;
+	if ($[7] !== hasText || $[8] !== isVertical || $[9] !== mods || $[10] !== t4) {
+		t5 = {
+			text: hasText,
+			vertical: isVertical,
+			sized: t4,
+			...mods
+		};
+		$[7] = hasText;
+		$[8] = isVertical;
+		$[9] = mods;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== children || $[13] !== hasText || $[14] !== labelId) {
+		t6 = hasText ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("div", { "data-element": "Line" }),
+			/* @__PURE__ */ jsx("div", {
+				id: labelId,
+				"aria-hidden": true,
+				children
+			}),
+			/* @__PURE__ */ jsx("div", { "data-element": "Line" })
+		] }) : null;
+		$[12] = children;
+		$[13] = hasText;
+		$[14] = labelId;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== elementType || $[17] !== labelledBy || $[18] !== ref || $[19] !== separatorProps || $[20] !== styles || $[21] !== t3 || $[22] !== t5 || $[23] !== t6) {
+		t7 = /* @__PURE__ */ jsx(DividerElement, {
+			...separatorProps,
+			...t3,
+			ref,
+			as: elementType,
+			"aria-labelledby": labelledBy,
+			mods: t5,
+			styles,
+			children: t6
+		});
+		$[16] = elementType;
+		$[17] = labelledBy;
+		$[18] = ref;
+		$[19] = separatorProps;
+		$[20] = styles;
+		$[21] = t3;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t7;
+	} else t7 = $[24];
+	return t7;
+});
+//#endregion
+export { Divider };
+
+//# sourceMappingURL=Divider.js.map

package/dist/components/content/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":["BASE_STYLES","BaseProps","BaseStyleProps","COLOR_STYLES","ColorStyleProps","filterBaseProps","OUTER_STYLES","OuterStyleProps","tasty","forwardRef","useId","useSeparator","useSlotProps","extractStyles","ReactNode","STYLE_LIST","DividerElement","qa","styles","display","text","gridColumns","vertical","gridRows","placeItems","gap","preset","width","height","alignSelf","fill","border","margin","Line","CubeDividerProps","children","orientation","Divider","props","ref","$","_c","allProps","mods","t0","undefined","labelId","hasText","isVertical","elementType","t1","separatorProps","t2","labelledBy","t3","eventProps","t4","blockSize","t5","sized","t6","t7","_c"],"sources":["../../../../src/components/content/Divider/Divider.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  filterBaseProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useId } from 'react';\nimport { useSeparator } from 'react-aria';\n\nimport { useSlotProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport type { ReactNode } from 'react';\n\nconst STYLE_LIST = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];\n\nconst DividerElement = tasty({\n  qa: 'Divider',\n  styles: {\n    display: {\n      '': 'block',\n      text: 'grid',\n    },\n    gridColumns: {\n      '': '1fr auto 1fr',\n      vertical: 'auto',\n    },\n    gridRows: {\n      '': false,\n      vertical: '1fr auto 1fr',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch center',\n    },\n    gap: '1x',\n    preset: 'c1',\n    // `false` leaves a size alone, so `inlineSize` and `blockSize` still apply.\n    width: {\n      '': false,\n      'vertical & !text': '1bw 1bw',\n    },\n    height: {\n      '': '1bw 1bw',\n      'vertical | text': false,\n    },\n    // A vertical divider fills the height of the row it separates, even when\n    // the row centers its items. One given a height follows the row's\n    // alignment instead.\n    alignSelf: {\n      '': false,\n      'vertical & !sized': 'stretch',\n    },\n    fill: {\n      '': '#border',\n      text: 'none',\n    },\n    border: '0',\n    margin: '0',\n\n    Line: {\n      width: {\n        '': false,\n        vertical: '1bw 1bw',\n      },\n      height: {\n        '': '1bw 1bw',\n        vertical: false,\n      },\n      fill: '#border',\n    },\n  },\n});\n\nexport interface CubeDividerProps\n  extends BaseProps, BaseStyleProps, OuterStyleProps, ColorStyleProps {\n  /**\n   * Text shown between two lines, such as \"or\". It also becomes the\n   * separator's accessible name, unless `aria-label` or `aria-labelledby`\n   * gives one. Screen readers get it only as that name, so keep it to text.\n   */\n  children?: ReactNode;\n  /**\n   * The direction of the line. A vertical divider separates the items of a\n   * flex or grid row and stretches to the row's height, even when the row\n   * centers its items. Elsewhere, or to make it shorter, give it a `height`.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const Divider = forwardRef(function Divider(\n  props: CubeDividerProps,\n  ref,\n) {\n  const allProps = useSlotProps(props, 'divider');\n  const { mods, children, orientation = 'horizontal' } = allProps;\n  const labelId = useId();\n\n  const hasText = children != null && children !== false && children !== '';\n  const isVertical = orientation === 'vertical';\n  // An `<hr>` is a horizontal separator on its own. React Aria leaves\n  // `aria-orientation` off an `<hr>`, so a vertical divider is a `div`.\n  const elementType = hasText || isVertical ? 'div' : 'hr';\n\n  const { separatorProps } = useSeparator({ orientation, elementType });\n  const styles = extractStyles(allProps, STYLE_LIST);\n\n  // ARIA makes a separator's children presentational, so its text alone is\n  // not a name a screen reader can rely on.\n  const labelledBy =\n    allProps['aria-labelledby'] ??\n    (hasText && !allProps['aria-label'] ? labelId : undefined);\n\n  return (\n    <DividerElement\n      {...separatorProps}\n      {...filterBaseProps(allProps, { eventProps: true })}\n      ref={ref}\n      as={elementType}\n      aria-labelledby={labelledBy}\n      mods={{\n        text: hasText,\n        vertical: isVertical,\n        sized: styles.height != null || styles.blockSize != null,\n        ...mods,\n      }}\n      styles={styles}\n    >\n      {hasText ? (\n        <>\n          <div data-element=\"Line\" />\n          {/* Hidden, so the text is read once, as the name. */}\n          <div id={labelId} aria-hidden>\n            {children}\n          </div>\n          <div data-element=\"Line\" />\n        </>\n      ) : null}\n    </DividerElement>\n  );\n});\n"],"mappings":"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"}

package/dist/components/content/Footer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/Header.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { Text as _Text } from "../Text.js";
 import { useI18n } from "../../../i18n/useI18n.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "../ItemBadge/ItemBadge.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } 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.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { highlightText } from "../highlightText.js";
 import { getDisabledElementProps, omitActivationEventProps } from "../../../utils/react/disabledProps.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { subscribeScheme } from "../../../utils/react/useScheme.js";
 import { ItemWithNativeSlots } from "./Item.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/ItemBadge/ItemBadge.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 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, SPECIAL_CLEAR_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES } from "../../../data/item-themes.js";
 import { CheckIcon } from "../../../icons/CheckIcon.js";

package/dist/components/content/ItemCard/ItemCard.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { Item as _Item } from "../Item/Item.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/Layout/GridLayout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { Layout as _Layout } from "./Layout.js";
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { LayoutBlock as _LayoutBlock } from "./LayoutBlock.js";

package/dist/components/content/Layout/Layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";

package/dist/components/content/Layout/LayoutBlock.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/LayoutCenter.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { LayoutContainer as _LayoutContainer } from "./LayoutContainer.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/LayoutContainer.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";

package/dist/components/content/Layout/LayoutContent.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LayoutContextReset } from "./LayoutContext.js";

package/dist/components/content/Layout/LayoutContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useRef, useState } from "react";

package/dist/components/content/Layout/LayoutFlex.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/LayoutFooter.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { LayoutNestedContext } from "./LayoutContext.js";
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/Layout/LayoutGrid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/LayoutHeader.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { useAutoTooltip } from "../use-auto-tooltip.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Button } from "../../actions/Button/Button.js";

package/dist/components/content/Layout/LayoutPane.js

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

package/dist/components/content/Layout/LayoutPanel.js

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

package/dist/components/content/Layout/LayoutPanelHeader.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/content/Layout/LayoutPanelTransition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { LayoutPanelTransitionContext, useLayoutRefsContext } from "./LayoutContext.js";
 import { c } from "react/compiler-runtime";
 import { useContext, useLayoutEffect, useState } from "react";

package/dist/components/content/Layout/LayoutToolbar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Layout/hooks/useTinyScrollbar.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 //#region src/components/content/Layout/hooks/useTinyScrollbar.ts

package/dist/components/content/Layout/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import "./LayoutContext.js";
 import { Layout as _Layout } from "./Layout.js";
 import { LayoutContent as _LayoutContent } from "./LayoutContent.js";

package/dist/components/content/Layout/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 //#region src/components/content/Layout/utils.ts
 /**
 * Clamps a size value within min/max constraints.

package/dist/components/content/Paragraph.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { Text as _Text } from "./Text.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/Placeholder/Placeholder.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles, mergeStyleLayers } from "../../../utils/styles.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/PrismCode/PrismCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { Prism as RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 //#region src/components/content/PrismCode/prismSetup.tsx
 globalThis.Prism = RendererPrism;

package/dist/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { PrismCode as _PrismCode } from "../PrismCode/PrismCode.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";

package/dist/components/content/Result/Result.js

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

package/dist/components/content/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";

package/dist/components/content/Tag/Tag.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { mergeStyleLayers } from "../../../utils/styles.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { Item as _Item } from "../Item/Item.js";

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { c } from "react/compiler-runtime";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_DEFAULT_STYLES, TEXT_PROP_MAP, useTextProps } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

package/dist/components/content/Tree/Tree.js

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { SIZES, SIZE_NAME_TO_KEY } from "../../../tokens/sizes.js";
 import { TreeElement, TreeScrollContainer, TreeSizer } from "./styled.js";
-import { buildTreeIndex } from "./tree-index.js";
+import { buildTreeIndex, getTreeNodeText } from "./tree-index.js";
 import { TreeNode } from "./TreeNode.js";
 import { useCheckboxTree } from "./use-checkbox-tree.js";
 import { useLoadData } from "./use-load-data.js";
@@ -24,9 +24,8 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 * (`textValue` for keyboard nav, `childItems` for nested traversal).
 */
 function renderItem(node) {
-	const textValue = typeof node.title === "string" ? node.title : String(node.key);
 	return /* @__PURE__ */ jsx(Item, {
-		textValue,
+		textValue: getTreeNodeText(node),
 		childItems: node.children,
 		children: node.title
 	}, node.key);
@@ -76,7 +75,7 @@ function resolveSelectionMode(selectionMode, isSelectable) {
 	return "single";
 }
 function TreeBase(props, ref) {
-	const { treeData, isCheckable = false, isSelectable, selectionMode: selectionModeProp, size = "medium", shape = "default", containerPadding = 4, isDisabled = false, defaultExpandedKeys, expandedKeys, autoExpandParent = false, defaultCheckedKeys, checkedKeys, defaultSelectedKeys, selectedKeys, height, loadData, onExpand, onCheck, onSelect, itemProps, rowStyles, ariaLabel, qa, menu: treeMenu, contextMenu: treeContextMenu, onAction: treeOnAction, menuTriggerProps, menuProps, ...otherProps } = props;
+	const { treeData, isCheckable = false, isSelectable, selectionMode: selectionModeProp, size = "medium", shape = "default", containerPadding = 4, isDisabled = false, defaultExpandedKeys, expandedKeys, autoExpandParent = false, defaultCheckedKeys, checkedKeys, defaultSelectedKeys, selectedKeys, height, loadData, onExpand, onCheck, onSelect, itemProps, rowStyles, ariaLabel, qa, menu: treeMenu, contextMenu: treeContextMenu, onAction: treeOnAction, menuTriggerProps, menuProps, id, _activeKey: activeKey, _onRowAction: onRowAction, ...otherProps } = props;
 	const baseStyles = extractStyles(otherProps, OUTER_STYLES);
 	const treeRef = useRef(null);
 	const scrollRef = useRef(null);
@@ -179,7 +178,9 @@ function TreeBase(props, ref) {
 		disabledBehavior: "all",
 		items: treeData,
 		children: renderItem,
-		"aria-label": treeLabel
+		"aria-label": treeLabel,
+		id,
+		onAction: onRowAction ? (key_0) => onRowAction(String(key_0)) : void 0
 	}), [
 		selectionMode,
 		selectedKeys,
@@ -191,15 +192,17 @@ function TreeBase(props, ref) {
 		handleExpandedChange,
 		disabledKeys,
 		treeData,
-		treeLabel
+		treeLabel,
+		id,
+		onRowAction
 	]);
 	const baseState = useTreeState(ariaProps);
 	const state = useMemo(() => {
 		const collection = baseState.collection;
 		if (typeof collection.getChildren === "function") return baseState;
 		const patched = Object.create(collection);
-		patched.getChildren = (key_0) => {
-			const node_2 = collection.getItem(key_0);
+		patched.getChildren = (key_1) => {
+			const node_2 = collection.getItem(key_1);
 			return node_2 ? Array.from(node_2.childNodes) : [];
 		};
 		return {
@@ -210,8 +213,8 @@ function TreeBase(props, ref) {
 	const { gridProps } = useTree(ariaProps, state, treeRef);
 	const visibleNodes = useMemo(() => {
 		const out = [];
-		for (const key_1 of state.collection.getKeys()) {
-			const node_3 = state.collection.getItem(key_1);
+		for (const key_2 of state.collection.getKeys()) {
+			const node_3 = state.collection.getItem(key_2);
 			if (node_3 && node_3.type === "item") out.push(node_3);
 		}
 		return out;
@@ -269,6 +272,26 @@ function TreeBase(props, ref) {
 		lastFocusedScrollRef.current = focusedKey;
 	}, [state.selectionManager.focusedKey, rowVirtualizer]);
 	/**
+	* Same for the row an outside control points at (`_activeKey`): that
+	* control keeps DOM focus, so `focusedKey` never moves.
+	*/
+	const lastActiveScrollRef = useRef(null);
+	useLayoutEffect(() => {
+		if (activeKey == null) {
+			lastActiveScrollRef.current = null;
+			return;
+		}
+		if (lastActiveScrollRef.current === activeKey) return;
+		const index_1 = visibleNodes.findIndex((n_1) => String(n_1.key) === activeKey);
+		if (index_1 < 0) return;
+		rowVirtualizer.scrollToIndex(index_1, { align: "auto" });
+		lastActiveScrollRef.current = activeKey;
+	}, [
+		activeKey,
+		visibleNodes,
+		rowVirtualizer
+	]);
+	/**
 	* Scroll into view when controlled `selectedKeys` changes externally.
 	*
 	* Selection-manager `focusedKey` only updates on explicit user
@@ -285,9 +308,9 @@ function TreeBase(props, ref) {
 		const target = selectedKeys[0];
 		if (target == null) return;
 		if (lastSelectedScrollRef.current === target) return;
-		const index_1 = visibleNodes.findIndex((n_1) => String(n_1.key) === target);
-		if (index_1 < 0) return;
-		rowVirtualizer.scrollToIndex(index_1, { align: "auto" });
+		const index_2 = visibleNodes.findIndex((n_2) => String(n_2.key) === target);
+		if (index_2 < 0) return;
+		rowVirtualizer.scrollToIndex(index_2, { align: "auto" });
 		lastSelectedScrollRef.current = target;
 	}, [
 		selectedKeys,
@@ -301,6 +324,7 @@ function TreeBase(props, ref) {
 	const mergedScrollRef = useMemo(() => mergeRefs(ref, scrollRef), [ref, scrollRef]);
 	return /* @__PURE__ */ jsx(TreeElement, {
 		...gridProps,
+		tabIndex: activeKey === void 0 ? gridProps.tabIndex : -1,
 		ref: treeRef,
 		qa: qa ?? "Tree",
 		mods,
@@ -326,6 +350,7 @@ function TreeBase(props, ref) {
 						isChecked: checkbox.checkedSet.has(keyStr),
 						isIndeterminate: checkbox.halfCheckedSet.has(keyStr),
 						isLoading: loadDataController.loadingKeys.has(keyStr),
+						isActive: activeKey === void 0 ? void 0 : activeKey === keyStr,
 						size,
 						itemProps,
 						rowStyles,