@dynatrace/strato-components 3.8.0 → 3.9.1

package/esm/forms/forms-core/components/form-field-group/FormFieldGroup.js

@@ -0,0 +1,149 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useReducer,
+  useState
+} from "react";
+import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
+import { parseBoolean as _parseBoolean } from "../../../../core/utils/parse-boolean.js";
+import {
+  _FormFieldContext as FormFieldContext
+} from "../../contexts/FormFieldContext.js";
+import { _formFieldReducer } from "../../state/formfield-state-reducer.js";
+const COMPONENT_NAME = "_FormFieldGroup";
+const RootFormFieldGroup = /* @__PURE__ */ forwardRef(
+  (props, forwardedRef) => {
+    const {
+      as,
+      formControlId,
+      children,
+      className: consumerClassName,
+      style: consumerStyle,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      "aria-labelledby": ariaLabelledby,
+      "aria-disabled": ariaDisabledProp,
+      disabled,
+      required,
+      readOnly,
+      ...remainingProps
+    } = props;
+    const Component = as ?? "fieldset";
+    const isFieldset = Component === "fieldset";
+    const ariaDisabled = _parseBoolean(ariaDisabledProp);
+    const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+    const [formFieldState, formFieldDispatch] = useReducer(
+      _formFieldReducer,
+      {}
+    );
+    const [memberFormControlIds, setMemberFormControlIds] = useState(
+      []
+    );
+    const [formFieldLabelIds, setFormFieldLabelIds] = useState([]);
+    const registerMemberFormControlId = useCallback((id) => {
+      setMemberFormControlIds(
+        (currentIds) => currentIds.includes(id) ? currentIds : [...currentIds, id]
+      );
+      return () => {
+        setMemberFormControlIds(
+          (currentIds) => currentIds.filter((currentId) => currentId !== id)
+        );
+      };
+    }, []);
+    const registerFormFieldLabelId = useCallback((id) => {
+      setFormFieldLabelIds(
+        (currentIds) => currentIds.includes(id) ? currentIds : [...currentIds, id]
+      );
+      return () => {
+        setFormFieldLabelIds(
+          (currentIds) => currentIds.filter((currentId) => currentId !== id)
+        );
+      };
+    }, []);
+    const contextValue = useMemo(
+      () => ({
+        controlId: formControlId,
+        formFieldId: formControlId,
+        formControlId,
+        memberFormControlIds,
+        registerFormControlId: () => () => void 0,
+        registerMemberFormControlId,
+        formFieldLabelId: formFieldLabelIds[0],
+        registerFormFieldLabelId,
+        disabled: formFieldState.disabled ?? disabled,
+        required: formFieldState.required ?? required,
+        readOnly: formFieldState.readOnly ?? readOnly,
+        dispatch: formFieldDispatch,
+        ariaDisabled: formFieldState.ariaDisabled ?? ariaDisabled
+      }),
+      [
+        ariaDisabled,
+        disabled,
+        formControlId,
+        formFieldLabelIds,
+        formFieldState.ariaDisabled,
+        formFieldState.disabled,
+        formFieldState.readOnly,
+        formFieldState.required,
+        memberFormControlIds,
+        readOnly,
+        registerFormFieldLabelId,
+        registerMemberFormControlId,
+        required
+      ]
+    );
+    return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: forwardedRef,
+        id: formControlId,
+        className: consumerClassName,
+        style: consumerStyle,
+        "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        "aria-labelledby": ariaLabelledby ?? formFieldLabelIds[0],
+        "aria-disabled": ariaDisabledProp,
+        disabled: isFieldset ? disabled : void 0,
+        ...restProps,
+        ...behavioralTrackingProps,
+        "data-dt-component": COMPONENT_NAME,
+        children
+      }
+    ) });
+  }
+);
+RootFormFieldGroup.displayName = COMPONENT_NAME;
+const Legend = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    ...remainingProps
+  } = props;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      ref: forwardedRef,
+      className: consumerClassName,
+      style: consumerStyle,
+      "data-testid": dataTestId,
+      ...restProps,
+      ...behavioralTrackingProps,
+      children
+    }
+  );
+});
+Legend.displayName = "_FormFieldGroup.Legend";
+const _FormFieldGroup = Object.assign(RootFormFieldGroup, {
+  Legend
+});
+export {
+  _FormFieldGroup
+};
+//# sourceMappingURL=FormFieldGroup.js.map

package/esm/forms/forms-core/components/form-field-group/FormFieldGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/forms/forms-core/components/form-field-group/FormFieldGroup.tsx"],
+  "sourcesContent": ["import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useReducer,\n  useState,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { DOMProps } from '../../../../core/types/dom.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../../../core/types/polymorph.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport {\n  _FormFieldContext as FormFieldContext,\n  type SharedFormFieldContextProps,\n} from '../../contexts/FormFieldContext.js';\nimport { _formFieldReducer } from '../../state/formfield-state-reducer.js';\n\nconst COMPONENT_NAME = '_FormFieldGroup';\n\nexport interface FormFieldGroupOwnProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    DOMProps,\n    AriaLabelingProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {\n  /**\n   * Logical id of the grouped form control. Used as the group root id and as\n   * the label target for a nested `Label`.\n   */\n  formControlId: string;\n\n  /**\n   * Whether the group and descendant form controls are disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether descendant form controls are required.\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * Whether descendant form controls are read-only.\n   * @defaultValue false\n   */\n  readOnly?: boolean;\n}\n\nexport type FormFieldGroupProps<E extends ElementType> = Omit<\n  PolymorphicComponentProps<E, FormFieldGroupOwnProps>,\n  'id'\n>;\n\nconst RootFormFieldGroup: <E extends ElementType = 'fieldset'>(\n  props: FormFieldGroupProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: FormFieldGroupProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      as,\n      formControlId,\n      children,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-labelledby': ariaLabelledby,\n      'aria-disabled': ariaDisabledProp,\n      disabled,\n      required,\n      readOnly,\n      ...remainingProps\n    } = props;\n    const Component: ElementType = as ?? 'fieldset';\n    const isFieldset = Component === 'fieldset';\n    const ariaDisabled = _parseBoolean(ariaDisabledProp);\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const [formFieldState, formFieldDispatch] = useReducer(\n      _formFieldReducer,\n      {},\n    );\n    const [memberFormControlIds, setMemberFormControlIds] = useState<string[]>(\n      [],\n    );\n    const [formFieldLabelIds, setFormFieldLabelIds] = useState<string[]>([]);\n\n    const registerMemberFormControlId = useCallback((id: string) => {\n      setMemberFormControlIds((currentIds) =>\n        currentIds.includes(id) ? currentIds : [...currentIds, id],\n      );\n\n      return () => {\n        setMemberFormControlIds((currentIds) =>\n          currentIds.filter((currentId) => currentId !== id),\n        );\n      };\n    }, []);\n\n    const registerFormFieldLabelId = useCallback((id: string) => {\n      setFormFieldLabelIds((currentIds) =>\n        currentIds.includes(id) ? currentIds : [...currentIds, id],\n      );\n\n      return () => {\n        setFormFieldLabelIds((currentIds) =>\n          currentIds.filter((currentId) => currentId !== id),\n        );\n      };\n    }, []);\n\n    const contextValue = useMemo<SharedFormFieldContextProps>(\n      () => ({\n        controlId: formControlId,\n        formFieldId: formControlId,\n        formControlId,\n        memberFormControlIds,\n        registerFormControlId: () => () => undefined,\n        registerMemberFormControlId,\n        formFieldLabelId: formFieldLabelIds[0],\n        registerFormFieldLabelId,\n        disabled: formFieldState.disabled ?? disabled,\n        required: formFieldState.required ?? required,\n        readOnly: formFieldState.readOnly ?? readOnly,\n        dispatch: formFieldDispatch,\n        ariaDisabled: formFieldState.ariaDisabled ?? ariaDisabled,\n      }),\n      [\n        ariaDisabled,\n        disabled,\n        formControlId,\n        formFieldLabelIds,\n        formFieldState.ariaDisabled,\n        formFieldState.disabled,\n        formFieldState.readOnly,\n        formFieldState.required,\n        memberFormControlIds,\n        readOnly,\n        registerFormFieldLabelId,\n        registerMemberFormControlId,\n        required,\n      ],\n    );\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <Component\n          ref={forwardedRef}\n          id={formControlId}\n          className={consumerClassName}\n          style={consumerStyle}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-labelledby={ariaLabelledby ?? formFieldLabelIds[0]}\n          aria-disabled={ariaDisabledProp}\n          disabled={isFieldset ? disabled : undefined}\n          {...restProps}\n          {...behavioralTrackingProps}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {children}\n        </Component>\n      </FormFieldContext.Provider>\n    );\n  },\n);\n\n(\n  RootFormFieldGroup as typeof RootFormFieldGroup & { displayName: string }\n).displayName = COMPONENT_NAME;\n\nexport interface FormFieldGroupLegendProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {}\n\nconst Legend = /* @__PURE__ */ forwardRef<\n  HTMLLegendElement,\n  FormFieldGroupLegendProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <legend\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...restProps}\n      {...behavioralTrackingProps}\n    >\n      {children}\n    </legend>\n  );\n});\n\n(Legend as typeof Legend & { displayName: string }).displayName =\n  '_FormFieldGroup.Legend';\n\n/**\n * Internal grouped-control primitive: renders the wrapping `<fieldset>`/legend\n * DOM and provides the FormField contexts a grouped control needs to register\n * its member ids and messages. Used today by RadioGroup and ToggleButtonGroup.\n *\n * Not exported publicly \u2014 the public grouped-control API and its wiring into\n * the Form runtime aggregator will be introduced by the upcoming Form API work\n * (APPDEV-10376). Consumers should keep using `RadioGroup` / `ToggleButtonGroup`.\n * @internal\n */\nexport const _FormFieldGroup = Object.assign(RootFormFieldGroup, {\n  Legend,\n});\n"],
+  "mappings": "AAwKQ;AAxKR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,kCAAkC;AAY3C,SAAS,gBAAgB,qBAAqB;AAC9C;AAAA,EACE,qBAAqB;AAAA,OAEhB;AACP,SAAS,yBAAyB;AAElC,MAAM,iBAAiB;AAyCvB,MAAM,qBAEqC;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,YAAyB,MAAM;AACrC,UAAM,aAAa,cAAc;AACjC,UAAM,eAAe,cAAc,gBAAgB;AAEnD,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAC1C;AAAA,MACA,CAAC;AAAA,IACH;AACA,UAAM,CAAC,sBAAsB,uBAAuB,IAAI;AAAA,MACtD,CAAC;AAAA,IACH;AACA,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAmB,CAAC,CAAC;AAEvE,UAAM,8BAA8B,YAAY,CAAC,OAAe;AAC9D;AAAA,QAAwB,CAAC,eACvB,WAAW,SAAS,EAAE,IAAI,aAAa,CAAC,GAAG,YAAY,EAAE;AAAA,MAC3D;AAEA,aAAO,MAAM;AACX;AAAA,UAAwB,CAAC,eACvB,WAAW,OAAO,CAAC,cAAc,cAAc,EAAE;AAAA,QACnD;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,2BAA2B,YAAY,CAAC,OAAe;AAC3D;AAAA,QAAqB,CAAC,eACpB,WAAW,SAAS,EAAE,IAAI,aAAa,CAAC,GAAG,YAAY,EAAE;AAAA,MAC3D;AAEA,aAAO,MAAM;AACX;AAAA,UAAqB,CAAC,eACpB,WAAW,OAAO,CAAC,cAAc,cAAc,EAAE;AAAA,QACnD;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,eAAe;AAAA,MACnB,OAAO;AAAA,QACL,WAAW;AAAA,QACX,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA,uBAAuB,MAAM,MAAM;AAAA,QACnC;AAAA,QACA,kBAAkB,kBAAkB,CAAC;AAAA,QACrC;AAAA,QACA,UAAU,eAAe,YAAY;AAAA,QACrC,UAAU,eAAe,YAAY;AAAA,QACrC,UAAU,eAAe,YAAY;AAAA,QACrC,UAAU;AAAA,QACV,cAAc,eAAe,gBAAgB;AAAA,MAC/C;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf,eAAe;AAAA,QACf,eAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,cAChC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,mBAAiB,kBAAkB,kBAAkB,CAAC;AAAA,QACtD,iBAAe;AAAA,QACf,UAAU,aAAa,WAAW;AAAA,QACjC,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAGE,mBACA,cAAc;AAQhB,MAAM,SAAyB,2BAG7B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,OAAmD,cAClD;AAYK,MAAM,kBAAkB,OAAO,OAAO,oBAAoB;AAAA,EAC/D;AACF,CAAC;",
+  "names": []
+}

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-8-0 {
+._16z6rg10-3-9-1 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-8-0 {
+._16z6rg11-3-9-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-8-0 {
+._16z6rg12-3-9-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-8-0 {
+._16z6rg13-3-9-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-8-0 {
+._16z6rg14-3-9-1 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.js

@@ -33,7 +33,8 @@ const FormFieldMessageItem = (props) => {
       });
     };
   }, [variant, id, dispatch, messageString]);
-  if (dispatch && state.controlIds && !state.showError && variant === "error") {
+  const hasFormControlRegistration = state.formControlId !== void 0 || state.memberFormControlIds !== void 0 && state.memberFormControlIds.length > 0;
+  if (dispatch && hasFormControlRegistration && !state.showError && variant === "error") {
     return null;
   }
   return /* @__PURE__ */ jsx(BaseItem, { variant, id, ...remainingProps, children: children ?? message });

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessageItem.tsx"],
-  "sourcesContent": ["import { useEffect, type ReactNode } from 'react';\n\nimport type { FormFieldMessageBaseItemProps } from './FormFieldMessageBaseItem.js';\nimport { InternalBaseItem as BaseItem } from './FormFieldMessageBaseItem.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../state/formfield-messages-state-reducer.js';\n\n/**\n * @public\n */\nexport type FormFieldMessageItemProps = FormFieldMessageBaseItemProps & {\n  /**\n   * Content of the FormFieldMessage\n   */\n  message?: ReactNode;\n  /**\n   * The validity state key set on the form control element.\n   * The automatically supported errors depend on the keys from the browser API (See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).\n   * In case the same key is used for additional validation, the message will be overwritten by the default.\n   *\n   */\n  validityStateKey?: string;\n};\n\n/**\n * Renders a FormFieldMessageItem message if given, otherwise renders the provided children.\n * @public\n */\nexport const FormFieldMessageItem = (props: FormFieldMessageItemProps) => {\n  const generatedId = useId();\n  const {\n    children,\n    variant = 'hint',\n    message,\n    id = generatedId,\n    validityStateKey,\n    ...remainingProps\n  } = props;\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const content = children ?? message;\n  const messageString = typeof content === 'string' ? content : undefined;\n\n  useEffect(() => {\n    dispatch?.({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id,\n        variant,\n        ...(messageString !== undefined && { messageText: messageString }),\n      },\n    });\n\n    return () => {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id },\n      });\n    };\n  }, [variant, id, dispatch, messageString]);\n\n  // Only if a controlId is present the component is already migrated to the new forms concept\n  if (dispatch && state.controlIds && !state.showError && variant === 'error') {\n    return null;\n  }\n\n  return (\n    <BaseItem variant={variant} id={id} {...remainingProps}>\n      {children ?? message}\n    </BaseItem>\n  );\n};\n\nFormFieldMessageItem.displayName = 'FormFieldMessageItem';\n"],
-  "mappings": "AAqEI;AArEJ,SAAS,iBAAiC;AAG1C,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,aAAa;AACtB,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AAuBjC,MAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,OAAO,SAAS,IAAI,4BAA4B;AAExD,QAAM,UAAU,YAAY;AAC5B,QAAM,gBAAgB,OAAO,YAAY,WAAW,UAAU;AAE9D,YAAU,MAAM;AACd,eAAW;AAAA,MACT,MAAM,wBAAwB;AAAA,MAC9B,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA,GAAI,kBAAkB,UAAa,EAAE,aAAa,cAAc;AAAA,MAClE;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,QACT,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,GAAG;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,IAAI,UAAU,aAAa,CAAC;AAGzC,MAAI,YAAY,MAAM,cAAc,CAAC,MAAM,aAAa,YAAY,SAAS;AAC3E,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,YAAS,SAAkB,IAAS,GAAG,gBACrC,sBAAY,SACf;AAEJ;AAEA,qBAAqB,cAAc;",
+  "sourcesContent": ["import { useEffect, type ReactNode } from 'react';\n\nimport type { FormFieldMessageBaseItemProps } from './FormFieldMessageBaseItem.js';\nimport { InternalBaseItem as BaseItem } from './FormFieldMessageBaseItem.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../state/formfield-messages-state-reducer.js';\n\n/**\n * @public\n */\nexport type FormFieldMessageItemProps = FormFieldMessageBaseItemProps & {\n  /**\n   * Content of the FormFieldMessage\n   */\n  message?: ReactNode;\n  /**\n   * The validity state key set on the form control element.\n   * The automatically supported errors depend on the keys from the browser API (See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).\n   * In case the same key is used for additional validation, the message will be overwritten by the default.\n   *\n   */\n  validityStateKey?: string;\n};\n\n/**\n * Renders a FormFieldMessageItem message if given, otherwise renders the provided children.\n * @public\n */\nexport const FormFieldMessageItem = (props: FormFieldMessageItemProps) => {\n  const generatedId = useId();\n  const {\n    children,\n    variant = 'hint',\n    message,\n    id = generatedId,\n    validityStateKey,\n    ...remainingProps\n  } = props;\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const content = children ?? message;\n  const messageString = typeof content === 'string' ? content : undefined;\n\n  useEffect(() => {\n    dispatch?.({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id,\n        variant,\n        ...(messageString !== undefined && { messageText: messageString }),\n      },\n    });\n\n    return () => {\n      dispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id },\n      });\n    };\n  }, [variant, id, dispatch, messageString]);\n\n  // Only registered controls use the new validation-message visibility model.\n  const hasFormControlRegistration =\n    state.formControlId !== undefined ||\n    (state.memberFormControlIds !== undefined &&\n      state.memberFormControlIds.length > 0);\n\n  if (\n    dispatch &&\n    hasFormControlRegistration &&\n    !state.showError &&\n    variant === 'error'\n  ) {\n    return null;\n  }\n\n  return (\n    <BaseItem variant={variant} id={id} {...remainingProps}>\n      {children ?? message}\n    </BaseItem>\n  );\n};\n\nFormFieldMessageItem.displayName = 'FormFieldMessageItem';\n"],
+  "mappings": "AA+EI;AA/EJ,SAAS,iBAAiC;AAG1C,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,aAAa;AACtB,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AAuBjC,MAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,OAAO,SAAS,IAAI,4BAA4B;AAExD,QAAM,UAAU,YAAY;AAC5B,QAAM,gBAAgB,OAAO,YAAY,WAAW,UAAU;AAE9D,YAAU,MAAM;AACd,eAAW;AAAA,MACT,MAAM,wBAAwB;AAAA,MAC9B,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA,GAAI,kBAAkB,UAAa,EAAE,aAAa,cAAc;AAAA,MAClE;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,QACT,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,GAAG;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,IAAI,UAAU,aAAa,CAAC;AAGzC,QAAM,6BACJ,MAAM,kBAAkB,UACvB,MAAM,yBAAyB,UAC9B,MAAM,qBAAqB,SAAS;AAExC,MACE,YACA,8BACA,CAAC,MAAM,aACP,YAAY,SACZ;AACA,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,YAAS,SAAkB,IAAS,GAAG,gBACrC,sBAAY,SACf;AAEJ;AAEA,qBAAqB,cAAc;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -1,7 +1,7 @@
 import "./FormFieldMessageItem.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-8-0", variantClassNames: { variant: { hint: "_16z6rg11-3-8-0", error: "_16z6rg12-3-8-0" }, disabled: { true: "_16z6rg13-3-8-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-8-0";
+var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-9-1", variantClassNames: { variant: { hint: "_16z6rg11-3-9-1", error: "_16z6rg12-3-9-1" }, disabled: { true: "_16z6rg13-3-9-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-9-1";
 export {
   formFieldMessageItem,
   formFieldMessageItemText

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css.ts"],
-  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-8-0',variantClassNames:{variant:{hint:'_16z6rg11-3-8-0',error:'_16z6rg12-3-8-0'},disabled:{true:'_16z6rg13-3-8-0'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-8-0';"],
+  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-9-1',variantClassNames:{variant:{hint:'_16z6rg11-3-9-1',error:'_16z6rg12-3-9-1'},disabled:{true:'_16z6rg13-3-9-1'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,SAAQ,QAAO,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzP,IAAI,2BAA2B;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -1,5 +1,5 @@
 import "./FormFieldMessages.css";
-var formFieldMessages = "_1l9bja60-3-8-0";
+var formFieldMessages = "_1l9bja60-3-9-1";
 export {
   formFieldMessages
 };

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessages.css.ts"],
-  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-8-0';"],
+  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-9-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

package/esm/forms/forms-core/components/label/Label.css

@@ -1,15 +1,15 @@
-._1gxatyo0-3-8-0 {
+._1gxatyo0-3-9-1 {
   display: inline-block;
 }
-._1gxatyo1-3-8-0 {
+._1gxatyo1-3-9-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-8-0:after {
+._1gxatyo2-3-9-1:after {
   content: "*" / "";
 }
-._1gxatyo3-3-8-0 {
+._1gxatyo3-3-9-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1gxatyo4-3-8-0 {
+._1gxatyo4-3-9-1 {
   margin-left: var(--dt-spacings-size-4, 4px);
 }

package/esm/forms/forms-core/components/label/Label.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 import * as styles from "./Label.sty.js";
 import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
+import { useId } from "../../../../core/hooks/useId.js";
 import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../../../core/utils/can-receive-default-text-format.js";
 import { mergeProps } from "../../../../core/utils/merge-props.js";
 import { Text } from "../../../../typography/text/Text.js";
@@ -36,22 +37,34 @@ const Label = /* @__PURE__ */ forwardRef(
       "aria-disabled": ariaDisabledProp,
       ...remainingProps
     } = props;
+    const generatedId = useId();
     const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const {
-      controlId: formFieldContextId,
+      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+      controlId,
+      formFieldId,
       required,
       disabled,
       ariaDisabled,
-      readOnly
+      readOnly,
+      formControlId,
+      registerFormFieldLabelId
     } = useFormFieldContext();
+    const labelId = id ?? (formFieldId ? generatedId : void 0);
+    useEffect(() => {
+      if (labelId === void 0) {
+        return;
+      }
+      return registerFormFieldLabelId(labelId);
+    }, [labelId, registerFormFieldLabelId]);
     const isStringChild = _canReceiveDefaultTextFormat(children);
     const Component = isStringChild ? SimpleLabelText : "label";
-    const labelFor = htmlFor || formFieldContextId;
+    const labelFor = htmlFor || formControlId || formFieldId || controlId;
     return /* @__PURE__ */ jsxs(
       Component,
       {
         htmlFor: labelFor,
-        id,
+        id: labelId,
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,

package/esm/forms/forms-core/components/label/Label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/label/Label.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './Label.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { AriaDisabledProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../../core/utils/can-receive-default-text-format.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\n\nconst COMPONENT_NAME = 'Label';\n\n/**\n * Available options for the label size\n * @public\n */\nexport interface LabelProps\n  extends WithChildren,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {\n  /** Defines the id of a labelable form related field. */\n  htmlFor?: string;\n\n  /**\n   * If there is a wrapping form field then this label uses the required value\n   * from the form field, otherwise it uses this required value. The label\n   * has a visual style to indicate the associated field is a mandatory field.\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * If there is a wrapping form field then this label uses the disabled value\n   * from the form field, otherwise it uses this disabled value. The label\n   * has a visual style to indicate the associated field is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\nconst SimpleLabelText = forwardRef<HTMLLabelElement, LabelProps>(\n  (props, forwardedRef) => (\n    <Text\n      ref={forwardedRef}\n      as=\"label\"\n      textStyle=\"small-emphasized\"\n      {...props}\n    />\n  ),\n);\n\n/**\n * The `Label` component allows users to add an associated text to another\n * form control by using the `FormField` component.\n * @public\n */\nexport const Label = /* @__PURE__ */ forwardRef<HTMLLabelElement, LabelProps>(\n  (props, forwardedRef) => {\n    const {\n      id,\n      children,\n      htmlFor,\n      disabled: propDisabled,\n      required: propRequired,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-disabled': ariaDisabledProp,\n      ...remainingProps\n    }: LabelProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const {\n      controlId: formFieldContextId,\n      required,\n      disabled,\n      ariaDisabled,\n      readOnly,\n    } = useFormFieldContext();\n\n    const isStringChild = _canReceiveDefaultTextFormat(children);\n    const Component = isStringChild ? SimpleLabelText : 'label';\n\n    const labelFor = htmlFor || formFieldContextId;\n\n    return (\n      <Component\n        htmlFor={labelFor}\n        id={id}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          styles.label({\n            disabled: disabled || propDisabled || ariaDisabled,\n            // Only apply the required styles if we have string children, otherwise block level\n            // elements in children will move the `*` required marker somewhere.\n            required: isStringChild && (required ?? propRequired),\n            readOnly,\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...mergeProps(restProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n        {isStringChild && readOnly && (\n          <Text textStyle=\"small\" className={clsx(styles.readOnlyLabel)}>\n            <FormattedMessage\n              defaultMessage=\"(read only)\"\n              id=\"hIBEZw/eT6Nb+dz3\"\n              description=\"Text appended to a label when the associated form field is read-only.\"\n            />\n          </Text>\n        )}\n      </Component>\n    );\n  },\n);\n(Label as typeof Label & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AAsDI,cAgDE,YAhDF;AAtDJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAEjC,YAAY,YAAY;AACxB,SAAS,kCAAkC;AAQ3C,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,MAAM,iBAAiB;AAkCvB,MAAM,kBAAkB;AAAA,EACtB,CAAC,OAAO,iBACN;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAG;AAAA,MACH,WAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ;AAOO,MAAM,QAAwB;AAAA,EACnC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAgB;AAEhB,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM;AAAA,MACJ,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,oBAAoB;AAExB,UAAM,gBAAgB,6BAA6B,QAAQ;AAC3D,UAAM,YAAY,gBAAgB,kBAAkB;AAEpD,UAAM,WAAW,WAAW;AAE5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO,MAAM;AAAA,YACX,UAAU,YAAY,gBAAgB;AAAA;AAAA;AAAA,YAGtC,UAAU,kBAAkB,YAAY;AAAA,YACxC;AAAA,UACF,CAAC;AAAA,UACD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,QACjD,qBAAmB;AAAA,QAElB;AAAA;AAAA,UACA,iBAAiB,YAChB,oBAAC,QAAK,WAAU,SAAQ,WAAW,KAAK,OAAO,aAAa,GAC1D;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACC,MAAiD,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './Label.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { AriaDisabledProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../../core/utils/can-receive-default-text-format.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\n\nconst COMPONENT_NAME = 'Label';\n\n/**\n * Available options for the label size\n * @public\n */\nexport interface LabelProps\n  extends WithChildren,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {\n  /** Defines the id of a labelable form related field. */\n  htmlFor?: string;\n\n  /**\n   * If there is a wrapping form field then this label uses the required value\n   * from the form field, otherwise it uses this required value. The label\n   * has a visual style to indicate the associated field is a mandatory field.\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * If there is a wrapping form field then this label uses the disabled value\n   * from the form field, otherwise it uses this disabled value. The label\n   * has a visual style to indicate the associated field is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n}\n\nconst SimpleLabelText = forwardRef<HTMLLabelElement, LabelProps>(\n  (props, forwardedRef) => (\n    <Text\n      ref={forwardedRef}\n      as=\"label\"\n      textStyle=\"small-emphasized\"\n      {...props}\n    />\n  ),\n);\n\n/**\n * The `Label` component allows users to add an associated text to another\n * form control by using the `FormField` component.\n * @public\n */\nexport const Label = /* @__PURE__ */ forwardRef<HTMLLabelElement, LabelProps>(\n  (props, forwardedRef) => {\n    const {\n      id,\n      children,\n      htmlFor,\n      disabled: propDisabled,\n      required: propRequired,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'aria-disabled': ariaDisabledProp,\n      ...remainingProps\n    }: LabelProps = props;\n    const generatedId = useId();\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlId,\n      formFieldId,\n      required,\n      disabled,\n      ariaDisabled,\n      readOnly,\n      formControlId,\n      registerFormFieldLabelId,\n    } = useFormFieldContext();\n\n    const labelId = id ?? (formFieldId ? generatedId : undefined);\n\n    useEffect(() => {\n      if (labelId === undefined) {\n        return;\n      }\n\n      return registerFormFieldLabelId(labelId);\n    }, [labelId, registerFormFieldLabelId]);\n\n    const isStringChild = _canReceiveDefaultTextFormat(children);\n    const Component = isStringChild ? SimpleLabelText : 'label';\n\n    const labelFor = htmlFor || formControlId || formFieldId || controlId;\n\n    return (\n      <Component\n        htmlFor={labelFor}\n        id={labelId}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(\n          styles.label({\n            disabled: disabled || propDisabled || ariaDisabled,\n            // Only apply the required styles if we have string children, otherwise block level\n            // elements in children will move the `*` required marker somewhere.\n            required: isStringChild && (required ?? propRequired),\n            readOnly,\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...mergeProps(restProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        {children}\n        {isStringChild && readOnly && (\n          <Text textStyle=\"small\" className={clsx(styles.readOnlyLabel)}>\n            <FormattedMessage\n              defaultMessage=\"(read only)\"\n              id=\"hIBEZw/eT6Nb+dz3\"\n              description=\"Text appended to a label when the associated form field is read-only.\"\n            />\n          </Text>\n        )}\n      </Component>\n    );\n  },\n);\n(Label as typeof Label & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AAuDI,cA+DE,YA/DF;AAvDJ,OAAO,UAAU;AACjB,SAAS,YAAY,iBAAiB;AACtC,SAAS,wBAAwB;AAEjC,YAAY,YAAY;AACxB,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AAQtB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAEpC,MAAM,iBAAiB;AAkCvB,MAAM,kBAAkB;AAAA,EACtB,CAAC,OAAO,iBACN;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAG;AAAA,MACH,WAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ;AAOO,MAAM,QAAwB;AAAA,EACnC,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAgB;AAChB,UAAM,cAAc,MAAM;AAE1B,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,UAAM;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,oBAAoB;AAExB,UAAM,UAAU,OAAO,cAAc,cAAc;AAEnD,cAAU,MAAM;AACd,UAAI,YAAY,QAAW;AACzB;AAAA,MACF;AAEA,aAAO,yBAAyB,OAAO;AAAA,IACzC,GAAG,CAAC,SAAS,wBAAwB,CAAC;AAEtC,UAAM,gBAAgB,6BAA6B,QAAQ;AAC3D,UAAM,YAAY,gBAAgB,kBAAkB;AAEpD,UAAM,WAAW,WAAW,iBAAiB,eAAe;AAE5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,WAAW;AAAA,UACT,OAAO,MAAM;AAAA,YACX,UAAU,YAAY,gBAAgB;AAAA;AAAA;AAAA,YAGtC,UAAU,kBAAkB,YAAY;AAAA,YACxC;AAAA,UACF,CAAC;AAAA,UACD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,QACjD,qBAAmB;AAAA,QAElB;AAAA;AAAA,UACA,iBAAiB,YAChB,oBAAC,QAAK,WAAU,SAAQ,WAAW,KAAK,OAAO,aAAa,GAC1D;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACC,MAAiD,cAAc;",
   "names": []
 }

package/esm/forms/forms-core/components/label/Label.sty.js

@@ -1,7 +1,7 @@
 import "./Label.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var label = _7a468({ defaultClassName: "_1gxatyo0-3-8-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-8-0" }, required: { true: "_1gxatyo2-3-8-0" }, readOnly: { true: "_1gxatyo3-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var readOnlyLabel = "_1gxatyo4-3-8-0";
+var label = _7a468({ defaultClassName: "_1gxatyo0-3-9-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-9-1" }, required: { true: "_1gxatyo2-3-9-1" }, readOnly: { true: "_1gxatyo3-3-9-1" } }, defaultVariants: {}, compoundVariants: [] });
+var readOnlyLabel = "_1gxatyo4-3-9-1";
 export {
   label,
   readOnlyLabel

package/esm/forms/forms-core/components/label/Label.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/label/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var label = _7a468({defaultClassName:'_1gxatyo0-3-8-0',variantClassNames:{disabled:{true:'_1gxatyo1-3-8-0'},required:{true:'_1gxatyo2-3-8-0'},readOnly:{true:'_1gxatyo3-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-8-0';"],
+  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var label = _7a468({defaultClassName:'_1gxatyo0-3-9-1',variantClassNames:{disabled:{true:'_1gxatyo1-3-9-1'},required:{true:'_1gxatyo2-3-9-1'},readOnly:{true:'_1gxatyo3-3-9-1'}},defaultVariants:{},compoundVariants:[]});\nexport var readOnlyLabel = '_1gxatyo4-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,QAAQ,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxN,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/forms-core/contexts/FormFieldContext.js

@@ -1,12 +1,22 @@
 import { createContext } from "react";
-const _FormFieldContext = createContext({
+const defaultFormFieldContext = {
   controlId: void 0,
+  formFieldId: void 0,
+  formControlId: void 0,
+  memberFormControlIds: [],
+  registerFormControlId: () => () => void 0,
+  registerMemberFormControlId: () => () => void 0,
+  formFieldLabelId: void 0,
+  registerFormFieldLabelId: () => () => void 0,
   required: void 0,
   disabled: void 0,
   ariaDisabled: void 0,
   dispatch: void 0,
   readOnly: void 0
-});
+};
+const _FormFieldContext = createContext(
+  defaultFormFieldContext
+);
 export {
   _FormFieldContext
 };

package/esm/forms/forms-core/contexts/FormFieldContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/contexts/FormFieldContext.ts"],
-  "sourcesContent": ["import { type Dispatch, createContext } from 'react';\n\nimport { FormFieldReducerAction } from '../state/formfield-state-reducer.js';\nimport type { SharedFormFieldProps } from '../types/formfield.types.js';\n\n/**\n * @public\n */\nexport interface SharedFormFieldContextProps extends SharedFormFieldProps {\n  dispatch?: Dispatch<FormFieldReducerAction>;\n}\n\n/**\n * @internal\n * Context provider for `FormField` props meant to be provided to all its input-related child nodes.\n */\nexport const _FormFieldContext = createContext<SharedFormFieldContextProps>({\n  controlId: undefined,\n  required: undefined,\n  disabled: undefined,\n  ariaDisabled: undefined,\n  dispatch: undefined,\n  readOnly: undefined,\n});\n"],
-  "mappings": "AAAA,SAAwB,qBAAqB;AAgBtC,MAAM,oBAAoB,cAA2C;AAAA,EAC1E,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;",
+  "sourcesContent": ["import { type Dispatch, createContext } from 'react';\n\nimport { FormFieldReducerAction } from '../state/formfield-state-reducer.js';\nimport type { SharedFormFieldProps } from '../types/formfield.types.js';\n\n/**\n * @public\n */\nexport interface SharedFormFieldContextProps extends SharedFormFieldProps {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  dispatch?: Dispatch<FormFieldReducerAction>;\n  /** @internal */\n  formFieldId?: string;\n  /**\n   * Logical form-control id registered against this FormField.\n   * @internal\n   */\n  formControlId?: string;\n  /**\n   * Native/member input ids belonging to the logical form control.\n   * @internal\n   */\n  memberFormControlIds?: string[];\n  /**\n   * Registers a logical form-control id and returns an unregister callback for\n   * React effect cleanup. Custom context consumers may omit this \u2014\n   * `useFormFieldContext` falls back to a noop.\n   * @internal\n   */\n  registerFormControlId?: (id: string) => () => void;\n  /**\n   * Registers a native/member input id and returns an unregister callback for\n   * React effect cleanup. Custom context consumers may omit this \u2014\n   * `useFormFieldContext` falls back to a noop.\n   * @internal\n   */\n  registerMemberFormControlId?: (id: string) => () => void;\n  /** @internal */\n  formFieldLabelId?: string;\n  /**\n   * Registers a label id and returns an unregister callback for React effect\n   * cleanup. Custom context consumers may omit this \u2014 `useFormFieldContext`\n   * falls back to a noop.\n   * @internal\n   */\n  registerFormFieldLabelId?: (id: string) => () => void;\n}\n\nconst defaultFormFieldContext: SharedFormFieldContextProps = {\n  controlId: undefined,\n  formFieldId: undefined,\n  formControlId: undefined,\n  memberFormControlIds: [],\n  registerFormControlId: () => () => undefined,\n  registerMemberFormControlId: () => () => undefined,\n  formFieldLabelId: undefined,\n  registerFormFieldLabelId: () => () => undefined,\n  required: undefined,\n  disabled: undefined,\n  ariaDisabled: undefined,\n  dispatch: undefined,\n  readOnly: undefined,\n};\n\n/**\n * @internal\n * Context provider for `FormField` props meant to be provided to all its input-related child nodes.\n */\nexport const _FormFieldContext = createContext<SharedFormFieldContextProps>(\n  defaultFormFieldContext,\n);\n"],
+  "mappings": "AAAA,SAAwB,qBAAqB;AAgD7C,MAAM,0BAAuD;AAAA,EAC3D,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,sBAAsB,CAAC;AAAA,EACvB,uBAAuB,MAAM,MAAM;AAAA,EACnC,6BAA6B,MAAM,MAAM;AAAA,EACzC,kBAAkB;AAAA,EAClB,0BAA0B,MAAM,MAAM;AAAA,EACtC,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;AAMO,MAAM,oBAAoB;AAAA,EAC/B;AACF;",
   "names": []
 }

package/esm/forms/forms-core/hooks/useFormControl.js

@@ -0,0 +1,143 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { useFormFieldContext } from "./useFormFieldContext.js";
+import { useFormFieldMessagesContext } from "./useFormFieldMessagesContext.js";
+import { useFormControlState } from "../../../core/hooks/useFormControlState.js";
+import { useId } from "../../../core/hooks/useId.js";
+import { parseBoolean } from "../../../core/utils/parse-boolean.js";
+import {
+  FormFieldMessagesAction
+} from "../state/formfield-messages-state-reducer.js";
+import { FormFieldAction } from "../state/formfield-state-reducer.js";
+function useFormControl({
+  propId,
+  propDisabled,
+  propAriaDisabled,
+  propRequired,
+  propReadOnly,
+  controlState,
+  validationVisibility = "immediate",
+  hasValidationError = false
+}) {
+  const uniqueId = useId();
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    controlId,
+    formFieldId,
+    required: contextRequired,
+    disabled: contextDisabled,
+    ariaDisabled: contextAriaDisabled,
+    readOnly: contextReadOnly,
+    dispatch: formFieldDispatch,
+    registerFormControlId
+  } = useFormFieldContext();
+  const { state: messageState, dispatch: messageDispatch } = useFormFieldMessagesContext();
+  const disabled = propDisabled ?? contextDisabled;
+  const ariaDisabled = parseBoolean(propAriaDisabled) ?? contextAriaDisabled;
+  const required = propRequired ?? contextRequired;
+  const readOnly = propReadOnly ?? contextReadOnly;
+  const legacyFallbackId = formFieldId ?? controlId;
+  const id = propId || legacyFallbackId || uniqueId;
+  useEffect(() => {
+    formFieldDispatch?.({
+      type: FormFieldAction.UPDATE,
+      payload: {
+        disabled: propDisabled,
+        required: propRequired,
+        ariaDisabled: parseBoolean(propAriaDisabled),
+        readOnly: propReadOnly
+      }
+    });
+  }, [
+    formFieldDispatch,
+    propDisabled,
+    propRequired,
+    propAriaDisabled,
+    propReadOnly
+  ]);
+  useEffect(() => {
+    messageDispatch?.({
+      type: FormFieldMessagesAction.DISABLEMESSAGE,
+      payload: { isDisabled: disabled }
+    });
+  }, [disabled, messageDispatch]);
+  useEffect(() => registerFormControlId(id), [id, registerFormControlId]);
+  useEffect(() => {
+    messageDispatch?.({
+      type: FormFieldMessagesAction.SETFORMCONTROLID,
+      payload: { formControlId: id }
+    });
+  }, [messageDispatch, id]);
+  const [hasLegacyHintError, hint] = useFormControlState(controlState);
+  const isAfterBlur = validationVisibility === "after-blur";
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+  const hasAnyError = messageState.showError || hasLegacyHintError || isAfterBlur && hasValidationError;
+  let nextRevealed = revealed;
+  if (isAfterBlur) {
+    if (revealed && !hasAnyError) {
+      nextRevealed = false;
+    } else if (!hasFocusWithin && (messageState.isTouched ?? false) && hasAnyError) {
+      nextRevealed = true;
+    }
+    if (nextRevealed !== revealed) {
+      setRevealed(nextRevealed);
+    }
+  }
+  const showValidationError = isAfterBlur ? hasAnyError && nextRevealed : messageState.showError;
+  const showError = !disabled && (showValidationError || hasLegacyHintError);
+  const hintId = useId();
+  const inputProps = {
+    "aria-describedby": hint ? hintId : void 0,
+    "aria-invalid": showValidationError || hasLegacyHintError
+  };
+  const hintProps = { id: hintId, "aria-live": "polite" };
+  const focusHandlers = useMemo(
+    () => isAfterBlur ? {
+      onFocus: () => setHasFocusWithin(true),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setHasFocusWithin(false);
+          messageDispatch?.({
+            type: FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+        }
+      }
+    } : {},
+    [isAfterBlur, messageDispatch]
+  );
+  const markTouched = useCallback(() => {
+    if (!isAfterBlur) {
+      return;
+    }
+    messageDispatch?.({
+      type: FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
+    setRevealed(true);
+  }, [isAfterBlur, messageDispatch]);
+  return {
+    id,
+    disabled,
+    required,
+    readOnly,
+    ariaDisabled,
+    inputProps,
+    hintProps,
+    hint,
+    showError,
+    messageState,
+    messageDispatch,
+    focusHandlers,
+    markTouched
+  };
+}
+export {
+  useFormControl
+};
+//# sourceMappingURL=useFormControl.js.map