@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/filters/timeframe-selector/utils/timeframe-selection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/utils/timeframe-selection.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { type RequireAtLeastOne } from 'type-fest';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type { TimeValue, Timeframe } from '../../../core/types/time.js';\nimport { getFromToValues } from '../../../forms/forms-core/time/timeParser.js';\n\n/**\n * Check if a date is a given min or max. Returns false if both min and max are missing.\n * @internal\n */\nexport function dateIsMinMax(\n  date: TimeValue,\n  min?: string,\n  max?: string,\n): boolean {\n  if (!min && !max) {\n    return false;\n  }\n  const timezone = getTimezone();\n  const relativeNow = TZDateMini.tz(timezone).getTime();\n\n  const isoDate = parseTimeAsTimeValue(date.value, relativeNow)?.absoluteDate;\n  const tempDate = isoDate ? new TZDateMini(isoDate, timezone) : null;\n\n  if (!tempDate) {\n    return false;\n  }\n\n  const minIsoDate = parseTimeAsTimeValue(min, relativeNow)?.absoluteDate;\n  const maxIsoDate = parseTimeAsTimeValue(max, relativeNow)?.absoluteDate;\n  const minDate = minIsoDate ? new TZDateMini(minIsoDate, timezone) : null;\n  const maxDate = maxIsoDate ? new TZDateMini(maxIsoDate, timezone) : null;\n\n  if (minDate && minDate.getTime() === tempDate.getTime()) {\n    return true;\n  }\n\n  if (maxDate && maxDate.getTime() === tempDate.getTime()) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Check if the date value is larger than the max value.\n * Returns false if the max or value are not defined.\n * @internal\n */\nexport function isBiggerThan(candidate?: string, threshold?: string): boolean {\n  if (!threshold || !candidate) {\n    return false;\n  }\n\n  const relativeNow = TZDateMini.tz(getTimezone()).getTime();\n\n  const maxIsoDate = parseTimeAsTimeValue(threshold, relativeNow)?.absoluteDate;\n  const valueIsoDate = parseTimeAsTimeValue(\n    candidate,\n    relativeNow,\n  )?.absoluteDate;\n\n  if (!maxIsoDate || !valueIsoDate) {\n    return false;\n  }\n\n  const maxDate = new TZDateMini(maxIsoDate, getTimezone());\n  const valueDate = new TZDateMini(valueIsoDate, getTimezone());\n\n  return valueDate.getTime() > maxDate.getTime();\n}\n\n/**\n * Check if the date value is smaller than the min value.\n * Returns false if the value or min are not defined.\n * @internal\n */\nexport function isSmallerThan(candidate?: string, threshold?: string): boolean {\n  if (!threshold || !candidate) {\n    return false;\n  }\n\n  const relativeNow = TZDateMini.tz(getTimezone()).getTime();\n\n  const minIsoDate = parseTimeAsTimeValue(threshold, relativeNow)?.absoluteDate;\n  const valueIsoDate = parseTimeAsTimeValue(\n    candidate,\n    relativeNow,\n  )?.absoluteDate;\n\n  if (!minIsoDate || !valueIsoDate) {\n    return false;\n  }\n\n  const minDate = new TZDateMini(minIsoDate, getTimezone());\n  const valueDate = new TZDateMini(valueIsoDate, getTimezone());\n\n  return valueDate.getTime() < minDate.getTime();\n}\n\n/**\n * Check if the value is outside the min - max range.\n * Returns false if the value is not defined, it the from or to values are undefined, or if min and max are both missing.\n * @internal\n */\nexport function _isOutsideRange(\n  value?:\n    | {\n        /** Start of the time frame. */\n        from?: string;\n        /** End of the time frame. */\n        to?: string;\n      }\n    | RequireAtLeastOne<Timeframe>\n    | null,\n  min?: string,\n  max?: string,\n) {\n  if (!value || (!min && !max)) {\n    return false;\n  }\n\n  const { valueFrom, valueTo } = getFromToValues(value);\n\n  // Min date needs to be larger than from and to in order to be considered\n  // outside of the range.\n  if (min && (isSmallerThan(valueFrom, min) || isSmallerThan(valueTo, min))) {\n    return true;\n  }\n\n  // Max date needs to be smaller than from and to in order to be considered\n  // outside of the range.\n  if (max && (isBiggerThan(valueFrom, max) || isBiggerThan(valueTo, max))) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Type guard function that will check if the value is Timeframe with absoluteDate.\n * @internal\n */\nexport function isTimeframeWithFromAndTo(\n  date:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null,\n): date is Timeframe {\n  return (\n    typeof date?.from === 'object' &&\n    typeof date?.to === 'object' &&\n    date.from.absoluteDate !== '' &&\n    date.to.absoluteDate !== ''\n  );\n}\n\n/**\n * Type guard function that will check if the value is a Timeframe or from and to String.\n * @internal\n */\nexport function isTimeframeOrFromToString(\n  date:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null,\n): date is { from: string; to: string } | Timeframe {\n  return (\n    (typeof date?.from === 'string' && typeof date?.to === 'string') ||\n    isTimeframeWithFromAndTo(date)\n  );\n}\n"],
-  "mappings": "AAAA,SAAS,kBAAkB;AAG3B,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAG5B,SAAS,uBAAuB;AAMzB,SAAS,aACd,MACA,KACA,KACS;AACT,MAAI,CAAC,OAAO,CAAC,KAAK;AAChB,WAAO;AAAA,EACT;AACA,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,WAAW,GAAG,QAAQ,EAAE,QAAQ;AAEpD,QAAM,UAAU,qBAAqB,KAAK,OAAO,WAAW,GAAG;AAC/D,QAAM,WAAW,UAAU,IAAI,WAAW,SAAS,QAAQ,IAAI;AAE/D,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,qBAAqB,KAAK,WAAW,GAAG;AAC3D,QAAM,aAAa,qBAAqB,KAAK,WAAW,GAAG;AAC3D,QAAM,UAAU,aAAa,IAAI,WAAW,YAAY,QAAQ,IAAI;AACpE,QAAM,UAAU,aAAa,IAAI,WAAW,YAAY,QAAQ,IAAI;AAEpE,MAAI,WAAW,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG;AACvD,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG;AACvD,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAOO,SAAS,aAAa,WAAoB,WAA6B;AAC5E,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAEzD,QAAM,aAAa,qBAAqB,WAAW,WAAW,GAAG;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF,GAAG;AAEH,MAAI,CAAC,cAAc,CAAC,cAAc;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,WAAW,YAAY,YAAY,CAAC;AACxD,QAAM,YAAY,IAAI,WAAW,cAAc,YAAY,CAAC;AAE5D,SAAO,UAAU,QAAQ,IAAI,QAAQ,QAAQ;AAC/C;AAOO,SAAS,cAAc,WAAoB,WAA6B;AAC7E,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAEzD,QAAM,aAAa,qBAAqB,WAAW,WAAW,GAAG;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF,GAAG;AAEH,MAAI,CAAC,cAAc,CAAC,cAAc;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,WAAW,YAAY,YAAY,CAAC;AACxD,QAAM,YAAY,IAAI,WAAW,cAAc,YAAY,CAAC;AAE5D,SAAO,UAAU,QAAQ,IAAI,QAAQ,QAAQ;AAC/C;AAOO,SAAS,gBACd,OASA,KACA,KACA;AACA,MAAI,CAAC,SAAU,CAAC,OAAO,CAAC,KAAM;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AAIpD,MAAI,QAAQ,cAAc,WAAW,GAAG,KAAK,cAAc,SAAS,GAAG,IAAI;AACzE,WAAO;AAAA,EACT;AAIA,MAAI,QAAQ,aAAa,WAAW,GAAG,KAAK,aAAa,SAAS,GAAG,IAAI;AACvE,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAMO,SAAS,yBACd,MAImB;AACnB,SACE,OAAO,MAAM,SAAS,YACtB,OAAO,MAAM,OAAO,YACpB,KAAK,KAAK,iBAAiB,MAC3B,KAAK,GAAG,iBAAiB;AAE7B;AAMO,SAAS,0BACd,MAIkD;AAClD,SACG,OAAO,MAAM,SAAS,YAAY,OAAO,MAAM,OAAO,YACvD,yBAAyB,IAAI;AAEjC;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { type RequireAtLeastOne } from 'type-fest';\n\nimport { parseTimeAsTimeValue } from '@dynatrace-sdk/units';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport type { TimeValue, Timeframe } from '../../../core/types/time.js';\nimport { getFromToValues } from '../../../forms/forms-core/time/timeParser.js';\n\n/**\n * Check if a date is a given min or max. Returns false if both min and max are missing.\n * @internal\n */\nexport function dateIsMinMax(\n  date: TimeValue,\n  min?: string,\n  max?: string,\n): boolean {\n  if (!min && !max) {\n    return false;\n  }\n  const timezone = getTimezone();\n  const relativeNow = TZDateMini.tz(timezone).getTime();\n\n  const isoDate = parseTimeAsTimeValue(date.value, relativeNow)?.absoluteDate;\n  const tempDate = isoDate ? new TZDateMini(isoDate, timezone) : null;\n\n  if (!tempDate) {\n    return false;\n  }\n\n  const minIsoDate = parseTimeAsTimeValue(min, relativeNow)?.absoluteDate;\n  const maxIsoDate = parseTimeAsTimeValue(max, relativeNow)?.absoluteDate;\n  const minDate = minIsoDate ? new TZDateMini(minIsoDate, timezone) : null;\n  const maxDate = maxIsoDate ? new TZDateMini(maxIsoDate, timezone) : null;\n\n  if (minDate && minDate.getTime() === tempDate.getTime()) {\n    return true;\n  }\n\n  if (maxDate && maxDate.getTime() === tempDate.getTime()) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Check if the date value is larger than the max value.\n * Returns false if the max or value are not defined.\n * @internal\n */\nexport function isBiggerThan(candidate?: string, threshold?: string): boolean {\n  if (!threshold || !candidate) {\n    return false;\n  }\n\n  const relativeNow = TZDateMini.tz(getTimezone()).getTime();\n\n  const maxIsoDate = parseTimeAsTimeValue(threshold, relativeNow)?.absoluteDate;\n  const valueIsoDate = parseTimeAsTimeValue(\n    candidate,\n    relativeNow,\n  )?.absoluteDate;\n\n  if (!maxIsoDate || !valueIsoDate) {\n    return false;\n  }\n\n  const maxDate = new TZDateMini(maxIsoDate, getTimezone());\n  const valueDate = new TZDateMini(valueIsoDate, getTimezone());\n\n  return valueDate.getTime() > maxDate.getTime();\n}\n\n/**\n * Check if the date value is smaller than the min value.\n * Returns false if the value or min are not defined.\n * @internal\n */\nexport function isSmallerThan(candidate?: string, threshold?: string): boolean {\n  if (!threshold || !candidate) {\n    return false;\n  }\n\n  const relativeNow = TZDateMini.tz(getTimezone()).getTime();\n\n  const minIsoDate = parseTimeAsTimeValue(threshold, relativeNow)?.absoluteDate;\n  const valueIsoDate = parseTimeAsTimeValue(\n    candidate,\n    relativeNow,\n  )?.absoluteDate;\n\n  if (!minIsoDate || !valueIsoDate) {\n    return false;\n  }\n\n  const minDate = new TZDateMini(minIsoDate, getTimezone());\n  const valueDate = new TZDateMini(valueIsoDate, getTimezone());\n\n  return valueDate.getTime() < minDate.getTime();\n}\n\n/**\n * Check if the value is outside the min - max range.\n * Returns false if the value is not defined, it the from or to values are undefined, or if min and max are both missing.\n * @internal\n */\nexport function isOutsideRange(\n  value?:\n    | {\n        /** Start of the time frame. */\n        from?: string;\n        /** End of the time frame. */\n        to?: string;\n      }\n    | RequireAtLeastOne<Timeframe>\n    | null,\n  min?: string,\n  max?: string,\n) {\n  if (!value || (!min && !max)) {\n    return false;\n  }\n\n  const { valueFrom, valueTo } = getFromToValues(value);\n\n  // Min date needs to be larger than from and to in order to be considered\n  // outside of the range.\n  if (min && (isSmallerThan(valueFrom, min) || isSmallerThan(valueTo, min))) {\n    return true;\n  }\n\n  // Max date needs to be smaller than from and to in order to be considered\n  // outside of the range.\n  if (max && (isBiggerThan(valueFrom, max) || isBiggerThan(valueTo, max))) {\n    return true;\n  }\n\n  return false;\n}\n\n/**\n * Type guard function that will check if the value is Timeframe with absoluteDate.\n * @internal\n */\nexport function isTimeframeWithFromAndTo(\n  date:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null,\n): date is Timeframe {\n  return (\n    typeof date?.from === 'object' &&\n    typeof date?.to === 'object' &&\n    date.from.absoluteDate !== '' &&\n    date.to.absoluteDate !== ''\n  );\n}\n\n/**\n * Type guard function that will check if the value is a Timeframe or from and to String.\n * @internal\n */\nexport function isTimeframeOrFromToString(\n  date:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null,\n): date is { from: string; to: string } | Timeframe {\n  return (\n    (typeof date?.from === 'string' && typeof date?.to === 'string') ||\n    isTimeframeWithFromAndTo(date)\n  );\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAG3B,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAG5B,SAAS,uBAAuB;AAMzB,SAAS,aACd,MACA,KACA,KACS;AACT,MAAI,CAAC,OAAO,CAAC,KAAK;AAChB,WAAO;AAAA,EACT;AACA,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,WAAW,GAAG,QAAQ,EAAE,QAAQ;AAEpD,QAAM,UAAU,qBAAqB,KAAK,OAAO,WAAW,GAAG;AAC/D,QAAM,WAAW,UAAU,IAAI,WAAW,SAAS,QAAQ,IAAI;AAE/D,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,qBAAqB,KAAK,WAAW,GAAG;AAC3D,QAAM,aAAa,qBAAqB,KAAK,WAAW,GAAG;AAC3D,QAAM,UAAU,aAAa,IAAI,WAAW,YAAY,QAAQ,IAAI;AACpE,QAAM,UAAU,aAAa,IAAI,WAAW,YAAY,QAAQ,IAAI;AAEpE,MAAI,WAAW,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG;AACvD,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,QAAQ,QAAQ,MAAM,SAAS,QAAQ,GAAG;AACvD,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAOO,SAAS,aAAa,WAAoB,WAA6B;AAC5E,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAEzD,QAAM,aAAa,qBAAqB,WAAW,WAAW,GAAG;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF,GAAG;AAEH,MAAI,CAAC,cAAc,CAAC,cAAc;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,WAAW,YAAY,YAAY,CAAC;AACxD,QAAM,YAAY,IAAI,WAAW,cAAc,YAAY,CAAC;AAE5D,SAAO,UAAU,QAAQ,IAAI,QAAQ,QAAQ;AAC/C;AAOO,SAAS,cAAc,WAAoB,WAA6B;AAC7E,MAAI,CAAC,aAAa,CAAC,WAAW;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW,GAAG,YAAY,CAAC,EAAE,QAAQ;AAEzD,QAAM,aAAa,qBAAqB,WAAW,WAAW,GAAG;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,EACF,GAAG;AAEH,MAAI,CAAC,cAAc,CAAC,cAAc;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,IAAI,WAAW,YAAY,YAAY,CAAC;AACxD,QAAM,YAAY,IAAI,WAAW,cAAc,YAAY,CAAC;AAE5D,SAAO,UAAU,QAAQ,IAAI,QAAQ,QAAQ;AAC/C;AAOO,SAAS,eACd,OASA,KACA,KACA;AACA,MAAI,CAAC,SAAU,CAAC,OAAO,CAAC,KAAM;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AAIpD,MAAI,QAAQ,cAAc,WAAW,GAAG,KAAK,cAAc,SAAS,GAAG,IAAI;AACzE,WAAO;AAAA,EACT;AAIA,MAAI,QAAQ,aAAa,WAAW,GAAG,KAAK,aAAa,SAAS,GAAG,IAAI;AACvE,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAMO,SAAS,yBACd,MAImB;AACnB,SACE,OAAO,MAAM,SAAS,YACtB,OAAO,MAAM,OAAO,YACpB,KAAK,KAAK,iBAAiB,MAC3B,KAAK,GAAG,iBAAiB;AAE7B;AAMO,SAAS,0BACd,MAIkD;AAClD,SACG,OAAO,MAAM,SAAS,YAAY,OAAO,MAAM,OAAO,YACvD,yBAAyB,IAAI;AAEjC;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
-._1a8lqy96-3-0-1 {
-  --_1a8lqy95-3-0-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_yfwka30-3-0-1: var(--_1a8lqy95-3-0-1);
+._1a8lqy96-3-1-1 {
+  --_1a8lqy95-3-1-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_yfwka30-3-1-1: var(--_1a8lqy95-3-1-1);
   position: relative;
   display: flex;
   min-width: 0;
@@ -14,55 +14,55 @@
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
-  background-color: var(--_1a8lqy95-3-0-1);
+  background-color: var(--_1a8lqy95-3-1-1);
 }
-._1a8lqy96-3-0-1:hover {
-  --_1a8lqy95-3-0-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+._1a8lqy96-3-1-1:hover {
+  --_1a8lqy95-3-1-1: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy96-3-0-1:active {
-  --_1a8lqy95-3-0-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
+._1a8lqy96-3-1-1:active {
+  --_1a8lqy95-3-1-1: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy91-3-0-1 ._1a8lqy96-3-0-1 {
+._1a8lqy91-3-1-1 ._1a8lqy96-3-1-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy91-3-0-1:not(._1a8lqy92-3-0-1) ._1a8lqy96-3-0-1:hover {
+._1a8lqy91-3-1-1:not(._1a8lqy92-3-1-1) ._1a8lqy96-3-1-1:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy91-3-0-1:not(._1a8lqy92-3-0-1) ._1a8lqy96-3-0-1:active {
+._1a8lqy91-3-1-1:not(._1a8lqy92-3-1-1) ._1a8lqy96-3-1-1:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy92-3-0-1 ._1a8lqy96-3-0-1 {
+._1a8lqy92-3-1-1 ._1a8lqy96-3-1-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1a8lqy94-3-0-1:not(:hover) ._1a8lqy96-3-0-1 {
+._1a8lqy94-3-1-1:not(:hover) ._1a8lqy96-3-1-1 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy94-3-0-1:not(:hover) ._1a8lqy96-3-0-1:hover {
+._1a8lqy94-3-1-1:not(:hover) ._1a8lqy96-3-1-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1a8lqy94-3-0-1:not(:hover) ._1a8lqy96-3-0-1:active {
+._1a8lqy94-3-1-1:not(:hover) ._1a8lqy96-3-1-1:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1a8lqy94-3-0-1._1a8lqy92-3-0-1 ._1a8lqy96-3-0-1:is(:not(:hover, :active), :hover, :active) {
+._1a8lqy94-3-1-1._1a8lqy92-3-1-1 ._1a8lqy96-3-1-1:is(:not(:hover, :active), :hover, :active) {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
 }
-._1a8lqy97-3-0-1 {
+._1a8lqy97-3-1-1 {
   padding-right: 0;
   padding-left: 0;
 }
-._1a8lqy98-3-0-1 {
+._1a8lqy98-3-1-1 {
   padding-right: 0;
 }
-._1a8lqy99-3-0-1 {
+._1a8lqy99-3-1-1 {
   padding-right: unset;
 }
-._1a8lqy9a-3-0-1 {
+._1a8lqy9a-3-1-1 {
   padding-left: unset;
 }
-._1a8lqy9b-3-0-1 {
+._1a8lqy9b-3-1-1 {
   display: block;
   text-overflow: ellipsis;
   appearance: none;
@@ -76,87 +76,87 @@
   min-width: 0;
   color: inherit;
 }
-._1a8lqy9b-3-0-1:read-only {
+._1a8lqy9b-3-1-1:read-only {
   cursor: not-allowed;
 }
-._1a8lqy9b-3-0-1:focus {
+._1a8lqy9b-3-1-1:focus {
   outline: none;
 }
-._1a8lqy9b-3-0-1::placeholder {
+._1a8lqy9b-3-1-1::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1a8lqy9b-3-0-1::-webkit-search-cancel-button {
+._1a8lqy9b-3-1-1::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-._1a8lqy9b-3-0-1::-ms-reveal {
+._1a8lqy9b-3-1-1::-ms-reveal {
   display: none;
 }
-._1a8lqy91-3-0-1 ._1a8lqy9b-3-0-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-0-1 ._1a8lqy9b-3-0-1::placeholder {
+._1a8lqy91-3-1-1 ._1a8lqy9b-3-1-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy91-3-1-1 ._1a8lqy9b-3-1-1::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
   -webkit-text-fill-color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1a8lqy92-3-0-1 ._1a8lqy9b-3-0-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-0-1 ._1a8lqy9b-3-0-1::placeholder {
+._1a8lqy92-3-1-1 ._1a8lqy9b-3-1-1:-webkit-autofill:is(:not(:hover, :focus), :hover, :focus), ._1a8lqy92-3-1-1 ._1a8lqy9b-3-1-1::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   -webkit-text-fill-color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1a8lqy92-3-0-1 ._1a8lqy9b-3-0-1 {
+._1a8lqy92-3-1-1 ._1a8lqy9b-3-1-1 {
   cursor: not-allowed;
 }
-button ._1a8lqy9b-3-0-1 {
+button ._1a8lqy9b-3-1-1 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9c-3-0-1 {
+._1a8lqy9c-3-1-1 {
   margin: 0 var(--dt-spacings-size-4, 4px);
   padding: var(--dt-spacings-size-2, 2px) 0;
   width: var(--dt-spacings-size-28, 28px);
 }
-._1a8lqy9c-3-0-1:is(button._1a8lqy9c-3-0-1._1a8lqy9c-3-0-1) {
+._1a8lqy9c-3-1-1:is(button._1a8lqy9c-3-1-1._1a8lqy9c-3-1-1) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1a8lqy9d-3-0-1 {
+._1a8lqy9d-3-1-1 {
   margin-top: var(--dt-spacings-size-6, 6px);
   margin-bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1a8lqy91-3-0-1:not(._1a8lqy92-3-0-1) ._1a8lqy9d-3-0-1 {
+._1a8lqy91-3-1-1:not(._1a8lqy92-3-1-1) ._1a8lqy9d-3-1-1 {
   background-color: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1a8lqy94-3-0-1:not(._1a8lqy92-3-0-1):hover button {
+._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1):hover button {
   transition-property: background-color, box-shadow, border-color;
   transition-duration: var(--dt-timings-fast-quick, 150ms);
   transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1)), var(--dt-easings-decelerate, cubic-bezier(0, 0, 0.2, 1));
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy94-3-0-1:not(._1a8lqy92-3-0-1):hover button:active {
+._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1):hover button:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1a8lqy94-3-0-1:not(._1a8lqy92-3-0-1):hover button:hover {
+._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1):hover button:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1a8lqy94-3-0-1:not(._1a8lqy92-3-0-1)._1a8lqy91-3-0-1:hover button {
+._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1)._1a8lqy91-3-1-1:hover button {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy94-3-0-1:not(._1a8lqy92-3-0-1)._1a8lqy91-3-0-1:hover button:active {
+._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1)._1a8lqy91-3-1-1:hover button:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1a8lqy94-3-0-1:not(._1a8lqy92-3-0-1)._1a8lqy91-3-0-1:hover button:hover {
+._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1)._1a8lqy91-3-1-1:hover button:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._1a8lqy94-3-0-1:not(._1a8lqy92-3-0-1):hover button:is(:disabled,[aria-disabled=true]) {
+._1a8lqy94-3-1-1:not(._1a8lqy92-3-1-1):hover button:is(:disabled,[aria-disabled=true]) {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1a8lqy96-3-0-1:has(._1a8lqy9c-3-0-1:hover) {
+._1a8lqy96-3-1-1:has(._1a8lqy9c-3-1-1:hover) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1a8lqy91-3-0-1 ._1a8lqy96-3-0-1:has(._1a8lqy9c-3-0-1:hover):not(._1a8lqy92-3-0-1) {
+._1a8lqy91-3-1-1 ._1a8lqy96-3-1-1:has(._1a8lqy9c-3-1-1:hover):not(._1a8lqy92-3-1-1) {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1a8lqy96-3-0-1:hover ._1a8lqy9d-3-0-1 {
+._1a8lqy96-3-1-1:hover ._1a8lqy9d-3-1-1 {
   background-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
 }
-._1a8lqy91-3-0-1 ._1a8lqy96-3-0-1:hover ._1a8lqy9d-3-0-1 {
+._1a8lqy91-3-1-1 ._1a8lqy96-3-1-1:hover ._1a8lqy9d-3-1-1 {
   background-color: var(--dt-colors-border-critical-default-active, #f3bebd);
 }
-._1a8lqy96-3-0-1._1a8lqy9e-3-0-1 div svg {
+._1a8lqy96-3-1-1._1a8lqy9e-3-1-1 div svg {
   fill: currentcolor;
 }

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

@@ -79,6 +79,12 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     type,
     placeholder,
     value,
+    pattern,
+    max,
+    min,
+    step,
+    maxLength,
+    minLength,
     ...remainingProps
   } = props;
   const inputValue = value ?? "";
@@ -108,6 +114,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   });
   const { onChange, onBlur, onInvalid, ariaProps } = useFormFieldValidation(
     inputRef,
+    { required, pattern, max, min, step, maxLength, minLength, type },
     {
       "aria-label": ariaLabelProp,
       "aria-labelledby": ariaLabelledByProp,
@@ -206,6 +213,12 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
                             placeholder,
                             type,
                             value: inputValue,
+                            pattern,
+                            max,
+                            min,
+                            step,
+                            maxLength,
+                            minLength,
                             ..._mergeProps(
                               remainingInputProps,
                               focusProps,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport type { BaseInputProps } from './base-input.types.js';\nimport * as styles from './BaseInput.sty.js';\nimport { BaseInputButton } from './BaseInputButton.js';\nimport { BaseInputPrefix, BaseInputSuffix } from './BaseInputContent.js';\nimport { BaseInputContext } from './contexts/BaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSplitProps } from '../../core/hooks/useSplitProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useAutofillEvent } from '../hooks/useAutofillEvent.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\ntype SlotContent = { buttons: ReactElement[]; rest: ReactNode[] };\n\nfunction getSlots(children: ReactNode) {\n  const validSlots = Children.toArray(children).filter(\n    isValidElement<PropsWithChildren>,\n  );\n\n  let prefix: SlotContent = { buttons: [], rest: [] };\n  let suffix: SlotContent = { buttons: [], rest: [] };\n\n  for (const slot of validSlots) {\n    const buttons: SlotContent['buttons'] = [];\n    const rest: SlotContent['rest'] = [];\n\n    const slotChildren = Children.toArray(slot.props.children);\n\n    for (const child of slotChildren) {\n      if (isSlot(child, BaseInputButton)) {\n        buttons.push(child);\n      } else {\n        rest.push(child);\n      }\n    }\n\n    if (slot.type === BaseInputPrefix) {\n      prefix = { buttons, rest };\n    }\n    if (slot.type === BaseInputSuffix) {\n      suffix = { buttons, rest };\n    }\n  }\n\n  return { prefix, suffix };\n}\n\nconst BaseInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  BaseInputProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    variant = 'default',\n    controlState,\n    readOnly,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    onClear,\n    type,\n    placeholder,\n    value,\n    ...remainingProps\n  } = props;\n\n  // assures that always an empty string is set\n  const inputValue = value ?? '';\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const [hasFormControlError, hint] = useFormControlState(controlState);\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    hint,\n    hasError: hasFormControlError,\n  });\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const hasError = hasFormControlError || state.showError;\n\n  const { isAutoFilled, onAnimationStart } = useAutofillEvent();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const hasOnClear = onClear !== undefined;\n  const showClearButton = hasOnClear && inputValue !== '';\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: hasError && !(disabled || ariaDisabled) ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const { onChange, onBlur, onInvalid, ariaProps } = useFormFieldValidation(\n    inputRef,\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n  );\n  const eventListener = { onChange, onBlur, onInvalid };\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlRef<HTMLDivElement> => ({\n      element: wrapperRef.current,\n      inputRef: inputRef.current,\n      focus() {\n        inputRef.current?.focus();\n      },\n      validate() {\n        inputRef.current?.checkValidity();\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [dispatch],\n  );\n\n  const slots = useMemo(() => getSlots(children), [children]);\n  const hasInnerPrefix = slots.prefix.rest.length > 0;\n  const hasInnerSuffix = slots.suffix.rest.length > 0;\n\n  const {\n    matchedProps: dataAttributesProps,\n    remainingProps: remainingInputProps,\n  } = useSplitProps(remainingProps, [(key: string) => key.startsWith('data-')]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={wrapperRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...dataAttributesProps}\n    >\n      <InputGroup\n        style={{\n          gridAutoColumns: `${'auto '.repeat(\n            slots.prefix.buttons.length,\n          )}1fr${' auto'.repeat(slots.suffix.buttons.length)}`,\n        }}\n        className={clsx(styles.wrapper, styles.variant[variant], {\n          [styles.hasError]: hasError,\n          [styles.disabled]: disabledOrAriaDisabled,\n        })}\n      >\n        <BaseInputContext.Provider\n          value={{ variant, hasError, disabled, ariaDisabled }}\n        >\n          {slots.prefix.buttons}\n          <div\n            className={clsx(\n              styles.container,\n              {\n                [styles.isAutoFilled]: isAutoFilled,\n              },\n              inputGroupClassName,\n              focusClassName,\n              {\n                [`${styles.containerPadding.none}`]:\n                  hasOnClear && hasInnerPrefix,\n                [`${styles.containerPadding.rightNone}`]:\n                  hasOnClear && !hasInnerPrefix,\n                [`${styles.containerPadding.leftUnset}`]: hasInnerPrefix,\n                [`${styles.containerPadding.rightUnset}`]: hasInnerSuffix,\n              },\n            )}\n            onClick={() => inputRef.current?.focus()} // clicking on the icons should focus the input\n          >\n            {hasInnerPrefix && (\n              <BaseInputPrefix>{slots.prefix.rest}</BaseInputPrefix>\n            )}\n\n            <input\n              id={id}\n              ref={inputRef}\n              required={required}\n              disabled={!!disabled}\n              aria-disabled={ariaDisabled}\n              onAnimationStart={onAnimationStart}\n              readOnly={readOnly}\n              className={styles.input}\n              placeholder={placeholder}\n              type={type}\n              value={inputValue}\n              {..._mergeProps(\n                remainingInputProps,\n                focusProps,\n                controlState\n                  ? { 'aria-label': ariaLabelProp, ...inputProps }\n                  : ariaProps,\n                !controlState ? eventListener : {}, // escape hatch to not interfere with the old implementation\n              )}\n            />\n            {hasInnerSuffix && (\n              <BaseInputSuffix>{slots.suffix.rest}</BaseInputSuffix>\n            )}\n            {!readOnly && (\n              <>\n                {hasInnerSuffix && showClearButton && (\n                  <Divider orientation=\"vertical\" className={styles.divider} />\n                )}\n                {showClearButton && (\n                  <Button\n                    onClick={onClear}\n                    className={styles.clearIconButton}\n                    color={hasError ? 'critical' : 'neutral'}\n                    disabled={disabledOrAriaDisabled}\n                  >\n                    <XmarkIcon />\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n          {slots.suffix.buttons}\n        </BaseInputContext.Provider>\n      </InputGroup>\n      {controlState && hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabledOrAriaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * Base component used internally for our input components.\n * @internal\n */\nexport const BaseInput = Object.assign(BaseInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(BaseInput as typeof BaseInput & { displayName: string }).displayName =\n  'BaseInput';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport type { BaseInputProps } from './base-input.types.js';\nimport * as styles from './BaseInput.sty.js';\nimport { BaseInputButton } from './BaseInputButton.js';\nimport { BaseInputPrefix, BaseInputSuffix } from './BaseInputContent.js';\nimport { BaseInputContext } from './contexts/BaseInputContext.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSplitProps } from '../../core/hooks/useSplitProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useAutofillEvent } from '../hooks/useAutofillEvent.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\ntype SlotContent = { buttons: ReactElement[]; rest: ReactNode[] };\n\nfunction getSlots(children: ReactNode) {\n  const validSlots = Children.toArray(children).filter(\n    isValidElement<PropsWithChildren>,\n  );\n\n  let prefix: SlotContent = { buttons: [], rest: [] };\n  let suffix: SlotContent = { buttons: [], rest: [] };\n\n  for (const slot of validSlots) {\n    const buttons: SlotContent['buttons'] = [];\n    const rest: SlotContent['rest'] = [];\n\n    const slotChildren = Children.toArray(slot.props.children);\n\n    for (const child of slotChildren) {\n      if (isSlot(child, BaseInputButton)) {\n        buttons.push(child);\n      } else {\n        rest.push(child);\n      }\n    }\n\n    if (slot.type === BaseInputPrefix) {\n      prefix = { buttons, rest };\n    }\n    if (slot.type === BaseInputSuffix) {\n      suffix = { buttons, rest };\n    }\n  }\n\n  return { prefix, suffix };\n}\n\nconst BaseInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  BaseInputProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    variant = 'default',\n    controlState,\n    readOnly,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    onClear,\n    type,\n    placeholder,\n    value,\n    pattern,\n    max,\n    min,\n    step,\n    maxLength,\n    minLength,\n    ...remainingProps\n  } = props;\n\n  // assures that always an empty string is set\n  const inputValue = value ?? '';\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const [hasFormControlError, hint] = useFormControlState(controlState);\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    hint,\n    hasError: hasFormControlError,\n  });\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const hasError = hasFormControlError || state.showError;\n\n  const { isAutoFilled, onAnimationStart } = useAutofillEvent();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const hasOnClear = onClear !== undefined;\n  const showClearButton = hasOnClear && inputValue !== '';\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: hasError && !(disabled || ariaDisabled) ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const { onChange, onBlur, onInvalid, ariaProps } = useFormFieldValidation(\n    inputRef,\n    { required, pattern, max, min, step, maxLength, minLength, type },\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n  );\n  const eventListener = { onChange, onBlur, onInvalid };\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlRef<HTMLDivElement> => ({\n      element: wrapperRef.current,\n      inputRef: inputRef.current,\n      focus() {\n        inputRef.current?.focus();\n      },\n      validate() {\n        inputRef.current?.checkValidity();\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [dispatch],\n  );\n\n  const slots = useMemo(() => getSlots(children), [children]);\n  const hasInnerPrefix = slots.prefix.rest.length > 0;\n  const hasInnerSuffix = slots.suffix.rest.length > 0;\n\n  const {\n    matchedProps: dataAttributesProps,\n    remainingProps: remainingInputProps,\n  } = useSplitProps(remainingProps, [(key: string) => key.startsWith('data-')]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={wrapperRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...dataAttributesProps}\n    >\n      <InputGroup\n        style={{\n          gridAutoColumns: `${'auto '.repeat(\n            slots.prefix.buttons.length,\n          )}1fr${' auto'.repeat(slots.suffix.buttons.length)}`,\n        }}\n        className={clsx(styles.wrapper, styles.variant[variant], {\n          [styles.hasError]: hasError,\n          [styles.disabled]: disabledOrAriaDisabled,\n        })}\n      >\n        <BaseInputContext.Provider\n          value={{ variant, hasError, disabled, ariaDisabled }}\n        >\n          {slots.prefix.buttons}\n          <div\n            className={clsx(\n              styles.container,\n              {\n                [styles.isAutoFilled]: isAutoFilled,\n              },\n              inputGroupClassName,\n              focusClassName,\n              {\n                [`${styles.containerPadding.none}`]:\n                  hasOnClear && hasInnerPrefix,\n                [`${styles.containerPadding.rightNone}`]:\n                  hasOnClear && !hasInnerPrefix,\n                [`${styles.containerPadding.leftUnset}`]: hasInnerPrefix,\n                [`${styles.containerPadding.rightUnset}`]: hasInnerSuffix,\n              },\n            )}\n            onClick={() => inputRef.current?.focus()} // clicking on the icons should focus the input\n          >\n            {hasInnerPrefix && (\n              <BaseInputPrefix>{slots.prefix.rest}</BaseInputPrefix>\n            )}\n\n            <input\n              id={id}\n              ref={inputRef}\n              required={required}\n              disabled={!!disabled}\n              aria-disabled={ariaDisabled}\n              onAnimationStart={onAnimationStart}\n              readOnly={readOnly}\n              className={styles.input}\n              placeholder={placeholder}\n              type={type}\n              value={inputValue}\n              pattern={pattern}\n              max={max}\n              min={min}\n              step={step}\n              maxLength={maxLength}\n              minLength={minLength}\n              {..._mergeProps(\n                remainingInputProps,\n                focusProps,\n                controlState\n                  ? { 'aria-label': ariaLabelProp, ...inputProps }\n                  : ariaProps,\n                !controlState ? eventListener : {}, // escape hatch to not interfere with the old implementation\n              )}\n            />\n            {hasInnerSuffix && (\n              <BaseInputSuffix>{slots.suffix.rest}</BaseInputSuffix>\n            )}\n            {!readOnly && (\n              <>\n                {hasInnerSuffix && showClearButton && (\n                  <Divider orientation=\"vertical\" className={styles.divider} />\n                )}\n                {showClearButton && (\n                  <Button\n                    onClick={onClear}\n                    className={styles.clearIconButton}\n                    color={hasError ? 'critical' : 'neutral'}\n                    disabled={disabledOrAriaDisabled}\n                  >\n                    <XmarkIcon />\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n          {slots.suffix.buttons}\n        </BaseInputContext.Provider>\n      </InputGroup>\n      {controlState && hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabledOrAriaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * Base component used internally for our input components.\n * @internal\n */\nexport const BaseInput = Object.assign(BaseInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n});\n\n(BaseInput as typeof BaseInput & { displayName: string }).displayName =\n  'BaseInput';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,16 +1,16 @@
 import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
-var clearIconButton = "_1a8lqy9c-3-0-1";
-var container = "_1a8lqy96-3-0-1";
-var containerPadding = { none: "_1a8lqy97-3-0-1", rightNone: "_1a8lqy98-3-0-1", rightUnset: "_1a8lqy99-3-0-1", leftUnset: "_1a8lqy9a-3-0-1" };
-var disabled = "_1a8lqy92-3-0-1";
-var divider = "_1a8lqy9d-3-0-1";
-var hasError = "_1a8lqy91-3-0-1";
-var input = "_1a8lqy9b-3-0-1 _yfwka33-3-0-1 _da9a8v0-3-0-1 _da9a8v2-3-0-1 _da9a8v3-3-0-1 _da9a8vb-3-0-1";
-var isAutoFilled = "_1a8lqy9e-3-0-1";
-var variant = { "default": "_1a8lqy93-3-0-1", minimal: "_1a8lqy94-3-0-1" };
-var wrapper = "_1a8lqy90-3-0-1";
+var clearIconButton = "_1a8lqy9c-3-1-1";
+var container = "_1a8lqy96-3-1-1";
+var containerPadding = { none: "_1a8lqy97-3-1-1", rightNone: "_1a8lqy98-3-1-1", rightUnset: "_1a8lqy99-3-1-1", leftUnset: "_1a8lqy9a-3-1-1" };
+var disabled = "_1a8lqy92-3-1-1";
+var divider = "_1a8lqy9d-3-1-1";
+var hasError = "_1a8lqy91-3-1-1";
+var input = "_1a8lqy9b-3-1-1 _yfwka33-3-1-1 _da9a8v0-3-1-1 _da9a8v2-3-1-1 _da9a8v3-3-1-1 _da9a8vb-3-1-1";
+var isAutoFilled = "_1a8lqy9e-3-1-1";
+var variant = { "default": "_1a8lqy93-3-1-1", minimal: "_1a8lqy94-3-1-1" };
+var wrapper = "_1a8lqy90-3-1-1";
 export {
   clearIconButton,
   container,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var clearIconButton = '_1a8lqy9c-3-0-1';\nexport var container = '_1a8lqy96-3-0-1';\nexport var containerPadding = {none:'_1a8lqy97-3-0-1',rightNone:'_1a8lqy98-3-0-1',rightUnset:'_1a8lqy99-3-0-1',leftUnset:'_1a8lqy9a-3-0-1'};\nexport var disabled = '_1a8lqy92-3-0-1';\nexport var divider = '_1a8lqy9d-3-0-1';\nexport var hasError = '_1a8lqy91-3-0-1';\nexport var input = '_1a8lqy9b-3-0-1 _yfwka33-3-0-1 _da9a8v0-3-0-1 _da9a8v2-3-0-1 _da9a8v3-3-0-1 _da9a8vb-3-0-1';\nexport var isAutoFilled = '_1a8lqy9e-3-0-1';\nexport var variant = {'default':'_1a8lqy93-3-0-1',minimal:'_1a8lqy94-3-0-1'};\nexport var wrapper = '_1a8lqy90-3-0-1';"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var clearIconButton = '_1a8lqy9c-3-1-1';\nexport var container = '_1a8lqy96-3-1-1';\nexport var containerPadding = {none:'_1a8lqy97-3-1-1',rightNone:'_1a8lqy98-3-1-1',rightUnset:'_1a8lqy99-3-1-1',leftUnset:'_1a8lqy9a-3-1-1'};\nexport var disabled = '_1a8lqy92-3-1-1';\nexport var divider = '_1a8lqy9d-3-1-1';\nexport var hasError = '_1a8lqy91-3-1-1';\nexport var input = '_1a8lqy9b-3-1-1 _yfwka33-3-1-1 _da9a8v0-3-1-1 _da9a8v2-3-1-1 _da9a8v3-3-1-1 _da9a8vb-3-1-1';\nexport var isAutoFilled = '_1a8lqy9e-3-1-1';\nexport var variant = {'default':'_1a8lqy93-3-1-1',minimal:'_1a8lqy94-3-1-1'};\nexport var wrapper = '_1a8lqy90-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,mBAAmB,EAAC,MAAK,mBAAkB,WAAU,mBAAkB,YAAW,mBAAkB,WAAU,kBAAiB;AACnI,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,UAAU,EAAC,WAAU,mBAAkB,SAAQ,kBAAiB;AACpE,IAAI,UAAU;",
   "names": []
 }

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

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

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

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

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

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

package/esm/forms/calendar/Calendar.css

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