@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/forms/number-input-v2/utils/format.js

@@ -0,0 +1,179 @@
+import { getRegionalFormat } from "@dynatrace-sdk/user-preferences";
+function parseNumber(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  const regionalFormat = getRegionalFormat();
+  const { decimal: localeDecimalSeparator } = getLocaleSeparators(regionalFormat);
+  const normalizedValue = checkFormat(value);
+  const decimalNormalizedValue = normalizedValue.replaceAll(
+    localeDecimalSeparator,
+    "."
+  );
+  const groupingNormalizedValue = decimalNormalizedValue.replace(
+    // Match whitespace-like grouping separators (space, NBSP, narrow NBSP, apostrophe), e.g. "1 234", "1\u00A0234", "1\u202F234", "1'234".
+    /[\s\u00A0\u202F']/g,
+    ""
+  );
+  return parseFloat(groupingNormalizedValue);
+}
+function sanitizeNumberLikeInput(inputValue) {
+  let sanitizedValue = inputValue.trim();
+  if (/^\(.*\)$/.exec(sanitizedValue)) {
+    sanitizedValue = sanitizedValue.slice(1, -1).trim();
+  }
+  const containsSignCharacter = /[-+]/.exec(sanitizedValue);
+  if (containsSignCharacter) {
+    sanitizedValue = sanitizedValue.replace(/[-+]/g, "").trim();
+  }
+  return sanitizedValue.replace(/[^\d.,'\s\u00A0\u202F]/g, "");
+}
+function countDigitsAroundSeparator(inputValue, separatorIndex) {
+  const leftPart = inputValue.slice(0, separatorIndex);
+  const rightPart = inputValue.slice(separatorIndex + 1);
+  const leftDigitCount = (leftPart.match(/\d/g) || []).length;
+  const rightDigitCount = (rightPart.match(/\d/g) || []).length;
+  return { leftPart, leftDigitCount, rightDigitCount };
+}
+function hasLeftGroupingPattern(leftPart, separatorCharacter) {
+  const cleanedLeftPart = leftPart.replace(/[\s\u00A0\u202F']/g, "");
+  const groupedParts = cleanedLeftPart.split(separatorCharacter);
+  if (groupedParts.length <= 1) {
+    return false;
+  }
+  if (!/^\d{1,3}$/.exec(groupedParts[0])) {
+    return false;
+  }
+  for (let partIndex = 1; partIndex < groupedParts.length; partIndex++) {
+    if (!/^\d{3}$/.exec(groupedParts[partIndex])) {
+      return false;
+    }
+  }
+  return true;
+}
+function detectWhitespaceGroupingSeparator(inputValue) {
+  if (!/[ \u00A0\u202F']/.exec(inputValue)) {
+    return null;
+  }
+  if (inputValue.includes("\u202F")) {
+    return "\u202F";
+  }
+  if (inputValue.includes("\xA0")) {
+    return "\xA0";
+  }
+  if (inputValue.includes("'")) {
+    return "'";
+  }
+  return " ";
+}
+function inferDotAndCommaSeparators(sanitizedInputValue, fallbackDecimalSeparator) {
+  const lastCommaIndex = sanitizedInputValue.lastIndexOf(",");
+  const lastDotIndex = sanitizedInputValue.lastIndexOf(".");
+  let decimalSeparator = fallbackDecimalSeparator;
+  let groupSeparator = null;
+  if (lastCommaIndex !== -1 && lastDotIndex !== -1) {
+    decimalSeparator = lastCommaIndex > lastDotIndex ? "," : ".";
+    groupSeparator = decimalSeparator === "," ? "." : ",";
+    return { decimal: decimalSeparator, group: groupSeparator };
+  }
+  if (lastCommaIndex === -1 && lastDotIndex === -1) {
+    return { decimal: decimalSeparator, group: groupSeparator };
+  }
+  const separatorCharacter = lastCommaIndex !== -1 ? "," : ".";
+  const separatorIndex = lastCommaIndex !== -1 ? lastCommaIndex : lastDotIndex;
+  const { leftPart, rightDigitCount } = countDigitsAroundSeparator(
+    sanitizedInputValue,
+    separatorIndex
+  );
+  const leftPartUsesGrouping = hasLeftGroupingPattern(
+    leftPart,
+    separatorCharacter
+  );
+  const hasExactlyThreeDigitsOnRight = rightDigitCount === 3;
+  if (hasExactlyThreeDigitsOnRight && (leftPartUsesGrouping || separatorCharacter !== fallbackDecimalSeparator)) {
+    groupSeparator = separatorCharacter;
+  } else {
+    decimalSeparator = separatorCharacter;
+  }
+  return { decimal: decimalSeparator, group: groupSeparator };
+}
+function inferSeparators(inputValue, fallbackDecimalSeparator) {
+  if (inputValue === null) {
+    return { decimal: fallbackDecimalSeparator, group: null };
+  }
+  const sanitizedInputValue = sanitizeNumberLikeInput(inputValue);
+  const inferredDotAndCommaSeparators = inferDotAndCommaSeparators(
+    sanitizedInputValue,
+    fallbackDecimalSeparator
+  );
+  const whitespaceGroupingSeparator = detectWhitespaceGroupingSeparator(sanitizedInputValue);
+  if (whitespaceGroupingSeparator) {
+    return {
+      decimal: inferredDotAndCommaSeparators.decimal,
+      group: whitespaceGroupingSeparator
+    };
+  }
+  if (!inferredDotAndCommaSeparators.group && (sanitizedInputValue.includes(",") || sanitizedInputValue.includes("."))) {
+    const alternateSeparator = inferredDotAndCommaSeparators.decimal === "," ? "." : ",";
+    if (sanitizedInputValue.includes(alternateSeparator)) {
+      return {
+        decimal: inferredDotAndCommaSeparators.decimal,
+        group: alternateSeparator
+      };
+    }
+  }
+  return inferredDotAndCommaSeparators;
+}
+function getLocaleSeparators(locale, options = {}) {
+  const numberFormatter = new Intl.NumberFormat(locale, {
+    useGrouping: true,
+    ...options
+  });
+  const formattedParts = numberFormatter.formatToParts(1234.5);
+  let decimalSeparator = ".";
+  let groupSeparator = null;
+  for (const part of formattedParts) {
+    if (part.type === "decimal") {
+      decimalSeparator = part.value;
+    }
+    if (part.type === "group") {
+      groupSeparator = part.value;
+    }
+  }
+  return { decimal: decimalSeparator, group: groupSeparator };
+}
+function removeAllButLast(sourceText, tokenToKeepLast) {
+  const lastTokenIndex = sourceText.lastIndexOf(tokenToKeepLast);
+  if (lastTokenIndex === -1) {
+    return sourceText;
+  }
+  const prefix = sourceText.slice(0, lastTokenIndex);
+  const suffix = sourceText.slice(lastTokenIndex);
+  return prefix.replaceAll(tokenToKeepLast, "") + suffix;
+}
+function checkFormat(value) {
+  const regionalFormat = getRegionalFormat();
+  const { decimal } = getLocaleSeparators(regionalFormat);
+  const { decimal: inferredDecimal, group: inferredGroup } = inferSeparators(
+    value,
+    decimal
+  );
+  let normalizedValue = value;
+  if (inferredGroup) {
+    normalizedValue = normalizedValue.replaceAll(inferredGroup, "");
+  }
+  if (inferredDecimal && decimal) {
+    normalizedValue = normalizedValue.replaceAll(
+      inferredDecimal ?? "",
+      decimal
+    );
+    normalizedValue = removeAllButLast(normalizedValue, decimal);
+  }
+  return normalizedValue;
+}
+export {
+  checkFormat,
+  getLocaleSeparators,
+  parseNumber
+};
+//# sourceMappingURL=format.js.map

package/esm/forms/number-input-v2/utils/format.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/forms/number-input-v2/utils/format.ts"],
+  "sourcesContent": ["import { getRegionalFormat } from '@dynatrace-sdk/user-preferences';\n\ntype LocaleSeparators = {\n  decimal: string;\n  group: string | null;\n};\n// \\u00A0 / \\u202F escapes \u2014 left intentionally as-is; they're invisible whitespace\ntype GroupSeparator = ',' | '.' | ' ' | '\\u00A0' | '\\u202F' | \"'\";\n\n/**\n * Parses a value into a JavaScript number (Replace commas with dots).\n * @internal\n */\nexport function parseNumber(value: string | number): number {\n  if (typeof value === 'number') {\n    return value;\n  }\n  const regionalFormat = getRegionalFormat();\n  const { decimal: localeDecimalSeparator } =\n    getLocaleSeparators(regionalFormat);\n  const normalizedValue = checkFormat(value);\n  const decimalNormalizedValue = normalizedValue.replaceAll(\n    localeDecimalSeparator,\n    '.',\n  );\n  const groupingNormalizedValue = decimalNormalizedValue.replace(\n    // Match whitespace-like grouping separators (space, NBSP, narrow NBSP, apostrophe), e.g. \"1 234\", \"1\\u00A0234\", \"1\\u202F234\", \"1'234\".\n    /[\\s\\u00A0\\u202F']/g,\n    '',\n  );\n\n  return parseFloat(groupingNormalizedValue);\n}\n\n/**\n * Removes wrappers and unsupported characters from a number-like input.\n */\nfunction sanitizeNumberLikeInput(inputValue: string): string {\n  let sanitizedValue = inputValue.trim();\n\n  // Match values wrapped in parentheses, e.g. \"(123.45)\", \"( 1 234,56 )\".\n  if (/^\\(.*\\)$/.exec(sanitizedValue)) {\n    sanitizedValue = sanitizedValue.slice(1, -1).trim();\n  }\n\n  // Match any plus/minus sign anywhere in the input, e.g. \"+12\", \"1-2\".\n  const containsSignCharacter = /[-+]/.exec(sanitizedValue);\n  if (containsSignCharacter) {\n    // Remove every plus/minus sign globally, e.g. \"+-12\" -> \"12\".\n    sanitizedValue = sanitizedValue.replace(/[-+]/g, '').trim();\n  }\n\n  // Keep only digits, dot, comma, apostrophe, and whitespace-style separators, e.g. \"\u20AC1,234.50\" -> \"1,234.50\".\n  return sanitizedValue.replace(/[^\\d.,'\\s\\u00A0\\u202F]/g, '');\n}\n\n/**\n * Counts digits on each side of a separator index.\n */\nfunction countDigitsAroundSeparator(\n  inputValue: string,\n  separatorIndex: number,\n): { leftPart: string; leftDigitCount: number; rightDigitCount: number } {\n  const leftPart = inputValue.slice(0, separatorIndex);\n  const rightPart = inputValue.slice(separatorIndex + 1);\n  // Match each digit character on the left side, e.g. \"ab12\" -> 2 matches.\n  const leftDigitCount = (leftPart.match(/\\d/g) || []).length;\n  // Match each digit character on the right side, e.g. \"3x45\" -> 3 matches.\n  const rightDigitCount = (rightPart.match(/\\d/g) || []).length;\n\n  return { leftPart, leftDigitCount, rightDigitCount };\n}\n\n/**\n * Checks whether the left side follows a grouping pattern such as 1,234,567.\n */\nfunction hasLeftGroupingPattern(\n  leftPart: string,\n  separatorCharacter: ',' | '.',\n): boolean {\n  // Match whitespace-like grouping separators and remove them first, e.g. \"1 234\" -> \"1234\".\n  const cleanedLeftPart = leftPart.replace(/[\\s\\u00A0\\u202F']/g, '');\n  const groupedParts = cleanedLeftPart.split(separatorCharacter);\n\n  if (groupedParts.length <= 1) {\n    return false;\n  }\n\n  // Match 1 to 3 digits for the first group, e.g. \"1\", \"12\", \"123\".\n  if (!/^\\d{1,3}$/.exec(groupedParts[0])) {\n    return false;\n  }\n\n  for (let partIndex = 1; partIndex < groupedParts.length; partIndex++) {\n    // Match exactly 3 digits for each following group, e.g. in \"1,234,567\" both \"234\" and \"567\".\n    if (!/^\\d{3}$/.exec(groupedParts[partIndex])) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * Detects a whitespace-like grouping separator from the input.\n */\nfunction detectWhitespaceGroupingSeparator(\n  inputValue: string,\n): GroupSeparator | null {\n  // Match any supported whitespace-like grouping separator, e.g. space, NBSP, narrow NBSP, apostrophe.\n  if (!/[ \\u00A0\\u202F']/.exec(inputValue)) {\n    return null;\n  }\n\n  if (inputValue.includes('\\u202F')) {\n    return '\\u202F';\n  }\n\n  if (inputValue.includes('\\u00A0')) {\n    return '\\u00A0';\n  }\n\n  if (inputValue.includes(\"'\")) {\n    return \"'\";\n  }\n\n  return ' ';\n}\n\n/**\n * Infers decimal and grouping separators from comma and dot occurrences.\n */\nfunction inferDotAndCommaSeparators(\n  sanitizedInputValue: string,\n  fallbackDecimalSeparator: string,\n): LocaleSeparators {\n  const lastCommaIndex = sanitizedInputValue.lastIndexOf(',');\n  const lastDotIndex = sanitizedInputValue.lastIndexOf('.');\n\n  let decimalSeparator = fallbackDecimalSeparator;\n  let groupSeparator: GroupSeparator | null = null;\n\n  if (lastCommaIndex !== -1 && lastDotIndex !== -1) {\n    decimalSeparator = lastCommaIndex > lastDotIndex ? ',' : '.';\n    groupSeparator = decimalSeparator === ',' ? '.' : ',';\n    return { decimal: decimalSeparator, group: groupSeparator };\n  }\n\n  if (lastCommaIndex === -1 && lastDotIndex === -1) {\n    return { decimal: decimalSeparator, group: groupSeparator };\n  }\n\n  const separatorCharacter =\n    lastCommaIndex !== -1 ? (',' as const) : ('.' as const);\n  const separatorIndex = lastCommaIndex !== -1 ? lastCommaIndex : lastDotIndex;\n  const { leftPart, rightDigitCount } = countDigitsAroundSeparator(\n    sanitizedInputValue,\n    separatorIndex,\n  );\n\n  const leftPartUsesGrouping = hasLeftGroupingPattern(\n    leftPart,\n    separatorCharacter,\n  );\n  const hasExactlyThreeDigitsOnRight = rightDigitCount === 3;\n\n  if (\n    hasExactlyThreeDigitsOnRight &&\n    (leftPartUsesGrouping || separatorCharacter !== fallbackDecimalSeparator)\n  ) {\n    groupSeparator = separatorCharacter;\n  } else {\n    decimalSeparator = separatorCharacter;\n  }\n\n  return { decimal: decimalSeparator, group: groupSeparator };\n}\n\n/**\n * Infers decimal and grouping separators from an input string.\n */\nfunction inferSeparators(\n  inputValue: string | null,\n  fallbackDecimalSeparator: string,\n): LocaleSeparators {\n  if (inputValue === null) {\n    return { decimal: fallbackDecimalSeparator, group: null };\n  }\n\n  const sanitizedInputValue = sanitizeNumberLikeInput(inputValue);\n  const inferredDotAndCommaSeparators = inferDotAndCommaSeparators(\n    sanitizedInputValue,\n    fallbackDecimalSeparator,\n  );\n\n  const whitespaceGroupingSeparator =\n    detectWhitespaceGroupingSeparator(sanitizedInputValue);\n  if (whitespaceGroupingSeparator) {\n    return {\n      decimal: inferredDotAndCommaSeparators.decimal,\n      group: whitespaceGroupingSeparator,\n    };\n  }\n\n  if (\n    !inferredDotAndCommaSeparators.group &&\n    (sanitizedInputValue.includes(',') || sanitizedInputValue.includes('.'))\n  ) {\n    const alternateSeparator: ',' | '.' =\n      inferredDotAndCommaSeparators.decimal === ',' ? '.' : ',';\n\n    if (sanitizedInputValue.includes(alternateSeparator)) {\n      return {\n        decimal: inferredDotAndCommaSeparators.decimal,\n        group: alternateSeparator,\n      };\n    }\n  }\n\n  return inferredDotAndCommaSeparators;\n}\n\n/**\n * Resolves decimal and grouping separators for a given locale.\n * @internal\n */\nexport function getLocaleSeparators(\n  locale: string,\n  options: Intl.NumberFormatOptions = {},\n): LocaleSeparators {\n  const numberFormatter = new Intl.NumberFormat(locale, {\n    useGrouping: true,\n    ...options,\n  });\n  const formattedParts = numberFormatter.formatToParts(1234.5);\n\n  let decimalSeparator = '.';\n  let groupSeparator: string | null = null;\n\n  for (const part of formattedParts) {\n    if (part.type === 'decimal') {\n      decimalSeparator = part.value;\n    }\n    if (part.type === 'group') {\n      groupSeparator = part.value;\n    }\n  }\n\n  return { decimal: decimalSeparator, group: groupSeparator };\n}\n\n/**\n * Removes all occurrences of a token except for the last one.\n */\nfunction removeAllButLast(sourceText: string, tokenToKeepLast: string): string {\n  const lastTokenIndex = sourceText.lastIndexOf(tokenToKeepLast);\n  if (lastTokenIndex === -1) {\n    return sourceText;\n  }\n\n  const prefix = sourceText.slice(0, lastTokenIndex);\n  const suffix = sourceText.slice(lastTokenIndex);\n\n  return prefix.replaceAll(tokenToKeepLast, '') + suffix;\n}\n\n/**\n * Normalizes numeric text to locale separators and removes grouping separators.\n * @internal\n */\nexport function checkFormat(value: string): string {\n  const regionalFormat = getRegionalFormat();\n  const { decimal } = getLocaleSeparators(regionalFormat);\n  const { decimal: inferredDecimal, group: inferredGroup } = inferSeparators(\n    value,\n    decimal,\n  );\n\n  let normalizedValue = value;\n\n  if (inferredGroup) {\n    normalizedValue = normalizedValue.replaceAll(inferredGroup, '');\n  }\n\n  if (inferredDecimal && decimal) {\n    normalizedValue = normalizedValue.replaceAll(\n      inferredDecimal ?? '',\n      decimal,\n    );\n    normalizedValue = removeAllButLast(normalizedValue, decimal);\n  }\n\n  return normalizedValue;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/forms/number-input-v2/utils/validation.js

@@ -0,0 +1,46 @@
+import { parseNumber } from "./format.js";
+import { getI18nErrorMessage } from "../../forms-core/hooks/useFormFieldValidation.js";
+import {
+  FormFieldMessagesAction
+} from "../../forms-core/state/formfield-messages-state-reducer.js";
+function sanitizePositiveNumber(value) {
+  return value !== void 0 && !Number.isNaN(value) && value > 0 ? value : 1;
+}
+function isStepAligned(value, step, min = 0) {
+  step = sanitizePositiveNumber(step);
+  const roundedValue = Math.round((value - min) / step) * step + min;
+  const tolerance = step * 1e-9;
+  return Math.abs(value - roundedValue) < tolerance;
+}
+function addError(errorType, errorId, ref, dispatch) {
+  dispatch?.({
+    type: FormFieldMessagesAction.ADDMESSAGE,
+    payload: {
+      id: errorId,
+      message: getI18nErrorMessage(errorType, ref),
+      validityStateKey: errorType,
+      messageType: "formcontrol",
+      variant: "error"
+    }
+  });
+}
+function getErrorKey(value, min, max, step) {
+  const parsed = parseNumber(value);
+  if (min !== void 0 && parsed < min) {
+    return "rangeUnderflow";
+  }
+  if (max !== void 0 && parsed > max) {
+    return "rangeOverflow";
+  }
+  if (step && step > 0 && !isStepAligned(parsed, step, min ?? 0)) {
+    return "stepMismatch";
+  }
+  return null;
+}
+export {
+  addError,
+  getErrorKey,
+  isStepAligned,
+  sanitizePositiveNumber
+};
+//# sourceMappingURL=validation.js.map

package/esm/forms/number-input-v2/utils/validation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/forms/number-input-v2/utils/validation.tsx"],
+  "sourcesContent": ["import type { Dispatch } from 'react';\n\nimport { parseNumber } from './format.js';\nimport { getI18nErrorMessage } from '../../forms-core/hooks/useFormFieldValidation.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../../forms-core/state/formfield-messages-state-reducer.js';\n\n/**\n * Sanitizes a numeric step value, returning 1 if the value is undefined, NaN, zero, or negative.\n * @internal\n */\nexport function sanitizePositiveNumber(value: number | undefined): number {\n  return value !== undefined && !Number.isNaN(value) && value > 0 ? value : 1;\n}\n\n/**\n * Checks if the given value is aligned with the specified step and minimum value.\n * @internal\n */\nexport function isStepAligned(\n  value: number,\n  step: number,\n  min: number = 0,\n): boolean {\n  step = sanitizePositiveNumber(step);\n  const roundedValue = Math.round((value - min) / step) * step + min;\n  const tolerance = step * 1e-9;\n  return Math.abs(value - roundedValue) < tolerance;\n}\n\n/**\n * Adds an error message to the form field messages state.\n * @internal\n */\nexport function addError(\n  errorType: keyof ValidityState,\n  errorId: string,\n  ref: HTMLInputElement | HTMLSelectElement | null | undefined,\n  dispatch: Dispatch<FormFieldMessagesReducerAction> | undefined,\n): void {\n  dispatch?.({\n    type: FormFieldMessagesAction.ADDMESSAGE,\n    payload: {\n      id: errorId,\n      message: getI18nErrorMessage(errorType, ref),\n      validityStateKey: errorType,\n      messageType: 'formcontrol',\n      variant: 'error',\n    },\n  });\n}\n\n/**\n * Determines the appropriate error key based on the provided value and validation constraints (min, max, step).\n * @internal\n */\nexport function getErrorKey(\n  value: string | number,\n  min?: number,\n  max?: number,\n  step?: number,\n): keyof ValidityState | null {\n  const parsed = parseNumber(value);\n\n  if (min !== undefined && parsed < min) {\n    return 'rangeUnderflow';\n  }\n\n  if (max !== undefined && parsed > max) {\n    return 'rangeOverflow';\n  }\n\n  if (step && step > 0 && !isStepAligned(parsed, step, min ?? 0)) {\n    return 'stepMismatch';\n  }\n  return null;\n}\n"],
+  "mappings": "AAEA,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,OAEK;AAMA,SAAS,uBAAuB,OAAmC;AACxE,SAAO,UAAU,UAAa,CAAC,OAAO,MAAM,KAAK,KAAK,QAAQ,IAAI,QAAQ;AAC5E;AAMO,SAAS,cACd,OACA,MACA,MAAc,GACL;AACT,SAAO,uBAAuB,IAAI;AAClC,QAAM,eAAe,KAAK,OAAO,QAAQ,OAAO,IAAI,IAAI,OAAO;AAC/D,QAAM,YAAY,OAAO;AACzB,SAAO,KAAK,IAAI,QAAQ,YAAY,IAAI;AAC1C;AAMO,SAAS,SACd,WACA,SACA,KACA,UACM;AACN,aAAW;AAAA,IACT,MAAM,wBAAwB;AAAA,IAC9B,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,SAAS,oBAAoB,WAAW,GAAG;AAAA,MAC3C,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAAA,EACF,CAAC;AACH;AAMO,SAAS,YACd,OACA,KACA,KACA,MAC4B;AAC5B,QAAM,SAAS,YAAY,KAAK;AAEhC,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,UAAa,SAAS,KAAK;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,OAAO,KAAK,CAAC,cAAc,QAAQ,MAAM,OAAO,CAAC,GAAG;AAC9D,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
+  "names": []
+}

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

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

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

@@ -1,5 +1,5 @@
 import "./PasswordInput.css";
-var readOnly = "_1ah2tn00-3-0-1";
+var readOnly = "_1ah2tn00-3-1-1";
 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-0-1';"],
+  "sourcesContent": ["import './PasswordInput.css';\nexport var readOnly = '_1ah2tn00-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/radio/Radio.js

@@ -81,12 +81,16 @@ const Radio = /* @__PURE__ */ forwardRef(
       onBlur: validationOnBlur,
       onInvalid: validationOnInvalid,
       ariaProps
-    } = useFormFieldValidation(inputRef, {
-      "aria-label": ariaLabelProp,
-      "aria-labelledby": ariaLabelledByProp,
-      "aria-describedby": ariaDescribedByProp,
-      "aria-details": ariaDetailsProp
-    });
+    } = useFormFieldValidation(
+      inputRef,
+      { groupRequired },
+      {
+        "aria-label": ariaLabelProp,
+        "aria-labelledby": ariaLabelledByProp,
+        "aria-describedby": ariaDescribedByProp,
+        "aria-details": ariaDetailsProp
+      }
+    );
     useEffect(() => {
       messagesContextDispatch?.({
         type: FormFieldMessagesAction.ADDFORMCONTROLID,
@@ -145,7 +149,6 @@ const Radio = /* @__PURE__ */ forwardRef(
             {
               ref: inputRef,
               checked,
-              "aria-checked": checked,
               name: groupName,
               value,
               type: "radio",

package/esm/forms/radio/Radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/Radio.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type ChangeEvent,\n} from 'react';\n\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Radio';\n\n// #region Typings\n/**\n * Properties for the Radio component\n * @public\n */\nexport type RadioProps = Pick<\n  FormControlProps<string, never>,\n  'disabled' | 'value'\n> &\n  DOMProps &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  FocusEvents &\n  AriaLabelingProps;\n//#endregion\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a `RadioGroup` component.\n * If you want to give the user more than 4 options,\n * consider using a `Select` component.\n * @public\n */\nexport const Radio = /* @__PURE__ */ forwardRef<FormControlRef, RadioProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      disabled: propDisabled,\n      id = fallbackId,\n      children,\n      value,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n      ...remainingProps\n    }: RadioProps = props;\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const radioGroupContext = useContext(RadioGroupContext);\n\n    if (isDev() && !radioGroupContext) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '<Radio /> can only be used as a child element of <RadioGroup />',\n      );\n    }\n\n    const {\n      isDisabled,\n      ariaDisabled,\n      controlState,\n      hasError,\n      readOnly,\n      name: groupName,\n      required: groupRequired,\n      value: groupValue,\n      onChange,\n    } = radioGroupContext || {};\n\n    // Imperative Handle Construction\n    const radioLabelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: radioLabelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (controlState !== undefined) {\n            return;\n          }\n\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    });\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id]);\n\n    const disabled = propDisabled ?? isDisabled;\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const checked = value === groupValue;\n\n    function handleChange(e: ChangeEvent<HTMLInputElement>) {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(e.target.value);\n      !controlState && validationOnChange?.();\n    }\n\n    let variant: 'accent' | 'emphasized' | 'default' = 'default';\n    let color: 'critical' | 'primary' | 'neutral' | 'success' | 'warning' =\n      'neutral';\n\n    if (checked) {\n      variant = 'accent';\n    } else if (hasError) {\n      variant = 'emphasized';\n    }\n\n    if (hasError) {\n      color = 'critical';\n    } else if (checked) {\n      color = 'primary';\n    }\n\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      color,\n      disabled,\n    });\n\n    return (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={radioLabelRef}\n        className={clsx(\n          styles.label,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n            [styles.checked]: checked,\n          },\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            checked={checked}\n            aria-checked={checked}\n            name={groupName}\n            value={value}\n            type=\"radio\"\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            required={groupRequired}\n            id={id}\n            onChange={handleChange}\n            onInvalid={(e) => {\n              if (controlState) {\n                e.preventDefault(); // Prevents the browser validation pop-up\n                return;\n              }\n\n              validationOnInvalid(e);\n            }}\n            readOnly={readOnly}\n            {..._mergeProps(\n              remainingProps,\n              focusProps,\n              controlState\n                ? {}\n                : {\n                    ...ariaProps,\n                    onBlur: validationOnBlur,\n                  },\n            )}\n          />\n        </VisuallyHidden>\n        <div\n          className={clsx(\n            styles.knob({\n              disabled: disabledOrAriaDisabled,\n              checked,\n              isFocusVisible,\n              hasError,\n              readOnly,\n            }),\n            fieldColorsCSS({\n              disabled: disabledOrAriaDisabled,\n              variant,\n              color,\n            }),\n            focusClassName,\n          )}\n        >\n          <svg\n            className={clsx(\n              styles.innerKnob,\n              fieldColorsCSS({\n                color: hasError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'accent',\n              }),\n            )}\n            viewBox=\"0 0 100 100\"\n          >\n            <circle r={isFocusVisible ? '20' : '25'} cx=\"50\" cy=\"50\" />\n          </svg>\n        </div>\n        <Text as=\"span\" textStyle=\"base\">\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\n(Radio as typeof Radio & { displayName: string }).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type ChangeEvent,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Radio';\n\n// #region Typings\n/**\n * Properties for the Radio component\n * @public\n */\nexport type RadioProps = Pick<\n  FormControlProps<string, never>,\n  'disabled' | 'value'\n> &\n  DOMProps &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  FocusEvents &\n  AriaLabelingProps;\n//#endregion\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a `RadioGroup` component.\n * If you want to give the user more than 4 options,\n * consider using a `Select` component.\n * @public\n */\nexport const Radio = /* @__PURE__ */ forwardRef<FormControlRef, RadioProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      disabled: propDisabled,\n      id = fallbackId,\n      children,\n      value,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n      ...remainingProps\n    }: RadioProps = props;\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n\n    const radioGroupContext = useContext(RadioGroupContext);\n\n    if (isDev() && !radioGroupContext) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '<Radio /> can only be used as a child element of <RadioGroup />',\n      );\n    }\n\n    const {\n      isDisabled,\n      ariaDisabled,\n      controlState,\n      hasError,\n      readOnly,\n      name: groupName,\n      required: groupRequired,\n      value: groupValue,\n      onChange,\n    } = radioGroupContext || {};\n\n    // Imperative Handle Construction\n    const radioLabelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: radioLabelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (controlState !== undefined) {\n            return;\n          }\n\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { groupRequired },\n      {\n        'aria-label': ariaLabelProp,\n        'aria-labelledby': ariaLabelledByProp,\n        'aria-describedby': ariaDescribedByProp,\n        'aria-details': ariaDetailsProp,\n      },\n    );\n\n    /** Register every single input to the form error context to ensure proper validation. */\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDFORMCONTROLID,\n        payload: { controlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEFORMCONTROLID,\n          payload: { controlId: id },\n        });\n    }, [id]);\n\n    const disabled = propDisabled ?? isDisabled;\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const checked = value === groupValue;\n\n    function handleChange(e: ChangeEvent<HTMLInputElement>) {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(e.target.value);\n      !controlState && validationOnChange?.();\n    }\n\n    let variant: 'accent' | 'emphasized' | 'default' = 'default';\n    let color: 'critical' | 'primary' | 'neutral' | 'success' | 'warning' =\n      'neutral';\n\n    if (checked) {\n      variant = 'accent';\n    } else if (hasError) {\n      variant = 'emphasized';\n    }\n\n    if (hasError) {\n      color = 'critical';\n    } else if (checked) {\n      color = 'primary';\n    }\n\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      color,\n      disabled,\n    });\n\n    return (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={radioLabelRef}\n        className={clsx(\n          styles.label,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n            [styles.checked]: checked,\n          },\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            checked={checked}\n            name={groupName}\n            value={value}\n            type=\"radio\"\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            required={groupRequired}\n            id={id}\n            onChange={handleChange}\n            onInvalid={(e) => {\n              if (controlState) {\n                e.preventDefault(); // Prevents the browser validation pop-up\n                return;\n              }\n\n              validationOnInvalid(e);\n            }}\n            readOnly={readOnly}\n            {..._mergeProps(\n              remainingProps,\n              focusProps,\n              controlState\n                ? {}\n                : {\n                    ...ariaProps,\n                    onBlur: validationOnBlur,\n                  },\n            )}\n          />\n        </VisuallyHidden>\n        <div\n          className={clsx(\n            styles.knob({\n              disabled: disabledOrAriaDisabled,\n              checked,\n              isFocusVisible,\n              hasError,\n              readOnly,\n            }),\n            fieldColorsCSS({\n              disabled: disabledOrAriaDisabled,\n              variant,\n              color,\n            }),\n            focusClassName,\n          )}\n        >\n          <svg\n            className={clsx(\n              styles.innerKnob,\n              fieldColorsCSS({\n                color: hasError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'accent',\n              }),\n            )}\n            viewBox=\"0 0 100 100\"\n          >\n            <circle r={isFocusVisible ? '20' : '25'} cx=\"50\" cy=\"50\" />\n          </svg>\n        </div>\n        <Text as=\"span\" textStyle=\"base\">\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\n(Radio as typeof Radio & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/radio/RadioGroup.js

@@ -64,7 +64,7 @@ const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       element: wrapperRef.current,
       focus() {
         const checkedInput = wrapperRef.current?.querySelector(
-          '[aria-checked="true"]'
+          "input:checked"
         );
         (checkedInput ?? wrapperRef.current?.querySelector("input"))?.focus();
       },

package/esm/forms/radio/RadioGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/RadioGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\n// #region Typings\n/**\n * Properties for the RadioGroup component\n * @public\n */\nexport type RadioGroupProps = FormControlProps<\n  string,\n  (value: string, event?: FocusEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  MaskingProps;\n// #endregion\n\nconst RadioGroupRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef,\n  RadioGroupProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    value,\n    name,\n    defaultValue,\n    controlState,\n    onChange,\n    readOnly = false,\n    required: propRequired,\n    'aria-disabled': propAriaDisabled,\n    'aria-describedby': ariaDescribedby,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RadioGroupProps = props;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled,\n  });\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n  const [controlStateHasError, hint] = useFormControlState(controlState);\n\n  const hasError = controlState\n    ? controlStateHasError\n    : messagesContextState.showError;\n\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    ariaDescribedby,\n    hint,\n    hasError,\n  });\n\n  const [controllableState, setControllableState] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n    return {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          '[aria-checked=\"true\"]',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        if (controlState !== undefined) {\n          return;\n        }\n\n        const inputs = wrapperRef.current?.querySelectorAll('input');\n        inputs?.forEach((input) => {\n          input?.checkValidity();\n        });\n\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    };\n  });\n\n  if (isDev() && name === undefined) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'RadioGroup: The \"name\" prop is missing, which is necessary to link the radio buttons correctly.',\n    );\n  }\n\n  const radioGroupContextValue = useMemo(\n    () => ({\n      name,\n      isDisabled: disabled,\n      ariaDisabled,\n      hasError,\n      value: controllableState,\n      onChange: setControllableState,\n      readOnly,\n      required,\n      controlState,\n    }),\n    [\n      name,\n      disabled,\n      ariaDisabled,\n      hasError,\n      controllableState,\n      setControllableState,\n      readOnly,\n      required,\n      controlState,\n    ],\n  );\n\n  return (\n    <div\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"vertical\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-disabled={propAriaDisabled}\n      ref={wrapperRef}\n      className={clsx(consumerClassName, styles.group, {\n        [styles.readOnly]: readOnly,\n      })}\n      style={consumerStyle}\n      id={id}\n      {...inputProps}\n      {...remainingProps}\n    >\n      <RadioGroupContext.Provider value={radioGroupContextValue}>\n        <Flex flexDirection=\"column\" gap={8}>\n          {children}\n        </Flex>\n      </RadioGroupContext.Provider>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </div>\n  );\n});\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a 'RadioGroup' component.\n * @public\n */\nexport const RadioGroup = withFormFieldMessageContextProvider<\n  RadioGroupProps,\n  FormControlRef\n>(RadioGroupRoot);\n\n(RadioGroup as typeof RadioGroup & { displayName: string }).displayName =\n  'RadioGroup';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\n// #region Typings\n/**\n * Properties for the RadioGroup component\n * @public\n */\nexport type RadioGroupProps = FormControlProps<\n  string,\n  (value: string, event?: FocusEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  MaskingProps;\n// #endregion\n\nconst RadioGroupRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef,\n  RadioGroupProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    value,\n    name,\n    defaultValue,\n    controlState,\n    onChange,\n    readOnly = false,\n    required: propRequired,\n    'aria-disabled': propAriaDisabled,\n    'aria-describedby': ariaDescribedby,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RadioGroupProps = props;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled,\n  });\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n  const [controlStateHasError, hint] = useFormControlState(controlState);\n\n  const hasError = controlState\n    ? controlStateHasError\n    : messagesContextState.showError;\n\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { inputProps, hintProps } = useInputHint({\n    ariaDescribedby,\n    hint,\n    hasError,\n  });\n\n  const [controllableState, setControllableState] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n    return {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          'input:checked',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        if (controlState !== undefined) {\n          return;\n        }\n\n        const inputs = wrapperRef.current?.querySelectorAll('input');\n        inputs?.forEach((input) => {\n          input?.checkValidity();\n        });\n\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    };\n  });\n\n  if (isDev() && name === undefined) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'RadioGroup: The \"name\" prop is missing, which is necessary to link the radio buttons correctly.',\n    );\n  }\n\n  const radioGroupContextValue = useMemo(\n    () => ({\n      name,\n      isDisabled: disabled,\n      ariaDisabled,\n      hasError,\n      value: controllableState,\n      onChange: setControllableState,\n      readOnly,\n      required,\n      controlState,\n    }),\n    [\n      name,\n      disabled,\n      ariaDisabled,\n      hasError,\n      controllableState,\n      setControllableState,\n      readOnly,\n      required,\n      controlState,\n    ],\n  );\n\n  return (\n    <div\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"vertical\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-disabled={propAriaDisabled}\n      ref={wrapperRef}\n      className={clsx(consumerClassName, styles.group, {\n        [styles.readOnly]: readOnly,\n      })}\n      style={consumerStyle}\n      id={id}\n      {...inputProps}\n      {...remainingProps}\n    >\n      <RadioGroupContext.Provider value={radioGroupContextValue}>\n        <Flex flexDirection=\"column\" gap={8}>\n          {children}\n        </Flex>\n      </RadioGroupContext.Provider>\n      {hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </div>\n  );\n});\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a 'RadioGroup' component.\n * @public\n */\nexport const RadioGroup = withFormFieldMessageContextProvider<\n  RadioGroupProps,\n  FormControlRef\n>(RadioGroupRoot);\n\n(RadioGroup as typeof RadioGroup & { displayName: string }).displayName =\n  'RadioGroup';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-0-1 {
+._h96idu0-3-1-1 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-0-1 {
+._h96idu1-3-1-1 {
   cursor: not-allowed;
 }
-._h96idu4-3-0-1 {
+._h96idu4-3-1-1 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu4-3-0-1._h96idu2-3-0-1 {
+._h96idu4-3-1-1._h96idu2-3-1-1 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-0-1 ._h96idu4-3-0-1 {
+._h96idu1-3-1-1 ._h96idu4-3-1-1 {
   cursor: not-allowed;
 }
-._h96idu5-3-0-1 {
+._h96idu5-3-1-1 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,25 +31,25 @@
   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-0-1);
+  background-color: var(--_bx32h3-3-1-1);
 }
-._h96idu6-3-0-1 {
+._h96idu6-3-1-1 {
   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);
 }
-._h96iduf-3-0-1 {
+._h96iduf-3-1-1 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96idug-3-0-1 {
+._h96idug-3-1-1 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96iduh-3-0-1 {
-  background-color: var(--_bx32h2-3-0-1);
+._h96iduh-3-1-1 {
+  background-color: var(--_bx32h2-3-1-1);
 }
-._h96idui-3-0-1 {
+._h96idui-3-1-1 {
   height: 100%;
-  fill: var(--_bx32h1-3-0-1);
+  fill: var(--_bx32h1-3-1-1);
 }
-._h96idu4-3-0-1:not(._h96idu3-3-0-1) ._h96idui-3-0-1 {
+._h96idu4-3-1-1:not(._h96idu3-3-1-1) ._h96idui-3-1-1 {
   display: none;
 }

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

@@ -1,13 +1,13 @@
 import "../../styles/field.css";
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checked = "_h96idu3-3-0-1";
-var disabled = "_h96idu2-3-0-1";
-var group = "_h96idu0-3-0-1";
-var innerKnob = "_h96idui-3-0-1";
-var knob = _7a468({ defaultClassName: "_h96idu5-3-0-1", variantClassNames: { disabled: { true: "_h96idu6-3-0-1" }, checked: { true: "_h96idu7-3-0-1", false: "_h96idu8-3-0-1" }, hasError: { true: "_h96idu9-3-0-1", false: "_h96idua-3-0-1" }, isFocusVisible: { true: "_h96idub-3-0-1", false: "_h96iduc-3-0-1" }, readOnly: { true: "_h96idud-3-0-1", false: "_h96idue-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false }, "_h96iduf-3-0-1"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false }, "_h96idug-3-0-1"], [{ readOnly: true, disabled: false }, "_h96iduh-3-0-1"]] });
-var label = "_h96idu4-3-0-1";
-var readOnly = "_h96idu1-3-0-1";
+var checked = "_h96idu3-3-1-1";
+var disabled = "_h96idu2-3-1-1";
+var group = "_h96idu0-3-1-1";
+var innerKnob = "_h96idui-3-1-1";
+var knob = _7a468({ defaultClassName: "_h96idu5-3-1-1", variantClassNames: { disabled: { true: "_h96idu6-3-1-1" }, checked: { true: "_h96idu7-3-1-1", false: "_h96idu8-3-1-1" }, hasError: { true: "_h96idu9-3-1-1", false: "_h96idua-3-1-1" }, isFocusVisible: { true: "_h96idub-3-1-1", false: "_h96iduc-3-1-1" }, readOnly: { true: "_h96idud-3-1-1", false: "_h96idue-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false }, "_h96iduf-3-1-1"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false }, "_h96idug-3-1-1"], [{ readOnly: true, disabled: false }, "_h96iduh-3-1-1"]] });
+var label = "_h96idu4-3-1-1";
+var readOnly = "_h96idu1-3-1-1";
 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 '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu3-3-0-1';\nexport var disabled = '_h96idu2-3-0-1';\nexport var group = '_h96idu0-3-0-1';\nexport var innerKnob = '_h96idui-3-0-1';\nexport var knob = _7a468({defaultClassName:'_h96idu5-3-0-1',variantClassNames:{disabled:{true:'_h96idu6-3-0-1'},checked:{true:'_h96idu7-3-0-1',false:'_h96idu8-3-0-1'},hasError:{true:'_h96idu9-3-0-1',false:'_h96idua-3-0-1'},isFocusVisible:{true:'_h96idub-3-0-1',false:'_h96iduc-3-0-1'},readOnly:{true:'_h96idud-3-0-1',false:'_h96idue-3-0-1'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false},'_h96iduf-3-0-1'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false},'_h96idug-3-0-1'],[{readOnly:true,disabled:false},'_h96iduh-3-0-1']]});\nexport var label = '_h96idu4-3-0-1';\nexport var readOnly = '_h96idu1-3-0-1';"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu3-3-1-1';\nexport var disabled = '_h96idu2-3-1-1';\nexport var group = '_h96idu0-3-1-1';\nexport var innerKnob = '_h96idui-3-1-1';\nexport var knob = _7a468({defaultClassName:'_h96idu5-3-1-1',variantClassNames:{disabled:{true:'_h96idu6-3-1-1'},checked:{true:'_h96idu7-3-1-1',false:'_h96idu8-3-1-1'},hasError:{true:'_h96idu9-3-1-1',false:'_h96idua-3-1-1'},isFocusVisible:{true:'_h96idub-3-1-1',false:'_h96iduc-3-1-1'},readOnly:{true:'_h96idud-3-1-1',false:'_h96idue-3-1-1'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false},'_h96iduf-3-1-1'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false},'_h96idug-3-1-1'],[{readOnly:true,disabled:false},'_h96iduh-3-1-1']]});\nexport var label = '_h96idu4-3-1-1';\nexport var readOnly = '_h96idu1-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,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,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,SAAQ,OAAM,UAAS,OAAM,gBAAe,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACllB,IAAI,QAAQ;AACZ,IAAI,WAAW;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./SearchInput.css";
-var searchInput = "_1mumub80-3-0-1";
+var searchInput = "_1mumub80-3-1-1";
 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-0-1';"],
+  "sourcesContent": ["import './SearchInput.css';\nexport var searchInput = '_1mumub80-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/forms/select/Select.js

@@ -127,8 +127,16 @@ function SelectFwd(props, forwardedRef) {
     multiple: multiple === true
   });
   const hiddenSelectRef = useRef(null);
-  const { onBlur: validationOnBlur } = useFormFieldValidation(hiddenSelectRef);
   const [triggerRef, setTriggerRef] = useState(null);
+  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({
+    propDisabled: propsDisabled,
+    propRequired: propsRequired,
+    propId,
+    propAriaDisabled: ariaDisabledProp
+  });
+  const { onBlur: validationOnBlur } = useFormFieldValidation(hiddenSelectRef, {
+    required
+  });
   const menuOpenReducer = useCallback(
     (state, action) => {
       if (readOnly) {
@@ -147,12 +155,6 @@ function SelectFwd(props, forwardedRef) {
   );
   const [menuOpen, dispatch] = useReducer(menuOpenReducer, false);
   const [isFocusWithin, setIsFocusWithin] = useState(false);
-  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({
-    propDisabled: propsDisabled,
-    propRequired: propsRequired,
-    propId,
-    propAriaDisabled: ariaDisabledProp
-  });
   const [filterValue, setFilterValue] = useControllableState({
     value: filterValueProp,
     defaultValue: filterDefaultValueProp,