@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/forms/_base-input/BaseInput.sty.js

@@ -3,17 +3,17 @@ import "../../styles/field.css";
 import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
-var container = "_1a8lqy98-3-13-2";
-var containerPadding = { none: "_1a8lqy99-3-13-2", rightNone: "_1a8lqy9a-3-13-2", rightUnset: "_1a8lqy9b-3-13-2", leftUnset: "_1a8lqy9c-3-13-2" };
-var disabled = "_1a8lqy92-3-13-2";
-var divider = "_1a8lqy9f-3-13-2";
-var hasError = "_1a8lqy91-3-13-2";
-var input = "_1a8lqy9d-3-13-2 _yfwka33-3-13-2 _da9a8v0-3-13-2 _da9a8v2-3-13-2 _da9a8v3-3-13-2 _da9a8vb-3-13-2";
-var isAutoFilled = "_1a8lqy9g-3-13-2";
-var readOnly = "_1a8lqy93-3-13-2";
-var reservedSuffixButton = "_1a8lqy9e-3-13-2";
-var variant = { "default": "_1a8lqy94-3-13-2", minimal: "_1a8lqy95-3-13-2" };
-var wrapper = "_1a8lqy90-3-13-2";
+var container = "_1a8lqy98-3-14-0";
+var containerPadding = { none: "_1a8lqy99-3-14-0", rightNone: "_1a8lqy9a-3-14-0", rightUnset: "_1a8lqy9b-3-14-0", leftUnset: "_1a8lqy9c-3-14-0" };
+var disabled = "_1a8lqy92-3-14-0";
+var divider = "_1a8lqy9f-3-14-0";
+var hasError = "_1a8lqy91-3-14-0";
+var input = "_1a8lqy9d-3-14-0 _yfwka33-3-14-0 _da9a8v0-3-14-0 _da9a8v2-3-14-0 _da9a8v3-3-14-0 _da9a8vb-3-14-0";
+var isAutoFilled = "_1a8lqy9g-3-14-0";
+var readOnly = "_1a8lqy93-3-14-0";
+var reservedSuffixButton = "_1a8lqy9e-3-14-0";
+var variant = { "default": "_1a8lqy94-3-14-0", minimal: "_1a8lqy95-3-14-0" };
+var wrapper = "_1a8lqy90-3-14-0";
 export {
   container,
   containerPadding,

package/esm/forms/_base-input/BaseInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var container = '_1a8lqy98-3-13-2';\nexport var containerPadding = {none:'_1a8lqy99-3-13-2',rightNone:'_1a8lqy9a-3-13-2',rightUnset:'_1a8lqy9b-3-13-2',leftUnset:'_1a8lqy9c-3-13-2'};\nexport var disabled = '_1a8lqy92-3-13-2';\nexport var divider = '_1a8lqy9f-3-13-2';\nexport var hasError = '_1a8lqy91-3-13-2';\nexport var input = '_1a8lqy9d-3-13-2 _yfwka33-3-13-2 _da9a8v0-3-13-2 _da9a8v2-3-13-2 _da9a8v3-3-13-2 _da9a8vb-3-13-2';\nexport var isAutoFilled = '_1a8lqy9g-3-13-2';\nexport var readOnly = '_1a8lqy93-3-13-2';\nexport var reservedSuffixButton = '_1a8lqy9e-3-13-2';\nexport var variant = {'default':'_1a8lqy94-3-13-2',minimal:'_1a8lqy95-3-13-2'};\nexport var wrapper = '_1a8lqy90-3-13-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var container = '_1a8lqy98-3-14-0';\nexport var containerPadding = {none:'_1a8lqy99-3-14-0',rightNone:'_1a8lqy9a-3-14-0',rightUnset:'_1a8lqy9b-3-14-0',leftUnset:'_1a8lqy9c-3-14-0'};\nexport var disabled = '_1a8lqy92-3-14-0';\nexport var divider = '_1a8lqy9f-3-14-0';\nexport var hasError = '_1a8lqy91-3-14-0';\nexport var input = '_1a8lqy9d-3-14-0 _yfwka33-3-14-0 _da9a8v0-3-14-0 _da9a8v2-3-14-0 _da9a8v3-3-14-0 _da9a8vb-3-14-0';\nexport var isAutoFilled = '_1a8lqy9g-3-14-0';\nexport var readOnly = '_1a8lqy93-3-14-0';\nexport var reservedSuffixButton = '_1a8lqy9e-3-14-0';\nexport var variant = {'default':'_1a8lqy94-3-14-0',minimal:'_1a8lqy95-3-14-0'};\nexport var wrapper = '_1a8lqy90-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,mBAAmB,EAAC,MAAK,oBAAmB,WAAU,oBAAmB,YAAW,oBAAmB,WAAU,mBAAkB;AACvI,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,WAAW;AACf,IAAI,uBAAuB;AAC3B,IAAI,UAAU,EAAC,WAAU,oBAAmB,SAAQ,mBAAkB;AACtE,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/_base-input/BaseInputButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInputButton.tsx"],
-  "sourcesContent": ["import {\n  type MouseEventHandler,\n  type ReactNode,\n  forwardRef,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useBaseInputContext } from './hooks/useBaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} 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 { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\n//#region Typings\n/**\n * Accepted properties for the BaseInput Button\n * @public\n */\nexport interface BaseInputButtonProps\n  extends AriaLabelingProps,\n    AriaDisabledProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /** Elements to be displayed in the BaseInput Button slot, preferably an icon or a similar visual element */\n  children: ReactNode;\n  /**\n   * If a button is disabled e.g. it cannot be interacted with.\n   * By default, it inherits the disabled prop of the BaseInput, but can be overwritten.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If specified, a tooltip is rendered with this text, which describes what the button does.\n   * The text is also used as `aria-label` while the tooltip is closed, ensuring a valid accessible name at all times.\n   * Please also consider translating the text in an internationalized context and use a short text description for the tooltip.\n   * The positioning and placing of the according tooltip will be handled by the component.\n   */\n  tooltipText?: string;\n  /**\n   * Behavioral tracking props to forward exclusively to the tooltip overlay.\n   * These will not be applied to the button itself.\n   */\n  tooltipBehavioralTrackingProps?: BehaviorTrackingProps;\n  /** Called when the button is interacted with. */\n  onClick?: MouseEventHandler;\n  /**\n   * Determines whether the input is in read-only mode.\n   * @deprecated - readOnly is not a valid property on a button. Please use disabled if needed.\n   */\n  readOnly?: boolean;\n}\n\n//#endregion\n\n/**\n * Component which allows users to trigger actions or events when clicking or when pressing `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const BaseInputButton = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  BaseInputButtonProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    tooltipText,\n    tooltipBehavioralTrackingProps: tooltipTrackingProps,\n    disabled: propDisabled,\n    id,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: BaseInputButtonProps = props;\n\n  const [behavioralTrackingProps, restPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const {\n    hasError = false,\n    disabled,\n    variant,\n    ariaDisabled: contextAriaDisabled,\n  } = useBaseInputContext();\n  const ariaDisabled = ariaDisabledProp || contextAriaDisabled;\n\n  const tooltipGeneratedId = useId();\n  const tooltipId = tooltipText ? id ?? tooltipGeneratedId : undefined;\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const {\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-label': ariaLabelProp,\n    ...remainingAriaProps\n  } = _useAriaLabelingProps(restPropsWithoutTracking);\n\n  const forwardProps = _useSafeForwardProps(restPropsWithoutTracking, {\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-label': ariaLabelProp,\n    ...remainingAriaProps,\n  });\n\n  // When tooltipText is the sole label source, aria-label provides the always-valid name.\n  // aria-labelledby points to the tooltip element only while it is open (mounted in the DOM);\n  // a dangling reference suppresses aria-label in some browsers.\n  const ariaLabel =\n    ariaLabelProp ??\n    (tooltipText && !ariaLabelledByProp ? tooltipText : undefined);\n  const ariaLabelledBy =\n    ariaLabelledByProp ??\n    (!ariaLabelProp && isTooltipOpen ? tooltipId : undefined);\n\n  const button = useMemo(\n    () => (\n      <Button\n        ref={forwardedRef}\n        {...forwardProps}\n        variant={variant === 'minimal' ? 'default' : 'emphasized'}\n        disabled={propDisabled ?? disabled}\n        aria-disabled={ariaDisabled}\n        color={hasError && !disabled ? 'critical' : 'neutral'}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        {...mergeProps(remainingAriaProps, behavioralTrackingProps)}\n      >\n        <Button.Prefix>{children}</Button.Prefix>\n      </Button>\n    ),\n    [\n      ariaLabel,\n      ariaLabelledBy,\n      ariaLabelProp,\n      behavioralTrackingProps,\n      children,\n      consumerClassName,\n      consumerStyle,\n      dataTestId,\n      disabled,\n      forwardProps,\n      forwardedRef,\n      hasError,\n      propDisabled,\n      remainingAriaProps,\n      variant,\n      ariaDisabled,\n    ],\n  );\n\n  return tooltipText ? (\n    <Tooltip\n      id={tooltipId}\n      text={tooltipText}\n      placement=\"top-end\"\n      {...tooltipTrackingProps}\n      onOpenChange={setIsTooltipOpen}\n    >\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n});\n\n(\n  BaseInputButton as typeof BaseInputButton & { displayName: string }\n).displayName = 'BaseInput.Button';\n"],
-  "mappings": "AA8IQ;AA9IR;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,uBAAuB,4BAA4B;AAS5D,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAiDjB,MAAM,kBAAkC,2BAG7C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,UAAU;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAA0B;AAE1B,QAAM,CAAC,yBAAyB,wBAAwB,IACtD,2BAA2B,cAAc;AAE3C,QAAM;AAAA,IACJ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,IAAI,oBAAoB;AACxB,QAAM,eAAe,oBAAoB;AAEzC,QAAM,qBAAqB,MAAM;AACjC,QAAM,YAAY,cAAc,MAAM,qBAAqB;AAC3D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM;AAAA,IACJ,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI,sBAAsB,wBAAwB;AAElD,QAAM,eAAe,qBAAqB,0BAA0B;AAAA,IAClE,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,GAAG;AAAA,EACL,CAAC;AAKD,QAAM,YACJ,kBACC,eAAe,CAAC,qBAAqB,cAAc;AACtD,QAAM,iBACJ,uBACC,CAAC,iBAAiB,gBAAgB,YAAY;AAEjD,QAAM,SAAS;AAAA,IACb,MACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACJ,GAAG;AAAA,QACJ,SAAS,YAAY,YAAY,YAAY;AAAA,QAC7C,UAAU,gBAAgB;AAAA,QAC1B,iBAAe;AAAA,QACf,OAAO,YAAY,CAAC,WAAW,aAAa;AAAA,QAC5C,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACZ,GAAG,WAAW,oBAAoB,uBAAuB;AAAA,QAE1D,8BAAC,OAAO,QAAP,EAAe,UAAS;AAAA;AAAA,IAC3B;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,WAAU;AAAA,MACT,GAAG;AAAA,MACJ,cAAc;AAAA,MAEb;AAAA;AAAA,EACH,IAEA;AAEJ,CAAC;AAGC,gBACA,cAAc;",
+  "sourcesContent": ["import {\n  type MouseEventHandler,\n  type ReactNode,\n  forwardRef,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useBaseInputContext } from './hooks/useBaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport {\n  AriaDisabledProps,\n  AriaLabelingProps,\n} 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 { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\n\n//#region Typings\n/**\n * Accepted properties for the BaseInput Button\n * @public\n */\nexport interface BaseInputButtonProps\n  extends\n    AriaLabelingProps,\n    AriaDisabledProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /** Elements to be displayed in the BaseInput Button slot, preferably an icon or a similar visual element */\n  children: ReactNode;\n  /**\n   * If a button is disabled e.g. it cannot be interacted with.\n   * By default, it inherits the disabled prop of the BaseInput, but can be overwritten.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If specified, a tooltip is rendered with this text, which describes what the button does.\n   * The text is also used as `aria-label` while the tooltip is closed, ensuring a valid accessible name at all times.\n   * Please also consider translating the text in an internationalized context and use a short text description for the tooltip.\n   * The positioning and placing of the according tooltip will be handled by the component.\n   */\n  tooltipText?: string;\n  /**\n   * Behavioral tracking props to forward exclusively to the tooltip overlay.\n   * These will not be applied to the button itself.\n   */\n  tooltipBehavioralTrackingProps?: BehaviorTrackingProps;\n  /** Called when the button is interacted with. */\n  onClick?: MouseEventHandler;\n  /**\n   * Determines whether the input is in read-only mode.\n   * @deprecated - readOnly is not a valid property on a button. Please use disabled if needed.\n   */\n  readOnly?: boolean;\n}\n\n//#endregion\n\n/**\n * Component which allows users to trigger actions or events when clicking or when pressing `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const BaseInputButton = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  BaseInputButtonProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    tooltipText,\n    tooltipBehavioralTrackingProps: tooltipTrackingProps,\n    disabled: propDisabled,\n    id,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: BaseInputButtonProps = props;\n\n  const [behavioralTrackingProps, restPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const {\n    hasError = false,\n    disabled,\n    variant,\n    ariaDisabled: contextAriaDisabled,\n  } = useBaseInputContext();\n  const ariaDisabled = ariaDisabledProp || contextAriaDisabled;\n\n  const tooltipGeneratedId = useId();\n  const tooltipId = tooltipText ? (id ?? tooltipGeneratedId) : undefined;\n  const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n  const {\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-label': ariaLabelProp,\n    ...remainingAriaProps\n  } = _useAriaLabelingProps(restPropsWithoutTracking);\n\n  const forwardProps = _useSafeForwardProps(restPropsWithoutTracking, {\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-label': ariaLabelProp,\n    ...remainingAriaProps,\n  });\n\n  // When tooltipText is the sole label source, aria-label provides the always-valid name.\n  // aria-labelledby points to the tooltip element only while it is open (mounted in the DOM);\n  // a dangling reference suppresses aria-label in some browsers.\n  const ariaLabel =\n    ariaLabelProp ??\n    (tooltipText && !ariaLabelledByProp ? tooltipText : undefined);\n  const ariaLabelledBy =\n    ariaLabelledByProp ??\n    (!ariaLabelProp && isTooltipOpen ? tooltipId : undefined);\n\n  const button = useMemo(\n    () => (\n      <Button\n        ref={forwardedRef}\n        {...forwardProps}\n        variant={variant === 'minimal' ? 'default' : 'emphasized'}\n        disabled={propDisabled ?? disabled}\n        aria-disabled={ariaDisabled}\n        color={hasError && !disabled ? 'critical' : 'neutral'}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        {...mergeProps(remainingAriaProps, behavioralTrackingProps)}\n      >\n        <Button.Prefix>{children}</Button.Prefix>\n      </Button>\n    ),\n    [\n      ariaLabel,\n      ariaLabelledBy,\n      ariaLabelProp,\n      behavioralTrackingProps,\n      children,\n      consumerClassName,\n      consumerStyle,\n      dataTestId,\n      disabled,\n      forwardProps,\n      forwardedRef,\n      hasError,\n      propDisabled,\n      remainingAriaProps,\n      variant,\n      ariaDisabled,\n    ],\n  );\n\n  return tooltipText ? (\n    <Tooltip\n      id={tooltipId}\n      text={tooltipText}\n      placement=\"top-end\"\n      {...tooltipTrackingProps}\n      onOpenChange={setIsTooltipOpen}\n    >\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  );\n});\n\n(\n  BaseInputButton as typeof BaseInputButton & { displayName: string }\n).displayName = 'BaseInput.Button';\n"],
+  "mappings": "AA+IQ;AA/IR;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,uBAAuB,4BAA4B;AAS5D,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAkDjB,MAAM,kBAAkC,2BAG7C,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gCAAgC;AAAA,IAChC,UAAU;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAA0B;AAE1B,QAAM,CAAC,yBAAyB,wBAAwB,IACtD,2BAA2B,cAAc;AAE3C,QAAM;AAAA,IACJ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,IAAI,oBAAoB;AACxB,QAAM,eAAe,oBAAoB;AAEzC,QAAM,qBAAqB,MAAM;AACjC,QAAM,YAAY,cAAe,MAAM,qBAAsB;AAC7D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM;AAAA,IACJ,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI,sBAAsB,wBAAwB;AAElD,QAAM,eAAe,qBAAqB,0BAA0B;AAAA,IAClE,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,GAAG;AAAA,EACL,CAAC;AAKD,QAAM,YACJ,kBACC,eAAe,CAAC,qBAAqB,cAAc;AACtD,QAAM,iBACJ,uBACC,CAAC,iBAAiB,gBAAgB,YAAY;AAEjD,QAAM,SAAS;AAAA,IACb,MACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACJ,GAAG;AAAA,QACJ,SAAS,YAAY,YAAY,YAAY;AAAA,QAC7C,UAAU,gBAAgB;AAAA,QAC1B,iBAAe;AAAA,QACf,OAAO,YAAY,CAAC,WAAW,aAAa;AAAA,QAC5C,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAa;AAAA,QACZ,GAAG,WAAW,oBAAoB,uBAAuB;AAAA,QAE1D,8BAAC,OAAO,QAAP,EAAe,UAAS;AAAA;AAAA,IAC3B;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,cACL;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,WAAU;AAAA,MACT,GAAG;AAAA,MACJ,cAAc;AAAA,MAEb;AAAA;AAAA,EACH,IAEA;AAEJ,CAAC;AAGC,gBACA,cAAc;",
   "names": []
 }

package/esm/forms/_base-input/BaseInputContent.css

@@ -1,27 +1,27 @@
-._o6rxr70-3-13-2 {
+._o6rxr70-3-14-0 {
   white-space: nowrap;
   overflow: hidden;
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1a8lqy91-3-13-2 ._o6rxr70-3-13-2 {
+._1a8lqy91-3-14-0 ._o6rxr70-3-14-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1a8lqy92-3-13-2 ._o6rxr70-3-13-2 {
+._1a8lqy92-3-14-0 ._o6rxr70-3-14-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._o6rxr70-3-13-2:has(svg):not(:has(span)) {
+._o6rxr70-3-14-0:has(svg):not(:has(span)) {
   overflow: inherit;
 }
-._o6rxr70-3-13-2 > * {
+._o6rxr70-3-14-0 > * {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
 }
-._o6rxr70-3-13-2 svg {
+._o6rxr70-3-14-0 svg {
   box-sizing: content-box;
   align-items: stretch;
   flex-shrink: 0;
 }
-._o6rxr70-3-13-2 svg:first-of-type {
+._o6rxr70-3-14-0 svg:first-of-type {
   align-self: center;
 }

package/esm/forms/_base-input/BaseInputContent.sty.js

@@ -4,7 +4,7 @@ import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
 import "./BaseInputContent.css";
-var content = "_o6rxr70-3-13-2 _da9a8v0-3-13-2 _da9a8v2-3-13-2 _da9a8v3-3-13-2 _da9a8vb-3-13-2";
+var content = "_o6rxr70-3-14-0 _da9a8v0-3-14-0 _da9a8v2-3-14-0 _da9a8v3-3-14-0 _da9a8vb-3-14-0";
 export {
   content
 };

package/esm/forms/_base-input/BaseInputContent.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInputContent.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-13-2 _da9a8v0-3-13-2 _da9a8v2-3-13-2 _da9a8v3-3-13-2 _da9a8vb-3-13-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-14-0 _da9a8v0-3-14-0 _da9a8v2-3-14-0 _da9a8v3-3-14-0 _da9a8vb-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/calendar/Calendar.css

@@ -1,24 +1,24 @@
-._xm8mdk0-3-13-2 {
+._xm8mdk0-3-14-0 {
   width: 248px;
 }
-._xm8mdk1-3-13-2 {
+._xm8mdk1-3-14-0 {
   cursor: not-allowed;
 }
-._xm8mdk2-3-13-2 {
+._xm8mdk2-3-14-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._xm8mdk3-3-13-2 {
+._xm8mdk3-3-14-0 {
   all: revert;
   width: 100%;
   border-collapse: collapse;
   border: 0;
   border-spacing: 0;
 }
-._xm8mdk4-3-13-2 {
+._xm8mdk4-3-14-0 {
   pointer-events: none;
 }
-._xm8mdk5-3-13-2 {
+._xm8mdk5-3-14-0 {
   background: revert;
   border: 0;
   display: grid;
@@ -26,16 +26,16 @@
   justify-items: center;
   align-items: center;
 }
-._xm8mdk6-3-13-2 {
+._xm8mdk6-3-14-0 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
-._xm8mdk7-3-13-2 {
+._xm8mdk7-3-14-0 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-._xm8mdk8-3-13-2 {
+._xm8mdk8-3-14-0 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-._xm8mdk9-3-13-2 {
+._xm8mdk9-3-14-0 {
   border: 0;
   width: 100%;
   margin-top: var(--dt-spacings-size-2, 2px);
@@ -43,91 +43,91 @@
   padding: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdka-3-13-2 {
-  --_1jljrbf0-3-13-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1jljrbf1-3-13-2: var(--dt-colors-border-primary-accent, #464cce);
+._xm8mdka-3-14-0 {
+  --_1jljrbf0-3-14-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1jljrbf1-3-14-0: var(--dt-colors-border-primary-accent, #464cce);
 }
-._xm8mdkb-3-13-2 {
-  --_1jljrbf0-3-13-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1jljrbf1-3-13-2: var(--dt-colors-text-neutral-default, #2f2f4f);
+._xm8mdkb-3-14-0 {
+  --_1jljrbf0-3-14-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1jljrbf1-3-14-0: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._xm8mdkc-3-13-2 {
-  --_1jljrbf0-3-13-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1jljrbf1-3-13-2: var(--dt-colors-border-critical-accent, #bb0731);
+._xm8mdkc-3-14-0 {
+  --_1jljrbf0-3-14-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1jljrbf1-3-14-0: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._xm8mdkd-3-13-2 {
-  --_1jljrbf0-3-13-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._xm8mdkd-3-14-0 {
+  --_1jljrbf0-3-14-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._xm8mdkf-3-13-2 {
-  --_1jljrbf0-3-13-2: var(--dt-colors-background-field-primary-disabled, #e4e5eb80);
-  --_1jljrbf1-3-13-2: var(--dt-colors-border-primary-disabled, #dadbe480);
+._xm8mdkf-3-14-0 {
+  --_1jljrbf0-3-14-0: var(--dt-colors-background-field-primary-disabled, #e4e5eb80);
+  --_1jljrbf1-3-14-0: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._xm8mdkg-3-13-2 {
-  --_1jljrbf0-3-13-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1jljrbf1-3-13-2: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._xm8mdkg-3-14-0 {
+  --_1jljrbf0-3-14-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1jljrbf1-3-14-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._xm8mdkh-3-13-2 {
-  --_1jljrbf0-3-13-2: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1jljrbf1-3-13-2: var(--dt-colors-border-critical-disabled, #dadbe480);
+._xm8mdkh-3-14-0 {
+  --_1jljrbf0-3-14-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_1jljrbf1-3-14-0: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._xm8mdki-3-13-2 {
+._xm8mdki-3-14-0 {
   position: relative;
   z-index: 0;
 }
-._xm8mdki-3-13-2::before {
+._xm8mdki-3-14-0::before {
   content: "";
   position: absolute;
   top: 0;
-  background: var(--_1jljrbf0-3-13-2);
+  background: var(--_1jljrbf0-3-14-0);
   height: 100%;
   z-index: -1;
 }
-._xm8mdkj-3-13-2 {
-  background: var(--_1jljrbf0-3-13-2);
+._xm8mdkj-3-14-0 {
+  background: var(--_1jljrbf0-3-14-0);
 }
-._xm8mdkj-3-13-2::before {
+._xm8mdkj-3-14-0::before {
   right: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(var(--dt-spacings-size-4, 4px) / 2);
 }
-._xm8mdkj-3-13-2:last-child::before {
+._xm8mdkj-3-14-0:last-child::before {
   background: none;
 }
-._xm8mdkk-3-13-2 {
-  background: var(--_1jljrbf0-3-13-2);
+._xm8mdkk-3-14-0 {
+  background: var(--_1jljrbf0-3-14-0);
 }
-._xm8mdkk-3-13-2::before {
+._xm8mdkk-3-14-0::before {
   left: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(var(--dt-spacings-size-4, 4px) / 2);
 }
-._xm8mdkk-3-13-2:first-child::before {
+._xm8mdkk-3-14-0:first-child::before {
   background: none;
 }
-._xm8mdkl-3-13-2::before {
+._xm8mdkl-3-14-0::before {
   left: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(100% + (var(--dt-spacings-size-4, 4px)));
-  background: var(--_1jljrbf0-3-13-2);
+  background: var(--_1jljrbf0-3-14-0);
 }
-._xm8mdkl-3-13-2:first-child::before {
+._xm8mdkl-3-14-0:first-child::before {
   left: 0;
   width: calc(100% + (var(--dt-spacings-size-4, 4px) / 2));
   border-top-left-radius: var(--dt-borders-radius-field-default, 6px);
   border-bottom-left-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdkl-3-13-2:last-child::before {
+._xm8mdkl-3-14-0:last-child::before {
   width: calc(100% + (var(--dt-spacings-size-4, 4px) / 2));
   border-top-right-radius: var(--dt-borders-radius-field-default, 6px);
   border-bottom-right-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdkm-3-13-2 {
+._xm8mdkm-3-14-0 {
   background: none;
 }
-._xm8mdkn-3-13-2 {
+._xm8mdkn-3-14-0 {
   width: 100%;
   border-collapse: collapse;
   border: 0;
   border-spacing: 0;
 }
-._xm8mdko-3-13-2 {
+._xm8mdko-3-14-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   display: flex;
   justify-content: flex-end;

package/esm/forms/calendar/Calendar.js

@@ -7,6 +7,7 @@ import {
   useRef,
   useState
 } from "react";
+import { useIntl } from "react-intl";
 import { CALENDAR_ERROR_MESSAGES } from "./calendarMessages.js";
 import { CalendarRoot } from "./CalendarRoot.js";
 import {
@@ -24,12 +25,14 @@ import { validate } from "../../core/time/validation.js";
 import { useFormControl } from "../forms-core/hooks/useFormControl.js";
 import { useMinMaxLogger } from "../forms-core/hooks/useMinMaxLogger.js";
 function useSyncPropsAndState(store, memoedValue, isControlled, type, precision, min, max, formFieldMessageDispatch, calendarRef) {
+  const intl = useIntl();
   const valueMode = type === "single" ? "single" : "timeframeSelector";
   useEffect(
     () => {
       isControlled && store.setState((state) => {
         const error = validate(memoedValue, state.min, state.max, {
           formMessageDispatch: formFieldMessageDispatch,
+          intl,
           formerError: state.calendarError,
           precision: state.precision,
           showError: false,
@@ -115,6 +118,7 @@ function RefAwareCalendar(props, forwardedRef) {
     type = "single",
     ...remainingProps
   } = props;
+  const intl = useIntl();
   const [isControlled] = useState(propValue !== void 0);
   const onChangeProp = useCallbackRef(onChange);
   const { min, max } = useMinMax(propMin, propMax);
@@ -148,6 +152,7 @@ function RefAwareCalendar(props, forwardedRef) {
     const value = isControlled ? memoedValue : memoedDefaultValue;
     const error = validate(value, min, max, {
       formMessageDispatch: formFieldMessageDispatch,
+      intl,
       precision,
       showError: false,
       checkOrder: true,
@@ -178,7 +183,8 @@ function RefAwareCalendar(props, forwardedRef) {
       isControlled,
       type,
       formFieldMessageDispatch,
-      onChangeProp
+      onChangeProp,
+      intl
     );
     return createTimeframeStore(initialState, actions);
   });
@@ -201,6 +207,7 @@ function RefAwareCalendar(props, forwardedRef) {
       (state, min2, max2) => ({
         calendarError: validate(state.calendarValue, min2, max2, {
           formMessageDispatch: formFieldMessageDispatch,
+          intl,
           precision,
           showError: false,
           checkOrder: true,
@@ -210,7 +217,7 @@ function RefAwareCalendar(props, forwardedRef) {
           errorMessages: CALENDAR_ERROR_MESSAGES
         })
       }),
-      [formFieldMessageDispatch]
+      [formFieldMessageDispatch, intl]
     )
   );
   const mergedRef = useMergeRefs([calendarRef, forwardedRef]);

package/esm/forms/calendar/Calendar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/Calendar.tsx"],
-  "sourcesContent": ["import {\n  type Dispatch,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Ref,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport type { CalendarProps } from './Calendar.types.js';\nimport { CALENDAR_ERROR_MESSAGES } from './calendarMessages.js';\nimport { CalendarRoot } from './CalendarRoot.js';\nimport type { CalendarType } from './types/calendarConfiguration.js';\nimport {\n  convertToCalendarStructure,\n  getTimeOffsetFromInitialValue,\n} from './utils/helpers.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isFullTimeframe } from '../../core/time/helpers.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getCalendarActions } from '../../core/time/timeframeStore/actions/calendar.js';\nimport type {\n  CalendarTimeframeState,\n  CalendarTimeframeStoreActions,\n} from '../../core/time/timeframeStore/calendar.types.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport { CalendarStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type TimeValue } from '../../core/types/time.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport type { FormFieldMessagesReducerAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype CalendarStore = StoreApi<\n  CalendarTimeframeState & CalendarTimeframeStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: CalendarStore,\n  memoedValue: CalendarTimeframeState['calendarValue'],\n  isControlled: boolean,\n  type: CalendarType,\n  precision: Exclude<Precision, 'day'>,\n  min: TimeValue | null,\n  max: TimeValue | null,\n  formFieldMessageDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  calendarRef: CalendarTimeframeState['calendarRef'],\n) {\n  const valueMode = type === 'single' ? 'single' : 'timeframeSelector';\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          const error = validate(memoedValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessageDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: calendarRef,\n            valueMode,\n            errorMessages: CALENDAR_ERROR_MESSAGES,\n          });\n\n          const timeOffset = getTimeOffsetFromInitialValue(\n            memoedValue,\n            type,\n            min,\n            max,\n            precision,\n          );\n\n          const valueWithPrecision = convertToCalendarStructure(\n            type,\n            memoedValue,\n            min,\n            max,\n            precision,\n          );\n\n          if (type === 'single') {\n            return {\n              calendarValue: valueWithPrecision,\n              calendarError: error,\n              timeOffset,\n            };\n          }\n\n          const value = isFullTimeframe(valueWithPrecision)\n            ? valueWithPrecision\n            : null;\n\n          return {\n            calendarValue: value,\n            calendarError: error,\n            timeOffset,\n          };\n        });\n    },\n    // calendarRef is a stable ref \u2014 no need to include it in deps\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessageDispatch,\n      isControlled,\n      memoedValue,\n      store,\n      min,\n      max,\n      precision,\n      type,\n    ],\n  );\n\n  // Sync precision, type, min, and max into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = convertToCalendarStructure(\n        type,\n        state.calendarValue,\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        calendarValue: value,\n      };\n    });\n  }, [precision, store, min, max, type]);\n}\n\nfunction RefAwareCalendar<Type extends CalendarType = 'single'>(\n  props: CalendarProps<Type>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    value: propValue,\n    defaultValue: propDefaultValue,\n    onChange,\n    min: propMin,\n    max: propMax,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    id: propId,\n    'aria-disabled': propAriaDisabled,\n    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n    controlState,\n    precision = 'minutes',\n    type = 'single',\n    ...remainingProps\n  } = props;\n\n  const [isControlled] = useState(propValue !== undefined);\n  const onChangeProp = useCallbackRef(onChange);\n\n  // Keep min and max updated at midnight\n  const { min, max } = useMinMax(propMin, propMax);\n  useMinMaxLogger(min, max, 'Calendar');\n\n  const memoedValue = useMemo(() => {\n    return convertToCalendarStructure(type, propValue, min, max, precision);\n  }, [precision, propValue, min, max, type]);\n  const memoedDefaultValue = useMemo(\n    () =>\n      convertToCalendarStructure(type, propDefaultValue, min, max, precision),\n    /** We're ignoring updates to defaultValue as it only considers the initial state. */\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n  const calendarRef = useRef<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >(null);\n\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly,\n    messageDispatch: formFieldMessageDispatch,\n  } = useFormControl({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled,\n    propReadOnly,\n    controlState,\n  });\n\n  const [store] = useState(() => {\n    const value = isControlled ? memoedValue : memoedDefaultValue;\n\n    const error = validate(value, min, max, {\n      formMessageDispatch: formFieldMessageDispatch,\n      precision,\n      showError: false,\n      checkOrder: true,\n      ref: calendarRef,\n      valueMode: type === 'single' ? 'single' : 'timeframeSelector',\n      required: required,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n    const timeOffset = getTimeOffsetFromInitialValue(\n      value,\n      type,\n      min,\n      max,\n      precision,\n    );\n\n    const initialState = {\n      calendarValue: value,\n      min,\n      max,\n      precision,\n      isFullDay: false,\n      calendarRef,\n      required,\n      calendarError: error,\n      timeOffset,\n    };\n\n    const actions = getCalendarActions<Type>(\n      isControlled,\n      type,\n      formFieldMessageDispatch,\n      onChangeProp,\n    );\n    return createTimeframeStore<\n      CalendarTimeframeState,\n      CalendarTimeframeStoreActions\n    >(initialState, actions);\n  });\n\n  useSyncPropsAndState(\n    store,\n    memoedValue,\n    isControlled,\n    type,\n    precision,\n    min,\n    max,\n    formFieldMessageDispatch,\n    calendarRef,\n  );\n\n  // Keep min and max updated at midnight\n  useMinMaxStoreSync(\n    store,\n    min,\n    max,\n    useCallback(\n      (\n        state: CalendarTimeframeState,\n        min: TimeValue | null,\n        max: TimeValue | null,\n      ) => ({\n        calendarError: validate(state.calendarValue, min, max, {\n          formMessageDispatch: formFieldMessageDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: calendarRef,\n          valueMode: type === 'single' ? 'single' : 'timeframeSelector',\n          required: required,\n          errorMessages: CALENDAR_ERROR_MESSAGES,\n        }),\n      }),\n      [formFieldMessageDispatch],\n    ),\n  );\n\n  const mergedRef = useMergeRefs([calendarRef, forwardedRef]);\n\n  return (\n    <CalendarStoreProvider store={store}>\n      <CalendarRoot\n        {...remainingProps}\n        id={id}\n        ref={mergedRef}\n        aria-disabled={ariaDisabled}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        type={type}\n      />\n    </CalendarStoreProvider>\n  );\n}\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nexport const Calendar = forwardRef(RefAwareCalendar);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Dispatch,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Ref,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport type { StoreApi } from 'zustand';\n\nimport type { CalendarProps } from './Calendar.types.js';\nimport { CALENDAR_ERROR_MESSAGES } from './calendarMessages.js';\nimport { CalendarRoot } from './CalendarRoot.js';\nimport type { CalendarType } from './types/calendarConfiguration.js';\nimport {\n  convertToCalendarStructure,\n  getTimeOffsetFromInitialValue,\n} from './utils/helpers.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isFullTimeframe } from '../../core/time/helpers.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getCalendarActions } from '../../core/time/timeframeStore/actions/calendar.js';\nimport type {\n  CalendarTimeframeState,\n  CalendarTimeframeStoreActions,\n} from '../../core/time/timeframeStore/calendar.types.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport { CalendarStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type TimeValue } from '../../core/types/time.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport type { FormFieldMessagesReducerAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype CalendarStore = StoreApi<\n  CalendarTimeframeState & CalendarTimeframeStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: CalendarStore,\n  memoedValue: CalendarTimeframeState['calendarValue'],\n  isControlled: boolean,\n  type: CalendarType,\n  precision: Exclude<Precision, 'day'>,\n  min: TimeValue | null,\n  max: TimeValue | null,\n  formFieldMessageDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  calendarRef: CalendarTimeframeState['calendarRef'],\n) {\n  const intl = useIntl();\n  const valueMode = type === 'single' ? 'single' : 'timeframeSelector';\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          const error = validate(memoedValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessageDispatch,\n            intl,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: calendarRef,\n            valueMode,\n            errorMessages: CALENDAR_ERROR_MESSAGES,\n          });\n\n          const timeOffset = getTimeOffsetFromInitialValue(\n            memoedValue,\n            type,\n            min,\n            max,\n            precision,\n          );\n\n          const valueWithPrecision = convertToCalendarStructure(\n            type,\n            memoedValue,\n            min,\n            max,\n            precision,\n          );\n\n          if (type === 'single') {\n            return {\n              calendarValue: valueWithPrecision,\n              calendarError: error,\n              timeOffset,\n            };\n          }\n\n          const value = isFullTimeframe(valueWithPrecision)\n            ? valueWithPrecision\n            : null;\n\n          return {\n            calendarValue: value,\n            calendarError: error,\n            timeOffset,\n          };\n        });\n    },\n    // calendarRef is a stable ref \u2014 no need to include it in deps\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessageDispatch,\n      isControlled,\n      memoedValue,\n      store,\n      min,\n      max,\n      precision,\n      type,\n    ],\n  );\n\n  // Sync precision, type, min, and max into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = convertToCalendarStructure(\n        type,\n        state.calendarValue,\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        calendarValue: value,\n      };\n    });\n  }, [precision, store, min, max, type]);\n}\n\nfunction RefAwareCalendar<Type extends CalendarType = 'single'>(\n  props: CalendarProps<Type>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    value: propValue,\n    defaultValue: propDefaultValue,\n    onChange,\n    min: propMin,\n    max: propMax,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    id: propId,\n    'aria-disabled': propAriaDisabled,\n    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n    controlState,\n    precision = 'minutes',\n    type = 'single',\n    ...remainingProps\n  } = props;\n\n  const intl = useIntl();\n  const [isControlled] = useState(propValue !== undefined);\n  const onChangeProp = useCallbackRef(onChange);\n\n  // Keep min and max updated at midnight\n  const { min, max } = useMinMax(propMin, propMax);\n  useMinMaxLogger(min, max, 'Calendar');\n\n  const memoedValue = useMemo(() => {\n    return convertToCalendarStructure(type, propValue, min, max, precision);\n  }, [precision, propValue, min, max, type]);\n  const memoedDefaultValue = useMemo(\n    () =>\n      convertToCalendarStructure(type, propDefaultValue, min, max, precision),\n    /** We're ignoring updates to defaultValue as it only considers the initial state. */\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n  const calendarRef = useRef<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >(null);\n\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly,\n    messageDispatch: formFieldMessageDispatch,\n  } = useFormControl({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled,\n    propReadOnly,\n    controlState,\n  });\n\n  const [store] = useState(() => {\n    const value = isControlled ? memoedValue : memoedDefaultValue;\n\n    const error = validate(value, min, max, {\n      formMessageDispatch: formFieldMessageDispatch,\n      intl,\n      precision,\n      showError: false,\n      checkOrder: true,\n      ref: calendarRef,\n      valueMode: type === 'single' ? 'single' : 'timeframeSelector',\n      required: required,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n    const timeOffset = getTimeOffsetFromInitialValue(\n      value,\n      type,\n      min,\n      max,\n      precision,\n    );\n\n    const initialState = {\n      calendarValue: value,\n      min,\n      max,\n      precision,\n      isFullDay: false,\n      calendarRef,\n      required,\n      calendarError: error,\n      timeOffset,\n    };\n\n    const actions = getCalendarActions<Type>(\n      isControlled,\n      type,\n      formFieldMessageDispatch,\n      onChangeProp,\n      intl,\n    );\n    return createTimeframeStore<\n      CalendarTimeframeState,\n      CalendarTimeframeStoreActions\n    >(initialState, actions);\n  });\n\n  useSyncPropsAndState(\n    store,\n    memoedValue,\n    isControlled,\n    type,\n    precision,\n    min,\n    max,\n    formFieldMessageDispatch,\n    calendarRef,\n  );\n\n  // Keep min and max updated at midnight\n  useMinMaxStoreSync(\n    store,\n    min,\n    max,\n    useCallback(\n      (\n        state: CalendarTimeframeState,\n        min: TimeValue | null,\n        max: TimeValue | null,\n      ) => ({\n        calendarError: validate(state.calendarValue, min, max, {\n          formMessageDispatch: formFieldMessageDispatch,\n          intl,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: calendarRef,\n          valueMode: type === 'single' ? 'single' : 'timeframeSelector',\n          required: required,\n          errorMessages: CALENDAR_ERROR_MESSAGES,\n        }),\n      }),\n      [formFieldMessageDispatch, intl],\n    ),\n  );\n\n  const mergedRef = useMergeRefs([calendarRef, forwardedRef]);\n\n  return (\n    <CalendarStoreProvider store={store}>\n      <CalendarRoot\n        {...remainingProps}\n        id={id}\n        ref={mergedRef}\n        aria-disabled={ariaDisabled}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        type={type}\n      />\n    </CalendarStoreProvider>\n  );\n}\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nexport const Calendar = forwardRef(RefAwareCalendar);\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }

package/esm/forms/calendar/Calendar.sty.js

@@ -1,17 +1,17 @@
 import "./Calendar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var body = _7a468({ defaultClassName: "_xm8mdk3-3-13-2", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var calendar = _7a468({ defaultClassName: "_xm8mdk0-3-13-2", variantClassNames: { readOnly: { true: "_xm8mdk1-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var clearBackground = "_xm8mdkm-3-13-2";
-var dayRow = "_xm8mdk6-3-13-2";
-var disabled = "_xm8mdk2-3-13-2";
-var field = _7a468({ defaultClassName: "_xm8mdk9-3-13-2", variantClassNames: { color: { primary: "_xm8mdka-3-13-2", neutral: "_xm8mdkb-3-13-2", critical: "_xm8mdkc-3-13-2" }, isIncompleteSelection: { true: "_xm8mdkd-3-13-2" }, isDisabled: { true: "_xm8mdke-3-13-2" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-13-2"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-13-2"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-13-2"]] });
-var footer = "_xm8mdko-3-13-2";
-var monthRow = "_xm8mdk7-3-13-2";
-var rangeField = _7a468({ defaultClassName: "_xm8mdki-3-13-2", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-13-2", last: "_xm8mdkk-3-13-2", inbetween: "_xm8mdkl-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var row = "_xm8mdk5-3-13-2";
-var weekdays = "_xm8mdkn-3-13-2";
-var yearRow = "_xm8mdk8-3-13-2";
+var body = _7a468({ defaultClassName: "_xm8mdk3-3-14-0", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var calendar = _7a468({ defaultClassName: "_xm8mdk0-3-14-0", variantClassNames: { readOnly: { true: "_xm8mdk1-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var clearBackground = "_xm8mdkm-3-14-0";
+var dayRow = "_xm8mdk6-3-14-0";
+var disabled = "_xm8mdk2-3-14-0";
+var field = _7a468({ defaultClassName: "_xm8mdk9-3-14-0", variantClassNames: { color: { primary: "_xm8mdka-3-14-0", neutral: "_xm8mdkb-3-14-0", critical: "_xm8mdkc-3-14-0" }, isIncompleteSelection: { true: "_xm8mdkd-3-14-0" }, isDisabled: { true: "_xm8mdke-3-14-0" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-14-0"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-14-0"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-14-0"]] });
+var footer = "_xm8mdko-3-14-0";
+var monthRow = "_xm8mdk7-3-14-0";
+var rangeField = _7a468({ defaultClassName: "_xm8mdki-3-14-0", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-14-0", last: "_xm8mdkk-3-14-0", inbetween: "_xm8mdkl-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var row = "_xm8mdk5-3-14-0";
+var weekdays = "_xm8mdkn-3-14-0";
+var yearRow = "_xm8mdk8-3-14-0";
 export {
   body,
   calendar,

package/esm/forms/calendar/Calendar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/Calendar.css.ts"],
-  "sourcesContent": ["import './Calendar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var body = _7a468({defaultClassName:'_xm8mdk3-3-13-2',variantClassNames:{isReadOnly:{true:'_xm8mdk4-3-13-2'}},defaultVariants:{},compoundVariants:[]});\nexport var calendar = _7a468({defaultClassName:'_xm8mdk0-3-13-2',variantClassNames:{readOnly:{true:'_xm8mdk1-3-13-2'}},defaultVariants:{},compoundVariants:[]});\nexport var clearBackground = '_xm8mdkm-3-13-2';\nexport var dayRow = '_xm8mdk6-3-13-2';\nexport var disabled = '_xm8mdk2-3-13-2';\nexport var field = _7a468({defaultClassName:'_xm8mdk9-3-13-2',variantClassNames:{color:{primary:'_xm8mdka-3-13-2',neutral:'_xm8mdkb-3-13-2',critical:'_xm8mdkc-3-13-2'},isIncompleteSelection:{true:'_xm8mdkd-3-13-2'},isDisabled:{true:'_xm8mdke-3-13-2'}},defaultVariants:{isDisabled:false,color:'neutral'},compoundVariants:[[{color:'primary',isDisabled:true},'_xm8mdkf-3-13-2'],[{color:'neutral',isDisabled:true},'_xm8mdkg-3-13-2'],[{color:'critical',isDisabled:true},'_xm8mdkh-3-13-2']]});\nexport var footer = '_xm8mdko-3-13-2';\nexport var monthRow = '_xm8mdk7-3-13-2';\nexport var rangeField = _7a468({defaultClassName:'_xm8mdki-3-13-2',variantClassNames:{rangeKind:{first:'_xm8mdkj-3-13-2',last:'_xm8mdkk-3-13-2',inbetween:'_xm8mdkl-3-13-2'}},defaultVariants:{},compoundVariants:[]});\nexport var row = '_xm8mdk5-3-13-2';\nexport var weekdays = '_xm8mdkn-3-13-2';\nexport var yearRow = '_xm8mdk8-3-13-2';"],
+  "sourcesContent": ["import './Calendar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var body = _7a468({defaultClassName:'_xm8mdk3-3-14-0',variantClassNames:{isReadOnly:{true:'_xm8mdk4-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var calendar = _7a468({defaultClassName:'_xm8mdk0-3-14-0',variantClassNames:{readOnly:{true:'_xm8mdk1-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var clearBackground = '_xm8mdkm-3-14-0';\nexport var dayRow = '_xm8mdk6-3-14-0';\nexport var disabled = '_xm8mdk2-3-14-0';\nexport var field = _7a468({defaultClassName:'_xm8mdk9-3-14-0',variantClassNames:{color:{primary:'_xm8mdka-3-14-0',neutral:'_xm8mdkb-3-14-0',critical:'_xm8mdkc-3-14-0'},isIncompleteSelection:{true:'_xm8mdkd-3-14-0'},isDisabled:{true:'_xm8mdke-3-14-0'}},defaultVariants:{isDisabled:false,color:'neutral'},compoundVariants:[[{color:'primary',isDisabled:true},'_xm8mdkf-3-14-0'],[{color:'neutral',isDisabled:true},'_xm8mdkg-3-14-0'],[{color:'critical',isDisabled:true},'_xm8mdkh-3-14-0']]});\nexport var footer = '_xm8mdko-3-14-0';\nexport var monthRow = '_xm8mdk7-3-14-0';\nexport var rangeField = _7a468({defaultClassName:'_xm8mdki-3-14-0',variantClassNames:{rangeKind:{first:'_xm8mdkj-3-14-0',last:'_xm8mdkk-3-14-0',inbetween:'_xm8mdkl-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var row = '_xm8mdk5-3-14-0';\nexport var weekdays = '_xm8mdkn-3-14-0';\nexport var yearRow = '_xm8mdk8-3-14-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrJ,IAAI,WAAW,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvJ,IAAI,kBAAkB;AACtB,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,QAAQ,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB,GAAE,uBAAsB,EAAC,MAAK,kBAAiB,GAAE,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,YAAW,OAAM,OAAM,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,YAAW,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AAC9d,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,OAAM,mBAAkB,MAAK,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9M,IAAI,MAAM;AACV,IAAI,WAAW;AACf,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/calendar/CalendarRoot.js

@@ -31,6 +31,7 @@ import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHi
 import { isFullTimeframe, isTimeValue } from "../../core/time/helpers.js";
 import { useCalendarStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
 import { validate } from "../../core/time/validation.js";
+import { getCustomMessageIds } from "../forms-core/state/formfield-messages-selectors.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
 const COMPONENT_NAME = "Calendar";
@@ -94,10 +95,8 @@ function CalendarComponent(props, forwardedRef) {
     dispatch
   });
   const { dispatch: formMessageDispatch, state: formFieldMessagesState } = useFormFieldMessagesContext();
-  const customMessagesRef = useRef(
-    formFieldMessagesState?.customMessages ?? []
-  );
-  customMessagesRef.current = formFieldMessagesState?.customMessages ?? [];
+  const customMessageIdsRef = useRef([]);
+  customMessageIdsRef.current = getCustomMessageIds(formFieldMessagesState);
   const refValidate = useCallback(() => {
     formMessageDispatch?.({
       type: FormFieldMessagesAction.SETISTOUCHED,
@@ -105,6 +104,7 @@ function CalendarComponent(props, forwardedRef) {
     });
     validate(calendarValue, min, max, {
       formMessageDispatch,
+      intl,
       formerError: error,
       precision,
       showError: true,
@@ -112,7 +112,16 @@ function CalendarComponent(props, forwardedRef) {
       ref,
       errorMessages: CALENDAR_ERROR_MESSAGES
     });
-  }, [min, max, formMessageDispatch, error, precision, ref, calendarValue]);
+  }, [
+    min,
+    max,
+    formMessageDispatch,
+    intl,
+    error,
+    precision,
+    ref,
+    calendarValue
+  ]);
   const validateField = useCallback(
     async ({
       reveal,
@@ -125,6 +134,7 @@ function CalendarComponent(props, forwardedRef) {
         });
         validate(calendarValue, min, max, {
           formMessageDispatch,
+          intl,
           formerError: error,
           precision,
           showError: true,
@@ -148,13 +158,13 @@ function CalendarComponent(props, forwardedRef) {
     },
     [
       formMessageDispatch,
+      intl,
       calendarValue,
       min,
       max,
       error,
       precision,
       emitValidationState,
-      intl,
       ref,
       refTo
     ]
@@ -164,10 +174,10 @@ function CalendarComponent(props, forwardedRef) {
       type: FormFieldMessagesAction.SETISTOUCHED,
       payload: { isTouched: false }
     });
-    for (const msg of customMessagesRef.current) {
+    for (const id2 of customMessageIdsRef.current) {
       formMessageDispatch?.({
         type: FormFieldMessagesAction.REMOVEMESSAGE,
-        payload: { id: msg.id, messageType: "custom" }
+        payload: { id: id2 }
       });
     }
   }, [formMessageDispatch]);