npm - @dynatrace/strato-components - Versions diffs - 3.2.0 → 3.3.0 - Mend

@dynatrace/strato-components 3.2.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3377) hide show

package/esm/forms/date-time-range-picker/useSelectionInteractionHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/useSelectionInteractionHandlers.ts"],
-  "sourcesContent": ["import {\n  useCallback,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type RefObject,\n  useRef,\n} from 'react';\n\nimport {\n  extendSelection,\n  extendSelectionToAll,\n  removeContentEditable,\n} from './selection-helpers.js';\n\n/**\n * Hook that provides interaction handlers for selection behavior in date/time pickers.\n * Manages mouse and keyboard interactions including text selection and focus management.\n *\n * @param touchedContainerRef - Reference to the container that should be checked when forwarding focus\n * @param onFocusInput - Callback to focus the appropriate input(s) when needed\n * @returns Object containing onMouseDown and onKeyDown event handlers\n *\n * @internal\n */\nexport function useSelectionInteractionHandlers(\n  touchedContainerRef: RefObject<HTMLElement>,\n  onFocusInput: () => void,\n): {\n  onMouseDown: (event: ReactMouseEvent<HTMLDivElement>) => void;\n  onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;\n} {\n  const onMouseDown = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement>) => {\n      if (event.button !== 0) {\n        return;\n      }\n      window.getSelection()?.removeAllRanges();\n      const root: HTMLElement = event.currentTarget;\n      const triggerElement = event.target;\n      if (root) {\n        removeContentEditable(\n          root,\n          document,\n          'mouseup',\n          (event: Event, hasMultiElementSelection: boolean) => {\n            if (\n              !hasMultiElementSelection &&\n              event.target instanceof HTMLElement &&\n              event.target === triggerElement\n            ) {\n              // If the click landed on a contenteditable element (spin button\n              // or expression input), focus it directly. Otherwise the click\n              // was on the container or a non-interactive child, so forward\n              // focus to the first input.\n              if (event.target.hasAttribute('contenteditable')) {\n                event.target.focus();\n              } else {\n                onFocusInput();\n              }\n            }\n          },\n        );\n      }\n    },\n    [onFocusInput],\n  );\n\n  const hasContentEditableKeyRemoved = useRef(false);\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      // Check if the keyboard event should handle select all\n      const userAgent = navigator.userAgent.toLowerCase();\n      const isMac = userAgent.includes('mac');\n      const hasModifierKey = isMac\n        ? event.metaKey === true\n        : event.ctrlKey === true;\n\n      // If keydown event captures modifier keys by itself or a copy, do nothing\n      if (\n        event.key === 'Shift' ||\n        event.key === 'Control' ||\n        event.key === 'Command'\n      ) {\n        event.preventDefault();\n        return;\n      }\n\n      function removeContentEditableIfNeeded() {\n        if (hasContentEditableKeyRemoved.current === false) {\n          hasContentEditableKeyRemoved.current = true;\n          removeContentEditable(\n            event.currentTarget,\n            event.currentTarget,\n            'keyup',\n            () => (hasContentEditableKeyRemoved.current = false),\n          );\n        }\n      }\n\n      if (hasModifierKey && event.key === 'c') {\n        // While capturing the copy event, there should not be a contentEditable on the elements\n        removeContentEditable(\n          event.currentTarget,\n          event.currentTarget,\n          'keyup',\n        );\n        return;\n      }\n\n      // Handle select all with Ctrl + A\n      if (hasModifierKey && event.key === 'a') {\n        event.preventDefault();\n        if (event.currentTarget instanceof HTMLElement) {\n          removeContentEditableIfNeeded();\n          extendSelectionToAll();\n        }\n        return;\n      }\n\n      // Check if the selection should be expanded with Shift\n      if (\n        event.shiftKey === true &&\n        (event.key === 'ArrowLeft' ||\n          event.key === 'ArrowRight' ||\n          event.key === 'Home' ||\n          event.key === 'End')\n      ) {\n        event.preventDefault();\n        if (event.currentTarget instanceof HTMLElement) {\n          removeContentEditableIfNeeded();\n          extendSelection(event.key);\n        }\n        return;\n      }\n\n      // Forward the focus when a key is pressed in this element.\n      if (event.target === touchedContainerRef.current) {\n        onFocusInput();\n      }\n    },\n    [onFocusInput, touchedContainerRef],\n  );\n\n  return { onMouseDown, onKeyDown };\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYA,SAAS,gCACd,qBACA,cAIA;AACA,QAAM,cAAc;AAAA,IAClB,CAAC,UAA2C;AAC1C,UAAI,MAAM,WAAW,GAAG;AACtB;AAAA,MACF;AACA,aAAO,aAAa,GAAG,gBAAgB;AACvC,YAAM,OAAoB,MAAM;AAChC,YAAM,iBAAiB,MAAM;AAC7B,UAAI,MAAM;AACR;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,CAACA,QAAc,6BAAsC;AACnD,gBACE,CAAC,4BACDA,OAAM,kBAAkB,eACxBA,OAAM,WAAW,gBACjB;AAKA,kBAAIA,OAAM,OAAO,aAAa,iBAAiB,GAAG;AAChD,gBAAAA,OAAM,OAAO,MAAM;AAAA,cACrB,OAAO;AACL,6BAAa;AAAA,cACf;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,+BAA+B,OAAO,KAAK;AAEjD,QAAM,YAAY;AAAA,IAChB,CAAC,UAA8C;AAE7C,YAAM,YAAY,UAAU,UAAU,YAAY;AAClD,YAAM,QAAQ,UAAU,SAAS,KAAK;AACtC,YAAM,iBAAiB,QACnB,MAAM,YAAY,OAClB,MAAM,YAAY;AAGtB,UACE,MAAM,QAAQ,WACd,MAAM,QAAQ,aACd,MAAM,QAAQ,WACd;AACA,cAAM,eAAe;AACrB;AAAA,MACF;AAEA,eAAS,gCAAgC;AACvC,YAAI,6BAA6B,YAAY,OAAO;AAClD,uCAA6B,UAAU;AACvC;AAAA,YACE,MAAM;AAAA,YACN,MAAM;AAAA,YACN;AAAA,YACA,MAAO,6BAA6B,UAAU;AAAA,UAChD;AAAA,QACF;AAAA,MACF;AAEA,UAAI,kBAAkB,MAAM,QAAQ,KAAK;AAEvC;AAAA,UACE,MAAM;AAAA,UACN,MAAM;AAAA,UACN;AAAA,QACF;AACA;AAAA,MACF;AAGA,UAAI,kBAAkB,MAAM,QAAQ,KAAK;AACvC,cAAM,eAAe;AACrB,YAAI,MAAM,yBAAyB,aAAa;AAC9C,wCAA8B;AAC9B,+BAAqB;AAAA,QACvB;AACA;AAAA,MACF;AAGA,UACE,MAAM,aAAa,SAClB,MAAM,QAAQ,eACb,MAAM,QAAQ,gBACd,MAAM,QAAQ,UACd,MAAM,QAAQ,QAChB;AACA,cAAM,eAAe;AACrB,YAAI,MAAM,yBAAyB,aAAa;AAC9C,wCAA8B;AAC9B,0BAAgB,MAAM,GAAG;AAAA,QAC3B;AACA;AAAA,MACF;AAGA,UAAI,MAAM,WAAW,oBAAoB,SAAS;AAChD,qBAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,cAAc,mBAAmB;AAAA,EACpC;AAEA,SAAO,EAAE,aAAa,UAAU;AAClC;",
+  "sourcesContent": ["import {\n  useCallback,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type RefObject,\n} from 'react';\n\nimport {\n  extendSelection,\n  extendSelectionToAll,\n  removeContentEditable,\n} from './selection-helpers.js';\n\n/**\n * Hook that provides interaction handlers for selection behavior in date/time pickers.\n * Manages mouse and keyboard interactions including text selection and focus management.\n *\n * @param touchedContainerRef - Reference to the container that should be checked when forwarding focus\n * @param onFocusInput - Callback to focus the appropriate input(s) when needed\n * @returns Object containing onMouseDown and onKeyDown event handlers\n *\n * @internal\n */\nexport function useSelectionInteractionHandlers(\n  touchedContainerRef: RefObject<HTMLElement>,\n  onFocusInput: () => void,\n): {\n  onMouseDown: (event: ReactMouseEvent<HTMLDivElement>) => void;\n  onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;\n} {\n  const onMouseDown = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement>) => {\n      if (event.button !== 0) {\n        return;\n      }\n      window.getSelection()?.removeAllRanges();\n      const root: HTMLElement = event.currentTarget;\n      const triggerElement = event.target;\n      if (root) {\n        removeContentEditable(\n          root,\n          document,\n          'mouseup',\n          (event: Event, hasMultiElementSelection: boolean) => {\n            if (\n              !hasMultiElementSelection &&\n              event.target instanceof HTMLElement &&\n              event.target === triggerElement\n            ) {\n              // If the click landed on a contenteditable element (spin button\n              // or expression input), focus it directly. Otherwise the click\n              // was on the container or a non-interactive child, so forward\n              // focus to the first input.\n              if (event.target.hasAttribute('contenteditable')) {\n                event.target.focus();\n              } else {\n                onFocusInput();\n              }\n            }\n          },\n        );\n      }\n    },\n    [onFocusInput],\n  );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      // Accept either Meta (Mac Cmd) or Ctrl as the modifier key so that the\n      // handler works consistently across platforms and in automated test\n      // environments (e.g. Playwright's Chromium) where the userAgent may not\n      // reliably indicate the OS.\n      const hasModifierKey = event.metaKey === true || event.ctrlKey === true;\n\n      // If keydown event captures modifier keys by itself or a copy, do nothing\n      if (\n        event.key === 'Shift' ||\n        event.key === 'Control' ||\n        event.key === 'Meta' ||\n        event.key === 'Alt' ||\n        event.key === 'Command'\n      ) {\n        event.preventDefault();\n        return;\n      }\n\n      // Handle select all with Ctrl + A\n      if (hasModifierKey && event.key === 'a') {\n        event.preventDefault();\n        if (event.currentTarget instanceof HTMLElement) {\n          // No need to remove contentEditable here: extendSelectionToAll explicitly focuses the first spin button\n          // and then sets the cross-element range with addRange, keeping the focus on the already focused spin button.\n          extendSelectionToAll();\n        }\n        return;\n      }\n\n      // Check if the selection should be expanded with Shift\n      if (\n        event.shiftKey === true &&\n        (event.key === 'ArrowLeft' ||\n          event.key === 'ArrowRight' ||\n          event.key === 'Home' ||\n          event.key === 'End')\n      ) {\n        event.preventDefault();\n        // extendSelection uses setBaseAndExtent internally, which can cross\n        // contenteditable boundaries without needing to strip the attribute.\n        // No removeContentEditable / focus manipulation is needed here.\n        extendSelection(event.key);\n        return;\n      }\n\n      // When the container itself has focus (post drag-select, no spin button focused),\n      // intercept ArrowUp / ArrowDown and forward them to the anchor spin button.\n      // This avoids the Firefox visual bug caused by focusing a spin button during\n      // drag-restore \u2014 no focus() is called there, so the container holds focus.\n      if (\n        !event.shiftKey &&\n        !hasModifierKey &&\n        (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n        event.target === touchedContainerRef.current\n      ) {\n        const anchorSpinButton = getAnchorSpinButton();\n\n        if (anchorSpinButton !== null) {\n          event.preventDefault();\n          // Focus the spin button. onFocus sees selectionSpansMultipleNodes = true\n          // (the cross-element range is still intact) and skips selectAll().\n          anchorSpinButton.focus();\n          // Dispatch a synthetic keydown to trigger useValueNavigation on the spin button.\n          anchorSpinButton.dispatchEvent(\n            new KeyboardEvent('keydown', {\n              key: event.key,\n              bubbles: true,\n              cancelable: true,\n            }),\n          );\n          return;\n        }\n      }\n\n      // Forward the focus when a key is pressed in this element.\n      // If the container has focus with an active selection (post Cmd+A or drag),\n      // forward to the anchor spin button so the key lands in the right field.\n      // Otherwise fall back to onFocusInput() which focuses the first input.\n      // Skip for modifier+key shortcuts (e.g. Cmd+C): focusing a spin button\n      // collapses Firefox's cross-element selection before the copy event fires.\n      if (event.target === touchedContainerRef.current && !hasModifierKey) {\n        const anchorSpinButton = getAnchorSpinButton();\n\n        if (anchorSpinButton !== null) {\n          anchorSpinButton.focus();\n        } else {\n          onFocusInput();\n        }\n      }\n    },\n    [onFocusInput, touchedContainerRef],\n  );\n\n  return { onMouseDown, onKeyDown };\n}\n\nfunction getAnchorSpinButton(): HTMLElement | null {\n  const anchorNode = window.getSelection()?.anchorNode ?? null;\n  if (anchorNode === null) {\n    return null;\n  }\n\n  return anchorNode.nodeType === Node.TEXT_NODE\n    ? (anchorNode as Text).parentElement?.closest<HTMLElement>(\n        '[contenteditable]',\n      ) ?? null\n    : (anchorNode as HTMLElement | null)?.closest?.('[contenteditable]') ??\n        null;\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,OAIK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYA,SAAS,gCACd,qBACA,cAIA;AACA,QAAM,cAAc;AAAA,IAClB,CAAC,UAA2C;AAC1C,UAAI,MAAM,WAAW,GAAG;AACtB;AAAA,MACF;AACA,aAAO,aAAa,GAAG,gBAAgB;AACvC,YAAM,OAAoB,MAAM;AAChC,YAAM,iBAAiB,MAAM;AAC7B,UAAI,MAAM;AACR;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA,CAACA,QAAc,6BAAsC;AACnD,gBACE,CAAC,4BACDA,OAAM,kBAAkB,eACxBA,OAAM,WAAW,gBACjB;AAKA,kBAAIA,OAAM,OAAO,aAAa,iBAAiB,GAAG;AAChD,gBAAAA,OAAM,OAAO,MAAM;AAAA,cACrB,OAAO;AACL,6BAAa;AAAA,cACf;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAA8C;AAK7C,YAAM,iBAAiB,MAAM,YAAY,QAAQ,MAAM,YAAY;AAGnE,UACE,MAAM,QAAQ,WACd,MAAM,QAAQ,aACd,MAAM,QAAQ,UACd,MAAM,QAAQ,SACd,MAAM,QAAQ,WACd;AACA,cAAM,eAAe;AACrB;AAAA,MACF;AAGA,UAAI,kBAAkB,MAAM,QAAQ,KAAK;AACvC,cAAM,eAAe;AACrB,YAAI,MAAM,yBAAyB,aAAa;AAG9C,+BAAqB;AAAA,QACvB;AACA;AAAA,MACF;AAGA,UACE,MAAM,aAAa,SAClB,MAAM,QAAQ,eACb,MAAM,QAAQ,gBACd,MAAM,QAAQ,UACd,MAAM,QAAQ,QAChB;AACA,cAAM,eAAe;AAIrB,wBAAgB,MAAM,GAAG;AACzB;AAAA,MACF;AAMA,UACE,CAAC,MAAM,YACP,CAAC,mBACA,MAAM,QAAQ,aAAa,MAAM,QAAQ,gBAC1C,MAAM,WAAW,oBAAoB,SACrC;AACA,cAAM,mBAAmB,oBAAoB;AAE7C,YAAI,qBAAqB,MAAM;AAC7B,gBAAM,eAAe;AAGrB,2BAAiB,MAAM;AAEvB,2BAAiB;AAAA,YACf,IAAI,cAAc,WAAW;AAAA,cAC3B,KAAK,MAAM;AAAA,cACX,SAAS;AAAA,cACT,YAAY;AAAA,YACd,CAAC;AAAA,UACH;AACA;AAAA,QACF;AAAA,MACF;AAQA,UAAI,MAAM,WAAW,oBAAoB,WAAW,CAAC,gBAAgB;AACnE,cAAM,mBAAmB,oBAAoB;AAE7C,YAAI,qBAAqB,MAAM;AAC7B,2BAAiB,MAAM;AAAA,QACzB,OAAO;AACL,uBAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,cAAc,mBAAmB;AAAA,EACpC;AAEA,SAAO,EAAE,aAAa,UAAU;AAClC;AAEA,SAAS,sBAA0C;AACjD,QAAM,aAAa,OAAO,aAAa,GAAG,cAAc;AACxD,MAAI,eAAe,MAAM;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,WAAW,aAAa,KAAK,YAC/B,WAAoB,eAAe;AAAA,IAClC;AAAA,EACF,KAAK,OACJ,YAAmC,UAAU,mBAAmB,KAC/D;AACR;",
   "names": ["event"]
 }

package/esm/forms/forms-core/components/field-set/FieldSet.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._1dphm0f0-3-2-0 {
+._1dphm0f0-3-3-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-2-0 {
+._1dphm0f1-3-3-0 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/esm/forms/forms-core/components/field-set/FieldSet.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./FieldSet.css";
-var fieldset = "_1dphm0f0-3-2-0";
-var legend = "_1dphm0f1-3-2-0";
+var fieldset = "_1dphm0f0-3-3-0";
+var legend = "_1dphm0f1-3-3-0";
 export {
   fieldset,
   legend

package/esm/forms/forms-core/components/field-set/FieldSet.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/field-set/FieldSet.css.ts"],
-  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-2-0';\nexport var legend = '_1dphm0f1-3-2-0';"],
+  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-3-0';\nexport var legend = '_1dphm0f1-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,SAAS;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field/FormField.sty.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import "./FormField.css";
-var formField = "_mvcxum0-3-2-0";
+var formField = "_mvcxum0-3-3-0";
 export {
   formField
 };

package/esm/forms/forms-core/components/form-field/FormField.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormField.css.ts"],
-  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-2-0';"],
+  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

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

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

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

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

@@ -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-2-0',variantClassNames:{variant:{hint:'_16z6rg11-3-2-0',error:'_16z6rg12-3-2-0'},disabled:{true:'_16z6rg13-3-2-0'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-2-0';"],
+  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-3-0',variantClassNames:{variant:{hint:'_16z6rg11-3-3-0',error:'_16z6rg12-3-3-0'},disabled:{true:'_16z6rg13-3-3-0'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-3-0';"],
   "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 CHANGED Viewed

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

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

@@ -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-2-0';"],
+  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
-._1gxatyo0-3-2-0 {
+._1gxatyo0-3-3-0 {
   display: inline-block;
 }
-._1gxatyo1-3-2-0 {
+._1gxatyo1-3-3-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-2-0:after {
+._1gxatyo2-3-3-0:after {
   content: "*" / "";
 }

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

@@ -1,6 +1,6 @@
 import "./Label.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var LabelCSS = _7a468({ defaultClassName: "_1gxatyo0-3-2-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-2-0" }, required: { true: "_1gxatyo2-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var LabelCSS = _7a468({ defaultClassName: "_1gxatyo0-3-3-0", variantClassNames: { disabled: { true: "_1gxatyo1-3-3-0" }, required: { true: "_1gxatyo2-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   LabelCSS
 };

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

@@ -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 LabelCSS = _7a468({defaultClassName:'_1gxatyo0-3-2-0',variantClassNames:{disabled:{true:'_1gxatyo1-3-2-0'},required:{true:'_1gxatyo2-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var LabelCSS = _7a468({defaultClassName:'_1gxatyo0-3-3-0',variantClassNames:{disabled:{true:'_1gxatyo1-3-3-0'},required:{true:'_1gxatyo2-3-3-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,WAAW,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/forms-core/hooks/useFormFieldValidation.js CHANGED Viewed

@@ -1,5 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useEffect } from "react";
+import {
+  useCallback,
+  useMemo,
+  useEffect,
+  useRef
+} from "react";
 import { FormattedMessage } from "react-intl";
 import { useFormFieldMessagesContext } from "./useFormFieldMessagesContext.js";
 import { useId } from "../../../core/hooks/useId.js";
@@ -154,9 +159,11 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
     };
   }, [state.customMessages, state.formControlMessages, state.showError]);
   const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);
+  const formControlMessagesRef = useRef(state.formControlMessages);
+  formControlMessagesRef.current = state.formControlMessages;
   const updateErrorMessages = useCallback(() => {
     const errorType = getErrorType(ref.current?.validity);
-    state.formControlMessages.forEach((message) => {
+    formControlMessagesRef.current.forEach((message) => {
       if (message.validityStateKey !== errorType && message.validityStateKey !== "customError") {
         dispatch?.({
           type: FormFieldMessagesAction.REMOVEMESSAGE,
@@ -181,7 +188,7 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
         }
       });
     }
-  }, [controlId, dispatch, errorId, ref, state.formControlMessages]);
+  }, [controlId, dispatch, errorId, ref]);
   const onInvalid = useCallback(
     (event) => {
       updateErrorMessages();

package/esm/forms/forms-core/hooks/useFormFieldValidation.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/hooks/useFormFieldValidation.tsx"],
-  "sourcesContent": ["import {\n  AriaAttributes,\n  type RefObject,\n  type FormEvent as ReactFormEvent,\n  type ChangeEvent,\n  type FocusEvent,\n} from 'react';\nimport { useCallback, useMemo, useEffect } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { useFormFieldMessagesContext } from './useFormFieldMessagesContext.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { FormFieldMessagesAction } from '../state/formfield-messages-state-reducer.js';\n\n/**\n * Getter function to read the error type form the validity state.\n * The validity state values are readonly and can't therefore not be iterated but need to accessed directly instead.\n * https://stackoverflow.com/questions/20891950/html-validation-api-returns-an-empty-object-in-firefox?rq=2\n * @internal\n */\nexport function getErrorType(validityState?: ValidityState) {\n  if (!validityState) {\n    return null;\n  }\n\n  if (validityState.badInput) {\n    return 'badInput';\n  }\n  if (validityState.patternMismatch) {\n    return 'patternMismatch';\n  }\n  if (validityState.rangeOverflow) {\n    return 'rangeOverflow';\n  }\n  if (validityState.rangeUnderflow) {\n    return 'rangeUnderflow';\n  }\n  if (validityState.stepMismatch) {\n    return 'stepMismatch';\n  }\n  if (validityState.tooLong) {\n    return 'tooLong';\n  }\n  if (validityState.tooShort) {\n    return 'tooShort';\n  }\n  if (validityState.typeMismatch) {\n    return 'typeMismatch';\n  }\n  if (validityState.valueMissing) {\n    return 'valueMissing';\n  }\n  /** We don't check for custom error since those should never be automatically updated. */\n  return null;\n}\n\n/**\n * Internal getter function to return the matching formatted message for\n * each validityStateKey.\n * @internal\n */\nexport function getI18nErrorMessage(\n  key: keyof ValidityState,\n  ref?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null,\n) {\n  switch (key) {\n    case 'badInput':\n      return (\n        <FormattedMessage\n          id=\"/cwiOkubC69MZmRu\"\n          defaultMessage=\"Please provide input in a valid format.\"\n          description=\"Error message for input that the browser is unable to convert, e.g. string for a number input.\"\n        />\n      );\n    case 'patternMismatch':\n      return (\n        <FormattedMessage\n          id=\"qPeX7AgKbKzBFqGZ\"\n          defaultMessage=\"Please match the format requested.\"\n          description=\"Error message for input that doesn't follow the requested pattern.\"\n        />\n      );\n    case 'rangeOverflow':\n      return (\n        <FormattedMessage\n          id=\"14mVeqEFpqD2fpev\"\n          defaultMessage=\"Value must be less or equal to {max}.\"\n          description=\"Error message for input that value is higher then the max.\"\n          values={{ max: ref?.getAttribute('max') }}\n        />\n      );\n    case 'rangeUnderflow':\n      return (\n        <FormattedMessage\n          id=\"5XoVjJUQ5b86MLW+\"\n          defaultMessage=\"Value must be higher or equal to {min}.\"\n          description=\"Error message for input that value is lower then the max.\"\n          values={{ min: ref?.getAttribute('min') }}\n        />\n      );\n    case 'stepMismatch':\n      return (\n        <FormattedMessage\n          id=\"MYfVMxPsAgOn8JSP\"\n          defaultMessage=\"Value must be a multiple of {step}, starting from {min}.\"\n          description=\"Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided.\"\n          values={{\n            step: ref?.getAttribute('step'),\n            min: ref?.getAttribute('min') ?? '0',\n          }}\n        />\n      );\n    case 'tooLong':\n      return (\n        <FormattedMessage\n          id=\"JOIA3jQfIIkgnW04\"\n          defaultMessage=\"Please shorten this text to {maxLength} characters or less.\"\n          description=\"Error message for input that is shorter than the maxLength.\"\n          values={{ maxLength: ref?.getAttribute('maxLength') }}\n        />\n      );\n    case 'tooShort':\n      return (\n        <FormattedMessage\n          id=\"sJeuQTGrzcMvd6fY\"\n          defaultMessage=\"Please lengthen this text to {minLength} characters or more.\"\n          description=\"Error message for input that is shorter than the minLength.\"\n          values={{ minLength: ref?.getAttribute('minLength') }}\n        />\n      );\n    case 'typeMismatch':\n      return (\n        <FormattedMessage\n          id=\"fLfhKO8cXlo3vW5M\"\n          defaultMessage=\"Please provide a value that matches the requested type ({type}).\"\n          description=\"Error message for input that doesn't match the expected type.\"\n          values={{ type: ref?.getAttribute('type') }}\n        />\n      );\n    case 'valueMissing':\n      return (\n        <FormattedMessage\n          id=\"laIylhVFbIvEZrxt\"\n          defaultMessage=\"Please fill in this field.\"\n          description=\"Error message for missing input.\"\n        />\n      );\n\n    case 'customError':\n    case 'valid':\n    default:\n      /** Shouldn't be reached */\n      return null;\n  }\n}\n\n/** @internal */\ninterface FormFieldValidationProps {\n  ariaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >;\n  onInvalid: (\n    event: ReactFormEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n  onChange: (\n    event?: ChangeEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n  onBlur: (\n    event?: FocusEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n}\n\n/**\n * @internal\n * @param ref - Reference to the input element\n * @param validationDeps - Values that trigger re-validation when changed (e.g., [required, min, max, pattern]).\n * @param ariaLabelingProps - ARIA labeling properties\n * @param controlId - Optional control ID for message management\n */\nexport function useFormFieldValidation(\n  ref: RefObject<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null\n  >,\n  validationDeps: Record<string, string | number | boolean | undefined> = {},\n  ariaLabelingProps: AriaLabelingProps = {},\n  controlId?: string,\n): FormFieldValidationProps {\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const errorId = useId();\n\n  const _ariaProps = useMemo(() => {\n    let messageIdsString;\n    let errorMessageIdsString;\n\n    if (\n      state.customMessages.length > 0 ||\n      state.formControlMessages.length > 0\n    ) {\n      const messages = [...state.customMessages, ...state.formControlMessages];\n      errorMessageIdsString = messages\n        .filter((msg) => msg.variant === 'error')\n        .map((msg) => msg.id)\n        .join(' ');\n\n      messageIdsString = messages.map((msg) => msg.id).join(' ');\n    }\n\n    return {\n      'aria-errormessage': state.showError ? errorMessageIdsString : undefined,\n      'aria-invalid': state.showError,\n      'aria-describedby': messageIdsString,\n    };\n  }, [state.customMessages, state.formControlMessages, state.showError]);\n  const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);\n\n  const updateErrorMessages = useCallback(() => {\n    const errorType = getErrorType(ref.current?.validity);\n\n    state.formControlMessages.forEach((message) => {\n      if (\n        message.validityStateKey !== errorType &&\n        message.validityStateKey !== 'customError'\n      ) {\n        dispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: message.id,\n            messageType: 'formcontrol',\n            controlId,\n          },\n        });\n      }\n    });\n\n    if (errorType) {\n      dispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          id: errorId,\n          message: (\n            <Text textStyle=\"small\" as=\"p\">\n              {getI18nErrorMessage(errorType, ref.current)}\n            </Text>\n          ),\n          validityStateKey: errorType,\n          messageType: 'formcontrol',\n          variant: 'error',\n          controlId,\n        },\n      });\n    }\n  }, [controlId, dispatch, errorId, ref, state.formControlMessages]);\n\n  const onInvalid = useCallback(\n    (\n      event: ReactFormEvent<\n        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n      >,\n    ) => {\n      updateErrorMessages();\n\n      dispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      // Prevents the browser validation pop up.\n      event.preventDefault();\n    },\n    [dispatch, updateErrorMessages],\n  );\n\n  const onBlur = useCallback(() => {\n    ref.current?.reportValidity();\n    dispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n  }, [dispatch, ref]);\n\n  const validationDepsKey = JSON.stringify(validationDeps);\n\n  useEffect(() => {\n    updateErrorMessages();\n  }, [validationDepsKey, updateErrorMessages]);\n\n  return {\n    ariaProps,\n    onInvalid,\n    onChange: updateErrorMessages,\n    onBlur,\n  };\n}\n\n/* @internal - function to combine aria-labelling and validation aria-props correctly. */\nexport function getCombinedAriaProps(\n  validationAriaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >,\n  labelingProps: AriaLabelingProps,\n) {\n  const {\n    'aria-describedby': validationDescription,\n    ...remainingValidationProps\n  } = validationAriaProps;\n  const { 'aria-describedby': propDescription, ...remainingLabelingProps } =\n    labelingProps;\n\n  if (validationDescription && propDescription) {\n    return {\n      ...remainingLabelingProps,\n      ...remainingValidationProps,\n      'aria-describedby': (\n        validationDescription +\n        ' ' +\n        propDescription\n      ).trim(),\n    };\n  }\n\n  return {\n    ...remainingLabelingProps,\n    ...remainingValidationProps,\n    'aria-describedby': validationDescription ?? propDescription,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  AriaAttributes,\n  type RefObject,\n  type FormEvent as ReactFormEvent,\n  type ChangeEvent,\n  type FocusEvent,\n  useCallback,\n  useMemo,\n  useEffect,\n  useRef,\n} from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { useFormFieldMessagesContext } from './useFormFieldMessagesContext.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { FormFieldMessagesAction } from '../state/formfield-messages-state-reducer.js';\n\n/**\n * Getter function to read the error type form the validity state.\n * The validity state values are readonly and can't therefore not be iterated but need to accessed directly instead.\n * https://stackoverflow.com/questions/20891950/html-validation-api-returns-an-empty-object-in-firefox?rq=2\n * @internal\n */\nexport function getErrorType(validityState?: ValidityState) {\n  if (!validityState) {\n    return null;\n  }\n\n  if (validityState.badInput) {\n    return 'badInput';\n  }\n  if (validityState.patternMismatch) {\n    return 'patternMismatch';\n  }\n  if (validityState.rangeOverflow) {\n    return 'rangeOverflow';\n  }\n  if (validityState.rangeUnderflow) {\n    return 'rangeUnderflow';\n  }\n  if (validityState.stepMismatch) {\n    return 'stepMismatch';\n  }\n  if (validityState.tooLong) {\n    return 'tooLong';\n  }\n  if (validityState.tooShort) {\n    return 'tooShort';\n  }\n  if (validityState.typeMismatch) {\n    return 'typeMismatch';\n  }\n  if (validityState.valueMissing) {\n    return 'valueMissing';\n  }\n  /** We don't check for custom error since those should never be automatically updated. */\n  return null;\n}\n\n/**\n * Internal getter function to return the matching formatted message for\n * each validityStateKey.\n * @internal\n */\nexport function getI18nErrorMessage(\n  key: keyof ValidityState,\n  ref?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null,\n) {\n  switch (key) {\n    case 'badInput':\n      return (\n        <FormattedMessage\n          id=\"/cwiOkubC69MZmRu\"\n          defaultMessage=\"Please provide input in a valid format.\"\n          description=\"Error message for input that the browser is unable to convert, e.g. string for a number input.\"\n        />\n      );\n    case 'patternMismatch':\n      return (\n        <FormattedMessage\n          id=\"qPeX7AgKbKzBFqGZ\"\n          defaultMessage=\"Please match the format requested.\"\n          description=\"Error message for input that doesn't follow the requested pattern.\"\n        />\n      );\n    case 'rangeOverflow':\n      return (\n        <FormattedMessage\n          id=\"14mVeqEFpqD2fpev\"\n          defaultMessage=\"Value must be less or equal to {max}.\"\n          description=\"Error message for input that value is higher then the max.\"\n          values={{ max: ref?.getAttribute('max') }}\n        />\n      );\n    case 'rangeUnderflow':\n      return (\n        <FormattedMessage\n          id=\"5XoVjJUQ5b86MLW+\"\n          defaultMessage=\"Value must be higher or equal to {min}.\"\n          description=\"Error message for input that value is lower then the max.\"\n          values={{ min: ref?.getAttribute('min') }}\n        />\n      );\n    case 'stepMismatch':\n      return (\n        <FormattedMessage\n          id=\"MYfVMxPsAgOn8JSP\"\n          defaultMessage=\"Value must be a multiple of {step}, starting from {min}.\"\n          description=\"Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided.\"\n          values={{\n            step: ref?.getAttribute('step'),\n            min: ref?.getAttribute('min') ?? '0',\n          }}\n        />\n      );\n    case 'tooLong':\n      return (\n        <FormattedMessage\n          id=\"JOIA3jQfIIkgnW04\"\n          defaultMessage=\"Please shorten this text to {maxLength} characters or less.\"\n          description=\"Error message for input that is shorter than the maxLength.\"\n          values={{ maxLength: ref?.getAttribute('maxLength') }}\n        />\n      );\n    case 'tooShort':\n      return (\n        <FormattedMessage\n          id=\"sJeuQTGrzcMvd6fY\"\n          defaultMessage=\"Please lengthen this text to {minLength} characters or more.\"\n          description=\"Error message for input that is shorter than the minLength.\"\n          values={{ minLength: ref?.getAttribute('minLength') }}\n        />\n      );\n    case 'typeMismatch':\n      return (\n        <FormattedMessage\n          id=\"fLfhKO8cXlo3vW5M\"\n          defaultMessage=\"Please provide a value that matches the requested type ({type}).\"\n          description=\"Error message for input that doesn't match the expected type.\"\n          values={{ type: ref?.getAttribute('type') }}\n        />\n      );\n    case 'valueMissing':\n      return (\n        <FormattedMessage\n          id=\"laIylhVFbIvEZrxt\"\n          defaultMessage=\"Please fill in this field.\"\n          description=\"Error message for missing input.\"\n        />\n      );\n\n    case 'customError':\n    case 'valid':\n    default:\n      /** Shouldn't be reached */\n      return null;\n  }\n}\n\n/** @internal */\ninterface FormFieldValidationProps {\n  ariaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >;\n  onInvalid: (\n    event: ReactFormEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n  onChange: (\n    event?: ChangeEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n  onBlur: (\n    event?: FocusEvent<\n      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n    >,\n  ) => void;\n}\n\n/**\n * @internal\n * @param ref - Reference to the input element\n * @param validationDeps - Values that trigger re-validation when changed (e.g., [required, min, max, pattern]).\n * @param ariaLabelingProps - ARIA labeling properties\n * @param controlId - Optional control ID for message management\n */\nexport function useFormFieldValidation(\n  ref: RefObject<\n    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null\n  >,\n  validationDeps: Record<string, string | number | boolean | undefined> = {},\n  ariaLabelingProps: AriaLabelingProps = {},\n  controlId?: string,\n): FormFieldValidationProps {\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const errorId = useId();\n\n  const _ariaProps = useMemo(() => {\n    let messageIdsString;\n    let errorMessageIdsString;\n\n    if (\n      state.customMessages.length > 0 ||\n      state.formControlMessages.length > 0\n    ) {\n      const messages = [...state.customMessages, ...state.formControlMessages];\n      errorMessageIdsString = messages\n        .filter((msg) => msg.variant === 'error')\n        .map((msg) => msg.id)\n        .join(' ');\n\n      messageIdsString = messages.map((msg) => msg.id).join(' ');\n    }\n\n    return {\n      'aria-errormessage': state.showError ? errorMessageIdsString : undefined,\n      'aria-invalid': state.showError,\n      'aria-describedby': messageIdsString,\n    };\n  }, [state.customMessages, state.formControlMessages, state.showError]);\n  const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);\n\n  // Keep a ref to the current formControlMessages so `updateErrorMessages`\n  // can read the latest list without listing it as a reactive dependency.\n  // If it were a dependency, any dispatch (add/remove message) would recreate\n  // the callback, re-trigger the useEffect below, which would dispatch again \u2014\n  // causing an infinite loop.\n  const formControlMessagesRef = useRef(state.formControlMessages);\n  formControlMessagesRef.current = state.formControlMessages;\n\n  const updateErrorMessages = useCallback(() => {\n    const errorType = getErrorType(ref.current?.validity);\n\n    formControlMessagesRef.current.forEach((message) => {\n      if (\n        message.validityStateKey !== errorType &&\n        message.validityStateKey !== 'customError'\n      ) {\n        dispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: message.id,\n            messageType: 'formcontrol',\n            controlId,\n          },\n        });\n      }\n    });\n\n    if (errorType) {\n      dispatch?.({\n        type: FormFieldMessagesAction.ADDMESSAGE,\n        payload: {\n          id: errorId,\n          message: (\n            <Text textStyle=\"small\" as=\"p\">\n              {getI18nErrorMessage(errorType, ref.current)}\n            </Text>\n          ),\n          validityStateKey: errorType,\n          messageType: 'formcontrol',\n          variant: 'error',\n          controlId,\n        },\n      });\n    }\n  }, [controlId, dispatch, errorId, ref]); // formControlMessages intentionally excluded \u2014 read via ref above\n\n  const onInvalid = useCallback(\n    (\n      event: ReactFormEvent<\n        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n      >,\n    ) => {\n      updateErrorMessages();\n\n      dispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      // Prevents the browser validation pop up.\n      event.preventDefault();\n    },\n    [dispatch, updateErrorMessages],\n  );\n\n  const onBlur = useCallback(() => {\n    ref.current?.reportValidity();\n    dispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n  }, [dispatch, ref]);\n\n  const validationDepsKey = JSON.stringify(validationDeps);\n\n  useEffect(() => {\n    updateErrorMessages();\n  }, [validationDepsKey, updateErrorMessages]);\n\n  return {\n    ariaProps,\n    onInvalid,\n    onChange: updateErrorMessages,\n    onBlur,\n  };\n}\n\n/* @internal - function to combine aria-labelling and validation aria-props correctly. */\nexport function getCombinedAriaProps(\n  validationAriaProps: Pick<\n    AriaAttributes,\n    'aria-errormessage' | 'aria-invalid' | 'aria-describedby'\n  >,\n  labelingProps: AriaLabelingProps,\n) {\n  const {\n    'aria-describedby': validationDescription,\n    ...remainingValidationProps\n  } = validationAriaProps;\n  const { 'aria-describedby': propDescription, ...remainingLabelingProps } =\n    labelingProps;\n\n  if (validationDescription && propDescription) {\n    return {\n      ...remainingLabelingProps,\n      ...remainingValidationProps,\n      'aria-describedby': (\n        validationDescription +\n        ' ' +\n        propDescription\n      ).trim(),\n    };\n  }\n\n  return {\n    ...remainingLabelingProps,\n    ...remainingValidationProps,\n    'aria-describedby': validationDescription ?? propDescription,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/forms-core/hooks/useMinMaxLogger.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { TZDateMini } from "@date-fns/tz";
 import { useEffect } from "react";
-import { parseTimeAsTimeValue } from "@dynatrace-sdk/units";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { useStratoLogger } from "../../../core/sdk/sdk-logger.js";
 const useMinMaxLogger = (min, max, componentName) => {
@@ -9,14 +8,10 @@ const useMinMaxLogger = (min, max, componentName) => {
   );
   const timezone = getTimezone();
   useEffect(() => {
-    if (min && max) {
-      const minDate = parseTimeAsTimeValue(min);
-      const maxDate = parseTimeAsTimeValue(max);
-      if (minDate && maxDate && new TZDateMini(minDate.absoluteDate, timezone).getTime() >= new TZDateMini(maxDate.absoluteDate, timezone).getTime()) {
-        logger.error(
-          `Min prop is larger than the max prop. Min: ${min}, Max: ${max}`
-        );
-      }
+    if (min && max && new TZDateMini(min.absoluteDate, timezone).getTime() >= new TZDateMini(max.absoluteDate, timezone).getTime()) {
+      logger.error(
+        `Min prop is larger than the max prop. Min: ${min.value}, Max: ${max.value}`
+      );
     }
   }, [min, max, logger, timezone]);
 };

package/esm/forms/forms-core/hooks/useMinMaxLogger.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/hooks/useMinMaxLogger.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { useEffect } from 'react';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useStratoLogger } from '../../../core/sdk/sdk-logger.js';\n\n/**\n * Hook to check and log when the min is larger than the max.\n * @internal\n */\nexport const useMinMaxLogger = (\n  min?: string,\n  max?: string,\n  componentName?: string,\n) => {\n  const logger = useStratoLogger(\n    componentName ?? 'Date Component - MinMaxLogger',\n  );\n\n  const timezone = getTimezone();\n\n  useEffect(() => {\n    if (min && max) {\n      const minDate = parseTimeAsTimeValue(min);\n      const maxDate = parseTimeAsTimeValue(max);\n      if (\n        minDate &&\n        maxDate &&\n        new TZDateMini(minDate.absoluteDate, timezone).getTime() >=\n          new TZDateMini(maxDate.absoluteDate, timezone).getTime()\n      ) {\n        logger.error(\n          `Min prop is larger than the max prop. Min: ${min}, Max: ${max}`,\n        );\n      }\n    }\n  }, [min, max, logger, timezone]);\n};\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAMzB,MAAM,kBAAkB,CAC7B,KACA,KACA,kBACG;AACH,QAAM,SAAS;AAAA,IACb,iBAAiB;AAAA,EACnB;AAEA,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,QAAI,OAAO,KAAK;AACd,YAAM,UAAU,qBAAqB,GAAG;AACxC,YAAM,UAAU,qBAAqB,GAAG;AACxC,UACE,WACA,WACA,IAAI,WAAW,QAAQ,cAAc,QAAQ,EAAE,QAAQ,KACrD,IAAI,WAAW,QAAQ,cAAc,QAAQ,EAAE,QAAQ,GACzD;AACA,eAAO;AAAA,UACL,8CAA8C,GAAG,UAAU,GAAG;AAAA,QAChE;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,QAAQ,QAAQ,CAAC;AACjC;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { useEffect } from 'react';\n\nimport type { TimeValue } from '@dynatrace-sdk/units/types/packages/util/units/src/util-format/time.js';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useStratoLogger } from '../../../core/sdk/sdk-logger.js';\n\n/**\n * Hook to check and log when the min is larger than the max.\n * @internal\n */\nexport const useMinMaxLogger = (\n  min?: TimeValue | null,\n  max?: TimeValue | null,\n  componentName?: string,\n) => {\n  const logger = useStratoLogger(\n    componentName ?? 'Date Component - MinMaxLogger',\n  );\n\n  const timezone = getTimezone();\n\n  useEffect(() => {\n    if (\n      min &&\n      max &&\n      new TZDateMini(min.absoluteDate, timezone).getTime() >=\n        new TZDateMini(max.absoluteDate, timezone).getTime()\n    ) {\n      logger.error(\n        `Min prop is larger than the max prop. Min: ${min.value}, Max: ${max.value}`,\n      );\n    }\n  }, [min, max, logger, timezone]);\n};\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAG1B,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAMzB,MAAM,kBAAkB,CAC7B,KACA,KACA,kBACG;AACH,QAAM,SAAS;AAAA,IACb,iBAAiB;AAAA,EACnB;AAEA,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,QACE,OACA,OACA,IAAI,WAAW,IAAI,cAAc,QAAQ,EAAE,QAAQ,KACjD,IAAI,WAAW,IAAI,cAAc,QAAQ,EAAE,QAAQ,GACrD;AACA,aAAO;AAAA,QACL,8CAA8C,IAAI,KAAK,UAAU,IAAI,KAAK;AAAA,MAC5E;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,QAAQ,QAAQ,CAAC;AACjC;",
   "names": []
 }

package/esm/forms/forms-core/state/formfield-messages-state-reducer.js CHANGED Viewed

@@ -50,19 +50,35 @@ function formFieldMessagesReducer(state, action) {
     const { payload } = action;
     const { messageType, ...remainingPayload } = payload;
     if (isFormControlPayload(remainingPayload, messageType)) {
-      const isNewBrowserError = remainingPayload.validityStateKey !== void 0 && remainingPayload.validityStateKey !== "customError" && !state.formControlMessages.some(
-        (message) => message.validityStateKey === remainingPayload.validityStateKey
-      );
-      const isNewInternalMessage = remainingPayload.validityStateKey === "customError" && "id" in remainingPayload && !state.formControlMessages.some(
-        (message) => message.id === remainingPayload.id
-      );
-      if (!(isNewBrowserError || isNewInternalMessage)) {
-        return state;
+      if (remainingPayload.validityStateKey === "customError" && remainingPayload.variant === "error" && "id" in remainingPayload) {
+        const { id: internalId, ...internalRest } = remainingPayload;
+        const customErrors = state.formControlMessages.filter(
+          (m) => m.validityStateKey === "customError"
+        );
+        if (customErrors.length === 1 && customErrors[0].id === internalId) {
+          if ((payload.showError ?? state.showError) === state.showError) {
+            return state;
+          }
+        } else {
+          newState.formControlMessages = [
+            ...state.formControlMessages.filter(
+              (m) => m.validityStateKey !== "customError"
+            ),
+            { id: internalId, ...internalRest }
+          ];
+        }
+      } else {
+        const isNewBrowserError = remainingPayload.validityStateKey !== void 0 && !state.formControlMessages.some(
+          (message) => message.validityStateKey === remainingPayload.validityStateKey
+        );
+        if (!isNewBrowserError) {
+          return state;
+        }
+        newState.formControlMessages = [
+          ...newState.formControlMessages,
+          { id: `strato-${crypto.randomUUID()}`, ...remainingPayload }
+        ];
       }
-      newState.formControlMessages.push({
-        id: `strato-${crypto.randomUUID()}`,
-        ...remainingPayload
-      });
     } else if ("id" in remainingPayload && !state.formControlMessages.some(
       (message) => message.id === remainingPayload.id
     ) && !state.customMessages.some(

package/esm/forms/forms-core/state/formfield-messages-state-reducer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/forms-core/state/formfield-messages-state-reducer.ts"],
-  "sourcesContent": ["import type {\n  FormFieldControlMessage,\n  FormFieldCustomMessage,\n  FormFieldMessage,\n  FormFieldMessageContextState,\n} from '../types/formfield-messages.types.js';\n\nexport const enum FormFieldMessagesAction {\n  ADDMESSAGE = 'addmessage',\n  REMOVEMESSAGE = 'removemessage',\n  DISABLEMESSAGE = 'disablemessage',\n  SETISTOUCHED = 'setistouched',\n  ADDFORMCONTROLID = 'addformcontrolid',\n  REMOVEFORMCONTROLID = 'removeformcontrolid',\n}\n\nexport type FormFieldMessagesReducerAction =\n  | {\n      type: FormFieldMessagesAction.ADDMESSAGE;\n      payload: (\n        | Omit<FormFieldControlMessage, 'id'>\n        | FormFieldCustomMessage\n      ) & { showError?: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEMESSAGE;\n      payload: Pick<FormFieldMessage, 'id' | 'messageType' | 'controlId'>;\n    }\n  | {\n      type: FormFieldMessagesAction.DISABLEMESSAGE;\n      payload: {\n        isDisabled: boolean | undefined;\n      };\n    }\n  | {\n      type: FormFieldMessagesAction.SETISTOUCHED;\n      payload: { isTouched: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.ADDFORMCONTROLID;\n      payload: { controlId: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEFORMCONTROLID;\n      payload: { controlId: string };\n    };\n\ntype HTMLFormControlElement =\n  | HTMLSelectElement\n  | HTMLInputElement\n  | HTMLTextAreaElement;\n\n/**\n * Typeguard function that will check if message is a formcontrol (internal) message.\n * @internal\n */\nfunction isFormControlPayload(\n  payload:\n    | Omit<FormFieldControlMessage, 'id'>\n    | FormFieldCustomMessage\n    | FormFieldControlMessage,\n  messageType?: 'formcontrol' | 'custom',\n): payload is FormFieldControlMessage | Omit<FormFieldControlMessage, 'id'> {\n  return messageType === 'formcontrol';\n}\n\n/**\n * Typeguard function that will check if the element is a form control.\n * @internal\n */\nfunction isHTMLFormControlElement(\n  element: null | HTMLElement,\n): element is HTMLFormControlElement {\n  return !!(element && 'setCustomValidity' in element);\n}\n\n/**\n * Set custom validity on the HTML form control element.\n * @param id\n * @param isValid\n * @internal\n */\nfunction setHTMLElementValidity(id: string, isValid: boolean) {\n  const element = document.getElementById(id);\n  if (isHTMLFormControlElement(element)) {\n    element.setCustomValidity(isValid ? '' : ' ');\n  }\n}\n\n/**\n * Function that will determine the validity of a form control.\n * @internal\n */\nfunction updateValidity(\n  state: FormFieldMessageContextState,\n  explicitControlId?: string,\n) {\n  const { customMessages, formControlMessages, isTouched, isDisabled } = state;\n\n  const hasCustomError = customMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const hasFormControlError = formControlMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const newIsValid = !hasCustomError && !hasFormControlError;\n  const newShowError =\n    !isDisabled && (state.showError || (isTouched ?? false)) && !newIsValid;\n\n  if (explicitControlId) {\n    setHTMLElementValidity(explicitControlId, newIsValid);\n\n    return {\n      ...state,\n      isValid: newIsValid,\n      showError: newShowError,\n    };\n  }\n\n  state.controlIds?.forEach((id) => setHTMLElementValidity(id, newIsValid));\n\n  return {\n    ...state,\n    isValid: newIsValid,\n    showError: newShowError,\n  };\n}\n\n/** FormFieldMessage reducer function used for managing FormFieldMessages and FormFieldCustomMessages. */\nexport function formFieldMessagesReducer(\n  state: FormFieldMessageContextState,\n  action: FormFieldMessagesReducerAction,\n): FormFieldMessageContextState {\n  const newState = { ...state };\n\n  // handle adding of form messages\n  if (action.type === FormFieldMessagesAction.ADDMESSAGE) {\n    const { payload } = action;\n    const { messageType, ...remainingPayload } = payload;\n\n    // Is a browser/strato message\n    if (isFormControlPayload(remainingPayload, messageType)) {\n      // browser errors come with a unique validityStateKey\n      const isNewBrowserError =\n        remainingPayload.validityStateKey !== undefined &&\n        remainingPayload.validityStateKey !== 'customError' &&\n        !state.formControlMessages.some(\n          (message) =>\n            message.validityStateKey === remainingPayload.validityStateKey,\n        );\n\n      const isNewInternalMessage =\n        remainingPayload.validityStateKey === 'customError' &&\n        'id' in remainingPayload &&\n        !state.formControlMessages.some(\n          (message) => message.id === remainingPayload.id,\n        );\n\n      if (!(isNewBrowserError || isNewInternalMessage)) {\n        return state;\n      }\n\n      newState.formControlMessages.push({\n        id: `strato-${crypto.randomUUID()}`,\n        ...remainingPayload,\n      });\n\n      // Is a custom error\n    } else if (\n      'id' in remainingPayload &&\n      !state.formControlMessages.some(\n        (message) => message.id === remainingPayload.id,\n      ) &&\n      !state.customMessages.some(\n        (message) => message.id === remainingPayload.id,\n      )\n    ) {\n      newState.customMessages.push(remainingPayload);\n    }\n\n    if (remainingPayload.variant === 'error') {\n      newState.showError = payload.showError ?? state.showError;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEMESSAGE) {\n    const { payload } = action;\n    let didUpdate = false;\n\n    if (payload.messageType === 'formcontrol') {\n      newState.formControlMessages = newState.formControlMessages.filter(\n        (message) => {\n          if (message.id === payload.id) {\n            didUpdate = true;\n          }\n\n          return message.id !== payload.id;\n        },\n      );\n    } else {\n      newState.customMessages = newState.customMessages.filter((message) => {\n        if (message.id === payload.id) {\n          didUpdate = true;\n        }\n\n        return message.id !== payload.id;\n      });\n    }\n\n    // avoid unnecessary updates and possible endless loops by early escaping if nothing was removed.\n    if (!didUpdate) {\n      return state;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.DISABLEMESSAGE) {\n    const { payload } = action;\n    newState.isDisabled = payload.isDisabled;\n  }\n\n  if (action.type === FormFieldMessagesAction.SETISTOUCHED) {\n    const { payload } = action;\n    newState.isTouched = payload.isTouched;\n  }\n\n  if (action.type === FormFieldMessagesAction.ADDFORMCONTROLID) {\n    const {\n      payload: { controlId },\n    } = action;\n\n    newState.controlIds ??= [];\n\n    if (!newState.controlIds.includes(controlId)) {\n      newState.controlIds.push(controlId);\n    }\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEFORMCONTROLID) {\n    const {\n      payload: { controlId },\n    } = action;\n\n    newState.controlIds = state.controlIds?.filter((id) => id !== controlId);\n  }\n\n  return updateValidity(newState);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type {\n  FormFieldControlMessage,\n  FormFieldCustomMessage,\n  FormFieldMessage,\n  FormFieldMessageContextState,\n} from '../types/formfield-messages.types.js';\n\nexport const enum FormFieldMessagesAction {\n  ADDMESSAGE = 'addmessage',\n  REMOVEMESSAGE = 'removemessage',\n  DISABLEMESSAGE = 'disablemessage',\n  SETISTOUCHED = 'setistouched',\n  ADDFORMCONTROLID = 'addformcontrolid',\n  REMOVEFORMCONTROLID = 'removeformcontrolid',\n}\n\nexport type FormFieldMessagesReducerAction =\n  | {\n      type: FormFieldMessagesAction.ADDMESSAGE;\n      payload: (\n        | Omit<FormFieldControlMessage, 'id'>\n        | FormFieldCustomMessage\n      ) & { showError?: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEMESSAGE;\n      payload: Pick<FormFieldMessage, 'id' | 'messageType' | 'controlId'>;\n    }\n  | {\n      type: FormFieldMessagesAction.DISABLEMESSAGE;\n      payload: {\n        isDisabled: boolean | undefined;\n      };\n    }\n  | {\n      type: FormFieldMessagesAction.SETISTOUCHED;\n      payload: { isTouched: boolean };\n    }\n  | {\n      type: FormFieldMessagesAction.ADDFORMCONTROLID;\n      payload: { controlId: string };\n    }\n  | {\n      type: FormFieldMessagesAction.REMOVEFORMCONTROLID;\n      payload: { controlId: string };\n    };\n\ntype HTMLFormControlElement =\n  | HTMLSelectElement\n  | HTMLInputElement\n  | HTMLTextAreaElement;\n\n/**\n * Typeguard function that will check if message is a formcontrol (internal) message.\n * @internal\n */\nfunction isFormControlPayload(\n  payload:\n    | Omit<FormFieldControlMessage, 'id'>\n    | FormFieldCustomMessage\n    | FormFieldControlMessage,\n  messageType?: 'formcontrol' | 'custom',\n): payload is FormFieldControlMessage | Omit<FormFieldControlMessage, 'id'> {\n  return messageType === 'formcontrol';\n}\n\n/**\n * Typeguard function that will check if the element is a form control.\n * @internal\n */\nfunction isHTMLFormControlElement(\n  element: null | HTMLElement,\n): element is HTMLFormControlElement {\n  return !!(element && 'setCustomValidity' in element);\n}\n\n/**\n * Set custom validity on the HTML form control element.\n * @param id\n * @param isValid\n * @internal\n */\nfunction setHTMLElementValidity(id: string, isValid: boolean) {\n  const element = document.getElementById(id);\n  if (isHTMLFormControlElement(element)) {\n    element.setCustomValidity(isValid ? '' : ' ');\n  }\n}\n\n/**\n * Function that will determine the validity of a form control.\n * @internal\n */\nfunction updateValidity(\n  state: FormFieldMessageContextState,\n  explicitControlId?: string,\n) {\n  const { customMessages, formControlMessages, isTouched, isDisabled } = state;\n\n  const hasCustomError = customMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const hasFormControlError = formControlMessages.some(\n    (message) => message.variant === 'error',\n  );\n\n  const newIsValid = !hasCustomError && !hasFormControlError;\n  const newShowError =\n    !isDisabled && (state.showError || (isTouched ?? false)) && !newIsValid;\n\n  if (explicitControlId) {\n    setHTMLElementValidity(explicitControlId, newIsValid);\n\n    return {\n      ...state,\n      isValid: newIsValid,\n      showError: newShowError,\n    };\n  }\n\n  state.controlIds?.forEach((id) => setHTMLElementValidity(id, newIsValid));\n\n  return {\n    ...state,\n    isValid: newIsValid,\n    showError: newShowError,\n  };\n}\n\n/** FormFieldMessage reducer function used for managing FormFieldMessages and FormFieldCustomMessages. */\nexport function formFieldMessagesReducer(\n  state: FormFieldMessageContextState,\n  action: FormFieldMessagesReducerAction,\n): FormFieldMessageContextState {\n  const newState = { ...state };\n\n  // handle adding of form messages\n  if (action.type === FormFieldMessagesAction.ADDMESSAGE) {\n    const { payload } = action;\n    const { messageType, ...remainingPayload } = payload;\n\n    // Is a browser/strato message\n    if (isFormControlPayload(remainingPayload, messageType)) {\n      if (\n        remainingPayload.validityStateKey === 'customError' &&\n        remainingPayload.variant === 'error' &&\n        'id' in remainingPayload\n      ) {\n        const { id: internalId, ...internalRest } =\n          remainingPayload as typeof remainingPayload & { id: string };\n\n        const customErrors = state.formControlMessages.filter(\n          (m) => m.validityStateKey === 'customError',\n        );\n\n        // If the same sole customError is already present and showError won't\n        // change, return early to keep the array reference stable and prevent\n        // a useEffect re-run \u2192 re-dispatch \u2192 infinite-render loop.\n        if (customErrors.length === 1 && customErrors[0].id === internalId) {\n          if ((payload.showError ?? state.showError) === state.showError) {\n            return state;\n          }\n        } else {\n          // Replace all existing customErrors with the new one so only one\n          // internal error is shown at a time.\n          newState.formControlMessages = [\n            ...state.formControlMessages.filter(\n              (m) => m.validityStateKey !== 'customError',\n            ),\n            { id: internalId, ...internalRest },\n          ];\n        }\n      } else {\n        // Browser validity errors are keyed by validityStateKey; only add once.\n        const isNewBrowserError =\n          remainingPayload.validityStateKey !== undefined &&\n          !state.formControlMessages.some(\n            (message) =>\n              message.validityStateKey === remainingPayload.validityStateKey,\n          );\n\n        if (!isNewBrowserError) {\n          return state;\n        }\n\n        newState.formControlMessages = [\n          ...newState.formControlMessages,\n          { id: `strato-${crypto.randomUUID()}`, ...remainingPayload },\n        ];\n      }\n\n      // Is a custom error\n    } else if (\n      'id' in remainingPayload &&\n      !state.formControlMessages.some(\n        (message) => message.id === remainingPayload.id,\n      ) &&\n      !state.customMessages.some(\n        (message) => message.id === remainingPayload.id,\n      )\n    ) {\n      newState.customMessages.push(remainingPayload);\n    }\n\n    if (remainingPayload.variant === 'error') {\n      newState.showError = payload.showError ?? state.showError;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEMESSAGE) {\n    const { payload } = action;\n    let didUpdate = false;\n\n    if (payload.messageType === 'formcontrol') {\n      newState.formControlMessages = newState.formControlMessages.filter(\n        (message) => {\n          if (message.id === payload.id) {\n            didUpdate = true;\n          }\n\n          return message.id !== payload.id;\n        },\n      );\n    } else {\n      newState.customMessages = newState.customMessages.filter((message) => {\n        if (message.id === payload.id) {\n          didUpdate = true;\n        }\n\n        return message.id !== payload.id;\n      });\n    }\n\n    // avoid unnecessary updates and possible endless loops by early escaping if nothing was removed.\n    if (!didUpdate) {\n      return state;\n    }\n\n    return updateValidity(newState, payload.controlId);\n  }\n\n  if (action.type === FormFieldMessagesAction.DISABLEMESSAGE) {\n    const { payload } = action;\n    newState.isDisabled = payload.isDisabled;\n  }\n\n  if (action.type === FormFieldMessagesAction.SETISTOUCHED) {\n    const { payload } = action;\n    newState.isTouched = payload.isTouched;\n  }\n\n  if (action.type === FormFieldMessagesAction.ADDFORMCONTROLID) {\n    const {\n      payload: { controlId },\n    } = action;\n\n    newState.controlIds ??= [];\n\n    if (!newState.controlIds.includes(controlId)) {\n      newState.controlIds.push(controlId);\n    }\n  }\n\n  if (action.type === FormFieldMessagesAction.REMOVEFORMCONTROLID) {\n    const {\n      payload: { controlId },\n    } = action;\n\n    newState.controlIds = state.controlIds?.filter((id) => id !== controlId);\n  }\n\n  return updateValidity(newState);\n}\n"],
+  "mappings": "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",
   "names": ["FormFieldMessagesAction"]
 }