@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -1,4 +1,4 @@
-._1dphm0f0-3-4-0 {
+._1dphm0f0-3-5-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-4-0 {
+._1dphm0f1-3-5-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-4-0";
-var legend = "_1dphm0f1-3-4-0";
+var fieldset = "_1dphm0f0-3-5-0";
+var legend = "_1dphm0f1-3-5-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-4-0';\nexport var legend = '_1dphm0f1-3-4-0';"],
+  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-5-0';\nexport var legend = '_1dphm0f1-3-5-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-4-0";
+var formField = "_mvcxum0-3-5-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-4-0';"],
+  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-5-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-4-0 {
+._16z6rg10-3-5-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-4-0 {
+._16z6rg11-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-4-0 {
+._16z6rg12-3-5-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-4-0 {
+._16z6rg13-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-4-0 {
+._16z6rg14-3-5-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-4-0", variantClassNames: { variant: { hint: "_16z6rg11-3-4-0", error: "_16z6rg12-3-4-0" }, disabled: { true: "_16z6rg13-3-4-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-4-0";
+var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-5-0", variantClassNames: { variant: { hint: "_16z6rg11-3-5-0", error: "_16z6rg12-3-5-0" }, disabled: { true: "_16z6rg13-3-5-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-5-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-4-0',variantClassNames:{variant:{hint:'_16z6rg11-3-4-0',error:'_16z6rg12-3-4-0'},disabled:{true:'_16z6rg13-3-4-0'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-4-0';"],
+  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-5-0',variantClassNames:{variant:{hint:'_16z6rg11-3-5-0',error:'_16z6rg12-3-5-0'},disabled:{true:'_16z6rg13-3-5-0'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-5-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-4-0";
+var formFieldMessages = "_1l9bja60-3-5-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-4-0';"],
+  "sourcesContent": ["import './FormFieldMessages.css';\nexport var formFieldMessages = '_1l9bja60-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

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

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

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

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

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

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

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

@@ -141,9 +141,8 @@ function getI18nErrorMessage(key, ref) {
       return null;
   }
 }
-function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}, controlId) {
-  const { state, dispatch } = useFormFieldMessagesContext();
-  const errorId = useId();
+function useFormFieldValidationAriaProps(ariaLabelingProps = {}) {
+  const { state } = useFormFieldMessagesContext();
   const _ariaProps = useMemo(() => {
     let messageIdsString;
     let errorMessageIdsString;
@@ -159,6 +158,12 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
     };
   }, [state.customMessages, state.formControlMessages, state.showError]);
   const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);
+  return ariaProps;
+}
+function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}, controlId) {
+  const { state, dispatch } = useFormFieldMessagesContext();
+  const errorId = useId();
+  const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);
   const formControlMessagesRef = useRef(state.formControlMessages);
   formControlMessagesRef.current = state.formControlMessages;
   const updateErrorMessages = useCallback(() => {
@@ -241,6 +246,7 @@ export {
   getCombinedAriaProps,
   getErrorType,
   getI18nErrorMessage,
-  useFormFieldValidation
+  useFormFieldValidation,
+  useFormFieldValidationAriaProps
 };
 //# sourceMappingURL=useFormFieldValidation.js.map

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

@@ -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  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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",
+  "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 * Hook to generate ARIA props based on the form field messages\n * @param ariaLabelingProps - ARIA labeling properties\n * @returns ARIA props for the form field\n * @internal\n */\nexport function useFormFieldValidationAriaProps(\n  ariaLabelingProps: AriaLabelingProps = {},\n) {\n  const { state } = useFormFieldMessagesContext();\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  return ariaProps;\n}\n\n/**\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 * @internal\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 = useFormFieldValidationAriaProps(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/hooks/useAutofillEvent.css

@@ -1,20 +1,20 @@
-@keyframes _yfwka31-3-4-0 {
+@keyframes _yfwka31-3-5-0 {
 
 }
-@keyframes _yfwka32-3-4-0 {
+@keyframes _yfwka32-3-5-0 {
 
 }
-._yfwka33-3-4-0:-webkit-autofill:is(._yfwka33-3-4-0,:hover,:focus) {
+._yfwka33-3-5-0:-webkit-autofill:is(._yfwka33-3-5-0,:hover,:focus) {
   -webkit-text-fill-color: var(--dt-colors-text-primary-default, #464cce);
-  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-4-0) inset;
+  box-shadow: 0 0 0px 1000px var(--_yfwka30-3-5-0) inset;
   caret-color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._yfwka33-3-4-0:-webkit-autofill {
-  animation-name: _yfwka31-3-4-0;
+._yfwka33-3-5-0:-webkit-autofill {
+  animation-name: _yfwka31-3-5-0;
   animation-duration: 0.001s;
 }
-._yfwka33-3-4-0:not(:-webkit-autofill) {
-  animation-name: _yfwka32-3-4-0;
+._yfwka33-3-5-0:not(:-webkit-autofill) {
+  animation-name: _yfwka32-3-5-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-4-0)";
-var autofillCSS = "_yfwka33-3-4-0";
-var end = "_yfwka32-3-4-0";
-var start = "_yfwka31-3-4-0";
+var autofillBackground = "var(--_yfwka30-3-5-0)";
+var autofillCSS = "_yfwka33-3-5-0";
+var end = "_yfwka32-3-5-0";
+var start = "_yfwka31-3-5-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-4-0)';\nexport var autofillCSS = '_yfwka33-3-4-0';\nexport var end = '_yfwka32-3-4-0';\nexport var start = '_yfwka31-3-4-0';"],
+  "sourcesContent": ["import './useAutofillEvent.css';\nexport var autofillBackground = 'var(--_yfwka30-3-5-0)';\nexport var autofillCSS = '_yfwka33-3-5-0';\nexport var end = '_yfwka32-3-5-0';\nexport var start = '_yfwka31-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,cAAc;AAClB,IAAI,MAAM;AACV,IAAI,QAAQ;",
   "names": []
 }

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

@@ -15,6 +15,7 @@ import { extractBehaviorTrackingProps } from "../../core/utils/extract-behavior-
 import { isSlot } from "../../core/utils/is-slot.js";
 import { mergeProps } from "../../core/utils/merge-props.js";
 import { BaseInput } from "../_base-input/BaseInput.js";
+import { getPlaceholderMessage } from "../_base-input/baseInputMessages.js";
 const COMPONENT_NAME = "PasswordInput";
 function getTooltipSlot(children) {
   const slots = {
@@ -30,6 +31,10 @@ function getTooltipSlot(children) {
   return slots;
 }
 const PasswordInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const intl = useIntl();
+  const defaultPlaceholder = intl.formatMessage(
+    getPlaceholderMessage("password")
+  );
   const {
     onChange,
     name,
@@ -45,6 +50,7 @@ const PasswordInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     style: consumerStyle,
     defaultValue,
     value,
+    placeholder = defaultPlaceholder,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
@@ -62,7 +68,6 @@ const PasswordInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const tooltipBehavioralTrackingProps = extractBehaviorTrackingProps(
     remainingTooltipProps
   );
-  const intl = useIntl();
   const showTooltipDefaultText = intl.formatMessage({
     defaultMessage: "Show password",
     id: "tgL6QEjmq+ArASFk",
@@ -96,6 +101,7 @@ const PasswordInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       disabled,
       "aria-disabled": ariaDisabledProp,
       "data-dt-component": COMPONENT_NAME,
+      placeholder,
       children: /* @__PURE__ */ jsx(BaseInput.Suffix, { children: /* @__PURE__ */ jsx(
         BaseInput.Button,
         {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/password-input/PasswordInput.tsx"],
-  "sourcesContent": ["import {\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 {\n  PasswordInputTooltip,\n  type PasswordInputTooltipProps,\n} from './PasswordInputTooltip.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps } from '../../core/utils/merge-props.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  BehaviorTrackingProps;\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    disabled,\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 [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\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  const tooltipBehavioralTrackingProps = extractBehaviorTrackingProps(\n    remainingTooltipProps,\n  );\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  const dataDtProperties = `value:${hidden ? 'show' : 'hide'}`;\n\n  const showTooltipText = showText ?? showTooltipDefaultText;\n  const hideTooltipText = hideText ?? hideTooltipDefaultText;\n\n  return (\n    <BaseInput\n      {...mergeProps(restProps, behavioralTrackingProps)}\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      disabled={disabled}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <BaseInput.Suffix>\n        <BaseInput.Button\n          onClick={() => setHidden(!hidden)}\n          tooltipText={hidden ? showTooltipText : hideTooltipText}\n          tooltipBehavioralTrackingProps={tooltipBehavioralTrackingProps}\n          aria-label={hidden ? showTooltipText : hideTooltipText}\n          id={remainingTooltipProps.id}\n          aria-disabled={ariaDisabledProp}\n          data-dt-name=\"ShowHidePassword\"\n          data-dt-properties={dataDtProperties}\n          disabled={readOnly ? false : disabled}\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": "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",
+  "sourcesContent": ["import {\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 {\n  PasswordInputTooltip,\n  type PasswordInputTooltipProps,\n} from './PasswordInputTooltip.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { getPlaceholderMessage } from '../_base-input/baseInputMessages.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  BehaviorTrackingProps;\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 intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage('password'),\n  );\n\n  const {\n    onChange,\n    name,\n    readOnly = false,\n    disabled,\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    placeholder = defaultPlaceholder,\n    ...remainingProps\n  }: PasswordInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\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  const tooltipBehavioralTrackingProps = extractBehaviorTrackingProps(\n    remainingTooltipProps,\n  );\n\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  const dataDtProperties = `value:${hidden ? 'show' : 'hide'}`;\n\n  const showTooltipText = showText ?? showTooltipDefaultText;\n  const hideTooltipText = hideText ?? hideTooltipDefaultText;\n\n  return (\n    <BaseInput\n      {...mergeProps(restProps, behavioralTrackingProps)}\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      disabled={disabled}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      placeholder={placeholder}\n    >\n      <BaseInput.Suffix>\n        <BaseInput.Button\n          onClick={() => setHidden(!hidden)}\n          tooltipText={hidden ? showTooltipText : hideTooltipText}\n          tooltipBehavioralTrackingProps={tooltipBehavioralTrackingProps}\n          aria-label={hidden ? showTooltipText : hideTooltipText}\n          id={remainingTooltipProps.id}\n          aria-disabled={ariaDisabledProp}\n          data-dt-name=\"ShowHidePassword\"\n          data-dt-properties={dataDtProperties}\n          disabled={readOnly ? false : disabled}\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": "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",
   "names": []
 }

package/esm/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-4-0 {
+._h96idu0-3-5-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-4-0 {
+._h96idu1-3-5-0 {
   cursor: default;
 }
-._h96idu5-3-4-0 {
+._h96idu5-3-5-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-4-0._h96idu3-3-4-0 {
+._h96idu5-3-5-0._h96idu3-3-5-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-4-0 ._h96idu5-3-4-0 {
+._h96idu1-3-5-0 ._h96idu5-3-5-0 {
   cursor: default;
 }
-._h96idu6-3-4-0 {
+._h96idu6-3-5-0 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,38 +31,38 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-4-0);
+  background-color: var(--_bx32h3-3-5-0);
 }
-._h96idu7-3-4-0 {
+._h96idu7-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96idue-3-4-0 {
+._h96idue-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-4-0 {
+._h96idug-3-5-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-4-0 {
+._h96iduh-3-5-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-4-0 {
+._h96idui-3-5-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-4-0 {
+._h96iduj-3-5-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduk-3-4-0 {
+._h96iduk-3-5-0 {
   height: 100%;
-  fill: var(--_bx32h1-3-4-0);
+  fill: var(--_bx32h1-3-5-0);
 }
-._h96idu5-3-4-0:not(._h96idu4-3-4-0) ._h96iduk-3-4-0 {
+._h96idu5-3-5-0:not(._h96idu4-3-5-0) ._h96iduk-3-5-0 {
   display: none;
 }
-._h96idu1-3-4-0 ._h96iduk-3-4-0 {
+._h96idu1-3-5-0 ._h96iduk-3-5-0 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-4-0._h96idu1-3-4-0 ._h96iduk-3-4-0 {
+._h96idu2-3-5-0._h96idu1-3-5-0 ._h96iduk-3-5-0 {
   fill: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/esm/forms/radio/styles.sty.js

@@ -2,14 +2,14 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checked = "_h96idu4-3-4-0";
-var disabled = "_h96idu3-3-4-0";
-var group = "_h96idu0-3-4-0";
-var hasError = "_h96idu2-3-4-0";
-var innerKnob = "_h96iduk-3-4-0";
-var knob = _7a468({ defaultClassName: "_h96idu6-3-4-0", variantClassNames: { disabled: { true: "_h96idu7-3-4-0" }, checked: { true: "_h96idu8-3-4-0", false: "_h96idu9-3-4-0" }, hasError: { true: "_h96idua-3-4-0", false: "_h96idub-3-4-0" }, isFocusVisible: { true: "_h96iduc-3-4-0", false: "_h96idud-3-4-0" }, readOnly: { true: "_h96idue-3-4-0", false: "_h96iduf-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-4-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-4-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-4-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-4-0"]] });
-var label = "_h96idu5-3-4-0";
-var readOnly = "_h96idu1-3-4-0";
+var checked = "_h96idu4-3-5-0";
+var disabled = "_h96idu3-3-5-0";
+var group = "_h96idu0-3-5-0";
+var hasError = "_h96idu2-3-5-0";
+var innerKnob = "_h96iduk-3-5-0";
+var knob = _7a468({ defaultClassName: "_h96idu6-3-5-0", variantClassNames: { disabled: { true: "_h96idu7-3-5-0" }, checked: { true: "_h96idu8-3-5-0", false: "_h96idu9-3-5-0" }, hasError: { true: "_h96idua-3-5-0", false: "_h96idub-3-5-0" }, isFocusVisible: { true: "_h96iduc-3-5-0", false: "_h96idud-3-5-0" }, readOnly: { true: "_h96idue-3-5-0", false: "_h96iduf-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-5-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-5-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-5-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-5-0"]] });
+var label = "_h96idu5-3-5-0";
+var readOnly = "_h96idu1-3-5-0";
 export {
   checked,
   disabled,

package/esm/forms/radio/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/styles.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu4-3-4-0';\nexport var disabled = '_h96idu3-3-4-0';\nexport var group = '_h96idu0-3-4-0';\nexport var hasError = '_h96idu2-3-4-0';\nexport var innerKnob = '_h96iduk-3-4-0';\nexport var knob = _7a468({defaultClassName:'_h96idu6-3-4-0',variantClassNames:{disabled:{true:'_h96idu7-3-4-0'},checked:{true:'_h96idu8-3-4-0',false:'_h96idu9-3-4-0'},hasError:{true:'_h96idua-3-4-0',false:'_h96idub-3-4-0'},isFocusVisible:{true:'_h96iduc-3-4-0',false:'_h96idud-3-4-0'},readOnly:{true:'_h96idue-3-4-0',false:'_h96iduf-3-4-0'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false,readOnly:false},'_h96idug-3-4-0'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false,readOnly:false},'_h96iduh-3-4-0'],[{readOnly:true,disabled:false},'_h96idui-3-4-0'],[{readOnly:true,hasError:true,disabled:false},'_h96iduj-3-4-0']]});\nexport var label = '_h96idu5-3-4-0';\nexport var readOnly = '_h96idu1-3-4-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu4-3-5-0';\nexport var disabled = '_h96idu3-3-5-0';\nexport var group = '_h96idu0-3-5-0';\nexport var hasError = '_h96idu2-3-5-0';\nexport var innerKnob = '_h96iduk-3-5-0';\nexport var knob = _7a468({defaultClassName:'_h96idu6-3-5-0',variantClassNames:{disabled:{true:'_h96idu7-3-5-0'},checked:{true:'_h96idu8-3-5-0',false:'_h96idu9-3-5-0'},hasError:{true:'_h96idua-3-5-0',false:'_h96idub-3-5-0'},isFocusVisible:{true:'_h96iduc-3-5-0',false:'_h96idud-3-5-0'},readOnly:{true:'_h96idue-3-5-0',false:'_h96iduf-3-5-0'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false,readOnly:false},'_h96idug-3-5-0'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false,readOnly:false},'_h96iduh-3-5-0'],[{readOnly:true,disabled:false},'_h96idui-3-5-0'],[{readOnly:true,hasError:true,disabled:false},'_h96iduj-3-5-0']]});\nexport var label = '_h96idu5-3-5-0';\nexport var readOnly = '_h96idu1-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,OAAO,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,gBAAe,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,SAAQ,OAAM,UAAS,MAAK,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,SAAQ,OAAM,UAAS,OAAM,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAChrB,IAAI,QAAQ;AACZ,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/search-input/SearchInput.css

@@ -1,3 +1,3 @@
-._1mumub80-3-4-0 {
+._1mumub80-3-5-0 {
   min-width: 192px;
 }

package/esm/forms/search-input/SearchInput.sty.js

@@ -1,5 +1,5 @@
 import "./SearchInput.css";
-var searchInput = "_1mumub80-3-4-0";
+var searchInput = "_1mumub80-3-5-0";
 export {
   searchInput
 };

package/esm/forms/search-input/SearchInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/SearchInput.css.ts"],
-  "sourcesContent": ["import './SearchInput.css';\nexport var searchInput = '_1mumub80-3-4-0';"],
+  "sourcesContent": ["import './SearchInput.css';\nexport var searchInput = '_1mumub80-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/forms/select/components/Control.js

@@ -15,6 +15,7 @@ import { useId } from "../../../core/hooks/useId.js";
 import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
 import { OverlayStackingProvider } from "../../../core/providers/OverlayStackingProvider.js";
 import { useFocusRing } from "../../../core/styles/useFocusRing.js";
+import { isVisualRefreshEnabled } from "../../../core/utils/is-visual-refresh-enabled.js";
 import { mergeProps as _mergeProps } from "../../../core/utils/merge-props.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
 import { InternalBaseItem as BaseItem } from "../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
@@ -55,6 +56,7 @@ function Control(props) {
     selectProps.controlState
   );
   const showError = selectProps.controlState ? hasFormControlError : state.showError;
+  const isCritical = isVisualRefreshEnabled() ? showError && !isDisabled : showError;
   const hiddenReactSelectInput = Array.isArray(valueContainer.props.children) ? valueContainer.props.children[1] : null;
   const id = selectProps["selectInputId"];
   const hiddenInput = useMemo(
@@ -159,7 +161,7 @@ function Control(props) {
         ...innerProps,
         variant: "emphasized",
         ...isDisabled ? void 0 : interactionProps,
-        color: showError ? "critical" : "neutral",
+        color: isCritical ? "critical" : "neutral",
         className: clsx(
           "strato-components-select-control-trigger",
           styles.selectTrigger({