@cube-dev/ui-kit 0.201.0 → 0.203.0

package/dist/components/fields/ColorPicker/ColorPicker.d.ts

@@ -3,15 +3,16 @@ import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import "../../content/Item/index.js";
 import { CubeItemBaseProps as CubeItemProps } from "../../content/Item/Item.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { ColorFormat } from "../color/color.js";
 import { ColorSpace } from "../color/channels.js";
 import { CubeColorSwatchItem } from "../ColorSwatchGroup/ColorSwatchGroup.js";
 import "../ColorSwatchGroup/index.js";
-import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { ReactNode, RefObject } from "react";
 import { Placement } from "react-aria";
 //#region src/components/fields/ColorPicker/ColorPicker.d.ts
-export interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps<string | null | undefined> {
+export interface CubeColorPickerProps extends BaseProps, FieldLayoutStyleProps, FieldBaseProps<string | null | undefined> {
   /** The selected color, as a color string. */
   value?: string | null;
   /** The initial color of an uncontrolled picker. */
@@ -54,7 +55,12 @@ export interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockS
   /** The visual type of the trigger. */
   type?: CubeItemProps['type'];
   theme?: CubeItemProps['theme'];
-  /** Tooltip for the trigger, separate from `labelTooltip`. */
+  /**
+   * Tooltip for the trigger. The info badge next to the field's label is
+   * `labelTooltip`.
+   */
+  tooltip?: CubeItemProps['tooltip'];
+  /** @deprecated Use `tooltip`. */
   triggerTooltip?: CubeItemProps['tooltip'];
   /** Colors to offer under the editor, for picking without dialing one in. */
   swatches?: CubeColorSwatchItem[];

package/dist/components/fields/ColorPicker/ColorPicker.js

@@ -1,14 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.201.0 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
 import { Text as _Text } from "../../content/Text.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ItemButton as _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
+import { TRIGGER_TOOLTIP_WARNING } from "../../form/legacy-tooltip.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
 import { formatColor, parseColor } from "../color/color.js";
 import { ColorPanel } from "../color/ColorPanel.js";
@@ -17,7 +19,7 @@ import { ColorSwatch } from "../ColorSwatch/ColorSwatch.js";
 import { ColorInput } from "../ColorInput/ColorInput.js";
 import { ColorSwatchGroup } from "../ColorSwatchGroup/ColorSwatchGroup.js";
 import { c } from "react/compiler-runtime";
-import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/fields/ColorPicker/ColorPicker.tsx
@@ -26,11 +28,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * a short screen, and would otherwise spill outside the popover's own border.
 */
 const POPOVER_STYLES = { overflow: "auto" };
-/**
-* The rule separating the palette from the editor. `Divider` is not used: it
-* places itself on named grid lines meant for menu layouts, which this panel
-* does not define, so it lands in the wrong row and spawns a stray column.
-*/
+/** The rule separating the palette from the editor. */
 const PALETTE_STYLES = {
 	border: "top",
 	padding: "1x top",
@@ -58,7 +56,7 @@ const ColorPickerWrapper = tasty({
 * typed: a toolbar, a chart legend, a cell in a dense table.
 */
 const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
-	const $ = c(98);
+	const $ = c(89);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -69,156 +67,152 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 		$[0] = t0;
 	} else t0 = $[0];
 	const props = useFieldProps(allProps, t0);
-	const { qa, id, value: value_0, defaultValue, onChange: onChange_0, format: t1, defaultSpace: t2, isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, targetRef, placement: t3, children, placeholder: t4, size, type: t5, theme: t6, triggerTooltip, swatches, swatchColumns, triggerStyles, swatchStyles, isDisabled, isReadOnly, isLoading, isInvalid, isValid, autoFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy } = props;
+	const { qa, id, value: value_0, defaultValue, onChange: onChange_0, format: t1, defaultSpace: t2, isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, targetRef, placement: t3, children, placeholder: t4, size, type: t5, theme: t6, tooltip, triggerTooltip, swatches, swatchColumns, triggerStyles, swatchStyles, isDisabled, isReadOnly, isLoading, isInvalid, isValid, autoFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy } = props;
 	const format = t1 === void 0 ? "hex" : t1;
 	const defaultSpace = t2 === void 0 ? "hst" : t2;
 	const placement = t3 === void 0 ? "bottom start" : t3;
 	const placeholder = t4 === void 0 ? "Pick a color" : t4;
 	const type = t5 === void 0 ? "outline" : t5;
 	const theme = t6 === void 0 ? "default" : t6;
-	let t7;
-	if ($[1] !== props) {
-		t7 = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
-		$[1] = props;
-		$[2] = t7;
-	} else t7 = $[2];
-	const styles = t7;
+	const { styles, field } = splitFieldLayout(props);
+	useWarn(triggerTooltip !== void 0, TRIGGER_TOOLTIP_WARNING);
 	const isEditingDisabled = isDisabled || isLoading;
-	let t8;
-	if ($[3] !== defaultValue || $[4] !== value_0) {
-		t8 = () => parseColor((value_0 ?? defaultValue ?? "").toString());
-		$[3] = defaultValue;
-		$[4] = value_0;
-		$[5] = t8;
-	} else t8 = $[5];
-	const [color, setColor] = useState(t8);
+	let t7;
+	if ($[1] !== defaultValue || $[2] !== value_0) {
+		t7 = () => parseColor((value_0 ?? defaultValue ?? "").toString());
+		$[1] = defaultValue;
+		$[2] = value_0;
+		$[3] = t7;
+	} else t7 = $[3];
+	const [color, setColor] = useState(t7);
 	const [space, setSpace] = useState(defaultSpace);
 	const [isOpen, setOpen] = useState(defaultOpen ?? false);
 	const emitted = useRef(value_0);
-	let t10;
+	let t8;
 	let t9;
-	if ($[6] !== value_0) {
-		t9 = () => {
+	if ($[4] !== value_0) {
+		t8 = () => {
 			if (value_0 === void 0 || value_0 === emitted.current) return;
 			emitted.current = value_0;
 			setColor(parseColor((value_0 ?? "").toString()));
 		};
-		t10 = [value_0];
-		$[6] = value_0;
-		$[7] = t10;
-		$[8] = t9;
+		t9 = [value_0];
+		$[4] = value_0;
+		$[5] = t8;
+		$[6] = t9;
 	} else {
-		t10 = $[7];
-		t9 = $[8];
+		t8 = $[5];
+		t9 = $[6];
 	}
-	useEffect(t9, t10);
-	let t11;
-	if ($[9] !== format || $[10] !== onChange_0) {
-		t11 = (next) => {
+	useEffect(t8, t9);
+	let t10;
+	if ($[7] !== format || $[8] !== onChange_0) {
+		t10 = (next) => {
 			const text = formatColor(next, format);
 			emitted.current = text;
 			setColor(next);
 			onChange_0?.(text);
 		};
-		$[9] = format;
-		$[10] = onChange_0;
-		$[11] = t11;
-	} else t11 = $[11];
-	const handleColorChange = useEvent(t11);
+		$[7] = format;
+		$[8] = onChange_0;
+		$[9] = t10;
+	} else t10 = $[9];
+	const handleColorChange = useEvent(t10);
+	let t11;
+	if ($[10] !== color || $[11] !== format) {
+		t11 = color ? formatColor(color, format) : null;
+		$[10] = color;
+		$[11] = format;
+		$[12] = t11;
+	} else t11 = $[12];
+	const colorText = t11;
 	let t12;
-	if ($[12] !== color || $[13] !== format) {
-		t12 = color ? formatColor(color, format) : null;
-		$[12] = color;
-		$[13] = format;
-		$[14] = t12;
-	} else t12 = $[14];
-	const colorText = t12;
-	let t13;
-	if ($[15] !== onChange_0) {
-		t13 = (next_0) => {
+	if ($[13] !== onChange_0) {
+		t12 = (next_0) => {
 			emitted.current = next_0;
 			setColor(next_0 ? parseColor(next_0) : null);
 			onChange_0?.(next_0);
 		};
-		$[15] = onChange_0;
-		$[16] = t13;
-	} else t13 = $[16];
-	const handleValueChange = useEvent(t13);
-	let t14;
-	if ($[17] !== onOpenChange) {
-		t14 = (next_1) => {
+		$[13] = onChange_0;
+		$[14] = t12;
+	} else t12 = $[14];
+	const handleValueChange = useEvent(t12);
+	let t13;
+	if ($[15] !== onOpenChange) {
+		t13 = (next_1) => {
 			setOpen(next_1);
 			onOpenChange?.(next_1);
 		};
-		$[17] = onOpenChange;
-		$[18] = t14;
-	} else t14 = $[18];
-	const handleOpenChange = useEvent(t14);
-	let t15;
-	if ($[19] !== children || $[20] !== color || $[21] !== format || $[22] !== placeholder) {
-		t15 = children !== void 0 ? children : color ? formatColor(color, format) : /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
-		$[19] = children;
-		$[20] = color;
-		$[21] = format;
-		$[22] = placeholder;
-		$[23] = t15;
-	} else t15 = $[23];
-	const label = t15;
-	const t16 = controlledOpen ?? isOpen;
-	const t17 = qa || "ColorPickerTrigger";
-	let t18;
-	if ($[24] !== isInvalid || $[25] !== isValid || $[26] !== theme) {
-		t18 = getValidationTheme(theme, {
+		$[15] = onOpenChange;
+		$[16] = t13;
+	} else t13 = $[16];
+	const handleOpenChange = useEvent(t13);
+	let t14;
+	if ($[17] !== children || $[18] !== color || $[19] !== format || $[20] !== placeholder) {
+		t14 = children !== void 0 ? children : color ? formatColor(color, format) : /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
+		$[17] = children;
+		$[18] = color;
+		$[19] = format;
+		$[20] = placeholder;
+		$[21] = t14;
+	} else t14 = $[21];
+	const label = t14;
+	const t15 = controlledOpen ?? isOpen;
+	const t16 = qa || "ColorPickerTrigger";
+	let t17;
+	if ($[22] !== isInvalid || $[23] !== isValid || $[24] !== theme) {
+		t17 = getValidationTheme(theme, {
 			isInvalid,
 			isValid
 		});
-		$[24] = isInvalid;
-		$[25] = isValid;
-		$[26] = theme;
-		$[27] = t18;
-	} else t18 = $[27];
-	let t19;
-	if ($[28] !== color || $[29] !== swatchStyles) {
-		t19 = /* @__PURE__ */ jsx(ColorSwatch, {
+		$[22] = isInvalid;
+		$[23] = isValid;
+		$[24] = theme;
+		$[25] = t17;
+	} else t17 = $[25];
+	let t18;
+	if ($[26] !== color || $[27] !== swatchStyles) {
+		t18 = /* @__PURE__ */ jsx(ColorSwatch, {
 			size: "small",
 			color,
 			styles: swatchStyles
 		});
-		$[28] = color;
-		$[29] = swatchStyles;
-		$[30] = t19;
-	} else t19 = $[30];
-	let t20;
-	if ($[31] !== isInvalid || $[32] !== isValid) {
-		t20 = getValidationIcon({
+		$[26] = color;
+		$[27] = swatchStyles;
+		$[28] = t18;
+	} else t18 = $[28];
+	let t19;
+	if ($[29] !== isInvalid || $[30] !== isValid) {
+		t19 = getValidationIcon({
 			isInvalid,
 			isValid
 		});
-		$[31] = isInvalid;
-		$[32] = isValid;
-		$[33] = t20;
-	} else t20 = $[33];
+		$[29] = isInvalid;
+		$[30] = isValid;
+		$[31] = t19;
+	} else t19 = $[31];
+	const t20 = tooltip ?? triggerTooltip;
 	const t21 = isEditingDisabled || isReadOnly;
 	const t22 = !color;
 	let t23;
-	if ($[34] !== t22) {
+	if ($[32] !== t22) {
 		t23 = { placeholder: t22 };
-		$[34] = t22;
-		$[35] = t23;
-	} else t23 = $[35];
+		$[32] = t22;
+		$[33] = t23;
+	} else t23 = $[33];
 	let t24;
-	if ($[36] !== ariaDescribedBy || $[37] !== ariaLabel || $[38] !== autoFocus || $[39] !== id || $[40] !== label || $[41] !== size || $[42] !== t17 || $[43] !== t18 || $[44] !== t19 || $[45] !== t20 || $[46] !== t21 || $[47] !== t23 || $[48] !== triggerStyles || $[49] !== triggerTooltip || $[50] !== type) {
+	if ($[34] !== ariaDescribedBy || $[35] !== ariaLabel || $[36] !== autoFocus || $[37] !== id || $[38] !== label || $[39] !== size || $[40] !== t16 || $[41] !== t17 || $[42] !== t18 || $[43] !== t19 || $[44] !== t20 || $[45] !== t21 || $[46] !== t23 || $[47] !== triggerStyles || $[48] !== type) {
 		t24 = /* @__PURE__ */ jsx(_ItemButton, {
 			"data-popover-trigger": true,
 			id,
-			qa: t17,
+			qa: t16,
 			"data-input-type": "colorpicker",
 			type,
-			theme: t18,
+			theme: t17,
 			size,
-			icon: t19,
-			rightIcon: t20,
-			tooltip: triggerTooltip,
+			icon: t18,
+			rightIcon: t19,
+			tooltip: t20,
 			isDisabled: t21,
 			autoFocus,
 			"aria-label": ariaLabel,
@@ -227,39 +221,39 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 			styles: triggerStyles,
 			children: label
 		});
-		$[36] = ariaDescribedBy;
-		$[37] = ariaLabel;
-		$[38] = autoFocus;
-		$[39] = id;
-		$[40] = label;
-		$[41] = size;
-		$[42] = t17;
-		$[43] = t18;
-		$[44] = t19;
-		$[45] = t20;
-		$[46] = t21;
-		$[47] = t23;
-		$[48] = triggerStyles;
-		$[49] = triggerTooltip;
-		$[50] = type;
-		$[51] = t24;
-	} else t24 = $[51];
+		$[34] = ariaDescribedBy;
+		$[35] = ariaLabel;
+		$[36] = autoFocus;
+		$[37] = id;
+		$[38] = label;
+		$[39] = size;
+		$[40] = t16;
+		$[41] = t17;
+		$[42] = t18;
+		$[43] = t19;
+		$[44] = t20;
+		$[45] = t21;
+		$[46] = t23;
+		$[47] = triggerStyles;
+		$[48] = type;
+		$[49] = t24;
+	} else t24 = $[49];
 	let t25;
-	if ($[52] !== t) {
+	if ($[50] !== t) {
 		t25 = t("colorPicker.colorPicker", "Color picker");
-		$[52] = t;
-		$[53] = t25;
-	} else t25 = $[53];
+		$[50] = t;
+		$[51] = t25;
+	} else t25 = $[51];
 	const t26 = color ?? FALLBACK_COLOR;
 	const t27 = isEditingDisabled || isReadOnly;
 	let t28;
-	if ($[54] !== t) {
+	if ($[52] !== t) {
 		t28 = t("colorPicker.colorValue", "Color value");
-		$[54] = t;
-		$[55] = t28;
-	} else t28 = $[55];
+		$[52] = t;
+		$[53] = t28;
+	} else t28 = $[53];
 	let t29;
-	if ($[56] !== colorText || $[57] !== format || $[58] !== handleValueChange || $[59] !== isEditingDisabled || $[60] !== isReadOnly || $[61] !== t28) {
+	if ($[54] !== colorText || $[55] !== format || $[56] !== handleValueChange || $[57] !== isEditingDisabled || $[58] !== isReadOnly || $[59] !== t28) {
 		t29 = /* @__PURE__ */ jsx(ColorInput, {
 			isBare: true,
 			"aria-label": t28,
@@ -269,16 +263,16 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 			isReadOnly,
 			onChange: handleValueChange
 		});
-		$[56] = colorText;
-		$[57] = format;
-		$[58] = handleValueChange;
-		$[59] = isEditingDisabled;
-		$[60] = isReadOnly;
-		$[61] = t28;
-		$[62] = t29;
-	} else t29 = $[62];
+		$[54] = colorText;
+		$[55] = format;
+		$[56] = handleValueChange;
+		$[57] = isEditingDisabled;
+		$[58] = isReadOnly;
+		$[59] = t28;
+		$[60] = t29;
+	} else t29 = $[60];
 	let t30;
-	if ($[63] !== colorText || $[64] !== format || $[65] !== handleValueChange || $[66] !== isEditingDisabled || $[67] !== isReadOnly || $[68] !== swatchColumns || $[69] !== swatches || $[70] !== t) {
+	if ($[61] !== colorText || $[62] !== format || $[63] !== handleValueChange || $[64] !== isEditingDisabled || $[65] !== isReadOnly || $[66] !== swatchColumns || $[67] !== swatches || $[68] !== t) {
 		t30 = swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
 			isBare: true,
 			"aria-label": t("colorPicker.palette", "Palette"),
@@ -290,18 +284,18 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 			isDisabled: isEditingDisabled || isReadOnly,
 			onChange: handleValueChange
 		}) : null;
-		$[63] = colorText;
-		$[64] = format;
-		$[65] = handleValueChange;
-		$[66] = isEditingDisabled;
-		$[67] = isReadOnly;
-		$[68] = swatchColumns;
-		$[69] = swatches;
-		$[70] = t;
-		$[71] = t30;
-	} else t30 = $[71];
+		$[61] = colorText;
+		$[62] = format;
+		$[63] = handleValueChange;
+		$[64] = isEditingDisabled;
+		$[65] = isReadOnly;
+		$[66] = swatchColumns;
+		$[67] = swatches;
+		$[68] = t;
+		$[69] = t30;
+	} else t30 = $[69];
 	let t31;
-	if ($[72] !== format || $[73] !== handleColorChange || $[74] !== space || $[75] !== t26 || $[76] !== t27 || $[77] !== t29 || $[78] !== t30) {
+	if ($[70] !== format || $[71] !== handleColorChange || $[72] !== space || $[73] !== t26 || $[74] !== t27 || $[75] !== t29 || $[76] !== t30) {
 		t31 = /* @__PURE__ */ jsx(ColorPopoverContext.Provider, {
 			value: true,
 			children: /* @__PURE__ */ jsx(ColorPanel, {
@@ -315,69 +309,57 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 				onSpaceChange: setSpace
 			})
 		});
-		$[72] = format;
-		$[73] = handleColorChange;
-		$[74] = space;
-		$[75] = t26;
-		$[76] = t27;
-		$[77] = t29;
-		$[78] = t30;
-		$[79] = t31;
-	} else t31 = $[79];
+		$[70] = format;
+		$[71] = handleColorChange;
+		$[72] = space;
+		$[73] = t26;
+		$[74] = t27;
+		$[75] = t29;
+		$[76] = t30;
+		$[77] = t31;
+	} else t31 = $[77];
 	let t32;
-	if ($[80] !== t25 || $[81] !== t31) {
+	if ($[78] !== t25 || $[79] !== t31) {
 		t32 = /* @__PURE__ */ jsx(Dialog, {
 			"aria-label": t25,
 			width: "max-content",
 			styles: POPOVER_STYLES,
 			children: t31
 		});
-		$[80] = t25;
-		$[81] = t31;
-		$[82] = t32;
-	} else t32 = $[82];
+		$[78] = t25;
+		$[79] = t31;
+		$[80] = t32;
+	} else t32 = $[80];
 	let t33;
-	if ($[83] !== handleOpenChange || $[84] !== placement || $[85] !== shouldFlip || $[86] !== t16 || $[87] !== t24 || $[88] !== t32 || $[89] !== targetRef) {
+	if ($[81] !== handleOpenChange || $[82] !== placement || $[83] !== shouldFlip || $[84] !== t15 || $[85] !== t24 || $[86] !== t32 || $[87] !== targetRef) {
 		t33 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			placement,
 			targetRef,
-			isOpen: t16,
+			isOpen: t15,
 			shouldFlip,
 			onOpenChange: handleOpenChange,
 			children: [t24, t32]
 		});
-		$[83] = handleOpenChange;
-		$[84] = placement;
-		$[85] = shouldFlip;
-		$[86] = t16;
-		$[87] = t24;
-		$[88] = t32;
-		$[89] = targetRef;
-		$[90] = t33;
-	} else t33 = $[90];
-	let t34;
-	if ($[91] !== ref || $[92] !== styles || $[93] !== t33) {
-		t34 = /* @__PURE__ */ jsx(ColorPickerWrapper, {
-			ref,
-			styles,
-			children: t33
-		});
-		$[91] = ref;
-		$[92] = styles;
-		$[93] = t33;
-		$[94] = t34;
-	} else t34 = $[94];
-	const pickerField = t34;
-	let t35;
-	if ($[95] !== pickerField || $[96] !== props) {
-		t35 = wrapWithField(pickerField, props);
-		$[95] = pickerField;
-		$[96] = props;
-		$[97] = t35;
-	} else t35 = $[97];
-	return t35;
+		$[81] = handleOpenChange;
+		$[82] = placement;
+		$[83] = shouldFlip;
+		$[84] = t15;
+		$[85] = t24;
+		$[86] = t32;
+		$[87] = targetRef;
+		$[88] = t33;
+	} else t33 = $[88];
+	return wrapWithField(/* @__PURE__ */ jsx(ColorPickerWrapper, {
+		ref,
+		styles,
+		children: t33
+	}), {
+		...props,
+		...field,
+		tooltip: void 0
+	});
 });
 /**
 * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes