@cube-dev/ui-kit 0.0.0-canary-ac46c4b → 0.0.0-canary-9bde021

package/dist/components/fields/RadioGroup/Radio.js

@@ -1,7 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ac46c4b | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9bde021 | 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";
+import { useAutoTooltip } from "../../content/use-auto-tooltip.js";
+import { mergeTooltipFocusProps, splitTooltipTriggerProps } from "../../overlays/Tooltip/split-trigger-props.js";
 import { _Item } from "../../content/Item/Item.js";
 import { getValidationMods, getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { INLINE_LABEL_STYLES } from "../../form/Label.js";
@@ -18,6 +20,23 @@ import { useHover, useRadio as useRadio$1 } from "react-aria";
 import { useFocusableRef } from "@react-spectrum/utils";
 
 //#region src/components/fields/RadioGroup/Radio.tsx
+/**
+* Same columns as `Item`, but none of them stretches — a radio button is sized
+* by its content, not stretched like a list item. The label column still has a
+* zero minimum, the way `Item`'s `1sf` does, so a radio given less room than
+* its label truncates the label instead of overflowing the button — which is
+* also what lets the auto tooltip (`tooltip` / `tooltip={true}`) fire.
+*/
+const RADIO_BUTTON_COLUMNS = "max-content max-content minmax(0, max-content) max-content max-content max-content";
+/**
+* A `block` description spans every column, and a spanning item's width goes
+* to the columns with an intrinsic minimum. With a zero-minimum label column
+* that is every column but the label's — so the description's width lands in
+* the empty icon / prefix / suffix columns and the button grows to label plus
+* description instead of the wider of the two. Only this layout keeps the
+* all-`max-content` columns, and with them a label that does not truncate.
+*/
+const RADIO_BUTTON_BLOCK_COLUMNS = "max-content max-content max-content max-content max-content max-content";
 const RadioButtonElement = tasty(_Item, {
 	qa: "RadioButton",
 	as: "label",
@@ -26,10 +45,10 @@ const RadioButtonElement = tasty(_Item, {
 		lineHeight: "1em",
 		flexGrow: 1,
 		gridTemplate: {
-			"": "\"icon prefix label suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content",
-			"description=inline": "\"icon prefix description suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content",
-			"description=inline & has-label": "\"icon prefix label suffix rightIcon actions\" auto \"icon prefix description suffix rightIcon actions\" auto / max-content max-content max-content max-content max-content max-content",
-			"description=block": "\"icon prefix label suffix rightIcon actions\" auto \"description description description description description description\" auto / max-content max-content max-content max-content max-content max-content"
+			"": `"icon prefix label suffix rightIcon actions" auto / ${RADIO_BUTTON_COLUMNS}`,
+			"description=inline": `"icon prefix description suffix rightIcon actions" auto / ${RADIO_BUTTON_COLUMNS}`,
+			"description=inline & has-label": `"icon prefix label suffix rightIcon actions" auto "icon prefix description suffix rightIcon actions" auto / ${RADIO_BUTTON_COLUMNS}`,
+			"description=block": `"icon prefix label suffix rightIcon actions" auto "description description description description description description" auto / ${RADIO_BUTTON_BLOCK_COLUMNS}`
 		},
 		placeContent: "center",
 		shadow: {
@@ -136,6 +155,9 @@ const RadioLabelElement = tasty({
 * `ItemButton`. Kept as a runtime list so a new `Item` prop only has to be
 * added in one place.
 *
+* A classic radio ignores all of them except `tooltip` and `labelRef`, which
+* it resolves itself (see `useAutoTooltip` in `Radio`).
+*
 * Deliberately absent:
 * - `size`, `type`, `theme`, `isSelected`, `isDisabled`, `mods`, `styles` —
 *   owned by the radio (they come from the prop/context/validation resolution
@@ -171,14 +193,16 @@ const ITEM_PROPS = [
 	"labelRef"
 ];
 function Radio(props, ref) {
-	const $ = c(84);
+	const $ = c(73);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = { defaultValidationTrigger: "onChange" };
 		$[0] = t0;
 	} else t0 = $[0];
 	props = useFieldProps(props, t0);
-	let { qa, isDisabled, isInvalid, isValid, children, label, autoFocus, labelStyles, labelProps, type, buttonType, size, "aria-label": ariaLabel, form, ...otherProps } = props;
+	const { qa, isDisabled, isInvalid, isValid, children, label: t1, autoFocus, labelStyles: t2, labelProps, type, buttonType, size, "aria-label": ariaLabel, form, ...otherProps } = props;
+	let label = t1;
+	let labelStyles = t2;
 	label = label || children;
 	let itemProps;
 	if ($[1] !== props) {
@@ -187,16 +211,10 @@ function Radio(props, ref) {
 		$[1] = props;
 		$[2] = itemProps;
 	} else itemProps = $[2];
-	let t1;
-	if ($[3] !== labelStyles) {
-		t1 = {
-			...INLINE_LABEL_STYLES,
-			...labelStyles
-		};
-		$[3] = labelStyles;
-		$[4] = t1;
-	} else t1 = $[4];
-	labelStyles = t1;
+	labelStyles = {
+		...INLINE_LABEL_STYLES,
+		...labelStyles
+	};
 	const radioGroupProps = useRadioProvider();
 	const state = radioGroupProps && radioGroupProps.state;
 	const name = radioGroupProps && radioGroupProps.name;
@@ -225,146 +243,157 @@ function Radio(props, ref) {
 	const baseIsDisabled = isDisabled ?? contextIsDisabled ?? false;
 	const isLoadingButton = isButton && props.isLoading === true;
 	const effectiveIsDisabled = baseIsDisabled === true || isLoadingButton && isDisabled !== false;
-	let t2;
-	if ($[5] !== effectiveIsDisabled) {
-		t2 = { isDisabled: effectiveIsDisabled };
-		$[5] = effectiveIsDisabled;
-		$[6] = t2;
-	} else t2 = $[6];
-	const { isFocused, focusProps } = useFocus$1(t2, true);
 	let t3;
-	if ($[7] !== effectiveIsDisabled) {
+	if ($[3] !== effectiveIsDisabled) {
 		t3 = { isDisabled: effectiveIsDisabled };
-		$[7] = effectiveIsDisabled;
-		$[8] = t3;
-	} else t3 = $[8];
-	const { hoverProps, isHovered } = useHover(t3);
+		$[3] = effectiveIsDisabled;
+		$[4] = t3;
+	} else t3 = $[4];
+	const { isFocused, focusProps } = useFocus$1(t3, true);
+	let t4;
+	if ($[5] !== effectiveIsDisabled) {
+		t4 = { isDisabled: effectiveIsDisabled };
+		$[5] = effectiveIsDisabled;
+		$[6] = t4;
+	} else t4 = $[6];
+	const { hoverProps, isHovered } = useHover(t4);
+	const t5 = isButton ? void 0 : props.tooltip;
+	const t6 = isButton ? void 0 : props.labelRef;
+	let t7;
+	if ($[7] !== label || $[8] !== t5 || $[9] !== t6) {
+		t7 = {
+			tooltip: t5,
+			children: label,
+			labelRef: t6,
+			isDynamicLabel: true
+		};
+		$[7] = label;
+		$[8] = t5;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const { labelRef: tooltipLabelRef, renderWithTooltip } = useAutoTooltip(t7);
 	const inputRef = useRef(null);
 	const domRef = useFocusableRef(ref, inputRef);
-	let t4;
-	if ($[9] !== effectiveIsDisabled || $[10] !== name || $[11] !== props) {
-		t4 = {
+	let t8;
+	if ($[11] !== effectiveIsDisabled || $[12] !== name || $[13] !== props) {
+		t8 = {
 			name,
 			...props,
 			isDisabled: effectiveIsDisabled
 		};
-		$[9] = effectiveIsDisabled;
-		$[10] = name;
-		$[11] = props;
-		$[12] = t4;
-	} else t4 = $[12];
-	const { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected } = useRadio$1(t4, state, inputRef);
-	let t5;
-	if ($[13] !== isInvalid || $[14] !== isValid) {
-		t5 = getValidationMods({
+		$[11] = effectiveIsDisabled;
+		$[12] = name;
+		$[13] = props;
+		$[14] = t8;
+	} else t8 = $[14];
+	const { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected } = useRadio$1(t8, state, inputRef);
+	let t9;
+	if ($[15] !== isInvalid || $[16] !== isValid) {
+		t9 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[13] = isInvalid;
-		$[14] = isValid;
-		$[15] = t5;
-	} else t5 = $[15];
-	const t6 = effectiveType === "tabs";
-	let t7;
-	if ($[16] !== isButton || $[17] !== isFocused || $[18] !== isHovered || $[19] !== isRadioDisabled || $[20] !== isRadioSelected || $[21] !== t5 || $[22] !== t6) {
-		t7 = {
+		$[15] = isInvalid;
+		$[16] = isValid;
+		$[17] = t9;
+	} else t9 = $[17];
+	const t10 = effectiveType === "tabs";
+	let t11;
+	if ($[18] !== isButton || $[19] !== isFocused || $[20] !== isHovered || $[21] !== isRadioDisabled || $[22] !== isRadioSelected || $[23] !== t10 || $[24] !== t9) {
+		t11 = {
 			checked: isRadioSelected,
-			...t5,
+			...t9,
 			disabled: isRadioDisabled,
 			hovered: isHovered,
 			button: isButton,
 			focused: isFocused,
-			tabs: t6
+			tabs: t10
 		};
-		$[16] = isButton;
-		$[17] = isFocused;
-		$[18] = isHovered;
-		$[19] = isRadioDisabled;
-		$[20] = isRadioSelected;
-		$[21] = t5;
-		$[22] = t6;
-		$[23] = t7;
-	} else t7 = $[23];
-	const mods = t7;
+		$[18] = isButton;
+		$[19] = isFocused;
+		$[20] = isHovered;
+		$[21] = isRadioDisabled;
+		$[22] = isRadioSelected;
+		$[23] = t10;
+		$[24] = t9;
+		$[25] = t11;
+	} else t11 = $[25];
+	const mods = t11;
 	if (isButton) {
-		const t8 = effectiveButtonType;
-		let t9;
-		if ($[24] !== isInvalid || $[25] !== isValid) {
-			t9 = getValidationTheme("default", {
+		const t12 = effectiveButtonType;
+		let t13;
+		if ($[26] !== isInvalid || $[27] !== isValid) {
+			t13 = getValidationTheme("default", {
 				isInvalid,
 				isValid
 			}, { includeValid: true });
-			$[24] = isInvalid;
-			$[25] = isValid;
-			$[26] = t9;
-		} else t9 = $[26];
-		const t10 = effectiveSize;
-		let t11;
-		if ($[27] !== forceSelectedMod || $[28] !== isRadioDisabled) {
-			t11 = forceSelectedMod && !isRadioDisabled ? { selected: true } : {};
-			$[27] = forceSelectedMod;
-			$[28] = isRadioDisabled;
-			$[29] = t11;
-		} else t11 = $[29];
-		let t12;
-		if ($[30] !== mods || $[31] !== t11) {
-			t12 = {
-				...mods,
-				...t11
-			};
-			$[30] = mods;
-			$[31] = t11;
-			$[32] = t12;
-		} else t12 = $[32];
-		let t13;
-		if ($[33] !== focusProps || $[34] !== hoverProps) {
-			t13 = mergeProps$1(hoverProps, focusProps);
-			$[33] = focusProps;
-			$[34] = hoverProps;
-			$[35] = t13;
-		} else t13 = $[35];
-		const t14 = qa || "Radio";
+			$[26] = isInvalid;
+			$[27] = isValid;
+			$[28] = t13;
+		} else t13 = $[28];
+		const t14 = effectiveSize;
 		let t15;
-		if ($[36] !== isButton || $[37] !== isRadioDisabled) {
-			t15 = {
-				button: isButton,
-				disabled: isRadioDisabled
-			};
-			$[36] = isButton;
-			$[37] = isRadioDisabled;
-			$[38] = t15;
-		} else t15 = $[38];
+		if ($[29] !== forceSelectedMod || $[30] !== isRadioDisabled) {
+			t15 = forceSelectedMod && !isRadioDisabled ? { selected: true } : {};
+			$[29] = forceSelectedMod;
+			$[30] = isRadioDisabled;
+			$[31] = t15;
+		} else t15 = $[31];
 		let t16;
-		if ($[39] !== ariaLabel || $[40] !== inputProps || $[41] !== t14 || $[42] !== t15) {
-			t16 = /* @__PURE__ */ jsx(HiddenInput, {
-				qa: t14,
+		if ($[32] !== mods || $[33] !== t15) {
+			t16 = {
+				...mods,
+				...t15
+			};
+			$[32] = mods;
+			$[33] = t15;
+			$[34] = t16;
+		} else t16 = $[34];
+		let t17;
+		if ($[35] !== focusProps || $[36] !== hoverProps) {
+			t17 = mergeProps$1(hoverProps, focusProps);
+			$[35] = focusProps;
+			$[36] = hoverProps;
+			$[37] = t17;
+		} else t17 = $[37];
+		let t18;
+		if ($[38] !== ariaLabel || $[39] !== inputProps || $[40] !== isButton || $[41] !== isRadioDisabled || $[42] !== qa) {
+			t18 = (tooltipFocusProps) => /* @__PURE__ */ jsx(HiddenInput, {
+				qa: qa || "Radio",
 				"data-input-type": "radio",
 				"aria-label": ariaLabel,
-				...inputProps,
+				...mergeTooltipFocusProps(inputProps, tooltipFocusProps),
 				ref: inputRef,
 				form: null,
-				mods: t15
+				mods: {
+					button: isButton,
+					disabled: isRadioDisabled
+				}
 			});
-			$[39] = ariaLabel;
-			$[40] = inputProps;
-			$[41] = t14;
-			$[42] = t15;
-			$[43] = t16;
-		} else t16 = $[43];
-		let t17;
-		if ($[44] !== domRef || $[45] !== effectiveButtonType || $[46] !== effectiveSize || $[47] !== isRadioDisabled || $[48] !== isRadioSelected || $[49] !== itemProps || $[50] !== label || $[51] !== styles || $[52] !== t12 || $[53] !== t13 || $[54] !== t16 || $[55] !== t9) {
-			t17 = /* @__PURE__ */ jsxs(RadioButtonElement, {
+			$[38] = ariaLabel;
+			$[39] = inputProps;
+			$[40] = isButton;
+			$[41] = isRadioDisabled;
+			$[42] = qa;
+			$[43] = t18;
+		} else t18 = $[43];
+		let t19;
+		if ($[44] !== domRef || $[45] !== effectiveButtonType || $[46] !== effectiveSize || $[47] !== isRadioDisabled || $[48] !== isRadioSelected || $[49] !== itemProps || $[50] !== label || $[51] !== styles || $[52] !== t13 || $[53] !== t16 || $[54] !== t17 || $[55] !== t18) {
+			t19 = /* @__PURE__ */ jsx(RadioButtonElement, {
 				ref: domRef,
-				type: t8,
-				theme: t9,
-				size: t10,
+				type: t12,
+				theme: t13,
+				size: t14,
 				...itemProps,
 				isSelected: isRadioSelected,
 				isDisabled: isRadioDisabled,
-				mods: t12,
+				mods: t16,
 				styles,
-				...t13,
-				children: [t16, label]
+				...t17,
+				isDynamicLabel: true,
+				hiddenContent: t18,
+				children: label
 			});
 			$[44] = domRef;
 			$[45] = effectiveButtonType;
@@ -374,97 +403,70 @@ function Radio(props, ref) {
 			$[49] = itemProps;
 			$[50] = label;
 			$[51] = styles;
-			$[52] = t12;
-			$[53] = t13;
-			$[54] = t16;
-			$[55] = t9;
-			$[56] = t17;
-		} else t17 = $[56];
-		return t17;
+			$[52] = t13;
+			$[53] = t16;
+			$[54] = t17;
+			$[55] = t18;
+			$[56] = t19;
+		} else t19 = $[56];
+		return t19;
 	}
-	const t8 = type;
-	const t9 = qa || "Radio";
-	const t10 = ariaLabel;
-	let t11;
-	if ($[57] !== focusProps || $[58] !== inputProps) {
-		t11 = mergeProps$1(inputProps, focusProps);
-		$[57] = focusProps;
-		$[58] = inputProps;
-		$[59] = t11;
-	} else t11 = $[59];
 	let t12;
-	if ($[60] !== isButton) {
-		t12 = { button: isButton };
-		$[60] = isButton;
-		$[61] = t12;
-	} else t12 = $[61];
-	let t13;
-	if ($[62] !== ariaLabel || $[63] !== t11 || $[64] !== t12 || $[65] !== t9) {
-		t13 = /* @__PURE__ */ jsx(HiddenInput, {
-			qa: t9,
-			"data-input-type": "radio",
-			"aria-label": t10,
-			...t11,
-			ref: inputRef,
-			mods: t12
-		});
-		$[62] = ariaLabel;
-		$[63] = t11;
-		$[64] = t12;
-		$[65] = t9;
-		$[66] = t13;
-	} else t13 = $[66];
-	let t14;
-	if ($[67] !== mods || $[68] !== type) {
-		t14 = /* @__PURE__ */ jsx(RadioNormalElement, {
-			"data-element": "Input",
-			mods,
-			"data-type": type,
-			children: RadioCircleElement
-		});
-		$[67] = mods;
-		$[68] = type;
-		$[69] = t14;
-	} else t14 = $[69];
-	let t15;
-	if ($[70] !== label || $[71] !== labelProps || $[72] !== labelStyles || $[73] !== mods) {
-		t15 = label && /* @__PURE__ */ jsx(RadioLabelElement, {
-			mods,
-			styles: labelStyles,
-			...labelProps ? filterBaseProps(labelProps) : void 0,
-			children: label
-		});
-		$[70] = label;
-		$[71] = labelProps;
-		$[72] = labelStyles;
-		$[73] = mods;
-		$[74] = t15;
-	} else t15 = $[74];
-	let t16;
-	if ($[75] !== domRef || $[76] !== hoverProps || $[77] !== mods || $[78] !== styles || $[79] !== t13 || $[80] !== t14 || $[81] !== t15 || $[82] !== type) {
-		t16 = /* @__PURE__ */ jsxs(RadioWrapperElement, {
-			styles,
-			...hoverProps,
-			ref: domRef,
-			mods,
-			"data-type": t8,
-			children: [
-				t13,
-				t14,
-				t15
-			]
-		});
-		$[75] = domRef;
-		$[76] = hoverProps;
-		$[77] = mods;
-		$[78] = styles;
-		$[79] = t13;
-		$[80] = t14;
-		$[81] = t15;
-		$[82] = type;
-		$[83] = t16;
-	} else t16 = $[83];
-	return t16;
+	if ($[57] !== ariaLabel || $[58] !== domRef || $[59] !== focusProps || $[60] !== hoverProps || $[61] !== inputProps || $[62] !== isButton || $[63] !== label || $[64] !== labelProps || $[65] !== labelStyles || $[66] !== mods || $[67] !== qa || $[68] !== renderWithTooltip || $[69] !== styles || $[70] !== tooltipLabelRef || $[71] !== type) {
+		t12 = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {
+			const { pointerProps, focusProps: tooltipFocusProps_0 } = splitTooltipTriggerProps(tooltipTriggerProps);
+			return /* @__PURE__ */ jsxs(RadioWrapperElement, {
+				styles,
+				...mergeProps$1(hoverProps, pointerProps),
+				ref: tooltipRef ? (element) => {
+					domRef.current = element;
+					tooltipRef.current = element;
+				} : domRef,
+				mods,
+				"data-type": type,
+				children: [
+					/* @__PURE__ */ jsx(HiddenInput, {
+						qa: qa || "Radio",
+						"data-input-type": "radio",
+						"aria-label": ariaLabel,
+						...mergeTooltipFocusProps(mergeProps$1(inputProps, focusProps), tooltipFocusProps_0),
+						ref: inputRef,
+						mods: { button: isButton }
+					}),
+					/* @__PURE__ */ jsx(RadioNormalElement, {
+						"data-element": "Input",
+						mods,
+						"data-type": type,
+						children: RadioCircleElement
+					}),
+					label && /* @__PURE__ */ jsx(RadioLabelElement, {
+						ref: tooltipLabelRef,
+						mods,
+						styles: labelStyles,
+						...labelProps ? filterBaseProps(labelProps) : void 0,
+						children: label
+					})
+				]
+			});
+		}, "top");
+		$[57] = ariaLabel;
+		$[58] = domRef;
+		$[59] = focusProps;
+		$[60] = hoverProps;
+		$[61] = inputProps;
+		$[62] = isButton;
+		$[63] = label;
+		$[64] = labelProps;
+		$[65] = labelStyles;
+		$[66] = mods;
+		$[67] = qa;
+		$[68] = renderWithTooltip;
+		$[69] = styles;
+		$[70] = tooltipLabelRef;
+		$[71] = type;
+		$[72] = t12;
+	} else t12 = $[72];
+	return t12;
 }
 /**
 * Radio buttons allow users to select a single option from a list of mutually exclusive options.