@cube-dev/ui-kit 0.193.1 → 0.194.0

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","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","isInvalid","isValid","requiredMark","t1","labelTooltip","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 { warnAboutLegacyTooltip } from '../legacy-tooltip';\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 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    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  // 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","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","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  // 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  // 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          {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

@@ -0,0 +1,102 @@
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { c } from "react/compiler-runtime";
+import { useSyncExternalStore } from "react";
+
+//#region src/components/form/FieldWrapper/field-description.ts
+/**
+* The ids `FieldWrapper` gives a control's description and message. Both are
+* derived from the control's own id, so the wrapper and the control agree on
+* them without handing anything to each other.
+*/
+function getFieldDescriptionId(controlId) {
+	return `${controlId}-description`;
+}
+function getFieldMessageId(controlId) {
+	return `${controlId}-message`;
+}
+/**
+* How many mounted elements carry each id. Counted, not a set, so a remount
+* under Strict Mode — or two fields that share an id — never drops one still
+* on the page.
+*/
+const mountedIds = /* @__PURE__ */ new Map();
+const listeners = /* @__PURE__ */ new Set();
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+function notify() {
+	listeners.forEach((listener) => listener());
+}
+/**
+* Registers `id` as rendered while the calling `FieldWrapper` shows the
+* element that carries it. `undefined` registers nothing.
+*/
+function useFieldTextId(id) {
+	const $ = c(3);
+	let t0;
+	let t1;
+	if ($[0] !== id) {
+		t0 = () => {
+			if (!id) return;
+			mountedIds.set(id, (mountedIds.get(id) ?? 0) + 1);
+			notify();
+			return () => {
+				const count = (mountedIds.get(id) ?? 1) - 1;
+				if (count) mountedIds.set(id, count);
+				else mountedIds.delete(id);
+				notify();
+			};
+		};
+		t1 = [id];
+		$[0] = id;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useLayoutEffect$1(t0, t1);
+}
+/**
+* The control's `aria-describedby`: the caller's own ids, then the field
+* description and message `FieldWrapper` has rendered.
+*
+* 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
+* rejection in at wrap time. Without the reference, a screen reader announces
+* the field as invalid and never says why.
+*/
+function useFieldDescribedBy(controlId, describedBy) {
+	const $ = c(5);
+	let t0;
+	if ($[0] !== controlId) {
+		t0 = () => controlId ? [getFieldDescriptionId(controlId), getFieldMessageId(controlId)].filter(_temp).join(" ") : "";
+		$[0] = controlId;
+		$[1] = t0;
+	} else t0 = $[1];
+	const rendered = useSyncExternalStore(subscribe, t0, _temp2);
+	let t1;
+	if ($[2] !== describedBy || $[3] !== rendered) {
+		t1 = [describedBy, rendered].filter(Boolean).join(" ") || void 0;
+		$[2] = describedBy;
+		$[3] = rendered;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function _temp2() {
+	return "";
+}
+function _temp(id) {
+	return mountedIds.has(id);
+}
+
+//#endregion
+export { getFieldDescriptionId, getFieldMessageId, useFieldDescribedBy, useFieldTextId };
+//# sourceMappingURL=field-description.js.map

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

@@ -0,0 +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"}

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

@@ -32,7 +32,12 @@ type CubeFieldWrapperProps = ValidationProps & {
   message?: string | ReactNode; /** Styles for the message */
   messageStyles?: Styles; /** Error message for the field. Always displayed in danger state regardless of validation state */
   errorMessage?: string | ReactNode;
-  Component?: ReactElement; /** Custom components that should go outside the field and should not be visible by default. For example: Dialogs */
+  Component?: ReactElement;
+  /**
+   * @internal The id of the control in `Component`, which its description and
+   * message ids derive from. Set by `wrapWithField`.
+   */
+  controlId?: string; /** Custom components that should go outside the field and should not be visible by default. For example: Dialogs */
   children?: ReactNode;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.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";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | 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.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | 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.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { isModernFormController } from "../backend.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ModernControllerContext } from "./modern/context.js";
 import { FormContext } from "./Form.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 //#region src/components/form/Form/backend.ts
 /**
 * Nominal branding for the two Form backends (modernization plan §5.1).

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { useFormControllerContext } from "./modern/context.js";
 import { useForm } from "./use-form.js";
 import { FormContext, FormScopeMask, _Form, useFormProps } from "./Form.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/form/Form/modern/context.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController } from "../backend.js";
 import { createFormField } from "./field.js";
 import { createFormStore } from "./store.js";

package/dist/components/form/Form/modern/field-binding.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { getFieldKey, hasPath, normalizePath, readPath } from "./values.js";
 import { getControllerInternals } from "./controller.js";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { normalizePath } from "./values.js";
 
 //#region src/components/form/Form/modern/field.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { ModernControllerContext } from "./context.js";
 import { getFieldKey, normalizePath, readPath } from "./values.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { FORM_BACKEND } from "../backend.js";
 import { createValueSnapshotter, defineValue, formValueEqual, freezeContainer, getFieldKey, hasPath, isPlainObject, normalizePath, pathValueChanged, readPath, readonlySet, sameMembers, writePath } from "./values.js";
 import { rulesSignature, runRules } from "./validation.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { applyRule } from "../validation.js";
 
 //#region src/components/form/Form/modern/validation.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 //#region src/components/form/Form/modern/values.ts
 const ownedContainers = /* @__PURE__ */ new WeakSet();
 function freezeContainer(value) {

package/dist/components/form/Form/reset-unbound-controls.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 //#region src/components/form/Form/reset-unbound-controls.ts
 /**
 * Both form roots cancel a native reset, because the browser would put a bound

package/dist/components/form/Form/use-field/use-field-binding.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { isModernFormController } from "../backend.js";

package/dist/components/form/Form/use-field/use-field-props.js

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";
 import { useProviderProps } from "../../../../provider.js";
 import { useValidationProps } from "../../validation/use-validation-props.js";
+import { useFieldDescribedBy } from "../../FieldWrapper/field-description.js";
 import { isModernFormController } from "../backend.js";
 import { getFieldKey } from "../modern/values.js";
 import { useFormProps } from "../Form.js";
@@ -29,7 +30,7 @@ const defaultValuePropsMapper = ({ value, onChange }) => ({
 * legacy backend's adapter and is inert when the field is not bound to it.
 */
 function useFieldProps(inputProps, t0) {
-	const $ = c(21);
+	const $ = c(24);
 	let t1;
 	if ($[0] !== t0) {
 		t1 = t0 === void 0 ? {} : t0;
@@ -139,8 +140,20 @@ function useFieldProps(inputProps, t0) {
 		$[20] = t8;
 	} else t8 = $[20];
 	const namedProps = t8;
-	useDebugValue(namedProps);
-	return namedProps;
+	const describedBy = useFieldDescribedBy(namedProps.id, namedProps["aria-describedby"]);
+	let t9;
+	if ($[21] !== describedBy || $[22] !== namedProps) {
+		t9 = describedBy === namedProps["aria-describedby"] ? namedProps : {
+			...namedProps,
+			"aria-describedby": describedBy
+		};
+		$[21] = describedBy;
+		$[22] = namedProps;
+		$[23] = t9;
+	} else t9 = $[23];
+	const describedProps = t9;
+	useDebugValue(describedProps);
+	return describedProps;
 }
 
 //#endregion

package/dist/components/form/Form/use-field/use-field-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-field-props.js","names":["useDebugValue","useId","useState","useEvent","useProviderProps","mergeProps","warn","useValidationProps","isModernFormController","useInsideLegacyField","useFormProps","getFieldKey","useFieldBinding","ValidateTrigger","ModernFormBrand","FieldTypes","UseFieldProps","UseFieldPropsParams","valuePropsMapper","value","onChange","defaultValidationTrigger","unsafe__isDisabled","defaultValuePropsMapper","StrippedFieldKey","ResolvedFieldForm","Form","ResolvedFieldProps","Props","Key","useFieldProps","inputProps","t0","$","_c","t1","undefined","params","provided","t2","field","options","form","name","path","props","isDisabled","t3","t4","isInsideLegacyField","rules","hasName","generatedId","isBound","t5","t6","unbound","isOutsideOfForm","t7","dontTouch","validateTrigger","onChangeEvent","t8","resolveResult","id","result","labelProps","for","valueProps","_form","_fieldOnChange","onBlur","_fieldOnBlur","fieldRest","result_0","resolved","result_1","_descriptor","dependsOn","_dependsOn","deps","_deps","domProps","namedProps"],"sources":["../../../../../src/components/form/Form/use-field/use-field-props.tsx"],"sourcesContent":["import { useDebugValue, useId, useState } from 'react';\n\nimport { useEvent } from '../../../../_internal/index';\nimport { useProviderProps } from '../../../../provider';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { warn } from '../../../../utils/warnings';\nimport { useValidationProps } from '../../validation/index';\nimport { isModernFormController } from '../backend';\nimport { useInsideLegacyField } from '../Field';\nimport { useFormProps } from '../Form';\nimport { getFieldKey } from '../modern/values';\n\nimport { useFieldBinding } from './use-field-binding';\n\nimport type { ValidateTrigger } from '../../../../shared/index';\nimport type { ModernFormBrand } from '../backend';\nimport type { FieldTypes } from '../types';\nimport type { UseFieldProps } from './types';\n\nexport type UseFieldPropsParams = {\n  valuePropsMapper?: ({ value, onChange }) => any;\n  /**\n   * @default 'onBlur'\n   */\n  defaultValidationTrigger?: ValidateTrigger;\n  /**\n   * prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden\n   * If you want to change this prop after mount, remount the component with a new value.\n   */\n  unsafe__isDisabled?: boolean;\n};\n\nconst defaultValuePropsMapper = ({ value, onChange }) => ({\n  value: value ?? null,\n  onChange,\n});\n\n/** Binding inputs `useFieldProps` always strips before it returns. */\ntype StrippedFieldKey = 'field' | 'dependsOn' | 'deps';\n\n/**\n * A modern controller is stripped at runtime, so each member of `form` that is\n * one becomes `undefined`; a legacy instance survives, and `any` stays `any`.\n * Distributive, so it still applies when `Props` is a type parameter.\n */\ntype ResolvedFieldForm<Form> = Form extends ModernFormBrand ? undefined : Form;\n\n/**\n * The input's declared prop shape minus what the hook always strips: a DOM-safe\n * name, no binding inputs, and no modern controller in `form`.\n */\ntype ResolvedFieldProps<Props> = {\n  [Key in keyof Props as Key extends StrippedFieldKey\n    ? never\n    : Key]: Key extends 'name'\n    ? string | undefined\n    : Key extends 'form'\n      ? ResolvedFieldForm<Props[Key]>\n      : Props[Key];\n};\n\n/**\n * The single entry point for input components (see\n * `docs/rules/input-components.md`).\n *\n * Every hook below runs on every render, whatever the mode: standalone (no\n * `name`), inside the deprecated `<Field>`, disabled through\n * `unsafe__isDisabled`, or bound to a form. The mode only decides which props\n * come back, so an input can gain or lose a `name`, or move between forms,\n * without changing its hook order. The legacy binding (`useField`) is the\n * legacy backend's adapter and is inert when the field is not bound to it.\n */\nexport function useFieldProps<\n  T extends FieldTypes,\n  Props extends UseFieldProps<T>,\n>(\n  inputProps: Props,\n  params: UseFieldPropsParams = {},\n): ResolvedFieldProps<Props> {\n  // Provider defaults, then form context, then the normalization of the\n  // deprecated `validationState` prop into `isInvalid`/`isValid`.\n  const provided = useProviderProps(inputProps);\n  const props: Props = useValidationProps(\n    useFormProps(\n      provided.field\n        ? {\n            ...provided,\n            ...provided.field.options,\n            form: provided.field.form,\n            name:\n              typeof provided.field.path === 'string'\n                ? provided.field.path\n                : getFieldKey(provided.field.path),\n          }\n        : provided,\n    ),\n  );\n\n  // The initial value is what counts: changing it after mount is unsupported.\n  const [isDisabled] = useState(params.unsafe__isDisabled ?? false);\n\n  const {\n    valuePropsMapper = defaultValuePropsMapper,\n    defaultValidationTrigger = 'onBlur',\n  } = params;\n\n  const isInsideLegacyField = useInsideLegacyField();\n\n  if (props.rules && !props.name) {\n    warn(\n      `The \"rules\" prop is not suitable for fields that are not part of a form. Use \"name\" prop to link the field to a form.`,\n    );\n  }\n\n  const hasName = props.name != null;\n  const generatedId = useId();\n  const isBound = hasName && !isInsideLegacyField && !isDisabled;\n\n  const field = useFieldBinding<T, Props>(\n    props,\n    {\n      defaultValidationTrigger: params.defaultValidationTrigger,\n      unbound: !isBound,\n    },\n    generatedId,\n  );\n\n  const isOutsideOfForm = field?.form == null;\n\n  const onChangeEvent = useEvent((value, dontTouch: boolean) => {\n    field?.onChange?.(\n      value,\n      dontTouch,\n      field?.validateTrigger ?? defaultValidationTrigger,\n    );\n  });\n\n  function resolveResult(): Props {\n    if (isInsideLegacyField || isDisabled) {\n      return props;\n    }\n\n    if (!hasName) {\n      // Standalone field - just add generated ID if not provided\n      if (!props.id) {\n        const result = { ...props, id: generatedId };\n\n        if (result.id && !result.labelProps) {\n          result.labelProps = { for: result.id };\n        } else if (result.id && result.labelProps && !result.labelProps.for) {\n          result.labelProps = { ...result.labelProps, for: result.id };\n        }\n\n        return result as Props;\n      }\n      return props;\n    }\n\n    if (props.rules && isOutsideOfForm) {\n      warn(\n        `The \"rules\" prop is not supported for fields that are not part of a form. The \"${props.name}\" field is placed outside the form.`,\n      );\n    }\n\n    const valueProps = !isOutsideOfForm\n      ? valuePropsMapper({\n          value: field.value,\n          onChange: onChangeEvent,\n        })\n      : {};\n\n    // Exclude `form` (it must never reach a DOM node) and the field's own\n    // handlers: `valueProps` already routes the component's change event into\n    // `field.onChange` under the name the component listens to, and `onBlur` is\n    // added once below. `mergeProps` chains same-named handlers, so merging them\n    // here as well made every user change and every blur run the field handler\n    // twice — and onChange/onBlur-triggered validation validate twice.\n    const {\n      form: _form,\n      onChange: _fieldOnChange,\n      onBlur: _fieldOnBlur,\n      ...fieldRest\n    } = field ?? {};\n\n    const result: Props = isOutsideOfForm\n      ? props\n      : mergeProps(props, fieldRest, valueProps, {\n          validateTrigger: field.validateTrigger ?? defaultValidationTrigger,\n          // Chained after the caller's own `onBlur` by `mergeProps`.\n          onBlur: field.onBlur,\n        });\n\n    return result.id\n      ? { ...result, labelProps: { ...result.labelProps, for: result.id } }\n      : result;\n  }\n\n  const resolved = resolveResult();\n  // React Aria forwards `form` to native inputs. A modern controller is a\n  // binding source, never an HTML form id, including in standalone/group mode.\n  const result = isModernFormController(resolved.form)\n    ? { ...resolved, form: undefined }\n    : resolved;\n\n  const {\n    field: _descriptor,\n    dependsOn: _dependsOn,\n    deps: _deps,\n    ...domProps\n  } = result;\n  // Standalone and group-scoped inputs do not merge a bound field's props.\n  // Their tuple must still become a string before React Aria or DOM forwarding.\n  const namedProps =\n    domProps.name != null && typeof domProps.name !== 'string'\n      ? { ...domProps, name: getFieldKey(domProps.name) }\n      : domProps;\n  useDebugValue(namedProps);\n\n  return namedProps as unknown as ResolvedFieldProps<Props>;\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-field-props.js","names":["useDebugValue","useId","useState","useEvent","useProviderProps","mergeProps","warn","useFieldDescribedBy","useValidationProps","isModernFormController","useInsideLegacyField","useFormProps","getFieldKey","useFieldBinding","ValidateTrigger","ModernFormBrand","FieldTypes","UseFieldProps","UseFieldPropsParams","valuePropsMapper","value","onChange","defaultValidationTrigger","unsafe__isDisabled","defaultValuePropsMapper","StrippedFieldKey","ResolvedFieldForm","Form","ResolvedFieldProps","Props","Key","useFieldProps","inputProps","t0","$","_c","t1","undefined","params","provided","t2","field","options","form","name","path","props","isDisabled","t3","t4","isInsideLegacyField","rules","hasName","generatedId","isBound","t5","t6","unbound","isOutsideOfForm","t7","dontTouch","validateTrigger","onChangeEvent","t8","resolveResult","id","result","labelProps","for","valueProps","_form","_fieldOnChange","onBlur","_fieldOnBlur","fieldRest","result_0","resolved","result_1","_descriptor","dependsOn","_dependsOn","deps","_deps","domProps","namedProps","describedBy","t9","describedProps"],"sources":["../../../../../src/components/form/Form/use-field/use-field-props.tsx"],"sourcesContent":["import { useDebugValue, useId, useState } from 'react';\n\nimport { useEvent } from '../../../../_internal/index';\nimport { useProviderProps } from '../../../../provider';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { warn } from '../../../../utils/warnings';\nimport { useFieldDescribedBy } from '../../FieldWrapper/field-description';\nimport { useValidationProps } from '../../validation/index';\nimport { isModernFormController } from '../backend';\nimport { useInsideLegacyField } from '../Field';\nimport { useFormProps } from '../Form';\nimport { getFieldKey } from '../modern/values';\n\nimport { useFieldBinding } from './use-field-binding';\n\nimport type { ValidateTrigger } from '../../../../shared/index';\nimport type { ModernFormBrand } from '../backend';\nimport type { FieldTypes } from '../types';\nimport type { UseFieldProps } from './types';\n\nexport type UseFieldPropsParams = {\n  valuePropsMapper?: ({ value, onChange }) => any;\n  /**\n   * @default 'onBlur'\n   */\n  defaultValidationTrigger?: ValidateTrigger;\n  /**\n   * prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden\n   * If you want to change this prop after mount, remount the component with a new value.\n   */\n  unsafe__isDisabled?: boolean;\n};\n\nconst defaultValuePropsMapper = ({ value, onChange }) => ({\n  value: value ?? null,\n  onChange,\n});\n\n/** Binding inputs `useFieldProps` always strips before it returns. */\ntype StrippedFieldKey = 'field' | 'dependsOn' | 'deps';\n\n/**\n * A modern controller is stripped at runtime, so each member of `form` that is\n * one becomes `undefined`; a legacy instance survives, and `any` stays `any`.\n * Distributive, so it still applies when `Props` is a type parameter.\n */\ntype ResolvedFieldForm<Form> = Form extends ModernFormBrand ? undefined : Form;\n\n/**\n * The input's declared prop shape minus what the hook always strips: a DOM-safe\n * name, no binding inputs, and no modern controller in `form`.\n */\ntype ResolvedFieldProps<Props> = {\n  [Key in keyof Props as Key extends StrippedFieldKey\n    ? never\n    : Key]: Key extends 'name'\n    ? string | undefined\n    : Key extends 'form'\n      ? ResolvedFieldForm<Props[Key]>\n      : Props[Key];\n};\n\n/**\n * The single entry point for input components (see\n * `docs/rules/input-components.md`).\n *\n * Every hook below runs on every render, whatever the mode: standalone (no\n * `name`), inside the deprecated `<Field>`, disabled through\n * `unsafe__isDisabled`, or bound to a form. The mode only decides which props\n * come back, so an input can gain or lose a `name`, or move between forms,\n * without changing its hook order. The legacy binding (`useField`) is the\n * legacy backend's adapter and is inert when the field is not bound to it.\n */\nexport function useFieldProps<\n  T extends FieldTypes,\n  Props extends UseFieldProps<T>,\n>(\n  inputProps: Props,\n  params: UseFieldPropsParams = {},\n): ResolvedFieldProps<Props> {\n  // Provider defaults, then form context, then the normalization of the\n  // deprecated `validationState` prop into `isInvalid`/`isValid`.\n  const provided = useProviderProps(inputProps);\n  const props: Props = useValidationProps(\n    useFormProps(\n      provided.field\n        ? {\n            ...provided,\n            ...provided.field.options,\n            form: provided.field.form,\n            name:\n              typeof provided.field.path === 'string'\n                ? provided.field.path\n                : getFieldKey(provided.field.path),\n          }\n        : provided,\n    ),\n  );\n\n  // The initial value is what counts: changing it after mount is unsupported.\n  const [isDisabled] = useState(params.unsafe__isDisabled ?? false);\n\n  const {\n    valuePropsMapper = defaultValuePropsMapper,\n    defaultValidationTrigger = 'onBlur',\n  } = params;\n\n  const isInsideLegacyField = useInsideLegacyField();\n\n  if (props.rules && !props.name) {\n    warn(\n      `The \"rules\" prop is not suitable for fields that are not part of a form. Use \"name\" prop to link the field to a form.`,\n    );\n  }\n\n  const hasName = props.name != null;\n  const generatedId = useId();\n  const isBound = hasName && !isInsideLegacyField && !isDisabled;\n\n  const field = useFieldBinding<T, Props>(\n    props,\n    {\n      defaultValidationTrigger: params.defaultValidationTrigger,\n      unbound: !isBound,\n    },\n    generatedId,\n  );\n\n  const isOutsideOfForm = field?.form == null;\n\n  const onChangeEvent = useEvent((value, dontTouch: boolean) => {\n    field?.onChange?.(\n      value,\n      dontTouch,\n      field?.validateTrigger ?? defaultValidationTrigger,\n    );\n  });\n\n  function resolveResult(): Props {\n    if (isInsideLegacyField || isDisabled) {\n      return props;\n    }\n\n    if (!hasName) {\n      // Standalone field - just add generated ID if not provided\n      if (!props.id) {\n        const result = { ...props, id: generatedId };\n\n        if (result.id && !result.labelProps) {\n          result.labelProps = { for: result.id };\n        } else if (result.id && result.labelProps && !result.labelProps.for) {\n          result.labelProps = { ...result.labelProps, for: result.id };\n        }\n\n        return result as Props;\n      }\n      return props;\n    }\n\n    if (props.rules && isOutsideOfForm) {\n      warn(\n        `The \"rules\" prop is not supported for fields that are not part of a form. The \"${props.name}\" field is placed outside the form.`,\n      );\n    }\n\n    const valueProps = !isOutsideOfForm\n      ? valuePropsMapper({\n          value: field.value,\n          onChange: onChangeEvent,\n        })\n      : {};\n\n    // Exclude `form` (it must never reach a DOM node) and the field's own\n    // handlers: `valueProps` already routes the component's change event into\n    // `field.onChange` under the name the component listens to, and `onBlur` is\n    // added once below. `mergeProps` chains same-named handlers, so merging them\n    // here as well made every user change and every blur run the field handler\n    // twice — and onChange/onBlur-triggered validation validate twice.\n    const {\n      form: _form,\n      onChange: _fieldOnChange,\n      onBlur: _fieldOnBlur,\n      ...fieldRest\n    } = field ?? {};\n\n    const result: Props = isOutsideOfForm\n      ? props\n      : mergeProps(props, fieldRest, valueProps, {\n          validateTrigger: field.validateTrigger ?? defaultValidationTrigger,\n          // Chained after the caller's own `onBlur` by `mergeProps`.\n          onBlur: field.onBlur,\n        });\n\n    return result.id\n      ? { ...result, labelProps: { ...result.labelProps, for: result.id } }\n      : result;\n  }\n\n  const resolved = resolveResult();\n  // React Aria forwards `form` to native inputs. A modern controller is a\n  // binding source, never an HTML form id, including in standalone/group mode.\n  const result = isModernFormController(resolved.form)\n    ? { ...resolved, form: undefined }\n    : resolved;\n\n  const {\n    field: _descriptor,\n    dependsOn: _dependsOn,\n    deps: _deps,\n    ...domProps\n  } = result;\n  // Standalone and group-scoped inputs do not merge a bound field's props.\n  // Their tuple must still become a string before React Aria or DOM forwarding.\n  const namedProps =\n    domProps.name != null && typeof domProps.name !== 'string'\n      ? { ...domProps, name: getFieldKey(domProps.name) }\n      : domProps;\n  // Every input forwards `aria-describedby` to its control, so pointing it at\n  // the field's description and message here reaches all of them.\n  const describedBy = useFieldDescribedBy(\n    namedProps.id,\n    namedProps['aria-describedby'],\n  );\n  const describedProps =\n    describedBy === namedProps['aria-describedby']\n      ? namedProps\n      : { ...namedProps, 'aria-describedby': describedBy };\n  useDebugValue(describedProps);\n\n  return describedProps as unknown as ResolvedFieldProps<Props>;\n}\n"],"mappings":"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"}

package/dist/components/form/Form/use-field/use-field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController, modernBackendUnavailableError } from "./backend.js";
 import { applyRules } from "./validation.js";
 import { dotizeConvert } from "../../../utils/dotize.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";
@@ -58,7 +58,7 @@ const NecessityLabelElement = tasty({
 * `isRequired` or `isOptional`.
 */
 function NecessityIndicatorMark(props) {
-	const $ = c(11);
+	const $ = c(12);
 	const { isRequired, isOptional, necessityIndicator: t0, includeNecessityIndicatorInAccessibilityName: t1 } = props;
 	const necessityIndicator = t0 === void 0 ? "icon" : t0;
 	const includeNecessityIndicatorInAccessibilityName = t1 === void 0 ? false : t1;
@@ -73,44 +73,47 @@ function NecessityIndicatorMark(props) {
 	if (necessityIndicator !== "icon" && necessityIndicator !== "label") return null;
 	if (isRequired) {
 		if (necessityIndicator === "icon") {
-			const t3 = includeNecessityIndicatorInAccessibilityName ? requiredLabel : void 0;
-			let t4;
-			if ($[2] !== t3) {
-				t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [" ​", /* @__PURE__ */ jsx("span", {
-					"aria-label": t3,
+			let t3;
+			if ($[2] !== includeNecessityIndicatorInAccessibilityName || $[3] !== requiredLabel) {
+				t3 = /* @__PURE__ */ jsxs(Fragment$1, { children: [" ​", /* @__PURE__ */ jsx("span", {
+					...includeNecessityIndicatorInAccessibilityName ? {
+						role: "img",
+						"aria-label": requiredLabel
+					} : { "aria-hidden": true },
 					children: REQUIRED_ICON
 				})] });
-				$[2] = t3;
-				$[3] = t4;
-			} else t4 = $[3];
-			return t4;
+				$[2] = includeNecessityIndicatorInAccessibilityName;
+				$[3] = requiredLabel;
+				$[4] = t3;
+			} else t3 = $[4];
+			return t3;
 		}
 		const t3 = !includeNecessityIndicatorInAccessibilityName ? true : void 0;
 		let t4;
-		if ($[4] !== requiredLabel || $[5] !== t3) {
+		if ($[5] !== requiredLabel || $[6] !== t3) {
 			t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [" ​", /* @__PURE__ */ jsx(NecessityLabelElement, {
 				"aria-hidden": t3,
 				children: requiredLabel
 			})] });
-			$[4] = requiredLabel;
-			$[5] = t3;
-			$[6] = t4;
-		} else t4 = $[6];
+			$[5] = requiredLabel;
+			$[6] = t3;
+			$[7] = t4;
+		} else t4 = $[7];
 		return t4;
 	}
 	if (!isOptional) return null;
 	let t3;
-	if ($[7] !== t) {
+	if ($[8] !== t) {
 		t3 = t("form.optional", "(optional)");
-		$[7] = t;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[8] = t;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[9] !== t3) {
+	if ($[10] !== t3) {
 		t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [" ​", /* @__PURE__ */ jsx(NecessityLabelElement, { children: t3 })] });
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
 	return t4;
 }
 const INLINE_LABEL_STYLES = {