@cube-dev/ui-kit 0.200.1 → 0.202.0

package/dist/components/fields/Switch/Switch.js

@@ -1,17 +1,21 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useId as useId$2 } from "../../../utils/react/useId.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Text as _Text } from "../../content/Text.js";
+import { getDisabledElementProps, getInertInputProps } from "../../../utils/react/disabledProps.js";
+import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
+import { useAutoTooltip } from "../../content/use-auto-tooltip.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { mergeTooltipFocusProps, splitTooltipTriggerProps } from "../../overlays/Tooltip/split-trigger-props.js";
 import { castNullableIsSelected } from "../../../utils/react/nullableValue.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.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 { HiddenInput } from "../../HiddenInput.js";
 import { c } from "react/compiler-runtime";
-import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useHover, useSwitch } from "react-aria";
@@ -43,16 +47,19 @@ const SwitchElement = tasty({ styles: {
 		checked: "#primary",
 		"invalid & checked": "#danger",
 		"valid & checked": "#success",
+		readonly: "#surface-2",
 		disabled: "#border.5",
 		"disabled & checked": "#border"
 	},
 	color: {
 		"": "#dark-03",
-		checked: "#white"
+		checked: "#white",
+		"readonly & checked": "#dark-02"
 	},
 	border: {
 		"": "#dark-05",
 		checked: "#primary-text",
+		readonly: "#dark-05",
 		disabled: "#dark-05.5",
 		invalid: "#danger",
 		valid: "#success"
@@ -109,9 +116,8 @@ const SwitchElement = tasty({ styles: {
 		cursor: "$pointer"
 	}
 } });
-const PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];
 function Switch(rawProps, ref) {
-	const $ = c(56);
+	const $ = c(10);
 	let t0;
 	if ($[0] !== rawProps) {
 		t0 = castNullableIsSelected(rawProps);
@@ -128,185 +134,111 @@ function Switch(rawProps, ref) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const props = useFieldProps(rawProps, t1);
-	const { qa, isDisabled: t2, children, label, insideForm, isLoading, labelPosition, inputStyles, isInvalid, isValid, size: t3 } = props;
+	const { qa, isDisabled: t2, isReadOnly: t3, children, label, insideForm, isLoading, labelPosition, inputStyles, isInvalid, isValid, size: t4, tooltip } = props;
 	const isDisabled = t2 === void 0 ? false : t2;
-	const size = t3 === void 0 ? "medium" : t3;
+	const isReadOnly = t3 === void 0 ? false : t3;
+	const size = t4 === void 0 ? "medium" : t4;
 	const id = useId$2(props.id);
-	let t4;
-	if ($[3] !== props) {
-		t4 = extractStyles(props, PROP_STYLES);
-		$[3] = props;
-		$[4] = t4;
-	} else t4 = $[4];
-	const styles = t4;
+	const { styles, field } = splitFieldLayout(props);
 	const { isFocused, focusProps } = useFocus$1(true);
-	let t5;
-	if ($[5] !== isDisabled) {
-		t5 = { isDisabled };
-		$[5] = isDisabled;
-		$[6] = t5;
-	} else t5 = $[6];
-	const { hoverProps, isHovered } = useHover(t5);
+	const t5 = isDisabled || isReadOnly;
+	let t6;
+	if ($[3] !== t5) {
+		t6 = { isDisabled: t5 };
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
+	const { hoverProps, isHovered } = useHover(t6);
 	const inputRef = useRef(null);
 	const domRef = useFocusableRef(ref, inputRef);
-	const t6 = children ?? label;
 	let t7;
-	if ($[7] !== props || $[8] !== t6) {
+	if ($[5] !== tooltip) {
 		t7 = {
+			tooltip,
+			children: null
+		};
+		$[5] = tooltip;
+		$[6] = t7;
+	} else t7 = $[6];
+	const { renderWithTooltip, isTooltipActive } = useAutoTooltip(t7);
+	const t8 = children ?? label;
+	let t9;
+	if ($[7] !== props || $[8] !== t8) {
+		t9 = {
 			...props,
 			form: void 0,
-			children: t6
+			children: t8
 		};
 		$[7] = props;
-		$[8] = t6;
-		$[9] = t7;
-	} else t7 = $[9];
-	const { inputProps } = useSwitch(t7, useToggleState(props), inputRef);
-	const t8 = inputProps.checked;
-	let t9;
-	if ($[10] !== isInvalid || $[11] !== isValid) {
-		t9 = getValidationMods({
+		$[8] = t8;
+		$[9] = t9;
+	} else t9 = $[9];
+	const { inputProps: t10, isDisabled: isInputDisabled } = useSwitch(t9, useToggleState(props), inputRef);
+	let inputProps = t10;
+	if (getDisabledElementProps({
+		isDisabled: isInputDisabled,
+		keepEvents: isTooltipActive,
+		as: "input"
+	}).isInert) inputProps = getInertInputProps(inputProps, { excludeFromTabOrder: props.excludeFromTabOrder });
+	const mods = {
+		checked: inputProps.checked,
+		disabled: isDisabled,
+		readonly: isReadOnly,
+		hovered: isHovered,
+		focused: isFocused,
+		...getValidationMods({
 			isInvalid,
 			isValid
-		});
-		$[10] = isInvalid;
-		$[11] = isValid;
-		$[12] = t9;
-	} else t9 = $[12];
-	const t10 = labelPosition === "side";
-	let t11;
-	if ($[13] !== inputProps.checked || $[14] !== insideForm || $[15] !== isDisabled || $[16] !== isFocused || $[17] !== isHovered || $[18] !== t10 || $[19] !== t9) {
-		t11 = {
-			checked: t8,
-			disabled: isDisabled,
-			hovered: isHovered,
-			focused: isFocused,
-			...t9,
-			"inside-form": insideForm,
-			"side-label": t10
-		};
-		$[13] = inputProps.checked;
-		$[14] = insideForm;
-		$[15] = isDisabled;
-		$[16] = isFocused;
-		$[17] = isHovered;
-		$[18] = t10;
-		$[19] = t9;
-		$[20] = t11;
-	} else t11 = $[20];
-	const mods = t11;
-	const t12 = qa || "Switch";
-	let t13;
-	if ($[21] !== props.autoFocus) {
-		t13 = props.autoFocus ? { "data-autofocus": "" } : void 0;
-		$[21] = props.autoFocus;
-		$[22] = t13;
-	} else t13 = $[22];
-	let t14;
-	if ($[23] !== focusProps || $[24] !== inputProps) {
-		t14 = mergeProps$1(inputProps, focusProps);
-		$[23] = focusProps;
-		$[24] = inputProps;
-		$[25] = t14;
-	} else t14 = $[25];
-	let t15;
-	if ($[26] !== id || $[27] !== t12 || $[28] !== t13 || $[29] !== t14) {
-		t15 = /* @__PURE__ */ jsx(HiddenInput, {
-			qa: t12,
-			"data-input-type": "switch",
-			...t13,
-			...t14,
-			ref: inputRef,
-			id
-		});
-		$[26] = id;
-		$[27] = t12;
-		$[28] = t13;
-		$[29] = t14;
-		$[30] = t15;
-	} else t15 = $[30];
-	let t16;
-	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = /* @__PURE__ */ jsx("div", {
-			"data-element": "Thumb",
-			"aria-hidden": "true"
-		});
-		$[31] = t16;
-	} else t16 = $[31];
-	let t17;
-	if ($[32] !== inputStyles || $[33] !== mods || $[34] !== size) {
-		t17 = /* @__PURE__ */ jsx(SwitchElement, {
-			"data-element": "Input",
-			mods,
-			"data-size": size,
-			styles: inputStyles,
-			children: t16
-		});
-		$[32] = inputStyles;
-		$[33] = mods;
-		$[34] = size;
-		$[35] = t17;
-	} else t17 = $[35];
-	let t18;
-	if ($[36] !== children) {
-		t18 = children ? /* @__PURE__ */ jsx(_Text, { children }) : null;
-		$[36] = children;
-		$[37] = t18;
-	} else t18 = $[37];
-	let t19;
-	if ($[38] !== isLoading || $[39] !== label) {
-		t19 = isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label ? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }) : null, /* @__PURE__ */ jsx(LoadingIcon, {})] }) : null;
-		$[38] = isLoading;
-		$[39] = label;
-		$[40] = t19;
-	} else t19 = $[40];
-	let t20;
-	if ($[41] !== domRef || $[42] !== hoverProps || $[43] !== mods || $[44] !== size || $[45] !== styles || $[46] !== t15 || $[47] !== t17 || $[48] !== t18 || $[49] !== t19) {
-		t20 = /* @__PURE__ */ jsxs(SwitchWrapperElement, {
-			ref: domRef,
+		}),
+		"inside-form": insideForm,
+		"side-label": labelPosition === "side"
+	};
+	const switchField = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {
+		const { pointerProps, focusProps: tooltipFocusProps } = splitTooltipTriggerProps(tooltipTriggerProps);
+		return /* @__PURE__ */ jsxs(SwitchWrapperElement, {
+			ref: tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef,
 			qa: "SwitchWrapper",
 			mods,
 			"data-size": size,
 			styles,
-			...hoverProps,
+			...mergeProps$1(hoverProps, pointerProps),
 			children: [
-				t15,
-				t17,
-				t18,
-				t19
+				/* @__PURE__ */ jsx(HiddenInput, {
+					qa: qa || "Switch",
+					"data-input-type": "switch",
+					...props.autoFocus ? { "data-autofocus": "" } : void 0,
+					...mergeTooltipFocusProps(mergeProps$1(inputProps, focusProps), tooltipFocusProps),
+					ref: inputRef,
+					id,
+					mods: { disabled: isInputDisabled }
+				}),
+				/* @__PURE__ */ jsx(SwitchElement, {
+					"data-element": "Input",
+					mods,
+					"data-size": size,
+					styles: inputStyles,
+					children: /* @__PURE__ */ jsx("div", {
+						"data-element": "Thumb",
+						"aria-hidden": "true"
+					})
+				}),
+				children ? /* @__PURE__ */ jsx(_Text, { children }) : null,
+				isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label ? /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }) : null, /* @__PURE__ */ jsx(LoadingIcon, {})] }) : null
 			]
 		});
-		$[41] = domRef;
-		$[42] = hoverProps;
-		$[43] = mods;
-		$[44] = size;
-		$[45] = styles;
-		$[46] = t15;
-		$[47] = t17;
-		$[48] = t18;
-		$[49] = t19;
-		$[50] = t20;
-	} else t20 = $[50];
-	const switchField = t20;
-	let t21;
-	if ($[51] !== id || $[52] !== inputStyles || $[53] !== props || $[54] !== switchField) {
-		t21 = wrapWithField(switchField, {
-			...props,
-			id,
-			labelProps: {
-				...props.labelProps,
-				for: id
-			},
-			children: null,
-			inputStyles
-		});
-		$[51] = id;
-		$[52] = inputStyles;
-		$[53] = props;
-		$[54] = switchField;
-		$[55] = t21;
-	} else t21 = $[55];
-	return t21;
+	}, "top");
+	return wrapWithField(switchField, {
+		...props,
+		...field,
+		tooltip: void 0,
+		id,
+		labelProps: {
+			...props.labelProps,
+			for: id
+		},
+		children: null,
+		inputStyles
+	});
 }
 /**
 * Switches allow users to turn an individual option on or off.

package/dist/components/fields/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["useFocusableRef","BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","forwardRef","useRef","AriaSwitchProps","useHover","useSwitch","useToggleState","LoadingIcon","FieldBaseProps","ToggleSelectionProps","mergeProps","useFocus","castNullableIsSelected","WithNullableSelected","useId","extractStyles","Text","getValidationMods","useFieldProps","wrapWithField","HiddenInput","SwitchWrapperElement","as","styles","display","position","placeItems","gap","width","color","SwitchElement","boxSizing","verticalAlign","placeSelf","radius","fill","checked","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","cursor","Thumb","top","left","PROP_STYLES","CubeSwitchProps","Omit","inputStyles","isLoading","size","Switch","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","qa","isDisabled","t2","children","label","insideForm","labelPosition","isInvalid","isValid","t3","undefined","id","t4","isFocused","focusProps","t5","hoverProps","isHovered","inputRef","domRef","t6","t7","form","inputProps","t8","t9","t10","t11","hovered","mods","t12","t13","autoFocus","t14","t15","t16","t17","t18","t19","t20","switchField","t21","labelProps","value","onChange","isSelected","isIndeterminate","_Switch","cubeInputType","displayName","_c","useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { extractStyles } from '../../../utils/styles';\nimport { Text } from '../../content/Text';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\n\nconst SwitchWrapperElement = tasty({\n  as: 'label',\n  styles: {\n    display: 'flex',\n    position: 'relative',\n    placeItems: {\n      '': 'center stretch',\n      'side-label': 'baseline stretch',\n    },\n    gap: '1x',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst SwitchElement = tasty({\n  styles: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    verticalAlign: 'baseline',\n    placeSelf: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      checked: '#primary',\n      'invalid & checked': '#danger',\n      'valid & checked': '#success',\n      disabled: '#border.5',\n      'disabled & checked': '#border',\n    },\n    color: {\n      '': '#dark-03',\n      checked: '#white',\n    },\n    border: {\n      '': '#dark-05',\n      checked: '#primary-text',\n      disabled: '#dark-05.5',\n      invalid: '#danger',\n      valid: '#success',\n    },\n    width: {\n      '': '5x 5x',\n      'size=medium': '4x 4x',\n      'size=small': '3x 3x',\n    },\n    height: {\n      '': '3x 3x',\n      'size=medium': '2.5x 2.5x',\n      'size=small': '2x 2x',\n    },\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n    cursor: '$pointer',\n\n    Thumb: {\n      position: 'absolute',\n      width: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      height: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      radius: 'round',\n      fill: {\n        '': '#current',\n        disabled: '#current.5',\n        'disabled & checked': '#white.8',\n      },\n      top: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n      },\n      left: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n        checked: '2.25x',\n        'checked & size=medium': '1.75x',\n        'checked & size=small': '1.25x',\n      },\n      transition: 'left, theme',\n      cursor: '$pointer',\n    },\n  },\n});\n\nconst PROP_STYLES = [...OUTER_STYLES, ...BLOCK_STYLES];\n\nexport interface CubeSwitchProps\n  extends\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<boolean | null | undefined>,\n    ToggleSelectionProps,\n    Omit<AriaSwitchProps, 'form' | 'name'> {\n  inputStyles?: Styles;\n  isLoading?: boolean;\n  size?: 'large' | 'medium' | 'small';\n}\n\nfunction Switch(rawProps: WithNullableSelected<CubeSwitchProps>, ref) {\n  rawProps = castNullableIsSelected(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    qa,\n    isDisabled = false,\n    children,\n    label,\n    insideForm,\n    isLoading,\n    labelPosition,\n    inputStyles,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    form,\n  } = props;\n\n  const id = useId(props.id);\n\n  let styles = extractStyles(props, PROP_STYLES);\n\n  let { isFocused, focusProps } = useFocus(true);\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a switch with no visible label; a\n  // field `label` is one, named through its `<label for>`.\n  let { inputProps } = useSwitch(\n    { ...props, form: undefined, children: children ?? label },\n    useToggleState(props),\n    inputRef,\n  );\n\n  const mods = {\n    checked: inputProps.checked,\n    disabled: isDisabled,\n    hovered: isHovered,\n    focused: isFocused,\n    ...getValidationMods({ isInvalid, isValid }),\n    'inside-form': insideForm,\n    'side-label': labelPosition === 'side',\n  };\n\n  const switchField = (\n    <SwitchWrapperElement\n      ref={domRef}\n      qa=\"SwitchWrapper\"\n      mods={mods}\n      data-size={size}\n      styles={styles}\n      {...hoverProps}\n    >\n      <HiddenInput\n        qa={qa || 'Switch'}\n        data-input-type=\"switch\"\n        // For a dialog kept mounted while closed, as on `Button`.\n        {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        id={id}\n      />\n      <SwitchElement\n        data-element=\"Input\"\n        mods={mods}\n        data-size={size}\n        styles={inputStyles}\n      >\n        <div data-element=\"Thumb\" aria-hidden=\"true\" />\n      </SwitchElement>\n      {/*\n        Not `nowrap`: it inherits, so no label could wrap and a long one ran out\n        of its container. The label inherits the wrapper's font and color, so\n        a caller's `styles` reach it.\n      */}\n      {children ? <Text>{children}</Text> : null}\n      {isLoading ? (\n        <>\n          {label ? <>&nbsp;</> : null}\n          <LoadingIcon />\n        </>\n      ) : null}\n    </SwitchWrapperElement>\n  );\n\n  return wrapWithField(switchField, {\n    ...props,\n    id,\n    labelProps: {\n      ...props.labelProps,\n      for: id,\n    },\n    children: null,\n    inputStyles,\n  });\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["useFocusableRef","BaseProps","Styles","tasty","forwardRef","ReactElement","useRef","AriaSwitchProps","useHover","useSwitch","useToggleState","LoadingIcon","FieldBaseProps","ToggleSelectionProps","mergeProps","mergeRefs","getDisabledElementProps","getInertInputProps","useFocus","castNullableIsSelected","WithNullableSelected","useId","Text","useAutoTooltip","getValidationMods","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","HiddenInput","mergeTooltipFocusProps","splitTooltipTriggerProps","CubeTooltipProviderProps","SwitchWrapperElement","as","styles","display","position","placeItems","gap","width","color","SwitchElement","boxSizing","verticalAlign","placeSelf","radius","fill","checked","readonly","disabled","border","invalid","valid","height","outline","focused","outlineOffset","transition","cursor","Thumb","top","left","CubeSwitchProps","Omit","inputStyles","isLoading","size","tooltip","Switch","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","qa","isDisabled","t2","isReadOnly","t3","children","label","insideForm","labelPosition","isInvalid","isValid","t4","undefined","id","field","isFocused","focusProps","t5","t6","hoverProps","isHovered","inputRef","domRef","t7","renderWithTooltip","isTooltipActive","t8","t9","form","inputProps","t10","isInputDisabled","keepEvents","isInert","excludeFromTabOrder","mods","hovered","switchField","tooltipTriggerProps","tooltipRef","pointerProps","tooltipFocusProps","autoFocus","labelProps","value","onChange","isSelected","isIndeterminate","_Switch","cubeInputType","displayName","_c","useId","useFocus","mergeProps","Text"],"sources":["../../../../src/components/fields/Switch/Switch.tsx"],"sourcesContent":["import { useFocusableRef } from '@react-spectrum/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, ReactElement, useRef } from 'react';\nimport { AriaSwitchProps, useHover, useSwitch } from 'react-aria';\nimport { useToggleState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { FieldBaseProps, ToggleSelectionProps } from '../../../shared';\nimport { mergeProps, mergeRefs } from '../../../utils/react';\nimport {\n  getDisabledElementProps,\n  getInertInputProps,\n} from '../../../utils/react/disabledProps';\nimport { useFocus } from '../../../utils/react/interactions';\nimport {\n  castNullableIsSelected,\n  WithNullableSelected,\n} from '../../../utils/react/nullableValue';\nimport { useId } from '../../../utils/react/useId';\nimport { Text } from '../../content/Text';\nimport { useAutoTooltip } from '../../content/use-auto-tooltip';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { HiddenInput } from '../../HiddenInput';\nimport {\n  mergeTooltipFocusProps,\n  splitTooltipTriggerProps,\n} from '../../overlays/Tooltip/split-trigger-props';\n\nimport type { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';\n\nconst SwitchWrapperElement = tasty({\n  as: 'label',\n  styles: {\n    display: 'flex',\n    position: 'relative',\n    placeItems: {\n      '': 'center stretch',\n      'side-label': 'baseline stretch',\n    },\n    gap: '1x',\n    width: 'max max-content',\n    color: '#dark-02',\n  },\n});\n\nconst SwitchElement = tasty({\n  styles: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    verticalAlign: 'baseline',\n    placeSelf: 'center',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      checked: '#primary',\n      'invalid & checked': '#danger',\n      'valid & checked': '#success',\n      readonly: '#surface-2',\n      disabled: '#border.5',\n      'disabled & checked': '#border',\n    },\n    color: {\n      '': '#dark-03',\n      checked: '#white',\n      'readonly & checked': '#dark-02',\n    },\n    border: {\n      '': '#dark-05',\n      checked: '#primary-text',\n      readonly: '#dark-05',\n      disabled: '#dark-05.5',\n      invalid: '#danger',\n      valid: '#success',\n    },\n    width: {\n      '': '5x 5x',\n      'size=medium': '4x 4x',\n      'size=small': '3x 3x',\n    },\n    height: {\n      '': '3x 3x',\n      'size=medium': '2.5x 2.5x',\n      'size=small': '2x 2x',\n    },\n    outline: {\n      '': '#primary-text.0',\n      focused: '$ring-width #primary-text',\n    },\n    outlineOffset: '$outline-offset',\n    transition: 'theme',\n    cursor: '$pointer',\n\n    Thumb: {\n      position: 'absolute',\n      width: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      height: {\n        '': '2x 2x',\n        'size=medium': '1.5x 1.5x',\n        'size=small': '1.25x 1.25x',\n      },\n      radius: 'round',\n      fill: {\n        '': '#current',\n        disabled: '#current.5',\n        'disabled & checked': '#white.8',\n      },\n      top: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n      },\n      left: {\n        '': '.375x',\n        'size=medium': '.375x',\n        'size=small': '.25x',\n        checked: '2.25x',\n        'checked & size=medium': '1.75x',\n        'checked & size=small': '1.25x',\n      },\n      transition: 'left, theme',\n      cursor: '$pointer',\n    },\n  },\n});\n\nexport interface CubeSwitchProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<boolean | null | undefined>,\n    ToggleSelectionProps,\n    Omit<AriaSwitchProps, 'form' | 'name'> {\n  inputStyles?: Styles;\n  isLoading?: boolean;\n  size?: 'large' | 'medium' | 'small';\n  /**\n   * The switch's own tooltip, shown on hover over the switch and its inline\n   * label and on keyboard focus, also while the switch is disabled: a disabled\n   * switch with a tooltip stays focusable. A string, or `TooltipProvider` props\n   * (`title`, `placement`, …). The info badge next to a field label is\n   * `labelTooltip`.\n   */\n  tooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;\n}\n\nfunction Switch(rawProps: WithNullableSelected<CubeSwitchProps>, ref) {\n  rawProps = castNullableIsSelected(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    qa,\n    isDisabled = false,\n    isReadOnly = false,\n    children,\n    label,\n    insideForm,\n    isLoading,\n    labelPosition,\n    inputStyles,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    form,\n    tooltip,\n  } = props;\n\n  const id = useId(props.id);\n\n  const { styles, field } = splitFieldLayout(props);\n\n  let { isFocused, focusProps } = useFocus(true);\n  // A read-only switch takes no hover state: a press would change nothing.\n  let { hoverProps, isHovered } = useHover({\n    isDisabled: isDisabled || isReadOnly,\n  });\n\n  let inputRef = useRef(null);\n  let domRef = useFocusableRef(ref, inputRef);\n\n  let { renderWithTooltip, isTooltipActive } = useAutoTooltip({\n    tooltip,\n    children: null,\n  });\n\n  // React Aria writes `form` onto the input as the id of its `<form>`, so the\n  // form instance would render as `form=\"[object Object]\"` and detach it. It\n  // reads `children` only to warn about a switch with no visible label; a\n  // field `label` is one, named through its `<label for>`.\n  let { inputProps, isDisabled: isInputDisabled } = useSwitch(\n    { ...props, form: undefined, children: children ?? label },\n    useToggleState(props),\n    inputRef,\n  );\n\n  // A disabled switch with a tooltip keeps its focus, as `Checkbox` does: the\n  // tooltip is usually the reason it is disabled, and focus is how the keyboard\n  // opens it. It is `aria-disabled` and inert instead.\n  if (\n    getDisabledElementProps({\n      isDisabled: isInputDisabled,\n      keepEvents: isTooltipActive,\n      as: 'input',\n    }).isInert\n  ) {\n    inputProps = getInertInputProps(inputProps, {\n      excludeFromTabOrder: props.excludeFromTabOrder,\n    });\n  }\n\n  const mods = {\n    checked: inputProps.checked,\n    disabled: isDisabled,\n    readonly: isReadOnly,\n    hovered: isHovered,\n    focused: isFocused,\n    ...getValidationMods({ isInvalid, isValid }),\n    'inside-form': insideForm,\n    'side-label': labelPosition === 'side',\n  };\n\n  // The input, where keyboard focus lands, takes the tooltip's focus-side\n  // trigger props; the wrapper keeps the hover side and positions the tooltip.\n  // It shares the field's ref, which is the wrapper with or without chrome.\n  const switchField = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {\n    const { pointerProps, focusProps: tooltipFocusProps } =\n      splitTooltipTriggerProps(tooltipTriggerProps);\n\n    return (\n      <SwitchWrapperElement\n        ref={tooltipRef ? mergeRefs(domRef, tooltipRef) : domRef}\n        qa=\"SwitchWrapper\"\n        mods={mods}\n        data-size={size}\n        styles={styles}\n        {...mergeProps(hoverProps, pointerProps)}\n      >\n        <HiddenInput\n          qa={qa || 'Switch'}\n          data-input-type=\"switch\"\n          // For a dialog kept mounted while closed, as on `Button`.\n          {...(props.autoFocus ? { 'data-autofocus': '' } : undefined)}\n          {...mergeTooltipFocusProps(\n            mergeProps(inputProps, focusProps),\n            tooltipFocusProps,\n          )}\n          ref={inputRef}\n          id={id}\n          // Not left to the native `disabled`, which an inert input drops.\n          mods={{ disabled: isInputDisabled }}\n        />\n        <SwitchElement\n          data-element=\"Input\"\n          mods={mods}\n          data-size={size}\n          styles={inputStyles}\n        >\n          <div data-element=\"Thumb\" aria-hidden=\"true\" />\n        </SwitchElement>\n        {/*\n          Not `nowrap`: it inherits, so no label could wrap and a long one ran out\n          of its container. The label inherits the wrapper's font and color, so\n          a caller's `styles` reach it.\n        */}\n        {children ? <Text>{children}</Text> : null}\n        {isLoading ? (\n          <>\n            {label ? <>&nbsp;</> : null}\n            <LoadingIcon />\n          </>\n        ) : null}\n      </SwitchWrapperElement>\n    );\n  }, 'top');\n\n  // `renderWithTooltip` is typed for any node; here it returns an element.\n  return wrapWithField(switchField as ReactElement, {\n    ...props,\n    ...field,\n    // The switch's own, not the legacy spelling of `labelTooltip`.\n    tooltip: undefined,\n    id,\n    labelProps: {\n      ...props.labelProps,\n      for: id,\n    },\n    children: null,\n    inputStyles,\n  });\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = forwardRef(Switch);\n\n(_Switch as any).cubeInputType = 'Checkbox';\n_Switch.displayName = 'Switch';\n\nexport { _Switch as Switch };\nexport type { AriaSwitchProps };\nexport { useSwitch };\n"],"mappings":"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"}

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

@@ -3,8 +3,9 @@ import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CollectionItem as _CollectionItem } from "../../CollectionItem.js";
 import { CubeTagProps } from "../../content/Tag/Tag.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { WithNullableValue } from "../../../utils/react/nullableValue.js";
-import { BasePropsWithoutChildren, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { BasePropsWithoutChildren, Styles } from "@tenphi/tasty";
 import { ForwardedRef, KeyboardEvent, ReactElement, ReactNode, RefObject } from "react";
 import { Section } from "react-stately";
 import { Key as Key$1 } from "@react-types/shared";
@@ -17,7 +18,7 @@ export type TagInputPopoverTrigger = 'focus' | 'input' | 'manual';
  * message.
  */
 export type TagValidationResult = boolean | string | null | undefined;
-export interface CubeTagInputProps<T = object> extends BasePropsWithoutChildren, ContainerStyleProps, FieldBaseProps<readonly string[] | null | undefined> {
+export interface CubeTagInputProps<T = object> extends BasePropsWithoutChildren, FieldLayoutStyleProps, FieldBaseProps<readonly string[] | null | undefined> {
   /** The values in controlled mode. */
   value?: readonly string[];
   /** The initial values in uncontrolled mode. */
@@ -53,6 +54,8 @@ export interface CubeTagInputProps<T = object> extends BasePropsWithoutChildren,
   /**
    * Called when a key is pressed in the input, before the component handles it.
    * Call `e.preventDefault()` to stop the component from handling the key.
+   * `Escape` and `Tab` go on to a surrounding dialog unless TagInput acts on
+   * them or the handler prevents them.
    */
   onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   /**

package/dist/components/fields/TagInput/TagInput.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -10,20 +9,22 @@ import { useFormatter } from "../../../i18n/useFormatter.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { generateRandomId } from "../../../utils/random.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { settleOverlayKey } from "../../../utils/react/overlayKeyPropagation.js";
 import { castNullableArrayValue } from "../../../utils/react/nullableValue.js";
 import { withFieldChrome } from "../../form/field-chrome.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { rendersFieldChrome, wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { getListBoxOptionId } from "../ListBox/optionId.js";
 import { collectVisibleKeys, filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey } from "../ListBoxPopover/listNavigation.js";
-import { TextInputBase } from "../TextInput/TextInputBase.js";
+import { TextInputBase as _TextInputBase } from "../TextInput/TextInputBase.js";
 import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
 import { TagList } from "./TagList.js";
 import { useActiveOption } from "./useActiveOption.js";
 import { useTagError } from "./useTagError.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { cloneElement, forwardRef, isValidElement, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { VisuallyHidden, useFilter, useId as useId$1, useTextField } from "react-aria";
@@ -332,7 +333,7 @@ function TagInput(props, ref) {
 	const overlayOffset = t8 === void 0 ? 8 : t8;
 	const containerPadding = t9 === void 0 ? 8 : t9;
 	const size = t10 === void 0 ? "medium" : t10;
-	const styles = extractStyles(otherProps, CONTAINER_STYLES);
+	const { styles, field } = splitFieldLayout(props);
 	const rootRef = useCombinedRefs(ref);
 	const inputRef = useCombinedRefs(inputRefProp);
 	const wrapperRef = useCombinedRefs(wrapperRefProp);
@@ -723,14 +724,16 @@ function TagInput(props, ref) {
 	const handleEscapeKey = useEvent(t23);
 	const handleKeyDown = useEvent((e_5) => {
 		onKeyDown?.(e_5);
+		if (!e_5.defaultPrevented && isInteractive) {
+			if (e_5.key === "ArrowDown" || e_5.key === "ArrowUp") handleArrowKey(e_5);
+			else if ((e_5.key === "Home" || e_5.key === "End") && shouldShowPopover) handleEdgeKey(e_5);
+			else if (e_5.key === "Backspace" && !draft && uniqueValues.some((value_4) => !isTagLocked(value_4))) handleBackspaceKey(e_5);
+			else if (e_5.key === "Enter") handleEnterKey(e_5);
+			else if (delimiters.includes(e_5.key)) handleDelimiterKey(e_5);
+			else if (e_5.key === "Escape") handleEscapeKey(e_5);
+		}
 		isTabbingRef.current = e_5.key === "Tab" && !e_5.defaultPrevented;
-		if (e_5.defaultPrevented || !isInteractive) return;
-		if (e_5.key === "ArrowDown" || e_5.key === "ArrowUp") handleArrowKey(e_5);
-		else if ((e_5.key === "Home" || e_5.key === "End") && shouldShowPopover) handleEdgeKey(e_5);
-		else if (e_5.key === "Backspace" && !draft && uniqueValues.some((value_4) => !isTagLocked(value_4))) handleBackspaceKey(e_5);
-		else if (e_5.key === "Enter") handleEnterKey(e_5);
-		else if (delimiters.includes(e_5.key)) handleDelimiterKey(e_5);
-		else if (e_5.key === "Escape") handleEscapeKey(e_5);
+		settleOverlayKey(e_5);
 	});
 	const handleInputChange = useEvent((next_3) => {
 		setTagError(null);
@@ -949,7 +952,7 @@ function TagInput(props, ref) {
 		styles,
 		...compositeFocusProps,
 		children: [
-			/* @__PURE__ */ jsx(TextInputBase, {
+			/* @__PURE__ */ jsx(_TextInputBase, {
 				isBare: true,
 				qa: qa || "TagInput",
 				inputRef,
@@ -964,6 +967,7 @@ function TagInput(props, ref) {
 				size,
 				autoFocus,
 				isDisabled,
+				isReadOnly,
 				isLoading,
 				isInvalid: effectiveIsInvalid,
 				isValid,
@@ -1026,6 +1030,7 @@ function TagInput(props, ref) {
 	const { children: _children, ...fieldProps } = props;
 	return wrapWithField(tagInputField, {
 		...fieldProps,
+		...field,
 		labelProps: mergeProps$1(labelProps, userLabelProps),
 		isInvalid: effectiveIsInvalid,
 		message: tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message,