@dynatrace/strato-components 3.7.0 → 3.8.0

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

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import { isArray } from "lodash-es";
 import { useContext, useEffect, useMemo, useRef } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import { useDql } from "@dynatrace-sdk/react-hooks";
+import { getSegmentVariables } from "@dynatrace-sdk/segments-presets";
 import * as styles from "./SegmentSelect.sty.js";
 import { StratoLoggerContext } from "../../../../core/sdk/StratoLoggerContext.js";
 import { useFormFieldMessagesContext } from "../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
@@ -14,6 +16,9 @@ import { Grid } from "../../../../layouts/grid/Grid.js";
 import { Link } from "../../../../typography/link/Link.js";
 import { Text } from "../../../../typography/text/Text.js";
 import { TextEllipsis } from "../../../../typography/text-ellipsis/TextEllipsis.js";
+import {
+  segmentsClient
+} from "../../contexts/SegmentsCache/SegmentsCache.js";
 import {
   UISegmentsContext,
   useSegmentsUIContext
@@ -24,10 +29,6 @@ import {
   getReadableValue
 } from "../../utils.js";
 import { getSegmentHref } from "../segmentManagementHref.js";
-const dtClientContext = JSON.stringify({
-  source: "SegmentSelector",
-  package: "@dynatrace/strato-components"
-});
 const ValueSelect = (props) => {
   const { triggerClassName, readOnly, segment, variables = [] } = props;
   const variableSelectRef = useRef(null);
@@ -36,18 +37,44 @@ const ValueSelect = (props) => {
   const { dispatch: messagesDispatch } = useFormFieldMessagesContext();
   const intl = useIntl();
   const stratoLogger = useContext(StratoLoggerContext);
+  const segmentId = segment?.segment?.id;
+  const dtClientContext = useMemo(
+    () => JSON.stringify({
+      source: "SegmentSelector",
+      package: "@dynatrace/strato-components",
+      segmentId
+    }),
+    [segmentId]
+  );
   const query = segment?.segment?.variables !== void 0 && segment?.segment?.variables?.type === "query" ? segment.segment.variables.value : "";
+  const {
+    data: faasResult,
+    isLoading: isFaasLoading,
+    refetch: refetchFaas
+  } = useQuery(
+    {
+      queryKey: ["getSegmentVariables", segment.segment.id],
+      queryFn: () => getSegmentVariables(segment.segment.id)
+    },
+    segmentsClient.queryClient
+  );
+  const faasVariables = faasResult !== null && faasResult !== void 0 && "variables" in faasResult ? faasResult.variables : void 0;
   const {
     data,
     isLoading: isDqlLoading,
     forceRefetch
-  } = useDql({
-    query,
-    maxResultRecords: 1e4,
-    maxResultBytes: 5242880,
-    // 5 MB
-    dtClientContext
-  });
+  } = useDql(
+    {
+      query,
+      maxResultRecords: 1e4,
+      maxResultBytes: 5242880,
+      // 5 MB
+      dtClientContext
+    },
+    { enabled: faasResult?.accessible === false }
+  );
+  const effectiveRecords = faasVariables ?? data?.records;
+  const isLoading = isFaasLoading || isDqlLoading;
   useEffect(() => {
     if (!isDqlLoading && data?.records?.length === 0) {
       stratoLogger?.info(
@@ -56,22 +83,33 @@ const ValueSelect = (props) => {
         {
           query: query.split("|")[0],
           // log query until first pipe to avoid reporting sensitive data.
-          id: segment?.segment?.id
+          id: segmentId
         }
       );
     }
   }, [query, isDqlLoading]);
+  useEffect(() => {
+    if (faasResult?.accessible === true && "error" in faasResult) {
+      stratoLogger?.warn(
+        "getSegmentVariables FaaS returned an error response.",
+        faasResult.error,
+        { id: segment?.segment?.id, code: faasResult.error.code }
+      );
+    }
+  }, [faasResult]);
   const unavailableVariables = useMemo(() => {
-    if (data) {
-      const firstKey = Object.keys(data.records?.[0] ?? {})[0];
-      const dataRecordIds = data.records.map((record) => record?.[firstKey]);
-      return variables?.filter((variable) => !dataRecordIds.includes(variable));
+    if (effectiveRecords) {
+      const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];
+      const dataRecordIds = new Set(
+        effectiveRecords.map((record) => record?.[firstKey])
+      );
+      return variables?.filter((variable) => !dataRecordIds.has(variable));
     }
-  }, [data, variables]);
+  }, [effectiveRecords, variables]);
   const availableVariables = useMemo(() => {
-    if (data?.records) {
+    if (effectiveRecords) {
       let hasArrayIdentifier = false;
-      const recordsArray = data?.records.map((singleRow) => {
+      const recordsArray = effectiveRecords.map((singleRow) => {
         const firstKey = singleRow ? Object.keys(singleRow)[0] : null;
         if (!singleRow || !firstKey) {
           return null;
@@ -103,7 +141,7 @@ const ValueSelect = (props) => {
       });
       return Array.from(new Set(recordsArray));
     }
-  }, [data]);
+  }, [effectiveRecords]);
   const shouldOpen = focusedSegmentId === segment.segment.id && variables.length === 0 && isTouched;
   useEffect(() => {
     shouldOpen && variableSelectRef.current?.open();
@@ -121,8 +159,11 @@ const ValueSelect = (props) => {
       readOnly: readOnly || segment?.temporarilyApplied,
       clearable: false,
       onOpenChange: (isOpen) => {
-        if (query.length > 0 && isOpen) {
-          forceRefetch().catch(() => void 0);
+        if (isOpen && query.length > 0) {
+          refetchFaas().catch(() => void 0);
+          if (faasResult?.accessible === false) {
+            forceRefetch().catch(() => void 0);
+          }
         }
       },
       value: variables,
@@ -140,9 +181,9 @@ const ValueSelect = (props) => {
           );
           return;
         }
-        const firstKey = Object.keys(data?.records[0] ?? {})[0];
+        const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];
         const dataEnrichedVariables = newVariables.map((variable) => {
-          return data?.records.find((singleRow) => {
+          return effectiveRecords?.find((singleRow) => {
             if (isArray(singleRow?.[firstKey])) {
               const values = singleRow?.[firstKey].includes(variable);
               return values;
@@ -182,11 +223,11 @@ const ValueSelect = (props) => {
         /* @__PURE__ */ jsxs(
           Select.Content,
           {
-            loading: isDqlLoading,
+            loading: isLoading,
             showSelectedOptionsFirst: true,
             width: "trigger",
             children: [
-              !data && variables?.map((variable) => /* @__PURE__ */ jsx(
+              !effectiveRecords && variables?.map((variable) => /* @__PURE__ */ jsx(
                 Select.Option,
                 {
                   value: variable,
@@ -238,7 +279,7 @@ const ValueSelect = (props) => {
                 },
                 variable
               )),
-              /* @__PURE__ */ jsx(Select.EmptyState, { children: data?.records.length ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Select.EmptyState, { children: effectiveRecords?.length ? /* @__PURE__ */ jsx(
                 FormattedMessage,
                 {
                   id: "nIw/xeiGNJsj+a+5",

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 { 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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",
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport 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 type { ResultRecord } from '@dynatrace-sdk/client-query';\nimport { useDql } from '@dynatrace-sdk/react-hooks';\nimport { getSegmentVariables } from '@dynatrace-sdk/segments-presets';\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 {\n  segmentsClient,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\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\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 segmentId = segment?.segment?.id;\n\n  const dtClientContext = useMemo(\n    () =>\n      JSON.stringify({\n        source: 'SegmentSelector',\n        package: '@dynatrace/strato-components',\n        segmentId,\n      }),\n    [segmentId],\n  );\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: faasResult,\n    isLoading: isFaasLoading,\n    refetch: refetchFaas,\n  } = useQuery(\n    {\n      queryKey: ['getSegmentVariables', segment.segment.id],\n      queryFn: () => getSegmentVariables(segment.segment.id),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const faasVariables =\n    faasResult !== null && faasResult !== undefined && 'variables' in faasResult\n      ? faasResult.variables\n      : undefined;\n\n  const {\n    data,\n    isLoading: isDqlLoading,\n    forceRefetch,\n  } = useDql(\n    {\n      query,\n      maxResultRecords: 10_000,\n      maxResultBytes: 5_242_880, // 5 MB\n      dtClientContext,\n    },\n    { enabled: faasResult?.accessible === false },\n  );\n\n  const effectiveRecords: ResultRecord[] | undefined =\n    faasVariables ?? data?.records;\n  const isLoading = isFaasLoading || isDqlLoading;\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: segmentId,\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  // `accessible: true` with an `error` envelope does not trigger the useDql fallback,\n  // so the dropdown would silently show the empty state. Log so the failure is observable.\n  useEffect(() => {\n    if (faasResult?.accessible === true && 'error' in faasResult) {\n      stratoLogger?.warn(\n        'getSegmentVariables FaaS returned an error response.',\n        faasResult.error,\n        { id: segment?.segment?.id, code: faasResult.error.code },\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [faasResult]);\n\n  /** Checks which variables are already selected but no longer available. */\n  const unavailableVariables = useMemo(() => {\n    if (effectiveRecords) {\n      const firstKey = Object.keys(effectiveRecords?.[0] ?? {})[0];\n      const dataRecordIds = new Set(\n        effectiveRecords.map((record) => record?.[firstKey]),\n      );\n\n      return variables?.filter((variable) => !dataRecordIds.has(variable));\n    }\n  }, [effectiveRecords, variables]);\n\n  /** Filters for all unique variable ids and strips duplicates. */\n  const availableVariables = useMemo(() => {\n    if (effectiveRecords) {\n      let hasArrayIdentifier = false;\n      const recordsArray = effectiveRecords\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    // messagesDispatch and setArrayIdentifierError are stable context refs; segment.segment.id is\n    // captured by effectiveRecords which already re-evaluates when the segment changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [effectiveRecords]);\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 (isOpen && query.length > 0) {\n          refetchFaas().catch(() => undefined);\n          if (faasResult?.accessible === false) {\n            forceRefetch().catch(() => undefined);\n          }\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(effectiveRecords?.[0] ?? {})[0];\n        const dataEnrichedVariables = newVariables\n          .map((variable) => {\n            return (\n              effectiveRecords?.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={isLoading}\n        showSelectedOptionsFirst\n        width=\"trigger\"\n      >\n        {!effectiveRecords &&\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          {effectiveRecords?.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,8 +1,8 @@
-._1sqhmjg0-3-7-0 {
+._1sqhmjg0-3-8-0 {
   min-width: 0;
   box-sizing: border-box;
 }
-._1sqhmjg1-3-7-0 {
+._1sqhmjg1-3-8-0 {
   display: inline-flex;
   align-self: start;
 }

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

@@ -15,6 +15,7 @@ import { DisplayValue } from "./components/trigger/DisplayValue.js";
 import { Trigger } from "./components/trigger/Trigger.js";
 import { TIMEFRAMESELECTOR_ERROR_MESSAGES } from "./constants/timeframeSelectorMessages.js";
 import { TimeframeSelectorRoot } from "./TimeframeSelectorRoot.js";
+import { saveRecentTimeframe } from "./utils/presets-helpers.js";
 import { useCallbackRef } from "../../core/hooks/useCallbackRef.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { getTimeframeSelectorActions } from "../../core/time/timeframeStore/actions/timeframeSelector.js";
@@ -147,6 +148,9 @@ const _TimeframeSelector = forwardRef(
     const debouncedOnChangeRef = useRef(
       debounce((timeframe) => {
         onChangeProp?.(timeframe);
+        if (timeframe) {
+          saveRecentTimeframe(timeframe);
+        }
       }, STEPPER_DEBOUNCE_MS)
     );
     useEffect(() => {

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 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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",
+  "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 { saveRecentTimeframe } from './utils/presets-helpers.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        if (timeframe) {\n          saveRecentTimeframe(timeframe);\n        }\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,6 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-7-0";
-var root = "_1sqhmjg1-3-7-0";
+var displayValueParts = "_1sqhmjg0-3-8-0";
+var root = "_1sqhmjg1-3-8-0";
 export {
   displayValueParts,
   root

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