@dynatrace/strato-components 3.11.3 → 3.12.0

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, XmarkIcon } from '@dynatrace/strato-icons';\nimport { getAppName } from '@dynatrace-sdk/app-environment';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\nimport {\n  pinSegmentsPreset,\n  removeRecentSegmentsPreset,\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 { Divider } from '../../../../layouts/divider/Divider.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  type CachedSegment,\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 { useSegmentsValidation } from '../../hooks/useSegmentsValidation.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  /** Which section rendered this row - determines what \"Remove\" acts on, independent of `isPinned`. */\n  origin: 'recent' | 'pinned';\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 useActionTooltipText(\n  pinLimitReached: boolean,\n  isPinned: boolean,\n  isFaulty: boolean,\n): string {\n  const intl = useIntl();\n\n  if (isFaulty) {\n    return intl.formatMessage({\n      defaultMessage: 'Remove',\n      id: 'B/mrEkQ2k6RSHAdX',\n      description:\n        'Tooltip text for the remove button of a faulty segment preset.',\n    });\n  }\n\n  if (isPinned) {\n    return intl.formatMessage({\n      defaultMessage: 'Unpin',\n      id: 'uCbwlgMp2BNGzNro',\n      description: 'Text for the unpin button of a segment preset.',\n    });\n  }\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  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\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\nfunction updateCacheRemoveRecentMutation(\n  old: UserSegmentsPresets,\n  id: string,\n): UserSegmentsPresets {\n  return {\n    ...old,\n    recentPresets: old.recentPresets.filter((preset) => preset.id !== id),\n  };\n}\n\n/**\n * @internal\n */\nconst PresetTooltipText = ({\n  segments,\n  isFaulty,\n}: {\n  segments: FilterSegment[];\n  isFaulty: boolean;\n}) => {\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      {isFaulty && (\n        <>\n          <span>\n            <FormattedMessage\n              defaultMessage=\"One or more segments of this preset are invalid and can't be applied.\"\n              id=\"6cOIaWQY3mdZZITF\"\n              description=\"Tooltip text shown above the segment list for presets that contain invalid segments.\"\n            />\n          </span>\n          <Divider />\n        </>\n      )}\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      initialData: () =>\n        segmentsClient.queryClient\n          .getQueryData<Map<string, CachedSegment>>(['getAllSegments'])\n          ?.get(segment.id),\n      initialDataUpdatedAt: () =>\n        segmentsClient.queryClient.getQueryState(['getAllSegments'])\n          ?.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\nfunction getStateAndIcon(isPinned: boolean, isFaulty: boolean) {\n  if (isFaulty) {\n    return {\n      icon: <XmarkIcon />,\n      actionButtonDataDtProperties: 'state:remove',\n    };\n  }\n\n  if (isPinned) {\n    return {\n      icon: <PinOffIcon />,\n      actionButtonDataDtProperties: 'state:unpin',\n    };\n  }\n\n  return {\n    icon: <PinIcon />,\n    actionButtonDataDtProperties: 'state:pin',\n  };\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    origin,\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 removeRecent = useMutation(\n    {\n      mutationKey: ['remove-recent-segment-preset', id],\n      mutationFn: removeRecentSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCacheRemoveRecentMutation(prevState, id),\n          ['remove-recent-segment-preset', id, 'getSegmentsPresets'],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['remove-recent-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 { isValid, isPending: isValidationPending } =\n    useSegmentsValidation(segments);\n  const isFaulty = !isValid;\n  const color = isSelected && !isFaulty ? 'primary' : 'neutral';\n  const actionTooltipText = useActionTooltipText(\n    pinLimitReached,\n    isPinned,\n    isFaulty,\n  );\n\n  const { icon, actionButtonDataDtProperties } = getStateAndIcon(\n    isPinned,\n    isFaulty,\n  );\n\n  const onClick = () => {\n    if (isFaulty) {\n      return origin === 'pinned'\n        ? unpin.mutate(uiPreset.id)\n        : removeRecent.mutate(uiPreset.id);\n    }\n    return isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);\n  };\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 && !isFaulty },\n        ])}\n      >\n        <Tooltip\n          placement=\"left\"\n          fallbackPlacements={['top', 'bottom', 'right']}\n          text={<PresetTooltipText segments={segments} isFaulty={isFaulty} />}\n          open={showTooltip}\n          onOpenChange={(isOpen) => {\n            if (isFaulty) {\n              setShowTooltip(isOpen);\n              return;\n            }\n\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            disabled={isFaulty}\n            onClick={() => !isValidationPending && applyPreset.mutate()}\n            id={`preset-label-${id}`}\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={actionTooltipText}\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={\n              isValidationPending || (!isFaulty && pinLimitReached && !isPinned)\n            }\n            aria-label={actionTooltipText}\n            aria-describedby={`preset-label-${id}`}\n            data-dt-children-name=\"PinUnpin\"\n            data-dt-properties={actionButtonDataDtProperties}\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, XmarkIcon } from '@dynatrace/strato-icons';\nimport { getAppName } from '@dynatrace-sdk/app-environment';\nimport type { FilterSegment } from '@dynatrace-sdk/client-query';\nimport {\n  pinSegmentsPreset,\n  removeRecentSegmentsPreset,\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 { VisuallyHidden } from '../../../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { expandCollapseEasing } from '../../../../core/utils/framer-motion-easings.js';\nimport { Divider } from '../../../../layouts/divider/Divider.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  type CachedSegment,\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 { useSegmentsValidation } from '../../hooks/useSegmentsValidation.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  /** Which section rendered this row - determines what \"Remove\" acts on, independent of `isPinned`. */\n  origin: 'recent' | 'pinned';\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 useActionTooltipText(\n  pinLimitReached: boolean,\n  isPinned: boolean,\n  isFaulty: boolean,\n): string {\n  const intl = useIntl();\n\n  if (isFaulty) {\n    return intl.formatMessage({\n      defaultMessage: 'Remove',\n      id: 'B/mrEkQ2k6RSHAdX',\n      description:\n        'Tooltip text for the remove button of a faulty segment preset.',\n    });\n  }\n\n  if (isPinned) {\n    return intl.formatMessage({\n      defaultMessage: 'Unpin',\n      id: 'uCbwlgMp2BNGzNro',\n      description: 'Text for the unpin button of a segment preset.',\n    });\n  }\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  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\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\nfunction updateCacheRemoveRecentMutation(\n  old: UserSegmentsPresets,\n  id: string,\n): UserSegmentsPresets {\n  return {\n    ...old,\n    recentPresets: old.recentPresets.filter((preset) => preset.id !== id),\n  };\n}\n\n/**\n * @internal\n */\nconst PresetTooltipText = ({\n  segments,\n  isFaulty,\n}: {\n  segments: FilterSegment[];\n  isFaulty: boolean;\n}) => {\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      {isFaulty && (\n        <>\n          <span>\n            <FormattedMessage\n              defaultMessage=\"One or more segments of this preset are invalid and can't be applied.\"\n              id=\"6cOIaWQY3mdZZITF\"\n              description=\"Tooltip text shown above the segment list for presets that contain invalid segments.\"\n            />\n          </span>\n          <Divider />\n        </>\n      )}\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      initialData: () =>\n        segmentsClient.queryClient\n          .getQueryData<Map<string, CachedSegment>>(['getAllSegments'])\n          ?.get(segment.id),\n      initialDataUpdatedAt: () =>\n        segmentsClient.queryClient.getQueryState(['getAllSegments'])\n          ?.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\nfunction getStateAndIcon(isPinned: boolean, isFaulty: boolean) {\n  if (isFaulty) {\n    return {\n      icon: <XmarkIcon />,\n      actionButtonDataDtProperties: 'state:remove',\n    };\n  }\n\n  if (isPinned) {\n    return {\n      icon: <PinOffIcon />,\n      actionButtonDataDtProperties: 'state:unpin',\n    };\n  }\n\n  return {\n    icon: <PinIcon />,\n    actionButtonDataDtProperties: 'state:pin',\n  };\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    origin,\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 removeRecent = useMutation(\n    {\n      mutationKey: ['remove-recent-segment-preset', id],\n      mutationFn: removeRecentSegmentsPreset,\n      onMutate: async () =>\n        runOptimisticMutation<UserSegmentsPresets>(\n          'getSegmentsPresets',\n          (prevState) => updateCacheRemoveRecentMutation(prevState, id),\n          ['remove-recent-segment-preset', id, 'getSegmentsPresets'],\n        ),\n      onError: (error, _, context) =>\n        handleFailedOptimisticMutation('getSegmentsPresets', error, context),\n      onSettled: () =>\n        handleSettledOptimisticMutation(\n          ['getSegmentsPresets'],\n          ['remove-recent-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 { isValid, isPending: isValidationPending } =\n    useSegmentsValidation(segments);\n  const isFaulty = !isValid;\n  const color = isSelected && !isFaulty ? 'primary' : 'neutral';\n  const actionTooltipText = useActionTooltipText(\n    pinLimitReached,\n    isPinned,\n    isFaulty,\n  );\n\n  const { icon, actionButtonDataDtProperties } = getStateAndIcon(\n    isPinned,\n    isFaulty,\n  );\n\n  const onClick = () => {\n    if (isFaulty) {\n      return origin === 'pinned'\n        ? unpin.mutate(uiPreset.id)\n        : removeRecent.mutate(uiPreset.id);\n    }\n    return isPinned ? unpin.mutate(uiPreset.id) : pin.mutate(segments);\n  };\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 && !isFaulty },\n        ])}\n      >\n        <Tooltip\n          placement=\"left\"\n          fallbackPlacements={['top', 'bottom', 'right']}\n          text={<PresetTooltipText segments={segments} isFaulty={isFaulty} />}\n          open={showTooltip}\n          onOpenChange={(isOpen) => {\n            if (isFaulty) {\n              setShowTooltip(isOpen);\n              return;\n            }\n\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            disabled={isFaulty}\n            onClick={() => !isValidationPending && applyPreset.mutate()}\n            id={`preset-label-${id}`}\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={actionTooltipText}\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={\n              isValidationPending || (!isFaulty && pinLimitReached && !isPinned)\n            }\n            aria-labelledby={`action-label-${id} preset-label-${id}`}\n            data-dt-children-name=\"PinUnpin\"\n            data-dt-properties={actionButtonDataDtProperties}\n          >\n            <Button.Suffix>\n              {icon}\n              <VisuallyHidden>\n                <span id={`action-label-${id}`}>{actionTooltipText}</span>\n              </VisuallyHidden>\n            </Button.Suffix>\n          </Button>\n        </Tooltip>\n      </InputGroup>\n    </motion.div>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["Fragment", "isValid"]
 }

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

@@ -1,27 +1,27 @@
-._1oehqvw3-3-11-3 {
+._1oehqvw3-3-12-0 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-11-3 {
+._1oehqvw4-3-12-0 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-11-3._1oehqvw5-3-11-3 {
-  color: var(--_1oehqvw2-3-11-3);
+._1oehqvw5-3-12-0._1oehqvw5-3-12-0 {
+  color: var(--_1oehqvw2-3-12-0);
 }
-._1oehqvw6-3-11-3 {
+._1oehqvw6-3-12-0 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-11-3._1oehqvw7-3-11-3 {
+._1oehqvw7-3-12-0._1oehqvw7-3-12-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-11-3::before {
+._1oehqvw8-3-12-0::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,54 +32,54 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-11-3 {
-  --_1oehqvw0-3-11-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-11-3: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-11-3: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-12-0 {
+  --_1oehqvw0-3-12-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-12-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-12-0: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1jgl8s50-3-11-3 ._1oehqvw9-3-11-3._1oehqvw9-3-11-3._1oehqvw9-3-11-3 {
+._1jgl8s50-3-12-0 ._1oehqvw9-3-12-0._1oehqvw9-3-12-0._1oehqvw9-3-12-0 {
   gap: 1px;
 }
-._1jgl8s50-3-11-3 ._1oehqvw9-3-11-3 {
-  --_1oehqvw0-3-11-3: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-12-0 ._1oehqvw9-3-12-0 {
+  --_1oehqvw0-3-12-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1oehqvwa-3-11-3 {
-  --_1oehqvw0-3-11-3: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-11-3: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-11-3: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-12-0 {
+  --_1oehqvw0-3-12-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-12-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-12-0: var(--dt-colors-text-primary-default, #464cce);
 }
-._1jgl8s50-3-11-3 ._1oehqvwa-3-11-3 {
-  --_1oehqvw0-3-11-3: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+._1jgl8s50-3-12-0 ._1oehqvwa-3-12-0 {
+  --_1oehqvw0-3-12-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._1oehqvwb-3-11-3:hover._1oehqvwb-3-11-3:hover, ._1oehqvwb-3-11-3:focus-visible._1oehqvwb-3-11-3:focus-visible {
-  background-color: var(--_1oehqvw1-3-11-3);
+._1oehqvwb-3-12-0:hover._1oehqvwb-3-12-0:hover, ._1oehqvwb-3-12-0:focus-visible._1oehqvwb-3-12-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-12-0);
 }
-._1oehqvwb-3-11-3:disabled:hover._1oehqvwb-3-11-3:disabled:hover {
-  background-color: var(--_1oehqvw0-3-11-3);
+._1oehqvwb-3-12-0:disabled:hover._1oehqvwb-3-12-0:disabled:hover {
+  background-color: var(--_1oehqvw0-3-12-0);
   cursor: not-allowed;
 }
-._1oehqvwc-3-11-3._1oehqvwc-3-11-3 {
+._1oehqvwc-3-12-0._1oehqvwc-3-12-0 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-11-3);
+  background-color: var(--_1oehqvw0-3-12-0);
 }
-._1oehqvwc-3-11-3:hover._1oehqvwc-3-11-3:hover, ._1oehqvwc-3-11-3:focus-visible._1oehqvwc-3-11-3:focus-visible {
-  background-color: var(--_1oehqvw1-3-11-3);
+._1oehqvwc-3-12-0:hover._1oehqvwc-3-12-0:hover, ._1oehqvwc-3-12-0:focus-visible._1oehqvwc-3-12-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-12-0);
 }
-._1oehqvwc-3-11-3:disabled, ._1oehqvwc-3-11-3:disabled:hover._1oehqvwc-3-11-3:disabled:hover {
+._1oehqvwc-3-12-0:disabled, ._1oehqvwc-3-12-0:disabled:hover._1oehqvwc-3-12-0:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1jgl8s50-3-11-3 ._1oehqvwc-3-11-3._1oehqvwc-3-11-3._1oehqvwc-3-11-3 {
+._1jgl8s50-3-12-0 ._1oehqvwc-3-12-0._1oehqvwc-3-12-0._1oehqvwc-3-12-0 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._1oehqvw9-3-11-3:has(button:focus-visible) ._1oehqvwc-3-11-3, ._1oehqvw9-3-11-3:hover ._1oehqvwc-3-11-3 {
+._1oehqvw9-3-12-0:has(button:focus-visible) ._1oehqvwc-3-12-0, ._1oehqvw9-3-12-0:hover ._1oehqvwc-3-12-0 {
   opacity: 1;
 }
-._1oehqvw9-3-11-3:has(._1oehqvwc-3-11-3:focus-visible) ._1oehqvwb-3-11-3, ._1oehqvw9-3-11-3:hover ._1oehqvwb-3-11-3:not(:hover) {
-  background-color: var(--_1oehqvw0-3-11-3);
+._1oehqvw9-3-12-0:has(._1oehqvwc-3-12-0:focus-visible) ._1oehqvwb-3-12-0, ._1oehqvw9-3-12-0:hover ._1oehqvwb-3-12-0:not(:hover) {
+  background-color: var(--_1oehqvw0-3-12-0);
 }
-._1oehqvw9-3-11-3 button, ._1oehqvw9-3-11-3:hover button {
+._1oehqvw9-3-12-0 button, ._1oehqvw9-3-12-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-11-3";
-var buttonLabel = "_1oehqvw6-3-11-3";
-var inputGroup = "_1oehqvw9-3-11-3";
-var inputGroupSelected = "_1oehqvwa-3-11-3";
-var list = "_1oehqvw3-3-11-3";
-var listItem = "_1oehqvw4-3-11-3";
-var presetButton = "_1oehqvwb-3-11-3";
-var sectionHeadline = "_1oehqvw7-3-11-3";
-var selectionMark = "_1oehqvw8-3-11-3";
-var suffixButton = "_1oehqvwc-3-11-3";
+var and = "_1oehqvw5-3-12-0";
+var buttonLabel = "_1oehqvw6-3-12-0";
+var inputGroup = "_1oehqvw9-3-12-0";
+var inputGroupSelected = "_1oehqvwa-3-12-0";
+var list = "_1oehqvw3-3-12-0";
+var listItem = "_1oehqvw4-3-12-0";
+var presetButton = "_1oehqvwb-3-12-0";
+var sectionHeadline = "_1oehqvw7-3-12-0";
+var selectionMark = "_1oehqvw8-3-12-0";
+var suffixButton = "_1oehqvwc-3-12-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-11-3';\nexport var buttonLabel = '_1oehqvw6-3-11-3';\nexport var inputGroup = '_1oehqvw9-3-11-3';\nexport var inputGroupSelected = '_1oehqvwa-3-11-3';\nexport var list = '_1oehqvw3-3-11-3';\nexport var listItem = '_1oehqvw4-3-11-3';\nexport var presetButton = '_1oehqvwb-3-11-3';\nexport var sectionHeadline = '_1oehqvw7-3-11-3';\nexport var selectionMark = '_1oehqvw8-3-11-3';\nexport var suffixButton = '_1oehqvwc-3-11-3';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport './SegmentsPresets.css';\nexport var and = '_1oehqvw5-3-12-0';\nexport var buttonLabel = '_1oehqvw6-3-12-0';\nexport var inputGroup = '_1oehqvw9-3-12-0';\nexport var inputGroupSelected = '_1oehqvwa-3-12-0';\nexport var list = '_1oehqvw3-3-12-0';\nexport var listItem = '_1oehqvw4-3-12-0';\nexport var presetButton = '_1oehqvwb-3-12-0';\nexport var sectionHeadline = '_1oehqvw7-3-12-0';\nexport var selectionMark = '_1oehqvw8-3-12-0';\nexport var suffixButton = '_1oehqvwc-3-12-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-11-3 {
+._1fuxi5m0-3-12-0 {
   grid-area: segment;
 }
-._1jgl8s50-3-11-3 ._1fuxi5m0-3-11-3 {
+._1jgl8s50-3-12-0 ._1fuxi5m0-3-12-0 {
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-11-3 ._1fuxi5m0-3-11-3:hover, ._1jgl8s50-3-11-3 ._1fuxi5m0-3-11-3:active, ._1jgl8s50-3-11-3 ._1fuxi5m0-3-11-3:focus-within {
+._1jgl8s50-3-12-0 ._1fuxi5m0-3-12-0:hover, ._1jgl8s50-3-12-0 ._1fuxi5m0-3-12-0:active, ._1jgl8s50-3-12-0 ._1fuxi5m0-3-12-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m2-3-11-3._1fuxi5m2-3-11-3 {
+._1fuxi5m2-3-12-0._1fuxi5m2-3-12-0 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-11-3 {
+._1fuxi5m3-3-12-0 {
   grid-area: variables;
 }
-._1jgl8s50-3-11-3 ._1fuxi5m3-3-11-3 {
+._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-11-3 ._1fuxi5m3-3-11-3:hover, ._1jgl8s50-3-11-3 ._1fuxi5m3-3-11-3:active, ._1jgl8s50-3-11-3 ._1fuxi5m3-3-11-3:focus-within {
+._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0:hover, ._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0:active, ._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m4-3-11-3 {
+._1fuxi5m4-3-12-0 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m5-3-11-3 {
+._1fuxi5m5-3-12-0 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m5-3-11-3._1fuxi5m5-3-11-3 {
+._1fuxi5m5-3-12-0._1fuxi5m5-3-12-0 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1jgl8s50-3-11-3 ._1fuxi5m5-3-11-3 {
+._1jgl8s50-3-12-0 ._1fuxi5m5-3-12-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-11-3 ._1fuxi5m5-3-11-3:hover, ._1jgl8s50-3-11-3 ._1fuxi5m5-3-11-3:active, ._1jgl8s50-3-11-3 ._1fuxi5m5-3-11-3:focus-within {
+._1jgl8s50-3-12-0 ._1fuxi5m5-3-12-0:hover, ._1jgl8s50-3-12-0 ._1fuxi5m5-3-12-0:active, ._1jgl8s50-3-12-0 ._1fuxi5m5-3-12-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m6-3-11-3 {
+._1fuxi5m6-3-12-0 {
   gap: var(--dt-spacings-size-2, 2px);
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1jgl8s50-3-11-3 ._1fuxi5m6-3-11-3 {
+._1jgl8s50-3-12-0 ._1fuxi5m6-3-12-0 {
   gap: var(--dt-spacings-size-0, 0);
 }
-._1fuxi5m7-3-11-3 {
+._1fuxi5m7-3-12-0 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m8-3-11-3 {
+._1fuxi5m8-3-12-0 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m9-3-11-3 {
+._1fuxi5m9-3-12-0 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5ma-3-11-3 {
+._1fuxi5ma-3-12-0 {
   grid-template-areas: "segment segment";
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-11-3 {
+  ._1fuxi5m1-3-12-0 {
     border-bottom-left-radius: 0;
   }
-  ._1jgl8s50-3-11-3 ._1fuxi5m3-3-11-3 {
+  ._1jgl8s50-3-12-0 ._1fuxi5m3-3-12-0 {
     margin-left: 0;
     margin-top: -1px;
   }
-  ._1fuxi5m7-3-11-3 {
+  ._1fuxi5m7-3-12-0 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m4-3-11-3 {
+  ._1fuxi5m4-3-12-0 {
     border-bottom-left-radius: 0;
   }
 }

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

@@ -28,7 +28,8 @@ const SegmentSelect = forwardRef((props, forwardedRef) => {
     segment: cachedSegment,
     autoFocus,
     isPlaceholder,
-    id
+    id,
+    "aria-describedby": ariaDescribedBy
   } = props;
   const intl = useIntl();
   const segmentSelectRef = useRef(null);
@@ -58,6 +59,7 @@ const SegmentSelect = forwardRef((props, forwardedRef) => {
       required: !isPlaceholder,
       clearable: false,
       readOnly: readOnly || cachedSegment?.temporarilyApplied,
+      "aria-describedby": ariaDescribedBy,
       onOpenChange: (isOpen) => {
         if (isOpen) {
           return;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/segment-selector/parts/selectionBar/SegmentSelect.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext, useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Text } from '../../../../typography/text/Text.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 { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\n\ntype SegmentsSelectProps = {\n  id: string;\n  availableSegments: CachedSegment['segment'][];\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  segment?: CachedSegment | null;\n  overlayWidth: string;\n  triggerClassName?: string;\n  isPlaceholder?: boolean;\n};\n\nfunction getSafeSegmentName(\n  segment: CachedSegment['segment'] | null | undefined,\n  fallback: string,\n) {\n  return segment?.name && segment.name !== '' ? segment.name : fallback;\n}\n\n/**\n * SegmentsSelect component\n * @internal\n */\nexport const SegmentSelect = forwardRef<\n  FormControlWithOverlayRef<HTMLDivElement>,\n  SegmentsSelectProps\n>((props, forwardedRef) => {\n  const {\n    availableSegments,\n    readOnly,\n    triggerClassName,\n    overlayWidth,\n    segment: cachedSegment,\n    autoFocus,\n    isPlaceholder,\n    id,\n  } = props;\n  const intl = useIntl();\n\n  const segmentSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs([forwardedRef, segmentSelectRef]);\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { updateUISegment, removeUISegment } = useSegmentsUIContext();\n\n  const { getSegment } = useSegmentsCache();\n\n  const { uiSegments } = useContext(UISegmentsContext);\n\n  const refIsDefined = segmentSelectRef.current !== null;\n\n  useEffect(() => {\n    segmentsClient.hasAccessRights && segmentSelectRef.current?.validate();\n    // We only want to shift the focus initially if it has autofocus (typically first select on open).\n    // when the first selected one is cleared and replaced by the placeholder we want to focus the select, but not open it.\n    if (uiSegments.length === 1 || autoFocus) {\n      segmentSelectRef.current?.focus?.();\n      return;\n    }\n\n    // If a new placeholder is added it should be opened.\n    // The open also moves the focus to the hidden input which isn't available on first render.\n    if (isPlaceholder && !autoFocus) {\n      segmentSelectRef.current?.open();\n    }\n\n    // The hidden trigger ref (coming from the react select) is not defined after the first render and,\n    // therefore, we must manually check the existence and then only once trigger the focus.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [refIsDefined]);\n\n  return (\n    <Select\n      ref={mergedRef}\n      className={styles.segmentsSelectCSS}\n      value={id}\n      id={id}\n      required={!isPlaceholder}\n      clearable={false}\n      readOnly={readOnly || cachedSegment?.temporarilyApplied}\n      onOpenChange={(isOpen) => {\n        if (isOpen) {\n          return;\n        }\n\n        variableSelectRef.current?.open();\n      }}\n      onChange={(segmentUid) => {\n        if (segmentUid) {\n          getSegment(segmentUid)\n            .then((newSegment) => {\n              updateUISegment(\n                { id },\n                {\n                  ...newSegment.segment,\n                  variables: !newSegment.segment.variables ? undefined : [],\n                },\n              );\n            })\n            .catch((error) => {\n              if (isDev()) {\n                // eslint-disable-next-line no-console\n                console.log(\n                  `SegmentSelector: fetching the segment with id ${id} failed.`,\n                  error,\n                );\n              }\n              removeUISegment(id);\n            });\n        }\n      }}\n      data-dt-name=\"segment-select\"\n    >\n      <Select.Trigger\n        width=\"full\"\n        className={clsx(triggerClassName, {\n          [styles.segmentsSelectTriggerCSS]: cachedSegment?.segment?.variables,\n        })}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsTriggerPlaceholder,\n        )}\n      />\n      <Select.Filter />\n      <Select.Content showSelectedOptionsFirst width={overlayWidth}>\n        <Select.EmptyState>\n          {availableSegments.length === 0\n            ? intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyState,\n              )\n            : intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyStateSearch,\n              )}\n        </Select.EmptyState>\n\n        {/**\n         * The availableSegments removes the current selection to only show the other options.\n         * This would also clear the select value and therefore this one is additionally rendered.\n         */}\n        {((id && !isPlaceholder) || cachedSegment?.segment) && (\n          <Select.Option\n            value={id}\n            key={id}\n            textValue={getSafeSegmentName(cachedSegment?.segment, id)}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{getSafeSegmentName(cachedSegment?.segment, id)}</Text>\n          </Select.Option>\n        )}\n        {availableSegments.map((segmentOption) => (\n          <Select.Option\n            key={segmentOption.id}\n            value={segmentOption.id}\n            textValue={getSafeSegmentName(segmentOption, segmentOption.id)}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{getSafeSegmentName(segmentOption, segmentOption.id)}</Text>\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useContext, useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './SegmentSelect.sty.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { FormControlWithOverlayRef } from '../../../../forms/shared-types.js';\nimport { Text } from '../../../../typography/text/Text.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 { SEGMENTSELECTOR_MESSAGES } from '../../segmentMessages.js';\n\ntype SegmentsSelectProps = {\n  id: string;\n  availableSegments: CachedSegment['segment'][];\n  readOnly?: boolean;\n  autoFocus?: boolean;\n  segment?: CachedSegment | null;\n  overlayWidth: string;\n  triggerClassName?: string;\n  isPlaceholder?: boolean;\n  'aria-describedby'?: string;\n};\n\nfunction getSafeSegmentName(\n  segment: CachedSegment['segment'] | null | undefined,\n  fallback: string,\n) {\n  return segment?.name && segment.name !== '' ? segment.name : fallback;\n}\n\n/**\n * SegmentsSelect component\n * @internal\n */\nexport const SegmentSelect = forwardRef<\n  FormControlWithOverlayRef<HTMLDivElement>,\n  SegmentsSelectProps\n>((props, forwardedRef) => {\n  const {\n    availableSegments,\n    readOnly,\n    triggerClassName,\n    overlayWidth,\n    segment: cachedSegment,\n    autoFocus,\n    isPlaceholder,\n    id,\n    'aria-describedby': ariaDescribedBy,\n  } = props;\n  const intl = useIntl();\n\n  const segmentSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs([forwardedRef, segmentSelectRef]);\n  const variableSelectRef =\n    useRef<FormControlWithOverlayRef<HTMLDivElement>>(null);\n\n  const { updateUISegment, removeUISegment } = useSegmentsUIContext();\n\n  const { getSegment } = useSegmentsCache();\n\n  const { uiSegments } = useContext(UISegmentsContext);\n\n  const refIsDefined = segmentSelectRef.current !== null;\n\n  useEffect(() => {\n    segmentsClient.hasAccessRights && segmentSelectRef.current?.validate();\n    // We only want to shift the focus initially if it has autofocus (typically first select on open).\n    // when the first selected one is cleared and replaced by the placeholder we want to focus the select, but not open it.\n    if (uiSegments.length === 1 || autoFocus) {\n      segmentSelectRef.current?.focus?.();\n      return;\n    }\n\n    // If a new placeholder is added it should be opened.\n    // The open also moves the focus to the hidden input which isn't available on first render.\n    if (isPlaceholder && !autoFocus) {\n      segmentSelectRef.current?.open();\n    }\n\n    // The hidden trigger ref (coming from the react select) is not defined after the first render and,\n    // therefore, we must manually check the existence and then only once trigger the focus.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [refIsDefined]);\n\n  return (\n    <Select\n      ref={mergedRef}\n      className={styles.segmentsSelectCSS}\n      value={id}\n      id={id}\n      required={!isPlaceholder}\n      clearable={false}\n      readOnly={readOnly || cachedSegment?.temporarilyApplied}\n      aria-describedby={ariaDescribedBy}\n      onOpenChange={(isOpen) => {\n        if (isOpen) {\n          return;\n        }\n\n        variableSelectRef.current?.open();\n      }}\n      onChange={(segmentUid) => {\n        if (segmentUid) {\n          getSegment(segmentUid)\n            .then((newSegment) => {\n              updateUISegment(\n                { id },\n                {\n                  ...newSegment.segment,\n                  variables: !newSegment.segment.variables ? undefined : [],\n                },\n              );\n            })\n            .catch((error) => {\n              if (isDev()) {\n                // eslint-disable-next-line no-console\n                console.log(\n                  `SegmentSelector: fetching the segment with id ${id} failed.`,\n                  error,\n                );\n              }\n              removeUISegment(id);\n            });\n        }\n      }}\n      data-dt-name=\"segment-select\"\n    >\n      <Select.Trigger\n        width=\"full\"\n        className={clsx(triggerClassName, {\n          [styles.segmentsSelectTriggerCSS]: cachedSegment?.segment?.variables,\n        })}\n        placeholder={intl.formatMessage(\n          SEGMENTSELECTOR_MESSAGES.segmentsTriggerPlaceholder,\n        )}\n      />\n      <Select.Filter />\n      <Select.Content showSelectedOptionsFirst width={overlayWidth}>\n        <Select.EmptyState>\n          {availableSegments.length === 0\n            ? intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyState,\n              )\n            : intl.formatMessage(\n                SEGMENTSELECTOR_MESSAGES.segmentsSelectEmptyStateSearch,\n              )}\n        </Select.EmptyState>\n\n        {/**\n         * The availableSegments removes the current selection to only show the other options.\n         * This would also clear the select value and therefore this one is additionally rendered.\n         */}\n        {((id && !isPlaceholder) || cachedSegment?.segment) && (\n          <Select.Option\n            value={id}\n            key={id}\n            textValue={getSafeSegmentName(cachedSegment?.segment, id)}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{getSafeSegmentName(cachedSegment?.segment, id)}</Text>\n          </Select.Option>\n        )}\n        {availableSegments.map((segmentOption) => (\n          <Select.Option\n            key={segmentOption.id}\n            value={segmentOption.id}\n            textValue={getSafeSegmentName(segmentOption, segmentOption.id)}\n          >\n            {/** The option should wrap and not truncate, therefore, it is wrapped in a Text. */}\n            <Text>{getSafeSegmentName(segmentOption, segmentOption.id)}</Text>\n          </Select.Option>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

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-11-3";
-var noBorderRadiusRight = "_1fuxi5m2-3-11-3";
-var segmentsSelectCSS = "_1fuxi5m0-3-11-3";
-var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-11-3", variantClassNames: { layout: { full: "_1fuxi5m7-3-11-3", "full-readonly": "_1fuxi5m8-3-11-3", "no-variables": "_1fuxi5m9-3-11-3", "no-variables-readonly": "_1fuxi5ma-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var segmentsSelectTriggerCSS = "_1fuxi5m1-3-11-3";
-var variablesSelectCSS = "_1fuxi5m3-3-11-3";
-var variablesSelectTriggerCSS = "_1fuxi5m4-3-11-3";
+var clearButtonCSS = "_1fuxi5m5-3-12-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-12-0";
+var segmentsSelectCSS = "_1fuxi5m0-3-12-0";
+var segmentsSelectGridCSS = _7a468({ defaultClassName: "_1fuxi5m6-3-12-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-12-0", "full-readonly": "_1fuxi5m8-3-12-0", "no-variables": "_1fuxi5m9-3-12-0", "no-variables-readonly": "_1fuxi5ma-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var segmentsSelectTriggerCSS = "_1fuxi5m1-3-12-0";
+var variablesSelectCSS = "_1fuxi5m3-3-12-0";
+var variablesSelectTriggerCSS = "_1fuxi5m4-3-12-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-11-3';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-11-3';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-11-3';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-11-3',variantClassNames:{layout:{full:'_1fuxi5m7-3-11-3','full-readonly':'_1fuxi5m8-3-11-3','no-variables':'_1fuxi5m9-3-11-3','no-variables-readonly':'_1fuxi5ma-3-11-3'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-11-3';\nexport var variablesSelectCSS = '_1fuxi5m3-3-11-3';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-11-3';"],
+  "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-12-0';\nexport var noBorderRadiusRight = '_1fuxi5m2-3-12-0';\nexport var segmentsSelectCSS = '_1fuxi5m0-3-12-0';\nexport var segmentsSelectGridCSS = _7a468({defaultClassName:'_1fuxi5m6-3-12-0',variantClassNames:{layout:{full:'_1fuxi5m7-3-12-0','full-readonly':'_1fuxi5m8-3-12-0','no-variables':'_1fuxi5m9-3-12-0','no-variables-readonly':'_1fuxi5ma-3-12-0'}},defaultVariants:{},compoundVariants:[]});\nexport var segmentsSelectTriggerCSS = '_1fuxi5m1-3-12-0';\nexport var variablesSelectCSS = '_1fuxi5m3-3-12-0';\nexport var variablesSelectTriggerCSS = '_1fuxi5m4-3-12-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,oBAAmB,mBAAkB,EAAC,QAAO,EAAC,MAAK,oBAAmB,iBAAgB,oBAAmB,gBAAe,oBAAmB,yBAAwB,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpR,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-11-3 {
+._1e5el1o0-3-12-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-11-3";
+var trigger = "_1e5el1o0-3-12-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-11-3';"],
+  "sourcesContent": ["import './SegmentSelectorTrigger.css';\nexport var trigger = '_1e5el1o0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

@@ -12,6 +12,7 @@ import {
 import { SegmentSelect } from "./SegmentSelect.js";
 import { ValueSelect } from "./ValueSelect.js";
 import { Button } from "../../../../buttons/button/Button.js";
+import { useId } from "../../../../core/hooks/useId.js";
 import { useOverlayStacking } from "../../../../core/hooks/useOverlayStacking.js";
 import { FormFieldMessageContextProvider } from "../../../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js";
 import { FormFieldMessages } from "../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js";
@@ -65,7 +66,10 @@ function getErrorMessageFromKey(errorKey) {
   }
   return null;
 }
-const ErrorMessages = ({ uiSegment }) => {
+const ErrorMessages = ({
+  uiSegment,
+  errorElementId
+}) => {
   const { data: errorKey } = useQuery(
     {
       queryKey: ["errorKey", uiSegment],
@@ -83,7 +87,7 @@ const ErrorMessages = ({ uiSegment }) => {
     return null;
   }
   const errorMessage = getErrorMessageFromKey(errorKey);
-  return /* @__PURE__ */ jsx(FormFieldMessages, { children: (messages) => {
+  return /* @__PURE__ */ jsx(FormFieldMessages, { id: errorElementId, children: (messages) => {
     if (hasArrayIdentifierError) {
       return /* @__PURE__ */ jsx(
         FormFieldMessages.Item,
@@ -168,6 +172,7 @@ const SelectionBar = (props) => {
   const showDeleteButton = clearable && !readOnly && segmentsClient.hasAccessRights !== false;
   const stackingContext = useOverlayStacking(void 0, "overlay");
   const hasVariables = !!segment?.segment?.variables;
+  const errorElementId = useId();
   const segmentSelectElement = /* @__PURE__ */ jsx(
     SegmentSelect,
     {
@@ -180,7 +185,8 @@ const SelectionBar = (props) => {
         [noBorderRadiusRight]: showDeleteButton || hasVariables
       }),
       isPlaceholder,
-      autoFocus
+      autoFocus,
+      "aria-describedby": state.showError ? errorElementId : void 0
     }
   );
   return /* @__PURE__ */ jsxs("li", { className: listStyles.segmentSelectorListItem, children: [
@@ -217,7 +223,8 @@ const SelectionBar = (props) => {
                   unavailableVariables: uiSegment.unavailableVariables,
                   triggerClassName: clsx({
                     [noBorderRadiusRight]: clearable && !readOnly
-                  })
+                  }),
+                  "aria-describedby": state.showError ? errorElementId : void 0
                 }
               ),
               showDeleteButton && /* @__PURE__ */ jsx(
@@ -242,7 +249,7 @@ const SelectionBar = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsx(ErrorMessages, { uiSegment })
+    /* @__PURE__ */ jsx(ErrorMessages, { uiSegment, errorElementId })
   ] });
 };
 export {