@dynatrace/strato-components 3.5.2 → 3.6.0

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.js

@@ -155,6 +155,10 @@ const CustomTimeframeSelector = () => {
     ref
   ]);
   const handleApply = (0, import_react.useCallback)(() => {
+    dispatch({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
     if (dateTimeRangePickerError) {
       return;
     }

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.sty.js

@@ -23,6 +23,6 @@ __export(CustomTimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(CustomTimeframeSelector_css_exports);
 var import_CustomTimeframeSelector_css_ts_vanilla = require("./CustomTimeframeSelector.css");
-var fieldset = "_at2xro0-3-5-2";
-var overlayRoot = "_at2xro1-3-5-2";
-var wrapper = "_at2xro2-3-5-2";
+var fieldset = "_at2xro0-3-6-0";
+var overlayRoot = "_at2xro1-3-6-0";
+var wrapper = "_at2xro2-3-6-0";

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css

@@ -1,4 +1,4 @@
-._14xc6b0-3-5-2 {
+._14xc6b0-3-6-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -9,18 +9,18 @@
   min-height: 0;
   max-width: 100vw;
 }
-._14xc6b1-3-5-2 {
+._14xc6b1-3-6-0 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-5-2 {
+._14xc6b2-3-6-0 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-5-2 {
+._14xc6b3-3-6-0 {
   overflow-wrap: break-word;
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js

@@ -24,7 +24,7 @@ __export(TimeframeSelectorOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelectorOverlay_css_exports);
 var import_TimeframeSelectorOverlay_css_ts_vanilla = require("./TimeframeSelectorOverlay.css");
-var footer = "_14xc6b2-3-5-2";
-var hint = "_14xc6b3-3-5-2";
-var scrollContainer = "_14xc6b1-3-5-2";
-var wrapper = "_14xc6b0-3-5-2";
+var footer = "_14xc6b2-3-6-0";
+var hint = "_14xc6b3-3-6-0";
+var scrollContainer = "_14xc6b1-3-6-0";
+var wrapper = "_14xc6b0-3-6-0";

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.js

@@ -39,7 +39,9 @@ var import_spacings = __toESM(require("@dynatrace/strato-design-tokens/spacings"
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var styles = __toESM(require("./TimeframeSelectorOverlay.sty.js"));
 var import_Button = require("../../../../buttons/button/Button.js");
+var import_external_links = require("../../../../core/external-links.js");
 var import_useTimeframeStore = require("../../../../core/time/timeframeStore/useTimeframeStore.js");
+var import_helpers = require("../../../../forms/forms-core/time/helpers.js");
 var import_Divider = require("../../../../layouts/divider/Divider.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_safe_sprinkles = require("../../../../styles/safe-sprinkles.js");
@@ -54,11 +56,11 @@ const TimeframeSelectorOverlayFooter = (props) => {
   );
   const timeZoneWithOffset = (0, import_react.useMemo)(() => {
     const timeZone = (0, import_user_preferences.getTimezone)();
-    const parts = new Intl.DateTimeFormat((0, import_user_preferences.getRegionalFormat)(), {
+    const parts = new Intl.DateTimeFormat((0, import_helpers.getSafeRegionalFormat)(), {
       timeZone,
       timeZoneName: "shortOffset"
     }).formatToParts(import_tz.TZDateMini.tz(timeZone));
-    const partsShortName = new Intl.DateTimeFormat((0, import_user_preferences.getRegionalFormat)(), {
+    const partsShortName = new Intl.DateTimeFormat((0, import_helpers.getSafeRegionalFormat)(), {
       timeZone,
       timeZoneName: "short"
     }).formatToParts(import_tz.TZDateMini.tz(timeZone));
@@ -102,7 +104,7 @@ const TimeframeSelectorOverlayFooter = (props) => {
                   import_Text.Text,
                   {
                     as: import_ExternalLink.ExternalLink,
-                    href: "https://dt-url.net/timeframe-selector",
+                    href: import_external_links.TIMEFRAME_SELECTOR_DOCUMENTATION_URL,
                     textStyle: "small",
                     style: { paddingRight: import_spacings.default.Size6 },
                     "data-dt-name": "LearnMore",

package/filters/timeframe-selector/components/presets/Presets.css

@@ -1,11 +1,11 @@
-._14rlfn30-3-5-2 {
+._14rlfn30-3-6-0 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
   grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._14rlfn31-3-5-2 {
+._14rlfn31-3-6-0 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,45 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._14rlfn32-3-5-2 {
+._14rlfn32-3-6-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._14rlfn32-3-5-2:hover {
+._14rlfn32-3-6-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._14rlfn32-3-5-2:active {
+._14rlfn32-3-6-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._14rlfn33-3-5-2 {
+._14rlfn33-3-6-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn33-3-5-2:hover {
+._14rlfn33-3-6-0:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._14rlfn33-3-5-2:active {
+._14rlfn33-3-6-0:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._14rlfn34-3-5-2 {
+._14rlfn34-3-6-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._14rlfn36-3-5-2 {
+._14rlfn36-3-6-0 {
   min-width: 0;
 }
-._14rlfn37-3-5-2 {
+._14rlfn37-3-6-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._14rlfn38-3-5-2 {
+._14rlfn38-3-6-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._14rlfn39-3-5-2::before {
+._14rlfn39-3-6-0::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -62,62 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3a-3-5-2::before {
+._14rlfn3a-3-6-0::before {
   content: "";
 }
-._14rlfn3b-3-5-2::before {
+._14rlfn3b-3-6-0::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3c-3-5-2::before {
+._14rlfn3c-3-6-0::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3e-3-5-2 {
+._14rlfn3e-3-6-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
   text-align: right;
 }
-._14rlfn3f-3-5-2 {
+._14rlfn3f-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3g-3-5-2 {
+._14rlfn3g-3-6-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn3h-3-5-2 {
+._14rlfn3h-3-6-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._14rlfn3i-3-5-2 {
+._14rlfn3i-3-6-0 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3j-3-5-2 {
+._14rlfn3j-3-6-0 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3k-3-5-2 {
+._14rlfn3k-3-6-0 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3l-3-5-2 {
+._14rlfn3l-3-6-0 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._14rlfn3m-3-5-2 {
+._14rlfn3m-3-6-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3n-3-5-2 {
+._14rlfn3n-3-6-0 {
   flex-shrink: 0;
 }
 @media screen and (max-width: 470px) {
-  ._14rlfn3d-3-5-2 {
+  ._14rlfn3d-3-6-0 {
     display: none;
   }
 }

package/filters/timeframe-selector/components/presets/Presets.sty.js

@@ -32,14 +32,14 @@ __export(Presets_css_exports, {
 module.exports = __toCommonJS(Presets_css_exports);
 var import_Presets_css_ts_vanilla = require("./Presets.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var displayValueWrapper = "_14rlfn36-3-5-2";
-var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-5-2", variantClassNames: { state: { rest: "_14rlfn3f-3-5-2", selected: "_14rlfn3g-3-5-2", disabled: "_14rlfn3h-3-5-2" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-5-2", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-5-2", false: "_14rlfn3k-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-5-2", variantClassNames: { state: { rest: "_14rlfn32-3-5-2", selected: "_14rlfn33-3-5-2", disabled: "_14rlfn34-3-5-2" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var itemContainer = "_14rlfn30-3-5-2";
-var listContainer = "_14rlfn3l-3-5-2";
-var mediaQuery = "_14rlfn3d-3-5-2";
-var recentHeading = "_14rlfn3m-3-5-2";
-var recentIcon = "_14rlfn3n-3-5-2";
-var timeframeDisplayValue = "_14rlfn37-3-5-2";
-var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-5-2", variantClassNames: { isSelected: { true: "_14rlfn39-3-5-2", false: "_14rlfn3a-3-5-2" }, isDisabled: { true: "_14rlfn3b-3-5-2", false: "_14rlfn3c-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var displayValueWrapper = "_14rlfn36-3-6-0";
+var formattedPresetValue = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3e-3-6-0", variantClassNames: { state: { rest: "_14rlfn3f-3-6-0", selected: "_14rlfn3g-3-6-0", disabled: "_14rlfn3h-3-6-0" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn3i-3-6-0", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-6-0", false: "_14rlfn3k-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn31-3-6-0", variantClassNames: { state: { rest: "_14rlfn32-3-6-0", selected: "_14rlfn33-3-6-0", disabled: "_14rlfn34-3-6-0" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-6-0";
+var listContainer = "_14rlfn3l-3-6-0";
+var mediaQuery = "_14rlfn3d-3-6-0";
+var recentHeading = "_14rlfn3m-3-6-0";
+var recentIcon = "_14rlfn3n-3-6-0";
+var timeframeDisplayValue = "_14rlfn37-3-6-0";
+var wrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_14rlfn38-3-6-0", variantClassNames: { isSelected: { true: "_14rlfn39-3-6-0", false: "_14rlfn3a-3-6-0" }, isDisabled: { true: "_14rlfn3b-3-6-0", false: "_14rlfn3c-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });

package/filters/timeframe-selector/components/stepper/StepperButton.js

@@ -62,7 +62,7 @@ const StepperButton = (props) => {
     (state) => state.setStepperValue
   );
   const value = (0, import_useTimeframeStore.useTimeframeSelectorStore)(
-    (state) => state.timeframeSelectorTimeframe
+    (state) => (0, import_helpers.isFullTimeframe)(state.timeframeSelectorTimeframe) ? state.timeframeSelectorTimeframe : null
   );
   const referenceTimeframe = (0, import_useTimeframeStore.useTimeframeSelectorStore)(
     (state) => state.referenceTimeframe

package/filters/timeframe-selector/components/trigger/Trigger.css

@@ -1,24 +1,24 @@
-._attccb0-3-5-2 {
+._attccb0-3-6-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-5-2) ._attccb0-3-5-2 {
+:root:not(._1jgl8s50-3-6-0) ._attccb0-3-6-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._attccb1-3-5-2 {
+._attccb1-3-6-0 {
   font-size: 0;
   transition-property: transform;
 }
-._attccb0-3-5-2 ._attccb1-3-5-2 {
+._attccb0-3-6-0 ._attccb1-3-6-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._attccb2-3-5-2 {
+._attccb2-3-6-0 {
   transform: rotate(180deg);
 }
-._1jgl8s50-3-5-2 ._attccb3-3-5-2:hover, ._1jgl8s50-3-5-2 ._attccb3-3-5-2:active {
-  --_bx32h3-3-5-2: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-5-2: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-6-0 ._attccb3-3-6-0:hover, ._1jgl8s50-3-6-0 ._attccb3-3-6-0:active {
+  --_bx32h3-3-6-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-6-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
 }
-._1jgl8s50-3-5-2 ._attccb4-3-5-2:hover, ._1jgl8s50-3-5-2 ._attccb4-3-5-2:active {
-  --_bx32h3-3-5-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_bx32h4-3-5-2: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-6-0 ._attccb4-3-6-0:hover, ._1jgl8s50-3-6-0 ._attccb4-3-6-0:active {
+  --_bx32h3-3-6-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_bx32h4-3-6-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
 }

package/filters/timeframe-selector/components/trigger/Trigger.js

@@ -87,6 +87,7 @@ const Trigger = (props) => {
       "data-testid": dataTestId,
       variant: "emphasized",
       color,
+      textAlign: "start",
       style: consumerStyle,
       className: (0, import_clsx.default)(consumerClassName, {
         [styles.readOnly]: readOnly,

package/filters/timeframe-selector/components/trigger/Trigger.sty.js

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(Trigger_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_field_css_ts_vanilla = require("../../../../styles/field.css");
 var import_Trigger_css_ts_vanilla = require("./Trigger.css");
-var readOnly = "_attccb0-3-5-2";
-var readOnlyColor = { neutral: "_attccb3-3-5-2", critical: "_attccb4-3-5-2" };
-var suffix = "_attccb1-3-5-2";
-var suffixOpen = "_attccb2-3-5-2";
+var readOnly = "_attccb0-3-6-0";
+var readOnlyColor = { neutral: "_attccb3-3-6-0", critical: "_attccb4-3-6-0" };
+var suffix = "_attccb1-3-6-0";
+var suffixOpen = "_attccb2-3-6-0";

package/filters/timeframe-selector/utils/getTimeframeDisplayValueProps.d.ts

@@ -1,12 +1,12 @@
 import { type ReactNode } from 'react';
 import type { IntlShape } from 'react-intl';
 import type { Precision } from '../../../core/time/shared.types.js';
-import type { Timeframe } from '../../../core/types/time.js';
+import type { TimeframeSelectorState } from '../../../core/time/timeframeStore/timeframeSelector.types.js';
 /**
  * Converts the given timeframe into a human-readable display value string.
  * @internal
  */
-export declare function getTimeframeDisplayValueProps(value: Timeframe | null, intl: IntlShape, placeholder?: string, precision?: Precision, presetItemLabel?: ReactNode, required?: boolean, min?: string, max?: string): {
+export declare function getTimeframeDisplayValueProps(value: TimeframeSelectorState['timeframeSelectorTimeframe'], intl: IntlShape, placeholder?: string, precision?: Precision, presetItemLabel?: ReactNode, required?: boolean, min?: string, max?: string): {
     displayValue: string;
     isInvalid: boolean;
     hint: string;