@dynatrace/strato-components 3.5.2 → 3.7.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/Presets.css.ts"],
-  "sourcesContent": ["import './Presets.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var displayValueWrapper = '_14rlfn36-3-5-2';\nexport var formattedPresetValue = _7a468({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:[]});\nexport var indicatorIcon = _7a468({defaultClassName:'_14rlfn3i-3-5-2',variantClassNames:{isDisabled:{true:'_14rlfn3j-3-5-2',false:'_14rlfn3k-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var item = _7a468({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:[]});\nexport var itemContainer = '_14rlfn30-3-5-2';\nexport var listContainer = '_14rlfn3l-3-5-2';\nexport var mediaQuery = '_14rlfn3d-3-5-2';\nexport var recentHeading = '_14rlfn3m-3-5-2';\nexport var recentIcon = '_14rlfn3n-3-5-2';\nexport var timeframeDisplayValue = '_14rlfn37-3-5-2';\nexport var wrapper = _7a468({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:[]});"],
+  "sourcesContent": ["import './Presets.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var displayValueWrapper = '_14rlfn36-3-7-0';\nexport var formattedPresetValue = _7a468({defaultClassName:'_14rlfn3e-3-7-0',variantClassNames:{state:{rest:'_14rlfn3f-3-7-0',selected:'_14rlfn3g-3-7-0',disabled:'_14rlfn3h-3-7-0'}},defaultVariants:{state:'rest'},compoundVariants:[]});\nexport var indicatorIcon = _7a468({defaultClassName:'_14rlfn3i-3-7-0',variantClassNames:{isDisabled:{true:'_14rlfn3j-3-7-0',false:'_14rlfn3k-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var item = _7a468({defaultClassName:'_14rlfn31-3-7-0',variantClassNames:{state:{rest:'_14rlfn32-3-7-0',selected:'_14rlfn33-3-7-0',disabled:'_14rlfn34-3-7-0'},defaultVariants:{state:'rest'}},defaultVariants:{},compoundVariants:[]});\nexport var itemContainer = '_14rlfn30-3-7-0';\nexport var listContainer = '_14rlfn3l-3-7-0';\nexport var mediaQuery = '_14rlfn3d-3-7-0';\nexport var recentHeading = '_14rlfn3m-3-7-0';\nexport var recentIcon = '_14rlfn3n-3-7-0';\nexport var timeframeDisplayValue = '_14rlfn37-3-7-0';\nexport var wrapper = _7a468({defaultClassName:'_14rlfn38-3-7-0',variantClassNames:{isSelected:{true:'_14rlfn39-3-7-0',false:'_14rlfn3a-3-7-0'},isDisabled:{true:'_14rlfn3b-3-7-0',false:'_14rlfn3c-3-7-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB;AAC1B,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,mBAAkB,UAAS,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,OAAM,OAAM,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClO,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtL,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,mBAAkB,UAAS,mBAAkB,UAAS,kBAAiB,GAAE,iBAAgB,EAAC,OAAM,OAAM,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrO,IAAI,gBAAgB;AACpB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,aAAa;AACjB,IAAI,wBAAwB;AAC5B,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -50,7 +50,7 @@ const StepperButton = (props) => {
     (state) => state.setStepperValue
   );
   const value = useTimeframeSelectorStore(
-    (state) => state.timeframeSelectorTimeframe
+    (state) => isFullTimeframe(state.timeframeSelectorTimeframe) ? state.timeframeSelectorTimeframe : null
   );
   const referenceTimeframe = useTimeframeSelectorStore(
     (state) => state.referenceTimeframe
@@ -62,8 +62,10 @@ const StepperButton = (props) => {
   const [isDisabled, setIsDisabled] = useState(
     isStepperDisabled(direction, value, min, max)
   );
+  const [pendingValue, setPendingValue] = useState(null);
   useEffect(() => {
     setIsDisabled(isStepperDisabled(direction, value, min, max));
+    setPendingValue(null);
     const newShiftValue = getTimeShift(value, {
       direction,
       min,
@@ -74,9 +76,10 @@ const StepperButton = (props) => {
     if (newShiftValue) {
       setShiftValue(newShiftValue);
     }
-  }, [direction, value, min, max, isFullDay, isDisabled, precision]);
+  }, [direction, value, min, max, isFullDay, precision]);
   const handleShift = useCallback(() => {
-    const newShiftValue = getTimeShift(referenceTimeframe ?? value, {
+    const baseValue = pendingValue ?? referenceTimeframe ?? value;
+    const newShiftValue = getTimeShift(baseValue, {
       direction,
       min,
       max,
@@ -86,16 +89,21 @@ const StepperButton = (props) => {
     if (newShiftValue && !readOnly) {
       const isAtMinOrMax = direction === "backward" ? dateIsMinMax(newShiftValue?.from, min, max) : dateIsMinMax(newShiftValue?.to, min, max);
       if (referenceTimeframe && isFullTimeframe(referenceTimeframe)) {
+        setPendingValue(referenceTimeframe);
+        setIsDisabled(false);
         setTimeframeSelectorTimeframe(referenceTimeframe);
         setReferenceTimeframe(null);
         return;
       }
       if (isAtMinOrMax) {
-        setReferenceTimeframe(value);
+        setReferenceTimeframe(baseValue);
+        setIsDisabled(true);
       }
+      setPendingValue(newShiftValue);
       setTimeframeSelectorTimeframe(newShiftValue);
     }
   }, [
+    pendingValue,
     value,
     direction,
     min,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/stepper/StepperButton.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { StepperButtonTooltip } from './StepperButtonTooltip.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { isFullTimeframe } from '../../../../core/time/helpers.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport { Timeframe } from '../../../../core/types/time.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport {\n  formatStepperValues,\n  getTimeShift,\n} from '../../utils/stepper-helpers.js';\nimport {\n  dateIsMinMax,\n  isBiggerThan,\n  isSmallerThan,\n} from '../../utils/timeframe-selection.js';\n\n//#region Typings\ninterface TimeframeStepperProps\n  extends FormControlBaseProps<\n    (timeframe: Timeframe, isMinOrMax: boolean) => void\n  > {\n  /** The direction the timeframe will be shifted to. */\n  direction: 'backward' | 'forward';\n  /**  Callback function to handle on blur events. */\n  onBlur?: () => void;\n}\n//#endregion\n\nfunction isStepperDisabled(\n  direction: TimeframeStepperProps['direction'],\n  value: Timeframe | null,\n  min?: string,\n  max?: string,\n): boolean {\n  if (!value) {\n    return false;\n  }\n\n  if (direction === 'backward') {\n    const nextStepIsValid =\n      isSmallerThan(value.from.absoluteDate, min) ||\n      dateIsMinMax(value.from, min);\n\n    return nextStepIsValid;\n  }\n\n  if (direction === 'forward') {\n    const nextStepIsValid =\n      isBiggerThan(value.to.absoluteDate, max) ||\n      dateIsMinMax(value.to, undefined, max);\n\n    return nextStepIsValid;\n  }\n\n  return false;\n}\n\n/**\n * StepperButton component to shift the timeframe backward and forward.\n * @internal\n */\nexport const StepperButton = (props: TimeframeStepperProps) => {\n  const {\n    disabled,\n    direction,\n    'aria-disabled': ariaDisabledProp,\n    onBlur,\n    readOnly,\n  }: TimeframeStepperProps = props;\n\n  const { showError } = useTimeframeSelectorContext();\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min)?.value;\n  const max = useTimeframeSelectorStore((state) => state.max)?.value;\n  const isFullDay = useTimeframeSelectorStore((state) => state.isFullDay);\n  const setTimeframeSelectorTimeframe = useTimeframeSelectorStore(\n    (state) => state.setStepperValue,\n  );\n  const value = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorTimeframe,\n  );\n  const referenceTimeframe = useTimeframeSelectorStore(\n    (state) => state.referenceTimeframe,\n  );\n  const setReferenceTimeframe = useTimeframeSelectorStore(\n    (state) => state.setReferenceTimeframe,\n  );\n\n  const [shiftValue, setShiftValue] = useState<Timeframe | null>(value);\n\n  const [isDisabled, setIsDisabled] = useState(\n    isStepperDisabled(direction, value, min, max),\n  );\n\n  /** Handle value change. */\n  useEffect(() => {\n    setIsDisabled(isStepperDisabled(direction, value, min, max));\n\n    const newShiftValue = getTimeShift(value, {\n      direction,\n      min,\n      max,\n      selectedOverCalendar: isFullDay,\n      precision,\n    });\n\n    if (newShiftValue) {\n      setShiftValue(newShiftValue);\n    }\n  }, [direction, value, min, max, isFullDay, isDisabled, precision]);\n\n  /** Handle onClick. */\n  const handleShift = useCallback(() => {\n    // In case we have a referenceTimeframe, it means we are currently at a min or max value and want to restore\n    // the previous timeframe when shifting back in the opposite direction. If there is no referenceTimeframe,\n    // we just calculate the next step based on the current value as usual.\n    const newShiftValue = getTimeShift(referenceTimeframe ?? value, {\n      direction,\n      min,\n      max,\n      selectedOverCalendar: isFullDay,\n      precision,\n    });\n\n    if (newShiftValue && !readOnly) {\n      const isAtMinOrMax =\n        direction === 'backward'\n          ? dateIsMinMax(newShiftValue?.from, min, max)\n          : dateIsMinMax(newShiftValue?.to, min, max);\n\n      if (referenceTimeframe && isFullTimeframe(referenceTimeframe)) {\n        setTimeframeSelectorTimeframe(referenceTimeframe);\n        setReferenceTimeframe(null);\n        return;\n      }\n\n      if (isAtMinOrMax) {\n        // In this case, moving to the minimum or maximum value means we can't maintain the original timeframe length.\n        // Therefore, we store the previous timeframe so we can restore it when moving back in the opposite direction.\n        setReferenceTimeframe(value);\n      }\n      setTimeframeSelectorTimeframe(newShiftValue);\n    }\n  }, [\n    value,\n    direction,\n    min,\n    max,\n    isFullDay,\n    precision,\n    readOnly,\n    referenceTimeframe,\n    setReferenceTimeframe,\n    setTimeframeSelectorTimeframe,\n  ]);\n\n  const intl = useIntl();\n\n  const dataDtName = direction === 'backward' ? 'StepBackward' : 'StepForward';\n\n  if (!value || !shiftValue) {\n    return null;\n  }\n\n  const formattedStepperValue = formatStepperValues(\n    shiftValue.from,\n    shiftValue.to,\n    intl,\n    direction,\n    isFullDay,\n  );\n\n  return (\n    <StepperButtonTooltip\n      disabled={disabled || isDisabled}\n      value={shiftValue}\n      formattedStepperValue={formattedStepperValue}\n    >\n      <Button\n        style={{ minWidth: 'fit-content' }}\n        variant=\"emphasized\"\n        color={showError ? 'critical' : 'neutral'}\n        disabled={disabled || isDisabled}\n        onClick={handleShift}\n        aria-disabled={ariaDisabledProp}\n        aria-label={formattedStepperValue}\n        onBlur={onBlur}\n        data-dt-name={dataDtName}\n      >\n        {direction === 'backward' ? (\n          <ChevronLeftSmallIcon />\n        ) : (\n          <ChevronRightSmallIcon />\n        )}\n      </Button>\n    </StepperButtonTooltip>\n  );\n};\n\n(StepperButton as typeof StepperButton & { displayName: string }).displayName =\n  'TimeframeStepperButton';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { StepperButtonTooltip } from './StepperButtonTooltip.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { isFullTimeframe } from '../../../../core/time/helpers.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport { Timeframe } from '../../../../core/types/time.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport {\n  formatStepperValues,\n  getTimeShift,\n} from '../../utils/stepper-helpers.js';\nimport {\n  dateIsMinMax,\n  isBiggerThan,\n  isSmallerThan,\n} from '../../utils/timeframe-selection.js';\n\n//#region Typings\ninterface TimeframeStepperProps\n  extends FormControlBaseProps<\n    (timeframe: Timeframe, isMinOrMax: boolean) => void\n  > {\n  /** The direction the timeframe will be shifted to. */\n  direction: 'backward' | 'forward';\n  /**  Callback function to handle on blur events. */\n  onBlur?: () => void;\n}\n//#endregion\n\nfunction isStepperDisabled(\n  direction: TimeframeStepperProps['direction'],\n  value: Timeframe | null,\n  min?: string,\n  max?: string,\n): boolean {\n  if (!value) {\n    return false;\n  }\n\n  if (direction === 'backward') {\n    const nextStepIsValid =\n      isSmallerThan(value.from.absoluteDate, min) ||\n      dateIsMinMax(value.from, min);\n\n    return nextStepIsValid;\n  }\n\n  if (direction === 'forward') {\n    const nextStepIsValid =\n      isBiggerThan(value.to.absoluteDate, max) ||\n      dateIsMinMax(value.to, undefined, max);\n\n    return nextStepIsValid;\n  }\n\n  return false;\n}\n\n/**\n * StepperButton component to shift the timeframe backward and forward.\n * @internal\n */\nexport const StepperButton = (props: TimeframeStepperProps) => {\n  const {\n    disabled,\n    direction,\n    'aria-disabled': ariaDisabledProp,\n    onBlur,\n    readOnly,\n  }: TimeframeStepperProps = props;\n\n  const { showError } = useTimeframeSelectorContext();\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min)?.value;\n  const max = useTimeframeSelectorStore((state) => state.max)?.value;\n  const isFullDay = useTimeframeSelectorStore((state) => state.isFullDay);\n  const setTimeframeSelectorTimeframe = useTimeframeSelectorStore(\n    (state) => state.setStepperValue,\n  );\n  const value = useTimeframeSelectorStore((state) =>\n    isFullTimeframe(state.timeframeSelectorTimeframe)\n      ? state.timeframeSelectorTimeframe\n      : null,\n  );\n  const referenceTimeframe = useTimeframeSelectorStore(\n    (state) => state.referenceTimeframe,\n  );\n  const setReferenceTimeframe = useTimeframeSelectorStore(\n    (state) => state.setReferenceTimeframe,\n  );\n\n  const [shiftValue, setShiftValue] = useState<Timeframe | null>(value);\n\n  const [isDisabled, setIsDisabled] = useState(\n    isStepperDisabled(direction, value, min, max),\n  );\n\n  const [pendingValue, setPendingValue] = useState<Timeframe | null>(null);\n\n  /** Handle value change. */\n  useEffect(() => {\n    setIsDisabled(isStepperDisabled(direction, value, min, max));\n    setPendingValue(null);\n\n    const newShiftValue = getTimeShift(value, {\n      direction,\n      min,\n      max,\n      selectedOverCalendar: isFullDay,\n      precision,\n    });\n\n    if (newShiftValue) {\n      setShiftValue(newShiftValue);\n    }\n  }, [direction, value, min, max, isFullDay, precision]);\n\n  /** Handle onClick. */\n  const handleShift = useCallback(() => {\n    // pendingValue tracks the last dispatched step in controlled mode (where the store value\n    // does not update between clicks); referenceTimeframe holds the pre-boundary value when\n    // clamped to min/max so it can be restored on the next click.\n    const baseValue = pendingValue ?? referenceTimeframe ?? value;\n    const newShiftValue = getTimeShift(baseValue, {\n      direction,\n      min,\n      max,\n      selectedOverCalendar: isFullDay,\n      precision,\n    });\n\n    if (newShiftValue && !readOnly) {\n      const isAtMinOrMax =\n        direction === 'backward'\n          ? dateIsMinMax(newShiftValue?.from, min, max)\n          : dateIsMinMax(newShiftValue?.to, min, max);\n\n      if (referenceTimeframe && isFullTimeframe(referenceTimeframe)) {\n        setPendingValue(referenceTimeframe);\n        setIsDisabled(false);\n        setTimeframeSelectorTimeframe(referenceTimeframe);\n        setReferenceTimeframe(null);\n        return;\n      }\n\n      if (isAtMinOrMax) {\n        // In this case, moving to the minimum or maximum value means we can't maintain the original timeframe length.\n        // Therefore, we store the previous timeframe so we can restore it when moving back in the opposite direction.\n        setReferenceTimeframe(baseValue);\n        setIsDisabled(true);\n      }\n      setPendingValue(newShiftValue);\n      setTimeframeSelectorTimeframe(newShiftValue);\n    }\n  }, [\n    pendingValue,\n    value,\n    direction,\n    min,\n    max,\n    isFullDay,\n    precision,\n    readOnly,\n    referenceTimeframe,\n    setReferenceTimeframe,\n    setTimeframeSelectorTimeframe,\n  ]);\n\n  const intl = useIntl();\n\n  const dataDtName = direction === 'backward' ? 'StepBackward' : 'StepForward';\n\n  if (!value || !shiftValue) {\n    return null;\n  }\n\n  const formattedStepperValue = formatStepperValues(\n    shiftValue.from,\n    shiftValue.to,\n    intl,\n    direction,\n    isFullDay,\n  );\n\n  return (\n    <StepperButtonTooltip\n      disabled={disabled || isDisabled}\n      value={shiftValue}\n      formattedStepperValue={formattedStepperValue}\n    >\n      <Button\n        style={{ minWidth: 'fit-content' }}\n        variant=\"emphasized\"\n        color={showError ? 'critical' : 'neutral'}\n        disabled={disabled || isDisabled}\n        onClick={handleShift}\n        aria-disabled={ariaDisabledProp}\n        aria-label={formattedStepperValue}\n        onBlur={onBlur}\n        data-dt-name={dataDtName}\n      >\n        {direction === 'backward' ? (\n          <ChevronLeftSmallIcon />\n        ) : (\n          <ChevronRightSmallIcon />\n        )}\n      </Button>\n    </StepperButtonTooltip>\n  );\n};\n\n(StepperButton as typeof StepperButton & { displayName: string }).displayName =\n  'TimeframeStepperButton';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,24 +1,24 @@
-._attccb0-3-5-2 {
+._attccb0-3-7-0 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-5-2) ._attccb0-3-5-2 {
+:root:not(._1jgl8s50-3-7-0) ._attccb0-3-7-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._attccb1-3-5-2 {
+._attccb1-3-7-0 {
   font-size: 0;
   transition-property: transform;
 }
-._attccb0-3-5-2 ._attccb1-3-5-2 {
+._attccb0-3-7-0 ._attccb1-3-7-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._attccb2-3-5-2 {
+._attccb2-3-7-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-7-0 ._attccb3-3-7-0:hover, ._1jgl8s50-3-7-0 ._attccb3-3-7-0:active {
+  --_bx32h3-3-7-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-7-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-7-0 ._attccb4-3-7-0:hover, ._1jgl8s50-3-7-0 ._attccb4-3-7-0:active {
+  --_bx32h3-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_bx32h4-3-7-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/esm/filters/timeframe-selector/components/trigger/Trigger.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/Trigger.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { isTimeframeSelectorDisplayValueElement } from './DisplayValue.js';\nimport * as styles from './Trigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { isVisualRefreshEnabled } from '../../../../core/utils/is-visual-refresh-enabled.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /**\n     * The placeholder text displayed in the TimeframeSelector.Trigger.\n     */\n    placeholder?: ReactNode;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger\n * @internal\n */\nexport function isTimeframeSelectorTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorTriggerProps> {\n  return isElement(child) && child.type === Trigger;\n}\n\nfunction getDisplayValueSlot(children: ReactNode) {\n  let displayValue: ReactNode[] | null = null;\n\n  Children.forEach(children, (child) => {\n    if (isTimeframeSelectorDisplayValueElement(child)) {\n      displayValue = displayValue || [];\n      displayValue.push(child);\n    }\n  });\n\n  return displayValue;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.\n * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.\n * @public\n */\nexport const Trigger = (props: TimeframeSelectorTriggerProps) => {\n  const {\n    children,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const displayValueSlot = useMemo(\n    () => getDisplayValueSlot(children),\n    [children],\n  );\n\n  const {\n    triggerProps,\n    displayValue: contextDisplayValue,\n    details,\n    readOnly,\n    showError,\n    disabled,\n  } = useTimeframeSelectorContext();\n\n  const isCritical = isVisualRefreshEnabled()\n    ? showError && !disabled\n    : showError;\n  const color = isCritical ? 'critical' : 'neutral';\n\n  const displayValue = displayValueSlot ?? contextDisplayValue;\n  const placeholderIfEmpty = placeholder ?? contextDisplayValue;\n\n  return (\n    <Button\n      {..._mergeProps(triggerProps, remainingProps)}\n      data-testid={dataTestId}\n      variant=\"emphasized\"\n      color={color}\n      style={consumerStyle}\n      className={clsx(consumerClassName, {\n        [styles.readOnly]: readOnly,\n        [styles.readOnlyColor[color]]: readOnly,\n      })}\n    >\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n      {details ? displayValue : placeholderIfEmpty}\n    </Button>\n  );\n};\n\nTrigger.displayName = 'TimeframeSelector.Trigger';\n"],
-  "mappings": "AAkGI,SAYI,KAZJ;AAlGJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AAErC,SAAS,8CAA8C;AACvD,YAAY,YAAY;AACxB,SAAS,cAAc;AAKvB,SAAS,8BAA8B;AACvC,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mCAAmC;AAoBrC,SAAS,kCACd,OACsD;AACtD,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAEA,SAAS,oBAAoB,UAAqB;AAChD,MAAI,eAAmC;AAEvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,uCAAuC,KAAK,GAAG;AACjD,qBAAe,gBAAgB,CAAC;AAChC,mBAAa,KAAK,KAAK;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,MAAM,oBAAoB,QAAQ;AAAA,IAClC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAEhC,QAAM,aAAa,uBAAuB,IACtC,aAAa,CAAC,WACd;AACJ,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,eAAe,oBAAoB;AACzC,QAAM,qBAAqB,eAAe;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,YAAY,cAAc,cAAc;AAAA,MAC5C,eAAa;AAAA,MACb,SAAQ;AAAA,MACR;AAAA,MACA,OAAO;AAAA,MACP,WAAW,KAAK,mBAAmB;AAAA,QACjC,CAAC,OAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,OAAO,cAAc,KAAK,CAAC,GAAG;AAAA,MACjC,CAAC;AAAA,MAED;AAAA,4BAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA,QACC,UAAU,eAAe;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEA,QAAQ,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { isTimeframeSelectorDisplayValueElement } from './DisplayValue.js';\nimport * as styles from './Trigger.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { AriaLabelingProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { isVisualRefreshEnabled } from '../../../../core/utils/is-visual-refresh-enabled.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\n\n/**\n * @public\n */\nexport type TimeframeSelectorTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /**\n     * The placeholder text displayed in the TimeframeSelector.Trigger.\n     */\n    placeholder?: ReactNode;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a TimeframeSelector.Trigger\n * @internal\n */\nexport function isTimeframeSelectorTriggerElement(\n  child: ReactNode,\n): child is ReactElement<TimeframeSelectorTriggerProps> {\n  return isElement(child) && child.type === Trigger;\n}\n\nfunction getDisplayValueSlot(children: ReactNode) {\n  let displayValue: ReactNode[] | null = null;\n\n  Children.forEach(children, (child) => {\n    if (isTimeframeSelectorDisplayValueElement(child)) {\n      displayValue = displayValue || [];\n      displayValue.push(child);\n    }\n  });\n\n  return displayValue;\n}\n\n/**\n * A trigger component to customize a timeframe selector's trigger with custom styling, placeholder, aria labels, and data-testid.\n * If it doesn't have children, the default trigger is used. Otherwise, the `TimeframeSelector.DisplayValue` component can be used within it to define a custom display value within.\n * @public\n */\nexport const Trigger = (props: TimeframeSelectorTriggerProps) => {\n  const {\n    children,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const displayValueSlot = useMemo(\n    () => getDisplayValueSlot(children),\n    [children],\n  );\n\n  const {\n    triggerProps,\n    displayValue: contextDisplayValue,\n    details,\n    readOnly,\n    showError,\n    disabled,\n  } = useTimeframeSelectorContext();\n\n  const isCritical = isVisualRefreshEnabled()\n    ? showError && !disabled\n    : showError;\n  const color = isCritical ? 'critical' : 'neutral';\n\n  const displayValue = displayValueSlot ?? contextDisplayValue;\n  const placeholderIfEmpty = placeholder ?? contextDisplayValue;\n\n  return (\n    <Button\n      {..._mergeProps(triggerProps, remainingProps)}\n      data-testid={dataTestId}\n      variant=\"emphasized\"\n      color={color}\n      textAlign=\"start\"\n      style={consumerStyle}\n      className={clsx(consumerClassName, {\n        [styles.readOnly]: readOnly,\n        [styles.readOnlyColor[color]]: readOnly,\n      })}\n    >\n      <Button.Suffix>\n        <ChevronDownSmallIcon\n          className={clsx(\n            styles.suffix,\n            triggerProps?.['aria-expanded'] && styles.suffixOpen,\n          )}\n        />\n      </Button.Suffix>\n      {details ? displayValue : placeholderIfEmpty}\n    </Button>\n  );\n};\n\nTrigger.displayName = 'TimeframeSelector.Trigger';\n"],
+  "mappings": "AAkGI,SAaI,KAbJ;AAlGJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AAErC,SAAS,8CAA8C;AACvD,YAAY,YAAY;AACxB,SAAS,cAAc;AAKvB,SAAS,8BAA8B;AACvC,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mCAAmC;AAoBrC,SAAS,kCACd,OACsD;AACtD,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;AAEA,SAAS,oBAAoB,UAAqB;AAChD,MAAI,eAAmC;AAEvC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,uCAAuC,KAAK,GAAG;AACjD,qBAAe,gBAAgB,CAAC;AAChC,mBAAa,KAAK,KAAK;AAAA,IACzB;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,MAAM,UAAU,CAAC,UAAyC;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,mBAAmB;AAAA,IACvB,MAAM,oBAAoB,QAAQ;AAAA,IAClC,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,4BAA4B;AAEhC,QAAM,aAAa,uBAAuB,IACtC,aAAa,CAAC,WACd;AACJ,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,eAAe,oBAAoB;AACzC,QAAM,qBAAqB,eAAe;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,YAAY,cAAc,cAAc;AAAA,MAC5C,eAAa;AAAA,MACb,SAAQ;AAAA,MACR;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW,KAAK,mBAAmB;AAAA,QACjC,CAAC,OAAO,QAAQ,GAAG;AAAA,QACnB,CAAC,OAAO,cAAc,KAAK,CAAC,GAAG;AAAA,MACjC,CAAC;AAAA,MAED;AAAA,4BAAC,OAAO,QAAP,EACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,eAAe,eAAe,KAAK,OAAO;AAAA,YAC5C;AAAA;AAAA,QACF,GACF;AAAA,QACC,UAAU,eAAe;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEA,QAAQ,cAAc;",
   "names": []
 }

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

@@ -1,10 +1,10 @@
 import "../../../../core/components/app-root/AppRoot.css";
 import "../../../../styles/field.css";
 import "./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-7-0";
+var readOnlyColor = { neutral: "_attccb3-3-7-0", critical: "_attccb4-3-7-0" };
+var suffix = "_attccb1-3-7-0";
+var suffixOpen = "_attccb2-3-7-0";
 export {
   readOnly,
   readOnlyColor,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/trigger/Trigger.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../../../styles/field.css';\nimport './Trigger.css';\nexport var readOnly = '_attccb0-3-5-2';\nexport var readOnlyColor = {neutral:'_attccb3-3-5-2',critical:'_attccb4-3-5-2'};\nexport var suffix = '_attccb1-3-5-2';\nexport var suffixOpen = '_attccb2-3-5-2';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../../../styles/field.css';\nimport './Trigger.css';\nexport var readOnly = '_attccb0-3-7-0';\nexport var readOnlyColor = {neutral:'_attccb3-3-7-0',critical:'_attccb4-3-7-0'};\nexport var suffix = '_attccb1-3-7-0';\nexport var suffixOpen = '_attccb2-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,WAAW;AACf,IAAI,gBAAgB,EAAC,SAAQ,kBAAiB,UAAS,iBAAgB;AACvE,IAAI,SAAS;AACb,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/utils/getTimeframeDisplayValueProps.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode } from 'react';\nimport type { IntlShape } from 'react-intl';\n\nimport type { Precision } from '../../../core/time/shared.types.js';\nimport { getTimeBoundaryMessageData } from '../../../core/time/validation.js';\nimport type { Timeframe } from '../../../core/types/time.js';\nimport {\n  extractDisplayValueFromTimeValues,\n  getFromToValues,\n  parseValue,\n  messages,\n} from '../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ellipsis as ellipsisCSS } from '../../../styles/ellipsis.sty.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { getTextFromNode } from '../../filter/utils/getTextFromNode.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from '../constants/timeframeSelectorMessages.js';\nimport * as styles from '../TimeframeSelector.sty.js';\n\n/**\n * Converts the given timeframe into a human-readable display value string.\n * @internal\n */\nexport function getTimeframeDisplayValueProps(\n  value: Timeframe | null,\n  intl: IntlShape,\n  placeholder?: string,\n  precision?: Precision,\n  presetItemLabel?: ReactNode,\n  required?: boolean,\n  min?: string,\n  max?: string,\n) {\n  if (!value) {\n    return {\n      displayValue: placeholder ?? '',\n      isInvalid: !!required,\n      hint: required ? intl.formatMessage(messages.requiredTimeframe) : '',\n    };\n  }\n\n  if (presetItemLabel) {\n    return {\n      displayValue: getTextFromNode(presetItemLabel, intl, ''),\n      isInvalid: false,\n      hint: '',\n    };\n  }\n\n  const { from, to } = parseValue(value);\n  const { valueFrom, valueTo } = getFromToValues(value);\n\n  const { displayValue, hint, isInvalid } = extractDisplayValueFromTimeValues(\n    from,\n    to,\n    intl,\n    precision,\n    valueFrom,\n    valueTo,\n  );\n\n  if (isInvalid) {\n    return { displayValue, isInvalid, hint };\n  }\n\n  let hasError = false;\n  let displayValueHint = '';\n\n  const timeBoundaryMessageData = getTimeBoundaryMessageData(\n    { from, to },\n    min,\n    max,\n    precision,\n  );\n\n  if (timeBoundaryMessageData) {\n    hasError = true;\n    displayValueHint = intl.formatMessage(\n      TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],\n      timeBoundaryMessageData.values,\n    );\n  }\n\n  const displayValueParts = displayValue.split(' \u2192 ');\n\n  const [displayValueFrom, displayValueTo] =\n    displayValueParts.length === 2 ? displayValueParts : [];\n\n  if (!displayValueFrom || !displayValueTo) {\n    return { displayValue, isInvalid: hasError, hint: displayValueHint };\n  }\n\n  return {\n    displayValue: (\n      <Flex minWidth={0} gap={4}>\n        <Text className={clsx(styles.displayValueParts, ellipsisCSS)}>\n          {displayValueFrom}\n        </Text>\n        <Text style={{ minWidth: 'unset' }}>\u2192</Text>\n        <Text className={clsx(styles.displayValueParts, ellipsisCSS)}>\n          {displayValueTo}\n        </Text>\n      </Flex>\n    ),\n    isInvalid: hasError,\n    hint: displayValueHint,\n  };\n}\n"],
-  "mappings": "AA+FM,SACE,KADF;AA/FN,OAAO,UAAU;AAKjB,SAAS,kCAAkC;AAE3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,YAAY,mBAAmB;AACxC,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,YAAY,YAAY;AAMjB,SAAS,8BACd,OACA,MACA,aACA,WACA,iBACA,UACA,KACA,KACA;AACA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,MACL,cAAc,eAAe;AAAA,MAC7B,WAAW,CAAC,CAAC;AAAA,MACb,MAAM,WAAW,KAAK,cAAc,SAAS,iBAAiB,IAAI;AAAA,IACpE;AAAA,EACF;AAEA,MAAI,iBAAiB;AACnB,WAAO;AAAA,MACL,cAAc,gBAAgB,iBAAiB,MAAM,EAAE;AAAA,MACvD,WAAW;AAAA,MACX,MAAM;AAAA,IACR;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,GAAG,IAAI,WAAW,KAAK;AACrC,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AAEpD,QAAM,EAAE,cAAc,MAAM,UAAU,IAAI;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,WAAW;AACb,WAAO,EAAE,cAAc,WAAW,KAAK;AAAA,EACzC;AAEA,MAAI,WAAW;AACf,MAAI,mBAAmB;AAEvB,QAAM,0BAA0B;AAAA,IAC9B,EAAE,MAAM,GAAG;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,yBAAyB;AAC3B,eAAW;AACX,uBAAmB,KAAK;AAAA,MACtB,iCAAiC,wBAAwB,QAAQ;AAAA,MACjE,wBAAwB;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,oBAAoB,aAAa,MAAM,UAAK;AAElD,QAAM,CAAC,kBAAkB,cAAc,IACrC,kBAAkB,WAAW,IAAI,oBAAoB,CAAC;AAExD,MAAI,CAAC,oBAAoB,CAAC,gBAAgB;AACxC,WAAO,EAAE,cAAc,WAAW,UAAU,MAAM,iBAAiB;AAAA,EACrE;AAEA,SAAO;AAAA,IACL,cACE,qBAAC,QAAK,UAAU,GAAG,KAAK,GACtB;AAAA,0BAAC,QAAK,WAAW,KAAK,OAAO,mBAAmB,WAAW,GACxD,4BACH;AAAA,MACA,oBAAC,QAAK,OAAO,EAAE,UAAU,QAAQ,GAAG,oBAAC;AAAA,MACrC,oBAAC,QAAK,WAAW,KAAK,OAAO,mBAAmB,WAAW,GACxD,0BACH;AAAA,OACF;AAAA,IAEF,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type ReactNode } from 'react';\nimport type { IntlShape } from 'react-intl';\n\nimport type { Precision } from '../../../core/time/shared.types.js';\nimport type { TimeframeSelectorState } from '../../../core/time/timeframeStore/timeframeSelector.types.js';\nimport { getTimeBoundaryMessageData } from '../../../core/time/validation.js';\nimport {\n  extractDisplayValueFromTimeValues,\n  getFromToValues,\n  parseValue,\n  messages,\n} from '../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ellipsis as ellipsisCSS } from '../../../styles/ellipsis.sty.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { getTextFromNode } from '../../filter/utils/getTextFromNode.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from '../constants/timeframeSelectorMessages.js';\nimport * as styles from '../TimeframeSelector.sty.js';\n\n/**\n * Converts the given timeframe into a human-readable display value string.\n * @internal\n */\nexport function getTimeframeDisplayValueProps(\n  value: TimeframeSelectorState['timeframeSelectorTimeframe'],\n  intl: IntlShape,\n  placeholder?: string,\n  precision?: Precision,\n  presetItemLabel?: ReactNode,\n  required?: boolean,\n  min?: string,\n  max?: string,\n) {\n  if (!value) {\n    return {\n      displayValue: placeholder ?? '',\n      isInvalid: !!required,\n      hint: required ? intl.formatMessage(messages.requiredTimeframe) : '',\n    };\n  }\n\n  if (presetItemLabel) {\n    return {\n      displayValue: getTextFromNode(presetItemLabel, intl, ''),\n      isInvalid: false,\n      hint: '',\n    };\n  }\n\n  const { from, to } = parseValue(value);\n  const { valueFrom, valueTo } = getFromToValues(value);\n\n  const { displayValue, hint, isInvalid } = extractDisplayValueFromTimeValues(\n    from,\n    to,\n    intl,\n    precision,\n    valueFrom,\n    valueTo,\n  );\n\n  if (isInvalid) {\n    return { displayValue, isInvalid, hint };\n  }\n\n  let hasError = false;\n  let displayValueHint = '';\n\n  const timeBoundaryMessageData = getTimeBoundaryMessageData(\n    { from, to },\n    min,\n    max,\n    precision,\n  );\n\n  if (timeBoundaryMessageData) {\n    hasError = true;\n    displayValueHint = intl.formatMessage(\n      TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],\n      timeBoundaryMessageData.values,\n    );\n  }\n\n  const displayValueParts = displayValue.split(' \u2192 ');\n\n  const [displayValueFrom, displayValueTo] =\n    displayValueParts.length === 2 ? displayValueParts : [];\n\n  if (!displayValueFrom || !displayValueTo) {\n    return { displayValue, isInvalid: hasError, hint: displayValueHint };\n  }\n\n  return {\n    displayValue: (\n      <Flex minWidth={0} gap={4}>\n        <Text className={clsx(styles.displayValueParts, ellipsisCSS)}>\n          {displayValueFrom}\n        </Text>\n        <Text style={{ minWidth: 'unset' }}>\u2192</Text>\n        <Text className={clsx(styles.displayValueParts, ellipsisCSS)}>\n          {displayValueTo}\n        </Text>\n      </Flex>\n    ),\n    isInvalid: hasError,\n    hint: displayValueHint,\n  };\n}\n"],
+  "mappings": "AA+FM,SACE,KADF;AA/FN,OAAO,UAAU;AAMjB,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,YAAY,mBAAmB;AACxC,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,YAAY,YAAY;AAMjB,SAAS,8BACd,OACA,MACA,aACA,WACA,iBACA,UACA,KACA,KACA;AACA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,MACL,cAAc,eAAe;AAAA,MAC7B,WAAW,CAAC,CAAC;AAAA,MACb,MAAM,WAAW,KAAK,cAAc,SAAS,iBAAiB,IAAI;AAAA,IACpE;AAAA,EACF;AAEA,MAAI,iBAAiB;AACnB,WAAO;AAAA,MACL,cAAc,gBAAgB,iBAAiB,MAAM,EAAE;AAAA,MACvD,WAAW;AAAA,MACX,MAAM;AAAA,IACR;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,GAAG,IAAI,WAAW,KAAK;AACrC,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AAEpD,QAAM,EAAE,cAAc,MAAM,UAAU,IAAI;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,WAAW;AACb,WAAO,EAAE,cAAc,WAAW,KAAK;AAAA,EACzC;AAEA,MAAI,WAAW;AACf,MAAI,mBAAmB;AAEvB,QAAM,0BAA0B;AAAA,IAC9B,EAAE,MAAM,GAAG;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,yBAAyB;AAC3B,eAAW;AACX,uBAAmB,KAAK;AAAA,MACtB,iCAAiC,wBAAwB,QAAQ;AAAA,MACjE,wBAAwB;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,oBAAoB,aAAa,MAAM,UAAK;AAElD,QAAM,CAAC,kBAAkB,cAAc,IACrC,kBAAkB,WAAW,IAAI,oBAAoB,CAAC;AAExD,MAAI,CAAC,oBAAoB,CAAC,gBAAgB;AACxC,WAAO,EAAE,cAAc,WAAW,UAAU,MAAM,iBAAiB;AAAA,EACrE;AAEA,SAAO;AAAA,IACL,cACE,qBAAC,QAAK,UAAU,GAAG,KAAK,GACtB;AAAA,0BAAC,QAAK,WAAW,KAAK,OAAO,mBAAmB,WAAW,GACxD,4BACH;AAAA,MACA,oBAAC,QAAK,OAAO,EAAE,UAAU,QAAQ,GAAG,oBAAC;AAAA,MACrC,oBAAC,QAAK,WAAW,KAAK,OAAO,mBAAmB,WAAW,GACxD,0BACH;AAAA,OACF;AAAA,IAEF,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AACF;",
   "names": []
 }