npm - @dynatrace/strato-components - Versions diffs - 3.7.1 → 3.8.0 - Mend

@dynatrace/strato-components 3.7.1 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2527) hide show

package/esm/filters/segment-selector/parts/selectionBar/SelectionBar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SelectionBar.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useContext, useRef, type RefObject } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\n\nimport {\n  clearButtonCSS,\n  noBorderRadiusRight,\n  segmentsSelectGridCSS,\n} from './SegmentSelect.sty.js';\nimport { SegmentSelect } from './SegmentSelect.js';\nimport { ValueSelect } from './ValueSelect.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { getErrorKey } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport type { UISegment } from '../../contexts/SegmentsUI/UISegments.types.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport * as listStyles from '../../SegmentSelector.sty.js';\n\ntype SelectionBarProps = {\n  availableSegments: CachedSegment['segment'][];\n  clearable?: boolean;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  returnFocusTo: RefObject<null | HTMLButtonElement>;\n  segment?: CachedSegment;\n  uiSegment: UISegment;\n};\n\nfunction getVariables(segment: FilterSegment | undefined) {\n  if (segment?.variables && segment.variables.length > 0) {\n    return segment.variables[0].values;\n  }\n\n  return undefined;\n}\n\nfunction getLayout(hasVariables: boolean, hasClearButton: boolean) {\n  if (!hasVariables && !hasClearButton) {\n    return 'no-variables-readonly';\n  }\n\n  if (!hasVariables && hasClearButton) {\n    return 'no-variables';\n  }\n\n  if (hasVariables && !hasClearButton) {\n    return 'full-readonly';\n  }\n  return 'full';\n}\n\nfunction getErrorMessageFromKey(\n  errorKey:\n    | 'unavailable'\n    | 'needs-update'\n    | 'needs-variables'\n    | null\n    | undefined,\n) {\n  switch (errorKey) {\n    case 'unavailable':\n      return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;\n    case 'needs-update':\n      return SEGMENTSELECTOR_MESSAGES.removedVariablesError;\n    case 'needs-variables':\n      return SEGMENTSELECTOR_MESSAGES.valueMissingError;\n    default:\n      return null;\n  }\n}\n\n/**\n * Error messages for the SelectionBar component.\n * @internal\n */\nexport const ErrorMessages = ({ uiSegment }: { uiSegment: UISegment }) => {\n  const {\n    data: errorKey,\n    isLoading,\n    error,\n  } = useQuery(\n    {\n      queryKey: ['errorKey', uiSegment],\n      queryFn: () => getErrorKey(uiSegment),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { arrayIdentifierErrorIds } = useContext(UISegmentsContext);\n  const hasArrayIdentifierError = arrayIdentifierErrorIds?.includes(\n    uiSegment.id,\n  );\n\n  if (segmentsClient.hasAccessRights === false || isLoading || error) {\n    return null;\n  }\n\n  const errorMessage = getErrorMessageFromKey(errorKey);\n\n  return (\n    <FormFieldMessages>\n      {(messages) => {\n        if (hasArrayIdentifierError) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key=\"array-identifier\"\n            >\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n              />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        if (errorKey) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key={errorKey}\n            >\n              <FormattedMessage {...errorMessage} />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        return messages.map((props) => {\n          // If it is valueMissing error from the variable select we show a custom error message.\n          if (\n            props.controlId !== uiSegment.id &&\n            props.validityStateKey === 'valueMissing'\n          ) {\n            return (\n              <FormFieldMessages.Item\n                key={`${props.controlId}-valueMissing`}\n                {...props}\n              >\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.valueMissingError}\n                />\n              </FormFieldMessages.Item>\n            );\n          }\n\n          return (\n            <FormFieldMessages.Item\n              key={`${props.controlId}-${props.validityStateKey}`}\n              {...props}\n            />\n          );\n        });\n      }}\n    </FormFieldMessages>\n  );\n};\n\n/**\n * SelectionBar component\n * @internal\n */\nexport const SelectionBar = (props: SelectionBarProps) => {\n  const {\n    availableSegments,\n    clearable,\n    readOnly,\n    autoFocus,\n    uiSegment,\n    returnFocusTo,\n    segment: propSegment,\n  } = props;\n  const intl = useIntl();\n  const gridRef = useRef<HTMLDivElement | null>(null);\n  const isPlaceholder = uiSegment.isPlaceholder ?? false;\n  const id = uiSegment.id;\n  const variables = getVariables(uiSegment);\n\n  const { removeUISegment } = useSegmentsUIContext();\n  const { state } = useFormFieldMessagesContext();\n  const { getSegment } = useSegmentsCache();\n\n  // If the segment was already fetched, we use the segment prop and don't fetch.\n  // However, private segments are not listed in the available segments\n  // and need to be fetched individually.\n  const { data: fetchedSegment } = useQuery<CachedSegment>(\n    {\n      queryKey: ['getSegment', id],\n      queryFn: () => getSegment(id),\n      enabled:\n        segmentsClient.hasAccessRights !== false &&\n        !isPlaceholder &&\n        propSegment === undefined,\n      retryOnMount: false,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const segment = propSegment ?? fetchedSegment;\n\n  const showDeleteButton =\n    clearable && !readOnly && segmentsClient.hasAccessRights !== false;\n\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <li className={listStyles.segmentSelectorListItem}>\n      <Tooltip\n        text={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.unlistedSegmentTooltip,\n        )}\n        style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        disabled={!segment?.temporarilyApplied}\n      >\n        <Grid\n          ref={gridRef}\n          className={segmentsSelectGridCSS({\n            layout: getLayout(\n              !!segment?.segment?.variables,\n              !!showDeleteButton,\n            ),\n          })}\n        >\n          <SegmentSelect\n            readOnly={readOnly}\n            availableSegments={availableSegments}\n            segment={segment}\n            id={id}\n            overlayWidth={`${gridRef.current?.clientWidth}px`}\n            triggerClassName={clsx({\n              [noBorderRadiusRight]:\n                showDeleteButton || segment?.segment?.variables,\n            })}\n            isPlaceholder={isPlaceholder}\n            autoFocus={autoFocus}\n          />\n          {segment?.segment?.variables && (\n            <ValueSelect\n              readOnly={readOnly}\n              segment={segment}\n              variables={variables}\n              triggerClassName={clsx({\n                [noBorderRadiusRight]: clearable && !readOnly,\n              })}\n            />\n          )}\n          {showDeleteButton && (\n            <Button\n              onClick={() => {\n                removeUISegment(id);\n                returnFocusTo.current?.focus();\n              }}\n              color={state.showError ? 'critical' : 'neutral'}\n              variant=\"emphasized\"\n              className={clearButtonCSS}\n              aria-label={intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.removeSegmentButton,\n              )}\n              data-dt-name=\"Remove\"\n            >\n              <Button.Prefix>\n                <XmarkIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n        </Grid>\n      </Tooltip>\n\n      <ErrorMessages uiSegment={uiSegment} />\n    </li>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { useContext, useRef, type RefObject } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\n\nimport {\n  clearButtonCSS,\n  noBorderRadiusRight,\n  segmentsSelectGridCSS,\n} from './SegmentSelect.sty.js';\nimport { SegmentSelect } from './SegmentSelect.js';\nimport { ValueSelect } from './ValueSelect.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { useFormFieldMessagesContext } from '../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  StratoValidityStateKeys,\n  type StratoValidityStateKey,\n} from '../../../../forms/validation/types.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n  type CachedSegment,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport {\n  UISegmentsContext,\n  useSegmentsUIContext,\n} from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { getErrorKey } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport type { UISegment } from '../../contexts/SegmentsUI/UISegments.types.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\nimport * as listStyles from '../../SegmentSelector.sty.js';\n\ntype SelectionBarProps = {\n  availableSegments: CachedSegment['segment'][];\n  clearable?: boolean;\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  returnFocusTo: RefObject<null | HTMLButtonElement>;\n  segment?: CachedSegment;\n  uiSegment: UISegment;\n};\n\nfunction getVariables(segment: FilterSegment | undefined) {\n  if (segment?.variables && segment.variables.length > 0) {\n    return segment.variables[0].values;\n  }\n\n  return undefined;\n}\n\nfunction getLayout(hasVariables: boolean, hasClearButton: boolean) {\n  if (!hasVariables && !hasClearButton) {\n    return 'no-variables-readonly';\n  }\n\n  if (!hasVariables && hasClearButton) {\n    return 'no-variables';\n  }\n\n  if (hasVariables && !hasClearButton) {\n    return 'full-readonly';\n  }\n  return 'full';\n}\n\nfunction getErrorMessageFromKey(\n  errorKey: StratoValidityStateKey | null | undefined,\n) {\n  if (errorKey?.equals(StratoValidityStateKeys.unavailable)) {\n    return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;\n  }\n  if (errorKey?.equals(StratoValidityStateKeys.needsUpdate)) {\n    return SEGMENTSELECTOR_MESSAGES.removedVariablesError;\n  }\n  if (errorKey?.equals(StratoValidityStateKeys.missingVariables)) {\n    return SEGMENTSELECTOR_MESSAGES.valueMissingError;\n  }\n  return null;\n}\n\n/**\n * Error messages for the SelectionBar component.\n * @internal\n */\nexport const ErrorMessages = ({ uiSegment }: { uiSegment: UISegment }) => {\n  const {\n    data: errorKey,\n    isLoading,\n    error,\n  } = useQuery(\n    {\n      queryKey: ['errorKey', uiSegment],\n      queryFn: () => getErrorKey(uiSegment),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { arrayIdentifierErrorIds } = useContext(UISegmentsContext);\n  const hasArrayIdentifierError = arrayIdentifierErrorIds?.includes(\n    uiSegment.id,\n  );\n\n  if (segmentsClient.hasAccessRights === false || isLoading || error) {\n    return null;\n  }\n\n  const errorMessage = getErrorMessageFromKey(errorKey);\n\n  return (\n    <FormFieldMessages>\n      {(messages) => {\n        if (hasArrayIdentifierError) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key=\"array-identifier\"\n            >\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n              />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        if (errorKey) {\n          return (\n            <FormFieldMessages.Item\n              validityStateKey=\"customError\"\n              variant=\"error\"\n              key={errorKey.value}\n            >\n              <FormattedMessage {...errorMessage} />\n            </FormFieldMessages.Item>\n          );\n        }\n\n        return messages.map((props) => {\n          // If it is valueMissing error from the variable select we show a custom error message.\n          if (\n            props.controlId !== uiSegment.id &&\n            props.validityStateKey === 'valueMissing'\n          ) {\n            return (\n              <FormFieldMessages.Item\n                key={`${props.controlId}-valueMissing`}\n                {...props}\n              >\n                <FormattedMessage\n                  {...SEGMENTSELECTOR_MESSAGES.valueMissingError}\n                />\n              </FormFieldMessages.Item>\n            );\n          }\n\n          return (\n            <FormFieldMessages.Item\n              key={`${props.controlId}-${props.validityStateKey}`}\n              {...props}\n            />\n          );\n        });\n      }}\n    </FormFieldMessages>\n  );\n};\n\n/**\n * SelectionBar component\n * @internal\n */\nexport const SelectionBar = (props: SelectionBarProps) => {\n  const {\n    availableSegments,\n    clearable,\n    readOnly,\n    autoFocus,\n    uiSegment,\n    returnFocusTo,\n    segment: propSegment,\n  } = props;\n  const intl = useIntl();\n  const gridRef = useRef<HTMLDivElement | null>(null);\n  const isPlaceholder = uiSegment.isPlaceholder ?? false;\n  const id = uiSegment.id;\n  const variables = getVariables(uiSegment);\n\n  const { removeUISegment } = useSegmentsUIContext();\n  const { state } = useFormFieldMessagesContext();\n  const { getSegment } = useSegmentsCache();\n\n  // If the segment was already fetched, we use the segment prop and don't fetch.\n  // However, private segments are not listed in the available segments\n  // and need to be fetched individually.\n  const { data: fetchedSegment } = useQuery<CachedSegment>(\n    {\n      queryKey: ['getSegment', id],\n      queryFn: () => getSegment(id),\n      enabled:\n        segmentsClient.hasAccessRights !== false &&\n        !isPlaceholder &&\n        propSegment === undefined,\n      retryOnMount: false,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const segment = propSegment ?? fetchedSegment;\n\n  const showDeleteButton =\n    clearable && !readOnly && segmentsClient.hasAccessRights !== false;\n\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <li className={listStyles.segmentSelectorListItem}>\n      <Tooltip\n        text={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.unlistedSegmentTooltip,\n        )}\n        style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        disabled={!segment?.temporarilyApplied}\n      >\n        <Grid\n          ref={gridRef}\n          className={segmentsSelectGridCSS({\n            layout: getLayout(\n              !!segment?.segment?.variables,\n              !!showDeleteButton,\n            ),\n          })}\n        >\n          <SegmentSelect\n            readOnly={readOnly}\n            availableSegments={availableSegments}\n            segment={segment}\n            id={id}\n            overlayWidth={`${gridRef.current?.clientWidth}px`}\n            triggerClassName={clsx({\n              [noBorderRadiusRight]:\n                showDeleteButton || segment?.segment?.variables,\n            })}\n            isPlaceholder={isPlaceholder}\n            autoFocus={autoFocus}\n          />\n          {segment?.segment?.variables && (\n            <ValueSelect\n              readOnly={readOnly}\n              segment={segment}\n              variables={variables}\n              triggerClassName={clsx({\n                [noBorderRadiusRight]: clearable && !readOnly,\n              })}\n            />\n          )}\n          {showDeleteButton && (\n            <Button\n              onClick={() => {\n                removeUISegment(id);\n                returnFocusTo.current?.focus();\n              }}\n              color={state.showError ? 'critical' : 'neutral'}\n              variant=\"emphasized\"\n              className={clearButtonCSS}\n              aria-label={intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.removeSegmentButton,\n              )}\n              data-dt-name=\"Remove\"\n            >\n              <Button.Prefix>\n                <XmarkIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n        </Grid>\n      </Tooltip>\n\n      <ErrorMessages uiSegment={uiSegment} />\n    </li>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,8 +1,8 @@
-._1sqhmjg0-3-7-1 {
+._1sqhmjg0-3-8-0 {
   min-width: 0;
   box-sizing: border-box;
 }
-._1sqhmjg1-3-7-1 {
+._1sqhmjg1-3-8-0 {
   display: inline-flex;
   align-self: start;
 }

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-7-1";
-var root = "_1sqhmjg1-3-7-1";
+var displayValueParts = "_1sqhmjg0-3-8-0";
+var root = "_1sqhmjg1-3-8-0";
 export {
   displayValueParts,
   root

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.css.ts"],
-  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-7-1';\nexport var root = '_1sqhmjg1-3-7-1';"],
+  "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": []
 }