@dynatrace/strato-components 3.7.0 → 3.8.0

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 { 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 === 'needs-update') {\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 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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",
   "names": []
 }

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

@@ -1,12 +1,12 @@
 import "./Overlay.css";
-var divider = "_bqi6d90-3-7-0";
-var fieldSet = "_bqi6d97-3-7-0";
-var isAnimating = "_bqi6d94-3-7-0";
-var legend = "_bqi6d96-3-7-0";
-var link = "_bqi6d95-3-7-0";
-var menuLink = "_bqi6d91-3-7-0";
-var overlayDefaultWidth = "_bqi6d92-3-7-0";
-var scrollContainer = "_bqi6d93-3-7-0";
+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";
 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-7-0';\nexport var fieldSet = '_bqi6d97-3-7-0';\nexport var isAnimating = '_bqi6d94-3-7-0';\nexport var legend = '_bqi6d96-3-7-0';\nexport var link = '_bqi6d95-3-7-0';\nexport var menuLink = '_bqi6d91-3-7-0';\nexport var overlayDefaultWidth = '_bqi6d92-3-7-0';\nexport var scrollContainer = '_bqi6d93-3-7-0';"],
+  "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';"],
   "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/ShowMorePanel/ShowMorePanel.css

@@ -1,17 +1,17 @@
-._7mq3is0-3-7-0 {
+._7mq3is0-3-8-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-7-0 {
+._7mq3is1-3-8-0 {
   height: 0;
   opacity: 0;
 }
-._7mq3is2-3-7-0 {
+._7mq3is2-3-8-0 {
   height: auto;
   opacity: 1;
 }
-._7mq3is3-3-7-0 {
+._7mq3is3-3-8-0 {
   all: unset;
 }

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

@@ -1,8 +1,8 @@
 import "./ShowMorePanel.css";
-var expandableWrapper = "_7mq3is0-3-7-0";
-var expandableWrapperCollapsed = "_7mq3is1-3-7-0";
-var expandableWrapperExpanded = "_7mq3is2-3-7-0";
-var list = "_7mq3is3-3-7-0";
+var expandableWrapper = "_7mq3is0-3-8-0";
+var expandableWrapperCollapsed = "_7mq3is1-3-8-0";
+var expandableWrapperExpanded = "_7mq3is2-3-8-0";
+var list = "_7mq3is3-3-8-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-7-0';\nexport var expandableWrapperCollapsed = '_7mq3is1-3-7-0';\nexport var expandableWrapperExpanded = '_7mq3is2-3-7-0';\nexport var list = '_7mq3is3-3-7-0';"],
+  "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';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,6BAA6B;AACjC,IAAI,4BAA4B;AAChC,IAAI,OAAO;",
   "names": []
 }

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

@@ -1,27 +1,27 @@
-._1oehqvw3-3-7-0 {
+._1oehqvw3-3-8-0 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-7-0 {
+._1oehqvw4-3-8-0 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-7-0._1oehqvw5-3-7-0 {
-  color: var(--_1oehqvw2-3-7-0);
+._1oehqvw5-3-8-0._1oehqvw5-3-8-0 {
+  color: var(--_1oehqvw2-3-8-0);
 }
-._1oehqvw6-3-7-0 {
+._1oehqvw6-3-8-0 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-7-0._1oehqvw7-3-7-0 {
+._1oehqvw7-3-8-0._1oehqvw7-3-8-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-7-0::before {
+._1oehqvw8-3-8-0::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,50 +32,50 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-7-0 {
-  --_1oehqvw0-3-7-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-7-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-7-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+._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);
   grid-template-columns: 1fr max-content;
 }
-._1jgl8s50-3-7-0 ._1oehqvw9-3-7-0._1oehqvw9-3-7-0._1oehqvw9-3-7-0 {
+._1jgl8s50-3-8-0 ._1oehqvw9-3-8-0._1oehqvw9-3-8-0._1oehqvw9-3-8-0 {
   gap: 1px;
 }
-._1jgl8s50-3-7-0 ._1oehqvw9-3-7-0 {
-  --_1oehqvw0-3-7-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-8-0 ._1oehqvw9-3-8-0 {
+  --_1oehqvw0-3-8-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1oehqvwa-3-7-0 {
-  --_1oehqvw0-3-7-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-7-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-7-0: var(--dt-colors-text-primary-default, #464cce);
+._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);
 }
-._1jgl8s50-3-7-0 ._1oehqvwa-3-7-0 {
-  --_1oehqvw0-3-7-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+._1jgl8s50-3-8-0 ._1oehqvwa-3-8-0 {
+  --_1oehqvw0-3-8-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._1oehqvwb-3-7-0:hover._1oehqvwb-3-7-0:hover, ._1oehqvwb-3-7-0:focus-visible._1oehqvwb-3-7-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-7-0);
+._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);
 }
-._1oehqvwc-3-7-0._1oehqvwc-3-7-0 {
+._1oehqvwc-3-8-0._1oehqvwc-3-8-0 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-7-0);
+  background-color: var(--_1oehqvw0-3-8-0);
 }
-._1oehqvwc-3-7-0:hover._1oehqvwc-3-7-0:hover, ._1oehqvwc-3-7-0:focus-visible._1oehqvwc-3-7-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-7-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-7-0:disabled, ._1oehqvwc-3-7-0:disabled:hover._1oehqvwc-3-7-0:disabled:hover {
+._1oehqvwc-3-8-0:disabled, ._1oehqvwc-3-8-0:disabled:hover._1oehqvwc-3-8-0:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1jgl8s50-3-7-0 ._1oehqvwc-3-7-0._1oehqvwc-3-7-0._1oehqvwc-3-7-0 {
+._1jgl8s50-3-8-0 ._1oehqvwc-3-8-0._1oehqvwc-3-8-0._1oehqvwc-3-8-0 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._1oehqvw9-3-7-0:has(button:focus-visible) ._1oehqvwc-3-7-0, ._1oehqvw9-3-7-0:hover ._1oehqvwc-3-7-0 {
+._1oehqvw9-3-8-0:has(button:focus-visible) ._1oehqvwc-3-8-0, ._1oehqvw9-3-8-0:hover ._1oehqvwc-3-8-0 {
   opacity: 1;
 }
-._1oehqvw9-3-7-0:has(._1oehqvwc-3-7-0:focus-visible) ._1oehqvwb-3-7-0, ._1oehqvw9-3-7-0:hover ._1oehqvwb-3-7-0:not(:hover) {
-  background-color: var(--_1oehqvw0-3-7-0);
+._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-7-0 button, ._1oehqvw9-3-7-0:hover button {
+._1oehqvw9-3-8-0 button, ._1oehqvw9-3-8-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-7-0";
-var buttonLabel = "_1oehqvw6-3-7-0";
-var inputGroup = "_1oehqvw9-3-7-0";
-var inputGroupSelected = "_1oehqvwa-3-7-0";
-var list = "_1oehqvw3-3-7-0";
-var listItem = "_1oehqvw4-3-7-0";
-var presetButton = "_1oehqvwb-3-7-0";
-var sectionHeadline = "_1oehqvw7-3-7-0";
-var selectionMark = "_1oehqvw8-3-7-0";
-var suffixButton = "_1oehqvwc-3-7-0";
+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";
 export {
   and,
   buttonLabel,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-7-0';\nexport var buttonLabel = '_1oehqvw6-3-7-0';\nexport var inputGroup = '_1oehqvw9-3-7-0';\nexport var inputGroupSelected = '_1oehqvwa-3-7-0';\nexport var list = '_1oehqvw3-3-7-0';\nexport var listItem = '_1oehqvw4-3-7-0';\nexport var presetButton = '_1oehqvwb-3-7-0';\nexport var sectionHeadline = '_1oehqvw7-3-7-0';\nexport var selectionMark = '_1oehqvw8-3-7-0';\nexport var suffixButton = '_1oehqvwc-3-7-0';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-8-0';\nexport var buttonLabel = '_1oehqvw6-3-8-0';\nexport var inputGroup = '_1oehqvw9-3-8-0';\nexport var inputGroupSelected = '_1oehqvwa-3-8-0';\nexport var list = '_1oehqvw3-3-8-0';\nexport var listItem = '_1oehqvw4-3-8-0';\nexport var presetButton = '_1oehqvwb-3-8-0';\nexport var sectionHeadline = '_1oehqvw7-3-8-0';\nexport var selectionMark = '_1oehqvw8-3-8-0';\nexport var suffixButton = '_1oehqvwc-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,MAAM;AACV,IAAI,cAAc;AAClB,IAAI,aAAa;AACjB,IAAI,qBAAqB;AACzB,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;",
   "names": []
 }

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

@@ -1,83 +1,83 @@
-._1fuxi5m0-3-7-0 {
+._1fuxi5m0-3-8-0 {
   grid-area: segment;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m0-3-7-0 {
+._1jgl8s50-3-8-0 ._1fuxi5m0-3-8-0 {
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m0-3-7-0:hover, ._1jgl8s50-3-7-0 ._1fuxi5m0-3-7-0:active, ._1jgl8s50-3-7-0 ._1fuxi5m0-3-7-0:focus-within {
+._1jgl8s50-3-8-0 ._1fuxi5m0-3-8-0:hover, ._1jgl8s50-3-8-0 ._1fuxi5m0-3-8-0:active, ._1jgl8s50-3-8-0 ._1fuxi5m0-3-8-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m2-3-7-0._1fuxi5m2-3-7-0 {
+._1fuxi5m2-3-8-0._1fuxi5m2-3-8-0 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-7-0 {
+._1fuxi5m3-3-8-0 {
   grid-area: variables;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0 {
+._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0:hover, ._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0:active, ._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0:focus-within {
+._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0:hover, ._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0:active, ._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m4-3-7-0 {
+._1fuxi5m4-3-8-0 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m5-3-7-0 {
+._1fuxi5m5-3-8-0 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m5-3-7-0._1fuxi5m5-3-7-0 {
+._1fuxi5m5-3-8-0._1fuxi5m5-3-8-0 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m5-3-7-0 {
+._1jgl8s50-3-8-0 ._1fuxi5m5-3-8-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m5-3-7-0:hover, ._1jgl8s50-3-7-0 ._1fuxi5m5-3-7-0:active, ._1jgl8s50-3-7-0 ._1fuxi5m5-3-7-0:focus-within {
+._1jgl8s50-3-8-0 ._1fuxi5m5-3-8-0:hover, ._1jgl8s50-3-8-0 ._1fuxi5m5-3-8-0:active, ._1jgl8s50-3-8-0 ._1fuxi5m5-3-8-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m6-3-7-0 {
+._1fuxi5m6-3-8-0 {
   gap: var(--dt-spacings-size-2, 2px);
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1jgl8s50-3-7-0 ._1fuxi5m6-3-7-0 {
+._1jgl8s50-3-8-0 ._1fuxi5m6-3-8-0 {
   gap: var(--dt-spacings-size-0, 0);
 }
-._1fuxi5m7-3-7-0 {
+._1fuxi5m7-3-8-0 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m8-3-7-0 {
+._1fuxi5m8-3-8-0 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m9-3-7-0 {
+._1fuxi5m9-3-8-0 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5ma-3-7-0 {
+._1fuxi5ma-3-8-0 {
   grid-template-areas: "segment segment";
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-7-0 {
+  ._1fuxi5m1-3-8-0 {
     border-bottom-left-radius: 0;
   }
-  ._1jgl8s50-3-7-0 ._1fuxi5m3-3-7-0 {
+  ._1jgl8s50-3-8-0 ._1fuxi5m3-3-8-0 {
     margin-left: 0;
     margin-top: -1px;
   }
-  ._1fuxi5m7-3-7-0 {
+  ._1fuxi5m7-3-8-0 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m4-3-7-0 {
+  ._1fuxi5m4-3-8-0 {
     border-bottom-left-radius: 0;
   }
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -15,6 +15,9 @@ import { Button } from "../../../../buttons/button/Button.js";
 import { useOverlayStacking } from "../../../../core/hooks/useOverlayStacking.js";
 import { FormFieldMessages } from "../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js";
 import { useFormFieldMessagesContext } from "../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
+import {
+  StratoValidityStateKeys
+} from "../../../../forms/validation/types.js";
 import { Grid } from "../../../../layouts/grid/Grid.js";
 import { Tooltip } from "../../../../overlays/tooltip/Tooltip.js";
 import {
@@ -47,16 +50,16 @@ function getLayout(hasVariables, hasClearButton) {
   return "full";
 }
 function getErrorMessageFromKey(errorKey) {
-  switch (errorKey) {
-    case "unavailable":
-      return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;
-    case "needs-update":
-      return SEGMENTSELECTOR_MESSAGES.removedVariablesError;
-    case "needs-variables":
-      return SEGMENTSELECTOR_MESSAGES.valueMissingError;
-    default:
-      return null;
+  if (errorKey?.equals(StratoValidityStateKeys.unavailable)) {
+    return SEGMENTSELECTOR_MESSAGES.unavailableSegmentError;
+  }
+  if (errorKey?.equals(StratoValidityStateKeys.needsUpdate)) {
+    return SEGMENTSELECTOR_MESSAGES.removedVariablesError;
+  }
+  if (errorKey?.equals(StratoValidityStateKeys.missingVariables)) {
+    return SEGMENTSELECTOR_MESSAGES.valueMissingError;
   }
+  return null;
 }
 const ErrorMessages = ({ uiSegment }) => {
   const {
@@ -103,7 +106,7 @@ const ErrorMessages = ({ uiSegment }) => {
           variant: "error",
           children: /* @__PURE__ */ jsx(FormattedMessage, { ...errorMessage })
         },
-        errorKey
+        errorKey.value
       );
     }
     return messages.map((props) => {

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

@@ -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": []
 }