@dynatrace/strato-components 3.8.0 → 3.10.0

package/esm/filters/segment-selector/parts/Overlay.css

@@ -1,10 +1,10 @@
-._bqi6d90-3-8-0 {
+._bqi6d90-3-10-0 {
   height: 15px;
   align-self: center;
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: var(--dt-spacings-size-8, 8px);
 }
-._bqi6d91-3-8-0._bqi6d91-3-8-0 {
+._bqi6d91-3-10-0._bqi6d91-3-10-0 {
   display: flex;
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -14,24 +14,24 @@
   text-transform: var(--dt-typography-text-base-emphasized-text-transform, none);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._bqi6d92-3-8-0 {
+._bqi6d92-3-10-0 {
   max-width: 480px;
   min-width: 320px;
   box-sizing: border-box;
   overflow: hidden;
 }
-._bqi6d93-3-8-0 {
+._bqi6d93-3-10-0 {
   max-height: 396px;
   overflow: auto;
   box-sizing: border-box;
 }
-._bqi6d93-3-8-0 ._bqi6d94-3-8-0 {
+._bqi6d93-3-10-0 ._bqi6d94-3-10-0 {
   overflow: hidden;
 }
-._bqi6d95-3-8-0 {
+._bqi6d95-3-10-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._bqi6d96-3-8-0._bqi6d96-3-8-0 {
+._bqi6d96-3-10-0._bqi6d96-3-10-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
@@ -40,6 +40,6 @@
   text-decoration: var(--dt-typography-text-small-emphasized-text-decoration, none);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._bqi6d97-3-8-0 > fieldset > div {
+._bqi6d97-3-10-0 > fieldset > div {
   gap: var(--dt-spacings-size-8, 8px);
 }

package/esm/filters/segment-selector/parts/Overlay.js

@@ -234,7 +234,7 @@ const SegmentsContent = ({ cachedSegments, id }) => {
                         }),
                         variant: "emphasized",
                         ref: addButtonRef,
-                        "data-dt-name": "Add",
+                        "data-dt-children-name": "Add",
                         children: [
                           /* @__PURE__ */ jsx(
                             Button.Prefix,
@@ -259,7 +259,7 @@ const SegmentsContent = ({ cachedSegments, id }) => {
                         },
                         type: "reset",
                         form: formId,
-                        "data-dt-name": "ClearAll",
+                        "data-dt-children-name": "ClearAll",
                         children: intl.formatMessage(SEGMENTSELECTOR_MESSAGES.clearAll)
                       }
                     ),
@@ -270,7 +270,7 @@ const SegmentsContent = ({ cachedSegments, id }) => {
                         form: formId,
                         color: "primary",
                         variant: "accent",
-                        "data-dt-name": "Apply",
+                        "data-dt-children-name": "Apply",
                         onClick: () => clearPlaceholder(),
                         children: intl.formatMessage(SEGMENTSELECTOR_MESSAGES.applyButton)
                       }

package/esm/filters/segment-selector/parts/Overlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/segment-selector/parts/Overlay.tsx"],
-  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport {\n  Fragment,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  type FormEvent as ReactFormEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { PlusIcon } from '@dynatrace/strato-icons';\nimport type { FilterSegment as QueryFilterSegment } from '@dynatrace-sdk/client-query';\nimport { getSegmentsPresets } from '@dynatrace-sdk/segments-presets';\n\nimport { EmptySegments } from './EmptySegments.js';\nimport { LoadingSegments } from './LoadingSegments.js';\nimport { NoAccessHint } from './noAccessRights/NoAccessHint.js';\nimport * as overlayStyles from './Overlay.sty.js';\nimport { SegmentFooter } from './SegmentFooter.js';\nimport { SegmentsPresetList } from './segmentsPresets/SegmentsPresetsList.js';\nimport { SelectionBar } from './selectionBar/SelectionBar.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { FieldSet } from '../../../forms/forms-core/components/field-set/FieldSet.js';\nimport { FormFieldMessageContextProvider } from '../../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { useFormFieldMessagesContext } from '../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { StratoValidityStateKeys } from '../../../forms/validation/types.js';\nimport { Divider } from '../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../layouts/grid/Grid.js';\nimport type { OverlayTriggerState } from '../../../overlays/hooks/useOverlay.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 { UISegmentsDispatchContext } from '../contexts/SegmentsUI/SegmentsUIDispatchContext.js';\nimport type { SegmentSelectorUIState } from '../contexts/SegmentsUI/SegmentsUIReducer.js';\nimport {\n  areUiSegmentsValid,\n  getErrorKey,\n} from '../contexts/SegmentsUI/segmentValidationHelper.js';\nimport { useSegments } from '../hooks/useSegments.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../segmentMessages.js';\nimport * as styles from '../SegmentSelector.sty.js';\n\n/** @internal */\nexport const SegmentsOverlay = ({ labelId }: { labelId: string }) => {\n  const { getAllSegments } = useSegmentsCache();\n  const { data, isLoading } = useQuery(\n    {\n      queryKey: ['getAllSegments'],\n      queryFn: () => getAllSegments().catch(() => new Map()),\n      notifyOnChangeProps: ['dataUpdatedAt'],\n      throwOnError: false,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { isLoading: isLoadingPresets } = useQuery(\n    {\n      queryKey: ['getSegmentsPresets'],\n      queryFn: () =>\n        // We don't want to render the error fallback in case the presets are not available.\n        // However, we sill want to keep the loading state until both queries are resolved.\n        getSegmentsPresets().catch(() => {\n          return {\n            pinnedPresets: [],\n            recentPresets: [],\n          };\n        }),\n    },\n    segmentsClient.queryClient,\n  );\n\n  if (isLoading || isLoadingPresets) {\n    return <LoadingSegments />;\n  }\n\n  return <SegmentsContent cachedSegments={data ?? new Map()} id={labelId} />;\n};\n\ntype SegmentsContentProps = {\n  cachedSegments: Map<string, CachedSegment>;\n  id: string;\n};\n\nasync function applySegments(\n  uiSegments: SegmentSelectorUIState['uiSegments'],\n  setSegments: (segments: QueryFilterSegment[]) => Promise<void>,\n  overlayState?: OverlayTriggerState,\n) {\n  try {\n    const applicableSegments = await Promise.all(\n      uiSegments\n        .filter((uiSegment) => !uiSegment.isPlaceholder)\n        .map(async (uiSegment) => {\n          const errorKey = await getErrorKey(uiSegment);\n\n          if (errorKey?.equals(StratoValidityStateKeys.needsUpdate)) {\n            return {\n              id: uiSegment.id,\n            };\n          }\n\n          return {\n            id: uiSegment.id,\n            variables: uiSegment.variables,\n          };\n        }),\n    );\n\n    await setSegments(applicableSegments);\n    const isValid = await areUiSegmentsValid(applicableSegments);\n\n    if (isValid) {\n      overlayState?.close();\n    }\n  } catch {\n    /** we don't want to log the error again. */\n  }\n}\n\n/**\n * SegmentsManager-component for the SegmentSelector Overlay\n * @internal\n */\nconst SegmentsContent = ({ cachedSegments, id }: SegmentsContentProps) => {\n  const { dispatch, overlayState } = useContext(UISegmentsDispatchContext);\n  const { dispatch: parentErrorDispatch } = useFormFieldMessagesContext();\n\n  const intl = useIntl();\n  const addButtonRef = useRef<null | HTMLButtonElement>(null);\n  const {\n    uiSegments,\n    hasSelection,\n    readOnly,\n    focusedSegmentId,\n    arrayIdentifierErrorIds,\n  } = useContext(UISegmentsContext);\n\n  const formId = useId();\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  useEffect(() => {\n    const errorIds = arrayIdentifierErrorIds;\n\n    // We only want to show the error once the overlay closes to be consistent in the validation flow.\n    return () => {\n      if (!errorIds) {\n        return;\n      }\n\n      if (errorIds.length > 0) {\n        parentErrorDispatch?.({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: 'array-identifier',\n            validityStateKey: 'customError',\n            variant: 'error',\n            messageType: 'formcontrol',\n            message: (\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n              />\n            ),\n          },\n        });\n        return;\n      }\n\n      parentErrorDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: 'array-identifier',\n          messageType: 'formcontrol',\n        },\n      });\n    };\n  }, [arrayIdentifierErrorIds]);\n\n  const availableSegments = useMemo(() => {\n    const tmp: CachedSegment['segment'][] = [];\n    cachedSegments.forEach((value, key) => {\n      // Remove all the segments that have already been selected or are private\n      if (\n        !value.temporarilyApplied &&\n        !uiSegments.some((segment) => segment.id === key)\n      ) {\n        tmp.push({ ...value.segment });\n      }\n    });\n\n    return tmp.sort((firstSegment, secondSegment) =>\n      firstSegment.name.localeCompare(secondSegment.name),\n    );\n  }, [cachedSegments, uiSegments]);\n\n  const {\n    segments,\n    removeAllSegments: removeAllSegmentsFromStore,\n    setSegments,\n  } = useSegments();\n  const { removeAllUISegments, clearPlaceholder } = useSegmentsUIContext();\n\n  if (segments.length === 0 && cachedSegments.size === 0) {\n    return <EmptySegments />;\n  }\n\n  // If the segmentsClient has no access rights, we want to rely on the trigger's validity state.\n  const MessageWrapper = segmentsClient.hasAccessRights\n    ? FormFieldMessageContextProvider\n    : Fragment;\n\n  return (\n    <Flex\n      px={4}\n      pb={8}\n      gap={0}\n      flexDirection=\"column\"\n      id={id}\n      width=\"100vw\"\n      className={overlayStyles.overlayDefaultWidth}\n    >\n      <div className={overlayStyles.scrollContainer}>\n        <Grid\n          as=\"form\"\n          ref={formRef}\n          id={formId}\n          px={12}\n          pt={12}\n          pb={16}\n          onInvalid={(event: ReactFormEvent) => {\n            event.stopPropagation();\n\n            if (\n              (event.nativeEvent.target as HTMLSelectElement).validity\n                .customError &&\n              !(event.nativeEvent.target as HTMLSelectElement).validity\n                .valueMissing\n            ) {\n              applySegments(uiSegments, setSegments, overlayState).catch(\n                () => undefined,\n              );\n            }\n          }}\n          onSubmit={(event: ReactFormEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            applySegments(uiSegments, setSegments, overlayState).catch(\n              () => undefined,\n            );\n          }}\n          onKeyDown={(event: ReactKeyboardEvent) => {\n            // Enables form submission on cmd/strg + enter\n            if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n              // Fires an submit as if triggered via the submit button and, therefore, triggers validation as well.\n              formRef?.current?.requestSubmit();\n            }\n          }}\n        >\n          <FieldSet className={overlayStyles.fieldSet}>\n            <FieldSet.Legend className={overlayStyles.legend}>\n              {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.legend)}\n            </FieldSet.Legend>\n            <ul className={styles.segmentSelectorList}>\n              {uiSegments?.map((segment) => (\n                <MessageWrapper key={segment.id}>\n                  {/** ^ We don't want the outside error message influence the inside error messages and vice versa. */}\n                  <SelectionBar\n                    key={segment.id}\n                    uiSegment={segment}\n                    segment={cachedSegments.get(segment.id)}\n                    readOnly={readOnly}\n                    availableSegments={availableSegments}\n                    clearable={\n                      segment.isPlaceholder ? uiSegments.length > 1 : true\n                    }\n                    autoFocus={segment.id === focusedSegmentId}\n                    returnFocusTo={addButtonRef}\n                  />\n                </MessageWrapper>\n              ))}\n            </ul>\n            {!readOnly &&\n              hasSelection &&\n              segmentsClient.hasAccessRights !== false && (\n                <Grid gridTemplateColumns=\"1fr auto auto\">\n                  <Button\n                    onClick={() =>\n                      dispatch({\n                        type: 'add',\n                        payload: { isPlaceholder: true },\n                      })\n                    }\n                    variant=\"emphasized\"\n                    ref={addButtonRef}\n                    data-dt-name=\"Add\"\n                  >\n                    <Button.Prefix\n                      aria-label={intl.formatMessage(\n                        SEGMENTSELECTOR_MESSAGES.addSegment,\n                      )}\n                    >\n                      <PlusIcon />\n                    </Button.Prefix>\n                    Segment\n                  </Button>\n                  <Button\n                    onClick={() => {\n                      removeAllSegmentsFromStore();\n                      removeAllUISegments();\n                      overlayState?.close();\n                    }}\n                    type=\"reset\"\n                    form={formId}\n                    data-dt-name=\"ClearAll\"\n                  >\n                    {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.clearAll)}\n                  </Button>\n                  <Button\n                    type=\"submit\"\n                    form={formId}\n                    color=\"primary\"\n                    variant=\"accent\"\n                    data-dt-name=\"Apply\"\n                    onClick={() => clearPlaceholder()}\n                  >\n                    {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.applyButton)}\n                  </Button>\n                </Grid>\n              )}\n          </FieldSet>\n          {segmentsClient.hasAccessRights === false && (\n            <NoAccessHint readOnly={readOnly} />\n          )}\n        </Grid>\n        {!readOnly && segmentsClient.hasAccessRights === true && (\n          <SegmentsPresetList showDivider={hasSelection} />\n        )}\n      </div>\n      <Divider />\n      <SegmentFooter />\n    </Flex>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useQuery } from '@tanstack/react-query';\nimport {\n  Fragment,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type SyntheticEvent,\n} from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { PlusIcon } from '@dynatrace/strato-icons';\nimport type { FilterSegment as QueryFilterSegment } from '@dynatrace-sdk/client-query';\nimport { getSegmentsPresets } from '@dynatrace-sdk/segments-presets';\n\nimport { EmptySegments } from './EmptySegments.js';\nimport { LoadingSegments } from './LoadingSegments.js';\nimport { NoAccessHint } from './noAccessRights/NoAccessHint.js';\nimport * as overlayStyles from './Overlay.sty.js';\nimport { SegmentFooter } from './SegmentFooter.js';\nimport { SegmentsPresetList } from './segmentsPresets/SegmentsPresetsList.js';\nimport { SelectionBar } from './selectionBar/SelectionBar.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { FieldSet } from '../../../forms/forms-core/components/field-set/FieldSet.js';\nimport { FormFieldMessageContextProvider } from '../../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { useFormFieldMessagesContext } from '../../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { FormFieldMessagesAction } from '../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { StratoValidityStateKeys } from '../../../forms/validation/types.js';\nimport { Divider } from '../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../layouts/grid/Grid.js';\nimport type { OverlayTriggerState } from '../../../overlays/hooks/useOverlay.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 { UISegmentsDispatchContext } from '../contexts/SegmentsUI/SegmentsUIDispatchContext.js';\nimport type { SegmentSelectorUIState } from '../contexts/SegmentsUI/SegmentsUIReducer.js';\nimport {\n  areUiSegmentsValid,\n  getErrorKey,\n} from '../contexts/SegmentsUI/segmentValidationHelper.js';\nimport { useSegments } from '../hooks/useSegments.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../segmentMessages.js';\nimport * as styles from '../SegmentSelector.sty.js';\n\n/** @internal */\nexport const SegmentsOverlay = ({ labelId }: { labelId: string }) => {\n  const { getAllSegments } = useSegmentsCache();\n  const { data, isLoading } = useQuery(\n    {\n      queryKey: ['getAllSegments'],\n      queryFn: () => getAllSegments().catch(() => new Map()),\n      notifyOnChangeProps: ['dataUpdatedAt'],\n      throwOnError: false,\n    },\n    segmentsClient.queryClient,\n  );\n\n  const { isLoading: isLoadingPresets } = useQuery(\n    {\n      queryKey: ['getSegmentsPresets'],\n      queryFn: () =>\n        // We don't want to render the error fallback in case the presets are not available.\n        // However, we sill want to keep the loading state until both queries are resolved.\n        getSegmentsPresets().catch(() => {\n          return {\n            pinnedPresets: [],\n            recentPresets: [],\n          };\n        }),\n    },\n    segmentsClient.queryClient,\n  );\n\n  if (isLoading || isLoadingPresets) {\n    return <LoadingSegments />;\n  }\n\n  return <SegmentsContent cachedSegments={data ?? new Map()} id={labelId} />;\n};\n\ntype SegmentsContentProps = {\n  cachedSegments: Map<string, CachedSegment>;\n  id: string;\n};\n\nasync function applySegments(\n  uiSegments: SegmentSelectorUIState['uiSegments'],\n  setSegments: (segments: QueryFilterSegment[]) => Promise<void>,\n  overlayState?: OverlayTriggerState,\n) {\n  try {\n    const applicableSegments = await Promise.all(\n      uiSegments\n        .filter((uiSegment) => !uiSegment.isPlaceholder)\n        .map(async (uiSegment) => {\n          const errorKey = await getErrorKey(uiSegment);\n\n          if (errorKey?.equals(StratoValidityStateKeys.needsUpdate)) {\n            return {\n              id: uiSegment.id,\n            };\n          }\n\n          return {\n            id: uiSegment.id,\n            variables: uiSegment.variables,\n          };\n        }),\n    );\n\n    await setSegments(applicableSegments);\n    const isValid = await areUiSegmentsValid(applicableSegments);\n\n    if (isValid) {\n      overlayState?.close();\n    }\n  } catch {\n    /** we don't want to log the error again. */\n  }\n}\n\n/**\n * SegmentsManager-component for the SegmentSelector Overlay\n * @internal\n */\nconst SegmentsContent = ({ cachedSegments, id }: SegmentsContentProps) => {\n  const { dispatch, overlayState } = useContext(UISegmentsDispatchContext);\n  const { dispatch: parentErrorDispatch } = useFormFieldMessagesContext();\n\n  const intl = useIntl();\n  const addButtonRef = useRef<null | HTMLButtonElement>(null);\n  const {\n    uiSegments,\n    hasSelection,\n    readOnly,\n    focusedSegmentId,\n    arrayIdentifierErrorIds,\n  } = useContext(UISegmentsContext);\n\n  const formId = useId();\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  useEffect(() => {\n    const errorIds = arrayIdentifierErrorIds;\n\n    // We only want to show the error once the overlay closes to be consistent in the validation flow.\n    return () => {\n      if (!errorIds) {\n        return;\n      }\n\n      if (errorIds.length > 0) {\n        parentErrorDispatch?.({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: 'array-identifier',\n            validityStateKey: 'customError',\n            variant: 'error',\n            messageType: 'formcontrol',\n            message: (\n              <FormattedMessage\n                {...SEGMENTSELECTOR_MESSAGES.arrayIdentifierError}\n              />\n            ),\n          },\n        });\n        return;\n      }\n\n      parentErrorDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: 'array-identifier',\n          messageType: 'formcontrol',\n        },\n      });\n    };\n  }, [arrayIdentifierErrorIds]);\n\n  const availableSegments = useMemo(() => {\n    const tmp: CachedSegment['segment'][] = [];\n    cachedSegments.forEach((value, key) => {\n      // Remove all the segments that have already been selected or are private\n      if (\n        !value.temporarilyApplied &&\n        !uiSegments.some((segment) => segment.id === key)\n      ) {\n        tmp.push({ ...value.segment });\n      }\n    });\n\n    return tmp.sort((firstSegment, secondSegment) =>\n      firstSegment.name.localeCompare(secondSegment.name),\n    );\n  }, [cachedSegments, uiSegments]);\n\n  const {\n    segments,\n    removeAllSegments: removeAllSegmentsFromStore,\n    setSegments,\n  } = useSegments();\n  const { removeAllUISegments, clearPlaceholder } = useSegmentsUIContext();\n\n  if (segments.length === 0 && cachedSegments.size === 0) {\n    return <EmptySegments />;\n  }\n\n  // If the segmentsClient has no access rights, we want to rely on the trigger's validity state.\n  const MessageWrapper = segmentsClient.hasAccessRights\n    ? FormFieldMessageContextProvider\n    : Fragment;\n\n  return (\n    <Flex\n      px={4}\n      pb={8}\n      gap={0}\n      flexDirection=\"column\"\n      id={id}\n      width=\"100vw\"\n      className={overlayStyles.overlayDefaultWidth}\n    >\n      <div className={overlayStyles.scrollContainer}>\n        <Grid\n          as=\"form\"\n          ref={formRef}\n          id={formId}\n          px={12}\n          pt={12}\n          pb={16}\n          onInvalid={(event: SyntheticEvent<HTMLFormElement>) => {\n            event.stopPropagation();\n\n            if (\n              (event.nativeEvent.target as HTMLSelectElement).validity\n                .customError &&\n              !(event.nativeEvent.target as HTMLSelectElement).validity\n                .valueMissing\n            ) {\n              applySegments(uiSegments, setSegments, overlayState).catch(\n                () => undefined,\n              );\n            }\n          }}\n          onSubmit={(event: SyntheticEvent<HTMLFormElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            applySegments(uiSegments, setSegments, overlayState).catch(\n              () => undefined,\n            );\n          }}\n          onKeyDown={(event: ReactKeyboardEvent) => {\n            // Enables form submission on cmd/strg + enter\n            if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n              // Fires an submit as if triggered via the submit button and, therefore, triggers validation as well.\n              formRef?.current?.requestSubmit();\n            }\n          }}\n        >\n          <FieldSet className={overlayStyles.fieldSet}>\n            <FieldSet.Legend className={overlayStyles.legend}>\n              {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.legend)}\n            </FieldSet.Legend>\n            <ul className={styles.segmentSelectorList}>\n              {uiSegments?.map((segment) => (\n                <MessageWrapper key={segment.id}>\n                  {/** ^ We don't want the outside error message influence the inside error messages and vice versa. */}\n                  <SelectionBar\n                    key={segment.id}\n                    uiSegment={segment}\n                    segment={cachedSegments.get(segment.id)}\n                    readOnly={readOnly}\n                    availableSegments={availableSegments}\n                    clearable={\n                      segment.isPlaceholder ? uiSegments.length > 1 : true\n                    }\n                    autoFocus={segment.id === focusedSegmentId}\n                    returnFocusTo={addButtonRef}\n                  />\n                </MessageWrapper>\n              ))}\n            </ul>\n            {!readOnly &&\n              hasSelection &&\n              segmentsClient.hasAccessRights !== false && (\n                <Grid gridTemplateColumns=\"1fr auto auto\">\n                  <Button\n                    onClick={() =>\n                      dispatch({\n                        type: 'add',\n                        payload: { isPlaceholder: true },\n                      })\n                    }\n                    variant=\"emphasized\"\n                    ref={addButtonRef}\n                    data-dt-children-name=\"Add\"\n                  >\n                    <Button.Prefix\n                      aria-label={intl.formatMessage(\n                        SEGMENTSELECTOR_MESSAGES.addSegment,\n                      )}\n                    >\n                      <PlusIcon />\n                    </Button.Prefix>\n                    Segment\n                  </Button>\n                  <Button\n                    onClick={() => {\n                      removeAllSegmentsFromStore();\n                      removeAllUISegments();\n                      overlayState?.close();\n                    }}\n                    type=\"reset\"\n                    form={formId}\n                    data-dt-children-name=\"ClearAll\"\n                  >\n                    {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.clearAll)}\n                  </Button>\n                  <Button\n                    type=\"submit\"\n                    form={formId}\n                    color=\"primary\"\n                    variant=\"accent\"\n                    data-dt-children-name=\"Apply\"\n                    onClick={() => clearPlaceholder()}\n                  >\n                    {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.applyButton)}\n                  </Button>\n                </Grid>\n              )}\n          </FieldSet>\n          {segmentsClient.hasAccessRights === false && (\n            <NoAccessHint readOnly={readOnly} />\n          )}\n        </Grid>\n        {!readOnly && segmentsClient.hasAccessRights === true && (\n          <SegmentsPresetList showDivider={hasSelection} />\n        )}\n      </div>\n      <Divider />\n      <SegmentFooter />\n    </Flex>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/segment-selector/parts/Overlay.sty.js

@@ -1,12 +1,12 @@
 import "./Overlay.css";
-var divider = "_bqi6d90-3-8-0";
-var fieldSet = "_bqi6d97-3-8-0";
-var isAnimating = "_bqi6d94-3-8-0";
-var legend = "_bqi6d96-3-8-0";
-var link = "_bqi6d95-3-8-0";
-var menuLink = "_bqi6d91-3-8-0";
-var overlayDefaultWidth = "_bqi6d92-3-8-0";
-var scrollContainer = "_bqi6d93-3-8-0";
+var divider = "_bqi6d90-3-10-0";
+var fieldSet = "_bqi6d97-3-10-0";
+var isAnimating = "_bqi6d94-3-10-0";
+var legend = "_bqi6d96-3-10-0";
+var link = "_bqi6d95-3-10-0";
+var menuLink = "_bqi6d91-3-10-0";
+var overlayDefaultWidth = "_bqi6d92-3-10-0";
+var scrollContainer = "_bqi6d93-3-10-0";
 export {
   divider,
   fieldSet,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/segment-selector/parts/Overlay.css.ts"],
-  "sourcesContent": ["import './Overlay.css';\nexport var divider = '_bqi6d90-3-8-0';\nexport var fieldSet = '_bqi6d97-3-8-0';\nexport var isAnimating = '_bqi6d94-3-8-0';\nexport var legend = '_bqi6d96-3-8-0';\nexport var link = '_bqi6d95-3-8-0';\nexport var menuLink = '_bqi6d91-3-8-0';\nexport var overlayDefaultWidth = '_bqi6d92-3-8-0';\nexport var scrollContainer = '_bqi6d93-3-8-0';"],
+  "sourcesContent": ["import './Overlay.css';\nexport var divider = '_bqi6d90-3-10-0';\nexport var fieldSet = '_bqi6d97-3-10-0';\nexport var isAnimating = '_bqi6d94-3-10-0';\nexport var legend = '_bqi6d96-3-10-0';\nexport var link = '_bqi6d95-3-10-0';\nexport var menuLink = '_bqi6d91-3-10-0';\nexport var overlayDefaultWidth = '_bqi6d92-3-10-0';\nexport var scrollContainer = '_bqi6d93-3-10-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,sBAAsB;AAC1B,IAAI,kBAAkB;",
   "names": []
 }

package/esm/filters/segment-selector/parts/SegmentFooter.js

@@ -48,7 +48,7 @@ const SegmentFooter = () => {
                 "aria-label": intl.formatMessage(
                   SEGMENTSELECTOR_MESSAGES.manageSegments
                 ),
-                "data-dt-name": "ManageSegments",
+                "data-dt-children-name": "ManageSegments",
                 children: /* @__PURE__ */ jsx(SettingIcon, {})
               }
             )
@@ -59,7 +59,7 @@ const SegmentFooter = () => {
           {
             href: SEGMENTS_DOCUMENTATION_URL,
             className: styles.link,
-            "data-dt-name": "LearnMoreAboutSegments",
+            "data-dt-children-name": "LearnMoreAboutSegments",
             children: intl.formatMessage(SEGMENTSELECTOR_MESSAGES.docsLinkText)
           }
         )

package/esm/filters/segment-selector/parts/SegmentFooter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/segment-selector/parts/SegmentFooter.tsx"],
-  "sourcesContent": ["import { useContext } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { SettingIcon } from '@dynatrace/strato-icons';\n\nimport { getSegmentManagementHref } from './segmentManagementHref.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../segmentMessages.js';\nimport * as styles from './Overlay.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { SEGMENTS_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport { useOverlayStacking } from '../../../core/hooks/useOverlayStacking.js';\nimport { Grid } from '../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { ExternalLink } from '../../../typography/external-link/ExternalLink.js';\nimport { segmentsClient } from '../contexts/SegmentsCache/SegmentsCache.js';\nimport { UISegmentsContext } from '../contexts/SegmentsUI/SegmentsUIContext.js';\n\nexport const SegmentFooter = () => {\n  const intl = useIntl();\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const { readOnly } = useContext(UISegmentsContext);\n\n  return (\n    <Grid\n      rowGap={8}\n      columnGap={0}\n      px={12}\n      pb={segmentsClient.hasAccessRights ? 2 : 4}\n      pt={2}\n      mt={8}\n      gridTemplateColumns={\n        segmentsClient.hasAccessRights && !readOnly ? 'auto 1fr' : '1fr'\n      }\n      justifyItems=\"end\"\n      alignItems=\"center\"\n    >\n      {segmentsClient.hasAccessRights && !readOnly && (\n        <Tooltip\n          placement=\"right\"\n          text={intl.formatMessage(SEGMENTSELECTOR_MESSAGES.manageSegments)}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            as=\"a\"\n            href={getSegmentManagementHref()}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            size=\"condensed\"\n            className={styles.link}\n            aria-label={intl.formatMessage(\n              SEGMENTSELECTOR_MESSAGES.manageSegments,\n            )}\n            data-dt-name=\"ManageSegments\"\n          >\n            <SettingIcon />\n          </Button>\n        </Tooltip>\n      )}\n      <ExternalLink\n        href={SEGMENTS_DOCUMENTATION_URL}\n        className={styles.link}\n        data-dt-name=\"LearnMoreAboutSegments\"\n      >\n        {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.docsLinkText)}\n      </ExternalLink>\n    </Grid>\n  );\n};\n"],
-  "mappings": "AAwBI,SA+BQ,KA/BR;AAxBJ,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAE5B,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,kCAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAE3B,MAAM,gBAAgB,MAAM;AACjC,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,mBAAmB,QAAW,SAAS;AAE/D,QAAM,EAAE,SAAS,IAAI,WAAW,iBAAiB;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,IAAI,eAAe,kBAAkB,IAAI;AAAA,MACzC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,qBACE,eAAe,mBAAmB,CAAC,WAAW,aAAa;AAAA,MAE7D,cAAa;AAAA,MACb,YAAW;AAAA,MAEV;AAAA,uBAAe,mBAAmB,CAAC,YAClC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAM,KAAK,cAAc,yBAAyB,cAAc;AAAA,YAChE,OAAO,EAAE,QAAQ,OAAO,gBAAgB,MAAM,MAAM,IAAI,EAAE;AAAA,YAE1D;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAM,yBAAyB;AAAA,gBAC/B,QAAO;AAAA,gBACP,KAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,WAAW,OAAO;AAAA,gBAClB,cAAY,KAAK;AAAA,kBACf,yBAAyB;AAAA,gBAC3B;AAAA,gBACA,gBAAa;AAAA,gBAEb,8BAAC,eAAY;AAAA;AAAA,YACf;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW,OAAO;AAAA,YAClB,gBAAa;AAAA,YAEZ,eAAK,cAAc,yBAAyB,YAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useContext } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { SettingIcon } from '@dynatrace/strato-icons';\n\nimport { getSegmentManagementHref } from './segmentManagementHref.js';\nimport { SEGMENTSELECTOR_MESSAGES } from '../segmentMessages.js';\nimport * as styles from './Overlay.sty.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { SEGMENTS_DOCUMENTATION_URL } from '../../../core/external-links.js';\nimport { useOverlayStacking } from '../../../core/hooks/useOverlayStacking.js';\nimport { Grid } from '../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { ExternalLink } from '../../../typography/external-link/ExternalLink.js';\nimport { segmentsClient } from '../contexts/SegmentsCache/SegmentsCache.js';\nimport { UISegmentsContext } from '../contexts/SegmentsUI/SegmentsUIContext.js';\n\nexport const SegmentFooter = () => {\n  const intl = useIntl();\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const { readOnly } = useContext(UISegmentsContext);\n\n  return (\n    <Grid\n      rowGap={8}\n      columnGap={0}\n      px={12}\n      pb={segmentsClient.hasAccessRights ? 2 : 4}\n      pt={2}\n      mt={8}\n      gridTemplateColumns={\n        segmentsClient.hasAccessRights && !readOnly ? 'auto 1fr' : '1fr'\n      }\n      justifyItems=\"end\"\n      alignItems=\"center\"\n    >\n      {segmentsClient.hasAccessRights && !readOnly && (\n        <Tooltip\n          placement=\"right\"\n          text={intl.formatMessage(SEGMENTSELECTOR_MESSAGES.manageSegments)}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            as=\"a\"\n            href={getSegmentManagementHref()}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            size=\"condensed\"\n            className={styles.link}\n            aria-label={intl.formatMessage(\n              SEGMENTSELECTOR_MESSAGES.manageSegments,\n            )}\n            data-dt-children-name=\"ManageSegments\"\n          >\n            <SettingIcon />\n          </Button>\n        </Tooltip>\n      )}\n      <ExternalLink\n        href={SEGMENTS_DOCUMENTATION_URL}\n        className={styles.link}\n        data-dt-children-name=\"LearnMoreAboutSegments\"\n      >\n        {intl.formatMessage(SEGMENTSELECTOR_MESSAGES.docsLinkText)}\n      </ExternalLink>\n    </Grid>\n  );\n};\n"],
+  "mappings": "AAwBI,SA+BQ,KA/BR;AAxBJ,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAE5B,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,kCAAkC;AAC3C,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAE3B,MAAM,gBAAgB,MAAM;AACjC,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,mBAAmB,QAAW,SAAS;AAE/D,QAAM,EAAE,SAAS,IAAI,WAAW,iBAAiB;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,IAAI;AAAA,MACJ,IAAI,eAAe,kBAAkB,IAAI;AAAA,MACzC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,qBACE,eAAe,mBAAmB,CAAC,WAAW,aAAa;AAAA,MAE7D,cAAa;AAAA,MACb,YAAW;AAAA,MAEV;AAAA,uBAAe,mBAAmB,CAAC,YAClC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAM,KAAK,cAAc,yBAAyB,cAAc;AAAA,YAChE,OAAO,EAAE,QAAQ,OAAO,gBAAgB,MAAM,MAAM,IAAI,EAAE;AAAA,YAE1D;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAM,yBAAyB;AAAA,gBAC/B,QAAO;AAAA,gBACP,KAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,WAAW,OAAO;AAAA,gBAClB,cAAY,KAAK;AAAA,kBACf,yBAAyB;AAAA,gBAC3B;AAAA,gBACA,yBAAsB;AAAA,gBAEtB,8BAAC,eAAY;AAAA;AAAA,YACf;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW,OAAO;AAAA,YAClB,yBAAsB;AAAA,YAErB,eAAK,cAAc,yBAAyB,YAAY;AAAA;AAAA,QAC3D;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.css

@@ -1,17 +1,17 @@
-._7mq3is0-3-8-0 {
+._7mq3is0-3-10-0 {
   all: unset;
   padding: 0;
   width: 100%;
   transition: height var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._7mq3is1-3-8-0 {
+._7mq3is1-3-10-0 {
   height: 0;
   opacity: 0;
 }
-._7mq3is2-3-8-0 {
+._7mq3is2-3-10-0 {
   height: auto;
   opacity: 1;
 }
-._7mq3is3-3-8-0 {
+._7mq3is3-3-10-0 {
   all: unset;
 }

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.js

@@ -76,7 +76,7 @@ const ShowMorePanelRoot = ({ children }) => {
           transitionDuration: "0s",
           transition: "none"
         },
-        "data-dt-name": "ShowMoreLess",
+        "data-dt-children-name": "ShowMoreLess",
         "data-dt-properties": dataDtProperties,
         children: /* @__PURE__ */ jsxs(Flex, { gap: 2, as: "span", paddingLeft: 4, children: [
           /* @__PURE__ */ jsx(

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n  Children,\n} from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport {\n  ChevronDownSmallIcon,\n  ChevronUpSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './ShowMorePanel.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\n\n/**\n * Compound component for the extendable content of the show more panel.\n */\nconst ExtendedContent = ({ children }: PropsWithChildren) => children;\n\n/**\n * Compound component for the always visible content of the show more panel.\n */\nconst PrimaryContent = ({ children }: PropsWithChildren) => children;\n\nfunction useChildrenSlots(children: ReactNode) {\n  const memoizedSlots = useMemo(() => {\n    const slots: {\n      extendedContent?: ReactNode;\n      primaryContent?: ReactNode;\n    } = {};\n\n    Children.forEach(children, (child) => {\n      if (isElement(child)) {\n        switch (child.type) {\n          case ExtendedContent:\n            slots.extendedContent = child;\n            break;\n          case PrimaryContent:\n          default:\n            slots.primaryContent = child;\n            break;\n        }\n      }\n    });\n    return slots;\n  }, [children]);\n\n  return memoizedSlots;\n}\n\n/**\n * Panel with a show more/less control for the collapsing of segment presets.\n * @internal\n */\nconst ShowMorePanelRoot = ({ children }: PropsWithChildren) => {\n  const { primaryContent, extendedContent } = useChildrenSlots(children);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  if (!children) {\n    if (isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'SegmentSelector: The used child is not supported by the ExpandableSection.',\n      );\n    }\n    return null;\n  }\n\n  if (!extendedContent) {\n    return primaryContent;\n  }\n\n  const icon = isExpanded ? <ChevronUpSmallIcon /> : <ChevronDownSmallIcon />;\n  const dataDtProperties = `state:${isExpanded ? 'less' : 'more'}`;\n\n  return (\n    <>\n      <ul className={styles.list}>{primaryContent}</ul>\n      {isExpanded && (\n        <ul\n          className={clsx(styles.expandableWrapper, {\n            [styles.expandableWrapperExpanded]: isExpanded,\n            [styles.expandableWrapperCollapsed]: !isExpanded,\n          })}\n        >\n          {extendedContent}\n        </ul>\n      )}\n      <Button\n        onClick={() => setIsExpanded((previousState) => !previousState)}\n        width=\"full\"\n        textAlign=\"start\"\n        style={{\n          transitionTimingFunction: 'none',\n          transitionDuration: '0s',\n          transition: 'none',\n        }}\n        data-dt-name=\"ShowMoreLess\"\n        data-dt-properties={dataDtProperties}\n      >\n        <Flex gap={2} as=\"span\" paddingLeft={4}>\n          <FormattedMessage\n            defaultMessage=\"Show {isExpanded, select, true {less} false {more} other{}}\"\n            id=\"mYmd/xMZulbADHsY\"\n            description=\"Text shown on the expanding button within the SegmentSelector preset list, when currently expanded.\"\n            values={{ isExpanded }}\n          />\n          {icon}\n        </Flex>\n      </Button>\n    </>\n  );\n};\n\n/**\n * Panel with a show more/less control for the collapsing of segment presets.\n * @internal\n */\nexport const ShowMorePanel = Object.assign(ShowMorePanelRoot, {\n  PrimaryContent,\n  ExtendedContent,\n});\n"],
-  "mappings": "AA+E4B,SAIxB,UAJwB,KA4BpB,YA5BoB;AA/E5B,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AAKrB,MAAM,kBAAkB,CAAC,EAAE,SAAS,MAAyB;AAK7D,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAAyB;AAE5D,SAAS,iBAAiB,UAAqB;AAC7C,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,QAGF,CAAC;AAEL,aAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,UAAI,UAAU,KAAK,GAAG;AACpB,gBAAQ,MAAM,MAAM;AAAA,UAClB,KAAK;AACH,kBAAM,kBAAkB;AACxB;AAAA,UACF,KAAK;AAAA,UACL;AACE,kBAAM,iBAAiB;AACvB;AAAA,QACJ;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;AAMA,MAAM,oBAAoB,CAAC,EAAE,SAAS,MAAyB;AAC7D,QAAM,EAAE,gBAAgB,gBAAgB,IAAI,iBAAiB,QAAQ;AACrE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,MAAI,CAAC,UAAU;AACb,QAAI,MAAM,GAAG;AAEX,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,aAAa,oBAAC,sBAAmB,IAAK,oBAAC,wBAAqB;AACzE,QAAM,mBAAmB,SAAS,aAAa,SAAS,MAAM;AAE9D,SACE,iCACE;AAAA,wBAAC,QAAG,WAAW,OAAO,MAAO,0BAAe;AAAA,IAC3C,cACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,OAAO,mBAAmB;AAAA,UACxC,CAAC,OAAO,yBAAyB,GAAG;AAAA,UACpC,CAAC,OAAO,0BAA0B,GAAG,CAAC;AAAA,QACxC,CAAC;AAAA,QAEA;AAAA;AAAA,IACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,cAAc,CAAC,kBAAkB,CAAC,aAAa;AAAA,QAC9D,OAAM;AAAA,QACN,WAAU;AAAA,QACV,OAAO;AAAA,UACL,0BAA0B;AAAA,UAC1B,oBAAoB;AAAA,UACpB,YAAY;AAAA,QACd;AAAA,QACA,gBAAa;AAAA,QACb,sBAAoB;AAAA,QAEpB,+BAAC,QAAK,KAAK,GAAG,IAAG,QAAO,aAAa,GACnC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA,cACZ,QAAQ,EAAE,WAAW;AAAA;AAAA,UACvB;AAAA,UACC;AAAA,WACH;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAMO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactNode,\n  Children,\n} from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport {\n  ChevronDownSmallIcon,\n  ChevronUpSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport * as styles from './ShowMorePanel.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\n\n/**\n * Compound component for the extendable content of the show more panel.\n */\nconst ExtendedContent = ({ children }: PropsWithChildren) => children;\n\n/**\n * Compound component for the always visible content of the show more panel.\n */\nconst PrimaryContent = ({ children }: PropsWithChildren) => children;\n\nfunction useChildrenSlots(children: ReactNode) {\n  const memoizedSlots = useMemo(() => {\n    const slots: {\n      extendedContent?: ReactNode;\n      primaryContent?: ReactNode;\n    } = {};\n\n    Children.forEach(children, (child) => {\n      if (isElement(child)) {\n        switch (child.type) {\n          case ExtendedContent:\n            slots.extendedContent = child;\n            break;\n          case PrimaryContent:\n          default:\n            slots.primaryContent = child;\n            break;\n        }\n      }\n    });\n    return slots;\n  }, [children]);\n\n  return memoizedSlots;\n}\n\n/**\n * Panel with a show more/less control for the collapsing of segment presets.\n * @internal\n */\nconst ShowMorePanelRoot = ({ children }: PropsWithChildren) => {\n  const { primaryContent, extendedContent } = useChildrenSlots(children);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  if (!children) {\n    if (isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'SegmentSelector: The used child is not supported by the ExpandableSection.',\n      );\n    }\n    return null;\n  }\n\n  if (!extendedContent) {\n    return primaryContent;\n  }\n\n  const icon = isExpanded ? <ChevronUpSmallIcon /> : <ChevronDownSmallIcon />;\n  const dataDtProperties = `state:${isExpanded ? 'less' : 'more'}`;\n\n  return (\n    <>\n      <ul className={styles.list}>{primaryContent}</ul>\n      {isExpanded && (\n        <ul\n          className={clsx(styles.expandableWrapper, {\n            [styles.expandableWrapperExpanded]: isExpanded,\n            [styles.expandableWrapperCollapsed]: !isExpanded,\n          })}\n        >\n          {extendedContent}\n        </ul>\n      )}\n      <Button\n        onClick={() => setIsExpanded((previousState) => !previousState)}\n        width=\"full\"\n        textAlign=\"start\"\n        style={{\n          transitionTimingFunction: 'none',\n          transitionDuration: '0s',\n          transition: 'none',\n        }}\n        data-dt-children-name=\"ShowMoreLess\"\n        data-dt-properties={dataDtProperties}\n      >\n        <Flex gap={2} as=\"span\" paddingLeft={4}>\n          <FormattedMessage\n            defaultMessage=\"Show {isExpanded, select, true {less} false {more} other{}}\"\n            id=\"mYmd/xMZulbADHsY\"\n            description=\"Text shown on the expanding button within the SegmentSelector preset list, when currently expanded.\"\n            values={{ isExpanded }}\n          />\n          {icon}\n        </Flex>\n      </Button>\n    </>\n  );\n};\n\n/**\n * Panel with a show more/less control for the collapsing of segment presets.\n * @internal\n */\nexport const ShowMorePanel = Object.assign(ShowMorePanelRoot, {\n  PrimaryContent,\n  ExtendedContent,\n});\n"],
+  "mappings": "AA+E4B,SAIxB,UAJwB,KA4BpB,YA5BoB;AA/E5B,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AAKrB,MAAM,kBAAkB,CAAC,EAAE,SAAS,MAAyB;AAK7D,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAAyB;AAE5D,SAAS,iBAAiB,UAAqB;AAC7C,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,QAGF,CAAC;AAEL,aAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,UAAI,UAAU,KAAK,GAAG;AACpB,gBAAQ,MAAM,MAAM;AAAA,UAClB,KAAK;AACH,kBAAM,kBAAkB;AACxB;AAAA,UACF,KAAK;AAAA,UACL;AACE,kBAAM,iBAAiB;AACvB;AAAA,QACJ;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;AAMA,MAAM,oBAAoB,CAAC,EAAE,SAAS,MAAyB;AAC7D,QAAM,EAAE,gBAAgB,gBAAgB,IAAI,iBAAiB,QAAQ;AACrE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,MAAI,CAAC,UAAU;AACb,QAAI,MAAM,GAAG;AAEX,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,aAAa,oBAAC,sBAAmB,IAAK,oBAAC,wBAAqB;AACzE,QAAM,mBAAmB,SAAS,aAAa,SAAS,MAAM;AAE9D,SACE,iCACE;AAAA,wBAAC,QAAG,WAAW,OAAO,MAAO,0BAAe;AAAA,IAC3C,cACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,OAAO,mBAAmB;AAAA,UACxC,CAAC,OAAO,yBAAyB,GAAG;AAAA,UACpC,CAAC,OAAO,0BAA0B,GAAG,CAAC;AAAA,QACxC,CAAC;AAAA,QAEA;AAAA;AAAA,IACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,cAAc,CAAC,kBAAkB,CAAC,aAAa;AAAA,QAC9D,OAAM;AAAA,QACN,WAAU;AAAA,QACV,OAAO;AAAA,UACL,0BAA0B;AAAA,UAC1B,oBAAoB;AAAA,UACpB,YAAY;AAAA,QACd;AAAA,QACA,yBAAsB;AAAA,QACtB,sBAAoB;AAAA,QAEpB,+BAAC,QAAK,KAAK,GAAG,IAAG,QAAO,aAAa,GACnC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA,cACZ,QAAQ,EAAE,WAAW;AAAA;AAAA,UACvB;AAAA,UACC;AAAA,WACH;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAMO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.sty.js

@@ -1,8 +1,8 @@
 import "./ShowMorePanel.css";
-var expandableWrapper = "_7mq3is0-3-8-0";
-var expandableWrapperCollapsed = "_7mq3is1-3-8-0";
-var expandableWrapperExpanded = "_7mq3is2-3-8-0";
-var list = "_7mq3is3-3-8-0";
+var expandableWrapper = "_7mq3is0-3-10-0";
+var expandableWrapperCollapsed = "_7mq3is1-3-10-0";
+var expandableWrapperExpanded = "_7mq3is2-3-10-0";
+var list = "_7mq3is3-3-10-0";
 export {
   expandableWrapper,
   expandableWrapperCollapsed,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/ShowMorePanel/ShowMorePanel.css.ts"],
-  "sourcesContent": ["import './ShowMorePanel.css';\nexport var expandableWrapper = '_7mq3is0-3-8-0';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-8-0';\nexport var expandableWrapperExpanded = '_7mq3is2-3-8-0';\nexport var list = '_7mq3is3-3-8-0';"],
+  "sourcesContent": ["import './ShowMorePanel.css';\nexport var expandableWrapper = '_7mq3is0-3-10-0';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-10-0';\nexport var expandableWrapperExpanded = '_7mq3is2-3-10-0';\nexport var list = '_7mq3is3-3-10-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,6BAA6B;AACjC,IAAI,4BAA4B;AAChC,IAAI,OAAO;",
   "names": []
 }

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPreset.js

@@ -336,7 +336,7 @@ const SegmentsPreset = (props) => {
                     onClick,
                     disabled: pinLimitReached && !isPinned,
                     "aria-label": pinningTooltipText,
-                    "data-dt-name": "PinUnpin",
+                    "data-dt-children-name": "PinUnpin",
                     "data-dt-properties": pinButtonDataDtProperties,
                     children: icon
                   }

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPreset.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/segmentsPresets/SegmentsPreset.tsx"],
-  "sourcesContent": ["import { useMutation, useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { Fragment, useContext, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport { PinIcon, PinOffIcon } from '@dynatrace/strato-icons';\nimport { getAppName } from '@dynatrace-sdk/app-environment';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\nimport {\n  pinSegmentsPreset,\n  unpinSegmentsPreset,\n  type SegmentsPreset as SegmentsPresetType,\n  type UserSegmentsPresets,\n} from '@dynatrace-sdk/segments-presets';\n\nimport * as styles from './SegmentsPresets.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { expandCollapseEasing } from '../../../../core/utils/framer-motion-easings.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { textStyle as textStyleCSS } from '../../../../styles/textStyle.sty.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport {\n  handleFailedOptimisticMutation,\n  handleSettledOptimisticMutation,\n  runOptimisticMutation,\n} from '../../../helper/queryHelper.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport { useSegmentsUIContext } from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { UISegmentsDispatchContext } from '../../contexts/SegmentsUI/SegmentsUIDispatchContext.js';\nimport { areUiSegmentsValid } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport { useSegments } from '../../hooks/useSegments.js';\nimport { flattenQueryResultToValues, getReadableValue } from '../../utils.js';\nimport * as animationHelperStyles from '../Overlay.sty.js';\n\n/** @internal */\ninterface SegmentsPresetProps {\n  uiPreset: SegmentsPresetType;\n  id: string;\n  pinLimitReached: boolean;\n  isPinned: boolean;\n  isSelected: boolean;\n}\n\n/** @internal */\nexport const expandAndCollapseAnimationVariants = {\n  enter: {\n    height: 'auto',\n    opacity: 1,\n    translateY: 0,\n    transition: {\n      duration: AnimationsJS.ExpandCollapse.Duration.Base,\n      ease: expandCollapseEasing,\n    },\n  },\n  exit: {\n    height: 0,\n    opacity: 0,\n    translateY: -10,\n    transition: {\n      duration: AnimationsJS.ExpandCollapse.Duration.Base,\n      ease: expandCollapseEasing,\n    },\n  },\n};\n\n/**\n * @internal\n */\nconst SegmentsPresetText = ({\n  segment,\n  isFirst,\n}: {\n  segment: FilterSegment;\n  isFirst: boolean;\n}) => {\n  const andText = (\n    <Text textStyle=\"base\" className={styles.and}>\n      &nbsp;\n      <FormattedMessage\n        defaultMessage=\"and\"\n        description=\"Text that is separating between multiple Segments in one preset.\"\n        id=\"GeQL1Mbr4RzmlFJk\"\n      />\n      &nbsp;\n    </Text>\n  );\n\n  const connectingString = isFirst ? '' : andText;\n\n  return (\n    <Fragment key={segment.id}>\n      {connectingString}\n      <SegmentText segment={segment} />\n    </Fragment>\n  );\n};\n\nfunction usePinningTooltipText(\n  pinLimitReached: boolean,\n  isPinned: boolean,\n): string {\n  const intl = useIntl();\n\n  if (pinLimitReached && !isPinned) {\n    return intl.formatMessage({\n      defaultMessage: \"You can't pin more than 10 items.\",\n      id: 'Y/6wwuz1ueL+7V2j',\n      description: 'Tooltip text for pinning limit.',\n    });\n  }\n\n  if (!isPinned) {\n    return intl.formatMessage(\n      {\n        defaultMessage: 'Pin in {appName}',\n        id: 'RPdRdtDJumoOO3os',\n        description: 'Tooltip text for pin button.',\n      },\n      { appName: getAppName() },\n    );\n  }\n\n  return intl.formatMessage({\n    defaultMessage: 'Unpin',\n    id: 'uCbwlgMp2BNGzNro',\n    description: 'Text for the unpin button of a segment preset.',\n  });\n}\n\nfunction updateCachePinMutation(\n  old: UserSegmentsPresets,\n  id: string,\n  segments: FilterSegment[],\n): UserSegmentsPresets {\n  // We always want to add the newly pinned one at the top.\n  const pinnedPresets = old.pinnedPresets;\n  pinnedPresets.unshift({ id, segments });\n\n  return {\n    ...old,\n    pinnedPresets,\n  };\n}\n\nfunction updateCacheUnpinMutation(\n  old: UserSegmentsPresets,\n  id: string,\n): UserSegmentsPresets {\n  const pinnedPresets = old.pinnedPresets;\n  const pinnedPresetIndex = pinnedPresets.findIndex(\n    (preset) => preset.id === id,\n  );\n\n  if (pinnedPresetIndex === -1) {\n    return old;\n  }\n\n  pinnedPresets.splice(pinnedPresetIndex, 1);\n\n  return {\n    recentPresets: old.recentPresets,\n    pinnedPresets,\n  };\n}\n\n/**\n * @internal\n */\nconst PresetTooltipText = ({ segments }: { segments: FilterSegment[] }) => {\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      {segments.map((segment) => {\n        return (\n          <SegmentText\n            key={segment.id}\n            segment={segment}\n            variableClassName={textStyleCSS({\n              fontStyle: 'text',\n              textStyle: 'small',\n            })}\n          />\n        );\n      })}\n    </Flex>\n  );\n};\n\n/**\n * @internal\n */\nconst SegmentText = ({\n  segment,\n  variableClassName,\n}: {\n  segment: FilterSegment;\n  variableClassName?: string;\n}) => {\n  const { getSegment } = useSegmentsCache();\n  const intl = useIntl();\n  const { data } = useQuery(\n    {\n      queryKey: ['getSegment', segment.id],\n      queryFn: () => getSegment(segment.id),\n      notifyOnChangeProps: ['dataUpdatedAt'],\n    },\n    segmentsClient.queryClient,\n  );\n\n  let variables = '';\n  if (segment.variables && segment.variables.length > 0) {\n    variables = `: ${segment.variables[0].values\n      .map((variable) => getReadableValue(variable, intl))\n      .join(', ')}`;\n  }\n\n  if (variableClassName) {\n    return (\n      <span>\n        {data?.segment.name ?? segment.id}\n        <span className={variableClassName}>{variables}</span>\n      </span>\n    );\n  }\n\n  return `${data?.segment.name ?? segment.id}${variables}`;\n};\n\n/**\n * LoadingState-component for SegmentSelector Overlay\n * @internal\n */\nexport const SegmentsPreset = (props: SegmentsPresetProps) => {\n  const shouldReduceMotion = useReducedMotion();\n  const {\n    uiPreset,\n    id,\n    isPinned,\n    isSelected,\n    pinLimitReached,\n  }: SegmentsPresetProps = props;\n  const { segments } = uiPreset;\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  const { setUISegments } = useSegmentsUIContext();\n  const { overlayState } = useContext(UISegmentsDispatchContext);\n  const { setSegments } = useSegments();\n\n  const pin = useMutation(\n    {\n      mutationKey: ['pin-segment-preset', id],\n      mutationFn: pinSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCachePinMutation(prevState, id, segments),\n          [\n            'pin-segment-preset',\n            'unpin-segment-preset',\n            id,\n            'getSegmentsPresets',\n          ],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['pin-segment-preset', 'unpin-segment-preset', id],\n        ),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const unpin = useMutation(\n    {\n      mutationKey: ['unpin-segment-preset', id],\n      mutationFn: unpinSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCacheUnpinMutation(prevState, id),\n          [\n            'pin-segment-preset',\n            'unpin-segment-preset',\n            id,\n            'getSegmentsPresets',\n          ],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['pin-segment-preset', 'unpin-segment-preset', id],\n        ),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const applyPreset = useMutation(\n    {\n      mutationKey: ['apply-segment-preset', id],\n      mutationFn: () => {\n        // We changed the syntax of the values, formerly they could be a stringified array and now we flatten any arrays inside.\n        // Some of the presets still follow the old syntax, so we need to convert them here before applying.\n        const flattenedSegments = segments.map((segment) => {\n          if (segment.variables) {\n            const flattenedVariables = segment.variables.map((variable) => {\n              const values = flattenQueryResultToValues([], variable.values);\n\n              return {\n                ...variable,\n                values,\n              };\n            });\n\n            return { ...segment, variables: flattenedVariables };\n          }\n\n          return segment;\n        });\n\n        setUISegments(flattenedSegments, true);\n        return setSegments(flattenedSegments);\n      },\n      onSuccess: async () => {\n        const isValid = await areUiSegmentsValid(segments);\n        if (isValid) {\n          overlayState?.close();\n        }\n      },\n    },\n    segmentsClient.queryClient,\n  );\n\n  const color = isSelected ? 'primary' : 'neutral';\n\n  const pinningTooltipText = usePinningTooltipText(pinLimitReached, isPinned);\n  const icon = isPinned ? <PinOffIcon /> : <PinIcon />;\n  const pinButtonDataDtProperties = `state:${isPinned ? 'unpin' : 'pin'}`;\n\n  const onClick = () =>\n    isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);\n\n  const labelRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <motion.div\n      variants={shouldReduceMotion ? {} : expandAndCollapseAnimationVariants}\n      initial=\"exit\"\n      animate=\"enter\"\n      exit=\"exit\"\n      className={clsx({\n        [animationHelperStyles.isAnimating]: isAnimating,\n      })}\n      onAnimationStart={() => setIsAnimating(true)}\n      onAnimationComplete={() => setIsAnimating(false)}\n    >\n      <InputGroup\n        className={clsx([\n          styles.inputGroup,\n          { [styles.inputGroupSelected]: isSelected },\n        ])}\n      >\n        <Tooltip\n          placement=\"left\"\n          fallbackPlacements={['top', 'bottom', 'right']}\n          text={<PresetTooltipText segments={segments} />}\n          open={showTooltip}\n          onOpenChange={(isOpen) => {\n            const hasOverFlow =\n              (labelRef.current?.scrollWidth ?? 0) >\n              (labelRef.current?.clientWidth ?? 0);\n\n            setShowTooltip(isOpen && hasOverFlow);\n          }}\n          className={textStyleCSS({\n            fontStyle: 'text',\n            textStyle: 'small-emphasized',\n          })}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            color={color}\n            width=\"100%\"\n            textAlign=\"start\"\n            className={clsx(styles.presetButton, {\n              [styles.selectionMark]: isSelected,\n            })}\n            onClick={() => applyPreset.mutate()}\n          >\n            <Button.Label className={styles.buttonLabel} ref={labelRef}>\n              {segments.map((segment, index) => (\n                <SegmentsPresetText\n                  segment={segment}\n                  isFirst={index === 0}\n                  key={segment.id}\n                />\n              ))}\n            </Button.Label>\n          </Button>\n        </Tooltip>\n        <Tooltip\n          placement=\"right\"\n          text={pinningTooltipText}\n          className={textStyleCSS({\n            fontStyle: 'text',\n            textStyle: 'small-emphasized',\n          })}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            color={color}\n            className={styles.suffixButton}\n            onClick={onClick}\n            disabled={pinLimitReached && !isPinned}\n            aria-label={pinningTooltipText}\n            data-dt-name=\"PinUnpin\"\n            data-dt-properties={pinButtonDataDtProperties}\n          >\n            {icon}\n          </Button>\n        </Tooltip>\n      </InputGroup>\n    </motion.div>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMutation, useQuery } from '@tanstack/react-query';\nimport clsx from 'clsx';\nimport { motion, useReducedMotion } from 'framer-motion';\nimport { Fragment, useContext, useRef, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport AnimationsJS from '@dynatrace/strato-design-tokens/animations-js';\nimport { PinIcon, PinOffIcon } from '@dynatrace/strato-icons';\nimport { getAppName } from '@dynatrace-sdk/app-environment';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\nimport {\n  pinSegmentsPreset,\n  unpinSegmentsPreset,\n  type SegmentsPreset as SegmentsPresetType,\n  type UserSegmentsPresets,\n} from '@dynatrace-sdk/segments-presets';\n\nimport * as styles from './SegmentsPresets.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { expandCollapseEasing } from '../../../../core/utils/framer-motion-easings.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { textStyle as textStyleCSS } from '../../../../styles/textStyle.sty.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport {\n  handleFailedOptimisticMutation,\n  handleSettledOptimisticMutation,\n  runOptimisticMutation,\n} from '../../../helper/queryHelper.js';\nimport {\n  segmentsClient,\n  useSegmentsCache,\n} from '../../contexts/SegmentsCache/SegmentsCache.js';\nimport { useSegmentsUIContext } from '../../contexts/SegmentsUI/SegmentsUIContext.js';\nimport { UISegmentsDispatchContext } from '../../contexts/SegmentsUI/SegmentsUIDispatchContext.js';\nimport { areUiSegmentsValid } from '../../contexts/SegmentsUI/segmentValidationHelper.js';\nimport { useSegments } from '../../hooks/useSegments.js';\nimport { flattenQueryResultToValues, getReadableValue } from '../../utils.js';\nimport * as animationHelperStyles from '../Overlay.sty.js';\n\n/** @internal */\ninterface SegmentsPresetProps {\n  uiPreset: SegmentsPresetType;\n  id: string;\n  pinLimitReached: boolean;\n  isPinned: boolean;\n  isSelected: boolean;\n}\n\n/** @internal */\nexport const expandAndCollapseAnimationVariants = {\n  enter: {\n    height: 'auto',\n    opacity: 1,\n    translateY: 0,\n    transition: {\n      duration: AnimationsJS.ExpandCollapse.Duration.Base,\n      ease: expandCollapseEasing,\n    },\n  },\n  exit: {\n    height: 0,\n    opacity: 0,\n    translateY: -10,\n    transition: {\n      duration: AnimationsJS.ExpandCollapse.Duration.Base,\n      ease: expandCollapseEasing,\n    },\n  },\n};\n\n/**\n * @internal\n */\nconst SegmentsPresetText = ({\n  segment,\n  isFirst,\n}: {\n  segment: FilterSegment;\n  isFirst: boolean;\n}) => {\n  const andText = (\n    <Text textStyle=\"base\" className={styles.and}>\n      &nbsp;\n      <FormattedMessage\n        defaultMessage=\"and\"\n        description=\"Text that is separating between multiple Segments in one preset.\"\n        id=\"GeQL1Mbr4RzmlFJk\"\n      />\n      &nbsp;\n    </Text>\n  );\n\n  const connectingString = isFirst ? '' : andText;\n\n  return (\n    <Fragment key={segment.id}>\n      {connectingString}\n      <SegmentText segment={segment} />\n    </Fragment>\n  );\n};\n\nfunction usePinningTooltipText(\n  pinLimitReached: boolean,\n  isPinned: boolean,\n): string {\n  const intl = useIntl();\n\n  if (pinLimitReached && !isPinned) {\n    return intl.formatMessage({\n      defaultMessage: \"You can't pin more than 10 items.\",\n      id: 'Y/6wwuz1ueL+7V2j',\n      description: 'Tooltip text for pinning limit.',\n    });\n  }\n\n  if (!isPinned) {\n    return intl.formatMessage(\n      {\n        defaultMessage: 'Pin in {appName}',\n        id: 'RPdRdtDJumoOO3os',\n        description: 'Tooltip text for pin button.',\n      },\n      { appName: getAppName() },\n    );\n  }\n\n  return intl.formatMessage({\n    defaultMessage: 'Unpin',\n    id: 'uCbwlgMp2BNGzNro',\n    description: 'Text for the unpin button of a segment preset.',\n  });\n}\n\nfunction updateCachePinMutation(\n  old: UserSegmentsPresets,\n  id: string,\n  segments: FilterSegment[],\n): UserSegmentsPresets {\n  // We always want to add the newly pinned one at the top.\n  const pinnedPresets = old.pinnedPresets;\n  pinnedPresets.unshift({ id, segments });\n\n  return {\n    ...old,\n    pinnedPresets,\n  };\n}\n\nfunction updateCacheUnpinMutation(\n  old: UserSegmentsPresets,\n  id: string,\n): UserSegmentsPresets {\n  const pinnedPresets = old.pinnedPresets;\n  const pinnedPresetIndex = pinnedPresets.findIndex(\n    (preset) => preset.id === id,\n  );\n\n  if (pinnedPresetIndex === -1) {\n    return old;\n  }\n\n  pinnedPresets.splice(pinnedPresetIndex, 1);\n\n  return {\n    recentPresets: old.recentPresets,\n    pinnedPresets,\n  };\n}\n\n/**\n * @internal\n */\nconst PresetTooltipText = ({ segments }: { segments: FilterSegment[] }) => {\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      {segments.map((segment) => {\n        return (\n          <SegmentText\n            key={segment.id}\n            segment={segment}\n            variableClassName={textStyleCSS({\n              fontStyle: 'text',\n              textStyle: 'small',\n            })}\n          />\n        );\n      })}\n    </Flex>\n  );\n};\n\n/**\n * @internal\n */\nconst SegmentText = ({\n  segment,\n  variableClassName,\n}: {\n  segment: FilterSegment;\n  variableClassName?: string;\n}) => {\n  const { getSegment } = useSegmentsCache();\n  const intl = useIntl();\n  const { data } = useQuery(\n    {\n      queryKey: ['getSegment', segment.id],\n      queryFn: () => getSegment(segment.id),\n      notifyOnChangeProps: ['dataUpdatedAt'],\n    },\n    segmentsClient.queryClient,\n  );\n\n  let variables = '';\n  if (segment.variables && segment.variables.length > 0) {\n    variables = `: ${segment.variables[0].values\n      .map((variable) => getReadableValue(variable, intl))\n      .join(', ')}`;\n  }\n\n  if (variableClassName) {\n    return (\n      <span>\n        {data?.segment.name ?? segment.id}\n        <span className={variableClassName}>{variables}</span>\n      </span>\n    );\n  }\n\n  return `${data?.segment.name ?? segment.id}${variables}`;\n};\n\n/**\n * LoadingState-component for SegmentSelector Overlay\n * @internal\n */\nexport const SegmentsPreset = (props: SegmentsPresetProps) => {\n  const shouldReduceMotion = useReducedMotion();\n  const {\n    uiPreset,\n    id,\n    isPinned,\n    isSelected,\n    pinLimitReached,\n  }: SegmentsPresetProps = props;\n  const { segments } = uiPreset;\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  const { setUISegments } = useSegmentsUIContext();\n  const { overlayState } = useContext(UISegmentsDispatchContext);\n  const { setSegments } = useSegments();\n\n  const pin = useMutation(\n    {\n      mutationKey: ['pin-segment-preset', id],\n      mutationFn: pinSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCachePinMutation(prevState, id, segments),\n          [\n            'pin-segment-preset',\n            'unpin-segment-preset',\n            id,\n            'getSegmentsPresets',\n          ],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['pin-segment-preset', 'unpin-segment-preset', id],\n        ),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const unpin = useMutation(\n    {\n      mutationKey: ['unpin-segment-preset', id],\n      mutationFn: unpinSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCacheUnpinMutation(prevState, id),\n          [\n            'pin-segment-preset',\n            'unpin-segment-preset',\n            id,\n            'getSegmentsPresets',\n          ],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['pin-segment-preset', 'unpin-segment-preset', id],\n        ),\n    },\n    segmentsClient.queryClient,\n  );\n\n  const applyPreset = useMutation(\n    {\n      mutationKey: ['apply-segment-preset', id],\n      mutationFn: () => {\n        // We changed the syntax of the values, formerly they could be a stringified array and now we flatten any arrays inside.\n        // Some of the presets still follow the old syntax, so we need to convert them here before applying.\n        const flattenedSegments = segments.map((segment) => {\n          if (segment.variables) {\n            const flattenedVariables = segment.variables.map((variable) => {\n              const values = flattenQueryResultToValues([], variable.values);\n\n              return {\n                ...variable,\n                values,\n              };\n            });\n\n            return { ...segment, variables: flattenedVariables };\n          }\n\n          return segment;\n        });\n\n        setUISegments(flattenedSegments, true);\n        return setSegments(flattenedSegments);\n      },\n      onSuccess: async () => {\n        const isValid = await areUiSegmentsValid(segments);\n        if (isValid) {\n          overlayState?.close();\n        }\n      },\n    },\n    segmentsClient.queryClient,\n  );\n\n  const color = isSelected ? 'primary' : 'neutral';\n\n  const pinningTooltipText = usePinningTooltipText(pinLimitReached, isPinned);\n  const icon = isPinned ? <PinOffIcon /> : <PinIcon />;\n  const pinButtonDataDtProperties = `state:${isPinned ? 'unpin' : 'pin'}`;\n\n  const onClick = () =>\n    isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);\n\n  const labelRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  return (\n    <motion.div\n      variants={shouldReduceMotion ? {} : expandAndCollapseAnimationVariants}\n      initial=\"exit\"\n      animate=\"enter\"\n      exit=\"exit\"\n      className={clsx({\n        [animationHelperStyles.isAnimating]: isAnimating,\n      })}\n      onAnimationStart={() => setIsAnimating(true)}\n      onAnimationComplete={() => setIsAnimating(false)}\n    >\n      <InputGroup\n        className={clsx([\n          styles.inputGroup,\n          { [styles.inputGroupSelected]: isSelected },\n        ])}\n      >\n        <Tooltip\n          placement=\"left\"\n          fallbackPlacements={['top', 'bottom', 'right']}\n          text={<PresetTooltipText segments={segments} />}\n          open={showTooltip}\n          onOpenChange={(isOpen) => {\n            const hasOverFlow =\n              (labelRef.current?.scrollWidth ?? 0) >\n              (labelRef.current?.clientWidth ?? 0);\n\n            setShowTooltip(isOpen && hasOverFlow);\n          }}\n          className={textStyleCSS({\n            fontStyle: 'text',\n            textStyle: 'small-emphasized',\n          })}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            color={color}\n            width=\"100%\"\n            textAlign=\"start\"\n            className={clsx(styles.presetButton, {\n              [styles.selectionMark]: isSelected,\n            })}\n            onClick={() => applyPreset.mutate()}\n          >\n            <Button.Label className={styles.buttonLabel} ref={labelRef}>\n              {segments.map((segment, index) => (\n                <SegmentsPresetText\n                  segment={segment}\n                  isFirst={index === 0}\n                  key={segment.id}\n                />\n              ))}\n            </Button.Label>\n          </Button>\n        </Tooltip>\n        <Tooltip\n          placement=\"right\"\n          text={pinningTooltipText}\n          className={textStyleCSS({\n            fontStyle: 'text',\n            textStyle: 'small-emphasized',\n          })}\n          style={{ zIndex: Number(stackingContext.style.zIndex) + 1 }}\n        >\n          <Button\n            color={color}\n            className={styles.suffixButton}\n            onClick={onClick}\n            disabled={pinLimitReached && !isPinned}\n            aria-label={pinningTooltipText}\n            data-dt-children-name=\"PinUnpin\"\n            data-dt-properties={pinButtonDataDtProperties}\n          >\n            {icon}\n          </Button>\n        </Tooltip>\n      </InputGroup>\n    </motion.div>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css

@@ -1,27 +1,27 @@
-._1oehqvw3-3-8-0 {
+._1oehqvw3-3-10-0 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-8-0 {
+._1oehqvw4-3-10-0 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-8-0._1oehqvw5-3-8-0 {
-  color: var(--_1oehqvw2-3-8-0);
+._1oehqvw5-3-10-0._1oehqvw5-3-10-0 {
+  color: var(--_1oehqvw2-3-10-0);
 }
-._1oehqvw6-3-8-0 {
+._1oehqvw6-3-10-0 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-8-0._1oehqvw7-3-8-0 {
+._1oehqvw7-3-10-0._1oehqvw7-3-10-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw8-3-8-0::before {
+._1oehqvw8-3-10-0::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,50 +32,50 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-8-0 {
-  --_1oehqvw0-3-8-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-8-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-8-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-10-0 {
+  --_1oehqvw0-3-10-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-10-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-10-0: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1jgl8s50-3-8-0 ._1oehqvw9-3-8-0._1oehqvw9-3-8-0._1oehqvw9-3-8-0 {
+._1jgl8s50-3-10-0 ._1oehqvw9-3-10-0._1oehqvw9-3-10-0._1oehqvw9-3-10-0 {
   gap: 1px;
 }
-._1jgl8s50-3-8-0 ._1oehqvw9-3-8-0 {
-  --_1oehqvw0-3-8-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-10-0 ._1oehqvw9-3-10-0 {
+  --_1oehqvw0-3-10-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1oehqvwa-3-8-0 {
-  --_1oehqvw0-3-8-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-8-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-8-0: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-10-0 {
+  --_1oehqvw0-3-10-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-10-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-10-0: var(--dt-colors-text-primary-default, #464cce);
 }
-._1jgl8s50-3-8-0 ._1oehqvwa-3-8-0 {
-  --_1oehqvw0-3-8-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+._1jgl8s50-3-10-0 ._1oehqvwa-3-10-0 {
+  --_1oehqvw0-3-10-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._1oehqvwb-3-8-0:hover._1oehqvwb-3-8-0:hover, ._1oehqvwb-3-8-0:focus-visible._1oehqvwb-3-8-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-8-0);
+._1oehqvwb-3-10-0:hover._1oehqvwb-3-10-0:hover, ._1oehqvwb-3-10-0:focus-visible._1oehqvwb-3-10-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-10-0);
 }
-._1oehqvwc-3-8-0._1oehqvwc-3-8-0 {
+._1oehqvwc-3-10-0._1oehqvwc-3-10-0 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-8-0);
+  background-color: var(--_1oehqvw0-3-10-0);
 }
-._1oehqvwc-3-8-0:hover._1oehqvwc-3-8-0:hover, ._1oehqvwc-3-8-0:focus-visible._1oehqvwc-3-8-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-8-0);
+._1oehqvwc-3-10-0:hover._1oehqvwc-3-10-0:hover, ._1oehqvwc-3-10-0:focus-visible._1oehqvwc-3-10-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-10-0);
 }
-._1oehqvwc-3-8-0:disabled, ._1oehqvwc-3-8-0:disabled:hover._1oehqvwc-3-8-0:disabled:hover {
+._1oehqvwc-3-10-0:disabled, ._1oehqvwc-3-10-0:disabled:hover._1oehqvwc-3-10-0:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1jgl8s50-3-8-0 ._1oehqvwc-3-8-0._1oehqvwc-3-8-0._1oehqvwc-3-8-0 {
+._1jgl8s50-3-10-0 ._1oehqvwc-3-10-0._1oehqvwc-3-10-0._1oehqvwc-3-10-0 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._1oehqvw9-3-8-0:has(button:focus-visible) ._1oehqvwc-3-8-0, ._1oehqvw9-3-8-0:hover ._1oehqvwc-3-8-0 {
+._1oehqvw9-3-10-0:has(button:focus-visible) ._1oehqvwc-3-10-0, ._1oehqvw9-3-10-0:hover ._1oehqvwc-3-10-0 {
   opacity: 1;
 }
-._1oehqvw9-3-8-0:has(._1oehqvwc-3-8-0:focus-visible) ._1oehqvwb-3-8-0, ._1oehqvw9-3-8-0:hover ._1oehqvwb-3-8-0:not(:hover) {
-  background-color: var(--_1oehqvw0-3-8-0);
+._1oehqvw9-3-10-0:has(._1oehqvwc-3-10-0:focus-visible) ._1oehqvwb-3-10-0, ._1oehqvw9-3-10-0:hover ._1oehqvwb-3-10-0:not(:hover) {
+  background-color: var(--_1oehqvw0-3-10-0);
 }
-._1oehqvw9-3-8-0 button, ._1oehqvw9-3-8-0:hover button {
+._1oehqvw9-3-10-0 button, ._1oehqvw9-3-10-0:hover button {
   transition-timing-function: unset;
   transition-duration: 0s;
   transition: none;

package/esm/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js

@@ -1,15 +1,15 @@
 import "../../../../core/components/app-root/AppRoot.css";
 import "./SegmentsPresets.css";
-var and = "_1oehqvw5-3-8-0";
-var buttonLabel = "_1oehqvw6-3-8-0";
-var inputGroup = "_1oehqvw9-3-8-0";
-var inputGroupSelected = "_1oehqvwa-3-8-0";
-var list = "_1oehqvw3-3-8-0";
-var listItem = "_1oehqvw4-3-8-0";
-var presetButton = "_1oehqvwb-3-8-0";
-var sectionHeadline = "_1oehqvw7-3-8-0";
-var selectionMark = "_1oehqvw8-3-8-0";
-var suffixButton = "_1oehqvwc-3-8-0";
+var and = "_1oehqvw5-3-10-0";
+var buttonLabel = "_1oehqvw6-3-10-0";
+var inputGroup = "_1oehqvw9-3-10-0";
+var inputGroupSelected = "_1oehqvwa-3-10-0";
+var list = "_1oehqvw3-3-10-0";
+var listItem = "_1oehqvw4-3-10-0";
+var presetButton = "_1oehqvwb-3-10-0";
+var sectionHeadline = "_1oehqvw7-3-10-0";
+var selectionMark = "_1oehqvw8-3-10-0";
+var suffixButton = "_1oehqvwc-3-10-0";
 export {
   and,
   buttonLabel,