@cube-dev/ui-kit 0.182.0 → 0.183.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";
@@ -9,6 +9,7 @@ import { InfoBadge } from "../../content/InfoBadge/InfoBadge.js";
 import { Flex } from "../../layout/Flex.js";
 import { getValidationMods } from "../validation/resolve-validation-props.js";
 import { NecessityIndicatorMark, _Label } from "../Label.js";
+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";
@@ -88,91 +89,213 @@ const DescriptionElement = tasty({
 * @internal Do not use this component directly.
 */
 const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
-	const { as, labelPosition = "top", label, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, isInvalid, isValid, requiredMark = true, tooltip, isHidden, labelSuffix, children } = props;
+	const $ = c(63);
+	const { as, labelPosition: t0, label, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, isInvalid, isValid, requiredMark: t1, tooltip, isHidden, labelSuffix, children } = props;
+	const labelPosition = t0 === void 0 ? "top" : t0;
+	const requiredMark = t1 === void 0 ? true : t1;
 	const { t } = useI18n();
 	const showRequiredMark = !!requiredMark && !!isRequired;
 	const showOptionalNote = !isRequired && !!isOptional;
-	const optionalNote = showOptionalNote ? t("form.optional", "(optional)") : null;
-	const labelComponent = label ? /* @__PURE__ */ jsx(_Label, {
-		as: as === "label" ? "div" : "label",
-		styles: labelStyles,
-		labelPosition,
-		isRequired: showRequiredMark,
-		isOptional: showOptionalNote,
-		isDisabled,
-		necessityIndicator,
-		isInvalid,
-		isValid,
-		"aria-label": typeof label === "string" ? optionalNote ? `${label} ${optionalNote}` : label : void 0,
-		...labelProps,
-		children: /* @__PURE__ */ jsxs(Flex, {
-			placeContent: "baseline space-between",
-			width: "100%",
-			children: [/* @__PURE__ */ jsxs(Space, {
-				placeItems: "center",
-				gap: "0.75x",
-				children: [
-					/* @__PURE__ */ jsxs("div", { children: [label, /* @__PURE__ */ jsx(NecessityIndicatorMark, {
-						isRequired: showRequiredMark,
-						isOptional: showOptionalNote,
-						necessityIndicator
-					})] }),
-					tooltip ? /* @__PURE__ */ jsx(InfoBadge, { tooltip }) : null,
-					labelSuffix ? /* @__PURE__ */ jsx("div", { children: labelSuffix }) : null
-				]
-			}), extra && /* @__PURE__ */ jsx(_Text, {
-				preset: "t3",
-				children: extra
-			})]
-		})
-	}) : null;
-	const createDescriptionComponent = () => {
-		if (!description) return null;
-		return /* @__PURE__ */ jsx(DescriptionElement, {
-			"data-element": "Description",
-			children: wrapNodeIfPlain(description, () => /* @__PURE__ */ jsx("span", { children: description }))
-		});
-	};
-	const descriptionForLabel = labelPosition === "side" || labelPosition === "split" ? createDescriptionComponent() : null;
-	const descriptionForInput = labelPosition === "top" ? createDescriptionComponent() : null;
-	const mods = {
-		"has-sider": labelPosition === "side",
-		"has-split": labelPosition === "split",
-		"has-description": !!description,
-		...getValidationMods({
+	let t2;
+	if ($[0] !== showOptionalNote || $[1] !== t) {
+		t2 = 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] !== necessityIndicator || $[14] !== optionalNote || $[15] !== showOptionalNote || $[16] !== showRequiredMark || $[17] !== tooltip) {
+		t3 = label ? /* @__PURE__ */ jsx(_Label, {
+			as: as === "label" ? "div" : "label",
+			styles: labelStyles,
+			labelPosition,
+			isRequired: showRequiredMark,
+			isOptional: showOptionalNote,
+			isDisabled,
+			necessityIndicator,
+			isInvalid,
+			isValid,
+			"aria-label": typeof label === "string" ? optionalNote ? `${label} ${optionalNote}` : label : void 0,
+			...labelProps,
+			children: /* @__PURE__ */ jsxs(Flex, {
+				placeContent: "baseline space-between",
+				width: "100%",
+				children: [/* @__PURE__ */ jsxs(Space, {
+					placeItems: "center",
+					gap: "0.75x",
+					children: [
+						/* @__PURE__ */ jsxs("div", { children: [label, /* @__PURE__ */ jsx(NecessityIndicatorMark, {
+							isRequired: showRequiredMark,
+							isOptional: showOptionalNote,
+							necessityIndicator
+						})] }),
+						tooltip ? /* @__PURE__ */ jsx(InfoBadge, { tooltip }) : null,
+						labelSuffix ? /* @__PURE__ */ jsx("div", { children: labelSuffix }) : null
+					]
+				}), extra && /* @__PURE__ */ jsx(_Text, {
+					preset: "t3",
+					children: extra
+				})]
+			})
+		}) : null;
+		$[3] = as;
+		$[4] = extra;
+		$[5] = isDisabled;
+		$[6] = isInvalid;
+		$[7] = isValid;
+		$[8] = label;
+		$[9] = labelPosition;
+		$[10] = labelProps;
+		$[11] = labelStyles;
+		$[12] = labelSuffix;
+		$[13] = necessityIndicator;
+		$[14] = optionalNote;
+		$[15] = showOptionalNote;
+		$[16] = showRequiredMark;
+		$[17] = tooltip;
+		$[18] = t3;
+	} else t3 = $[18];
+	const labelComponent = t3;
+	let t4;
+	if ($[19] !== description) {
+		t4 = () => {
+			if (!description) return null;
+			return /* @__PURE__ */ jsx(DescriptionElement, {
+				"data-element": "Description",
+				children: wrapNodeIfPlain(description, () => /* @__PURE__ */ jsx("span", { children: description }))
+			});
+		};
+		$[19] = description;
+		$[20] = t4;
+	} else t4 = $[20];
+	const createDescriptionComponent = t4;
+	let t5;
+	if ($[21] !== createDescriptionComponent || $[22] !== labelPosition) {
+		t5 = labelPosition === "side" || labelPosition === "split" ? createDescriptionComponent() : null;
+		$[21] = createDescriptionComponent;
+		$[22] = labelPosition;
+		$[23] = t5;
+	} else t5 = $[23];
+	const descriptionForLabel = t5;
+	let t6;
+	if ($[24] !== createDescriptionComponent || $[25] !== labelPosition) {
+		t6 = labelPosition === "top" ? createDescriptionComponent() : null;
+		$[24] = createDescriptionComponent;
+		$[25] = labelPosition;
+		$[26] = t6;
+	} else t6 = $[26];
+	const descriptionForInput = t6;
+	const t7 = labelPosition === "side";
+	const t8 = labelPosition === "split";
+	const t9 = !!description;
+	let t10;
+	if ($[27] !== isInvalid || $[28] !== isValid) {
+		t10 = getValidationMods({
 			isInvalid,
 			isValid
-		})
-	};
+		});
+		$[27] = isInvalid;
+		$[28] = isValid;
+		$[29] = t10;
+	} else t10 = $[29];
+	let t11;
+	if ($[30] !== t10 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
+		t11 = {
+			"has-sider": t7,
+			"has-split": t8,
+			"has-description": t9,
+			...t10
+		};
+		$[30] = t10;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t9;
+		$[34] = t11;
+	} else t11 = $[34];
+	const mods = t11;
 	const displayMessage = errorMessage || message;
 	const isErrorMessage = !!errorMessage;
-	const mergedFieldProps = styles ? mergeProps(fieldProps, { styles }) : fieldProps;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(FieldElement, {
-		ref,
-		as: as ?? "div",
-		mods,
-		isHidden,
-		...mergedFieldProps,
-		children: [labelComponent || descriptionForLabel ? /* @__PURE__ */ jsxs("div", {
+	let t12;
+	if ($[35] !== fieldProps || $[36] !== styles) {
+		t12 = styles ? mergeProps(fieldProps, { styles }) : fieldProps;
+		$[35] = fieldProps;
+		$[36] = styles;
+		$[37] = t12;
+	} else t12 = $[37];
+	const mergedFieldProps = t12;
+	const t13 = as ?? "div";
+	let t14;
+	if ($[38] !== descriptionForLabel || $[39] !== labelComponent) {
+		t14 = labelComponent || descriptionForLabel ? /* @__PURE__ */ jsxs("div", {
 			"data-element": "LabelArea",
 			children: [labelComponent, descriptionForLabel]
-		}) : null, /* @__PURE__ */ jsxs("div", {
+		}) : null;
+		$[38] = descriptionForLabel;
+		$[39] = labelComponent;
+		$[40] = t14;
+	} else t14 = $[40];
+	let t15;
+	if ($[41] !== displayMessage || $[42] !== isDisabled || $[43] !== isErrorMessage || $[44] !== isInvalid || $[45] !== messageStyles || $[46] !== mods) {
+		t15 = displayMessage && !isDisabled && /* @__PURE__ */ jsx(MessageElement, {
+			mods: {
+				...mods,
+				invalid: isErrorMessage || !!isInvalid
+			},
+			styles: messageStyles,
+			role: isErrorMessage || isInvalid ? "alert" : void 0,
+			children: displayMessage
+		});
+		$[41] = displayMessage;
+		$[42] = isDisabled;
+		$[43] = isErrorMessage;
+		$[44] = isInvalid;
+		$[45] = messageStyles;
+		$[46] = mods;
+		$[47] = t15;
+	} else t15 = $[47];
+	let t16;
+	if ($[48] !== Component || $[49] !== descriptionForInput || $[50] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
 			"data-element": "InputArea",
 			children: [
 				Component,
 				descriptionForInput,
-				displayMessage && !isDisabled && /* @__PURE__ */ jsx(MessageElement, {
-					mods: {
-						...mods,
-						invalid: isErrorMessage || !!isInvalid
-					},
-					styles: messageStyles,
-					role: isErrorMessage || isInvalid ? "alert" : void 0,
-					children: displayMessage
-				})
+				t15
 			]
-		})]
-	}), children] });
+		});
+		$[48] = Component;
+		$[49] = descriptionForInput;
+		$[50] = t15;
+		$[51] = t16;
+	} else t16 = $[51];
+	let t17;
+	if ($[52] !== isHidden || $[53] !== mergedFieldProps || $[54] !== mods || $[55] !== ref || $[56] !== t13 || $[57] !== t14 || $[58] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(FieldElement, {
+			ref,
+			as: t13,
+			mods,
+			isHidden,
+			...mergedFieldProps,
+			children: [t14, t16]
+		});
+		$[52] = isHidden;
+		$[53] = mergedFieldProps;
+		$[54] = mods;
+		$[55] = ref;
+		$[56] = t13;
+		$[57] = t14;
+		$[58] = t16;
+		$[59] = t17;
+	} else t17 = $[59];
+	let t18;
+	if ($[60] !== children || $[61] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t17, children] });
+		$[60] = children;
+		$[61] = t17;
+		$[62] = t18;
+	} else t18 = $[62];
+	return t18;
 });
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":["Label","Text"],"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 { getValidationMods } from '../validation/index';\n\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 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    isInvalid,\n    isValid,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const { t } = useI18n();\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          {tooltip ? <InfoBadge tooltip={tooltip} /> : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    ...getValidationMods({ isInvalid, isValid }),\n  };\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\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 || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\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","useI18n","isDevEnv","mergeProps","wrapNodeIfPlain","InfoBadge","Text","Flex","Space","Label","NecessityIndicatorMark","getValidationMods","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","FieldWrapper","props","ref","$","_c","as","labelPosition","t0","label","extra","isRequired","isOptional","isDisabled","labelStyles","necessityIndicator","labelProps","fieldProps","message","messageStyles","description","errorMessage","Component","isInvalid","isValid","requiredMark","t1","tooltip","isHidden","labelSuffix","children","undefined","t","showRequiredMark","showOptionalNote","t2","optionalNote","t3","labelComponent","t4","createDescriptionComponent","t5","descriptionForLabel","t6","descriptionForInput","t7","t8","t9","t10","t11","mods","displayMessage","isErrorMessage","t12","mergedFieldProps","t13","t14","t15","t16","t17","t18"],"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 { getValidationMods } from '../validation/index';\n\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 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    isInvalid,\n    isValid,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const { t } = useI18n();\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          {tooltip ? <InfoBadge tooltip={tooltip} /> : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    ...getValidationMods({ isInvalid, isValid }),\n  };\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\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 || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\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/Form/Field.js

@@ -1,11 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";
 import { FieldWrapper } from "../FieldWrapper/FieldWrapper.js";
 import { useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";
-import { Children, cloneElement, createContext, useContext, useMemo } from "react";
+import { c } from "react-compiler-runtime";
+import { Children, cloneElement, createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/form/Form/Field.tsx
@@ -58,6 +59,7 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
 	};
 }
 function Field(props) {
+	"use no memo";
 	const allProps = useValidationProps(useFormProps(props));
 	let { children, form, label, extra, necessityIndicator, tooltip, isHidden, isDisabled, isLoading, isOptional, styles, labelProps, labelPosition = "top", labelStyles, labelSuffix } = allProps;
 	if (typeof children === "function") children = children(form);
@@ -128,15 +130,27 @@ function Field(props) {
 }
 const LegacyFieldContext = createContext({ insideLegacyField: false });
 function LegacyFieldProvider(props) {
-	const value = useMemo(() => ({ insideLegacyField: true }), []);
-	return /* @__PURE__ */ jsx(LegacyFieldContext.Provider, {
-		value,
-		children: props.children
-	});
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { insideLegacyField: true };
+		$[0] = t0;
+	} else t0 = $[0];
+	const value = t0;
+	let t1;
+	if ($[1] !== props.children) {
+		t1 = /* @__PURE__ */ jsx(LegacyFieldContext.Provider, {
+			value,
+			children: props.children
+		});
+		$[1] = props.children;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useInsideLegacyField() {
-	const { insideLegacyField = false } = useContext(LegacyFieldContext);
-	return insideLegacyField;
+	const { insideLegacyField: t0 } = useContext(LegacyFieldContext);
+	return t0 === void 0 ? false : t0;
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":[],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  PropsWithChildren,\n  ReactElement,\n  useContext,\n  useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\nimport { useValidationProps } from '../validation/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n  type = type || '';\n\n  return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n  type?: string,\n  value?,\n  onChange?,\n  allowsCustomValue?: boolean,\n) {\n  type = type || '';\n\n  if (type === 'Number') {\n    return {\n      value: value != null ? value : null,\n      onChange: onChange,\n    };\n  } else if (type === 'Text') {\n    return {\n      value:\n        typeof value === 'string' || typeof value === 'number'\n          ? String(value)\n          : '',\n      onChange: onChange,\n    };\n  } else if (type === 'Checkbox') {\n    return {\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    };\n  } else if (type === 'CheckboxGroup') {\n    return {\n      value: value != null ? value : [],\n      onChange: onChange,\n    };\n  } else if (type === 'RangeSlider') {\n    return {\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    };\n  } else if (type === 'ComboBox') {\n    return {\n      selectedKey: !allowsCustomValue ? value ?? null : undefined,\n      inputValue: allowsCustomValue ? value ?? '' : undefined,\n      onInputChange(val) {\n        if (!allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n      onSelectionChange(val: string) {\n        if (val == null && allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n    };\n  } else if (type === 'Select') {\n    return {\n      selectedKey: value ?? null,\n      onSelectionChange: onChange,\n    };\n  }\n\n  return {\n    value: value != null ? value : null,\n    onChange,\n  };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n  /** Legacy field name; nested fields use dot notation. */\n  name?: string;\n  /** The initial value of the input. */\n  defaultValue?: any;\n  styles?: Styles;\n  children?: ReactElement | ((CubeFormInstance) => ReactElement);\n  /** The form instance */\n  form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n  form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n  extends CubeFieldProps<T> {\n  isRequired?: boolean;\n  isOptional?: boolean;\n  onChange?: (any) => void;\n  onSelectionChange?: (any) => void;\n  onBlur: () => void;\n  labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n  const allProps: CubeFullFieldProps<T> = useValidationProps(\n    useFormProps(props),\n  );\n\n  let {\n    children,\n    form,\n    label,\n    extra,\n    necessityIndicator,\n    tooltip,\n    isHidden,\n    isDisabled,\n    isLoading,\n    isOptional,\n    styles,\n    labelProps,\n    labelPosition = 'top',\n    labelStyles,\n    labelSuffix,\n  } = allProps;\n\n  if (typeof children === 'function') {\n    children = children(form);\n  }\n\n  let child = children == null ? null : Children.only(children);\n\n  const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n  const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n    defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n  });\n\n  const {\n    isInvalid,\n    isValid,\n    message,\n    description,\n    errorMessage,\n    isRequired,\n    name,\n    id,\n  } = __props;\n\n  // `useField` reports `null` here when `isRequired` came from a `required` rule\n  // rather than from the props, which suppresses the label marker. An indicator\n  // set on the `Field` itself is an explicit request and outranks that.\n  const resolvedNecessityIndicator =\n    necessityIndicator !== undefined\n      ? necessityIndicator\n      : __props.necessityIndicator;\n\n  if (!child) return null;\n\n  if (id) {\n    if (!labelProps) {\n      labelProps = {};\n    }\n\n    labelProps.for = id;\n  }\n\n  if (__props.nonInput) {\n    return (\n      <LegacyFieldProvider>\n        <FieldWrapper\n          isHidden={isHidden}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          isValid={isValid}\n          necessityIndicator={resolvedNecessityIndicator}\n          isRequired={isRequired}\n          isOptional={isOptional}\n          label={label}\n          labelProps={labelProps}\n          extra={extra}\n          tooltip={tooltip}\n          message={message}\n          description={description}\n          errorMessage={errorMessage}\n          Component={child}\n          styles={styles}\n          labelPosition={labelPosition}\n          labelStyles={labelStyles}\n          labelSuffix={labelSuffix}\n        />\n      </LegacyFieldProvider>\n    );\n  }\n\n  if (!form) {\n    warn(\n      'Form Field requires declared form instance if field name is specified',\n    );\n\n    return null;\n  }\n\n  if (!__props.field) {\n    return (\n      <LegacyFieldProvider>\n        {cloneElement(\n          child,\n          mergeProps(child.props as any, {\n            ...getValueProps(inputType),\n            label: name,\n            name,\n            id,\n          }),\n        )}\n      </LegacyFieldProvider>\n    );\n  }\n\n  const newProps: CubeReplaceFieldProps<T> = {\n    id,\n    name,\n    onBlur: __props.onBlur,\n  };\n\n  // A `null` indicator suppresses the marker for a rule-derived `isRequired`. It\n  // must not override a necessity the child input declares for itself, which the\n  // `useField` above never saw.\n  const childDeclaresNecessity =\n    (child.props as any).isRequired != null ||\n    (child.props as any).necessityIndicator !== undefined;\n\n  if (\n    resolvedNecessityIndicator !== undefined &&\n    !(resolvedNecessityIndicator === null && childDeclaresNecessity)\n  ) {\n    newProps.necessityIndicator = resolvedNecessityIndicator;\n  }\n\n  if (isInvalid) {\n    newProps.isInvalid = isInvalid;\n  }\n\n  if (isValid) {\n    newProps.isValid = isValid;\n  }\n\n  if (isRequired) {\n    newProps.isRequired = isRequired;\n  }\n\n  if (isOptional != null) {\n    newProps.isOptional = isOptional;\n  }\n\n  if (label) {\n    newProps.label = label;\n  }\n\n  if (extra) {\n    newProps.extra = extra;\n  }\n\n  if (tooltip) {\n    newProps.tooltip = tooltip;\n  }\n\n  if (message !== undefined) {\n    newProps.message = message;\n  }\n\n  if (errorMessage !== undefined) {\n    newProps.errorMessage = errorMessage;\n  }\n\n  if (description !== undefined) {\n    newProps.description = description;\n  }\n\n  if (isHidden != null) {\n    newProps.isHidden = isHidden;\n  }\n\n  if (isDisabled != null) {\n    newProps.isDisabled = isDisabled;\n  }\n\n  if (isLoading != null) {\n    newProps.isLoading = isLoading;\n  }\n\n  Object.assign(\n    newProps,\n    getValueProps(\n      inputType,\n      __props.field?.value,\n      __props.onChange,\n      (child.props as any).allowsCustomValue,\n    ),\n  );\n\n  const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n  // onChange event passed to the child should be executed after Form onChange logic\n  return (\n    <LegacyFieldProvider>\n      {cloneElement(\n        child,\n        mergeProps(\n          childProps,\n          newProps,\n          onChange ? { onChange: __props.onChange } : {},\n          onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n        ),\n      )}\n    </LegacyFieldProvider>\n  );\n}\n\ntype LegacyFieldContextValue = {\n  insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n  insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n  const value = useMemo(() => ({ insideLegacyField: true }), []);\n  return (\n    <LegacyFieldContext.Provider value={value}>\n      {props.children}\n    </LegacyFieldContext.Provider>\n  );\n}\n\nexport function useInsideLegacyField() {\n  const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n  return insideLegacyField;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Field.js","names":["Styles","Children","cloneElement","createContext","PropsWithChildren","ReactElement","useContext","useMemo","FieldBaseProps","LabelPosition","mergeProps","warn","FieldWrapper","useValidationProps","useFormProps","FieldTypes","useField","CubeFormInstance","getDefaultValidateTrigger","type","includes","getValueProps","value","onChange","allowsCustomValue","String","isSelected","isIndeterminate","undefined","selectedKey","inputValue","onInputChange","val","onSelectionChange","CubeFieldProps","name","defaultValue","styles","children","form","T","CubeFullFieldProps","CubeReplaceFieldProps","isRequired","isOptional","any","onBlur","labelPosition","Field","props","allProps","label","extra","necessityIndicator","tooltip","isHidden","isDisabled","isLoading","labelProps","labelStyles","labelSuffix","child","only","inputType","cubeInputType","__props","defaultValidationTrigger","isInvalid","isValid","message","description","errorMessage","id","resolvedNecessityIndicator","for","nonInput","field","newProps","childDeclaresNecessity","Object","assign","childProps","LegacyFieldContextValue","insideLegacyField","LegacyFieldContext","LegacyFieldProvider","$","_c","t0","Symbol","t1","useInsideLegacyField"],"sources":["../../../../src/components/form/Form/Field.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  PropsWithChildren,\n  ReactElement,\n  useContext,\n  useMemo,\n} from 'react';\n\nimport { FieldBaseProps, LabelPosition } from '../../../shared/index';\nimport { mergeProps } from '../../../utils/react/index';\nimport { warn } from '../../../utils/warnings';\nimport { FieldWrapper } from '../FieldWrapper/index';\nimport { useValidationProps } from '../validation/index';\n\nimport { useFormProps } from './Form';\nimport { FieldTypes } from './types';\nimport { useField } from './use-field/index';\nimport { CubeFormInstance } from './use-form';\n\nfunction getDefaultValidateTrigger(type) {\n  type = type || '';\n\n  return type === 'Number' || type.includes('Text') ? 'onBlur' : 'onChange';\n}\n\nfunction getValueProps(\n  type?: string,\n  value?,\n  onChange?,\n  allowsCustomValue?: boolean,\n) {\n  type = type || '';\n\n  if (type === 'Number') {\n    return {\n      value: value != null ? value : null,\n      onChange: onChange,\n    };\n  } else if (type === 'Text') {\n    return {\n      value:\n        typeof value === 'string' || typeof value === 'number'\n          ? String(value)\n          : '',\n      onChange: onChange,\n    };\n  } else if (type === 'Checkbox') {\n    return {\n      isSelected: value != null ? value : false,\n      isIndeterminate: false,\n      onChange: onChange,\n    };\n  } else if (type === 'CheckboxGroup') {\n    return {\n      value: value != null ? value : [],\n      onChange: onChange,\n    };\n  } else if (type === 'RangeSlider') {\n    return {\n      value: value != null ? value : undefined,\n      onChange: onChange,\n    };\n  } else if (type === 'ComboBox') {\n    return {\n      selectedKey: !allowsCustomValue ? value ?? null : undefined,\n      inputValue: allowsCustomValue ? value ?? '' : undefined,\n      onInputChange(val) {\n        if (!allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n      onSelectionChange(val: string) {\n        if (val == null && allowsCustomValue) {\n          return;\n        }\n\n        onChange(val);\n      },\n    };\n  } else if (type === 'Select') {\n    return {\n      selectedKey: value ?? null,\n      onSelectionChange: onChange,\n    };\n  }\n\n  return {\n    value: value != null ? value : null,\n    onChange,\n  };\n}\n\nexport interface CubeFieldProps<T extends FieldTypes> extends FieldBaseProps {\n  /** Legacy field name; nested fields use dot notation. */\n  name?: string;\n  /** The initial value of the input. */\n  defaultValue?: any;\n  styles?: Styles;\n  children?: ReactElement | ((CubeFormInstance) => ReactElement);\n  /** The form instance */\n  form?: CubeFormInstance<T>;\n}\n\ninterface CubeFullFieldProps<T extends FieldTypes> extends CubeFieldProps<T> {\n  form: CubeFormInstance<T>;\n}\n\ninterface CubeReplaceFieldProps<T extends FieldTypes>\n  extends CubeFieldProps<T> {\n  isRequired?: boolean;\n  isOptional?: boolean;\n  onChange?: (any) => void;\n  onSelectionChange?: (any) => void;\n  onBlur: () => void;\n  labelPosition?: LabelPosition;\n}\n\nexport function Field<T extends FieldTypes>(props: CubeFieldProps<T>) {\n  'use no memo';\n  // Legacy form state is mutable; preserve its render-time reads until migration.\n\n  const allProps: CubeFullFieldProps<T> = useValidationProps(\n    useFormProps(props),\n  );\n\n  let {\n    children,\n    form,\n    label,\n    extra,\n    necessityIndicator,\n    tooltip,\n    isHidden,\n    isDisabled,\n    isLoading,\n    isOptional,\n    styles,\n    labelProps,\n    labelPosition = 'top',\n    labelStyles,\n    labelSuffix,\n  } = allProps;\n\n  if (typeof children === 'function') {\n    children = children(form);\n  }\n\n  let child = children == null ? null : Children.only(children);\n\n  const inputType = (child?.type as any)?.cubeInputType ?? 'Text';\n\n  const __props = useField<T, CubeFullFieldProps<T>>(allProps, {\n    defaultValidationTrigger: getDefaultValidateTrigger(inputType),\n  });\n\n  const {\n    isInvalid,\n    isValid,\n    message,\n    description,\n    errorMessage,\n    isRequired,\n    name,\n    id,\n  } = __props;\n\n  // `useField` reports `null` here when `isRequired` came from a `required` rule\n  // rather than from the props, which suppresses the label marker. An indicator\n  // set on the `Field` itself is an explicit request and outranks that.\n  const resolvedNecessityIndicator =\n    necessityIndicator !== undefined\n      ? necessityIndicator\n      : __props.necessityIndicator;\n\n  if (!child) return null;\n\n  if (id) {\n    if (!labelProps) {\n      labelProps = {};\n    }\n\n    labelProps.for = id;\n  }\n\n  if (__props.nonInput) {\n    return (\n      <LegacyFieldProvider>\n        <FieldWrapper\n          isHidden={isHidden}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          isValid={isValid}\n          necessityIndicator={resolvedNecessityIndicator}\n          isRequired={isRequired}\n          isOptional={isOptional}\n          label={label}\n          labelProps={labelProps}\n          extra={extra}\n          tooltip={tooltip}\n          message={message}\n          description={description}\n          errorMessage={errorMessage}\n          Component={child}\n          styles={styles}\n          labelPosition={labelPosition}\n          labelStyles={labelStyles}\n          labelSuffix={labelSuffix}\n        />\n      </LegacyFieldProvider>\n    );\n  }\n\n  if (!form) {\n    warn(\n      'Form Field requires declared form instance if field name is specified',\n    );\n\n    return null;\n  }\n\n  if (!__props.field) {\n    return (\n      <LegacyFieldProvider>\n        {cloneElement(\n          child,\n          mergeProps(child.props as any, {\n            ...getValueProps(inputType),\n            label: name,\n            name,\n            id,\n          }),\n        )}\n      </LegacyFieldProvider>\n    );\n  }\n\n  const newProps: CubeReplaceFieldProps<T> = {\n    id,\n    name,\n    onBlur: __props.onBlur,\n  };\n\n  // A `null` indicator suppresses the marker for a rule-derived `isRequired`. It\n  // must not override a necessity the child input declares for itself, which the\n  // `useField` above never saw.\n  const childDeclaresNecessity =\n    (child.props as any).isRequired != null ||\n    (child.props as any).necessityIndicator !== undefined;\n\n  if (\n    resolvedNecessityIndicator !== undefined &&\n    !(resolvedNecessityIndicator === null && childDeclaresNecessity)\n  ) {\n    newProps.necessityIndicator = resolvedNecessityIndicator;\n  }\n\n  if (isInvalid) {\n    newProps.isInvalid = isInvalid;\n  }\n\n  if (isValid) {\n    newProps.isValid = isValid;\n  }\n\n  if (isRequired) {\n    newProps.isRequired = isRequired;\n  }\n\n  if (isOptional != null) {\n    newProps.isOptional = isOptional;\n  }\n\n  if (label) {\n    newProps.label = label;\n  }\n\n  if (extra) {\n    newProps.extra = extra;\n  }\n\n  if (tooltip) {\n    newProps.tooltip = tooltip;\n  }\n\n  if (message !== undefined) {\n    newProps.message = message;\n  }\n\n  if (errorMessage !== undefined) {\n    newProps.errorMessage = errorMessage;\n  }\n\n  if (description !== undefined) {\n    newProps.description = description;\n  }\n\n  if (isHidden != null) {\n    newProps.isHidden = isHidden;\n  }\n\n  if (isDisabled != null) {\n    newProps.isDisabled = isDisabled;\n  }\n\n  if (isLoading != null) {\n    newProps.isLoading = isLoading;\n  }\n\n  Object.assign(\n    newProps,\n    getValueProps(\n      inputType,\n      __props.field?.value,\n      __props.onChange,\n      (child.props as any).allowsCustomValue,\n    ),\n  );\n\n  const { onChange, onSelectionChange, ...childProps } = child.props as any;\n\n  // onChange event passed to the child should be executed after Form onChange logic\n  return (\n    <LegacyFieldProvider>\n      {cloneElement(\n        child,\n        mergeProps(\n          childProps,\n          newProps,\n          onChange ? { onChange: __props.onChange } : {},\n          onSelectionChange ? { onSelectionChange: __props.onChange } : {},\n        ),\n      )}\n    </LegacyFieldProvider>\n  );\n}\n\ntype LegacyFieldContextValue = {\n  insideLegacyField: boolean;\n};\n\nconst LegacyFieldContext = createContext<LegacyFieldContextValue>({\n  insideLegacyField: false,\n});\n\nfunction LegacyFieldProvider(props: PropsWithChildren<unknown>) {\n  const value = useMemo(() => ({ insideLegacyField: true }), []);\n  return (\n    <LegacyFieldContext.Provider value={value}>\n      {props.children}\n    </LegacyFieldContext.Provider>\n  );\n}\n\nexport function useInsideLegacyField() {\n  const { insideLegacyField = false } = useContext(LegacyFieldContext);\n\n  return insideLegacyField;\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";
@@ -8,6 +8,7 @@ import { isModernFormController } from "./backend.js";
 import { ModernControllerContext } from "./modern/context.js";
 import { _ModernFormRoot } from "./ModernFormRoot.js";
 import { useForm } from "./use-form.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { createContext, forwardRef, useContext, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -30,17 +31,26 @@ const FormPresentationContext = createContext(EMPTY_PRESENTATION);
 * `FormContext` directly for the same purpose should render this instead — a
 * bare `FormContext.Provider` no longer masks the presentation context.
 */
-function FormScopeMask({ value, children }) {
-	return /* @__PURE__ */ jsx(ModernControllerContext.Provider, {
-		value: null,
-		children: /* @__PURE__ */ jsx(FormPresentationContext.Provider, {
-			value: EMPTY_PRESENTATION,
-			children: /* @__PURE__ */ jsx(FormContext.Provider, {
-				value,
-				children
+function FormScopeMask(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(ModernControllerContext.Provider, {
+			value: null,
+			children: /* @__PURE__ */ jsx(FormPresentationContext.Provider, {
+				value: EMPTY_PRESENTATION,
+				children: /* @__PURE__ */ jsx(FormContext.Provider, {
+					value,
+					children
+				})
 			})
-		})
-	});
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 const FormElement = tasty({
 	as: "form",
@@ -68,15 +78,31 @@ const FormElement = tasty({
 * values, so the result is exactly `{ ...FormContext, ...props }` as before.
 */
 function useFormProps(props) {
+	const $ = c(7);
 	const presentation = useContext(FormPresentationContext);
 	const ctx = useContext(FormContext);
 	const modern = useContext(ModernControllerContext);
-	return {
-		...presentation,
-		...modern ? { form: modern } : {},
-		...ctx,
-		...props
-	};
+	let t0;
+	if ($[0] !== modern) {
+		t0 = modern ? { form: modern } : {};
+		$[0] = modern;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== ctx || $[3] !== presentation || $[4] !== props || $[5] !== t0) {
+		t1 = {
+			...presentation,
+			...t0,
+			...ctx,
+			...props
+		};
+		$[2] = ctx;
+		$[3] = presentation;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
 }
 const formPropNames = new Set([
 	"action",
@@ -90,6 +116,7 @@ const formPropNames = new Set([
 * role is compatibility; see `legacy-contract/README.md` for what is frozen.
 */
 function LegacyFormRoot(props, ref) {
+	"use no memo";
 	props = useValidationProps(useProviderProps(props));
 	let { qa, name, children, labelPosition, orientation, necessityIndicator, isDisabled, isReadOnly, isInvalid, isValid, labelStyles, validateTrigger, showValid, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
 	const defaultValuesRef = useRef(defaultValues);
@@ -115,17 +142,17 @@ function LegacyFormRoot(props, ref) {
 		try {
 			try {
 				await form.validateFields();
-			} catch (e) {
+			} catch (e_1) {
 				form?.setSubmitting(false);
 				return;
 			}
 			await timeout();
 			await onSubmit?.(form.getFormData());
-		} catch (e) {
+		} catch (e_0) {
 			await timeout();
-			form.submitError = e;
-			onSubmitFailed?.(e);
-			if (e instanceof Error) throw e;
+			form.submitError = e_0;
+			onSubmitFailed?.(e_0);
+			if (e_0 instanceof Error) throw e_0;
 		} finally {
 			form?.setSubmitting(false);
 		}
@@ -202,14 +229,33 @@ _LegacyFormRoot.displayName = "LegacyFormRoot";
 * the legacy root, so existing `<Form>` and `Form.useForm()` keep their behavior.
 */
 function Form(props, ref) {
-	if (isModernFormController(props.form)) return /* @__PURE__ */ jsx(_ModernFormRoot, {
-		...props,
-		ref
-	});
-	return /* @__PURE__ */ jsx(_LegacyFormRoot, {
-		...props,
-		ref
-	});
+	const $ = c(6);
+	if (isModernFormController(props.form)) {
+		const t0 = props;
+		let t1;
+		if ($[0] !== ref || $[1] !== t0) {
+			t1 = /* @__PURE__ */ jsx(_ModernFormRoot, {
+				...t0,
+				ref
+			});
+			$[0] = ref;
+			$[1] = t0;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	const t0 = props;
+	let t1;
+	if ($[3] !== ref || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(_LegacyFormRoot, {
+			...t0,
+			ref
+		});
+		$[3] = ref;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
 }
 /**
 * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.