@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext, useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport { segmentsSelectCSS } from './SegmentSelect.sty.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\n\ntype SegmentsSelectProps = {\n  id: string;\n  availableSegments: CachedSegment['segment'][];\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  segment?: CachedSegment | null;\n  overlayWidth: string;\n  triggerClassName?: string;\n  isPlaceholder?: boolean;\n};\n\n/**\n * SegmentsSelect component\n * @internal\n */\nexport const SegmentSelect = forwardRef<\n  FormControlWithOverlayRef<HTMLDivElement>,\n  SegmentsSelectProps\n>((props, forwardedRef) => {\n  const {\n    availableSegments,\n    readOnly,\n    triggerClassName,\n    overlayWidth,\n    segment: cachedSegment,\n    autoFocus,\n    isPlaceholder,\n    id,\n  } = props;\n  const intl = useIntl();\n\n  const segmentSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs([forwardedRef, segmentSelectRef]);\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { updateUISegment, removeUISegment } = useSegmentsUIContext();\n\n  const { getSegment } = useSegmentsCache();\n\n  const { uiSegments } = useContext(UISegmentsContext);\n\n  const refIsDefined = segmentSelectRef.current !== null;\n\n  useEffect(() => {\n    segmentsClient.hasAccessRights && segmentSelectRef.current?.validate();\n    // We only want to shift the focus initially if it has autofocus (typically first select on open).\n    // when the first selected one is cleared and replaced by the placeholder we want to focus the select, but not open it.\n    if (uiSegments.length === 1 || autoFocus) {\n      segmentSelectRef.current?.focus?.();\n      return;\n    }\n\n    // If a new placeholder is added it should be opened.\n    // The open also moves the focus to the hidden input which isn't available on first render.\n    if (isPlaceholder && !autoFocus) {\n      segmentSelectRef.current?.open();\n    }\n\n    // The hidden trigger ref (coming from the react select) is not defined after the first render and,\n    // therefore, we must manually check the existence and then only once trigger the focus.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [refIsDefined]);\n\n  return (\n    <Select\n      ref={mergedRef}\n      style={{ gridArea: 'segment' }}\n      value={id}\n      id={id}\n      required={!isPlaceholder}\n      clearable={false}\n      readOnly={readOnly || cachedSegment?.temporarilyApplied}\n      onOpenChange={(isOpen) => {\n        if (isOpen) {\n          return;\n        }\n\n        variableSelectRef.current?.open();\n      }}\n      onChange={(segmentUid) => {\n        if (segmentUid) {\n          getSegment(segmentUid)\n            .then((newSegment) => {\n              updateUISegment(\n                { id },\n                {\n                  ...newSegment.segment,\n                  variables: !newSegment.segment.variables ? undefined : [],\n                },\n              );\n            })\n            .catch((error) => {\n              if (isDev()) {\n                // eslint-disable-next-line no-console\n                console.log(\n                  `SegmentSelector: fetching the segment with id ${id} failed.`,\n                  error,\n                );\n              }\n              removeUISegment(id);\n            });\n        }\n      }}\n    >\n      <Select.Trigger\n        width=\"full\"\n        className={clsx(triggerClassName, {\n          [segmentsSelectCSS]: cachedSegment?.segment?.variables,\n        })}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsTriggerPlaceholder,\n        )}\n      />\n      <Select.Filter />\n      <Select.Content showSelectedOptionsFirst width={overlayWidth}>\n        <Select.EmptyState>\n          {availableSegments.length === 0\n            ? intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyState,\n              )\n            : intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyStateSearch,\n              )}\n        </Select.EmptyState>\n\n        {/**\n         * The availableSegments removes the current selection to only show the other options.\n         * This would also clear the select value and therefore this one is additionally rendered.\n         */}\n        {((id && !isPlaceholder) || cachedSegment?.segment) && (\n          <Select.Option\n            value={id}\n            key={id}\n            textValue={cachedSegment?.segment.name ?? id}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{cachedSegment?.segment.name ?? id}</Text>\n          </Select.Option>\n        )}\n        {availableSegments.map((segmentOption) => (\n          <Select.Option\n            key={segmentOption.id}\n            value={segmentOption.id}\n            textValue={segmentOption.name}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{segmentOption.name}</Text>\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext, useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\n\ntype SegmentsSelectProps = {\n  id: string;\n  availableSegments: CachedSegment['segment'][];\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  segment?: CachedSegment | null;\n  overlayWidth: string;\n  triggerClassName?: string;\n  isPlaceholder?: boolean;\n};\n\n/**\n * SegmentsSelect component\n * @internal\n */\nexport const SegmentSelect = forwardRef<\n  FormControlWithOverlayRef<HTMLDivElement>,\n  SegmentsSelectProps\n>((props, forwardedRef) => {\n  const {\n    availableSegments,\n    readOnly,\n    triggerClassName,\n    overlayWidth,\n    segment: cachedSegment,\n    autoFocus,\n    isPlaceholder,\n    id,\n  } = props;\n  const intl = useIntl();\n\n  const segmentSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs([forwardedRef, segmentSelectRef]);\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { updateUISegment, removeUISegment } = useSegmentsUIContext();\n\n  const { getSegment } = useSegmentsCache();\n\n  const { uiSegments } = useContext(UISegmentsContext);\n\n  const refIsDefined = segmentSelectRef.current !== null;\n\n  useEffect(() => {\n    segmentsClient.hasAccessRights && segmentSelectRef.current?.validate();\n    // We only want to shift the focus initially if it has autofocus (typically first select on open).\n    // when the first selected one is cleared and replaced by the placeholder we want to focus the select, but not open it.\n    if (uiSegments.length === 1 || autoFocus) {\n      segmentSelectRef.current?.focus?.();\n      return;\n    }\n\n    // If a new placeholder is added it should be opened.\n    // The open also moves the focus to the hidden input which isn't available on first render.\n    if (isPlaceholder && !autoFocus) {\n      segmentSelectRef.current?.open();\n    }\n\n    // The hidden trigger ref (coming from the react select) is not defined after the first render and,\n    // therefore, we must manually check the existence and then only once trigger the focus.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [refIsDefined]);\n\n  return (\n    <Select\n      ref={mergedRef}\n      className={styles.segmentsSelectCSS}\n      value={id}\n      id={id}\n      required={!isPlaceholder}\n      clearable={false}\n      readOnly={readOnly || cachedSegment?.temporarilyApplied}\n      onOpenChange={(isOpen) => {\n        if (isOpen) {\n          return;\n        }\n\n        variableSelectRef.current?.open();\n      }}\n      onChange={(segmentUid) => {\n        if (segmentUid) {\n          getSegment(segmentUid)\n            .then((newSegment) => {\n              updateUISegment(\n                { id },\n                {\n                  ...newSegment.segment,\n                  variables: !newSegment.segment.variables ? undefined : [],\n                },\n              );\n            })\n            .catch((error) => {\n              if (isDev()) {\n                // eslint-disable-next-line no-console\n                console.log(\n                  `SegmentSelector: fetching the segment with id ${id} failed.`,\n                  error,\n                );\n              }\n              removeUISegment(id);\n            });\n        }\n      }}\n    >\n      <Select.Trigger\n        width=\"full\"\n        className={clsx(triggerClassName, {\n          [styles.segmentsSelectTriggerCSS]: cachedSegment?.segment?.variables,\n        })}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsTriggerPlaceholder,\n        )}\n      />\n      <Select.Filter />\n      <Select.Content showSelectedOptionsFirst width={overlayWidth}>\n        <Select.EmptyState>\n          {availableSegments.length === 0\n            ? intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyState,\n              )\n            : intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyStateSearch,\n              )}\n        </Select.EmptyState>\n\n        {/**\n         * The availableSegments removes the current selection to only show the other options.\n         * This would also clear the select value and therefore this one is additionally rendered.\n         */}\n        {((id && !isPlaceholder) || cachedSegment?.segment) && (\n          <Select.Option\n            value={id}\n            key={id}\n            textValue={cachedSegment?.segment.name ?? id}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{cachedSegment?.segment.name ?? id}</Text>\n          </Select.Option>\n        )}\n        {availableSegments.map((segmentOption) => (\n          <Select.Option\n            key={segmentOption.id}\n            value={segmentOption.id}\n            textValue={segmentOption.name}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{segmentOption.name}</Text>\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js

@@ -1,15 +1,20 @@
+import "../../../../core/components/app-root/AppRoot.css";
 import "./SegmentSelect.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearButtonCSS = "_1fuxi5m3-3-4-0";
-var noBorderRadiusRight = "_1fuxi5m2-3-4-0";
-var segmentsSelectCSS = "_1fuxi5m1-3-4-0";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m4-3-4-0", variantClassNames: { layout: { full: "_1fuxi5m5-3-4-0", "full-readonly": "_1fuxi5m6-3-4-0", "no-variables": "_1fuxi5m7-3-4-0", "no-variables-readonly": "_1fuxi5m8-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var variablesSelectCSS = "_1fuxi5m0-3-4-0";
+var clearButtonCSS = "_1fuxi5m5-3-5-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-5-0";
+var segmentsSelectCSS = "_1fuxi5m0-3-5-0";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-5-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-5-0", "full-readonly": "_1fuxi5m8-3-5-0", "no-variables": "_1fuxi5m9-3-5-0", "no-variables-readonly": "_1fuxi5ma-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var segmentsSelectTriggerCSS = "_1fuxi5m1-3-5-0";
+var variablesSelectCSS = "_1fuxi5m3-3-5-0";
+var variablesSelectTriggerCSS = "_1fuxi5m4-3-5-0";
 export {
   clearButtonCSS,
   noBorderRadiusRight,
   segmentsSelectCSS,
   segmentsSelectGridCSS,
-  variablesSelectCSS
+  segmentsSelectTriggerCSS,
+  variablesSelectCSS,
+  variablesSelectTriggerCSS
 };
 //# sourceMappingURL=SegmentSelect.sty.js.map

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.css.ts"],
-  "sourcesContent": ["import './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m3-3-4-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-4-0';\nexport var segmentsSelectCSS = '_1fuxi5m1-3-4-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m4-3-4-0',variantClassNames:{layout:{full:'_1fuxi5m5-3-4-0','full-readonly':'_1fuxi5m6-3-4-0','no-variables':'_1fuxi5m7-3-4-0','no-variables-readonly':'_1fuxi5m8-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var variablesSelectCSS = '_1fuxi5m0-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,oBAAoB;AACxB,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,iBAAgB,mBAAkB,gBAAe,mBAAkB,yBAAwB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/Q,IAAI,qBAAqB;",
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentSelect.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearButtonCSS = '_1fuxi5m5-3-5-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-5-0';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-5-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-5-0',variantClassNames:{layout:{full:'_1fuxi5m7-3-5-0','full-readonly':'_1fuxi5m8-3-5-0','no-variables':'_1fuxi5m9-3-5-0','no-variables-readonly':'_1fuxi5ma-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-5-0';\nexport var variablesSelectCSS = '_1fuxi5m3-3-5-0';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,oBAAoB;AACxB,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,iBAAgB,mBAAkB,gBAAe,mBAAkB,yBAAwB,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/Q,IAAI,2BAA2B;AAC/B,IAAI,qBAAqB;AACzB,IAAI,4BAA4B;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css

@@ -1,3 +1,3 @@
-._1e5el1o0-3-4-0 {
+._1e5el1o0-3-5-0 {
   max-width: 400px;
 }

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js

@@ -1,5 +1,5 @@
 import "./SegmentSelectorTrigger.css";
-var trigger = "_1e5el1o0-3-4-0";
+var trigger = "_1e5el1o0-3-5-0";
 export {
   trigger
 };

package/esm/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css.ts"],
-  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-4-0';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/segment-selector/parts/selectionBar/ValueSelect.js

@@ -5,7 +5,7 @@ import { useContext, useEffect, useMemo, useRef } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import { useDql } from "@dynatrace-sdk/react-hooks";
-import { variablesSelectCSS } from "./SegmentSelect.sty.js";
+import * as styles from "./SegmentSelect.sty.js";
 import { StratoLoggerContext } from "../../../../core/sdk/StratoLoggerContext.js";
 import { useFormFieldMessagesContext } from "../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
 import { FormFieldMessagesAction } from "../../../../forms/forms-core/state/formfield-messages-state-reducer.js";
@@ -116,7 +116,7 @@ const ValueSelect = (props) => {
     {
       ref: variableSelectRef,
       multiple: true,
-      style: { gridArea: "variables" },
+      className: styles.variablesSelectCSS,
       required: true,
       readOnly: readOnly || segment?.temporarilyApplied,
       clearable: false,
@@ -170,7 +170,7 @@ const ValueSelect = (props) => {
         /* @__PURE__ */ jsx(
           Select.Trigger,
           {
-            className: clsx(variablesSelectCSS, triggerClassName),
+            className: clsx(styles.variablesSelectTriggerCSS, triggerClassName),
             placeholder: intl.formatMessage(
               SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder
             ),

package/esm/filters/segment-selector/parts/selectionBar/ValueSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/ValueSelect.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isArray } from 'lodash-es';\nimport { useContext, useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\n\nimport { variablesSelectCSS } from './SegmentSelect.sty.js';\nimport { StratoLoggerContext } from '../../../../core/sdk/StratoLoggerContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Link } from '../../../../typography/link/Link.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { type CachedSegment } from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport {\n  convertQueryRecordToStoreSegmentVariables,\n  getReadableValue,\n} from '../../utils.js';\nimport { sendManagementAddOnIntent } from '../sendSegmentManagementAddOnIntent.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n};\n\nconst dtClientContext = JSON.stringify({\n  source: 'SegmentSelector',\n  package: '@dynatrace/strato-components',\n});\n\n/**\n * ValueSelect component that allows the selection of variables of the segment\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const { triggerClassName, readOnly, segment, variables = [] } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError } = useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n\n  const intl = useIntl();\n\n  const stratoLogger = useContext(StratoLoggerContext);\n\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    forceRefetch,\n  } = useDql({\n    query,\n    maxResultRecords: 10_000,\n    maxResultBytes: 5_242_880, // 5 MB\n    dtClientContext,\n  });\n  useEffect(() => {\n    if (!isDqlLoading && data?.records?.length === 0) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        null,\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segment?.segment?.id,\n        },\n      );\n    }\n    // only update when the query changed and is not loading, to prevent multiple logs.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [query, isDqlLoading]);\n\n  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (data) {\n      const firstKey = Object.keys(data.records?.[0] ?? {})[0];\n      const dataRecordIds = data.records.map((record) => record?.[firstKey]);\n\n      return variables?.filter((variable) => !dataRecordIds.includes(variable));\n    }\n  }, [data, variables]);\n\n  /** Filters for all unique variable ids and strips duplicates. */\n  const availableVariables = useMemo(() => {\n    if (data?.records) {\n      let hasArrayIdentifier = false;\n      const recordsArray = data?.records\n        .map((singleRow) => {\n          const firstKey = singleRow ? Object.keys(singleRow)[0] : null;\n\n          if (!singleRow || !firstKey) {\n            return null;\n          }\n\n          if (isArray(singleRow[firstKey])) {\n            hasArrayIdentifier = true;\n          }\n\n          return `${singleRow[firstKey]}`;\n        })\n        .filter((value) => value !== 'null' && value !== null);\n\n      /**\n       * The array identifier error can only be detected when the variables are compared to\n       * the fetched data, as for all further usages we flatten the array. Therefore, we need\n       * to handle the error specifically. As the immediate dispatch would lead to a bad state\n       * but we want to avoid to iterate over the variables again, the state update is delayed here.\n       */\n      queueMicrotask(() => {\n        if (hasArrayIdentifier) {\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              variant: 'error',\n              messageType: 'formcontrol',\n              id: 'array-identifier',\n              validityStateKey: 'customError',\n              message: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n                />\n              ),\n            },\n          });\n        }\n        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);\n      });\n\n      return Array.from(new Set(recordsArray));\n    }\n  }, [data]);\n\n  const shouldOpen =\n    focusedSegmentId === segment.segment.id &&\n    variables.length === 0 &&\n    isTouched;\n\n  useEffect(() => {\n    shouldOpen && variableSelectRef.current?.open();\n  }, [shouldOpen]);\n\n  useEffect(() => {\n    // initially\n    !isTouched && variableSelectRef.current?.validate();\n    // we need to validate the select when the variables change\n    // this needs to be properly resolved in the select component,\n    // as this one needs to validate controlled values automatically.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTouched, JSON.stringify(variables)]);\n\n  return (\n    <Select\n      ref={variableSelectRef}\n      multiple\n      style={{ gridArea: 'variables' }}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      onOpenChange={(isOpen) => {\n        if (query.length > 0 && isOpen) {\n          forceRefetch();\n        }\n      }}\n      value={variables}\n      onChange={(newVariables) => {\n        if (!newVariables || newVariables.length === 0) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: [],\n            },\n          );\n          return;\n        }\n\n        // get all variable values from the actual data\n        const firstKey = Object.keys(data?.records[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              data?.records.find((singleRow) => {\n                if (isArray(singleRow?.[firstKey])) {\n                  const values = singleRow?.[firstKey].includes(variable);\n                  return values;\n                }\n\n                return singleRow && singleRow[firstKey] === variable;\n              }) ?? null\n            );\n          })\n          .filter((value) => value !== null);\n\n        const segmentVariables = convertQueryRecordToStoreSegmentVariables(\n          dataEnrichedVariables,\n        );\n\n        if (segmentVariables) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: segmentVariables,\n            },\n          );\n        }\n      }}\n    >\n      <Select.Trigger\n        className={clsx(variablesSelectCSS, triggerClassName)}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder,\n        )}\n      >\n        {variables?.length > 0 && (\n          <Select.DisplayValue>\n            <TextEllipsis>\n              {variables\n                .map((variable) => getReadableValue(variable, intl))\n                .join(', ')}\n            </TextEllipsis>\n          </Select.DisplayValue>\n        )}\n      </Select.Trigger>\n      <Select.Filter />\n      <Select.Content\n        loading={isDqlLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!data &&\n          variables?.map((variable) => (\n            <Select.Option key={variable} value={variable}>\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={unlistedVariable ?? undefined}\n          >\n            <Grid\n              gridTemplateColumns=\"auto auto\"\n              width=\"100%\"\n              alignItems=\"baseline\"\n            >\n              <Text>{getReadableValue(unlistedVariable, intl)}</Text>\n              <Text\n                textStyle=\"small\"\n                style={{\n                  color: Colors.Text.Neutral.Subdued,\n                  textAlign: 'right',\n                  textWrap: 'nowrap',\n                }}\n              >\n                {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}\n              </Text>\n            </Grid>\n          </Select.Option>\n        ))}\n        {availableVariables?.map((variable) => (\n          <Select.Option key={variable} value={variable}>\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}{' '}\n            <Text>{getReadableValue(variable, intl)}</Text>\n          </Select.Option>\n        ))}\n        <Select.EmptyState>\n          {data?.records.length ? (\n            <FormattedMessage\n              id=\"nIw/xeiGNJsj+a+5\"\n              defaultMessage=\"No matching values for this segment found.\"\n              description=\"Hint shown when searching for a segment variable that isn't in the list.\"\n            />\n          ) : (\n            <FormattedMessage\n              defaultMessage=\"No values for this segment available. You can manage this segment in {link}.\"\n              id=\"72DlIwYKB9UTEzlA\"\n              description=\"Empty state message if no variables for the segment are available.\"\n              values={{\n                link: (\n                  <Link onClick={sendManagementAddOnIntent}>\n                    <FormattedMessage\n                      defaultMessage=\"settings\"\n                      id=\"u55UYpLvXi//xGEn\"\n                      description=\"Link text to segments app in empty state message if no variables for the segment are available.\"\n                    />\n                  </Link>\n                ),\n              }}\n            />\n          )}\n        </Select.EmptyState>\n      </Select.Content>\n    </Select>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isArray } from 'lodash-es';\nimport { useContext, useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { StratoLoggerContext } from '../../../../core/sdk/StratoLoggerContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Link } from '../../../../typography/link/Link.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TextEllipsis } from '../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { type CachedSegment } from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport {\n  convertQueryRecordToStoreSegmentVariables,\n  getReadableValue,\n} from '../../utils.js';\nimport { sendManagementAddOnIntent } from '../sendSegmentManagementAddOnIntent.js';\n\ntype ValueSelectProps = {\n  readOnly?: boolean;\n  segment: CachedSegment;\n  variables?: string[];\n  triggerClassName?: string;\n};\n\nconst dtClientContext = JSON.stringify({\n  source: 'SegmentSelector',\n  package: '@dynatrace/strato-components',\n});\n\n/**\n * ValueSelect component that allows the selection of variables of the segment\n * @internal\n */\nexport const ValueSelect = (props: ValueSelectProps) => {\n  const { triggerClassName, readOnly, segment, variables = [] } = props;\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { focusedSegmentId, isTouched } = useContext(UISegmentsContext);\n  const { updateUISegment, setArrayIdentifierError } = useSegmentsUIContext();\n  const { dispatch: messagesDispatch } = useFormFieldMessagesContext();\n\n  const intl = useIntl();\n\n  const stratoLogger = useContext(StratoLoggerContext);\n\n  const query =\n    segment?.segment?.variables !== undefined &&\n    segment?.segment?.variables?.type === 'query'\n      ? segment.segment.variables.value\n      : '';\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    forceRefetch,\n  } = useDql({\n    query,\n    maxResultRecords: 10_000,\n    maxResultBytes: 5_242_880, // 5 MB\n    dtClientContext,\n  });\n  useEffect(() => {\n    if (!isDqlLoading && data?.records?.length === 0) {\n      stratoLogger?.info(\n        'Failed to retrieve segment variables: query returned no records.',\n        null,\n        {\n          query: query.split('|')[0], // log query until first pipe to avoid reporting sensitive data.\n          id: segment?.segment?.id,\n        },\n      );\n    }\n    // only update when the query changed and is not loading, to prevent multiple logs.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [query, isDqlLoading]);\n\n  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (data) {\n      const firstKey = Object.keys(data.records?.[0] ?? {})[0];\n      const dataRecordIds = data.records.map((record) => record?.[firstKey]);\n\n      return variables?.filter((variable) => !dataRecordIds.includes(variable));\n    }\n  }, [data, variables]);\n\n  /** Filters for all unique variable ids and strips duplicates. */\n  const availableVariables = useMemo(() => {\n    if (data?.records) {\n      let hasArrayIdentifier = false;\n      const recordsArray = data?.records\n        .map((singleRow) => {\n          const firstKey = singleRow ? Object.keys(singleRow)[0] : null;\n\n          if (!singleRow || !firstKey) {\n            return null;\n          }\n\n          if (isArray(singleRow[firstKey])) {\n            hasArrayIdentifier = true;\n          }\n\n          return `${singleRow[firstKey]}`;\n        })\n        .filter((value) => value !== 'null' && value !== null);\n\n      /**\n       * The array identifier error can only be detected when the variables are compared to\n       * the fetched data, as for all further usages we flatten the array. Therefore, we need\n       * to handle the error specifically. As the immediate dispatch would lead to a bad state\n       * but we want to avoid to iterate over the variables again, the state update is delayed here.\n       */\n      queueMicrotask(() => {\n        if (hasArrayIdentifier) {\n          messagesDispatch?.({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              variant: 'error',\n              messageType: 'formcontrol',\n              id: 'array-identifier',\n              validityStateKey: 'customError',\n              message: (\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n                />\n              ),\n            },\n          });\n        }\n        setArrayIdentifierError(hasArrayIdentifier, segment.segment.id);\n      });\n\n      return Array.from(new Set(recordsArray));\n    }\n  }, [data]);\n\n  const shouldOpen =\n    focusedSegmentId === segment.segment.id &&\n    variables.length === 0 &&\n    isTouched;\n\n  useEffect(() => {\n    shouldOpen && variableSelectRef.current?.open();\n  }, [shouldOpen]);\n\n  useEffect(() => {\n    // initially\n    !isTouched && variableSelectRef.current?.validate();\n    // we need to validate the select when the variables change\n    // this needs to be properly resolved in the select component,\n    // as this one needs to validate controlled values automatically.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isTouched, JSON.stringify(variables)]);\n\n  return (\n    <Select\n      ref={variableSelectRef}\n      multiple\n      className={styles.variablesSelectCSS}\n      required\n      readOnly={readOnly || segment?.temporarilyApplied}\n      clearable={false}\n      onOpenChange={(isOpen) => {\n        if (query.length > 0 && isOpen) {\n          forceRefetch();\n        }\n      }}\n      value={variables}\n      onChange={(newVariables) => {\n        if (!newVariables || newVariables.length === 0) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: [],\n            },\n          );\n          return;\n        }\n\n        // get all variable values from the actual data\n        const firstKey = Object.keys(data?.records[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              data?.records.find((singleRow) => {\n                if (isArray(singleRow?.[firstKey])) {\n                  const values = singleRow?.[firstKey].includes(variable);\n                  return values;\n                }\n\n                return singleRow && singleRow[firstKey] === variable;\n              }) ?? null\n            );\n          })\n          .filter((value) => value !== null);\n\n        const segmentVariables = convertQueryRecordToStoreSegmentVariables(\n          dataEnrichedVariables,\n        );\n\n        if (segmentVariables) {\n          updateUISegment(\n            {\n              ...segment.segment,\n              variables: [],\n            },\n            {\n              ...segment.segment,\n              variables: segmentVariables,\n            },\n          );\n        }\n      }}\n    >\n      <Select.Trigger\n        className={clsx(styles.variablesSelectTriggerCSS, triggerClassName)}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder,\n        )}\n      >\n        {variables?.length > 0 && (\n          <Select.DisplayValue>\n            <TextEllipsis>\n              {variables\n                .map((variable) => getReadableValue(variable, intl))\n                .join(', ')}\n            </TextEllipsis>\n          </Select.DisplayValue>\n        )}\n      </Select.Trigger>\n      <Select.Filter />\n      <Select.Content\n        loading={isDqlLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!data &&\n          variables?.map((variable) => (\n            <Select.Option key={variable} value={variable}>\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={unlistedVariable ?? undefined}\n          >\n            <Grid\n              gridTemplateColumns=\"auto auto\"\n              width=\"100%\"\n              alignItems=\"baseline\"\n            >\n              <Text>{getReadableValue(unlistedVariable, intl)}</Text>\n              <Text\n                textStyle=\"small\"\n                style={{\n                  color: Colors.Text.Neutral.Subdued,\n                  textAlign: 'right',\n                  textWrap: 'nowrap',\n                }}\n              >\n                {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.unavailable)}\n              </Text>\n            </Grid>\n          </Select.Option>\n        ))}\n        {availableVariables?.map((variable) => (\n          <Select.Option key={variable} value={variable}>\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}{' '}\n            <Text>{getReadableValue(variable, intl)}</Text>\n          </Select.Option>\n        ))}\n        <Select.EmptyState>\n          {data?.records.length ? (\n            <FormattedMessage\n              id=\"nIw/xeiGNJsj+a+5\"\n              defaultMessage=\"No matching values for this segment found.\"\n              description=\"Hint shown when searching for a segment variable that isn't in the list.\"\n            />\n          ) : (\n            <FormattedMessage\n              defaultMessage=\"No values for this segment available. You can manage this segment in {link}.\"\n              id=\"72DlIwYKB9UTEzlA\"\n              description=\"Empty state message if no variables for the segment are available.\"\n              values={{\n                link: (\n                  <Link onClick={sendManagementAddOnIntent}>\n                    <FormattedMessage\n                      defaultMessage=\"settings\"\n                      id=\"u55UYpLvXi//xGEn\"\n                      description=\"Link text to segments app in empty state message if no variables for the segment are available.\"\n                    />\n                  </Link>\n                ),\n              }}\n            />\n          )}\n        </Select.EmptyState>\n      </Select.Content>\n    </Select>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/timeframe-selector/TimeframeSelector.css

@@ -1,4 +1,4 @@
-._1sqhmjg0-3-4-0 {
+._1sqhmjg0-3-5-0 {
   min-width: 0;
   box-sizing: border-box;
 }

package/esm/filters/timeframe-selector/TimeframeSelector.sty.js

@@ -1,5 +1,5 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-4-0";
+var displayValueParts = "_1sqhmjg0-3-5-0";
 export {
   displayValueParts
 };

package/esm/filters/timeframe-selector/TimeframeSelector.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.css.ts"],
-  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-4-0';"],
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

package/esm/filters/timeframe-selector/TimeframeSelectorRoot.js

@@ -39,7 +39,7 @@ import { isSlot } from "../../core/utils/is-slot.js";
 import { devLog } from "../../core/utils/logging.js";
 import { InternalBaseItem as BaseItem } from "../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
 import { useFormFieldMessagesContext } from "../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
-import { useFormFieldValidation } from "../../forms/forms-core/hooks/useFormFieldValidation.js";
+import { useFormFieldValidationAriaProps } from "../../forms/forms-core/hooks/useFormFieldValidation.js";
 import { useMinMaxLogger } from "../../forms/forms-core/hooks/useMinMaxLogger.js";
 import { FormFieldMessagesAction } from "../../forms/forms-core/state/formfield-messages-state-reducer.js";
 import {
@@ -201,11 +201,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
     "aria-describedby": ariaDescribedByProp,
     "aria-details": ariaDetailsProp
   };
-  const { ariaProps: ariaFormProps, onBlur } = useFormFieldValidation(
-    fromInputRef,
-    {},
-    ariaLabelingProps
-  );
+  const ariaFormProps = useFormFieldValidationAriaProps(ariaLabelingProps);
   useImperativeHandle(
     forwardedRef,
     () => ({
@@ -266,9 +262,13 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
   ]);
   const handleOnBlur = useCallback(() => {
     if (!overlayState.isOpen) {
-      onBlur();
+      fromInputRef.current?.reportValidity();
+      formFieldMessagesDispatch?.({
+        type: FormFieldMessagesAction.SETISTOUCHED,
+        payload: { isTouched: true }
+      });
     }
-  }, [onBlur, overlayState.isOpen]);
+  }, [overlayState.isOpen, formFieldMessagesDispatch]);
   const triggerProps = useMemo(
     () => ({
       disabled,
@@ -298,9 +298,11 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
       triggerProps,
       hint: displayValueHint,
       readOnly,
-      showError: formControlStateError || formFieldMessagesState.showError
+      showError: formControlStateError || formFieldMessagesState.showError,
+      disabled
     }),
     [
+      disabled,
       details,
       readOnly,
       displayValue,

package/esm/filters/timeframe-selector/TimeframeSelectorRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelectorRoot.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { TimeframeSelectorOverlay } from './components/overlay/TimeframeSelectorOverlay.js';\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { StepperButton } from './components/stepper/StepperButton.js';\nimport { TimeframeSelectorTooltip } from './components/TimeframeSelectorTooltip.js';\nimport {\n  isTimeframeSelectorCustomTriggerElement,\n  type TimeframeSelectorCustomTriggerProps,\n} from './components/trigger/CustomTrigger.js';\nimport {\n  isTimeframeSelectorTriggerElement,\n  Trigger,\n  type TimeframeSelectorTriggerProps,\n} from './components/trigger/Trigger.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport type {\n  TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport { getTimeframePresets } from './utils/presets-helpers.js';\nimport {\n  TIMEFRAME_PRESETS_QUERY_KEY,\n  timeframeQueryClient,\n} from './utils/TimeframePresetsClient.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../../forms/forms-core/hooks/useMinMaxLogger.js';\nimport { FormFieldMessagesAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  parseValue,\n  removePrecision,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type { TimeRangePickerRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'TimeframeSelector';\n\n//#region Typings\ntype TimeframeSelectorSlotsAndPresetItemsMap = {\n  trigger: ReactElement<TimeframeSelectorTriggerProps> | null;\n  customTrigger: ReactElement<TimeframeSelectorCustomTriggerProps> | null;\n  presets: ReactNode;\n  presetItemsDisplayValuesMap: Map<string, ReactNode | undefined>;\n};\n//#endregion\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getItemSlots(children: ReactNode, precision?: Precision) {\n  const presetItemsDisplayValuesMap = new Map();\n  const slots: TimeframeSelectorSlotsAndPresetItemsMap = {\n    trigger: null,\n    customTrigger: null,\n    presets: null,\n    presetItemsDisplayValuesMap,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, Presets)) {\n      slots.presets = child;\n      for (const childItem of Children.toArray(child.props.children)) {\n        if (isSlot(childItem, PresetItem)) {\n          slots.presetItemsDisplayValuesMap.set(\n            `${removePrecision(\n              childItem.props.value.from,\n              precision,\n            )} ${removePrecision(childItem.props.value.to, precision)}`,\n            childItem.props.children,\n          );\n        }\n      }\n    } else if (isTimeframeSelectorCustomTriggerElement(child)) {\n      slots.customTrigger = child;\n    } else if (isTimeframeSelectorTriggerElement(child)) {\n      slots.trigger = child;\n    } else {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      devLog('The used child is not supported by the TimeframeSelector.');\n    }\n  }\n\n  return slots;\n}\n\n/** @internal */\nexport const TimeframeSelectorRoot = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const {\n    disabled,\n    value: propValue,\n    defaultValue,\n    /* eslint-disable @typescript-eslint/no-deprecated */\n    clearable = false,\n    readOnly = false,\n    controlState,\n    children,\n    onChange,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    name,\n    id,\n    stepper = true,\n    'aria-disabled': ariaDisabled,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  }: TimeframeSelectorProps = props;\n  const value = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorTimeframe,\n  );\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min);\n  const max = useTimeframeSelectorStore((state) => state.max);\n  const required = useTimeframeSelectorStore((state) => state.required);\n  const formatString = useTimeframeSelectorStore((state) => state.formatString);\n  const timeframeSelectorRef = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorRef,\n  );\n  const setDateTimeRangePickerTimeframe = useTimeframeSelectorStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n\n  const placeholder = intl.formatMessage({\n    defaultMessage: 'Select timeframe',\n    id: 'W+rTy8UuFKDho3mc',\n    description: 'Placeholder shown for the timeframe selector.',\n  });\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'TimeframeSelector');\n\n  const [formControlStateError, hint] = useFormControlState(controlState);\n\n  const { state: formFieldMessagesState, dispatch: formFieldMessagesDispatch } =\n    useFormFieldMessagesContext();\n\n  /** Handle overlay on open change. */\n  const onOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        setDateTimeRangePickerTimeframe(value);\n      }\n    },\n    [formFieldMessagesDispatch, setDateTimeRangePickerTimeframe, value],\n  );\n\n  const {\n    targetRef,\n    overlayRef,\n    triggerRef,\n    overlayProps,\n    overlayState,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    offset: 4,\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    heightStrategy: 'maxViewport',\n    disabled,\n    onOpenChange,\n  });\n\n  // Prefetch timeframe presets on mount so opening the overlay can use cached data immediately.\n  useEffect(() => {\n    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {\n      return;\n    }\n\n    timeframeQueryClient.prefetchQuery({\n      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n      queryFn: getTimeframePresets,\n    });\n  }, []);\n\n  const details = useMemo((): TimeframeValueDetails | null => {\n    const { from, to } = parseValue(value);\n    return from && to ? { from, to } : null;\n  }, [value]);\n\n  const { customTrigger, trigger, presets, presetItemsDisplayValuesMap } =\n    useMemo(() => getItemSlots(children, precision), [children, precision]);\n\n  const presetItemName = presetItemsDisplayValuesMap.get(\n    `${details?.from?.value} ${details?.to?.value}`,\n  );\n\n  const {\n    displayValue,\n    isInvalid: displayValueError,\n    hint: displayValueHint,\n  } = getTimeframeDisplayValueProps(\n    value,\n    intl,\n    placeholder,\n    precision,\n    presetItemName,\n    required,\n    min?.value,\n    max?.value,\n  );\n\n  const triggerErrorId = useId();\n  const inputId = useId();\n\n  // We need to create a ref to give access to the trigger in our imperative handle.\n  const imperativeTriggerRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fromInputRef = useRef<HTMLInputElement>(null);\n  const toInputRef = useRef<HTMLInputElement>(null);\n  const ariaLabelingProps = {\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  };\n  const { ariaProps: ariaFormProps, onBlur } = useFormFieldValidation(\n    fromInputRef,\n    {},\n    ariaLabelingProps,\n  );\n\n  useImperativeHandle(\n    forwardedRef,\n    (): TimeRangePickerRef => ({\n      element: containerRef.current,\n      triggerRef: imperativeTriggerRef.current,\n      inputRef: { from: fromInputRef.current, to: toInputRef.current },\n      open: overlayState.open,\n      close: overlayState.close,\n      focus() {\n        imperativeTriggerRef.current?.focus?.();\n      },\n      validate() {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n      },\n    }),\n    [formFieldMessagesDispatch, overlayState.close, overlayState.open],\n  );\n\n  useEffect(() => {\n    if (overlayState.isOpen) {\n      return;\n    }\n\n    if (!displayValueError && triggerErrorId) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n    }\n  }, [\n    displayValueError,\n    displayValueHint,\n    overlayState.isOpen,\n    triggerErrorId,\n    formFieldMessagesDispatch,\n    inputId,\n  ]);\n\n  const triggerButtonRef = useMergeRefs([\n    targetRef,\n    triggerRef,\n    imperativeTriggerRef,\n  ]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      onBlur();\n    }\n  }, [onBlur, overlayState.isOpen]);\n\n  const triggerProps = useMemo(\n    () => ({\n      disabled,\n      onBlur: handleOnBlur,\n      ref: triggerButtonRef,\n      id,\n      'aria-disabled': ariaDisabled,\n      ...ariaFormProps,\n      ...(readOnly ? {} : overlayTriggerProps),\n      'data-dt-component': COMPONENT_NAME,\n    }),\n    [\n      disabled,\n      handleOnBlur,\n      triggerButtonRef,\n      id,\n      ariaDisabled,\n      ariaFormProps,\n      readOnly,\n      overlayTriggerProps,\n    ],\n  );\n\n  const timeframeSelectorContextValue = useMemo(\n    () => ({\n      details,\n      displayValue,\n      triggerProps,\n      hint: displayValueHint,\n      readOnly,\n      showError: formControlStateError || formFieldMessagesState.showError,\n    }),\n    [\n      details,\n      readOnly,\n      displayValue,\n      triggerProps,\n      displayValueHint,\n      formControlStateError,\n      formFieldMessagesState.showError,\n    ],\n  );\n\n  return (\n    <TimeframeSelectorContext.Provider value={timeframeSelectorContextValue}>\n      <Flex\n        gap={4}\n        flexDirection=\"column\"\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={containerRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component=\"TimeframeSelector\"\n      >\n        <VisuallyHidden>\n          <input\n            id={inputId}\n            type=\"text\"\n            ref={fromInputRef}\n            name={name && `${name}-from`}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.from.value ?? ''}\n            onInvalid={(event) => {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n\n              // Prevents the browser validation pop up.\n              event.preventDefault();\n            }}\n            onChange={() => {\n              /** noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n          <input\n            type=\"text\"\n            ref={toInputRef}\n            name={name && `${name}-to`}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.to.value ?? ''}\n            onInvalid={(event) => event.preventDefault()}\n            onChange={() => {\n              /**noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n        </VisuallyHidden>\n        <InputGroup style={{ gridAutoColumns: 'auto max-content max-content' }}>\n          <TimeframeSelectorTooltip\n            displayValue={displayValue}\n            value={value}\n            disabled={disabled}\n          >\n            {customTrigger ?? trigger ?? <Trigger />}\n          </TimeframeSelectorTooltip>\n          {stepper && (\n            <>\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"backward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"forward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n            </>\n          )}\n        </InputGroup>\n        {controlState && hint && (\n          <BaseItem\n            variant={formControlStateError ? 'error' : 'hint'}\n            disabled={disabled || !!ariaDisabled}\n          >\n            {hint}\n          </BaseItem>\n        )}\n        {overlayState.isOpen && (\n          <TimeframeSelectorOverlay\n            ref={overlayRef}\n            overlayProps={overlayProps}\n            overlayClose={overlayState.close}\n            /* eslint-disable @typescript-eslint/no-deprecated */\n            clearable={clearable}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            {presets}\n          </TimeframeSelectorOverlay>\n        )}\n      </Flex>\n    </TimeframeSelectorContext.Provider>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { TimeframeSelectorOverlay } from './components/overlay/TimeframeSelectorOverlay.js';\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { StepperButton } from './components/stepper/StepperButton.js';\nimport { TimeframeSelectorTooltip } from './components/TimeframeSelectorTooltip.js';\nimport {\n  isTimeframeSelectorCustomTriggerElement,\n  type TimeframeSelectorCustomTriggerProps,\n} from './components/trigger/CustomTrigger.js';\nimport {\n  isTimeframeSelectorTriggerElement,\n  Trigger,\n  type TimeframeSelectorTriggerProps,\n} from './components/trigger/Trigger.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport type {\n  TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport { getTimeframePresets } from './utils/presets-helpers.js';\nimport {\n  TIMEFRAME_PRESETS_QUERY_KEY,\n  timeframeQueryClient,\n} from './utils/TimeframePresetsClient.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidationAriaProps } from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../../forms/forms-core/hooks/useMinMaxLogger.js';\nimport { FormFieldMessagesAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  parseValue,\n  removePrecision,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type { TimeRangePickerRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'TimeframeSelector';\n\n//#region Typings\ntype TimeframeSelectorSlotsAndPresetItemsMap = {\n  trigger: ReactElement<TimeframeSelectorTriggerProps> | null;\n  customTrigger: ReactElement<TimeframeSelectorCustomTriggerProps> | null;\n  presets: ReactNode;\n  presetItemsDisplayValuesMap: Map<string, ReactNode | undefined>;\n};\n//#endregion\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getItemSlots(children: ReactNode, precision?: Precision) {\n  const presetItemsDisplayValuesMap = new Map();\n  const slots: TimeframeSelectorSlotsAndPresetItemsMap = {\n    trigger: null,\n    customTrigger: null,\n    presets: null,\n    presetItemsDisplayValuesMap,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, Presets)) {\n      slots.presets = child;\n      for (const childItem of Children.toArray(child.props.children)) {\n        if (isSlot(childItem, PresetItem)) {\n          slots.presetItemsDisplayValuesMap.set(\n            `${removePrecision(\n              childItem.props.value.from,\n              precision,\n            )} ${removePrecision(childItem.props.value.to, precision)}`,\n            childItem.props.children,\n          );\n        }\n      }\n    } else if (isTimeframeSelectorCustomTriggerElement(child)) {\n      slots.customTrigger = child;\n    } else if (isTimeframeSelectorTriggerElement(child)) {\n      slots.trigger = child;\n    } else {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      devLog('The used child is not supported by the TimeframeSelector.');\n    }\n  }\n\n  return slots;\n}\n\n/** @internal */\nexport const TimeframeSelectorRoot = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const {\n    disabled,\n    value: propValue,\n    defaultValue,\n    /* eslint-disable @typescript-eslint/no-deprecated */\n    clearable = false,\n    readOnly = false,\n    controlState,\n    children,\n    onChange,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    name,\n    id,\n    stepper = true,\n    'aria-disabled': ariaDisabled,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  }: TimeframeSelectorProps = props;\n  const value = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorTimeframe,\n  );\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min);\n  const max = useTimeframeSelectorStore((state) => state.max);\n  const required = useTimeframeSelectorStore((state) => state.required);\n  const formatString = useTimeframeSelectorStore((state) => state.formatString);\n  const timeframeSelectorRef = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorRef,\n  );\n  const setDateTimeRangePickerTimeframe = useTimeframeSelectorStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n\n  const placeholder = intl.formatMessage({\n    defaultMessage: 'Select timeframe',\n    id: 'W+rTy8UuFKDho3mc',\n    description: 'Placeholder shown for the timeframe selector.',\n  });\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'TimeframeSelector');\n\n  const [formControlStateError, hint] = useFormControlState(controlState);\n\n  const { state: formFieldMessagesState, dispatch: formFieldMessagesDispatch } =\n    useFormFieldMessagesContext();\n\n  /** Handle overlay on open change. */\n  const onOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        setDateTimeRangePickerTimeframe(value);\n      }\n    },\n    [formFieldMessagesDispatch, setDateTimeRangePickerTimeframe, value],\n  );\n\n  const {\n    targetRef,\n    overlayRef,\n    triggerRef,\n    overlayProps,\n    overlayState,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    offset: 4,\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    heightStrategy: 'maxViewport',\n    disabled,\n    onOpenChange,\n  });\n\n  // Prefetch timeframe presets on mount so opening the overlay can use cached data immediately.\n  useEffect(() => {\n    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {\n      return;\n    }\n\n    timeframeQueryClient.prefetchQuery({\n      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n      queryFn: getTimeframePresets,\n    });\n  }, []);\n\n  const details = useMemo((): TimeframeValueDetails | null => {\n    const { from, to } = parseValue(value);\n    return from && to ? { from, to } : null;\n  }, [value]);\n\n  const { customTrigger, trigger, presets, presetItemsDisplayValuesMap } =\n    useMemo(() => getItemSlots(children, precision), [children, precision]);\n\n  const presetItemName = presetItemsDisplayValuesMap.get(\n    `${details?.from?.value} ${details?.to?.value}`,\n  );\n\n  const {\n    displayValue,\n    isInvalid: displayValueError,\n    hint: displayValueHint,\n  } = getTimeframeDisplayValueProps(\n    value,\n    intl,\n    placeholder,\n    precision,\n    presetItemName,\n    required,\n    min?.value,\n    max?.value,\n  );\n\n  const triggerErrorId = useId();\n  const inputId = useId();\n\n  // We need to create a ref to give access to the trigger in our imperative handle.\n  const imperativeTriggerRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fromInputRef = useRef<HTMLInputElement>(null);\n  const toInputRef = useRef<HTMLInputElement>(null);\n  const ariaLabelingProps = {\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  };\n  const ariaFormProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): TimeRangePickerRef => ({\n      element: containerRef.current,\n      triggerRef: imperativeTriggerRef.current,\n      inputRef: { from: fromInputRef.current, to: toInputRef.current },\n      open: overlayState.open,\n      close: overlayState.close,\n      focus() {\n        imperativeTriggerRef.current?.focus?.();\n      },\n      validate() {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n      },\n    }),\n    [formFieldMessagesDispatch, overlayState.close, overlayState.open],\n  );\n\n  useEffect(() => {\n    if (overlayState.isOpen) {\n      return;\n    }\n\n    if (!displayValueError && triggerErrorId) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n    }\n  }, [\n    displayValueError,\n    displayValueHint,\n    overlayState.isOpen,\n    triggerErrorId,\n    formFieldMessagesDispatch,\n    inputId,\n  ]);\n\n  const triggerButtonRef = useMergeRefs([\n    targetRef,\n    triggerRef,\n    imperativeTriggerRef,\n  ]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      fromInputRef.current?.reportValidity();\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n    }\n  }, [overlayState.isOpen, formFieldMessagesDispatch]);\n\n  const triggerProps = useMemo(\n    () => ({\n      disabled,\n      onBlur: handleOnBlur,\n      ref: triggerButtonRef,\n      id,\n      'aria-disabled': ariaDisabled,\n      ...ariaFormProps,\n      ...(readOnly ? {} : overlayTriggerProps),\n      'data-dt-component': COMPONENT_NAME,\n    }),\n    [\n      disabled,\n      handleOnBlur,\n      triggerButtonRef,\n      id,\n      ariaDisabled,\n      ariaFormProps,\n      readOnly,\n      overlayTriggerProps,\n    ],\n  );\n\n  const timeframeSelectorContextValue = useMemo(\n    () => ({\n      details,\n      displayValue,\n      triggerProps,\n      hint: displayValueHint,\n      readOnly,\n      showError: formControlStateError || formFieldMessagesState.showError,\n      disabled,\n    }),\n    [\n      disabled,\n      details,\n      readOnly,\n      displayValue,\n      triggerProps,\n      displayValueHint,\n      formControlStateError,\n      formFieldMessagesState.showError,\n    ],\n  );\n\n  return (\n    <TimeframeSelectorContext.Provider value={timeframeSelectorContextValue}>\n      <Flex\n        gap={4}\n        flexDirection=\"column\"\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={containerRef}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component=\"TimeframeSelector\"\n      >\n        <VisuallyHidden>\n          <input\n            id={inputId}\n            type=\"text\"\n            ref={fromInputRef}\n            name={name && `${name}-from`}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.from.value ?? ''}\n            onInvalid={(event) => {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n\n              // Prevents the browser validation pop up.\n              event.preventDefault();\n            }}\n            onChange={() => {\n              /** noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n          <input\n            type=\"text\"\n            ref={toInputRef}\n            name={name && `${name}-to`}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.to.value ?? ''}\n            onInvalid={(event) => event.preventDefault()}\n            onChange={() => {\n              /**noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n        </VisuallyHidden>\n        <InputGroup style={{ gridAutoColumns: 'auto max-content max-content' }}>\n          <TimeframeSelectorTooltip\n            displayValue={displayValue}\n            value={value}\n            disabled={disabled}\n          >\n            {customTrigger ?? trigger ?? <Trigger />}\n          </TimeframeSelectorTooltip>\n          {stepper && (\n            <>\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"backward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"forward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n            </>\n          )}\n        </InputGroup>\n        {controlState && hint && (\n          <BaseItem\n            variant={formControlStateError ? 'error' : 'hint'}\n            disabled={disabled || !!ariaDisabled}\n          >\n            {hint}\n          </BaseItem>\n        )}\n        {overlayState.isOpen && (\n          <TimeframeSelectorOverlay\n            ref={overlayRef}\n            overlayProps={overlayProps}\n            overlayClose={overlayState.close}\n            /* eslint-disable @typescript-eslint/no-deprecated */\n            clearable={clearable}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            {presets}\n          </TimeframeSelectorOverlay>\n        )}\n      </Flex>\n    </TimeframeSelectorContext.Provider>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css

@@ -1,4 +1,4 @@
-._at2xro0-3-4-0 {
+._at2xro0-3-5-0 {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7,7 +7,7 @@
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
 }
-._at2xro1-3-4-0 {
+._at2xro1-3-5-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-8, 8px);
@@ -18,14 +18,14 @@
   width: 100%;
   flex-direction: column;
 }
-._at2xro2-3-4-0 {
+._at2xro2-3-5-0 {
   flex-direction: column;
   flex: 1;
   min-width: var(--dt-spacings-size-0, 0);
   gap: var(--dt-spacings-size-4, 4px);
 }
 @media screen and (min-width: 640px) {
-  ._at2xro1-3-4-0 {
+  ._at2xro1-3-5-0 {
     flex-direction: row;
   }
 }

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

@@ -328,7 +328,18 @@ const CustomTimeframeSelector = () => {
                   ref,
                   id: dateTimeRangePickerId,
                   required: required || contextRequired,
-                  style: { gridTemplateColumns: "1fr auto" }
+                  style: { gridTemplateColumns: "1fr auto" },
+                  onBlur: (event) => {
+                    const hasPresetItemSelected = event.relatedTarget?.getAttribute("role") === "option";
+                    const isActiveElementInside = ref.current?.element?.contains(document.activeElement);
+                    if (hasPresetItemSelected || isActiveElementInside) {
+                      return;
+                    }
+                    dispatch({
+                      type: FormFieldMessagesAction.SETISTOUCHED,
+                      payload: { isTouched: true }
+                    });
+                  }
                 }
               ),
               isScreenLargerThanMobile && /* @__PURE__ */ jsx(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.tsx"],
-  "sourcesContent": ["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport BreakpointsJS from '@dynatrace/strato-design-tokens/breakpoints-js';\n\nimport * as customTimeframeSelectorStyles from './CustomTimeframeSelector.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport type { TimeErrorKey } from '../../../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  getTimeBoundaryMessageData,\n  validate,\n} from '../../../../core/time/validation.js';\nimport { DateTimeRangePickerRoot } from '../../../../forms/date-time-range-picker/DateTimeRangePickerRoot.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { Label } from '../../../../forms/forms-core/components/label/Label.js';\nimport { _FormFieldContext as FormFieldContext } from '../../../../forms/forms-core/contexts/FormFieldContext.js';\nimport { FormFieldMessageContext } from '../../../../forms/forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../../../forms/forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { sortTimeframeValues } from '../../../../forms/forms-core/time/helpers.js';\nimport {\n  getFromToValues,\n  parseValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport type { FormFieldMessageContextState } from '../../../../forms/forms-core/types/formfield-messages.types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport {\n  TIMEFRAMESELECTOR_ERROR_MESSAGES,\n  TIMEFRAME_SELECTOR_MESSAGES,\n} from '../../constants/timeframeSelectorMessages.js';\nimport { saveRecentTimeframe } from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n/**\n * Custom Timeframe Selector component used inside the overlay.\n */\nexport const CustomTimeframeSelector = () => {\n  const ref = useTimeframeSelectorStore(\n    (state) => state.dateTimeRangePickerRef,\n  );\n  const intl = useIntl();\n  const value = useTimeframeSelectorStore(\n    (state) => state.dateTimeRangePickerTimeframe,\n  );\n  const onChange = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n  const min = useTimeframeSelectorStore((state) => state.min);\n  const max = useTimeframeSelectorStore((state) => state.max);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const required = useTimeframeSelectorStore((state) => state.required);\n  const dateTimeRangePickerError = useTimeframeSelectorStore(\n    (state) => state.dateTimeRangePickerError,\n  );\n  const formatString = useTimeframeSelectorStore((state) => state.formatString);\n\n  const {\n    state: { showError },\n  } = useFormFieldMessagesContext();\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const dateTimeRangePickerId = useId();\n\n  const hintId = useId();\n\n  const labelId = useId();\n\n  const { from, to } = parseValue(value);\n\n  const { required: contextRequired } = useFormFieldContext();\n\n  const callback = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [],\n  );\n\n  const [state, dispatch] = useReducer(callback, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: showError,\n    isTouched: showError,\n  });\n  const applyButtonDataDtName = 'Apply';\n  const { valueFrom, valueTo } = getFromToValues(value);\n  const applyButtonDataDtProperties = `valueFrom:${valueFrom},valueTo:${valueTo}`;\n\n  // Track the previous validation error so validate() can clean up stale\n  // messages in the local FormFieldMessageContext.\n  const previousErrorRef = useRef<TimeErrorKey | undefined>();\n\n  // Track validation errors on every value change.\n  // If the outer TimeframeSelector already shows an error, propagate that\n  // visibility to the DateTimeRangePicker context immediately.\n  useEffect(() => {\n    previousErrorRef.current = validate(value, min, max, {\n      formMessageDispatch: dispatch,\n      formerError: previousErrorRef.current,\n      precision,\n      showError,\n      checkOrder: true,\n      ref,\n      expectedFormat: formatString,\n      valueMode: 'dateTimePicker',\n      required: required || contextRequired,\n      errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n    });\n\n    if (!required && !contextRequired) {\n      if (!from && to?.value === 'now()') {\n        dispatch({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: hintId,\n            variant: 'error',\n            message: intl.formatMessage(\n              TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom,\n            ),\n            messageType: 'formcontrol',\n            validityStateKey: 'customError',\n          },\n        });\n        return;\n      }\n\n      if (!to && from?.value === 'now()') {\n        dispatch({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: hintId,\n            variant: 'error',\n            message: intl.formatMessage(\n              TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo,\n            ),\n            messageType: 'formcontrol',\n            validityStateKey: 'customError',\n          },\n        });\n        return;\n      }\n    }\n  }, [\n    value,\n    min,\n    max,\n    dispatch,\n    precision,\n    formatString,\n    required,\n    contextRequired,\n    showError,\n    ref,\n  ]);\n\n  /** Handle form submission. */\n  const handleApply = useCallback(() => {\n    if (dateTimeRangePickerError) {\n      return;\n    }\n\n    const currentValue = ref.current?.getCurrentValue();\n    const refFrom = currentValue?.from?.value;\n    const refTo = currentValue?.to?.value;\n\n    let currentTimeframe = value;\n\n    const onlyFromIsEmpty = !refFrom && !!refTo && refTo !== 'now()';\n    const onlyToIsEmpty = !refTo && !!refFrom && refFrom !== 'now()';\n\n    if (onlyFromIsEmpty || onlyToIsEmpty) {\n      // If one of the fields is empty, fill it with 'Now'\n      const from = ref.current?.inputRef.from?.value || 'now()';\n      const to = ref.current?.inputRef.to?.value || 'now()';\n      const parsedTimeframe = parseValue({ from, to }, false, precision);\n\n      if (parsedTimeframe.from && parsedTimeframe.to) {\n        // Exit if the parsed timeframe is out of bounds\n        if (\n          isOutsideRange(\n            {\n              from: parsedTimeframe.from.value,\n              to: parsedTimeframe.to.value,\n            },\n            min?.value,\n            max?.value,\n          )\n        ) {\n          return;\n        }\n\n        const sortedTimeframe = sortTimeframeValues({\n          from: parsedTimeframe.from,\n          to: parsedTimeframe.to,\n        });\n\n        if (sortedTimeframe.from && sortedTimeframe.to) {\n          currentTimeframe = {\n            from: sortedTimeframe.from,\n            to: sortedTimeframe.to,\n          };\n        }\n      }\n    }\n\n    /** parse date-picker inputs to have latest expression values on form submission */\n    const { from, to } = currentTimeframe\n      ? parseValue(currentTimeframe, false, precision)\n      : { from: null, to: null };\n\n    if (from && to) {\n      const timeframe = { from, to };\n      onChange(timeframe);\n      saveRecentTimeframe(timeframe);\n      return;\n    }\n\n    if (!required && !contextRequired) {\n      const hasFromValue = Boolean(refFrom);\n      const hasToValue = Boolean(refTo);\n\n      // For optional selector, only emit null when both sides are truly empty.\n      // Partial values must remain unapplied.\n      if (!hasFromValue && !hasToValue) {\n        onChange(null);\n      }\n    }\n  }, [\n    dateTimeRangePickerError,\n    ref,\n    value,\n    precision,\n    required,\n    contextRequired,\n    min,\n    max,\n    onChange,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (\n        e.key !== 'Enter' ||\n        // Checks if the event target is a child of the DateTimeRangePicker root element ref.\n        !ref.current?.element?.contains(e.target as HTMLElement)\n      ) {\n        return;\n      }\n\n      ref.current?.validate();\n      handleApply();\n    },\n    [handleApply, ref],\n  );\n\n  const isScreenLargerThanMobile = useBreakpoint(\n    `(min-width: ${BreakpointsJS.Max.Mobile}px)`,\n    true,\n  );\n\n  useEffect(() => {\n    const timeBoundaryMessageData = getTimeBoundaryMessageData(\n      {\n        from,\n        to,\n      },\n      min,\n      max,\n      precision,\n      false,\n    );\n\n    if (!timeBoundaryMessageData) {\n      if (!required && !contextRequired) {\n        if (!from && to?.value === 'now()') {\n          dispatch({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: hintId,\n              variant: 'error',\n              message: intl.formatMessage(\n                TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom,\n              ),\n              messageType: 'formcontrol',\n              validityStateKey: 'customError',\n            },\n          });\n          return;\n        }\n\n        if (!to && from?.value === 'now()') {\n          dispatch({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: hintId,\n              variant: 'error',\n              message: intl.formatMessage(\n                TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo,\n              ),\n              messageType: 'formcontrol',\n              validityStateKey: 'customError',\n            },\n          });\n          return;\n        }\n      }\n\n      dispatch({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: hintId,\n          messageType: 'formcontrol',\n        },\n      });\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id: hintId,\n        variant: 'hint',\n        message: intl.formatMessage(\n          TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],\n          timeBoundaryMessageData.values,\n        ),\n        messageType: 'formcontrol',\n        validityStateKey: 'customError',\n      },\n    });\n  }, [\n    min,\n    max,\n    dispatch,\n    intl,\n    precision,\n    hintId,\n    from,\n    to,\n    required,\n    contextRequired,\n  ]);\n\n  const messageContextValue = useMemo(\n    () => ({\n      dispatch,\n      state,\n    }),\n    [dispatch, state],\n  );\n\n  return (\n    <div ref={rootRef} className={customTimeframeSelectorStyles.overlayRoot}>\n      <FormFieldMessageContext.Provider value={messageContextValue}>\n        <Flex className={customTimeframeSelectorStyles.wrapper}>\n          <div onKeyDown={handleKeyDown}>\n            <FormFieldContext.Provider value={{}}>\n              <fieldset\n                className={customTimeframeSelectorStyles.fieldset}\n                aria-labelledby={labelId}\n              >\n                <Label\n                  htmlFor={dateTimeRangePickerId}\n                  required={required || contextRequired}\n                  id={labelId}\n                >\n                  {intl.formatMessage(\n                    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n                  )}\n                </Label>\n                <InputGroup style={{ gridAutoColumns: '1fr auto' }}>\n                  <DateTimeRangePickerRoot\n                    ref={ref}\n                    id={dateTimeRangePickerId}\n                    required={required || contextRequired}\n                    style={{ gridTemplateColumns: '1fr auto' }}\n                  />\n                  {isScreenLargerThanMobile && (\n                    <Button\n                      color=\"primary\"\n                      variant=\"accent\"\n                      type=\"submit\"\n                      onClick={handleApply}\n                      style={{\n                        alignSelf: 'end',\n                        borderTopLeftRadius: 0,\n                        borderBottomLeftRadius: 0,\n                      }}\n                      data-dt-name={applyButtonDataDtName}\n                      data-dt-properties={applyButtonDataDtProperties}\n                    >\n                      {intl.formatMessage(\n                        TIMEFRAME_SELECTOR_MESSAGES.applyButton,\n                      )}\n                    </Button>\n                  )}\n                </InputGroup>\n              </fieldset>\n            </FormFieldContext.Provider>\n          </div>\n          <FormFieldMessages />\n        </Flex>\n        {!isScreenLargerThanMobile && (\n          <Button\n            color=\"primary\"\n            variant=\"accent\"\n            type=\"submit\"\n            style={{ alignSelf: 'end' }}\n            onClick={handleApply}\n            data-dt-name={applyButtonDataDtName}\n            data-dt-properties={applyButtonDataDtProperties}\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.applyButton)}\n          </Button>\n        )}\n      </FormFieldMessageContext.Provider>\n    </div>\n  );\n};\n\nCustomTimeframeSelector['displayName'] = 'CustomTimeframeSelector';\n"],
-  "mappings": "AA0XgB,cASA,YATA;AA1XhB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,eAAe;AAExB,OAAO,mBAAmB;AAE1B,YAAY,mCAAmC;AAC/C,SAAS,cAAc;AACvB,SAAS,aAAa;AAEtB,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,aAAa;AACtB,SAAS,qBAAqB,wBAAwB;AACtD,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAKxB,MAAM,0BAA0B,MAAM;AAC3C,QAAM,MAAM;AAAA,IACV,CAACA,WAAUA,OAAM;AAAA,EACnB;AACA,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ;AAAA,IACZ,CAACA,WAAUA,OAAM;AAAA,EACnB;AACA,QAAM,WAAW;AAAA,IACf,CAACA,WAAUA,OAAM;AAAA,EACnB;AACA,QAAM,MAAM,0BAA0B,CAACA,WAAUA,OAAM,GAAG;AAC1D,QAAM,MAAM,0BAA0B,CAACA,WAAUA,OAAM,GAAG;AAC1D,QAAM,YAAY,0BAA0B,CAACA,WAAUA,OAAM,SAAS;AACtE,QAAM,WAAW,0BAA0B,CAACA,WAAUA,OAAM,QAAQ;AACpE,QAAM,2BAA2B;AAAA,IAC/B,CAACA,WAAUA,OAAM;AAAA,EACnB;AACA,QAAM,eAAe,0BAA0B,CAACA,WAAUA,OAAM,YAAY;AAE5E,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU;AAAA,EACrB,IAAI,4BAA4B;AAChC,QAAM,UAAU,OAA8B,IAAI;AAElD,QAAM,wBAAwB,MAAM;AAEpC,QAAM,SAAS,MAAM;AAErB,QAAM,UAAU,MAAM;AAEtB,QAAM,EAAE,MAAM,GAAG,IAAI,WAAW,KAAK;AAErC,QAAM,EAAE,UAAU,gBAAgB,IAAI,oBAAoB;AAE1D,QAAM,WAAW;AAAA,IACf,CACEA,QACA,WACG,yBAAyBA,QAAO,MAAM;AAAA,IAC3C,CAAC;AAAA,EACH;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,UAAU;AAAA,IAC7C,gBAAgB,CAAC;AAAA,IACjB,qBAAqB,CAAC;AAAA,IACtB;AAAA,IACA,WAAW;AAAA,EACb,CAAC;AACD,QAAM,wBAAwB;AAC9B,QAAM,EAAE,WAAW,QAAQ,IAAI,gBAAgB,KAAK;AACpD,QAAM,8BAA8B,aAAa,SAAS,YAAY,OAAO;AAI7E,QAAM,mBAAmB,OAAiC;AAK1D,YAAU,MAAM;AACd,qBAAiB,UAAU,SAAS,OAAO,KAAK,KAAK;AAAA,MACnD,qBAAqB;AAAA,MACrB,aAAa,iBAAiB;AAAA,MAC9B;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,UAAU,YAAY;AAAA,MACtB,eAAe;AAAA,IACjB,CAAC;AAED,QAAI,CAAC,YAAY,CAAC,iBAAiB;AACjC,UAAI,CAAC,QAAQ,IAAI,UAAU,SAAS;AAClC,iBAAS;AAAA,UACP,MAAM,wBAAwB;AAAA,UAC9B,SAAS;AAAA,YACP,IAAI;AAAA,YACJ,SAAS;AAAA,YACT,SAAS,KAAK;AAAA,cACZ,iCAAiC;AAAA,YACnC;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,UACpB;AAAA,QACF,CAAC;AACD;AAAA,MACF;AAEA,UAAI,CAAC,MAAM,MAAM,UAAU,SAAS;AAClC,iBAAS;AAAA,UACP,MAAM,wBAAwB;AAAA,UAC9B,SAAS;AAAA,YACP,IAAI;AAAA,YACJ,SAAS;AAAA,YACT,SAAS,KAAK;AAAA,cACZ,iCAAiC;AAAA,YACnC;AAAA,YACA,aAAa;AAAA,YACb,kBAAkB;AAAA,UACpB;AAAA,QACF,CAAC;AACD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,0BAA0B;AAC5B;AAAA,IACF;AAEA,UAAM,eAAe,IAAI,SAAS,gBAAgB;AAClD,UAAM,UAAU,cAAc,MAAM;AACpC,UAAM,QAAQ,cAAc,IAAI;AAEhC,QAAI,mBAAmB;AAEvB,UAAM,kBAAkB,CAAC,WAAW,CAAC,CAAC,SAAS,UAAU;AACzD,UAAM,gBAAgB,CAAC,SAAS,CAAC,CAAC,WAAW,YAAY;AAEzD,QAAI,mBAAmB,eAAe;AAEpC,YAAMC,QAAO,IAAI,SAAS,SAAS,MAAM,SAAS;AAClD,YAAMC,MAAK,IAAI,SAAS,SAAS,IAAI,SAAS;AAC9C,YAAM,kBAAkB,WAAW,EAAE,MAAAD,OAAM,IAAAC,IAAG,GAAG,OAAO,SAAS;AAEjE,UAAI,gBAAgB,QAAQ,gBAAgB,IAAI;AAE9C,YACE;AAAA,UACE;AAAA,YACE,MAAM,gBAAgB,KAAK;AAAA,YAC3B,IAAI,gBAAgB,GAAG;AAAA,UACzB;AAAA,UACA,KAAK;AAAA,UACL,KAAK;AAAA,QACP,GACA;AACA;AAAA,QACF;AAEA,cAAM,kBAAkB,oBAAoB;AAAA,UAC1C,MAAM,gBAAgB;AAAA,UACtB,IAAI,gBAAgB;AAAA,QACtB,CAAC;AAED,YAAI,gBAAgB,QAAQ,gBAAgB,IAAI;AAC9C,6BAAmB;AAAA,YACjB,MAAM,gBAAgB;AAAA,YACtB,IAAI,gBAAgB;AAAA,UACtB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAGA,UAAM,EAAE,MAAAD,OAAM,IAAAC,IAAG,IAAI,mBACjB,WAAW,kBAAkB,OAAO,SAAS,IAC7C,EAAE,MAAM,MAAM,IAAI,KAAK;AAE3B,QAAID,SAAQC,KAAI;AACd,YAAM,YAAY,EAAE,MAAAD,OAAM,IAAAC,IAAG;AAC7B,eAAS,SAAS;AAClB,0BAAoB,SAAS;AAC7B;AAAA,IACF;AAEA,QAAI,CAAC,YAAY,CAAC,iBAAiB;AACjC,YAAM,eAAe,QAAQ,OAAO;AACpC,YAAM,aAAa,QAAQ,KAAK;AAIhC,UAAI,CAAC,gBAAgB,CAAC,YAAY;AAChC,iBAAS,IAAI;AAAA,MACf;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0C;AACzC,UACE,EAAE,QAAQ;AAAA,MAEV,CAAC,IAAI,SAAS,SAAS,SAAS,EAAE,MAAqB,GACvD;AACA;AAAA,MACF;AAEA,UAAI,SAAS,SAAS;AACtB,kBAAY;AAAA,IACd;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,EACnB;AAEA,QAAM,2BAA2B;AAAA,IAC/B,eAAe,cAAc,IAAI,MAAM;AAAA,IACvC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,UAAM,0BAA0B;AAAA,MAC9B;AAAA,QACE;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,CAAC,yBAAyB;AAC5B,UAAI,CAAC,YAAY,CAAC,iBAAiB;AACjC,YAAI,CAAC,QAAQ,IAAI,UAAU,SAAS;AAClC,mBAAS;AAAA,YACP,MAAM,wBAAwB;AAAA,YAC9B,SAAS;AAAA,cACP,IAAI;AAAA,cACJ,SAAS;AAAA,cACT,SAAS,KAAK;AAAA,gBACZ,iCAAiC;AAAA,cACnC;AAAA,cACA,aAAa;AAAA,cACb,kBAAkB;AAAA,YACpB;AAAA,UACF,CAAC;AACD;AAAA,QACF;AAEA,YAAI,CAAC,MAAM,MAAM,UAAU,SAAS;AAClC,mBAAS;AAAA,YACP,MAAM,wBAAwB;AAAA,YAC9B,SAAS;AAAA,cACP,IAAI;AAAA,cACJ,SAAS;AAAA,cACT,SAAS,KAAK;AAAA,gBACZ,iCAAiC;AAAA,cACnC;AAAA,cACA,aAAa;AAAA,cACb,kBAAkB;AAAA,YACpB;AAAA,UACF,CAAC;AACD;AAAA,QACF;AAAA,MACF;AAEA,eAAS;AAAA,QACP,MAAM,wBAAwB;AAAA,QAC9B,SAAS;AAAA,UACP,IAAI;AAAA,UACJ,aAAa;AAAA,QACf;AAAA,MACF,CAAC;AACD;AAAA,IACF;AAEA,aAAS;AAAA,MACP,MAAM,wBAAwB;AAAA,MAC9B,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,SAAS,KAAK;AAAA,UACZ,iCAAiC,wBAAwB,QAAQ;AAAA,UACjE,wBAAwB;AAAA,QAC1B;AAAA,QACA,aAAa;AAAA,QACb,kBAAkB;AAAA,MACpB;AAAA,IACF,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB;AAAA,IAC1B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,SACE,oBAAC,SAAI,KAAK,SAAS,WAAW,8BAA8B,aAC1D,+BAAC,wBAAwB,UAAxB,EAAiC,OAAO,qBACvC;AAAA,yBAAC,QAAK,WAAW,8BAA8B,SAC7C;AAAA,0BAAC,SAAI,WAAW,eACd,8BAAC,iBAAiB,UAAjB,EAA0B,OAAO,CAAC,GACjC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,8BAA8B;AAAA,UACzC,mBAAiB;AAAA,UAEjB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,UAAU,YAAY;AAAA,gBACtB,IAAI;AAAA,gBAEH,eAAK;AAAA,kBACJ,4BAA4B;AAAA,gBAC9B;AAAA;AAAA,YACF;AAAA,YACA,qBAAC,cAAW,OAAO,EAAE,iBAAiB,WAAW,GAC/C;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,IAAI;AAAA,kBACJ,UAAU,YAAY;AAAA,kBACtB,OAAO,EAAE,qBAAqB,WAAW;AAAA;AAAA,cAC3C;AAAA,cACC,4BACC;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,OAAO;AAAA,oBACL,WAAW;AAAA,oBACX,qBAAqB;AAAA,oBACrB,wBAAwB;AAAA,kBAC1B;AAAA,kBACA,gBAAc;AAAA,kBACd,sBAAoB;AAAA,kBAEnB,eAAK;AAAA,oBACJ,4BAA4B;AAAA,kBAC9B;AAAA;AAAA,cACF;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF,GACF,GACF;AAAA,MACA,oBAAC,qBAAkB;AAAA,OACrB;AAAA,IACC,CAAC,4BACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO,EAAE,WAAW,MAAM;AAAA,QAC1B,SAAS;AAAA,QACT,gBAAc;AAAA,QACd,sBAAoB;AAAA,QAEnB,eAAK,cAAc,4BAA4B,WAAW;AAAA;AAAA,IAC7D;AAAA,KAEJ,GACF;AAEJ;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport BreakpointsJS from '@dynatrace/strato-design-tokens/breakpoints-js';\n\nimport * as customTimeframeSelectorStyles from './CustomTimeframeSelector.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport type { TimeErrorKey } from '../../../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  getTimeBoundaryMessageData,\n  validate,\n} from '../../../../core/time/validation.js';\nimport { DateTimeRangePickerRoot } from '../../../../forms/date-time-range-picker/DateTimeRangePickerRoot.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { Label } from '../../../../forms/forms-core/components/label/Label.js';\nimport { _FormFieldContext as FormFieldContext } from '../../../../forms/forms-core/contexts/FormFieldContext.js';\nimport { FormFieldMessageContext } from '../../../../forms/forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../../../forms/forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { sortTimeframeValues } from '../../../../forms/forms-core/time/helpers.js';\nimport {\n  getFromToValues,\n  parseValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport type { FormFieldMessageContextState } from '../../../../forms/forms-core/types/formfield-messages.types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport {\n  TIMEFRAMESELECTOR_ERROR_MESSAGES,\n  TIMEFRAME_SELECTOR_MESSAGES,\n} from '../../constants/timeframeSelectorMessages.js';\nimport { saveRecentTimeframe } from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n/**\n * Custom Timeframe Selector component used inside the overlay.\n */\nexport const CustomTimeframeSelector = () => {\n  const ref = useTimeframeSelectorStore(\n    (state) => state.dateTimeRangePickerRef,\n  );\n  const intl = useIntl();\n  const value = useTimeframeSelectorStore(\n    (state) => state.dateTimeRangePickerTimeframe,\n  );\n  const onChange = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n  const min = useTimeframeSelectorStore((state) => state.min);\n  const max = useTimeframeSelectorStore((state) => state.max);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const required = useTimeframeSelectorStore((state) => state.required);\n  const dateTimeRangePickerError = useTimeframeSelectorStore(\n    (state) => state.dateTimeRangePickerError,\n  );\n  const formatString = useTimeframeSelectorStore((state) => state.formatString);\n\n  const {\n    state: { showError },\n  } = useFormFieldMessagesContext();\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const dateTimeRangePickerId = useId();\n\n  const hintId = useId();\n\n  const labelId = useId();\n\n  const { from, to } = parseValue(value);\n\n  const { required: contextRequired } = useFormFieldContext();\n\n  const callback = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [],\n  );\n\n  const [state, dispatch] = useReducer(callback, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: showError,\n    isTouched: showError,\n  });\n  const applyButtonDataDtName = 'Apply';\n  const { valueFrom, valueTo } = getFromToValues(value);\n  const applyButtonDataDtProperties = `valueFrom:${valueFrom},valueTo:${valueTo}`;\n\n  // Track the previous validation error so validate() can clean up stale\n  // messages in the local FormFieldMessageContext.\n  const previousErrorRef = useRef<TimeErrorKey | undefined>();\n\n  // Track validation errors on every value change.\n  // If the outer TimeframeSelector already shows an error, propagate that\n  // visibility to the DateTimeRangePicker context immediately.\n  useEffect(() => {\n    previousErrorRef.current = validate(value, min, max, {\n      formMessageDispatch: dispatch,\n      formerError: previousErrorRef.current,\n      precision,\n      showError,\n      checkOrder: true,\n      ref,\n      expectedFormat: formatString,\n      valueMode: 'dateTimePicker',\n      required: required || contextRequired,\n      errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n    });\n\n    if (!required && !contextRequired) {\n      if (!from && to?.value === 'now()') {\n        dispatch({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: hintId,\n            variant: 'error',\n            message: intl.formatMessage(\n              TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom,\n            ),\n            messageType: 'formcontrol',\n            validityStateKey: 'customError',\n          },\n        });\n        return;\n      }\n\n      if (!to && from?.value === 'now()') {\n        dispatch({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: hintId,\n            variant: 'error',\n            message: intl.formatMessage(\n              TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo,\n            ),\n            messageType: 'formcontrol',\n            validityStateKey: 'customError',\n          },\n        });\n        return;\n      }\n    }\n  }, [\n    value,\n    min,\n    max,\n    dispatch,\n    precision,\n    formatString,\n    required,\n    contextRequired,\n    showError,\n    ref,\n  ]);\n\n  /** Handle form submission. */\n  const handleApply = useCallback(() => {\n    if (dateTimeRangePickerError) {\n      return;\n    }\n\n    const currentValue = ref.current?.getCurrentValue();\n    const refFrom = currentValue?.from?.value;\n    const refTo = currentValue?.to?.value;\n\n    let currentTimeframe = value;\n\n    const onlyFromIsEmpty = !refFrom && !!refTo && refTo !== 'now()';\n    const onlyToIsEmpty = !refTo && !!refFrom && refFrom !== 'now()';\n\n    if (onlyFromIsEmpty || onlyToIsEmpty) {\n      // If one of the fields is empty, fill it with 'Now'\n      const from = ref.current?.inputRef.from?.value || 'now()';\n      const to = ref.current?.inputRef.to?.value || 'now()';\n      const parsedTimeframe = parseValue({ from, to }, false, precision);\n\n      if (parsedTimeframe.from && parsedTimeframe.to) {\n        // Exit if the parsed timeframe is out of bounds\n        if (\n          isOutsideRange(\n            {\n              from: parsedTimeframe.from.value,\n              to: parsedTimeframe.to.value,\n            },\n            min?.value,\n            max?.value,\n          )\n        ) {\n          return;\n        }\n\n        const sortedTimeframe = sortTimeframeValues({\n          from: parsedTimeframe.from,\n          to: parsedTimeframe.to,\n        });\n\n        if (sortedTimeframe.from && sortedTimeframe.to) {\n          currentTimeframe = {\n            from: sortedTimeframe.from,\n            to: sortedTimeframe.to,\n          };\n        }\n      }\n    }\n\n    /** parse date-picker inputs to have latest expression values on form submission */\n    const { from, to } = currentTimeframe\n      ? parseValue(currentTimeframe, false, precision)\n      : { from: null, to: null };\n\n    if (from && to) {\n      const timeframe = { from, to };\n      onChange(timeframe);\n      saveRecentTimeframe(timeframe);\n      return;\n    }\n\n    if (!required && !contextRequired) {\n      const hasFromValue = Boolean(refFrom);\n      const hasToValue = Boolean(refTo);\n\n      // For optional selector, only emit null when both sides are truly empty.\n      // Partial values must remain unapplied.\n      if (!hasFromValue && !hasToValue) {\n        onChange(null);\n      }\n    }\n  }, [\n    dateTimeRangePickerError,\n    ref,\n    value,\n    precision,\n    required,\n    contextRequired,\n    min,\n    max,\n    onChange,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (\n        e.key !== 'Enter' ||\n        // Checks if the event target is a child of the DateTimeRangePicker root element ref.\n        !ref.current?.element?.contains(e.target as HTMLElement)\n      ) {\n        return;\n      }\n\n      ref.current?.validate();\n      handleApply();\n    },\n    [handleApply, ref],\n  );\n\n  const isScreenLargerThanMobile = useBreakpoint(\n    `(min-width: ${BreakpointsJS.Max.Mobile}px)`,\n    true,\n  );\n\n  useEffect(() => {\n    const timeBoundaryMessageData = getTimeBoundaryMessageData(\n      {\n        from,\n        to,\n      },\n      min,\n      max,\n      precision,\n      false,\n    );\n\n    if (!timeBoundaryMessageData) {\n      if (!required && !contextRequired) {\n        if (!from && to?.value === 'now()') {\n          dispatch({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: hintId,\n              variant: 'error',\n              message: intl.formatMessage(\n                TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom,\n              ),\n              messageType: 'formcontrol',\n              validityStateKey: 'customError',\n            },\n          });\n          return;\n        }\n\n        if (!to && from?.value === 'now()') {\n          dispatch({\n            type: FormFieldMessagesAction.ADDMESSAGE,\n            payload: {\n              id: hintId,\n              variant: 'error',\n              message: intl.formatMessage(\n                TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo,\n              ),\n              messageType: 'formcontrol',\n              validityStateKey: 'customError',\n            },\n          });\n          return;\n        }\n      }\n\n      dispatch({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: hintId,\n          messageType: 'formcontrol',\n        },\n      });\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id: hintId,\n        variant: 'hint',\n        message: intl.formatMessage(\n          TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],\n          timeBoundaryMessageData.values,\n        ),\n        messageType: 'formcontrol',\n        validityStateKey: 'customError',\n      },\n    });\n  }, [\n    min,\n    max,\n    dispatch,\n    intl,\n    precision,\n    hintId,\n    from,\n    to,\n    required,\n    contextRequired,\n  ]);\n\n  const messageContextValue = useMemo(\n    () => ({\n      dispatch,\n      state,\n    }),\n    [dispatch, state],\n  );\n\n  return (\n    <div ref={rootRef} className={customTimeframeSelectorStyles.overlayRoot}>\n      <FormFieldMessageContext.Provider value={messageContextValue}>\n        <Flex className={customTimeframeSelectorStyles.wrapper}>\n          <div onKeyDown={handleKeyDown}>\n            <FormFieldContext.Provider value={{}}>\n              <fieldset\n                className={customTimeframeSelectorStyles.fieldset}\n                aria-labelledby={labelId}\n              >\n                <Label\n                  htmlFor={dateTimeRangePickerId}\n                  required={required || contextRequired}\n                  id={labelId}\n                >\n                  {intl.formatMessage(\n                    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n                  )}\n                </Label>\n                <InputGroup style={{ gridAutoColumns: '1fr auto' }}>\n                  <DateTimeRangePickerRoot\n                    ref={ref}\n                    id={dateTimeRangePickerId}\n                    required={required || contextRequired}\n                    style={{ gridTemplateColumns: '1fr auto' }}\n                    onBlur={(event) => {\n                      const hasPresetItemSelected =\n                        event.relatedTarget?.getAttribute('role') === 'option';\n                      const isActiveElementInside =\n                        ref.current?.element?.contains(document.activeElement);\n\n                      if (hasPresetItemSelected || isActiveElementInside) {\n                        return;\n                      }\n\n                      dispatch({\n                        type: FormFieldMessagesAction.SETISTOUCHED,\n                        payload: { isTouched: true },\n                      });\n                    }}\n                  />\n                  {isScreenLargerThanMobile && (\n                    <Button\n                      color=\"primary\"\n                      variant=\"accent\"\n                      type=\"submit\"\n                      onClick={handleApply}\n                      style={{\n                        alignSelf: 'end',\n                        borderTopLeftRadius: 0,\n                        borderBottomLeftRadius: 0,\n                      }}\n                      data-dt-name={applyButtonDataDtName}\n                      data-dt-properties={applyButtonDataDtProperties}\n                    >\n                      {intl.formatMessage(\n                        TIMEFRAME_SELECTOR_MESSAGES.applyButton,\n                      )}\n                    </Button>\n                  )}\n                </InputGroup>\n              </fieldset>\n            </FormFieldContext.Provider>\n          </div>\n          <FormFieldMessages />\n        </Flex>\n        {!isScreenLargerThanMobile && (\n          <Button\n            color=\"primary\"\n            variant=\"accent\"\n            type=\"submit\"\n            style={{ alignSelf: 'end' }}\n            onClick={handleApply}\n            data-dt-name={applyButtonDataDtName}\n            data-dt-properties={applyButtonDataDtProperties}\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.applyButton)}\n          </Button>\n        )}\n      </FormFieldMessageContext.Provider>\n    </div>\n  );\n};\n\nCustomTimeframeSelector['displayName'] = 'CustomTimeframeSelector';\n"],
+  "mappings": "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",
   "names": ["state", "from", "to"]
 }