@dynatrace/strato-components 3.2.1 → 3.3.1

package/core/time/validation.d.ts

@@ -0,0 +1,45 @@
+import { type Dispatch, type RefObject } from 'react';
+import { type MessageDescriptor } from 'react-intl';
+import type { Precision, TimeErrorKey } from './shared.types.js';
+import { type FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';
+import { type Timeframe, type TimeValue } from '../types/time.js';
+type TimeBoundaryErrorKey = Extract<TimeErrorKey, 'maxBoundary' | 'minBoundary' | 'minMaxBoundary'>;
+type TimeBoundaryMessageValues = {
+    min: string;
+    max: string;
+};
+type TimeBoundaryMessageData = {
+    errorKey: TimeBoundaryErrorKey;
+    values: TimeBoundaryMessageValues;
+};
+/** @internal */
+export type ValidateOptions = {
+    formMessageDispatch?: Dispatch<FormFieldMessagesReducerAction>;
+    formerError?: TimeErrorKey;
+    precision?: Precision;
+    showError?: boolean;
+    checkOrder?: boolean;
+    ref?: RefObject<unknown>;
+    expectedFormat?: string;
+    valueMode?: 'single' | 'timeframeSelector' | 'dateTimePicker';
+    required?: boolean;
+    /** Optional per-key message overrides. Falls back to built-in defaults for any omitted keys. @internal */
+    errorMessages?: Partial<Record<TimeErrorKey, MessageDescriptor>>;
+};
+/**
+ * Checks if a date is outside the given min and/or max bounds.
+ * @internal
+ */
+export declare function isOutOfBounds(date?: string | Date, min?: TimeValue | null, max?: TimeValue | null): TimeErrorKey | undefined;
+/**
+ * Gets the timeframe boundary message data while hiding default Grail limits
+ * unless the current value actually exceeds the Grail range.
+ * @internal
+ */
+export declare function getTimeBoundaryMessageData(value: Partial<Timeframe> | TimeValue | null, min?: TimeValue | string | null, max?: TimeValue | string | null, precision?: Precision, onlyWhenOutOfBounds?: boolean): TimeBoundaryMessageData | undefined;
+/**
+ * Validates a Timeframe or a TimeValue against the provided constraints (min, max, required, order) and dispatches appropriate error messages.
+ * @internal
+ */
+export declare function validate(value: Partial<Timeframe> | TimeValue | null, min?: TimeValue | null, max?: TimeValue | null, options?: ValidateOptions): TimeErrorKey | undefined;
+export {};

package/core/time/validation.js

@@ -0,0 +1,318 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var validation_exports = {};
+__export(validation_exports, {
+  getTimeBoundaryMessageData: () => getTimeBoundaryMessageData,
+  isOutOfBounds: () => isOutOfBounds,
+  validate: () => validate
+});
+module.exports = __toCommonJS(validation_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tz = require("@date-fns/tz");
+var import_date_fns = require("date-fns");
+var import_react_intl = require("react-intl");
+var import_units = require("@dynatrace-sdk/units");
+var import_user_preferences = require("@dynatrace-sdk/user-preferences");
+var import_helpers = require("./helpers.js");
+var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
+var import_date_time = require("../../forms/forms-core/time/date-time.js");
+function isOutOfBounds(date, min, max) {
+  const relativeNow = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime();
+  const newDate = typeof date === "string" ? (0, import_units.parseTimeAsTimeValue)(date, relativeNow)?.absoluteDate : date;
+  if (!newDate) {
+    return void 0;
+  }
+  const minDate = min?.type === "expression" ? (0, import_units.parseTimeAsTimeValue)(min.value, relativeNow)?.absoluteDate : min?.absoluteDate;
+  const maxDate = max?.type === "expression" ? (0, import_units.parseTimeAsTimeValue)(max.value, relativeNow)?.absoluteDate : max?.absoluteDate;
+  if (minDate && maxDate && ((0, import_date_fns.isBefore)(newDate, minDate) || (0, import_date_fns.isAfter)(newDate, maxDate))) {
+    return "minMaxBoundary";
+  }
+  if (minDate && !maxDate && (0, import_date_fns.isBefore)(newDate, minDate)) {
+    return "minBoundary";
+  }
+  if (!minDate && maxDate && (0, import_date_fns.isAfter)(newDate, maxDate)) {
+    return "maxBoundary";
+  }
+  return void 0;
+}
+const DEFAULT_ERROR_MESSAGES = (0, import_react_intl.defineMessages)({
+  minBoundary: {
+    id: "KETnWaCwo9qLRQrI",
+    defaultMessage: "Only dates after {min} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  maxBoundary: {
+    id: "ONYnUtFidz4+6NmE",
+    defaultMessage: "Only dates before {max} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  minMaxBoundary: {
+    id: "Qm0/7EQKVXjS9tDM",
+    defaultMessage: "Only dates between {min} \u2192 {max} are available.",
+    description: "Given dates are not within the valid range."
+  },
+  invalidOrder: {
+    defaultMessage: "'from' date should be before 'to' date",
+    id: "DKFIWE64kHV1ohuk",
+    description: "Message to display if the from and to dates are in the wrong order."
+  },
+  singleValueMissing: {
+    defaultMessage: "Please fill in this field.",
+    id: "hIK5810KwQytwP1q",
+    description: "DateTimePicker required value is missing."
+  },
+  missingFrom: {
+    defaultMessage: "Please enter a start time.",
+    id: "GUeetpTpusqFkMi+",
+    description: "From value is missing."
+  },
+  missingTo: {
+    defaultMessage: "Please enter an end time.",
+    id: "tfHTZkRc7sr/Ypcl",
+    description: "End value is missing."
+  },
+  missingFromTo: {
+    defaultMessage: "Please enter a start and end time.",
+    id: "4yANH5gdmW1efk0I",
+    description: "Start and end values are missing."
+  },
+  valueMissing: {
+    defaultMessage: "Empty timeframe.",
+    id: "QsKlSIxE+Yp58CUG",
+    description: "Timeframe selector required timeframe error hint."
+  },
+  invalid: {
+    defaultMessage: "Invalid time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "r/XpT4mat98jCrup",
+    description: "Given value is invalid"
+  },
+  invalidFrom: {
+    defaultMessage: "Invalid start time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "supuOfI2cSrNKOZ/",
+    description: "Given from value is invalid"
+  },
+  invalidTo: {
+    defaultMessage: "Invalid end time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "HL9dGWGnhYkm7OyC",
+    description: "Given to value is invalid"
+  },
+  invalidFromTo: {
+    defaultMessage: "Invalid start and end time. Expected format: {expectedFormat}, -2h or -2d@d",
+    id: "89sBAyzLbeW6GyPJ",
+    description: "Given from and to values are invalid"
+  }
+});
+function isValueOutsideGrailRange(value) {
+  if (!value) {
+    return false;
+  }
+  const grailMinDate = new Date(import_date_time.GRAIL_MIN_DATE);
+  const grailMaxDate = new Date(import_date_time.GRAIL_MAX_DATE);
+  if ((0, import_helpers.isTimeValue)(value)) {
+    if (!value.absoluteDate) {
+      return false;
+    }
+    const date = new Date(value.absoluteDate);
+    return (0, import_date_fns.isBefore)(date, grailMinDate) || (0, import_date_fns.isAfter)(date, grailMaxDate);
+  }
+  const fromDate = value.from?.absoluteDate ? new Date(value.from.absoluteDate) : null;
+  const toDate = value.to?.absoluteDate ? new Date(value.to.absoluteDate) : null;
+  return fromDate !== null && ((0, import_date_fns.isBefore)(fromDate, grailMinDate) || (0, import_date_fns.isAfter)(fromDate, grailMaxDate)) || toDate !== null && ((0, import_date_fns.isBefore)(toDate, grailMinDate) || (0, import_date_fns.isAfter)(toDate, grailMaxDate));
+}
+function filterGrailTimeValue(value, limit) {
+  if (!limit) {
+    return limit;
+  }
+  const isGrailLimit = limit.value === import_date_time.GRAIL_MIN_DATE || limit.value === import_date_time.GRAIL_MAX_DATE;
+  if (!isGrailLimit) {
+    return limit;
+  }
+  return isValueOutsideGrailRange(value) ? limit : void 0;
+}
+function isTimeBoundaryErrorKey(errorKey) {
+  return errorKey === "minBoundary" || errorKey === "maxBoundary" || errorKey === "minMaxBoundary";
+}
+function parseLimit(limit, relativeNow = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime()) {
+  if (typeof limit !== "string") {
+    return limit;
+  }
+  return (0, import_units.parseTimeAsTimeValue)(limit, relativeNow) ?? null;
+}
+function getBoundaryErrorKey(min, max) {
+  if (min && max) {
+    return "minMaxBoundary";
+  }
+  if (min) {
+    return "minBoundary";
+  }
+  if (max) {
+    return "maxBoundary";
+  }
+  return void 0;
+}
+function getTimeBoundaryMessageData(value, min, max, precision = "minutes", onlyWhenOutOfBounds = true) {
+  const relativeNow = import_tz.TZDateMini.tz((0, import_user_preferences.getTimezone)()).getTime();
+  const parsedMin = parseLimit(min, relativeNow);
+  const parsedMax = parseLimit(max, relativeNow);
+  const filteredMin = filterGrailTimeValue(value, parsedMin);
+  const filteredMax = filterGrailTimeValue(value, parsedMax);
+  const errorKey = onlyWhenOutOfBounds ? getOutOfBoundsErrorKey(value, filteredMin, filteredMax) : getBoundaryErrorKey(filteredMin, filteredMax);
+  if (!isTimeBoundaryErrorKey(errorKey)) {
+    return void 0;
+  }
+  const { min: formattedMin, max: formattedMax } = (0, import_helpers.getFormattedMinMax)(
+    filteredMin?.value,
+    filteredMax?.value,
+    precision
+  );
+  return {
+    errorKey,
+    values: {
+      min: formattedMin,
+      max: formattedMax
+    }
+  };
+}
+function getOutOfBoundsErrorKey(updatedValue, min, max) {
+  if (updatedValue && ("from" in updatedValue || "to" in updatedValue) && (0, import_helpers.isTimeframe)(updatedValue, "range")) {
+    const fromErrorKey = isOutOfBounds(updatedValue?.from?.value, min, max);
+    const toErrorKey = isOutOfBounds(updatedValue?.to?.value, min, max);
+    return fromErrorKey || toErrorKey;
+  }
+  if (updatedValue && (0, import_helpers.isTimeValue)(updatedValue)) {
+    return isOutOfBounds(updatedValue.value, min, max);
+  }
+}
+function isInvalidOrder(value) {
+  if ((0, import_helpers.isFullTimeframe)(value)) {
+    const timezone = (0, import_user_preferences.getTimezone)();
+    const fromTime = new import_tz.TZDateMini(
+      value.from?.absoluteDate,
+      timezone
+    ).getTime();
+    const toTime = new import_tz.TZDateMini(value.to?.absoluteDate, timezone).getTime();
+    if (value.from && value.to && fromTime >= toTime) {
+      return true;
+    }
+  }
+  return false;
+}
+function getInvalidErrorKey(value, valueMode) {
+  if (valueMode !== "single" && value && !(0, import_helpers.isTimeValue)(value) && ("from" in value && value.from !== void 0 || "to" in value && value.to !== void 0)) {
+    const isFromInvalid = value.from?.absoluteDate === "" && value.from?.value !== "";
+    const isToInvalid = value.to?.absoluteDate === "" && value.to?.value !== "";
+    if (isFromInvalid && isToInvalid) {
+      return "invalidFromTo";
+    }
+    if (isFromInvalid) {
+      return "invalidFrom";
+    }
+    if (isToInvalid) {
+      return "invalidTo";
+    }
+  }
+  if (valueMode === "single" && value && "absoluteDate" in value && value.absoluteDate === "" && value.value !== "") {
+    return "invalid";
+  }
+  return void 0;
+}
+function getValueMissingErrorKey(value, valueMode) {
+  if (value === null) {
+    if (valueMode === "single") {
+      return "singleValueMissing";
+    }
+    if (valueMode === "dateTimePicker") {
+      return "missingFromTo";
+    }
+    return "valueMissing";
+  }
+  if (!(0, import_helpers.isTimeValue)(value) && value.from === null && value.to === null) {
+    if (valueMode === "dateTimePicker") {
+      return "missingFromTo";
+    }
+    return "valueMissing";
+  }
+  if (valueMode !== "single" && (0, import_helpers.isPartialTimeframe)(value)) {
+    if (!value.from && value.to?.value === "now()") {
+      return "missingFrom";
+    }
+    if (!value.to && value.from?.value === "now()") {
+      return "missingTo";
+    }
+  }
+  return void 0;
+}
+function validate(value, min, max, options) {
+  const {
+    formMessageDispatch,
+    formerError: previousError,
+    precision: validationPrecision = "minutes",
+    showError: showValidationError,
+    checkOrder: shouldCheckOrder,
+    ref: validationRef,
+    expectedFormat: expectedValidationFormat = "YYYY-MM-DD HH:mm:ss",
+    valueMode: validationValueMode,
+    required: isRequired,
+    errorMessages
+  } = options ?? {};
+  const timeBoundaryMessageData = getTimeBoundaryMessageData(
+    value,
+    min,
+    max,
+    validationPrecision
+  );
+  const invalidOrderError = shouldCheckOrder && isInvalidOrder(value) ? "invalidOrder" : void 0;
+  const invalidError = getInvalidErrorKey(value, validationValueMode);
+  const valueMissingError = isRequired ? getValueMissingErrorKey(value, validationValueMode) : void 0;
+  const outOfBoundsError = timeBoundaryMessageData?.errorKey;
+  const errorKey = invalidOrderError ?? valueMissingError ?? outOfBoundsError ?? invalidError;
+  if (errorKey) {
+    const messageDef = errorMessages?.[errorKey] ?? DEFAULT_ERROR_MESSAGES[errorKey];
+    validationRef?.current && formMessageDispatch?.({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.ADDMESSAGE,
+      payload: {
+        id: errorKey,
+        variant: "error",
+        messageType: "formcontrol",
+        message: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_intl.FormattedMessage,
+          {
+            ...messageDef,
+            values: {
+              ...timeBoundaryMessageData?.values,
+              expectedFormat: expectedValidationFormat
+            }
+          }
+        ),
+        validityStateKey: "customError",
+        showError: showValidationError
+      }
+    });
+  }
+  if (previousError && previousError !== errorKey) {
+    validationRef?.current && formMessageDispatch?.({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+      payload: {
+        id: previousError,
+        messageType: "formcontrol"
+      }
+    });
+  }
+  return errorKey;
+}

package/core/types/time.d.ts

@@ -24,11 +24,6 @@ export type _TimeOffset = _TimeOffsetValue | {
     from: _TimeOffsetValue;
     to: _TimeOffsetValue;
 };
-/**
- * Typeguard to see if time offset is simple, so not an object.
- * @internal
- */
-export declare function _isSimpleTimeOffset(offset: _TimeOffset): offset is _TimeOffsetValue;
 /**
  * The value of a part of a time frame.
  * @public

package/core/types/time.js

@@ -3,10 +3,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -17,10 +13,4 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var time_exports = {};
-__export(time_exports, {
-  _isSimpleTimeOffset: () => _isSimpleTimeOffset
-});
 module.exports = __toCommonJS(time_exports);
-function _isSimpleTimeOffset(offset) {
-  return typeof offset !== "object";
-}

package/core/utils/colorUtils.css

@@ -1,75 +1,75 @@
-._k096v44-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_k096v41-3-2-1: var(--dt-colors-icon-critical-default, #bb0731);
-  --_k096v42-3-2-1: var(--dt-colors-border-critical-default, #f6d6d5);
+._k096v44-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_k096v41-3-3-1: var(--dt-colors-icon-critical-default, #bb0731);
+  --_k096v42-3-3-1: var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._k096v45-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_k096v41-3-2-1: var(--dt-colors-icon-neutral-default, #2f2f4f);
-  --_k096v42-3-2-1: var(--dt-colors-border-neutral-default, #dadbe4);
+._k096v45-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_k096v41-3-3-1: var(--dt-colors-icon-neutral-default, #2f2f4f);
+  --_k096v42-3-3-1: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._k096v46-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-primary-default, #464cce);
-  --_k096v41-3-2-1: var(--dt-colors-icon-primary-default, #464cce);
-  --_k096v42-3-2-1: var(--dt-colors-border-primary-default, #d5dbf6);
+._k096v46-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-primary-default, #464cce);
+  --_k096v41-3-3-1: var(--dt-colors-icon-primary-default, #464cce);
+  --_k096v42-3-3-1: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._k096v47-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-success-default, #2d6761);
-  --_k096v41-3-2-1: var(--dt-colors-icon-success-default, #2d6761);
-  --_k096v42-3-2-1: var(--dt-colors-border-success-default, #d3dedd);
+._k096v47-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-success-default, #2d6761);
+  --_k096v41-3-3-1: var(--dt-colors-icon-success-default, #2d6761);
+  --_k096v42-3-3-1: var(--dt-colors-border-success-default, #d3dedd);
 }
-._k096v48-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-warning-default, #855400);
-  --_k096v41-3-2-1: var(--dt-colors-icon-warning-default, #855400);
-  --_k096v42-3-2-1: var(--dt-colors-border-warning-default, #f9ebdb);
+._k096v48-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-warning-default, #855400);
+  --_k096v41-3-3-1: var(--dt-colors-icon-warning-default, #855400);
+  --_k096v42-3-3-1: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._k096v4d-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
-  --_k096v41-3-2-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
-  --_k096v42-3-2-1: var(--dt-colors-border-primary-accent, #464cce);
+._k096v4d-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
+  --_k096v41-3-3-1: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
+  --_k096v42-3-3-1: var(--dt-colors-border-primary-accent, #464cce);
 }
-._k096v4e-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
-  --_k096v41-3-2-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
-  --_k096v42-3-2-1: var(--dt-colors-border-success-accent, #2d6761);
+._k096v4e-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
+  --_k096v41-3-3-1: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
+  --_k096v42-3-3-1: var(--dt-colors-border-success-accent, #2d6761);
 }
-._k096v4f-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-warning-on-accent-default, #272024);
-  --_k096v41-3-2-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
-  --_k096v42-3-2-1: var(--dt-colors-border-warning-accent, #855400);
+._k096v4f-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-warning-on-accent-default, #272024);
+  --_k096v41-3-3-1: var(--dt-colors-icon-warning-on-accent-default, #272024);
+  --_k096v42-3-3-1: var(--dt-colors-border-warning-accent, #855400);
 }
-._k096v4g-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_k096v41-3-2-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
-  --_k096v42-3-2-1: var(--dt-colors-border-critical-accent, #bb0731);
+._k096v4g-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_k096v41-3-3-1: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
+  --_k096v42-3-3-1: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._k096v4h-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_k096v41-3-2-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
-  --_k096v42-3-2-1: var(--dt-colors-border-neutral-accent, #595a7d);
+._k096v4h-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_k096v41-3-3-1: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+  --_k096v42-3-3-1: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._k096v4i-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-primary-disabled, #595a7d80);
-  --_k096v41-3-2-1: var(--dt-colors-icon-primary-disabled, #595a7d80);
-  --_k096v42-3-2-1: var(--dt-colors-border-primary-disabled, #dadbe480);
+._k096v4i-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-primary-disabled, #595a7d80);
+  --_k096v41-3-3-1: var(--dt-colors-icon-primary-disabled, #595a7d80);
+  --_k096v42-3-3-1: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._k096v4j-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-success-disabled, #595a7d80);
-  --_k096v41-3-2-1: var(--dt-colors-icon-success-disabled, #595a7d80);
-  --_k096v42-3-2-1: var(--dt-colors-border-success-disabled, #dadbe480);
+._k096v4j-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-success-disabled, #595a7d80);
+  --_k096v41-3-3-1: var(--dt-colors-icon-success-disabled, #595a7d80);
+  --_k096v42-3-3-1: var(--dt-colors-border-success-disabled, #dadbe480);
 }
-._k096v4k-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-warning-disabled, #595a7d80);
-  --_k096v41-3-2-1: var(--dt-colors-icon-warning-disabled, #595a7d80);
-  --_k096v42-3-2-1: var(--dt-colors-border-warning-disabled, #dadbe480);
+._k096v4k-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-warning-disabled, #595a7d80);
+  --_k096v41-3-3-1: var(--dt-colors-icon-warning-disabled, #595a7d80);
+  --_k096v42-3-3-1: var(--dt-colors-border-warning-disabled, #dadbe480);
 }
-._k096v4l-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-critical-disabled, #595a7d80);
-  --_k096v41-3-2-1: var(--dt-colors-icon-critical-disabled, #595a7d80);
-  --_k096v42-3-2-1: var(--dt-colors-border-critical-disabled, #dadbe480);
+._k096v4l-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-critical-disabled, #595a7d80);
+  --_k096v41-3-3-1: var(--dt-colors-icon-critical-disabled, #595a7d80);
+  --_k096v42-3-3-1: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._k096v4m-3-2-1 {
-  --_k096v40-3-2-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_k096v41-3-2-1: var(--dt-colors-icon-neutral-disabled, #595a7d80);
-  --_k096v42-3-2-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._k096v4m-3-3-1 {
+  --_k096v40-3-3-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_k096v41-3-3-1: var(--dt-colors-icon-neutral-disabled, #595a7d80);
+  --_k096v42-3-3-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }

package/core/utils/colorUtils.sty.js

@@ -24,5 +24,5 @@ __export(colorUtils_css_exports, {
 module.exports = __toCommonJS(colorUtils_css_exports);
 var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-3-2-1", variantClassNames: { color: { critical: "_k096v44-3-2-1", neutral: "_k096v45-3-2-1", primary: "_k096v46-3-2-1", success: "_k096v47-3-2-1", warning: "_k096v48-3-2-1" }, variant: { "default": "_k096v49-3-2-1", accent: "_k096v4a-3-2-1" }, disabled: { true: "_k096v4b-3-2-1", false: "_k096v4c-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-2-1"], [{ color: "success", variant: "accent" }, "_k096v4e-3-2-1"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-2-1"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-2-1"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-2-1"], [{ color: "primary", disabled: true }, "_k096v4i-3-2-1"], [{ color: "success", disabled: true }, "_k096v4j-3-2-1"], [{ color: "warning", disabled: true }, "_k096v4k-3-2-1"], [{ color: "critical", disabled: true }, "_k096v4l-3-2-1"], [{ color: "neutral", disabled: true }, "_k096v4m-3-2-1"]] });
-var colorUtilsVars = { text: "var(--_k096v40-3-2-1)", icon: "var(--_k096v41-3-2-1)", borderColor: "var(--_k096v42-3-2-1)" };
+var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-3-3-1", variantClassNames: { color: { critical: "_k096v44-3-3-1", neutral: "_k096v45-3-3-1", primary: "_k096v46-3-3-1", success: "_k096v47-3-3-1", warning: "_k096v48-3-3-1" }, variant: { "default": "_k096v49-3-3-1", accent: "_k096v4a-3-3-1" }, disabled: { true: "_k096v4b-3-3-1", false: "_k096v4c-3-3-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-3-3-1"], [{ color: "success", variant: "accent" }, "_k096v4e-3-3-1"], [{ color: "warning", variant: "accent" }, "_k096v4f-3-3-1"], [{ color: "critical", variant: "accent" }, "_k096v4g-3-3-1"], [{ color: "neutral", variant: "accent" }, "_k096v4h-3-3-1"], [{ color: "primary", disabled: true }, "_k096v4i-3-3-1"], [{ color: "success", disabled: true }, "_k096v4j-3-3-1"], [{ color: "warning", disabled: true }, "_k096v4k-3-3-1"], [{ color: "critical", disabled: true }, "_k096v4l-3-3-1"], [{ color: "neutral", disabled: true }, "_k096v4m-3-3-1"]] });
+var colorUtilsVars = { text: "var(--_k096v40-3-3-1)", icon: "var(--_k096v41-3-3-1)", borderColor: "var(--_k096v42-3-3-1)" };

package/core/utils/focus-management/attempt-focus.d.ts

@@ -3,6 +3,9 @@
  *
  * Set Attempt to set focus on the current node.
  * @param element - The node to attempt to focus on.
+ * @param options - Options to determine if the focus ring should be shown.
  * @returns - true if element is focused.
  */
-export declare const attemptFocus: (element: HTMLElement) => boolean;
+export declare const attemptFocus: (element: HTMLElement, options?: {
+    focusVisible?: boolean;
+}) => boolean;

package/core/utils/focus-management/attempt-focus.js

@@ -22,12 +22,12 @@ __export(attempt_focus_exports, {
 });
 module.exports = __toCommonJS(attempt_focus_exports);
 var import_is_focusable = require("./is-focusable.js");
-const attemptFocus = (element) => {
+const attemptFocus = (element, options) => {
   if (!(0, import_is_focusable.isFocusable)(element)) {
     return false;
   }
   try {
-    element.focus({ preventScroll: true });
+    element.focus({ preventScroll: true, ...options });
   } catch {
   }
   return document.activeElement === element;

package/core/utils/focus-management/focus-first-descendant.d.ts

@@ -3,6 +3,9 @@
  *
  * Set focus on descendant nodes until the first focusable element is found.
  * @param element - DOM node for which to find the first focusable descendant.
+ * @param options - Options to determine if the focus ring should be shown.
  * @returns true if a focusable element is found and focus is set.
  */
-export declare const focusFirstDescendant: (element: HTMLElement | null) => boolean;
+export declare const focusFirstDescendant: (element: HTMLElement | null, options?: {
+    focusVisible?: boolean;
+}) => boolean;

package/core/utils/focus-management/focus-first-descendant.js

@@ -22,13 +22,13 @@ __export(focus_first_descendant_exports, {
 });
 module.exports = __toCommonJS(focus_first_descendant_exports);
 var import_attempt_focus = require("./attempt-focus.js");
-const focusFirstDescendant = (element) => {
+const focusFirstDescendant = (element, options) => {
   if (!element) {
     return false;
   }
-  for (let i = 0; i < element.children.length; i++) {
-    const child = element.children[i];
-    if ((0, import_attempt_focus.attemptFocus)(child) || focusFirstDescendant(child)) {
+  for (const child of element.children) {
+    const childElement = child;
+    if ((0, import_attempt_focus.attemptFocus)(childElement, options) || focusFirstDescendant(childElement, options)) {
       return true;
     }
   }