@dynatrace/strato-components 3.5.2 → 3.7.0

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-5-2';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

@@ -23,7 +23,7 @@ import {
   convertQueryRecordToStoreSegmentVariables,
   getReadableValue
 } from "../../utils.js";
-import { sendManagementAddOnIntent } from "../sendSegmentManagementAddOnIntent.js";
+import { getSegmentHref } from "../segmentManagementHref.js";
 const dtClientContext = JSON.stringify({
   source: "SegmentSelector",
   package: "@dynatrace/strato-components"
@@ -122,7 +122,7 @@ const ValueSelect = (props) => {
       clearable: false,
       onOpenChange: (isOpen) => {
         if (query.length > 0 && isOpen) {
-          forceRefetch();
+          forceRefetch().catch(() => void 0);
         }
       },
       value: variables,
@@ -166,6 +166,7 @@ const ValueSelect = (props) => {
           );
         }
       },
+      "data-dt-name": "segment-variable-select",
       children: [
         /* @__PURE__ */ jsx(
           Select.Trigger,
@@ -185,12 +186,20 @@ const ValueSelect = (props) => {
             showSelectedOptionsFirst: true,
             width: "trigger",
             children: [
-              !data && variables?.map((variable) => /* @__PURE__ */ jsx(Select.Option, { value: variable, children: getReadableValue(variable, intl) }, variable)),
+              !data && variables?.map((variable) => /* @__PURE__ */ jsx(
+                Select.Option,
+                {
+                  value: variable,
+                  textValue: getReadableValue(variable, intl) ?? void 0,
+                  children: getReadableValue(variable, intl)
+                },
+                variable
+              )),
               unavailableVariables?.map((unlistedVariable) => /* @__PURE__ */ jsx(
                 Select.Option,
                 {
                   value: unlistedVariable,
-                  textValue: unlistedVariable ?? void 0,
+                  textValue: getReadableValue(unlistedVariable, intl) ?? void 0,
                   children: /* @__PURE__ */ jsxs(
                     Grid,
                     {
@@ -217,10 +226,18 @@ const ValueSelect = (props) => {
                 },
                 unlistedVariable
               )),
-              availableVariables?.map((variable) => /* @__PURE__ */ jsxs(Select.Option, { value: variable, children: [
-                " ",
-                /* @__PURE__ */ jsx(Text, { children: getReadableValue(variable, intl) })
-              ] }, variable)),
+              availableVariables?.map((variable) => /* @__PURE__ */ jsxs(
+                Select.Option,
+                {
+                  value: variable,
+                  textValue: getReadableValue(variable, intl) ?? void 0,
+                  children: [
+                    " ",
+                    /* @__PURE__ */ jsx(Text, { children: getReadableValue(variable, intl) })
+                  ]
+                },
+                variable
+              )),
               /* @__PURE__ */ jsx(Select.EmptyState, { children: data?.records.length ? /* @__PURE__ */ jsx(
                 FormattedMessage,
                 {
@@ -235,14 +252,22 @@ const ValueSelect = (props) => {
                   id: "72DlIwYKB9UTEzlA",
                   description: "Empty state message if no variables for the segment are available.",
                   values: {
-                    link: /* @__PURE__ */ jsx(Link, { onClick: sendManagementAddOnIntent, children: /* @__PURE__ */ jsx(
-                      FormattedMessage,
+                    link: /* @__PURE__ */ jsx(
+                      Link,
                       {
-                        defaultMessage: "settings",
-                        id: "u55UYpLvXi//xGEn",
-                        description: "Link text to segments app in empty state message if no variables for the segment are available."
+                        href: getSegmentHref(segment.segment.id),
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: /* @__PURE__ */ jsx(
+                          FormattedMessage,
+                          {
+                            defaultMessage: "settings",
+                            id: "u55UYpLvXi//xGEn",
+                            description: "Link text to segments app in empty state message if no variables for the segment are available."
+                          }
+                        )
                       }
-                    ) })
+                    )
                   }
                 }
               ) })

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 * 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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",
+  "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 { getSegmentHref } from '../segmentManagementHref.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().catch(() => undefined);\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      data-dt-name=\"segment-variable-select\"\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\n              key={variable}\n              value={variable}\n              textValue={getReadableValue(variable, intl) ?? undefined}\n            >\n              {getReadableValue(variable, intl)}\n            </Select.Option>\n          ))}\n        {unavailableVariables?.map((unlistedVariable) => (\n          <Select.Option\n            key={unlistedVariable}\n            value={unlistedVariable}\n            textValue={getReadableValue(unlistedVariable, intl) ?? 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\n            key={variable}\n            value={variable}\n            textValue={getReadableValue(variable, intl) ?? undefined}\n          >\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\n                    href={getSegmentHref(segment.segment.id)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\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,8 @@
-._1sqhmjg0-3-5-2 {
+._1sqhmjg0-3-7-0 {
   min-width: 0;
   box-sizing: border-box;
+}
+._1sqhmjg1-3-7-0 {
+  display: inline-flex;
+  align-self: start;
 }

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

@@ -17,7 +17,6 @@ import { TIMEFRAMESELECTOR_ERROR_MESSAGES } from "./constants/timeframeSelectorM
 import { TimeframeSelectorRoot } from "./TimeframeSelectorRoot.js";
 import { useCallbackRef } from "../../core/hooks/useCallbackRef.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
-import { isFullTimeframe } from "../../core/time/helpers.js";
 import { getTimeframeSelectorActions } from "../../core/time/timeframeStore/actions/timeframeSelector.js";
 import { createTimeframeStore } from "../../core/time/timeframeStore/createTimeframeStore.js";
 import { TimeframeSelectorStoreProvider } from "../../core/time/timeframeStore/timeframeStoreProvider.js";
@@ -52,11 +51,10 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
           errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,
           formerError: state.timeframeSelectorError
         });
-        const valueWithPrecision = removePrecisionFromTimeFrame(
+        const value = removePrecisionFromTimeFrame(
           memoedValue,
           state.precision
         );
-        const value = isFullTimeframe(valueWithPrecision) ? valueWithPrecision : null;
         const timeOffset = getTimeOffsetFromInitialValue(
           value,
           "range",
@@ -69,6 +67,7 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
           timeframeSelectorTimeframe: value,
           calendarValue: value,
           dateTimeRangePickerTimeframe: value,
+          referenceTimeframe: null,
           timeframeSelectorError: error,
           calendarError: error,
           dateTimeRangePickerError: error,
@@ -92,11 +91,7 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
   useEffect(() => {
     store.setState((state) => {
       const preciseValue = isControlled ? memoedValue : state.timeframeSelectorTimeframe;
-      const valueWithPrecision = removePrecisionFromTimeFrame(
-        preciseValue,
-        precision
-      );
-      const value = isFullTimeframe(valueWithPrecision) ? valueWithPrecision : null;
+      const value = removePrecisionFromTimeFrame(preciseValue, precision);
       return {
         ...state,
         precision,
@@ -159,8 +154,7 @@ const _TimeframeSelector = forwardRef(
       return () => debouncedOnChange.cancel();
     }, []);
     const [initialState] = useState(() => {
-      const _value = isControlled ? memoedValue : memoedDefaultValue;
-      const value = isFullTimeframe(_value) ? _value : null;
+      const value = isControlled ? memoedValue : memoedDefaultValue;
       const error = validate(value, min, max, {
         formMessageDispatch: formFieldMessagesDispatch,
         precision,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.tsx"],
-  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { CustomTrigger } from './components/trigger/CustomTrigger.js';\nimport { DisplayValue } from './components/trigger/DisplayValue.js';\nimport { Trigger } from './components/trigger/Trigger.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from './TimeframeSelector.types.js';\nimport { TimeframeSelectorRoot } from './TimeframeSelectorRoot.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isFullTimeframe } from '../../core/time/helpers.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getTimeframeSelectorActions } from '../../core/time/timeframeStore/actions/timeframeSelector.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  TimeframeSelectorState,\n  TimeframeSelectorStoreActions,\n} from '../../core/time/timeframeStore/timeframeSelector.types.js';\nimport { TimeframeSelectorStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type Timeframe, type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../../forms/calendar/utils/helpers.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerRef,\n} from '../../forms/date-time-range-picker/types.js';\nimport { useFormFieldMessagesContext } from '../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../../forms/forms-core/hooks/useSyncedFormControlProps.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../../forms/forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type {\n  FormControlRef,\n  TimeRangePickerRef,\n} from '../../forms/shared-types.js';\n\nconst STEPPER_DEBOUNCE_MS = 300;\n\ntype TimeframeSelectorStore = StoreApi<\n  TimeframeSelectorState & TimeframeSelectorStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: TimeframeSelectorStore,\n  memoedValue:\n    | { from: TimeValue | null; to: TimeValue | null }\n    | null\n    | undefined,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef>,\n  debouncedOnChangeRef: RefObject<ReturnType<typeof debounce>>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          debouncedOnChangeRef?.current?.cancel();\n          const error = validate(memoedValue ?? null, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n            formerError: state.timeframeSelectorError,\n          });\n\n          const valueWithPrecision = removePrecisionFromTimeFrame(\n            memoedValue,\n            state.precision,\n          );\n          const value = isFullTimeframe(valueWithPrecision)\n            ? valueWithPrecision\n            : null;\n          const timeOffset = getTimeOffsetFromInitialValue(\n            value,\n            'range',\n            state.min,\n            state.max,\n            precision,\n          );\n\n          return {\n            ...state,\n            timeframeSelectorTimeframe: value,\n            calendarValue: value,\n            dateTimeRangePickerTimeframe: value,\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n            timeOffset,\n            required,\n          };\n        });\n    },\n    // timeframeSelectorRef and debouncedOnChangeRef are stable refs \u2014 no need to include in deps\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessagesDispatch,\n      formatString,\n      isControlled,\n      memoedValue,\n      precision,\n      required,\n      store,\n    ],\n  );\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const preciseValue = isControlled\n        ? memoedValue\n        : state.timeframeSelectorTimeframe;\n      const valueWithPrecision = removePrecisionFromTimeFrame(\n        preciseValue,\n        precision,\n      );\n      const value = isFullTimeframe(valueWithPrecision)\n        ? valueWithPrecision\n        : null;\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        timeframeSelectorTimeframe: value,\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n      };\n    });\n  }, [precision, formatString, store, isControlled, memoedValue]);\n}\n\nconst _TimeframeSelector = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      precision = 'minutes',\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n    const timeframeSelectorRef = useRef<TimeRangePickerRef>(null);\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled,\n        propReadOnly,\n      });\n\n    const debouncedOnChangeRef = useRef(\n      debounce((timeframe: Timeframe | null) => {\n        onChangeProp?.(timeframe);\n      }, STEPPER_DEBOUNCE_MS),\n    );\n\n    // Cancel the debounced call on unmount.\n    useEffect(() => {\n      const debouncedOnChange = debouncedOnChangeRef.current;\n      return () => debouncedOnChange.cancel();\n    }, []);\n\n    const [initialState] = useState<TimeframeSelectorState>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = isFullTimeframe(_value) ? _value : null;\n\n      const error = 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      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        timeframeSelectorTimeframe: value,\n        referenceTimeframe: null,\n        min,\n        max,\n        precision,\n        isFullDay: false,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        timeframeSelectorRef,\n        required,\n        timeframeSelectorError: error,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        previousTimeframe: null,\n        timeOffset,\n        formatString,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        TimeframeSelectorState,\n        TimeframeSelectorStoreActions\n      >(\n        initialState,\n        getTimeframeSelectorActions(\n          isControlled,\n          timeframeSelectorRef,\n          formFieldMessagesDispatch,\n          onChangeProp,\n          debouncedOnChangeRef,\n          TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      timeframeSelectorRef,\n      debouncedOnChangeRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: TimeframeSelectorState,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.timeframeSelectorTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.timeframeSelectorError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: state.formatString,\n            valueMode: 'timeframeSelector',\n            required: state.required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          return {\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n          };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<TimeRangePickerRef>([\n      timeframeSelectorRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <TimeframeSelectorStoreProvider store={store}>\n        <TimeframeSelectorRoot\n          {...remainingProps}\n          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </TimeframeSelectorStoreProvider>\n    );\n  },\n);\n\n(\n  _TimeframeSelector as typeof _TimeframeSelector & { displayName: string }\n).displayName = 'TimeframeSelector';\n\n/**\n*`TimeframeSelector` is a filtering component that lets users choose from preset timeframes or add unique \"from\" and \"to\" time values of their own.\n\n* @public\n*/\nexport const TimeframeSelector = Object.assign(_TimeframeSelector, {\n  Trigger,\n  DisplayValue,\n  CustomTrigger,\n  Presets,\n  PresetItem,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { CustomTrigger } from './components/trigger/CustomTrigger.js';\nimport { DisplayValue } from './components/trigger/DisplayValue.js';\nimport { Trigger } from './components/trigger/Trigger.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from './TimeframeSelector.types.js';\nimport { TimeframeSelectorRoot } from './TimeframeSelectorRoot.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getTimeframeSelectorActions } from '../../core/time/timeframeStore/actions/timeframeSelector.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  TimeframeSelectorState,\n  TimeframeSelectorStoreActions,\n} from '../../core/time/timeframeStore/timeframeSelector.types.js';\nimport { TimeframeSelectorStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type Timeframe, type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../../forms/calendar/utils/helpers.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerRef,\n} from '../../forms/date-time-range-picker/types.js';\nimport { useFormFieldMessagesContext } from '../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../../forms/forms-core/hooks/useSyncedFormControlProps.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../../forms/forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type {\n  FormControlRef,\n  TimeRangePickerRef,\n} from '../../forms/shared-types.js';\n\nconst STEPPER_DEBOUNCE_MS = 300;\n\ntype TimeframeSelectorStore = StoreApi<\n  TimeframeSelectorState & TimeframeSelectorStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: TimeframeSelectorStore,\n  memoedValue:\n    | { from: TimeValue | null; to: TimeValue | null }\n    | null\n    | undefined,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef>,\n  debouncedOnChangeRef: RefObject<ReturnType<typeof debounce>>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          debouncedOnChangeRef?.current?.cancel();\n          const error = validate(memoedValue ?? null, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n            formerError: state.timeframeSelectorError,\n          });\n\n          const value = removePrecisionFromTimeFrame(\n            memoedValue,\n            state.precision,\n          );\n          const timeOffset = getTimeOffsetFromInitialValue(\n            value,\n            'range',\n            state.min,\n            state.max,\n            precision,\n          );\n\n          return {\n            ...state,\n            timeframeSelectorTimeframe: value,\n            calendarValue: value,\n            dateTimeRangePickerTimeframe: value,\n            referenceTimeframe: null,\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n            timeOffset,\n            required,\n          };\n        });\n    },\n    // timeframeSelectorRef and debouncedOnChangeRef are stable refs \u2014 no need to include in deps\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessagesDispatch,\n      formatString,\n      isControlled,\n      memoedValue,\n      precision,\n      required,\n      store,\n    ],\n  );\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const preciseValue = isControlled\n        ? memoedValue\n        : state.timeframeSelectorTimeframe;\n      const value = removePrecisionFromTimeFrame(preciseValue, precision);\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        timeframeSelectorTimeframe: value,\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n      };\n    });\n  }, [precision, formatString, store, isControlled, memoedValue]);\n}\n\nconst _TimeframeSelector = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      precision = 'minutes',\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n    const timeframeSelectorRef = useRef<TimeRangePickerRef>(null);\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled,\n        propReadOnly,\n      });\n\n    const debouncedOnChangeRef = useRef(\n      debounce((timeframe: Timeframe | null) => {\n        onChangeProp?.(timeframe);\n      }, STEPPER_DEBOUNCE_MS),\n    );\n\n    // Cancel the debounced call on unmount.\n    useEffect(() => {\n      const debouncedOnChange = debouncedOnChangeRef.current;\n      return () => debouncedOnChange.cancel();\n    }, []);\n\n    const [initialState] = useState<TimeframeSelectorState>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n\n      const error = 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      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        timeframeSelectorTimeframe: value,\n        referenceTimeframe: null,\n        min,\n        max,\n        precision,\n        isFullDay: false,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        timeframeSelectorRef,\n        required,\n        timeframeSelectorError: error,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        previousTimeframe: null,\n        timeOffset,\n        formatString,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        TimeframeSelectorState,\n        TimeframeSelectorStoreActions\n      >(\n        initialState,\n        getTimeframeSelectorActions(\n          isControlled,\n          timeframeSelectorRef,\n          formFieldMessagesDispatch,\n          onChangeProp,\n          debouncedOnChangeRef,\n          TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      timeframeSelectorRef,\n      debouncedOnChangeRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: TimeframeSelectorState,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.timeframeSelectorTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.timeframeSelectorError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: state.formatString,\n            valueMode: 'timeframeSelector',\n            required: state.required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          return {\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n          };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<TimeRangePickerRef>([\n      timeframeSelectorRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <TimeframeSelectorStoreProvider store={store}>\n        <TimeframeSelectorRoot\n          {...remainingProps}\n          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n          readOnly={readOnly}\n        />\n      </TimeframeSelectorStoreProvider>\n    );\n  },\n);\n\n(\n  _TimeframeSelector as typeof _TimeframeSelector & { displayName: string }\n).displayName = 'TimeframeSelector';\n\n/**\n*`TimeframeSelector` is a filtering component that lets users choose from preset timeframes or add unique \"from\" and \"to\" time values of their own.\n\n* @public\n*/\nexport const TimeframeSelector = Object.assign(_TimeframeSelector, {\n  Trigger,\n  DisplayValue,\n  CustomTrigger,\n  Presets,\n  PresetItem,\n});\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }

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

@@ -1,6 +1,8 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-5-2";
+var displayValueParts = "_1sqhmjg0-3-7-0";
+var root = "_1sqhmjg1-3-7-0";
 export {
-  displayValueParts
+  displayValueParts,
+  root
 };
 //# sourceMappingURL=TimeframeSelector.sty.js.map

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-5-2';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-7-0';\nexport var root = '_1sqhmjg1-3-7-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,OAAO;",
   "names": []
 }

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

@@ -1,4 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 import {
   Children,
   forwardRef,
@@ -23,6 +24,7 @@ import {
 } from "./components/trigger/Trigger.js";
 import { TIMEFRAMESELECTOR_ERROR_MESSAGES } from "./constants/timeframeSelectorMessages.js";
 import { TimeframeSelectorContext } from "./contexts/TimeframeSelectorContext.js";
+import * as styles from "./TimeframeSelector.sty.js";
 import { getTimeframeDisplayValueProps } from "./utils/getTimeframeDisplayValueProps.js";
 import { getTimeframePresets } from "./utils/presets-helpers.js";
 import {
@@ -165,7 +167,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
     timeframeQueryClient.prefetchQuery({
       queryKey: TIMEFRAME_PRESETS_QUERY_KEY,
       queryFn: getTimeframePresets
-    });
+    }).catch(() => void 0);
   }, []);
   const details = useMemo(() => {
     const { from, to } = parseValue(value);
@@ -321,7 +323,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       ref: containerRef,
-      className: consumerClassName,
+      className: clsx(consumerClassName, styles.root),
       style: consumerStyle,
       ...remainingProps,
       "data-dt-component": "TimeframeSelector",
@@ -371,7 +373,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(InputGroup, { style: { gridAutoColumns: "auto max-content max-content" }, children: [
+        /* @__PURE__ */ jsxs(InputGroup, { style: { gridAutoColumns: "1fr max-content max-content" }, children: [
           /* @__PURE__ */ jsx(
             TimeframeSelectorTooltip,
             {

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 { 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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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\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 * as styles from './TimeframeSelector.sty.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\n      .prefetchQuery({\n        queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n        queryFn: getTimeframePresets,\n      })\n      .catch(() => undefined);\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={clsx(consumerClassName, styles.root)}\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: '1fr 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/TimeframeSelectorTooltip.js

@@ -23,7 +23,7 @@ const TimeframeSelectorTooltip = (props) => {
     isInvalid
   } = useTooltipMessages(value);
   const onOpenTooltip = useCallback(
-    async (open) => {
+    (open) => {
       if (open) {
         setTooltipTimeValues({
           tooltipFormattedTimeValueStart,

package/esm/filters/timeframe-selector/components/TimeframeSelectorTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/timeframe-selector/components/TimeframeSelectorTooltip.tsx"],
-  "sourcesContent": ["import { type ReactElement, useCallback, useState, type JSX } from 'react';\n\nimport type { FormControlBaseProps } from '../../../core/types/form-control-props.js';\nimport type { Timeframe } from '../../../core/types/time.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { useTooltipMessages } from '../hooks/useTooltipMessages.js';\n\n//#region Typings\ninterface TimeframeSelectorTooltipProps extends FormControlBaseProps {\n  /** Single child of the tooltip considered to trigger the tooltip element. */\n  children: ReactElement;\n  /** The value of the timeframe selector, containing the 'from' and 'to' timeframe details. */\n  value: Timeframe | null;\n  /** Displayed Value at the trigger. */\n  displayValue: string | JSX.Element;\n}\n//#endregion\n\n/**\n * TimeframeSelectorTooltip component to show the displayValue, start, end and duration in a tooltip.\n * @internal\n */\nexport const TimeframeSelectorTooltip = (\n  props: TimeframeSelectorTooltipProps,\n) => {\n  const {\n    value,\n    disabled,\n    displayValue,\n    children,\n  }: TimeframeSelectorTooltipProps = props;\n\n  const [tooltipTimeValues, setTooltipTimeValues] = useState({\n    tooltipFormattedTimeValueStart: '',\n    tooltipFormattedTimeValueEnd: '',\n  });\n\n  const {\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    timeframeDuration,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value);\n\n  const onOpenTooltip = useCallback(\n    async (open: boolean) => {\n      if (open) {\n        setTooltipTimeValues({\n          tooltipFormattedTimeValueStart,\n          tooltipFormattedTimeValueEnd,\n        });\n      }\n    },\n    [tooltipFormattedTimeValueEnd, tooltipFormattedTimeValueStart],\n  );\n\n  return (\n    <Tooltip\n      text={\n        <Flex flexDirection=\"column\" gap={4}>\n          <Flex gap={0} flexDirection=\"column\">\n            {\n              // displayValue is a string when a preset item name is used.\n              (typeof displayValue === 'string' || !isAbsoluteTimeframe) && (\n                <Text textStyle=\"small-emphasized\">{displayValue}</Text>\n              )\n            }\n            <Text textStyle=\"small\">\n              {tooltipTimeValues.tooltipFormattedTimeValueStart}\n            </Text>\n            <Text textStyle=\"small\">\n              {tooltipTimeValues.tooltipFormattedTimeValueEnd}\n            </Text>\n          </Flex>\n          <Flex gap={0} flexDirection=\"column\">\n            <Text textStyle=\"small\">{timeframeDuration}</Text>\n          </Flex>\n        </Flex>\n      }\n      disabled={disabled || isInvalid}\n      onOpenChange={onOpenTooltip}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\n(\n  TimeframeSelectorTooltip as typeof TimeframeSelectorTooltip & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorTooltip';\n"],
-  "mappings": "AA+DU,SAIM,KAJN;AA/DV,SAA4B,aAAa,gBAA0B;AAInE,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,0BAA0B;AAiB5B,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAmC;AAEnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS;AAAA,IACzD,gCAAgC;AAAA,IAChC,8BAA8B;AAAA,EAChC,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,KAAK;AAE5B,QAAM,gBAAgB;AAAA,IACpB,OAAO,SAAkB;AACvB,UAAI,MAAM;AACR,6BAAqB;AAAA,UACnB;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,8BAA8B,8BAA8B;AAAA,EAC/D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE,qBAAC,QAAK,eAAc,UAAS,KAAK,GAChC;AAAA,6BAAC;AAAA,UAAK,KAAK;AAAA,UAAG,eAAc;AAAA;AAAA,UAGvB;AAAA,oBAAO,iBAAiB,YAAY,CAAC,wBACpC,oBAAC,QAAK,WAAU,oBAAoB,wBAAa;AAAA,YAGrD,oBAAC,QAAK,WAAU,SACb,4BAAkB,gCACrB;AAAA,YACA,oBAAC,QAAK,WAAU,SACb,4BAAkB,8BACrB;AAAA;AAAA,SACF;AAAA,QACA,oBAAC,QAAK,KAAK,GAAG,eAAc,UAC1B,8BAAC,QAAK,WAAU,SAAS,6BAAkB,GAC7C;AAAA,SACF;AAAA,MAEF,UAAU,YAAY;AAAA,MACtB,cAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ;AAGE,yBAGA,cAAc;",
+  "sourcesContent": ["import { type ReactElement, useCallback, useState, type JSX } from 'react';\n\nimport type { TimeframeSelectorState } from '../../../core/time/timeframeStore/timeframeSelector.types.js';\nimport type { FormControlBaseProps } from '../../../core/types/form-control-props.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { useTooltipMessages } from '../hooks/useTooltipMessages.js';\n\n//#region Typings\ninterface TimeframeSelectorTooltipProps extends FormControlBaseProps {\n  /** Single child of the tooltip considered to trigger the tooltip element. */\n  children: ReactElement;\n  /** The value of the timeframe selector, containing the 'from' and 'to' timeframe details. */\n  value: TimeframeSelectorState['timeframeSelectorTimeframe'];\n  /** Displayed Value at the trigger. */\n  displayValue: string | JSX.Element;\n}\n//#endregion\n\n/**\n * TimeframeSelectorTooltip component to show the displayValue, start, end and duration in a tooltip.\n * @internal\n */\nexport const TimeframeSelectorTooltip = (\n  props: TimeframeSelectorTooltipProps,\n) => {\n  const {\n    value,\n    disabled,\n    displayValue,\n    children,\n  }: TimeframeSelectorTooltipProps = props;\n\n  const [tooltipTimeValues, setTooltipTimeValues] = useState({\n    tooltipFormattedTimeValueStart: '',\n    tooltipFormattedTimeValueEnd: '',\n  });\n\n  const {\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    timeframeDuration,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value);\n\n  const onOpenTooltip = useCallback(\n    (open: boolean) => {\n      if (open) {\n        setTooltipTimeValues({\n          tooltipFormattedTimeValueStart,\n          tooltipFormattedTimeValueEnd,\n        });\n      }\n    },\n    [tooltipFormattedTimeValueEnd, tooltipFormattedTimeValueStart],\n  );\n\n  return (\n    <Tooltip\n      text={\n        <Flex flexDirection=\"column\" gap={4}>\n          <Flex gap={0} flexDirection=\"column\">\n            {\n              // displayValue is a string when a preset item name is used.\n              (typeof displayValue === 'string' || !isAbsoluteTimeframe) && (\n                <Text textStyle=\"small-emphasized\">{displayValue}</Text>\n              )\n            }\n            <Text textStyle=\"small\">\n              {tooltipTimeValues.tooltipFormattedTimeValueStart}\n            </Text>\n            <Text textStyle=\"small\">\n              {tooltipTimeValues.tooltipFormattedTimeValueEnd}\n            </Text>\n          </Flex>\n          <Flex gap={0} flexDirection=\"column\">\n            <Text textStyle=\"small\">{timeframeDuration}</Text>\n          </Flex>\n        </Flex>\n      }\n      disabled={disabled || isInvalid}\n      onOpenChange={onOpenTooltip}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\n(\n  TimeframeSelectorTooltip as typeof TimeframeSelectorTooltip & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorTooltip';\n"],
+  "mappings": "AA+DU,SAIM,KAJN;AA/DV,SAA4B,aAAa,gBAA0B;AAInE,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,0BAA0B;AAiB5B,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAmC;AAEnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS;AAAA,IACzD,gCAAgC;AAAA,IAChC,8BAA8B;AAAA,EAChC,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,KAAK;AAE5B,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAkB;AACjB,UAAI,MAAM;AACR,6BAAqB;AAAA,UACnB;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,8BAA8B,8BAA8B;AAAA,EAC/D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE,qBAAC,QAAK,eAAc,UAAS,KAAK,GAChC;AAAA,6BAAC;AAAA,UAAK,KAAK;AAAA,UAAG,eAAc;AAAA;AAAA,UAGvB;AAAA,oBAAO,iBAAiB,YAAY,CAAC,wBACpC,oBAAC,QAAK,WAAU,oBAAoB,wBAAa;AAAA,YAGrD,oBAAC,QAAK,WAAU,SACb,4BAAkB,gCACrB;AAAA,YACA,oBAAC,QAAK,WAAU,SACb,4BAAkB,8BACrB;AAAA;AAAA,SACF;AAAA,QACA,oBAAC,QAAK,KAAK,GAAG,eAAc,UAC1B,8BAAC,QAAK,WAAU,SAAS,6BAAkB,GAC7C;AAAA,SACF;AAAA,MAEF,UAAU,YAAY;AAAA,MACtB,cAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ;AAGE,yBAGA,cAAc;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._at2xro0-3-5-2 {
+._at2xro0-3-7-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-5-2 {
+._at2xro1-3-7-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-5-2 {
+._at2xro2-3-7-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-5-2 {
+  ._at2xro1-3-7-0 {
     flex-direction: row;
   }
 }