@cube-dev/ui-kit 0.0.0-canary-8531f8b → 0.0.0-canary-1b26a89

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8531f8b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-1b26a89 | 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";
@@ -12,10 +12,10 @@ import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { ItemBadge } from "../ItemBadge/ItemBadge.js";
 import { IconSwitch } from "../../helpers/IconSwitch/IconSwitch.js";
-import { splitTooltipTriggerProps } from "../../overlays/Tooltip/split-trigger-props.js";
+import { mergeTooltipFocusProps, splitTooltipTriggerProps } from "../../overlays/Tooltip/split-trigger-props.js";
 import { _HotKeys } from "../HotKeys/HotKeys.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, tasty, useGlobalStyles } from "@tenphi/tasty";
 import { forwardRef, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -56,6 +56,7 @@ const ACTIONS_EVENT_HANDLERS = {
 const ItemElement = tasty({
 	as: "div",
 	styles: {
+		"@native-row": "menu-native-row",
 		"@interacted": "active | :hover | :focus | :focus-within | :has([data-pressed])",
 		display: "inline-grid",
 		flow: "column dense",
@@ -192,6 +193,10 @@ const ItemElement = tasty({
 		Label: {
 			$: ">",
 			margin: 0,
+			zIndex: {
+				"": void 0,
+				"@native-row": 1
+			},
 			gridArea: "label",
 			display: "block",
 			placeSelf: "center start",
@@ -236,6 +241,14 @@ const ItemElement = tasty({
 			placeItems: "center",
 			placeContent: "stretch",
 			gridArea: "prefix",
+			zIndex: {
+				"": void 0,
+				"@native-row": 1
+			},
+			pointerEvents: {
+				"": void 0,
+				"@native-row": "none"
+			},
 			padding: {
 				"": "0 $prefix-gap 0 $inline-padding",
 				"has-icon": "$prefix-gap right"
@@ -248,6 +261,14 @@ const ItemElement = tasty({
 			placeItems: "center",
 			placeContent: "stretch",
 			gridArea: "suffix",
+			zIndex: {
+				"": void 0,
+				"@native-row": 1
+			},
+			pointerEvents: {
+				"": void 0,
+				"@native-row": "none"
+			},
 			padding: {
 				"": "0 $inline-padding 0 $suffix-gap",
 				"has-right-icon | (has-actions & inside-wrapper)": "$suffix-gap left"
@@ -256,6 +277,14 @@ const ItemElement = tasty({
 		Actions: {
 			$: ">",
 			gridArea: "actions",
+			zIndex: {
+				"": void 0,
+				"@native-row": 1
+			},
+			pointerEvents: {
+				"": void 0,
+				"@native-row": "none"
+			},
 			display: "flex",
 			gap: "1bw",
 			placeItems: "center",
@@ -505,9 +534,32 @@ function useHotkeyClick(hotkeys, isDisabled, ref) {
 function highlightContent(content, highlight, caseSensitive, highlightStyles) {
 	return typeof content === "string" && highlight ? highlightText(content, highlight, caseSensitive, highlightStyles) : content;
 }
+const NativeItemLink = tasty({
+	as: "a",
+	styles: {
+		display: "block",
+		color: "inherit",
+		textDecoration: "none",
+		outline: 0,
+		zIndex: {
+			"": "auto",
+			"row-native-cell": 1
+		}
+	}
+});
+const NATIVE_ROW_TARGET_STYLES = {
+	position: "absolute",
+	inset: "($native-row-inset, 0)",
+	width: "($native-row-width, auto)",
+	height: "($native-row-height, auto)",
+	clipPath: "($native-row-clip, none)",
+	zIndex: 0
+};
+const NATIVE_ROW_CONTROL_SELECTOR = ":where([data-menu-native-row]) :where([data-element=Prefix],[data-element=Suffix],[data-element=Actions]) :where(a[href],button,input,select,textarea,label[for],label:has(button,input,select,textarea),[tabindex],[contenteditable=\"\"],[contenteditable=\"true\"],[contenteditable=\"plaintext-only\"],[role=\"button\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"],[role=\"radio\"],[role=\"textbox\"],[role=\"combobox\"],[role=\"slider\"],[role=\"spinbutton\"],[role=\"link\"])";
+const NATIVE_ROW_CONTROL_STYLES = { pointerEvents: "auto" };
 const Item = (props, ref) => {
-	const $ = c(75);
-	const { children, size: t0, type: t1, theme: t2, mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip: t3, isDisabled, disabled: nativeDisabledProp, style, loadingSlot: t4, isLoading: t5, actions, autoHideActions: t6, preserveActionsSpace: t7, disableActionsFocus: t8, shape, defaultTooltipPlacement: t9, level: t10, highlight, highlightCaseSensitive: t11, highlightStyles, insideWrapper: t12, showActions: t13, skipActionsWidthTransition: t14, hiddenContent, isDynamicLabel: t15, labelRef: labelRefProp, tokens, ...rest } = props;
+	const $ = c(78);
+	const { children, size: t0, type: t1, theme: t2, mods, icon: iconProp, rightIcon: rightIconProp, prefix, suffix, description, descriptionPlacement, labelProps, descriptionProps, keyboardShortcutProps, styles, htmlType, isSelected, hotkeys, tooltip: t3, isDisabled, disabled: nativeDisabledProp, style, loadingSlot: t4, isLoading: t5, actions, autoHideActions: t6, preserveActionsSpace: t7, disableActionsFocus: t8, shape, defaultTooltipPlacement: t9, level: t10, highlight, highlightCaseSensitive: t11, highlightStyles, insideWrapper: t12, showActions: t13, skipActionsWidthTransition: t14, hiddenContent, isDynamicLabel: t15, labelRef: labelRefProp, nativeLinkProps, nativeMenuItemProps, nativeRowRef, nativeLabelReferenceId, onInlineFocus, onNativeLinkElement, onNativeElement, tokens, ...rest } = props;
 	const size = t0 === void 0 ? "medium" : t0;
 	const type = t1 === void 0 ? "item" : t1;
 	const theme = t2 === void 0 ? "default" : t2;
@@ -524,6 +576,7 @@ const Item = (props, ref) => {
 	const showActions = t13 === void 0 ? false : t13;
 	const skipActionsWidthTransition = t14 === void 0 ? false : t14;
 	const isDynamicLabel = t15 === void 0 ? false : t15;
+	useGlobalStyles(NATIVE_ROW_CONTROL_SELECTOR, nativeMenuItemProps ? NATIVE_ROW_CONTROL_STYLES : void 0);
 	const hasLabel = !!(children || labelProps);
 	const finalDescriptionPlacement = descriptionPlacement ?? ((type === "card" || type === "header") && hasLabel ? "block" : "inline");
 	const finalShape = shape ?? (type === "card" ? "card" : "button");
@@ -650,14 +703,15 @@ const Item = (props, ref) => {
 	const t24 = !!finalSuffix;
 	const t25 = !!actions;
 	const t26 = !!(actions && actions !== true);
-	const t27 = autoHideActions === true;
-	const t28 = preserveActionsSpace === true;
-	const t29 = showActions && insideWrapper;
-	const t30 = skipActionsWidthTransition && insideWrapper;
-	const t31 = showDescription ? finalDescriptionPlacement : "none";
-	let t32;
-	if ($[38] !== baseMods || $[39] !== hasCheckmark || $[40] !== hasLabel || $[41] !== iconSlot.hasSlot || $[42] !== insideWrapper || $[43] !== rightIconSlot.hasSlot || $[44] !== showDescription || $[45] !== t21 || $[46] !== t22 || $[47] !== t23 || $[48] !== t24 || $[49] !== t25 || $[50] !== t26 || $[51] !== t27 || $[52] !== t28 || $[53] !== t29 || $[54] !== t30 || $[55] !== t31) {
-		t32 = {
+	const t27 = !!nativeMenuItemProps;
+	const t28 = autoHideActions === true;
+	const t29 = preserveActionsSpace === true;
+	const t30 = showActions && insideWrapper;
+	const t31 = skipActionsWidthTransition && insideWrapper;
+	const t32 = showDescription ? finalDescriptionPlacement : "none";
+	let t33;
+	if ($[38] !== baseMods || $[39] !== hasCheckmark || $[40] !== hasLabel || $[41] !== iconSlot.hasSlot || $[42] !== insideWrapper || $[43] !== rightIconSlot.hasSlot || $[44] !== showDescription || $[45] !== t21 || $[46] !== t22 || $[47] !== t23 || $[48] !== t24 || $[49] !== t25 || $[50] !== t26 || $[51] !== t27 || $[52] !== t28 || $[53] !== t29 || $[54] !== t30 || $[55] !== t31 || $[56] !== t32) {
+		t33 = {
 			...baseMods,
 			"has-icon": iconSlot.hasSlot,
 			"has-start-content": t21,
@@ -669,13 +723,14 @@ const Item = (props, ref) => {
 			"has-description": showDescription,
 			"has-actions": t25,
 			"has-actions-content": t26,
-			"auto-hide-actions": t27,
-			"preserve-actions-space": t28,
+			"menu-native-row": t27,
+			"auto-hide-actions": t28,
+			"preserve-actions-space": t29,
 			"inside-wrapper": insideWrapper,
-			"actions-shown": t29,
-			"skip-actions-width-transition": t30,
+			"actions-shown": t30,
+			"skip-actions-width-transition": t31,
 			checkmark: hasCheckmark,
-			description: t31
+			description: t32
 		};
 		$[38] = baseMods;
 		$[39] = hasCheckmark;
@@ -696,62 +751,72 @@ const Item = (props, ref) => {
 		$[54] = t30;
 		$[55] = t31;
 		$[56] = t32;
-	} else t32 = $[56];
-	const finalMods = t32;
-	const t33 = descriptionProps?.ref;
-	const t34 = isDynamicLabel || !!actions || insideWrapper;
+		$[57] = t33;
+	} else t33 = $[57];
+	const finalMods = t33;
+	const t34 = finalMods["menu-native-row"];
 	let t35;
-	if ($[57] !== children || $[58] !== description || $[59] !== labelProps || $[60] !== labelRefProp || $[61] !== t33 || $[62] !== t34 || $[63] !== tooltip) {
-		t35 = {
+	if ($[58] !== t34) {
+		t35 = { "row-native-cell": t34 };
+		$[58] = t34;
+		$[59] = t35;
+	} else t35 = $[59];
+	const nativeCellMods = t35;
+	const t36 = descriptionProps?.ref;
+	const t37 = isDynamicLabel || !!actions || insideWrapper;
+	let t38;
+	if ($[60] !== children || $[61] !== description || $[62] !== labelProps || $[63] !== labelRefProp || $[64] !== t36 || $[65] !== t37 || $[66] !== tooltip) {
+		t38 = {
 			tooltip,
 			children,
 			description,
 			labelProps,
 			labelRef: labelRefProp,
-			descriptionRef: t33,
-			isDynamicLabel: t34
+			descriptionRef: t36,
+			isDynamicLabel: t37
 		};
-		$[57] = children;
-		$[58] = description;
-		$[59] = labelProps;
-		$[60] = labelRefProp;
-		$[61] = t33;
-		$[62] = t34;
-		$[63] = tooltip;
-		$[64] = t35;
-	} else t35 = $[64];
-	const { labelProps: finalLabelProps, labelRef, descriptionRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t35);
+		$[60] = children;
+		$[61] = description;
+		$[62] = labelProps;
+		$[63] = labelRefProp;
+		$[64] = t36;
+		$[65] = t37;
+		$[66] = tooltip;
+		$[67] = t38;
+	} else t38 = $[67];
+	const { labelProps: finalLabelProps, labelRef, descriptionRef, renderWithTooltip, isTooltipActive } = useAutoTooltip(t38);
 	const { isNativelyDisabled, isInert, inertProps } = getDisabledElementProps({
 		isDisabled: finalIsDisabled,
 		keepEvents: isTooltipActive,
 		as: rest.as
 	});
-	let t36;
-	if ($[65] !== children || $[66] !== highlight || $[67] !== highlightCaseSensitive || $[68] !== highlightStyles) {
-		t36 = highlightContent(children, highlight, highlightCaseSensitive, highlightStyles);
-		$[65] = children;
-		$[66] = highlight;
-		$[67] = highlightCaseSensitive;
-		$[68] = highlightStyles;
-		$[69] = t36;
-	} else t36 = $[69];
-	const processedChildren = t36;
-	let t37;
-	if ($[70] !== description || $[71] !== highlight || $[72] !== highlightCaseSensitive || $[73] !== highlightStyles) {
-		t37 = highlightContent(description, highlight, highlightCaseSensitive, highlightStyles);
-		$[70] = description;
-		$[71] = highlight;
-		$[72] = highlightCaseSensitive;
-		$[73] = highlightStyles;
-		$[74] = t37;
-	} else t37 = $[74];
-	const processedDescription = t37;
+	let t39;
+	if ($[68] !== children || $[69] !== highlight || $[70] !== highlightCaseSensitive || $[71] !== highlightStyles) {
+		t39 = highlightContent(children, highlight, highlightCaseSensitive, highlightStyles);
+		$[68] = children;
+		$[69] = highlight;
+		$[70] = highlightCaseSensitive;
+		$[71] = highlightStyles;
+		$[72] = t39;
+	} else t39 = $[72];
+	const processedChildren = t39;
+	let t40;
+	if ($[73] !== description || $[74] !== highlight || $[75] !== highlightCaseSensitive || $[76] !== highlightStyles) {
+		t40 = highlightContent(description, highlight, highlightCaseSensitive, highlightStyles);
+		$[73] = description;
+		$[74] = highlight;
+		$[75] = highlightCaseSensitive;
+		$[76] = highlightStyles;
+		$[77] = t40;
+	} else t40 = $[77];
+	const processedDescription = t40;
 	const renderItemElement = (tooltipTriggerProps, tooltipRef) => {
-		const { pointerProps: elementTooltipProps, focusProps: tooltipFocusProps } = typeof hiddenContent === "function" ? splitTooltipTriggerProps(tooltipTriggerProps) : {
+		const { pointerProps: elementTooltipProps, focusProps: tooltipFocusProps } = typeof hiddenContent === "function" || nativeMenuItemProps ? splitTooltipTriggerProps(tooltipTriggerProps) : {
 			pointerProps: tooltipTriggerProps,
 			focusProps: void 0
 		};
 		const handleRef = (element) => {
+			onNativeElement?.(element);
 			if (typeof ref === "function") ref(element);
 			else if (ref) ref.current = element;
 			if (tooltipRef) tooltipRef.current = element;
@@ -767,28 +832,96 @@ const Item = (props, ref) => {
 			tokens: finalTokens,
 			type: htmlType,
 			...mergeProps(isInert ? omitActivationEventProps(rest) : rest, elementTooltipProps || {}, inertProps),
+			...nativeMenuItemProps ? {
+				"aria-disabled": void 0,
+				"aria-selected": void 0
+			} : null,
 			style,
 			children: [
+				nativeMenuItemProps ? /* @__PURE__ */ jsx(NativeItemLink, {
+					...mergeTooltipFocusProps(mergeProps(nativeLinkProps, nativeMenuItemProps), tooltipFocusProps),
+					ref: nativeRowRef,
+					styles: NATIVE_ROW_TARGET_STYLES,
+					style: { margin: 0 },
+					"aria-hidden": nativeMenuItemProps["aria-hidden"],
+					"data-menu-native-link": "",
+					"data-menu-native-hit-area": ""
+				}) : null,
 				typeof hiddenContent === "function" ? hiddenContent(tooltipFocusProps ?? {}, isTooltipActive) : hiddenContent,
-				iconSlot.hasSlot && /* @__PURE__ */ jsx("div", {
+				iconSlot.hasSlot && (nativeLinkProps ? /* @__PURE__ */ jsx(NativeItemLink, {
+					mods: nativeCellMods,
 					"data-element": "Icon",
+					...nativeLinkProps,
+					"aria-hidden": true,
+					"data-menu-native-link": "",
 					children: /* @__PURE__ */ jsx(IconSwitch, {
 						noWrapper: true,
 						contentKey: iconSlot.key,
 						children: iconSlot.content
 					})
-				}),
+				}) : /* @__PURE__ */ jsx("div", {
+					"data-element": "Icon",
+					children: /* @__PURE__ */ jsx(IconSwitch, {
+						noWrapper: true,
+						contentKey: iconSlot.key,
+						children: iconSlot.content
+					})
+				})),
 				finalPrefix && /* @__PURE__ */ jsx("div", {
 					"data-element": "Prefix",
+					...nativeMenuItemProps ? ACTIONS_EVENT_HANDLERS : null,
 					children: finalPrefix
 				}),
-				children || labelProps ? /* @__PURE__ */ jsx(type === "header" || type === "card" ? `h${level}` : "div", {
-					"data-element": "Label",
-					...finalLabelProps,
-					ref: labelRef,
-					children: processedChildren
-				}) : null,
-				showDescription ? /* @__PURE__ */ jsx("div", {
+				children || labelProps ? (() => {
+					const LabelTag = type === "header" || type === "card" ? `h${level}` : "div";
+					if (nativeLinkProps && LabelTag !== "div") return /* @__PURE__ */ jsx(LabelTag, {
+						"data-element": "Label",
+						...finalLabelProps,
+						id: nativeLabelReferenceId ?? finalLabelProps.id,
+						"aria-labelledby": finalLabelProps["aria-labelledby"] ?? (nativeMenuItemProps && finalLabelProps["aria-label"] == null ? `${nativeLabelReferenceId}-content` : void 0),
+						ref: (element_0) => {
+							labelRef(element_0);
+						},
+						children: /* @__PURE__ */ jsx(NativeItemLink, {
+							mods: nativeCellMods,
+							...nativeLinkProps,
+							id: nativeMenuItemProps ? `${nativeLabelReferenceId}-content` : void 0,
+							"aria-hidden": nativeMenuItemProps ? true : void 0,
+							display: "inline",
+							"data-menu-native-link": "",
+							children: processedChildren
+						})
+					});
+					if (nativeLinkProps) return /* @__PURE__ */ jsx(NativeItemLink, {
+						mods: nativeCellMods,
+						"data-element": "Label",
+						...nativeLinkProps,
+						...finalLabelProps,
+						id: nativeLabelReferenceId ?? finalLabelProps.id,
+						"data-menu-native-link": "",
+						ref: (element_1) => {
+							labelRef(element_1);
+						},
+						children: processedChildren
+					});
+					return /* @__PURE__ */ jsx(LabelTag, {
+						"data-element": "Label",
+						...finalLabelProps,
+						ref: labelRef,
+						children: processedChildren
+					});
+				})() : null,
+				showDescription ? nativeLinkProps ? /* @__PURE__ */ jsx(NativeItemLink, {
+					mods: nativeCellMods,
+					"data-element": "Description",
+					...nativeLinkProps,
+					...descriptionProps,
+					"data-menu-native-link": "",
+					ref: (element_2) => {
+						descriptionRef(element_2);
+					},
+					children: processedDescription
+				}) : /* @__PURE__ */ jsx("div", {
 					"data-element": "Description",
 					...descriptionProps,
 					ref: descriptionRef,
@@ -796,6 +929,7 @@ const Item = (props, ref) => {
 				}) : null,
 				finalSuffix && /* @__PURE__ */ jsx("div", {
 					"data-element": "Suffix",
+					...nativeMenuItemProps ? ACTIONS_EVENT_HANDLERS : null,
 					children: finalSuffix
 				}),
 				rightIconSlot.hasSlot && /* @__PURE__ */ jsx("div", {
@@ -808,11 +942,13 @@ const Item = (props, ref) => {
 				}),
 				actions && /* @__PURE__ */ jsx("div", {
 					"data-element": "Actions",
+					onFocus: onInlineFocus,
 					...actions !== true ? ACTIONS_EVENT_HANDLERS : null,
 					children: actions !== true ? /* @__PURE__ */ jsx(ItemActionProvider, {
 						type,
 						theme,
 						disableActionsFocus,
+						menuItemAction: !!nativeMenuItemProps,
 						isDisabled: finalIsDisabled,
 						children: actions
 					}) : null
@@ -826,10 +962,12 @@ const _Item = Object.assign(forwardRef(Item), {
 	Action: ItemAction,
 	Badge: ItemBadge
 });
+/** @private Preserves Item layout around native menu targets. */
+const ItemWithNativeSlots = _Item;
 function _temp(key) {
 	return key !== "id";
 }
 
 //#endregion
-export { _Item };
+export { ItemWithNativeSlots, _Item };
 //# sourceMappingURL=Item.js.map