@dynatrace/strato-components 3.1.3 → 3.2.0

package/esm/forms/date-time-range-picker/selection-helpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/date-time-range-picker/selection-helpers.ts"],
+  "sourcesContent": ["import * as styles from './DateTimeInput.sty.js';\n\nfunction checkIfValueTypeAlignment(textNode: Node): boolean {\n  // There are a lot of hidden text nodes for the mix of spin button and expression\n  // in the DateTimeInput.\n  // In order to skip the hidden ones correctly, we need to check for parent value types.\n  const closestDateTimeInput = textNode.parentElement?.closest(\n    `.${styles.dateTimeInput}`,\n  );\n  const currentValueType = closestDateTimeInput?.getAttribute('data-valuetype');\n  const closestValueTypeElement =\n    textNode.parentElement?.closest('[data-valuetype]');\n\n  // If the query resolves to the same dateTime input element, it means that there is no other defining parent.\n  // In this case it may be a placeholder / separator text or any other node.\n  if (closestDateTimeInput === closestValueTypeElement) {\n    return true;\n  }\n\n  const nodeValueType = closestValueTypeElement?.getAttribute('data-valuetype');\n\n  return nodeValueType === currentValueType;\n}\n\n/** Helper to walk backwards through text nodes. */\nfunction previousTextNode(root: HTMLElement, node: Node): Node | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n\n  let current = walker.lastChild();\n  let found = false;\n  while (current) {\n    if (found) {\n      // There are a lot of hidden text nodes for the mix of spin button and expression\n      // in the DateTimeInput.\n      // In order to skip the hidden ones correctly, we need to check for parent value types.\n      if (checkIfValueTypeAlignment(current)) {\n        return current;\n      }\n    }\n\n    if (current === node) {\n      found = true;\n    }\n\n    current = walker.previousNode();\n  }\n\n  return null;\n}\n\n/** Helper to walk forwards through text nodes. */\nfunction nextTextNode(root: HTMLElement, node: Node): Node | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n\n  let current = walker.nextNode();\n  let found = false;\n\n  while (current) {\n    if (found) {\n      // There are a lot of hidden text nodes for the mix of spin button and expression\n      // in the DateTimeInput.\n      // In order to skip the hidden ones correctly, we need to check for parent value types.\n      if (checkIfValueTypeAlignment(current)) {\n        return current;\n      }\n    }\n    if (current === node) {\n      found = true;\n    }\n    current = walker.nextNode();\n  }\n\n  return null;\n}\n\n/** Helper that finds the next character position to adjust the global selection. */\nfunction findNextCharacterPosition(\n  root: HTMLElement,\n  node: Node,\n  offset: number,\n): { node: Node; offset: number } | null {\n  if (\n    node.nodeType === Node.TEXT_NODE &&\n    node.nodeValue &&\n    offset < node.nodeValue.length\n  ) {\n    return { node, offset: offset + 1 };\n  }\n\n  // When the selection lands on an element node (not a text node), the offset\n  // represents a child index. Walk into that child subtree to find the first\n  // text node from that position forward.\n  if (node.nodeType !== Node.TEXT_NODE) {\n    const childAtOffset = node.childNodes[offset];\n    if (childAtOffset) {\n      const walker = document.createTreeWalker(\n        childAtOffset,\n        NodeFilter.SHOW_TEXT,\n        null,\n      );\n      const firstText =\n        walker.firstChild() ??\n        (childAtOffset.nodeType === Node.TEXT_NODE ? childAtOffset : null);\n      if (firstText && checkIfValueTypeAlignment(firstText)) {\n        return { node: firstText, offset: 1 };\n      }\n    }\n  }\n\n  const next = nextTextNode(root, node);\n\n  if (!next) {\n    return null;\n  }\n\n  return { node: next, offset: 1 };\n}\n\n/** Helper that finds the previous character position to adjust the global selection. */\nfunction findPreviousCharacterPosition(\n  root: HTMLElement,\n  node: Node,\n  offset: number,\n): { node: Node; offset: number } | null {\n  if (node.nodeType === Node.TEXT_NODE && offset > 0) {\n    return { node, offset: offset - 1 };\n  }\n\n  const prev = previousTextNode(root, node);\n  if (!prev || prev.nodeValue === null) {\n    return null;\n  }\n\n  return { node: prev, offset: prev.nodeValue.length - 1 };\n}\n\n/** Helper to find the first textNode to apply selection */\nfunction findFirstCharacterPosition(\n  root: HTMLElement,\n): { node: Node; offset: number } | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n  const firstChild = walker.firstChild();\n  if (firstChild === null) {\n    return null;\n  }\n  return {\n    node: firstChild,\n    offset: 0,\n  };\n}\n\n/** Helper to find the last textNode to apply selection */\nfunction findLastCharacterPosition(\n  root: HTMLElement,\n): { node: Node; offset: number } | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);\n  const lastChild = walker.lastChild();\n  if (lastChild === null) {\n    return null;\n  }\n  return {\n    node: lastChild,\n    offset: lastChild.nodeValue?.length ?? 0,\n  };\n}\n\n/**\n * Helper function that removes the contenteditable attributes for selection manipulation\n * @param rootElement - Must contain all contenteditable children.\n * @param removeEventTarget - Where to bind the inverese event listener to\n * @param eventType - Inverse event type, when should the contenteditable attribute be added back\n * @param customRemovalFn - Called when the inverse event fires in order to execute custom logic.\n *\n * @internal\n */\nexport function removeContentEditable(\n  rootElement: HTMLElement,\n  removeEventTarget: Document | HTMLElement,\n  eventType: 'mouseup' | 'keyup',\n  customRemovalFn?: (event: Event, hasMultiElementSelection: boolean) => void,\n): void {\n  const contentEditables =\n    rootElement.querySelectorAll<HTMLElement>('[contenteditable]');\n  for (const editable of contentEditables) {\n    const previousValue = editable.getAttribute('contenteditable') ?? undefined;\n    editable.removeAttribute('contenteditable');\n    editable.dataset.wascontenteditable = previousValue;\n\n    // Also temporarily remove tabIndex so the element isn't focusable during\n    // the drag. Without this, the browser auto-focuses the first spin button\n    // on mousedown when the component didn't have focus before, which disrupts\n    // drag-select across multiple elements.\n    if (editable.hasAttribute('tabindex')) {\n      editable.dataset.wastabindex = editable.getAttribute('tabindex') ?? '';\n      editable.removeAttribute('tabindex');\n    }\n  }\n\n  const signal = new AbortController();\n\n  removeEventTarget.addEventListener(\n    eventType,\n    (event: Event) => {\n      if (\n        event instanceof KeyboardEvent &&\n        (event.key === 'Control' || event.key === 'Meta' || event.key === 'Alt')\n      ) {\n        return;\n      }\n\n      const wasContentEditables = rootElement.querySelectorAll<HTMLElement>(\n        '[data-wascontenteditable]',\n      );\n      const selection = window.getSelection();\n      const { anchorNode, anchorOffset, focusNode, focusOffset } =\n        selection ?? {};\n\n      // Only set the restoring-selection marker when the selection actually\n      // spans multiple elements (drag-select). For simple clicks the marker\n      // must NOT be set, otherwise the subsequent onFocus won't call selectAll().\n      const hasMultiElementSelection =\n        selection !== null &&\n        selection.toString().length > 0 &&\n        (anchorNode !== focusNode ||\n          (anchorNode !== null &&\n            anchorNode === focusNode &&\n            anchorOffset !== focusOffset &&\n            anchorNode?.nodeType === Node.ELEMENT_NODE));\n\n      if (hasMultiElementSelection) {\n        rootElement.setAttribute('data-restoring-selection', '');\n      }\n\n      for (const editable of wasContentEditables) {\n        const previousValue = editable.getAttribute('data-wascontenteditable');\n        if (previousValue !== null) {\n          editable.setAttribute('contenteditable', previousValue);\n        }\n        editable.removeAttribute('data-wascontenteditable');\n\n        const wasTabIndex = editable.getAttribute('data-wastabindex');\n        if (wasTabIndex !== null) {\n          editable.setAttribute('tabindex', wasTabIndex);\n          editable.removeAttribute('data-wastabindex');\n        }\n      }\n\n      // Firefox throws away the selection after the contentEditable is added back in,\n      // so we need to make sure we keep the selection\n      if (\n        anchorNode !== null &&\n        anchorNode !== undefined &&\n        anchorOffset !== undefined &&\n        focusNode !== null &&\n        focusNode !== undefined &&\n        focusOffset !== undefined\n      ) {\n        window\n          .getSelection()\n          ?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);\n      }\n\n      customRemovalFn?.(event, hasMultiElementSelection);\n\n      rootElement.removeAttribute('data-restoring-selection');\n\n      signal.abort();\n    },\n    { signal: signal.signal },\n  );\n}\n\n/**\n * Helper function that allows to move the selection further on a character basis or\n * to the start / end of the TFS.\n * @param key - Provides the key which allows to extend the selection in the correct direction.\n * @internal\n */\nexport function extendSelection(\n  key: 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End',\n): void {\n  const selection = window.getSelection();\n  if (\n    selection === null ||\n    selection.focusNode === null ||\n    selection.rangeCount < 1\n  ) {\n    return;\n  }\n\n  const focusNode = selection.focusNode;\n  const focusOffset = selection.focusOffset;\n\n  let nextPos: { node: Node; offset: number } | null = null;\n\n  const root =\n    focusNode.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n  if (root === null || root === undefined) {\n    return;\n  }\n\n  if (key === 'ArrowLeft') {\n    nextPos = findPreviousCharacterPosition(root, focusNode, focusOffset);\n  } else if (key === 'ArrowRight') {\n    nextPos = findNextCharacterPosition(root, focusNode, focusOffset);\n  } else if (key === 'Home') {\n    nextPos = findFirstCharacterPosition(root);\n  } else if (key === 'End') {\n    nextPos = findLastCharacterPosition(root);\n  }\n  if (nextPos) {\n    selection.extend(nextPos.node, nextPos.offset);\n  }\n}\n\n/**\n * Helper function that allows to expand the selection to the entire range.\n * @internal\n */\nexport function extendSelectionToAll(): void {\n  const selection = window.getSelection();\n  if (\n    selection === null ||\n    selection.focusNode === null ||\n    selection.rangeCount < 1\n  ) {\n    return;\n  }\n\n  const focusNode = selection.focusNode;\n\n  const root =\n    focusNode.parentElement?.closest<HTMLDivElement>('.strato-inputgroup');\n  if (root === null || root === undefined) {\n    return;\n  }\n  const firstPosition = findFirstCharacterPosition(root);\n  const lastPosition = findLastCharacterPosition(root);\n  if (firstPosition && lastPosition) {\n    selection.setBaseAndExtent(\n      firstPosition.node,\n      firstPosition.offset,\n      lastPosition.node,\n      lastPosition.offset,\n    );\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,94 @@
+import {
+  useCallback,
+  useRef
+} from "react";
+import {
+  extendSelection,
+  extendSelectionToAll,
+  removeContentEditable
+} from "./selection-helpers.js";
+function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput) {
+  const onMouseDown = useCallback(
+    (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      window.getSelection()?.removeAllRanges();
+      const root = event.currentTarget;
+      const triggerElement = event.target;
+      if (root) {
+        removeContentEditable(
+          root,
+          document,
+          "mouseup",
+          (event2, hasMultiElementSelection) => {
+            if (!hasMultiElementSelection && event2.target instanceof HTMLElement && event2.target === triggerElement) {
+              if (event2.target.hasAttribute("contenteditable")) {
+                event2.target.focus();
+              } else {
+                onFocusInput();
+              }
+            }
+          }
+        );
+      }
+    },
+    [onFocusInput]
+  );
+  const hasContentEditableKeyRemoved = useRef(false);
+  const onKeyDown = useCallback(
+    (event) => {
+      const userAgent = navigator.userAgent.toLowerCase();
+      const isMac = userAgent.includes("mac");
+      const hasModifierKey = isMac ? event.metaKey === true : event.ctrlKey === true;
+      if (event.key === "Shift" || event.key === "Control" || event.key === "Command") {
+        event.preventDefault();
+        return;
+      }
+      function removeContentEditableIfNeeded() {
+        if (hasContentEditableKeyRemoved.current === false) {
+          hasContentEditableKeyRemoved.current = true;
+          removeContentEditable(
+            event.currentTarget,
+            event.currentTarget,
+            "keyup",
+            () => hasContentEditableKeyRemoved.current = false
+          );
+        }
+      }
+      if (hasModifierKey && event.key === "c") {
+        removeContentEditable(
+          event.currentTarget,
+          event.currentTarget,
+          "keyup"
+        );
+        return;
+      }
+      if (hasModifierKey && event.key === "a") {
+        event.preventDefault();
+        if (event.currentTarget instanceof HTMLElement) {
+          removeContentEditableIfNeeded();
+          extendSelectionToAll();
+        }
+        return;
+      }
+      if (event.shiftKey === true && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End")) {
+        event.preventDefault();
+        if (event.currentTarget instanceof HTMLElement) {
+          removeContentEditableIfNeeded();
+          extendSelection(event.key);
+        }
+        return;
+      }
+      if (event.target === touchedContainerRef.current) {
+        onFocusInput();
+      }
+    },
+    [onFocusInput, touchedContainerRef]
+  );
+  return { onMouseDown, onKeyDown };
+}
+export {
+  useSelectionInteractionHandlers
+};
+//# sourceMappingURL=useSelectionInteractionHandlers.js.map

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

@@ -0,0 +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;",
+  "names": ["event"]
+}

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

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

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

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

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

@@ -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-1-3';\nexport var legend = '_1dphm0f1-3-1-3';"],
+  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-2-0';\nexport var legend = '_1dphm0f1-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,SAAS;",
   "names": []
 }

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

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

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

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

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

@@ -1,17 +1,17 @@
-._16z6rg10-3-1-3 {
+._16z6rg10-3-2-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-1-3 {
+._16z6rg11-3-2-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-1-3 {
+._16z6rg12-3-2-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-1-3 {
+._16z6rg13-3-2-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-1-3 {
+._16z6rg14-3-2-0 {
   min-width: 0;
   overflow-wrap: break-word;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/label/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var LabelCSS = _7a468({defaultClassName:'_1gxatyo0-3-1-3',variantClassNames:{disabled:{true:'_1gxatyo1-3-1-3'},required:{true:'_1gxatyo2-3-1-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "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:[]});"],
   "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/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-1-3 {
+@keyframes _yfwka31-3-2-0 {
 
 }
-@keyframes _yfwka32-3-1-3 {
+@keyframes _yfwka32-3-2-0 {
 
 }
-._yfwka33-3-1-3:-webkit-autofill:is(._yfwka33-3-1-3,:hover,:focus) {
+._yfwka33-3-2-0:-webkit-autofill:is(._yfwka33-3-2-0,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-1-3) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-2-0) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-1-3:-webkit-autofill {
-  animation-name: _yfwka31-3-1-3;
+._yfwka33-3-2-0:-webkit-autofill {
+  animation-name: _yfwka31-3-2-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-1-3:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-1-3;
+._yfwka33-3-2-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-2-0;
   animation-duration: 0.001s;
 }
 input:-webkit-autofill::spelling-error {

package/esm/forms/hooks/useAutofillEvent.sty.js

@@ -1,8 +1,8 @@
 import "./useAutofillEvent.css";
-var autofillBackground = "var(--_yfwka30-3-1-3)";
-var autofillCSS = "_yfwka33-3-1-3";
-var end = "_yfwka32-3-1-3";
-var start = "_yfwka31-3-1-3";
+var autofillBackground = "var(--_yfwka30-3-2-0)";
+var autofillCSS = "_yfwka33-3-2-0";
+var end = "_yfwka32-3-2-0";
+var start = "_yfwka31-3-2-0";
 export {
   autofillBackground,
   autofillCSS,

package/esm/forms/hooks/useAutofillEvent.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/hooks/useAutofillEvent.css.ts"],
-  "sourcesContent": ["import './useAutofillEvent.css';\nexport var autofillBackground = 'var(--_yfwka30-3-1-3)';\nexport var autofillCSS = '_yfwka33-3-1-3';\nexport var end = '_yfwka32-3-1-3';\nexport var start = '_yfwka31-3-1-3';"],
+  "sourcesContent": ["import './useAutofillEvent.css';\nexport var autofillBackground = 'var(--_yfwka30-3-2-0)';\nexport var autofillCSS = '_yfwka33-3-2-0';\nexport var end = '_yfwka32-3-2-0';\nexport var start = '_yfwka31-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,cAAc;AAClB,IAAI,MAAM;AACV,IAAI,QAAQ;",
   "names": []
 }

package/esm/forms/number-input-v2/NumberInput.js

@@ -9,13 +9,13 @@ import {
 } from "react";
 import { getRegionalFormat } from "@dynatrace-sdk/user-preferences";
 import { applyStep } from "./utils/calculations.js";
+import { useId } from "../../core/hooks/useId.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
-import { useId } from "../../core/index.js";
 import { BaseInput } from "../_base-input/BaseInput.js";
 import { BaseInputButton } from "../_base-input/BaseInputButton.js";
+import { checkFormat, parseNumber } from "./utils/format.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
-import { checkFormat, parseNumber } from "./utils/format.js";
 import { addError, getErrorKey } from "./utils/validation.js";
 import {
   BaseInputPrefix,

package/esm/forms/number-input-v2/NumberInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/number-input-v2/NumberInput.tsx"],
-  "sourcesContent": ["import {\n  type ChangeEvent as ReactChangeEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { getRegionalFormat } from '@dynatrace-sdk/user-preferences';\n\nimport { applyStep } from './utils/calculations.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useId } from '../../core/index.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { checkFormat, parseNumber } from './utils/format.js';\nimport { addError, getErrorKey } from './utils/validation.js';\nimport {\n  BaseInputPrefix,\n  BaseInputSuffix,\n} from '../_base-input/BaseInputContent.js';\n\nconst COMPONENT_NAME = 'NumberInput';\n// Matches a fully valid number: optional sign, integer digits, optional decimal part, optional scientific notation (e.g. \"-1.5e+3\")\nconst VALID_PATTERN = '^[+\\\\-]?\\\\d+(?:[\\\\.,]\\\\d+)?(?:[eE][+\\\\-]?\\\\d+)?$';\nconst VALID_REGEXP = new RegExp(VALID_PATTERN);\n// Matches a number that may use any locale's grouping/decimal separators (spaces, dots, commas, Arabic/Unicode variants)\n// \u2014 used to detect paste-formatted input that can be normalized\nconst FORMATTABLE_PATTERN =\n  /^[-+]?[\\d.,'\\u2019 \u066B\u066C\\u00A0\\u1680\\u2000-\\u200A\\u202F\\u205F\\u3000]+(?:[eE][-+]?\\d+)?$/u;\n// Matches a number that is syntactically incomplete but still being typed:\n// digits and separators are optional so intermediate states like \"-\", \"1.\", \"1.5e\" are allowed without rejecting the input\nconst INTERMEDIATE_VALID_PATTERN = /^[+-]?\\d*(?:[.,]\\d*)?(?:[eE][+-]?\\d*)?$/;\n\n// #region Typings\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nexport type NumberInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'variant'\n  | 'onKeyUp'\n  | 'onKeyDown'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<number | null, (value: number | null) => void> &\n  PropsWithChildren &\n  FocusEvents & {\n    /** Minimum amount of the input.\n     * @defaultValue undefined */\n    min?: number;\n    /** Maximum amount of the input.\n     * @defaultValue undefined */\n    max?: number;\n    /** Defines the step in which increments/decrements can be performed on the input and validates the value.\n     * Must be a positive number greater than 0. Values that are negative, zero, NaN, or undefined default to 1.\n     * @defaultValue undefined */\n    step?: number;\n    /** Multiplier applied to `step` (or 1 if no `step` is set) to determine how much the value changes\n     * when using arrow keys or the scroll wheel. Must be a positive integer greater than 0.\n     * Values that are negative, zero, NaN, or undefined default to 1. Decimal values are truncated to the nearest integer.\n     * @defaultValue 1 */\n    stepMultiplier?: number;\n  };\n\n// #endregion\n\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nconst NumberInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  NumberInputProps\n>((props, forwardedRef) => {\n  const {\n    onChange,\n    onKeyDown,\n    value: propValue,\n    defaultValue,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    min,\n    max,\n    step,\n    stepMultiplier = 1,\n    ...remainingProps\n  }: NumberInputProps = props;\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const errorId = useId();\n  const isPasted = useRef<boolean>(false);\n  const isInternalChanged = useRef<boolean>(defaultValue !== undefined);\n\n  const internalRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const inputRef = useMergeRefs([forwardedRef, internalRef]);\n\n  const [internalValue, setInternalValue] = useState<string | number | null>(\n    defaultValue ?? propValue ?? null,\n  );\n\n  // Programmatically sets the DOM input value and optionally notifies consumers.\n  // Uses the native prototype setter so React's internal value tracker stays in sync.\n  const setValueNative = useCallback(\n    (newValue: number | string | null, triggerChange: boolean = true) => {\n      const input = internalRef.current?.inputRef;\n      if (input) {\n        let stringValue: string;\n        if (newValue === null) {\n          stringValue = '';\n        } else if (typeof newValue === 'number') {\n          stringValue = new Intl.NumberFormat(getRegionalFormat(), {\n            useGrouping: false,\n            maximumFractionDigits: 17,\n          }).format(newValue);\n        } else {\n          stringValue = String(newValue);\n        }\n        const desc = Object.getOwnPropertyDescriptor(\n          HTMLInputElement.prototype,\n          'value',\n        );\n        desc?.set?.call(input, stringValue);\n        input.value = stringValue;\n        if (triggerChange) {\n          const parsedValue = checkFormat(stringValue);\n          isInternalChanged.current = true;\n          setInternalValue(parsedValue || stringValue);\n          if (VALID_REGEXP.exec(parsedValue)) {\n            onChange?.(parseNumber(parsedValue));\n          } else if (parsedValue === '') {\n            onChange?.(null);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  // Caching the value to keep not valid states in the input\n  const value = useMemo<string | number | null>(() => {\n    const isChanged = isInternalChanged.current;\n    isInternalChanged.current = false;\n\n    if (isChanged) {\n      return internalValue;\n    }\n\n    if (!propValue && propValue !== 0) {\n      return '';\n    }\n\n    const formattedPropValue = new Intl.NumberFormat(getRegionalFormat(), {\n      useGrouping: false,\n      maximumFractionDigits: 17, // Max precision for a JS number\n    }).format(propValue);\n\n    return formattedPropValue;\n  }, [propValue, internalValue]);\n\n  const handleChange = useCallback(\n    (e: ReactChangeEvent<HTMLInputElement>) => {\n      const parsedValue = checkFormat(e.target.value);\n\n      if (VALID_REGEXP.exec(parsedValue)) {\n        onChange?.(parseNumber(parsedValue));\n      }\n\n      if (parsedValue === '') {\n        onChange?.(null);\n      }\n\n      if (isPasted.current && FORMATTABLE_PATTERN.exec(parsedValue)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n        setValueNative(parsedValue, false);\n      } else if (INTERMEDIATE_VALID_PATTERN.exec(e.target.value)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n      } else {\n        setValueNative(value ?? '', false);\n      }\n      isPasted.current = false;\n    },\n    [onChange, setInternalValue, value, setValueNative],\n  );\n\n  // Handling step changes with buttons, keyboard and wheel\n  const handleStep = useCallback(\n    (direction: 1 | -1) => {\n      setValueNative(\n        applyStep(value, step, stepMultiplier, min, max, direction),\n      );\n    },\n    [value, stepMultiplier, step, min, max, setValueNative],\n  );\n\n  // Handling keyboard input for step changes and home/end keys\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        onKeyDown?.(e);\n        return;\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        handleStep(+1);\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        handleStep(-1);\n      }\n\n      if (e.key === 'Home' && min !== undefined) {\n        e.preventDefault();\n        setValueNative(min);\n      }\n\n      if (e.key === 'End' && max !== undefined) {\n        e.preventDefault();\n        setValueNative(max);\n      }\n      onKeyDown?.(e);\n    },\n    [handleStep, onKeyDown, setValueNative, min, max, readOnly],\n  );\n\n  // Handling wheel input\n  useEffect(() => {\n    const el = internalRef?.current;\n\n    if (!el) {\n      return;\n    }\n\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== e.target) {\n        return;\n      }\n      e.preventDefault();\n      handleStep(e.deltaY < 0 ? +1 : -1);\n    };\n\n    // Passive event listeners do not work, because the default action needs to be prevented\n    // so we need to explicitly set passive to false\n    el.element?.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.element?.removeEventListener('wheel', onWheel);\n  }, [handleStep]);\n\n  // Validating the native number input props manually, as we need to use a type=\"text\" input and can't rely on the native checks.\n  // We can't use type=\"number\" because it doesn't support all the formatting and localization features we need.\n  useEffect(() => {\n    if (!value && value !== 0) {\n      return;\n    }\n\n    const errorMessage = getErrorKey(value, min, max, step);\n    if (errorMessage) {\n      addError(errorMessage, errorId, internalRef.current?.inputRef, dispatch);\n      return;\n    }\n\n    dispatch?.({\n      type: FormFieldMessagesAction.REMOVEMESSAGE,\n      payload: {\n        id: errorId,\n        messageType: 'formcontrol',\n      },\n    });\n  }, [\n    value,\n    min,\n    max,\n    step,\n    state.isTouched,\n    state.isValid,\n    dispatch,\n    errorId,\n  ]);\n\n  return (\n    <BaseInput\n      ref={inputRef}\n      {...remainingProps}\n      type=\"text\"\n      inputMode=\"decimal\"\n      autoComplete=\"off\"\n      value={value ?? ''}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onPaste={() => (isPasted.current = true)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      min={min}\n      max={max}\n      step={step}\n      pattern={VALID_PATTERN}\n    />\n  );\n});\n\n/**\n * Use the `NumberInput` component to enter integers and floating-point numbers.\n * @public\n */\nexport const NumberInput = Object.assign(NumberInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(NumberInput as typeof NumberInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ChangeEvent as ReactChangeEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { getRegionalFormat } from '@dynatrace-sdk/user-preferences';\n\nimport { applyStep } from './utils/calculations.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport { checkFormat, parseNumber } from './utils/format.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { addError, getErrorKey } from './utils/validation.js';\nimport {\n  BaseInputPrefix,\n  BaseInputSuffix,\n} from '../_base-input/BaseInputContent.js';\n\nconst COMPONENT_NAME = 'NumberInput';\n// Matches a fully valid number: optional sign, integer digits, optional decimal part, optional scientific notation (e.g. \"-1.5e+3\")\nconst VALID_PATTERN = '^[+\\\\-]?\\\\d+(?:[\\\\.,]\\\\d+)?(?:[eE][+\\\\-]?\\\\d+)?$';\nconst VALID_REGEXP = new RegExp(VALID_PATTERN);\n// Matches a number that may use any locale's grouping/decimal separators (spaces, dots, commas, Arabic/Unicode variants)\n// \u2014 used to detect paste-formatted input that can be normalized\nconst FORMATTABLE_PATTERN =\n  /^[-+]?[\\d.,'\\u2019 \u066B\u066C\\u00A0\\u1680\\u2000-\\u200A\\u202F\\u205F\\u3000]+(?:[eE][-+]?\\d+)?$/u;\n// Matches a number that is syntactically incomplete but still being typed:\n// digits and separators are optional so intermediate states like \"-\", \"1.\", \"1.5e\" are allowed without rejecting the input\nconst INTERMEDIATE_VALID_PATTERN = /^[+-]?\\d*(?:[.,]\\d*)?(?:[eE][+-]?\\d*)?$/;\n\n// #region Typings\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nexport type NumberInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'variant'\n  | 'onKeyUp'\n  | 'onKeyDown'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<number | null, (value: number | null) => void> &\n  PropsWithChildren &\n  FocusEvents & {\n    /** Minimum amount of the input.\n     * @defaultValue undefined */\n    min?: number;\n    /** Maximum amount of the input.\n     * @defaultValue undefined */\n    max?: number;\n    /** Defines the step in which increments/decrements can be performed on the input and validates the value.\n     * Must be a positive number greater than 0. Values that are negative, zero, NaN, or undefined default to 1.\n     * @defaultValue undefined */\n    step?: number;\n    /** Multiplier applied to `step` (or 1 if no `step` is set) to determine how much the value changes\n     * when using arrow keys or the scroll wheel. Must be a positive integer greater than 0.\n     * Values that are negative, zero, NaN, or undefined default to 1. Decimal values are truncated to the nearest integer.\n     * @defaultValue 1 */\n    stepMultiplier?: number;\n  };\n\n// #endregion\n\n/**\n * Number inputs let users enter and edit integers and floating-point numbers.\n * @public\n */\nconst NumberInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  NumberInputProps\n>((props, forwardedRef) => {\n  const {\n    onChange,\n    onKeyDown,\n    value: propValue,\n    defaultValue,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    min,\n    max,\n    step,\n    stepMultiplier = 1,\n    ...remainingProps\n  }: NumberInputProps = props;\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n  const errorId = useId();\n  const isPasted = useRef<boolean>(false);\n  const isInternalChanged = useRef<boolean>(defaultValue !== undefined);\n\n  const internalRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const inputRef = useMergeRefs([forwardedRef, internalRef]);\n\n  const [internalValue, setInternalValue] = useState<string | number | null>(\n    defaultValue ?? propValue ?? null,\n  );\n\n  // Programmatically sets the DOM input value and optionally notifies consumers.\n  // Uses the native prototype setter so React's internal value tracker stays in sync.\n  const setValueNative = useCallback(\n    (newValue: number | string | null, triggerChange: boolean = true) => {\n      const input = internalRef.current?.inputRef;\n      if (input) {\n        let stringValue: string;\n        if (newValue === null) {\n          stringValue = '';\n        } else if (typeof newValue === 'number') {\n          stringValue = new Intl.NumberFormat(getRegionalFormat(), {\n            useGrouping: false,\n            maximumFractionDigits: 17,\n          }).format(newValue);\n        } else {\n          stringValue = String(newValue);\n        }\n        const desc = Object.getOwnPropertyDescriptor(\n          HTMLInputElement.prototype,\n          'value',\n        );\n        desc?.set?.call(input, stringValue);\n        input.value = stringValue;\n        if (triggerChange) {\n          const parsedValue = checkFormat(stringValue);\n          isInternalChanged.current = true;\n          setInternalValue(parsedValue || stringValue);\n          if (VALID_REGEXP.exec(parsedValue)) {\n            onChange?.(parseNumber(parsedValue));\n          } else if (parsedValue === '') {\n            onChange?.(null);\n          }\n        }\n      }\n    },\n    [onChange],\n  );\n\n  // Caching the value to keep not valid states in the input\n  const value = useMemo<string | number | null>(() => {\n    const isChanged = isInternalChanged.current;\n    isInternalChanged.current = false;\n\n    if (isChanged) {\n      return internalValue;\n    }\n\n    if (!propValue && propValue !== 0) {\n      return '';\n    }\n\n    const formattedPropValue = new Intl.NumberFormat(getRegionalFormat(), {\n      useGrouping: false,\n      maximumFractionDigits: 17, // Max precision for a JS number\n    }).format(propValue);\n\n    return formattedPropValue;\n  }, [propValue, internalValue]);\n\n  const handleChange = useCallback(\n    (e: ReactChangeEvent<HTMLInputElement>) => {\n      const parsedValue = checkFormat(e.target.value);\n\n      if (VALID_REGEXP.exec(parsedValue)) {\n        onChange?.(parseNumber(parsedValue));\n      }\n\n      if (parsedValue === '') {\n        onChange?.(null);\n      }\n\n      if (isPasted.current && FORMATTABLE_PATTERN.exec(parsedValue)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n        setValueNative(parsedValue, false);\n      } else if (INTERMEDIATE_VALID_PATTERN.exec(e.target.value)) {\n        isInternalChanged.current = true;\n        setInternalValue(parsedValue);\n      } else {\n        setValueNative(value ?? '', false);\n      }\n      isPasted.current = false;\n    },\n    [onChange, setInternalValue, value, setValueNative],\n  );\n\n  // Handling step changes with buttons, keyboard and wheel\n  const handleStep = useCallback(\n    (direction: 1 | -1) => {\n      setValueNative(\n        applyStep(value, step, stepMultiplier, min, max, direction),\n      );\n    },\n    [value, stepMultiplier, step, min, max, setValueNative],\n  );\n\n  // Handling keyboard input for step changes and home/end keys\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        onKeyDown?.(e);\n        return;\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        handleStep(+1);\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        handleStep(-1);\n      }\n\n      if (e.key === 'Home' && min !== undefined) {\n        e.preventDefault();\n        setValueNative(min);\n      }\n\n      if (e.key === 'End' && max !== undefined) {\n        e.preventDefault();\n        setValueNative(max);\n      }\n      onKeyDown?.(e);\n    },\n    [handleStep, onKeyDown, setValueNative, min, max, readOnly],\n  );\n\n  // Handling wheel input\n  useEffect(() => {\n    const el = internalRef?.current;\n\n    if (!el) {\n      return;\n    }\n\n    const onWheel = (e: WheelEvent) => {\n      if (document.activeElement !== e.target) {\n        return;\n      }\n      e.preventDefault();\n      handleStep(e.deltaY < 0 ? +1 : -1);\n    };\n\n    // Passive event listeners do not work, because the default action needs to be prevented\n    // so we need to explicitly set passive to false\n    el.element?.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.element?.removeEventListener('wheel', onWheel);\n  }, [handleStep]);\n\n  // Validating the native number input props manually, as we need to use a type=\"text\" input and can't rely on the native checks.\n  // We can't use type=\"number\" because it doesn't support all the formatting and localization features we need.\n  useEffect(() => {\n    if (!value && value !== 0) {\n      return;\n    }\n\n    const errorMessage = getErrorKey(value, min, max, step);\n    if (errorMessage) {\n      addError(errorMessage, errorId, internalRef.current?.inputRef, dispatch);\n      return;\n    }\n\n    dispatch?.({\n      type: FormFieldMessagesAction.REMOVEMESSAGE,\n      payload: {\n        id: errorId,\n        messageType: 'formcontrol',\n      },\n    });\n  }, [\n    value,\n    min,\n    max,\n    step,\n    state.isTouched,\n    state.isValid,\n    dispatch,\n    errorId,\n  ]);\n\n  return (\n    <BaseInput\n      ref={inputRef}\n      {...remainingProps}\n      type=\"text\"\n      inputMode=\"decimal\"\n      autoComplete=\"off\"\n      value={value ?? ''}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onPaste={() => (isPasted.current = true)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      min={min}\n      max={max}\n      step={step}\n      pattern={VALID_PATTERN}\n    />\n  );\n});\n\n/**\n * Use `NumberInputV2` to let users enter integers and floating-point numbers.\n * @public\n */\nexport const NumberInput = Object.assign(NumberInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(NumberInput as typeof NumberInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AA+SI;AA/SJ;AAAA,EAEE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAElC,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAI7B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,aAAa,mBAAmB;AACzC,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AAExC,SAAS,UAAU,mBAAmB;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,MAAM,iBAAiB;AAEvB,MAAM,gBAAgB;AACtB,MAAM,eAAe,IAAI,OAAO,aAAa;AAG7C,MAAM,sBACJ;AAGF,MAAM,6BAA6B;AA6CnC,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAsB;AAEtB,QAAM,EAAE,OAAO,SAAS,IAAI,4BAA4B;AACxD,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,OAAgB,KAAK;AACtC,QAAM,oBAAoB,OAAgB,iBAAiB,MAAS;AAEpE,QAAM,cAAc,OAAuC,IAAI;AAC/D,QAAM,WAAW,aAAa,CAAC,cAAc,WAAW,CAAC;AAEzD,QAAM,CAAC,eAAe,gBAAgB,IAAI;AAAA,IACxC,gBAAgB,aAAa;AAAA,EAC/B;AAIA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC,gBAAyB,SAAS;AACnE,YAAM,QAAQ,YAAY,SAAS;AACnC,UAAI,OAAO;AACT,YAAI;AACJ,YAAI,aAAa,MAAM;AACrB,wBAAc;AAAA,QAChB,WAAW,OAAO,aAAa,UAAU;AACvC,wBAAc,IAAI,KAAK,aAAa,kBAAkB,GAAG;AAAA,YACvD,aAAa;AAAA,YACb,uBAAuB;AAAA,UACzB,CAAC,EAAE,OAAO,QAAQ;AAAA,QACpB,OAAO;AACL,wBAAc,OAAO,QAAQ;AAAA,QAC/B;AACA,cAAM,OAAO,OAAO;AAAA,UAClB,iBAAiB;AAAA,UACjB;AAAA,QACF;AACA,cAAM,KAAK,KAAK,OAAO,WAAW;AAClC,cAAM,QAAQ;AACd,YAAI,eAAe;AACjB,gBAAM,cAAc,YAAY,WAAW;AAC3C,4BAAkB,UAAU;AAC5B,2BAAiB,eAAe,WAAW;AAC3C,cAAI,aAAa,KAAK,WAAW,GAAG;AAClC,uBAAW,YAAY,WAAW,CAAC;AAAA,UACrC,WAAW,gBAAgB,IAAI;AAC7B,uBAAW,IAAI;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAGA,QAAM,QAAQ,QAAgC,MAAM;AAClD,UAAM,YAAY,kBAAkB;AACpC,sBAAkB,UAAU;AAE5B,QAAI,WAAW;AACb,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,aAAa,cAAc,GAAG;AACjC,aAAO;AAAA,IACT;AAEA,UAAM,qBAAqB,IAAI,KAAK,aAAa,kBAAkB,GAAG;AAAA,MACpE,aAAa;AAAA,MACb,uBAAuB;AAAA;AAAA,IACzB,CAAC,EAAE,OAAO,SAAS;AAEnB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,aAAa,CAAC;AAE7B,QAAM,eAAe;AAAA,IACnB,CAAC,MAA0C;AACzC,YAAM,cAAc,YAAY,EAAE,OAAO,KAAK;AAE9C,UAAI,aAAa,KAAK,WAAW,GAAG;AAClC,mBAAW,YAAY,WAAW,CAAC;AAAA,MACrC;AAEA,UAAI,gBAAgB,IAAI;AACtB,mBAAW,IAAI;AAAA,MACjB;AAEA,UAAI,SAAS,WAAW,oBAAoB,KAAK,WAAW,GAAG;AAC7D,0BAAkB,UAAU;AAC5B,yBAAiB,WAAW;AAC5B,uBAAe,aAAa,KAAK;AAAA,MACnC,WAAW,2BAA2B,KAAK,EAAE,OAAO,KAAK,GAAG;AAC1D,0BAAkB,UAAU;AAC5B,yBAAiB,WAAW;AAAA,MAC9B,OAAO;AACL,uBAAe,SAAS,IAAI,KAAK;AAAA,MACnC;AACA,eAAS,UAAU;AAAA,IACrB;AAAA,IACA,CAAC,UAAU,kBAAkB,OAAO,cAAc;AAAA,EACpD;AAGA,QAAM,aAAa;AAAA,IACjB,CAAC,cAAsB;AACrB;AAAA,QACE,UAAU,OAAO,MAAM,gBAAgB,KAAK,KAAK,SAAS;AAAA,MAC5D;AAAA,IACF;AAAA,IACA,CAAC,OAAO,gBAAgB,MAAM,KAAK,KAAK,cAAc;AAAA,EACxD;AAGA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAuC;AACtC,UAAI,UAAU;AACZ,oBAAY,CAAC;AACb;AAAA,MACF;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,mBAAW,CAAE;AAAA,MACf;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,mBAAW,EAAE;AAAA,MACf;AAEA,UAAI,EAAE,QAAQ,UAAU,QAAQ,QAAW;AACzC,UAAE,eAAe;AACjB,uBAAe,GAAG;AAAA,MACpB;AAEA,UAAI,EAAE,QAAQ,SAAS,QAAQ,QAAW;AACxC,UAAE,eAAe;AACjB,uBAAe,GAAG;AAAA,MACpB;AACA,kBAAY,CAAC;AAAA,IACf;AAAA,IACA,CAAC,YAAY,WAAW,gBAAgB,KAAK,KAAK,QAAQ;AAAA,EAC5D;AAGA,YAAU,MAAM;AACd,UAAM,KAAK,aAAa;AAExB,QAAI,CAAC,IAAI;AACP;AAAA,IACF;AAEA,UAAM,UAAU,CAAC,MAAkB;AACjC,UAAI,SAAS,kBAAkB,EAAE,QAAQ;AACvC;AAAA,MACF;AACA,QAAE,eAAe;AACjB,iBAAW,EAAE,SAAS,IAAI,IAAK,EAAE;AAAA,IACnC;AAIA,OAAG,SAAS,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACjE,WAAO,MAAM,GAAG,SAAS,oBAAoB,SAAS,OAAO;AAAA,EAC/D,GAAG,CAAC,UAAU,CAAC;AAIf,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,UAAU,GAAG;AACzB;AAAA,IACF;AAEA,UAAM,eAAe,YAAY,OAAO,KAAK,KAAK,IAAI;AACtD,QAAI,cAAc;AAChB,eAAS,cAAc,SAAS,YAAY,SAAS,UAAU,QAAQ;AACvE;AAAA,IACF;AAEA,eAAW;AAAA,MACT,MAAM,wBAAwB;AAAA,MAC9B,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,WAAU;AAAA,MACV,cAAa;AAAA,MACb,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS,MAAO,SAAS,UAAU;AAAA,MACnC,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,iBAAe;AAAA,MACf,qBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA,EACX;AAEJ,CAAC;AAMM,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV,CAAC;AAEA,YAA6D,cAC5D;",
   "names": []
 }

package/esm/forms/password-input/PasswordInput.css

@@ -1,4 +1,4 @@
-._1ah2tn00-3-1-3 {
+._1ah2tn00-3-2-0 {
   cursor: not-allowed;
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }

package/esm/forms/password-input/PasswordInput.js

@@ -69,6 +69,7 @@ const PasswordInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   });
   const showTooltipText = showText ?? showTooltipDefaultText;
   const hideTooltipText = hideText ?? hideTooltipDefaultText;
+  const dataDtName = hidden ? "ShowPassword" : "HidePassword";
   return /* @__PURE__ */ jsx(
     BaseInput,
     {
@@ -97,6 +98,7 @@ const PasswordInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
           "aria-label": hidden ? showTooltipText : hideTooltipText,
           id: remainingTooltipProps.id,
           "aria-disabled": ariaDisabledProp,
+          "data-dt-name": dataDtName,
           children: hidden ? /* @__PURE__ */ jsx(ViewIcon, {}) : /* @__PURE__ */ jsx(ViewOffIcon, {})
         }
       ) })

package/esm/forms/password-input/PasswordInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/password-input/PasswordInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type ReactNode,\n  forwardRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon, ViewOffIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './PasswordInput.sty.js';\nimport {\n  PasswordInputTooltip,\n  type PasswordInputTooltipProps,\n} from './PasswordInputTooltip.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport type { FormControlRef } from '../shared-types.js';\nconst COMPONENT_NAME = 'PasswordInput';\n\n//#region Typings\n/**\n * The properties of the PasswordInput component.\n * @public\n */\nexport type PasswordInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'autoComplete'\n  | 'minLength'\n  | 'maxLength'\n  | 'pattern'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<\n    string,\n    (value: string, event?: ChangeEvent<HTMLInputElement>) => void\n  > &\n  WithChildren;\n\ntype PasswordInputSlots = {\n  tooltip: ReactElement<PasswordInputTooltipProps> | null;\n};\n//#endregion Typings\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getTooltipSlot(children: ReactNode) {\n  const slots: PasswordInputSlots = {\n    tooltip: null,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, PasswordInputTooltip)) {\n      slots.tooltip = child;\n    } else if (child !== null) {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the PasswordInput.');\n    }\n  }\n\n  return slots;\n}\n\nconst PasswordInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  PasswordInputProps\n>((props, forwardedRef) => {\n  const {\n    onChange,\n    name,\n    readOnly = false,\n    controlState,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    defaultValue,\n    value,\n    ...remainingProps\n  }: PasswordInputProps = props;\n\n  const [hidden, setHidden] = useState(true);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n  });\n\n  const onInternalChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value, event);\n    setInternalValue(event.target.value);\n  };\n\n  const { tooltip } = getTooltipSlot(children);\n  const { showText, hideText, ...remainingTooltipProps } = tooltip?.props ?? {};\n\n  const intl = useIntl();\n  const showTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Show password',\n    id: 'tgL6QEjmq+ArASFk',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to show the password',\n  });\n  const hideTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Hide password',\n    id: 'vMt3ZRHwBods5xzM',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to hide the password',\n  });\n\n  const showTooltipText = showText ?? showTooltipDefaultText;\n  const hideTooltipText = hideText ?? hideTooltipDefaultText;\n\n  return (\n    <BaseInput\n      {...remainingProps}\n      value={internalValue}\n      role=\"textbox\"\n      controlState={controlState}\n      name={name}\n      type={hidden ? 'password' : 'text'}\n      onChange={onInternalChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      readOnly={readOnly}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <BaseInput.Suffix>\n        <BaseInput.Button\n          onClick={() => setHidden(!hidden)}\n          className={clsx({ [styles.readOnly]: readOnly })}\n          tooltipText={hidden ? showTooltipText : hideTooltipText}\n          aria-label={hidden ? showTooltipText : hideTooltipText}\n          id={remainingTooltipProps.id}\n          aria-disabled={ariaDisabledProp}\n        >\n          {hidden ? <ViewIcon /> : <ViewOffIcon />}\n        </BaseInput.Button>\n      </BaseInput.Suffix>\n    </BaseInput>\n  );\n});\n\n/**\n * The `PasswordInput` component can be used to hide user input.\n * Always use a `PasswordInput` when your app asks for sensitive data,\n * such as a password. Users can click on the eye icon to hide or show their data.\n * @public\n */\nexport const PasswordInput = Object.assign(PasswordInputRoot, {\n  Tooltip: PasswordInputTooltip,\n});\n\n(PasswordInput as typeof PasswordInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAgKoB;AAhKpB,OAAO,UAAU;AACjB;AAAA,EAGE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,UAAU,mBAAmB;AAEtC,YAAY,YAAY;AACxB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,4BAA4B;AAGrC,SAAS,cAAc;AAEvB,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAoCvB,SAAS,eAAe,UAAqB;AAC3C,QAAM,QAA4B;AAAA,IAChC,SAAS;AAAA,EACX;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,oBAAoB,GAAG;AACvC,YAAM,UAAU;AAAA,IAClB,WAAW,UAAU,MAAM;AAGzB,cAAQ,KAAK,uDAAuD;AAAA,IACtE;AAAA,EACF;AAEA,SAAO;AACT;AAEA,MAAM,oBAAoC,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAwB;AAExB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AAEzC,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,IAC7D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAmB,CAAC,UAAyC;AACjE,eAAW,MAAM,OAAO,OAAO,KAAK;AACpC,qBAAiB,MAAM,OAAO,KAAK;AAAA,EACrC;AAEA,QAAM,EAAE,QAAQ,IAAI,eAAe,QAAQ;AAC3C,QAAM,EAAE,UAAU,UAAU,GAAG,sBAAsB,IAAI,SAAS,SAAS,CAAC;AAE5E,QAAM,OAAO,QAAQ;AACrB,QAAM,yBAAyB,KAAK,cAAc;AAAA,IAChD,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AACD,QAAM,yBAAyB,KAAK,cAAc;AAAA,IAChD,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,kBAAkB,YAAY;AACpC,QAAM,kBAAkB,YAAY;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM,SAAS,aAAa;AAAA,MAC5B,UAAU;AAAA,MACV,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MACA,iBAAe;AAAA,MACf,qBAAmB;AAAA,MAEnB,8BAAC,UAAU,QAAV,EACC;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,UAChC,WAAW,KAAK,EAAE,CAAC,OAAO,QAAQ,GAAG,SAAS,CAAC;AAAA,UAC/C,aAAa,SAAS,kBAAkB;AAAA,UACxC,cAAY,SAAS,kBAAkB;AAAA,UACvC,IAAI,sBAAsB;AAAA,UAC1B,iBAAe;AAAA,UAEd,mBAAS,oBAAC,YAAS,IAAK,oBAAC,eAAY;AAAA;AAAA,MACxC,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAQM,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D,SAAS;AACX,CAAC;AAEA,cAAiE,cAChE;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type ReactNode,\n  forwardRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon, ViewOffIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './PasswordInput.sty.js';\nimport {\n  PasswordInputTooltip,\n  type PasswordInputTooltipProps,\n} from './PasswordInputTooltip.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport type { FormControlRef } from '../shared-types.js';\nconst COMPONENT_NAME = 'PasswordInput';\n\n//#region Typings\n/**\n * The properties of the PasswordInput component.\n * @public\n */\nexport type PasswordInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'autoComplete'\n  | 'minLength'\n  | 'maxLength'\n  | 'pattern'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<\n    string,\n    (value: string, event?: ChangeEvent<HTMLInputElement>) => void\n  > &\n  WithChildren;\n\ntype PasswordInputSlots = {\n  tooltip: ReactElement<PasswordInputTooltipProps> | null;\n};\n//#endregion Typings\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getTooltipSlot(children: ReactNode) {\n  const slots: PasswordInputSlots = {\n    tooltip: null,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, PasswordInputTooltip)) {\n      slots.tooltip = child;\n    } else if (child !== null) {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the PasswordInput.');\n    }\n  }\n\n  return slots;\n}\n\nconst PasswordInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  PasswordInputProps\n>((props, forwardedRef) => {\n  const {\n    onChange,\n    name,\n    readOnly = false,\n    controlState,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    defaultValue,\n    value,\n    ...remainingProps\n  }: PasswordInputProps = props;\n\n  const [hidden, setHidden] = useState(true);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n  });\n\n  const onInternalChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value, event);\n    setInternalValue(event.target.value);\n  };\n\n  const { tooltip } = getTooltipSlot(children);\n  const { showText, hideText, ...remainingTooltipProps } = tooltip?.props ?? {};\n\n  const intl = useIntl();\n  const showTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Show password',\n    id: 'tgL6QEjmq+ArASFk',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to show the password',\n  });\n  const hideTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Hide password',\n    id: 'vMt3ZRHwBods5xzM',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to hide the password',\n  });\n\n  const showTooltipText = showText ?? showTooltipDefaultText;\n  const hideTooltipText = hideText ?? hideTooltipDefaultText;\n  const dataDtName = hidden ? 'ShowPassword' : 'HidePassword';\n\n  return (\n    <BaseInput\n      {...remainingProps}\n      value={internalValue}\n      role=\"textbox\"\n      controlState={controlState}\n      name={name}\n      type={hidden ? 'password' : 'text'}\n      onChange={onInternalChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      readOnly={readOnly}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <BaseInput.Suffix>\n        <BaseInput.Button\n          onClick={() => setHidden(!hidden)}\n          className={clsx({ [styles.readOnly]: readOnly })}\n          tooltipText={hidden ? showTooltipText : hideTooltipText}\n          aria-label={hidden ? showTooltipText : hideTooltipText}\n          id={remainingTooltipProps.id}\n          aria-disabled={ariaDisabledProp}\n          data-dt-name={dataDtName}\n        >\n          {hidden ? <ViewIcon /> : <ViewOffIcon />}\n        </BaseInput.Button>\n      </BaseInput.Suffix>\n    </BaseInput>\n  );\n});\n\n/**\n * The `PasswordInput` component can be used to hide user input.\n * Always use a `PasswordInput` when your app asks for sensitive data,\n * such as a password. Users can click on the eye icon to hide or show their data.\n * @public\n */\nexport const PasswordInput = Object.assign(PasswordInputRoot, {\n  Tooltip: PasswordInputTooltip,\n});\n\n(PasswordInput as typeof PasswordInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAkKoB;AAlKpB,OAAO,UAAU;AACjB;AAAA,EAGE;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,UAAU,mBAAmB;AAEtC,YAAY,YAAY;AACxB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,4BAA4B;AAGrC,SAAS,cAAc;AAEvB,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAoCvB,SAAS,eAAe,UAAqB;AAC3C,QAAM,QAA4B;AAAA,IAChC,SAAS;AAAA,EACX;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,oBAAoB,GAAG;AACvC,YAAM,UAAU;AAAA,IAClB,WAAW,UAAU,MAAM;AAGzB,cAAQ,KAAK,uDAAuD;AAAA,IACtE;AAAA,EACF;AAEA,SAAO;AACT;AAEA,MAAM,oBAAoC,2BAGxC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAwB;AAExB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AAEzC,QAAM,CAAC,eAAe,gBAAgB,IAAI,qBAAqB;AAAA,IAC7D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAmB,CAAC,UAAyC;AACjE,eAAW,MAAM,OAAO,OAAO,KAAK;AACpC,qBAAiB,MAAM,OAAO,KAAK;AAAA,EACrC;AAEA,QAAM,EAAE,QAAQ,IAAI,eAAe,QAAQ;AAC3C,QAAM,EAAE,UAAU,UAAU,GAAG,sBAAsB,IAAI,SAAS,SAAS,CAAC;AAE5E,QAAM,OAAO,QAAQ;AACrB,QAAM,yBAAyB,KAAK,cAAc;AAAA,IAChD,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AACD,QAAM,yBAAyB,KAAK,cAAc;AAAA,IAChD,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,kBAAkB,YAAY;AACpC,QAAM,kBAAkB,YAAY;AACpC,QAAM,aAAa,SAAS,iBAAiB;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM,SAAS,aAAa;AAAA,MAC5B,UAAU;AAAA,MACV,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MACA,iBAAe;AAAA,MACf,qBAAmB;AAAA,MAEnB,8BAAC,UAAU,QAAV,EACC;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,UAChC,WAAW,KAAK,EAAE,CAAC,OAAO,QAAQ,GAAG,SAAS,CAAC;AAAA,UAC/C,aAAa,SAAS,kBAAkB;AAAA,UACxC,cAAY,SAAS,kBAAkB;AAAA,UACvC,IAAI,sBAAsB;AAAA,UAC1B,iBAAe;AAAA,UACf,gBAAc;AAAA,UAEb,mBAAS,oBAAC,YAAS,IAAK,oBAAC,eAAY;AAAA;AAAA,MACxC,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAQM,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D,SAAS;AACX,CAAC;AAEA,cAAiE,cAChE;",
   "names": []
 }

package/esm/forms/password-input/PasswordInput.sty.js

@@ -1,5 +1,5 @@
 import "./PasswordInput.css";
-var readOnly = "_1ah2tn00-3-1-3";
+var readOnly = "_1ah2tn00-3-2-0";
 export {
   readOnly
 };

package/esm/forms/password-input/PasswordInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/password-input/PasswordInput.css.ts"],
-  "sourcesContent": ["import './PasswordInput.css';\nexport var readOnly = '_1ah2tn00-3-1-3';"],
+  "sourcesContent": ["import './PasswordInput.css';\nexport var readOnly = '_1ah2tn00-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }