@cube-dev/ui-kit 0.0.0-canary-759f43d → 0.0.0-canary-77836fa

package/dist/components/form/FieldWrapper/FieldWrapper.js

@@ -1,5 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
-import { mergeProps } from "../../../utils/react/mergeProps.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";
@@ -15,8 +15,13 @@ import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden } from "react-aria";
 
 //#region src/components/form/FieldWrapper/FieldWrapper.tsx
+/** Empty slot values suppress content; numeric zero is still text. */
+function hasFieldContent(content) {
+	return content != null && typeof content !== "boolean" && content !== "";
+}
 const FieldElement = tasty({
 	qa: "Field",
 	styles: {
@@ -102,25 +107,33 @@ const LabelSuffixElement = tasty({ styles: {
 * @internal Do not use this component directly.
 */
 const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
-	const $ = c(71);
-	const { as, labelPosition: t0, label, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, controlId, isInvalid, isValid, requiredMark: t1, labelTooltip, isHidden, labelSuffix, children } = props;
+	const $ = c(90);
+	const { as, labelPosition: t0, label, isBare: t1, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, controlId, isInvalid, isValid, requiredMark: t2, labelTooltip, isHidden, labelSuffix, children } = props;
 	const labelPosition = t0 === void 0 ? "top" : t0;
-	const requiredMark = t1 === void 0 ? true : t1;
+	const isBare = t1 === void 0 ? false : t1;
+	const requiredMark = t2 === void 0 ? true : t2;
 	const { t } = useI18n();
 	warnAboutLegacyTooltip(props);
 	const showRequiredMark = !!requiredMark && !!isRequired;
 	const showOptionalNote = !isRequired && !!isOptional;
-	let t2;
+	let t3;
 	if ($[0] !== showOptionalNote || $[1] !== t) {
-		t2 = showOptionalNote ? t("form.optional", "(optional)") : null;
+		t3 = showOptionalNote ? t("form.optional", "(optional)") : null;
 		$[0] = showOptionalNote;
 		$[1] = t;
-		$[2] = t2;
-	} else t2 = $[2];
-	const optionalNote = t2;
-	let t3;
-	if ($[3] !== as || $[4] !== extra || $[5] !== isDisabled || $[6] !== isInvalid || $[7] !== isValid || $[8] !== label || $[9] !== labelPosition || $[10] !== labelProps || $[11] !== labelStyles || $[12] !== labelSuffix || $[13] !== labelTooltip || $[14] !== necessityIndicator || $[15] !== optionalNote || $[16] !== showOptionalNote || $[17] !== showRequiredMark) {
-		t3 = label ? /* @__PURE__ */ jsx(_Label, {
+		$[2] = t3;
+	} else t3 = $[2];
+	const optionalNote = t3;
+	let t4;
+	if ($[3] !== label) {
+		t4 = hasFieldContent(label);
+		$[3] = label;
+		$[4] = t4;
+	} else t4 = $[4];
+	const hasLabel = t4;
+	let t5;
+	if ($[5] !== as || $[6] !== extra || $[7] !== hasLabel || $[8] !== isDisabled || $[9] !== isInvalid || $[10] !== isValid || $[11] !== label || $[12] !== labelPosition || $[13] !== labelProps || $[14] !== labelStyles || $[15] !== labelSuffix || $[16] !== labelTooltip || $[17] !== necessityIndicator || $[18] !== optionalNote || $[19] !== showOptionalNote || $[20] !== showRequiredMark) {
+		t5 = hasLabel ? /* @__PURE__ */ jsx(_Label, {
 			as: as === "label" ? "div" : "label",
 			styles: labelStyles,
 			labelPosition,
@@ -153,127 +166,169 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 				})]
 			})
 		}) : null;
-		$[3] = as;
-		$[4] = extra;
-		$[5] = isDisabled;
-		$[6] = isInvalid;
-		$[7] = isValid;
-		$[8] = label;
-		$[9] = labelPosition;
-		$[10] = labelProps;
-		$[11] = labelStyles;
-		$[12] = labelSuffix;
-		$[13] = labelTooltip;
-		$[14] = necessityIndicator;
-		$[15] = optionalNote;
-		$[16] = showOptionalNote;
-		$[17] = showRequiredMark;
-		$[18] = t3;
-	} else t3 = $[18];
-	const labelComponent = t3;
-	const displayMessage = errorMessage || message;
-	const isErrorMessage = !!errorMessage;
-	const isMessageShown = !!displayMessage && !isDisabled;
-	let t4;
-	if ($[19] !== controlId || $[20] !== description) {
-		t4 = controlId && description ? getFieldDescriptionId(controlId) : void 0;
-		$[19] = controlId;
-		$[20] = description;
-		$[21] = t4;
-	} else t4 = $[21];
-	const descriptionId = t4;
-	let t5;
-	if ($[22] !== controlId || $[23] !== isMessageShown) {
-		t5 = controlId && isMessageShown ? getFieldMessageId(controlId) : void 0;
-		$[22] = controlId;
-		$[23] = isMessageShown;
-		$[24] = t5;
-	} else t5 = $[24];
-	const messageId = t5;
+		$[5] = as;
+		$[6] = extra;
+		$[7] = hasLabel;
+		$[8] = isDisabled;
+		$[9] = isInvalid;
+		$[10] = isValid;
+		$[11] = label;
+		$[12] = labelPosition;
+		$[13] = labelProps;
+		$[14] = labelStyles;
+		$[15] = labelSuffix;
+		$[16] = labelTooltip;
+		$[17] = necessityIndicator;
+		$[18] = optionalNote;
+		$[19] = showOptionalNote;
+		$[20] = showRequiredMark;
+		$[21] = t5;
+	} else t5 = $[21];
+	const labelComponent = t5;
+	const displayMessage = errorMessage !== void 0 ? errorMessage : message;
+	const isErrorMessage = errorMessage !== void 0;
+	let t6;
+	if ($[22] !== displayMessage || $[23] !== isBare || $[24] !== isDisabled) {
+		t6 = !isBare && !isDisabled && hasFieldContent(displayMessage);
+		$[22] = displayMessage;
+		$[23] = isBare;
+		$[24] = isDisabled;
+		$[25] = t6;
+	} else t6 = $[25];
+	const isMessageShown = t6;
+	let t7;
+	if ($[26] !== controlId || $[27] !== description || $[28] !== isBare) {
+		t7 = controlId && !isBare && hasFieldContent(description) ? getFieldDescriptionId(controlId) : void 0;
+		$[26] = controlId;
+		$[27] = description;
+		$[28] = isBare;
+		$[29] = t7;
+	} else t7 = $[29];
+	const descriptionId = t7;
+	let t8;
+	if ($[30] !== controlId || $[31] !== isMessageShown) {
+		t8 = controlId && isMessageShown ? getFieldMessageId(controlId) : void 0;
+		$[30] = controlId;
+		$[31] = isMessageShown;
+		$[32] = t8;
+	} else t8 = $[32];
+	const messageId = t8;
 	useFieldTextId(descriptionId);
 	useFieldTextId(messageId);
-	let t6;
-	if ($[25] !== description || $[26] !== descriptionId) {
-		t6 = () => {
-			if (!description) return null;
+	if (isBare) {
+		let t9;
+		if ($[33] !== hasLabel || $[34] !== label || $[35] !== labelProps || $[36] !== optionalNote) {
+			t9 = hasLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsxs(_Label, {
+				...labelProps,
+				children: [label, optionalNote ? /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", optionalNote] }) : null]
+			}) }) : null;
+			$[33] = hasLabel;
+			$[34] = label;
+			$[35] = labelProps;
+			$[36] = optionalNote;
+			$[37] = t9;
+		} else t9 = $[37];
+		let t10;
+		if ($[38] !== Component || $[39] !== children || $[40] !== t9) {
+			t10 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				t9,
+				Component,
+				children
+			] });
+			$[38] = Component;
+			$[39] = children;
+			$[40] = t9;
+			$[41] = t10;
+		} else t10 = $[41];
+		return t10;
+	}
+	let t9;
+	if ($[42] !== description || $[43] !== descriptionId) {
+		t9 = () => {
+			if (!hasFieldContent(description)) return null;
 			return /* @__PURE__ */ jsx(DescriptionElement, {
 				id: descriptionId,
 				"data-element": "Description",
 				children: wrapNodeIfPlain(description, () => /* @__PURE__ */ jsx("span", { children: description }))
 			});
 		};
-		$[25] = description;
-		$[26] = descriptionId;
-		$[27] = t6;
-	} else t6 = $[27];
-	const createDescriptionComponent = t6;
-	const isDescriptionBesideInput = !!label && (labelPosition === "side" || labelPosition === "split");
-	let t7;
-	if ($[28] !== createDescriptionComponent || $[29] !== isDescriptionBesideInput) {
-		t7 = isDescriptionBesideInput ? createDescriptionComponent() : null;
-		$[28] = createDescriptionComponent;
-		$[29] = isDescriptionBesideInput;
-		$[30] = t7;
-	} else t7 = $[30];
-	const descriptionForLabel = t7;
-	let t8;
-	if ($[31] !== createDescriptionComponent || $[32] !== isDescriptionBesideInput) {
-		t8 = !isDescriptionBesideInput ? createDescriptionComponent() : null;
-		$[31] = createDescriptionComponent;
-		$[32] = isDescriptionBesideInput;
-		$[33] = t8;
-	} else t8 = $[33];
-	const descriptionForInput = t8;
-	const t9 = !!label && labelPosition === "side";
-	const t10 = labelPosition === "split";
-	const t11 = !!description;
-	let t12;
-	if ($[34] !== isInvalid || $[35] !== isValid) {
-		t12 = getValidationMods({
+		$[42] = description;
+		$[43] = descriptionId;
+		$[44] = t9;
+	} else t9 = $[44];
+	const createDescriptionComponent = t9;
+	const isDescriptionBesideInput = hasLabel && (labelPosition === "side" || labelPosition === "split");
+	let t10;
+	if ($[45] !== createDescriptionComponent || $[46] !== isDescriptionBesideInput) {
+		t10 = isDescriptionBesideInput ? createDescriptionComponent() : null;
+		$[45] = createDescriptionComponent;
+		$[46] = isDescriptionBesideInput;
+		$[47] = t10;
+	} else t10 = $[47];
+	const descriptionForLabel = t10;
+	let t11;
+	if ($[48] !== createDescriptionComponent || $[49] !== isDescriptionBesideInput) {
+		t11 = !isDescriptionBesideInput ? createDescriptionComponent() : null;
+		$[48] = createDescriptionComponent;
+		$[49] = isDescriptionBesideInput;
+		$[50] = t11;
+	} else t11 = $[50];
+	const descriptionForInput = t11;
+	const t12 = hasLabel && labelPosition === "side";
+	const t13 = hasLabel && labelPosition === "split";
+	let t14;
+	if ($[51] !== description) {
+		t14 = hasFieldContent(description);
+		$[51] = description;
+		$[52] = t14;
+	} else t14 = $[52];
+	let t15;
+	if ($[53] !== isInvalid || $[54] !== isValid) {
+		t15 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[34] = isInvalid;
-		$[35] = isValid;
-		$[36] = t12;
-	} else t12 = $[36];
-	let t13;
-	if ($[37] !== t10 || $[38] !== t11 || $[39] !== t12 || $[40] !== t9) {
-		t13 = {
-			"has-sider": t9,
-			"has-split": t10,
-			"has-description": t11,
-			...t12
-		};
-		$[37] = t10;
-		$[38] = t11;
-		$[39] = t12;
-		$[40] = t9;
-		$[41] = t13;
-	} else t13 = $[41];
-	const mods = t13;
-	let t14;
-	if ($[42] !== fieldProps || $[43] !== styles) {
-		t14 = styles ? mergeProps(fieldProps, { styles }) : fieldProps;
-		$[42] = fieldProps;
-		$[43] = styles;
-		$[44] = t14;
-	} else t14 = $[44];
-	const mergedFieldProps = t14;
-	const t15 = as ?? "div";
+		$[53] = isInvalid;
+		$[54] = isValid;
+		$[55] = t15;
+	} else t15 = $[55];
 	let t16;
-	if ($[45] !== descriptionForLabel || $[46] !== labelComponent) {
-		t16 = labelComponent ? /* @__PURE__ */ jsxs("div", {
+	if ($[56] !== t12 || $[57] !== t13 || $[58] !== t14 || $[59] !== t15) {
+		t16 = {
+			"has-sider": t12,
+			"has-split": t13,
+			"has-description": t14,
+			...t15
+		};
+		$[56] = t12;
+		$[57] = t13;
+		$[58] = t14;
+		$[59] = t15;
+		$[60] = t16;
+	} else t16 = $[60];
+	const mods = t16;
+	let t17;
+	if ($[61] !== fieldProps || $[62] !== styles) {
+		t17 = styles ? mergeProps$1(fieldProps, { styles }) : fieldProps;
+		$[61] = fieldProps;
+		$[62] = styles;
+		$[63] = t17;
+	} else t17 = $[63];
+	const mergedFieldProps = t17;
+	const t18 = as ?? "div";
+	let t19;
+	if ($[64] !== descriptionForLabel || $[65] !== labelComponent) {
+		t19 = labelComponent ? /* @__PURE__ */ jsxs("div", {
 			"data-element": "LabelArea",
 			children: [labelComponent, descriptionForLabel]
 		}) : null;
-		$[45] = descriptionForLabel;
-		$[46] = labelComponent;
-		$[47] = t16;
-	} else t16 = $[47];
-	let t17;
-	if ($[48] !== displayMessage || $[49] !== isErrorMessage || $[50] !== isInvalid || $[51] !== isMessageShown || $[52] !== messageId || $[53] !== messageStyles || $[54] !== mods) {
-		t17 = isMessageShown && /* @__PURE__ */ jsx(MessageElement, {
+		$[64] = descriptionForLabel;
+		$[65] = labelComponent;
+		$[66] = t19;
+	} else t19 = $[66];
+	let t20;
+	if ($[67] !== displayMessage || $[68] !== isErrorMessage || $[69] !== isInvalid || $[70] !== isMessageShown || $[71] !== messageId || $[72] !== messageStyles || $[73] !== mods) {
+		t20 = isMessageShown && /* @__PURE__ */ jsx(MessageElement, {
 			id: messageId,
 			mods: {
 				...mods,
@@ -283,57 +338,57 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 			role: isErrorMessage || isInvalid ? "alert" : void 0,
 			children: displayMessage
 		});
-		$[48] = displayMessage;
-		$[49] = isErrorMessage;
-		$[50] = isInvalid;
-		$[51] = isMessageShown;
-		$[52] = messageId;
-		$[53] = messageStyles;
-		$[54] = mods;
-		$[55] = t17;
-	} else t17 = $[55];
-	let t18;
-	if ($[56] !== Component || $[57] !== descriptionForInput || $[58] !== t17) {
-		t18 = /* @__PURE__ */ jsxs("div", {
+		$[67] = displayMessage;
+		$[68] = isErrorMessage;
+		$[69] = isInvalid;
+		$[70] = isMessageShown;
+		$[71] = messageId;
+		$[72] = messageStyles;
+		$[73] = mods;
+		$[74] = t20;
+	} else t20 = $[74];
+	let t21;
+	if ($[75] !== Component || $[76] !== descriptionForInput || $[77] !== t20) {
+		t21 = /* @__PURE__ */ jsxs("div", {
 			"data-element": "InputArea",
 			children: [
 				Component,
 				descriptionForInput,
-				t17
+				t20
 			]
 		});
-		$[56] = Component;
-		$[57] = descriptionForInput;
-		$[58] = t17;
-		$[59] = t18;
-	} else t18 = $[59];
-	let t19;
-	if ($[60] !== isHidden || $[61] !== mergedFieldProps || $[62] !== mods || $[63] !== ref || $[64] !== t15 || $[65] !== t16 || $[66] !== t18) {
-		t19 = /* @__PURE__ */ jsxs(FieldElement, {
+		$[75] = Component;
+		$[76] = descriptionForInput;
+		$[77] = t20;
+		$[78] = t21;
+	} else t21 = $[78];
+	let t22;
+	if ($[79] !== isHidden || $[80] !== mergedFieldProps || $[81] !== mods || $[82] !== ref || $[83] !== t18 || $[84] !== t19 || $[85] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(FieldElement, {
 			ref,
-			as: t15,
+			as: t18,
 			mods,
 			isHidden,
 			...mergedFieldProps,
-			children: [t16, t18]
+			children: [t19, t21]
 		});
-		$[60] = isHidden;
-		$[61] = mergedFieldProps;
-		$[62] = mods;
-		$[63] = ref;
-		$[64] = t15;
-		$[65] = t16;
-		$[66] = t18;
-		$[67] = t19;
-	} else t19 = $[67];
-	let t20;
-	if ($[68] !== children || $[69] !== t19) {
-		t20 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t19, children] });
-		$[68] = children;
-		$[69] = t19;
-		$[70] = t20;
-	} else t20 = $[70];
-	return t20;
+		$[79] = isHidden;
+		$[80] = mergedFieldProps;
+		$[81] = mods;
+		$[82] = ref;
+		$[83] = t18;
+		$[84] = t19;
+		$[85] = t21;
+		$[86] = t22;
+	} else t22 = $[86];
+	let t23;
+	if ($[87] !== children || $[88] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t22, children] });
+		$[87] = children;
+		$[88] = t22;
+		$[89] = t23;
+	} else t23 = $[89];
+	return t23;
 });
 
 //#endregion

package/dist/components/form/FieldWrapper/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":["tasty","forwardRef","useI18n","isDevEnv","mergeProps","wrapNodeIfPlain","InfoBadge","Text","Flex","Space","Label","NecessityIndicatorMark","warnAboutLegacyTooltip","getValidationMods","getFieldDescriptionId","getFieldMessageId","useFieldTextId","CubeFieldWrapperProps","FieldElement","qa","styles","display","width","gridColumns","gap","placeItems","placeContent","LabelArea","margin","InputArea","flow","gridColumn","displayName","MessageElement","preset","color","invalid","valid","disabled","textAlign","userSelect","DescriptionElement","LabelSuffixElement","FieldWrapper","props","ref","$","_c","as","labelPosition","t0","label","extra","isRequired","isOptional","isDisabled","labelStyles","necessityIndicator","labelProps","fieldProps","message","messageStyles","description","errorMessage","Component","controlId","isInvalid","isValid","requiredMark","t1","labelTooltip","isHidden","labelSuffix","children","undefined","t","showRequiredMark","showOptionalNote","t2","optionalNote","t3","labelComponent","displayMessage","isErrorMessage","isMessageShown","t4","descriptionId","t5","messageId","t6","createDescriptionComponent","isDescriptionBesideInput","t7","descriptionForLabel","t8","descriptionForInput","t9","t10","t11","t12","t13","mods","t14","mergedFieldProps","t15","t16","t17","t18","t19","t20"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label, NecessityIndicatorMark } from '../Label';\nimport { warnAboutLegacyTooltip } from '../legacy-tooltip';\nimport { getValidationMods } from '../validation/index';\n\nimport {\n  getFieldDescriptionId,\n  getFieldMessageId,\n  useFieldTextId,\n} from './field-description';\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (isDevEnv()) {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A flex box, not a block: in a block an inline-level suffix such as a `Badge`\n * or a `Tag` sits in a line box whose strut adds a pixel under it, so the label\n * row grew from 20px to 21px and its field stepped down out of line. Only a\n * single element is a direct flex item; mixed content is wrapped in a `<span>`,\n * because a flex box drops the whitespace between its items.\n */\nconst LabelSuffixElement = tasty({\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    extra,\n    styles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    controlId,\n    isInvalid,\n    isValid,\n    requiredMark = true,\n    labelTooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const { t } = useI18n();\n\n  warnAboutLegacyTooltip(props);\n\n  // `requiredMark={false}` drops the required marker, but the field is still\n  // required — so the optional note has to keep losing to it rather than\n  // stepping into the gap and labelling a required field optional.\n  const showRequiredMark = !!requiredMark && !!isRequired;\n  const showOptionalNote = !isRequired && !!isOptional;\n\n  // The `aria-label` below is what the input is named by, so it shadows the\n  // label's own content — including the `(optional)` note, which is the only\n  // thing saying the field is optional. A required field needs no such help:\n  // `aria-required` on the input already announces it.\n  const optionalNote = showOptionalNote\n    ? t('form.optional', '(optional)')\n    : null;\n\n  const labelComponent = label ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={showRequiredMark}\n      isOptional={showOptionalNote}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      aria-label={\n        typeof label === 'string'\n          ? optionalNote\n            ? `${label} ${optionalNote}`\n            : label\n          : undefined\n      }\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>\n            {label}\n            {/*\n              `Label` can only append the marker itself when its child is plain\n              text, and the tree below is not — so it is placed here, against\n              the label text, rather than after the full-width `Flex`.\n            */}\n            <NecessityIndicatorMark\n              isRequired={showRequiredMark}\n              isOptional={showOptionalNote}\n              necessityIndicator={necessityIndicator}\n            />\n          </div>\n\n          {labelTooltip ? <InfoBadge tooltip={labelTooltip} /> : null}\n\n          {labelSuffix ? (\n            <LabelSuffixElement>\n              {wrapNodeIfPlain(labelSuffix, () => (\n                <span>{labelSuffix}</span>\n              ))}\n            </LabelSuffixElement>\n          ) : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n  const displayMessage = errorMessage || message;\n  const isErrorMessage = !!errorMessage;\n  const isMessageShown = !!displayMessage && !isDisabled;\n\n  // An id only on what is actually rendered, registered for the control's\n  // `aria-describedby` — see `useFieldDescribedBy`.\n  const descriptionId =\n    controlId && description ? getFieldDescriptionId(controlId) : undefined;\n  const messageId =\n    controlId && isMessageShown ? getFieldMessageId(controlId) : undefined;\n\n  useFieldTextId(descriptionId);\n  useFieldTextId(messageId);\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement id={descriptionId} data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // A side or split label carries the description in its column. A field\n  // without a label has no label area to hold it, so it goes under the input.\n  const isDescriptionBesideInput =\n    !!label && (labelPosition === 'side' || labelPosition === 'split');\n  const descriptionForLabel = isDescriptionBesideInput\n    ? createDescriptionComponent()\n    : null;\n  const descriptionForInput = !isDescriptionBesideInput\n    ? createDescriptionComponent()\n    : null;\n\n  const mods = {\n    // The side column holds the label. Without one it would stay empty and\n    // still push the control a label's width to the right.\n    'has-sider': !!label && labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    ...getValidationMods({ isInvalid, isValid }),\n  };\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {isMessageShown && (\n            <MessageElement\n              id={messageId}\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of the validation state\n                invalid: isErrorMessage || !!isInvalid,\n              }}\n              styles={messageStyles}\n              role={isErrorMessage || isInvalid ? 'alert' : undefined}\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"FieldWrapper.js","names":["tasty","forwardRef","VisuallyHidden","useI18n","isDevEnv","mergeProps","wrapNodeIfPlain","InfoBadge","Text","Flex","Space","Label","NecessityIndicatorMark","warnAboutLegacyTooltip","getValidationMods","getFieldDescriptionId","getFieldMessageId","useFieldTextId","CubeFieldWrapperProps","ReactNode","hasFieldContent","content","FieldElement","qa","styles","display","width","gridColumns","gap","placeItems","placeContent","LabelArea","margin","InputArea","flow","gridColumn","displayName","MessageElement","preset","color","invalid","valid","disabled","textAlign","userSelect","DescriptionElement","LabelSuffixElement","FieldWrapper","props","ref","$","_c","as","labelPosition","t0","label","isBare","t1","extra","isRequired","isOptional","isDisabled","labelStyles","necessityIndicator","labelProps","fieldProps","message","messageStyles","description","errorMessage","Component","controlId","isInvalid","isValid","requiredMark","t2","labelTooltip","isHidden","labelSuffix","children","undefined","t","showRequiredMark","showOptionalNote","t3","optionalNote","t4","hasLabel","t5","labelComponent","displayMessage","isErrorMessage","t6","isMessageShown","t7","descriptionId","t8","messageId","t9","t10","createDescriptionComponent","isDescriptionBesideInput","descriptionForLabel","t11","descriptionForInput","t12","t13","t14","t15","t16","mods","t17","mergedFieldProps","t18","t19","t20","t21","t22","t23"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { VisuallyHidden } from 'react-aria';\n\nimport { useI18n } from '../../../i18n';\nimport { isDevEnv } from '../../../utils/is-dev-env';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label, NecessityIndicatorMark } from '../Label';\nimport { warnAboutLegacyTooltip } from '../legacy-tooltip';\nimport { getValidationMods } from '../validation/index';\n\nimport {\n  getFieldDescriptionId,\n  getFieldMessageId,\n  useFieldTextId,\n} from './field-description';\nimport { CubeFieldWrapperProps } from './types';\n\nimport type { ReactNode } from 'react';\n\n/** Empty slot values suppress content; numeric zero is still text. */\nfunction hasFieldContent(content: ReactNode) {\n  return content != null && typeof content !== 'boolean' && content !== '';\n}\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (isDevEnv()) {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A flex box, not a block: in a block an inline-level suffix such as a `Badge`\n * or a `Tag` sits in a line box whose strut adds a pixel under it, so the label\n * row grew from 20px to 21px and its field stepped down out of line. Only a\n * single element is a direct flex item; mixed content is wrapped in a `<span>`,\n * because a flex box drops the whitespace between its items.\n */\nconst LabelSuffixElement = tasty({\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    isBare = false,\n    extra,\n    styles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    controlId,\n    isInvalid,\n    isValid,\n    requiredMark = true,\n    labelTooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const { t } = useI18n();\n\n  warnAboutLegacyTooltip(props);\n\n  // `requiredMark={false}` drops the required marker, but the field is still\n  // required — so the optional note has to keep losing to it rather than\n  // stepping into the gap and labelling a required field optional.\n  const showRequiredMark = !!requiredMark && !!isRequired;\n  const showOptionalNote = !isRequired && !!isOptional;\n\n  // The `aria-label` below is what the input is named by, so it shadows the\n  // label's own content — including the `(optional)` note, which is the only\n  // thing saying the field is optional. A required field needs no such help:\n  // `aria-required` on the input already announces it.\n  const optionalNote = showOptionalNote\n    ? t('form.optional', '(optional)')\n    : null;\n\n  const hasLabel = hasFieldContent(label);\n  const labelComponent = hasLabel ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={showRequiredMark}\n      isOptional={showOptionalNote}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      aria-label={\n        typeof label === 'string'\n          ? optionalNote\n            ? `${label} ${optionalNote}`\n            : label\n          : undefined\n      }\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>\n            {label}\n            {/*\n              `Label` can only append the marker itself when its child is plain\n              text, and the tree below is not — so it is placed here, against\n              the label text, rather than after the full-width `Flex`.\n            */}\n            <NecessityIndicatorMark\n              isRequired={showRequiredMark}\n              isOptional={showOptionalNote}\n              necessityIndicator={necessityIndicator}\n            />\n          </div>\n\n          {labelTooltip ? <InfoBadge tooltip={labelTooltip} /> : null}\n\n          {labelSuffix ? (\n            <LabelSuffixElement>\n              {wrapNodeIfPlain(labelSuffix, () => (\n                <span>{labelSuffix}</span>\n              ))}\n            </LabelSuffixElement>\n          ) : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  const displayMessage = errorMessage !== undefined ? errorMessage : message;\n  const isErrorMessage = errorMessage !== undefined;\n  const isMessageShown =\n    !isBare && !isDisabled && hasFieldContent(displayMessage);\n\n  // An id only on what is actually rendered, registered for the control's\n  // `aria-describedby` — see `useFieldDescribedBy`.\n  const descriptionId =\n    controlId && !isBare && hasFieldContent(description)\n      ? getFieldDescriptionId(controlId)\n      : undefined;\n  const messageId =\n    controlId && isMessageShown ? getFieldMessageId(controlId) : undefined;\n\n  useFieldTextId(descriptionId);\n  useFieldTextId(messageId);\n\n  if (isBare) {\n    return (\n      <>\n        {hasLabel ? (\n          <VisuallyHidden>\n            <Label {...labelProps}>\n              {label}\n              {optionalNote ? <> {optionalNote}</> : null}\n            </Label>\n          </VisuallyHidden>\n        ) : null}\n        {Component}\n        {children}\n      </>\n    );\n  }\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!hasFieldContent(description)) return null;\n\n    return (\n      <DescriptionElement id={descriptionId} data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // A side or split label carries the description in its column. Without a\n  // label, that column is empty and the description would read as the label,\n  // so it goes under the input.\n  const isDescriptionBesideInput =\n    hasLabel && (labelPosition === 'side' || labelPosition === 'split');\n  const descriptionForLabel = isDescriptionBesideInput\n    ? createDescriptionComponent()\n    : null;\n  const descriptionForInput = !isDescriptionBesideInput\n    ? createDescriptionComponent()\n    : null;\n\n  const mods = {\n    'has-sider': hasLabel && labelPosition === 'side',\n    'has-split': hasLabel && labelPosition === 'split',\n    'has-description': hasFieldContent(description),\n    ...getValidationMods({ isInvalid, isValid }),\n  };\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {isMessageShown && (\n            <MessageElement\n              id={messageId}\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of the validation state\n                invalid: isErrorMessage || !!isInvalid,\n              }}\n              styles={messageStyles}\n              role={isErrorMessage || isInvalid ? 'alert' : undefined}\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":"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"}

package/dist/components/form/FieldWrapper/field-description.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { c } from "react/compiler-runtime";
 import { useSyncExternalStore } from "react";
@@ -67,8 +67,8 @@ function useFieldTextId(id) {
 *
 * Taken from what the wrapper registered rather than predicted from props,
 * as React Aria's `useSlotId` does, because whether `FieldWrapper` renders
-* either one depends on more than the control's props: a label or
-* `forceField`, a disabled field hiding its message, `TagInput` putting a
+* either one depends on more than the control's props: `isBare`,
+* a disabled field hiding its message, `TagInput` putting a
 * rejection in at wrap time. Without the reference, a screen reader announces
 * the field as invalid and never says why.
 */

package/dist/components/form/FieldWrapper/field-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-description.js","names":["useSyncExternalStore","useLayoutEffect","getFieldDescriptionId","controlId","getFieldMessageId","mountedIds","Map","listeners","Set","subscribe","listener","add","delete","notify","forEach","useFieldTextId","id","$","_c","t0","t1","set","get","count","useFieldDescribedBy","describedBy","filter","_temp","join","rendered","_temp2","Boolean","undefined","has"],"sources":["../../../../src/components/form/FieldWrapper/field-description.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\n\n/**\n * The ids `FieldWrapper` gives a control's description and message. Both are\n * derived from the control's own id, so the wrapper and the control agree on\n * them without handing anything to each other.\n */\nexport function getFieldDescriptionId(controlId: string) {\n  return `${controlId}-description`;\n}\n\nexport function getFieldMessageId(controlId: string) {\n  return `${controlId}-message`;\n}\n\n/**\n * How many mounted elements carry each id. Counted, not a set, so a remount\n * under Strict Mode — or two fields that share an id — never drops one still\n * on the page.\n */\nconst mountedIds = new Map<string, number>();\nconst listeners = new Set<() => void>();\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\nfunction notify() {\n  listeners.forEach((listener) => listener());\n}\n\n/**\n * Registers `id` as rendered while the calling `FieldWrapper` shows the\n * element that carries it. `undefined` registers nothing.\n */\nexport function useFieldTextId(id: string | undefined) {\n  useLayoutEffect(() => {\n    if (!id) return;\n\n    mountedIds.set(id, (mountedIds.get(id) ?? 0) + 1);\n    notify();\n\n    return () => {\n      const count = (mountedIds.get(id) ?? 1) - 1;\n\n      if (count) mountedIds.set(id, count);\n      else mountedIds.delete(id);\n\n      notify();\n    };\n  }, [id]);\n}\n\n/**\n * The control's `aria-describedby`: the caller's own ids, then the field\n * description and message `FieldWrapper` has rendered.\n *\n * Taken from what the wrapper registered rather than predicted from props,\n * as React Aria's `useSlotId` does, because whether `FieldWrapper` renders\n * either one depends on more than the control's props: a label or\n * `forceField`, a disabled field hiding its message, `TagInput` putting a\n * rejection in at wrap time. Without the reference, a screen reader announces\n * the field as invalid and never says why.\n */\nexport function useFieldDescribedBy(\n  controlId: string | undefined,\n  describedBy: string | undefined,\n): string | undefined {\n  const rendered = useSyncExternalStore(\n    subscribe,\n    () =>\n      controlId\n        ? [getFieldDescriptionId(controlId), getFieldMessageId(controlId)]\n            .filter((id) => mountedIds.has(id))\n            .join(' ')\n        : '',\n    // The wrapper registers after it mounts, so nothing is linked yet.\n    () => '',\n  );\n\n  return [describedBy, rendered].filter(Boolean).join(' ') || undefined;\n}\n"],"mappings":";;;;;;;;;;;AASA,SAAgBE,sBAAsBC,WAAmB;AACvD,QAAO,GAAGA,UAAS;;AAGrB,SAAgBC,kBAAkBD,WAAmB;AACnD,QAAO,GAAGA,UAAS;;;;;;;AAQrB,MAAME,6BAAa,IAAIC,KAAqB;AAC5C,MAAMC,4BAAY,IAAIC,KAAiB;AAEvC,SAASC,UAAUC,UAAsB;AACvCH,WAAUI,IAAID,SAAS;AAEvB,cAAa;AACXH,YAAUK,OAAOF,SAAS;;;AAI9B,SAASG,SAAS;AAChBN,WAAUO,SAASJ,aAAaA,UAAU,CAAC;;;;;;AAO7C,SAAOK,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAH,EAAA,OAAAD,IAAA;AACWG,aAAA;AACd,OAAI,CAACH,GAAE;AAEPX,cAAUgB,IAAKL,KAAKX,WAAUiB,IAAKN,GAAQ,IAAvB,KAA2B,EAAE;AACjDH,WAAQ;AAAA,gBAED;IACL,MAAAU,SAAelB,WAAUiB,IAAKN,GAAQ,IAAvB,KAA2B;AAE1C,QAAIO,MAAOlB,YAAUgB,IAAKL,IAAIO,MAAM;QAC/BlB,YAAUO,OAAQI,GAAG;AAE1BH,YAAQ;;;AAETO,OAAA,CAACJ,GAAG;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAG;QAAA;AAAAD,OAAAF,EAAA;AAAAG,OAAAH,EAAA;;AAdPhB,mBAAgBkB,IAcbC,GAAK;;;;;;;;;;;;;AAcV,SAAOI,oBAAArB,WAAAsB,aAAA;CAAA,MAAAR,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAd,WAAA;AAMHgB,aACEhB,YACI,CAACD,sBAAsBC,UAAU,EAAEC,kBAAkBD,UAAU,CAAC,CAAAuB,OACtDC,MAA2B,CAAAC,KAC7B,IACN,GAJN;AAIMX,IAAA,KAAAd;AAAAc,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAPV,MAAAY,WAAiB7B,qBACfS,WACAU,IAOAW,OACD;CAAC,IAAAV;AAAA,KAAAH,EAAA,OAAAQ,eAAAR,EAAA,OAAAY,UAAA;AAEKT,OAAA,CAACK,aAAaI,SAAS,CAAAH,OAAQK,QAAQ,CAAAH,KAAM,IAAiB,IAA9DI;AAA8Df,IAAA,KAAAQ;AAAAR,IAAA,KAAAY;AAAAZ,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAA9DG;;AAhBF,SAAAU,SAAA;AAAA,QAaG;;AAbH,SAAAH,MAAAX,IAAA;AAAA,QASqBX,WAAU4B,IAAKjB,GAAG"}
+{"version":3,"file":"field-description.js","names":["useSyncExternalStore","useLayoutEffect","getFieldDescriptionId","controlId","getFieldMessageId","mountedIds","Map","listeners","Set","subscribe","listener","add","delete","notify","forEach","useFieldTextId","id","$","_c","t0","t1","set","get","count","useFieldDescribedBy","describedBy","filter","_temp","join","rendered","_temp2","Boolean","undefined","has"],"sources":["../../../../src/components/form/FieldWrapper/field-description.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\n\n/**\n * The ids `FieldWrapper` gives a control's description and message. Both are\n * derived from the control's own id, so the wrapper and the control agree on\n * them without handing anything to each other.\n */\nexport function getFieldDescriptionId(controlId: string) {\n  return `${controlId}-description`;\n}\n\nexport function getFieldMessageId(controlId: string) {\n  return `${controlId}-message`;\n}\n\n/**\n * How many mounted elements carry each id. Counted, not a set, so a remount\n * under Strict Mode — or two fields that share an id — never drops one still\n * on the page.\n */\nconst mountedIds = new Map<string, number>();\nconst listeners = new Set<() => void>();\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\nfunction notify() {\n  listeners.forEach((listener) => listener());\n}\n\n/**\n * Registers `id` as rendered while the calling `FieldWrapper` shows the\n * element that carries it. `undefined` registers nothing.\n */\nexport function useFieldTextId(id: string | undefined) {\n  useLayoutEffect(() => {\n    if (!id) return;\n\n    mountedIds.set(id, (mountedIds.get(id) ?? 0) + 1);\n    notify();\n\n    return () => {\n      const count = (mountedIds.get(id) ?? 1) - 1;\n\n      if (count) mountedIds.set(id, count);\n      else mountedIds.delete(id);\n\n      notify();\n    };\n  }, [id]);\n}\n\n/**\n * The control's `aria-describedby`: the caller's own ids, then the field\n * description and message `FieldWrapper` has rendered.\n *\n * Taken from what the wrapper registered rather than predicted from props,\n * as React Aria's `useSlotId` does, because whether `FieldWrapper` renders\n * either one depends on more than the control's props: `isBare`,\n * a disabled field hiding its message, `TagInput` putting a\n * rejection in at wrap time. Without the reference, a screen reader announces\n * the field as invalid and never says why.\n */\nexport function useFieldDescribedBy(\n  controlId: string | undefined,\n  describedBy: string | undefined,\n): string | undefined {\n  const rendered = useSyncExternalStore(\n    subscribe,\n    () =>\n      controlId\n        ? [getFieldDescriptionId(controlId), getFieldMessageId(controlId)]\n            .filter((id) => mountedIds.has(id))\n            .join(' ')\n        : '',\n    // The wrapper registers after it mounts, so nothing is linked yet.\n    () => '',\n  );\n\n  return [describedBy, rendered].filter(Boolean).join(' ') || undefined;\n}\n"],"mappings":";;;;;;;;;;;AASA,SAAgBE,sBAAsBC,WAAmB;AACvD,QAAO,GAAGA,UAAS;;AAGrB,SAAgBC,kBAAkBD,WAAmB;AACnD,QAAO,GAAGA,UAAS;;;;;;;AAQrB,MAAME,6BAAa,IAAIC,KAAqB;AAC5C,MAAMC,4BAAY,IAAIC,KAAiB;AAEvC,SAASC,UAAUC,UAAsB;AACvCH,WAAUI,IAAID,SAAS;AAEvB,cAAa;AACXH,YAAUK,OAAOF,SAAS;;;AAI9B,SAASG,SAAS;AAChBN,WAAUO,SAASJ,aAAaA,UAAU,CAAC;;;;;;AAO7C,SAAOK,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;AAAA,KAAAH,EAAA,OAAAD,IAAA;AACWG,aAAA;AACd,OAAI,CAACH,GAAE;AAEPX,cAAUgB,IAAKL,KAAKX,WAAUiB,IAAKN,GAAQ,IAAvB,KAA2B,EAAE;AACjDH,WAAQ;AAAA,gBAED;IACL,MAAAU,SAAelB,WAAUiB,IAAKN,GAAQ,IAAvB,KAA2B;AAE1C,QAAIO,MAAOlB,YAAUgB,IAAKL,IAAIO,MAAM;QAC/BlB,YAAUO,OAAQI,GAAG;AAE1BH,YAAQ;;;AAETO,OAAA,CAACJ,GAAG;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAG;QAAA;AAAAD,OAAAF,EAAA;AAAAG,OAAAH,EAAA;;AAdPhB,mBAAgBkB,IAcbC,GAAK;;;;;;;;;;;;;AAcV,SAAOI,oBAAArB,WAAAsB,aAAA;CAAA,MAAAR,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAd,WAAA;AAMHgB,aACEhB,YACI,CAACD,sBAAsBC,UAAU,EAAEC,kBAAkBD,UAAU,CAAC,CAAAuB,OACtDC,MAA2B,CAAAC,KAC7B,IACN,GAJN;AAIMX,IAAA,KAAAd;AAAAc,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAPV,MAAAY,WAAiB7B,qBACfS,WACAU,IAOAW,OACD;CAAC,IAAAV;AAAA,KAAAH,EAAA,OAAAQ,eAAAR,EAAA,OAAAY,UAAA;AAEKT,OAAA,CAACK,aAAaI,SAAS,CAAAH,OAAQK,QAAQ,CAAAH,KAAM,IAAiB,IAA9DI;AAA8Df,IAAA,KAAAQ;AAAAR,IAAA,KAAAY;AAAAZ,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAA9DG;;AAhBF,SAAAU,SAAA;AAAA,QAaG;;AAbH,SAAAH,MAAAX,IAAA;AAAA,QASqBX,WAAU4B,IAAKjB,GAAG"}

package/dist/components/form/FieldWrapper/types.d.ts

@@ -14,7 +14,8 @@ type CubeFieldWrapperProps = ValidationProps & {
   isOptional?: boolean; /** Whether the input is disabled */
   isDisabled?: boolean;
   fieldProps?: Props;
-  isHidden?: boolean;
+  isHidden?: boolean; /** Omit field layout and text slots while preserving the accessible label. */
+  isBare?: boolean;
   label?: ReactNode;
   labelPosition?: LabelPosition;
   labelSuffix?: ReactNode;
@@ -27,10 +28,10 @@ type CubeFieldWrapperProps = ValidationProps & {
   necessityIndicator?: NecessityIndicator | null;
   /**
    * @deprecated Use `errorMessage` for error messages and `description` for field descriptions instead.
-   * Custom message for the field. It will be placed below the label and the input
+   * Fallback text used only when errorMessage is undefined.
    */
   message?: string | ReactNode; /** Styles for the message */
-  messageStyles?: Styles; /** Error message for the field. Always displayed in danger state regardless of validation state */
+  messageStyles?: Styles; /** Error text. Explicit empty content suppresses the message fallback. */
   errorMessage?: string | ReactNode;
   Component?: ReactElement;
   /**

package/dist/components/form/Form/Field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

package/dist/components/form/Form/Form.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/form/Form/ModernFormRoot.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/form/Form/ResetButton/ResetButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-759f43d | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-77836fa | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";