@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/forms/select/components/Control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/Control.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  type ReactNode,\n  type KeyboardEvent as ReactKeyboardEvent,\n  Children,\n  cloneElement,\n  useRef,\n} from 'react';\nimport type {\n  GroupBase,\n  ControlProps as ReactSelectControlProps,\n} from 'react-select';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { HiddenSelect } from './HiddenSelect.js';\nimport { _isValueContainerComponent } from './ValueContainer.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useFormControlState } from '../../../core/hooks/useFormControlState.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { OverlayStackingProvider } from '../../../core/providers/OverlayStackingProvider.js';\nimport { useFocusRing } from '../../../core/styles/useFocusRing.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { InternalBaseItem as BaseItem } from '../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\n\n//#region Typings\ntype ControlProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectControlProps<OptionValue, isMulti, Group>;\n//#endregion Typings\n\n/** Iterates over child nodes to extract the value container. */\nfunction getSelectValueContainer<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(children: ReactNode) {\n  const childrenArray = Children.toArray(children);\n\n  for (const child of childrenArray) {\n    if (_isValueContainerComponent<OptionValue, isMulti, Group>(child)) {\n      return child;\n    }\n  }\n\n  // Assertion to control the return type, we should always get a valueContainer.\n  throw new Error('Assertion to make sure the container exists.');\n}\n\nexport function Control<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<ControlProps<OptionValue, isMulti, Group>>) {\n  const { children, isDisabled, innerRef, innerProps, selectProps } = props;\n  const ariaLabelledBy = selectProps['aria-labelledby'];\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    readOnly,\n    ariaDisabled,\n    ...remainingProps\n  } = selectProps.componentProps.trigger ?? {};\n  const rootRef = useMergeRefs<HTMLElement | null>([\n    innerRef,\n    selectProps.setTriggerRef,\n  ]);\n\n  const valueContainer = getSelectValueContainer(children);\n  const baseId = useId();\n  const triggerId = `strato-select-trigger${baseId}`;\n  const customTriggerId = selectProps.customTrigger?.props?.id;\n\n  const { state } = useFormFieldMessagesContext();\n  /** Please remove with removal of control state. */\n  const [hasFormControlError, hint] = useFormControlState(\n    selectProps.controlState,\n  );\n\n  const showError = selectProps.controlState\n    ? hasFormControlError\n    : state.showError;\n\n  const hiddenReactSelectInput = Array.isArray(valueContainer.props.children)\n    ? valueContainer.props.children[1]\n    : null;\n  const id = selectProps['selectInputId'];\n\n  const hiddenInput = useMemo(\n    () =>\n      cloneElement(hiddenReactSelectInput, {\n        ...hiddenReactSelectInput.props,\n        key: 'hidden-react-select-input',\n        id,\n        autoComplete: 'off',\n        'aria-invalid': showError,\n        'aria-labelledby': ariaLabelledBy ?? customTriggerId ?? triggerId,\n        'aria-label': selectProps['aria-label'],\n        'aria-describedby': selectProps['aria-describedby'],\n        'aria-details': selectProps['aria-details'],\n      }),\n    [\n      hiddenReactSelectInput,\n      id,\n      showError,\n      ariaLabelledBy,\n      customTriggerId,\n      triggerId,\n      selectProps,\n    ],\n  );\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: showError ? 'critical' : 'neutral',\n    focusWithin: true,\n    disabled: isDisabled,\n  });\n\n  const { dispatch } = useSelectMenuContext();\n  const handledByTouchRef = useRef(false);\n\n  const interactionProps = useMemo(() => {\n    return {\n      onTouchEnd: () => {\n        // On mobile, touchend fires before the emulated click. We dispatch\n        // SELECTFOCUS to toggle the menu, then focus the filter input on the\n        // next animation frame.\n        handledByTouchRef.current = true;\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n        requestAnimationFrame(() => {\n          selectProps.filterRef?.current?.inputRef?.focus({\n            preventScroll: true,\n          });\n        });\n      },\n      onClick: () => {\n        // Skip the emulated click that follows a touchend on mobile.\n        if (handledByTouchRef.current) {\n          handledByTouchRef.current = false;\n          return;\n        }\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n      },\n\n      onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {\n        if (\n          (event.key === 'Enter' || event.key === ' ') &&\n          !selectProps.isMulti\n        ) {\n          dispatch({\n            type: SelectActions.CLOSE,\n          });\n        }\n      },\n    };\n  }, [dispatch, selectProps.isMulti]);\n\n  const customTrigger = useMemo(() => {\n    if (selectProps.customTrigger) {\n      /** React Select dummyInput is applied in the ValueContainers children in order to\n       * handle / react to the inputs correctly. This one needs to be passed through in order for the\n       * trigger to work correctly.\n       */\n\n      return cloneElement(\n        selectProps.customTrigger,\n        {\n          key: 'custom-trigger',\n          ref: rootRef,\n          id: triggerId,\n          ..._mergeProps(\n            selectProps.customTrigger.props,\n            innerProps,\n            ...(isDisabled ? [] : [interactionProps]),\n          ),\n        },\n        [selectProps.customTrigger.props?.children, hiddenInput],\n      );\n    }\n  }, [\n    hiddenInput,\n    innerProps,\n    interactionProps,\n    rootRef,\n    selectProps.customTrigger,\n    triggerId,\n  ]);\n\n  if (customTrigger) {\n    return <OverlayStackingProvider>{customTrigger}</OverlayStackingProvider>;\n  }\n\n  return (\n    <Flex padding={0} flexDirection=\"column\" gap={4}>\n      <OverlayStackingProvider>\n        <Button\n          ref={rootRef}\n          id={triggerId}\n          textAlign=\"start\"\n          data-testid={dataTestId}\n          disabled={isDisabled}\n          aria-disabled={ariaDisabled}\n          width={selectProps.triggerWidth}\n          {...innerProps}\n          variant=\"emphasized\"\n          {...(isDisabled ? undefined : interactionProps)}\n          color={showError ? 'critical' : 'neutral'}\n          className={clsx(\n            'strato-components-select-control-trigger',\n            styles.selectTrigger({\n              fullWidth:\n                selectProps.triggerWidth === 'full' ||\n                selectProps.triggerWidth === '100%',\n              showError,\n              readOnly,\n            }),\n            focusClassName,\n            consumerClassName,\n          )}\n          style={consumerStyle}\n          as=\"div\"\n          {...focusProps}\n          {...remainingProps}\n        >\n          {selectProps.prefix && (\n            <Button.Prefix\n              data-testid={selectProps.prefix.props['data-testid']}\n              className={selectProps.prefix.props.className}\n              style={selectProps.prefix.props.style}\n            >\n              {selectProps.prefix.props.children}\n            </Button.Prefix>\n          )}\n          <Button.Label>\n            {hiddenInput}\n            {valueContainer}\n          </Button.Label>\n          <Button.Suffix>\n            <div\n              className={clsx(\n                styles.selectTriggerIconWrapper({\n                  isOverlayOpen: selectProps.menuIsOpen,\n                  readOnly,\n                }),\n              )}\n            >\n              <ChevronDownSmallIcon />\n            </div>\n          </Button.Suffix>\n        </Button>\n      </OverlayStackingProvider>\n      <HiddenSelect<OptionValue>\n        ref={selectProps.hiddenSelectRef}\n        required={selectProps.isRequired}\n        selectedValues={selectProps.value}\n        name={selectProps.hiddenSelectName}\n        disabled={isDisabled || readOnly}\n        controlState={selectProps.controlState}\n      />\n      {hint && (\n        <BaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={isDisabled || ariaDisabled}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  type ReactNode,\n  type KeyboardEvent as ReactKeyboardEvent,\n  Children,\n  cloneElement,\n  useRef,\n} from 'react';\nimport type {\n  GroupBase,\n  ControlProps as ReactSelectControlProps,\n} from 'react-select';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { HiddenSelect } from './HiddenSelect.js';\nimport { _isValueContainerComponent } from './ValueContainer.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useFormControlState } from '../../../core/hooks/useFormControlState.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { OverlayStackingProvider } from '../../../core/providers/OverlayStackingProvider.js';\nimport { useFocusRing } from '../../../core/styles/useFocusRing.js';\nimport { isVisualRefreshEnabled } from '../../../core/utils/is-visual-refresh-enabled.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { InternalBaseItem as BaseItem } from '../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\n\n//#region Typings\ntype ControlProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectControlProps<OptionValue, isMulti, Group>;\n//#endregion Typings\n\n/** Iterates over child nodes to extract the value container. */\nfunction getSelectValueContainer<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(children: ReactNode) {\n  const childrenArray = Children.toArray(children);\n\n  for (const child of childrenArray) {\n    if (_isValueContainerComponent<OptionValue, isMulti, Group>(child)) {\n      return child;\n    }\n  }\n\n  // Assertion to control the return type, we should always get a valueContainer.\n  throw new Error('Assertion to make sure the container exists.');\n}\n\nexport function Control<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<ControlProps<OptionValue, isMulti, Group>>) {\n  const { children, isDisabled, innerRef, innerProps, selectProps } = props;\n  const ariaLabelledBy = selectProps['aria-labelledby'];\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    readOnly,\n    ariaDisabled,\n    ...remainingProps\n  } = selectProps.componentProps.trigger ?? {};\n  const rootRef = useMergeRefs<HTMLElement | null>([\n    innerRef,\n    selectProps.setTriggerRef,\n  ]);\n\n  const valueContainer = getSelectValueContainer(children);\n  const baseId = useId();\n  const triggerId = `strato-select-trigger${baseId}`;\n  const customTriggerId = selectProps.customTrigger?.props?.id;\n\n  const { state } = useFormFieldMessagesContext();\n  /** Please remove with removal of control state. */\n  const [hasFormControlError, hint] = useFormControlState(\n    selectProps.controlState,\n  );\n\n  const showError = selectProps.controlState\n    ? hasFormControlError\n    : state.showError;\n\n  // with the visual refresh enabled, a disabled select should not receive critical coloring on error\n  const isCritical = isVisualRefreshEnabled()\n    ? showError && !isDisabled\n    : showError;\n\n  const hiddenReactSelectInput = Array.isArray(valueContainer.props.children)\n    ? valueContainer.props.children[1]\n    : null;\n  const id = selectProps['selectInputId'];\n\n  const hiddenInput = useMemo(\n    () =>\n      cloneElement(hiddenReactSelectInput, {\n        ...hiddenReactSelectInput.props,\n        key: 'hidden-react-select-input',\n        id,\n        autoComplete: 'off',\n        'aria-invalid': showError,\n        'aria-labelledby': ariaLabelledBy ?? customTriggerId ?? triggerId,\n        'aria-label': selectProps['aria-label'],\n        'aria-describedby': selectProps['aria-describedby'],\n        'aria-details': selectProps['aria-details'],\n      }),\n    [\n      hiddenReactSelectInput,\n      id,\n      showError,\n      ariaLabelledBy,\n      customTriggerId,\n      triggerId,\n      selectProps,\n    ],\n  );\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: showError ? 'critical' : 'neutral',\n    focusWithin: true,\n    disabled: isDisabled,\n  });\n\n  const { dispatch } = useSelectMenuContext();\n  const handledByTouchRef = useRef(false);\n\n  const interactionProps = useMemo(() => {\n    return {\n      onTouchEnd: () => {\n        // On mobile, touchend fires before the emulated click. We dispatch\n        // SELECTFOCUS to toggle the menu, then focus the filter input on the\n        // next animation frame.\n        handledByTouchRef.current = true;\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n        requestAnimationFrame(() => {\n          selectProps.filterRef?.current?.inputRef?.focus({\n            preventScroll: true,\n          });\n        });\n      },\n      onClick: () => {\n        // Skip the emulated click that follows a touchend on mobile.\n        if (handledByTouchRef.current) {\n          handledByTouchRef.current = false;\n          return;\n        }\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n      },\n\n      onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {\n        if (\n          (event.key === 'Enter' || event.key === ' ') &&\n          !selectProps.isMulti\n        ) {\n          dispatch({\n            type: SelectActions.CLOSE,\n          });\n        }\n      },\n    };\n  }, [dispatch, selectProps.isMulti]);\n\n  const customTrigger = useMemo(() => {\n    if (selectProps.customTrigger) {\n      /** React Select dummyInput is applied in the ValueContainers children in order to\n       * handle / react to the inputs correctly. This one needs to be passed through in order for the\n       * trigger to work correctly.\n       */\n\n      return cloneElement(\n        selectProps.customTrigger,\n        {\n          key: 'custom-trigger',\n          ref: rootRef,\n          id: triggerId,\n          ..._mergeProps(\n            selectProps.customTrigger.props,\n            innerProps,\n            ...(isDisabled ? [] : [interactionProps]),\n          ),\n        },\n        [selectProps.customTrigger.props?.children, hiddenInput],\n      );\n    }\n  }, [\n    hiddenInput,\n    innerProps,\n    interactionProps,\n    rootRef,\n    selectProps.customTrigger,\n    triggerId,\n  ]);\n\n  if (customTrigger) {\n    return <OverlayStackingProvider>{customTrigger}</OverlayStackingProvider>;\n  }\n\n  return (\n    <Flex padding={0} flexDirection=\"column\" gap={4}>\n      <OverlayStackingProvider>\n        <Button\n          ref={rootRef}\n          id={triggerId}\n          textAlign=\"start\"\n          data-testid={dataTestId}\n          disabled={isDisabled}\n          aria-disabled={ariaDisabled}\n          width={selectProps.triggerWidth}\n          {...innerProps}\n          variant=\"emphasized\"\n          {...(isDisabled ? undefined : interactionProps)}\n          color={isCritical ? 'critical' : 'neutral'}\n          className={clsx(\n            'strato-components-select-control-trigger',\n            styles.selectTrigger({\n              fullWidth:\n                selectProps.triggerWidth === 'full' ||\n                selectProps.triggerWidth === '100%',\n              showError,\n              readOnly,\n            }),\n            focusClassName,\n            consumerClassName,\n          )}\n          style={consumerStyle}\n          as=\"div\"\n          {...focusProps}\n          {...remainingProps}\n        >\n          {selectProps.prefix && (\n            <Button.Prefix\n              data-testid={selectProps.prefix.props['data-testid']}\n              className={selectProps.prefix.props.className}\n              style={selectProps.prefix.props.style}\n            >\n              {selectProps.prefix.props.children}\n            </Button.Prefix>\n          )}\n          <Button.Label>\n            {hiddenInput}\n            {valueContainer}\n          </Button.Label>\n          <Button.Suffix>\n            <div\n              className={clsx(\n                styles.selectTriggerIconWrapper({\n                  isOverlayOpen: selectProps.menuIsOpen,\n                  readOnly,\n                }),\n              )}\n            >\n              <ChevronDownSmallIcon />\n            </div>\n          </Button.Suffix>\n        </Button>\n      </OverlayStackingProvider>\n      <HiddenSelect<OptionValue>\n        ref={selectProps.hiddenSelectRef}\n        required={selectProps.isRequired}\n        selectedValues={selectProps.value}\n        name={selectProps.hiddenSelectName}\n        disabled={isDisabled || readOnly}\n        controlState={selectProps.controlState}\n      />\n      {hint && (\n        <BaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={isDisabled || ariaDisabled}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n}\n"],
+  "mappings": "AAiNW,cA4CD,YA5CC;AAjNX,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,4BAA4B;AAErC,SAAS,oBAAoB;AAC7B,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,mCAAmC;AAC5C,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,YAAY,YAAY;AAWxB,SAAS,wBAIP,UAAqB;AACrB,QAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,aAAW,SAAS,eAAe;AACjC,QAAI,2BAAwD,KAAK,GAAG;AAClE,aAAO;AAAA,IACT;AAAA,EACF;AAGA,QAAM,IAAI,MAAM,8CAA8C;AAChE;AAEO,SAAS,QAId,OAA4D;AAC5D,QAAM,EAAE,UAAU,YAAY,UAAU,YAAY,YAAY,IAAI;AACpE,QAAM,iBAAiB,YAAY,iBAAiB;AACpD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,YAAY,eAAe,WAAW,CAAC;AAC3C,QAAM,UAAU,aAAiC;AAAA,IAC/C;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AAED,QAAM,iBAAiB,wBAAwB,QAAQ;AACvD,QAAM,SAAS,MAAM;AACrB,QAAM,YAAY,wBAAwB,MAAM;AAChD,QAAM,kBAAkB,YAAY,eAAe,OAAO;AAE1D,QAAM,EAAE,MAAM,IAAI,4BAA4B;AAE9C,QAAM,CAAC,qBAAqB,IAAI,IAAI;AAAA,IAClC,YAAY;AAAA,EACd;AAEA,QAAM,YAAY,YAAY,eAC1B,sBACA,MAAM;AAGV,QAAM,aAAa,uBAAuB,IACtC,aAAa,CAAC,aACd;AAEJ,QAAM,yBAAyB,MAAM,QAAQ,eAAe,MAAM,QAAQ,IACtE,eAAe,MAAM,SAAS,CAAC,IAC/B;AACJ,QAAM,KAAK,YAAY,eAAe;AAEtC,QAAM,cAAc;AAAA,IAClB,MACE,aAAa,wBAAwB;AAAA,MACnC,GAAG,uBAAuB;AAAA,MAC1B,KAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,mBAAmB,kBAAkB,mBAAmB;AAAA,MACxD,cAAc,YAAY,YAAY;AAAA,MACtC,oBAAoB,YAAY,kBAAkB;AAAA,MAClD,gBAAgB,YAAY,cAAc;AAAA,IAC5C,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,IAClD,OAAO,YAAY,aAAa;AAAA,IAChC,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,EAAE,SAAS,IAAI,qBAAqB;AAC1C,QAAM,oBAAoB,OAAO,KAAK;AAEtC,QAAM,mBAAmB,QAAQ,MAAM;AACrC,WAAO;AAAA,MACL,YAAY,MAAM;AAIhB,0BAAkB,UAAU;AAC5B,iBAAS;AAAA,UACP,MAAM,cAAc;AAAA,QACtB,CAAC;AACD,8BAAsB,MAAM;AAC1B,sBAAY,WAAW,SAAS,UAAU,MAAM;AAAA,YAC9C,eAAe;AAAA,UACjB,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAAA,MACA,SAAS,MAAM;AAEb,YAAI,kBAAkB,SAAS;AAC7B,4BAAkB,UAAU;AAC5B;AAAA,QACF;AACA,iBAAS;AAAA,UACP,MAAM,cAAc;AAAA,QACtB,CAAC;AAAA,MACH;AAAA,MAEA,WAAW,CAAC,UAA2C;AACrD,aACG,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,CAAC,YAAY,SACb;AACA,mBAAS;AAAA,YACP,MAAM,cAAc;AAAA,UACtB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,YAAY,OAAO,CAAC;AAElC,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,YAAY,eAAe;AAM7B,aAAO;AAAA,QACL,YAAY;AAAA,QACZ;AAAA,UACE,KAAK;AAAA,UACL,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,GAAG;AAAA,YACD,YAAY,cAAc;AAAA,YAC1B;AAAA,YACA,GAAI,aAAa,CAAC,IAAI,CAAC,gBAAgB;AAAA,UACzC;AAAA,QACF;AAAA,QACA,CAAC,YAAY,cAAc,OAAO,UAAU,WAAW;AAAA,MACzD;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF,CAAC;AAED,MAAI,eAAe;AACjB,WAAO,oBAAC,2BAAyB,yBAAc;AAAA,EACjD;AAEA,SACE,qBAAC,QAAK,SAAS,GAAG,eAAc,UAAS,KAAK,GAC5C;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAa;AAAA,QACb,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,OAAO,YAAY;AAAA,QAClB,GAAG;AAAA,QACJ,SAAQ;AAAA,QACP,GAAI,aAAa,SAAY;AAAA,QAC9B,OAAO,aAAa,aAAa;AAAA,QACjC,WAAW;AAAA,UACT;AAAA,UACA,OAAO,cAAc;AAAA,YACnB,WACE,YAAY,iBAAiB,UAC7B,YAAY,iBAAiB;AAAA,YAC/B;AAAA,YACA;AAAA,UACF,CAAC;AAAA,UACD;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,IAAG;AAAA,QACF,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,sBAAY,UACX;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,eAAa,YAAY,OAAO,MAAM,aAAa;AAAA,cACnD,WAAW,YAAY,OAAO,MAAM;AAAA,cACpC,OAAO,YAAY,OAAO,MAAM;AAAA,cAE/B,sBAAY,OAAO,MAAM;AAAA;AAAA,UAC5B;AAAA,UAEF,qBAAC,OAAO,OAAP,EACE;AAAA;AAAA,YACA;AAAA,aACH;AAAA,UACA,oBAAC,OAAO,QAAP,EACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,OAAO,yBAAyB;AAAA,kBAC9B,eAAe,YAAY;AAAA,kBAC3B;AAAA,gBACF,CAAC;AAAA,cACH;AAAA,cAEA,8BAAC,wBAAqB;AAAA;AAAA,UACxB,GACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,UAAU,YAAY;AAAA,QACtB,gBAAgB,YAAY;AAAA,QAC5B,MAAM,YAAY;AAAA,QAClB,UAAU,cAAc;AAAA,QACxB,cAAc,YAAY;AAAA;AAAA,IAC5B;AAAA,IACC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,YAAY,UAAU;AAAA,QAC/B,UAAU,cAAc;AAAA,QAEvB;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/esm/forms/select/components/Menu.js

@@ -11,7 +11,6 @@ import { createPortal } from "react-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { usePopper } from "react-popper";
 import Borders from "@dynatrace/strato-design-tokens/borders";
-import Colors from "@dynatrace/strato-design-tokens/colors";
 import { CheckmarkSmallIcon, MinusIcon } from "@dynatrace/strato-icons";
 import { Button } from "../../../buttons/button/Button.js";
 import { ProgressCircle } from "../../../content/progress/ProgressCircle.js";
@@ -390,15 +389,15 @@ function Menu(props) {
               paddingY: 6,
               paddingLeft: 8,
               paddingRight: 12,
-              style: { color: Colors.Text.Neutral.Subdued },
+              className: styles.selectMenuLoadingWrapper,
               children: [
                 /* @__PURE__ */ jsx(ProgressCircle, { size: "small", "aria-labelledby": ariaLabelId }),
                 /* @__PURE__ */ jsx(Text, { id: ariaLabelId, children: /* @__PURE__ */ jsx(
                   FormattedMessage,
                   {
                     description: "Label for the loading state.",
-                    defaultMessage: "Loading options",
-                    id: "czzQ2HD9zu/eqPFy"
+                    defaultMessage: "Loading",
+                    id: "cycz+bYG+VH7Of4e"
                   }
                 ) })
               ]

package/esm/forms/select/components/Menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/Menu.tsx"],
-  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  type LegacyRef,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  ReactPortal,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport type { Modifier } from 'react-popper';\nimport { usePopper } from 'react-popper';\nimport type {\n  ActionMeta,\n  GroupBase,\n  MultiValue,\n  OnChangeValue,\n  Options,\n  MenuProps as ReactSelectMenuProps,\n} from 'react-select';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { ProgressCircle } from '../../../content/progress/ProgressCircle.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../../core/providers/OverlayStackingProvider.js';\nimport { Divider } from '../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Surface } from '../../../layouts/surface/Surface.js';\nimport { surfaceBorderRadius } from '../../../layouts/surface/variables.sty.js';\nimport { useOverlay } from '../../../overlays/hooks/useOverlay.js';\nimport { observeOverlaySize } from '../../../overlays/utils/popper-modifiers.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { _FormFieldContext as FormFieldContext } from '../../forms-core/contexts/FormFieldContext.js';\nimport { FormFieldMessageContext } from '../../forms-core/contexts/FormFieldMessageContext.js';\nimport { SearchInput } from '../../search-input/SearchInput.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\n\ntype MenuProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectMenuProps<OptionValue, isMulti, Group>;\n\n// Popper modifier to sync the width of the overlay menu\nconst sameWidthModifier: Modifier<'sameWidth-as-trigger'> = {\n  name: 'sameWidth-as-trigger',\n  enabled: true,\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n    state.styles.popper.height = 'min-content';\n  },\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n};\n\nconst heightModifier: Modifier<'select-height-handler'> = {\n  name: 'select-height-handler',\n  enabled: true,\n  fn: ({ state }): void => {\n    const viewportHeight = Math.max(\n      document.documentElement.clientHeight || 0,\n      window.innerHeight || 0,\n    );\n\n    const topOffset = state.rects.reference.y;\n    const bottomOffset =\n      viewportHeight - (state.rects.reference.y + state.rects.reference.height);\n    const offset = state.options.placement.includes('bottom')\n      ? bottomOffset\n      : topOffset;\n\n    if (offset < state.rects.popper.height) {\n      // Limit the height to half the viewport height or 320px (which ever is greater),\n      // subtract the height of the trigger and remove a 20 px buffer to the screen edge.\n      const maxHeightBase = viewportHeight / 2 > 320 ? viewportHeight / 2 : 320;\n      state.styles.popper.maxHeight = `${\n        maxHeightBase - state.rects.reference.height - 20\n      }px`;\n    }\n  },\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n};\n\nexport function Menu<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: MenuProps<OptionValue, isMulti, Group>): ReactPortal {\n  const { children, innerRef, innerProps, selectProps } = props;\n  const {\n    filterRef,\n    clearSelectionRef,\n    triggerRef,\n    inputValue,\n    isMulti,\n    onInputChange,\n  } = selectProps;\n  const {\n    className: contentConsumerClassName,\n    style: contentConsumerStyle,\n    'data-testid': contentDataTestId,\n    ...remainingContentProps\n  } = selectProps.componentProps.content ?? {};\n  const {\n    className: filterConsumerClassName,\n    style: filterConsumerStyle,\n    'data-testid': filterDataTestId,\n    ...remainingFilterProps\n  } = selectProps.componentProps.filter ?? {};\n\n  const [portalRef, setPortalRef] = useState<HTMLDivElement | null>(null);\n  const [menuWidth, setMenuWidth] = useState<string | number | undefined>(\n    triggerRef?.offsetWidth,\n  );\n\n  const rootPortalRef = useMergeRefs([innerRef, setPortalRef]);\n\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const { styles: positioningStyles } = usePopper(triggerRef, portalRef, {\n    placement: 'bottom-start',\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 4],\n        },\n      },\n      sameWidthModifier,\n      heightModifier,\n      observeOverlaySize,\n    ],\n  });\n\n  const { dispatch } = useSelectMenuContext();\n\n  const clearFilterValue = useCallback(() => {\n    if (inputValue !== '') {\n      onInputChange('', {\n        action: 'input-change',\n        prevInputValue: inputValue,\n      });\n    }\n  }, [inputValue, onInputChange]);\n\n  useOverlay(\n    {\n      onClose: () => {\n        dispatch({\n          type: SelectActions.CLOSE,\n        });\n        clearFilterValue();\n        setMenuWidth(triggerRef?.offsetWidth);\n      },\n      isOpen: selectProps.menuIsOpen,\n      isDismissible: true,\n      shouldCloseOnInteractOutside: (element) => {\n        // close the menu when the click is outside of the select and the select trigger.\n        // The closing when the trigger is clicked is handled by the trigger itself\n        return !selectProps.triggerRef?.contains(element);\n      },\n    },\n    innerRef as RefObject<HTMLElement>,\n  );\n\n  useEffect(() => {\n    if (selectProps.menuIsOpen) {\n      filterRef?.current?.inputRef?.focus({ preventScroll: true });\n    }\n  }, [filterRef, selectProps.menuIsOpen]);\n\n  const hiddenTrigger = useMemo(\n    () => selectProps.triggerRef?.querySelector('input'),\n    [selectProps.triggerRef],\n  );\n\n  useEffect(() => {\n    // Restore focus to the trigger when the menu unmounts, unless focus has\n    // already moved to another element (e.g. a different Select's trigger).\n    // When the portal unmounts after option selection or Escape, activeElement\n    // falls back to document.body, so this correctly restores focus.\n    return () => {\n      if (!document.activeElement || document.activeElement === document.body) {\n        hiddenTrigger?.focus();\n      }\n    };\n  }, [hiddenTrigger]);\n\n  const intl = useIntl();\n\n  const ariaLabelId = useId();\n\n  const allSelected = useMemo(() => {\n    return (\n      isMulti &&\n      selectProps.allOptions?.length ===\n        (selectProps.value as MultiValue<OptionValue>)?.length\n    );\n  }, [isMulti, selectProps.allOptions, selectProps.value]);\n\n  const handleSelectAllInteraction = () => {\n    if (!selectProps.loading) {\n      if (allSelected) {\n        selectProps.onChange([] as OnChangeValue<OptionValue, isMulti>, {\n          action: 'clear',\n          removedValues: selectProps.value as Options<OptionValue>,\n        });\n      } else {\n        selectProps.onChange(\n          selectProps.allOptions as OnChangeValue<OptionValue, isMulti>,\n          {} as ActionMeta<OptionValue>,\n        );\n      }\n    }\n  };\n\n  const dataDtProperties = `state:${allSelected ? 'deselect' : 'select'}`;\n\n  const noOptionsAvailable =\n    selectProps.allOptions === undefined || selectProps.allOptions.length === 0;\n  const isFiltering =\n    selectProps.customFilter && inputValue !== undefined && inputValue !== '';\n  const showClearSelection =\n    selectProps.clearable &&\n    selectProps.value &&\n    isMulti === false &&\n    !isFiltering;\n  const showSelectAll =\n    selectProps.clearable && isMulti && !isFiltering && !noOptionsAvailable;\n\n  return createPortal(\n    <Surface\n      data-testid={contentDataTestId}\n      ref={rootPortalRef}\n      {...(innerProps as unknown as Record<string, unknown>)}\n      elevation=\"floating\"\n      padding={4}\n      className={clsx(\n        styles.selectMenuOverlay({\n          isTriggerWidth:\n            selectProps.contentWidth === 'trigger' ||\n            (selectProps.customFilter &&\n              selectProps.contentWidth === 'content'),\n        }),\n        contentConsumerClassName,\n      )}\n      style={{\n        zIndex: stackingContext.style.zIndex,\n        ...positioningStyles.popper,\n        width:\n          selectProps.contentWidth !== 'trigger'\n            ? selectProps.contentWidth\n            : menuWidth,\n        ...contentConsumerStyle,\n        ...assignInlineVars({\n          [surfaceBorderRadius]: Borders.Radius.Surface.Subdued,\n        }),\n      }}\n      onMouseDown={(e: ReactMouseEvent<HTMLDivElement>) => e.stopPropagation()}\n      {...remainingContentProps}\n    >\n      <OverlayStackingProvider>\n        {selectProps.customFilter && (\n          // The empty content is need so the TextInput does not consume the required coming from the FormField\n          <FormFieldContext.Provider value={{}}>\n            {/* The TextInput should not consume any validation context to not reflect error states. */}\n            <FormFieldMessageContext.Provider\n              value={{\n                state: {\n                  customMessages: [],\n                  formControlMessages: [],\n                  showError: false,\n                },\n              }}\n            >\n              <SearchInput\n                data-testid={filterDataTestId}\n                ref={filterRef}\n                variant=\"minimal\"\n                aria-label={intl.formatMessage({\n                  defaultMessage: 'Search available options',\n                  id: '4PipZ2Z07Q9epib1',\n                  description: 'Aria label for the filter inside the select',\n                })}\n                placeholder={intl.formatMessage({\n                  defaultMessage: 'Search',\n                  id: 'CerADEHqR/6IVmHr',\n                  description: 'Placeholder for the filter inside the select',\n                })}\n                value={inputValue}\n                onChange={(value: string) => {\n                  onInputChange(value, {\n                    action: 'input-change',\n                    prevInputValue: inputValue,\n                  });\n                }}\n                className={clsx(styles.filter, filterConsumerClassName)}\n                style={filterConsumerStyle}\n                {...remainingFilterProps}\n              />\n            </FormFieldMessageContext.Provider>\n            <Divider\n              className={clsx(\n                styles.selectMenuDivider,\n                'strato-select-divider',\n              )}\n            />\n          </FormFieldContext.Provider>\n        )}\n        {showClearSelection && (\n          <>\n            <Button\n              ref={clearSelectionRef as LegacyRef<HTMLButtonElement>}\n              width=\"full\"\n              textAlign=\"start\"\n              onClick={() => {\n                selectProps.onChange(\n                  null as OnChangeValue<OptionValue, isMulti>,\n                  {\n                    action: 'clear',\n                    removedValues: selectProps.value as Options<OptionValue>,\n                  },\n                );\n                // close the menu in single selection mode and clear the filter\n                if (isMulti === false) {\n                  dispatch({\n                    type: SelectActions.CLOSE,\n                  });\n                  clearFilterValue();\n                }\n              }}\n              onKeyDown={(event: ReactKeyboardEvent<HTMLButtonElement>) => {\n                if (event.key === ' ' || event.key === 'Enter') {\n                  selectProps.onChange(\n                    null as OnChangeValue<OptionValue, isMulti>,\n                    {\n                      action: 'clear',\n                      removedValues: selectProps.value as Options<OptionValue>,\n                    },\n                  );\n                  // prevent option selection being triggered\n                  event.preventDefault();\n                  event.stopPropagation();\n\n                  // close the menu in single selection mode and clear the filter\n                  if (isMulti === false) {\n                    dispatch({\n                      type: SelectActions.CLOSE,\n                    });\n                    clearFilterValue();\n                  }\n\n                  // move the focus back to the trigger after clearing if possible\n                  // otherwise move it back to the input\n                  if (filterRef?.current && isMulti) {\n                    filterRef.current.inputRef?.focus();\n                  } else {\n                    const hiddentrigger = triggerRef?.querySelector('input');\n                    hiddentrigger?.focus();\n                  }\n                }\n              }}\n            >\n              {intl.formatMessage({\n                defaultMessage: 'Clear selection',\n                id: '/H3rbOvaR6bAasVo',\n                description: 'Select component clear selection button.',\n              })}\n            </Button>\n            <Divider\n              className={clsx(\n                styles.selectMenuDivider,\n                'strato-select-divider',\n              )}\n            />\n          </>\n        )}\n        {showSelectAll && (\n          <>\n            <Flex\n              tabIndex={0}\n              role=\"option\"\n              className={clsx(\n                'strato-select-option',\n                styles.selectOptionMulti,\n                styles.selectAll,\n                {\n                  'strato-select-option--selected':\n                    (selectProps.value as MultiValue<OptionValue>)?.length > 0,\n                  'strato-select-option--disabled': selectProps.loading,\n                },\n              )}\n              ref={selectProps.clearSelectionRef as LegacyRef<HTMLDivElement>}\n              onClick={() => {\n                handleSelectAllInteraction();\n              }}\n              onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {\n                if (event.key === ' ' || event.key === 'Enter') {\n                  handleSelectAllInteraction();\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              data-dt-name=\"SelectDeselectAll\"\n              data-dt-properties={dataDtProperties}\n            >\n              <div\n                className={clsx(\n                  styles.selectOptionMultiIndicator({\n                    selected:\n                      (selectProps.value as MultiValue<OptionValue>)?.length >\n                      0,\n                  }),\n                )}\n              >\n                {allSelected ? (\n                  <CheckmarkSmallIcon\n                    className={styles.selectOptionMultiIndicatorIcon}\n                  />\n                ) : null}\n                {!allSelected &&\n                (selectProps.value as MultiValue<OptionValue>)?.length > 0 ? (\n                  <MinusIcon\n                    className={styles.selectOptionMultiIndicatorIcon}\n                  />\n                ) : null}\n              </div>\n              {intl.formatMessage({\n                defaultMessage: 'Select all',\n                id: 'EsLvnx9UfUL/bZ/r',\n                description: 'Select all option in the Select component.',\n              })}\n            </Flex>\n            <Divider\n              className={clsx(\n                styles.selectMenuDivider,\n                'strato-select-divider',\n              )}\n            />\n          </>\n        )}\n        {selectProps.loading ? (\n          <Flex\n            paddingY={6}\n            paddingLeft={8}\n            paddingRight={12}\n            style={{ color: Colors.Text.Neutral.Subdued }}\n          >\n            <ProgressCircle size=\"small\" aria-labelledby={ariaLabelId} />\n            <Text id={ariaLabelId}>\n              <FormattedMessage\n                description=\"Label for the loading state.\"\n                defaultMessage=\"Loading options\"\n                id=\"czzQ2HD9zu/eqPFy\"\n              />\n            </Text>\n          </Flex>\n        ) : (\n          children\n        )}\n      </OverlayStackingProvider>\n    </Surface>,\n    document.body,\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport clsx from 'clsx';\nimport {\n  type LegacyRef,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  ReactPortal,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport type { Modifier } from 'react-popper';\nimport { usePopper } from 'react-popper';\nimport type {\n  ActionMeta,\n  GroupBase,\n  MultiValue,\n  OnChangeValue,\n  Options,\n  MenuProps as ReactSelectMenuProps,\n} from 'react-select';\n\nimport Borders from '@dynatrace/strato-design-tokens/borders';\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { ProgressCircle } from '../../../content/progress/ProgressCircle.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useOverlayStacking } from '../../../core/hooks/useOverlayStacking.js';\nimport { OverlayStackingProvider } from '../../../core/providers/OverlayStackingProvider.js';\nimport { Divider } from '../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Surface } from '../../../layouts/surface/Surface.js';\nimport { surfaceBorderRadius } from '../../../layouts/surface/variables.sty.js';\nimport { useOverlay } from '../../../overlays/hooks/useOverlay.js';\nimport { observeOverlaySize } from '../../../overlays/utils/popper-modifiers.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { _FormFieldContext as FormFieldContext } from '../../forms-core/contexts/FormFieldContext.js';\nimport { FormFieldMessageContext } from '../../forms-core/contexts/FormFieldMessageContext.js';\nimport { SearchInput } from '../../search-input/SearchInput.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\n\ntype MenuProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectMenuProps<OptionValue, isMulti, Group>;\n\n// Popper modifier to sync the width of the overlay menu\nconst sameWidthModifier: Modifier<'sameWidth-as-trigger'> = {\n  name: 'sameWidth-as-trigger',\n  enabled: true,\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n    state.styles.popper.height = 'min-content';\n  },\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n};\n\nconst heightModifier: Modifier<'select-height-handler'> = {\n  name: 'select-height-handler',\n  enabled: true,\n  fn: ({ state }): void => {\n    const viewportHeight = Math.max(\n      document.documentElement.clientHeight || 0,\n      window.innerHeight || 0,\n    );\n\n    const topOffset = state.rects.reference.y;\n    const bottomOffset =\n      viewportHeight - (state.rects.reference.y + state.rects.reference.height);\n    const offset = state.options.placement.includes('bottom')\n      ? bottomOffset\n      : topOffset;\n\n    if (offset < state.rects.popper.height) {\n      // Limit the height to half the viewport height or 320px (which ever is greater),\n      // subtract the height of the trigger and remove a 20 px buffer to the screen edge.\n      const maxHeightBase = viewportHeight / 2 > 320 ? viewportHeight / 2 : 320;\n      state.styles.popper.maxHeight = `${\n        maxHeightBase - state.rects.reference.height - 20\n      }px`;\n    }\n  },\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n};\n\nexport function Menu<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: MenuProps<OptionValue, isMulti, Group>): ReactPortal {\n  const { children, innerRef, innerProps, selectProps } = props;\n  const {\n    filterRef,\n    clearSelectionRef,\n    triggerRef,\n    inputValue,\n    isMulti,\n    onInputChange,\n  } = selectProps;\n  const {\n    className: contentConsumerClassName,\n    style: contentConsumerStyle,\n    'data-testid': contentDataTestId,\n    ...remainingContentProps\n  } = selectProps.componentProps.content ?? {};\n  const {\n    className: filterConsumerClassName,\n    style: filterConsumerStyle,\n    'data-testid': filterDataTestId,\n    ...remainingFilterProps\n  } = selectProps.componentProps.filter ?? {};\n\n  const [portalRef, setPortalRef] = useState<HTMLDivElement | null>(null);\n  const [menuWidth, setMenuWidth] = useState<string | number | undefined>(\n    triggerRef?.offsetWidth,\n  );\n\n  const rootPortalRef = useMergeRefs([innerRef, setPortalRef]);\n\n  const stackingContext = useOverlayStacking(undefined, 'overlay');\n\n  const { styles: positioningStyles } = usePopper(triggerRef, portalRef, {\n    placement: 'bottom-start',\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 4],\n        },\n      },\n      sameWidthModifier,\n      heightModifier,\n      observeOverlaySize,\n    ],\n  });\n\n  const { dispatch } = useSelectMenuContext();\n\n  const clearFilterValue = useCallback(() => {\n    if (inputValue !== '') {\n      onInputChange('', {\n        action: 'input-change',\n        prevInputValue: inputValue,\n      });\n    }\n  }, [inputValue, onInputChange]);\n\n  useOverlay(\n    {\n      onClose: () => {\n        dispatch({\n          type: SelectActions.CLOSE,\n        });\n        clearFilterValue();\n        setMenuWidth(triggerRef?.offsetWidth);\n      },\n      isOpen: selectProps.menuIsOpen,\n      isDismissible: true,\n      shouldCloseOnInteractOutside: (element) => {\n        // close the menu when the click is outside of the select and the select trigger.\n        // The closing when the trigger is clicked is handled by the trigger itself\n        return !selectProps.triggerRef?.contains(element);\n      },\n    },\n    innerRef as RefObject<HTMLElement>,\n  );\n\n  useEffect(() => {\n    if (selectProps.menuIsOpen) {\n      filterRef?.current?.inputRef?.focus({ preventScroll: true });\n    }\n  }, [filterRef, selectProps.menuIsOpen]);\n\n  const hiddenTrigger = useMemo(\n    () => selectProps.triggerRef?.querySelector('input'),\n    [selectProps.triggerRef],\n  );\n\n  useEffect(() => {\n    // Restore focus to the trigger when the menu unmounts, unless focus has\n    // already moved to another element (e.g. a different Select's trigger).\n    // When the portal unmounts after option selection or Escape, activeElement\n    // falls back to document.body, so this correctly restores focus.\n    return () => {\n      if (!document.activeElement || document.activeElement === document.body) {\n        hiddenTrigger?.focus();\n      }\n    };\n  }, [hiddenTrigger]);\n\n  const intl = useIntl();\n\n  const ariaLabelId = useId();\n\n  const allSelected = useMemo(() => {\n    return (\n      isMulti &&\n      selectProps.allOptions?.length ===\n        (selectProps.value as MultiValue<OptionValue>)?.length\n    );\n  }, [isMulti, selectProps.allOptions, selectProps.value]);\n\n  const handleSelectAllInteraction = () => {\n    if (!selectProps.loading) {\n      if (allSelected) {\n        selectProps.onChange([] as OnChangeValue<OptionValue, isMulti>, {\n          action: 'clear',\n          removedValues: selectProps.value as Options<OptionValue>,\n        });\n      } else {\n        selectProps.onChange(\n          selectProps.allOptions as OnChangeValue<OptionValue, isMulti>,\n          {} as ActionMeta<OptionValue>,\n        );\n      }\n    }\n  };\n\n  const dataDtProperties = `state:${allSelected ? 'deselect' : 'select'}`;\n\n  const noOptionsAvailable =\n    selectProps.allOptions === undefined || selectProps.allOptions.length === 0;\n  const isFiltering =\n    selectProps.customFilter && inputValue !== undefined && inputValue !== '';\n  const showClearSelection =\n    selectProps.clearable &&\n    selectProps.value &&\n    isMulti === false &&\n    !isFiltering;\n  const showSelectAll =\n    selectProps.clearable && isMulti && !isFiltering && !noOptionsAvailable;\n\n  return createPortal(\n    <Surface\n      data-testid={contentDataTestId}\n      ref={rootPortalRef}\n      {...(innerProps as unknown as Record<string, unknown>)}\n      elevation=\"floating\"\n      padding={4}\n      className={clsx(\n        styles.selectMenuOverlay({\n          isTriggerWidth:\n            selectProps.contentWidth === 'trigger' ||\n            (selectProps.customFilter &&\n              selectProps.contentWidth === 'content'),\n        }),\n        contentConsumerClassName,\n      )}\n      style={{\n        zIndex: stackingContext.style.zIndex,\n        ...positioningStyles.popper,\n        width:\n          selectProps.contentWidth !== 'trigger'\n            ? selectProps.contentWidth\n            : menuWidth,\n        ...contentConsumerStyle,\n        ...assignInlineVars({\n          [surfaceBorderRadius]: Borders.Radius.Surface.Subdued,\n        }),\n      }}\n      onMouseDown={(e: ReactMouseEvent<HTMLDivElement>) => e.stopPropagation()}\n      {...remainingContentProps}\n    >\n      <OverlayStackingProvider>\n        {selectProps.customFilter && (\n          // The empty content is need so the TextInput does not consume the required coming from the FormField\n          <FormFieldContext.Provider value={{}}>\n            {/* The TextInput should not consume any validation context to not reflect error states. */}\n            <FormFieldMessageContext.Provider\n              value={{\n                state: {\n                  customMessages: [],\n                  formControlMessages: [],\n                  showError: false,\n                },\n              }}\n            >\n              <SearchInput\n                data-testid={filterDataTestId}\n                ref={filterRef}\n                variant=\"minimal\"\n                aria-label={intl.formatMessage({\n                  defaultMessage: 'Search available options',\n                  id: '4PipZ2Z07Q9epib1',\n                  description: 'Aria label for the filter inside the select',\n                })}\n                placeholder={intl.formatMessage({\n                  defaultMessage: 'Search',\n                  id: 'CerADEHqR/6IVmHr',\n                  description: 'Placeholder for the filter inside the select',\n                })}\n                value={inputValue}\n                onChange={(value: string) => {\n                  onInputChange(value, {\n                    action: 'input-change',\n                    prevInputValue: inputValue,\n                  });\n                }}\n                className={clsx(styles.filter, filterConsumerClassName)}\n                style={filterConsumerStyle}\n                {...remainingFilterProps}\n              />\n            </FormFieldMessageContext.Provider>\n            <Divider\n              className={clsx(\n                styles.selectMenuDivider,\n                'strato-select-divider',\n              )}\n            />\n          </FormFieldContext.Provider>\n        )}\n        {showClearSelection && (\n          <>\n            <Button\n              ref={clearSelectionRef as LegacyRef<HTMLButtonElement>}\n              width=\"full\"\n              textAlign=\"start\"\n              onClick={() => {\n                selectProps.onChange(\n                  null as OnChangeValue<OptionValue, isMulti>,\n                  {\n                    action: 'clear',\n                    removedValues: selectProps.value as Options<OptionValue>,\n                  },\n                );\n                // close the menu in single selection mode and clear the filter\n                if (isMulti === false) {\n                  dispatch({\n                    type: SelectActions.CLOSE,\n                  });\n                  clearFilterValue();\n                }\n              }}\n              onKeyDown={(event: ReactKeyboardEvent<HTMLButtonElement>) => {\n                if (event.key === ' ' || event.key === 'Enter') {\n                  selectProps.onChange(\n                    null as OnChangeValue<OptionValue, isMulti>,\n                    {\n                      action: 'clear',\n                      removedValues: selectProps.value as Options<OptionValue>,\n                    },\n                  );\n                  // prevent option selection being triggered\n                  event.preventDefault();\n                  event.stopPropagation();\n\n                  // close the menu in single selection mode and clear the filter\n                  if (isMulti === false) {\n                    dispatch({\n                      type: SelectActions.CLOSE,\n                    });\n                    clearFilterValue();\n                  }\n\n                  // move the focus back to the trigger after clearing if possible\n                  // otherwise move it back to the input\n                  if (filterRef?.current && isMulti) {\n                    filterRef.current.inputRef?.focus();\n                  } else {\n                    const hiddentrigger = triggerRef?.querySelector('input');\n                    hiddentrigger?.focus();\n                  }\n                }\n              }}\n            >\n              {intl.formatMessage({\n                defaultMessage: 'Clear selection',\n                id: '/H3rbOvaR6bAasVo',\n                description: 'Select component clear selection button.',\n              })}\n            </Button>\n            <Divider\n              className={clsx(\n                styles.selectMenuDivider,\n                'strato-select-divider',\n              )}\n            />\n          </>\n        )}\n        {showSelectAll && (\n          <>\n            <Flex\n              tabIndex={0}\n              role=\"option\"\n              className={clsx(\n                'strato-select-option',\n                styles.selectOptionMulti,\n                styles.selectAll,\n                {\n                  'strato-select-option--selected':\n                    (selectProps.value as MultiValue<OptionValue>)?.length > 0,\n                  'strato-select-option--disabled': selectProps.loading,\n                },\n              )}\n              ref={selectProps.clearSelectionRef as LegacyRef<HTMLDivElement>}\n              onClick={() => {\n                handleSelectAllInteraction();\n              }}\n              onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {\n                if (event.key === ' ' || event.key === 'Enter') {\n                  handleSelectAllInteraction();\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              data-dt-name=\"SelectDeselectAll\"\n              data-dt-properties={dataDtProperties}\n            >\n              <div\n                className={clsx(\n                  styles.selectOptionMultiIndicator({\n                    selected:\n                      (selectProps.value as MultiValue<OptionValue>)?.length >\n                      0,\n                  }),\n                )}\n              >\n                {allSelected ? (\n                  <CheckmarkSmallIcon\n                    className={styles.selectOptionMultiIndicatorIcon}\n                  />\n                ) : null}\n                {!allSelected &&\n                (selectProps.value as MultiValue<OptionValue>)?.length > 0 ? (\n                  <MinusIcon\n                    className={styles.selectOptionMultiIndicatorIcon}\n                  />\n                ) : null}\n              </div>\n              {intl.formatMessage({\n                defaultMessage: 'Select all',\n                id: 'EsLvnx9UfUL/bZ/r',\n                description: 'Select all option in the Select component.',\n              })}\n            </Flex>\n            <Divider\n              className={clsx(\n                styles.selectMenuDivider,\n                'strato-select-divider',\n              )}\n            />\n          </>\n        )}\n        {selectProps.loading ? (\n          <Flex\n            paddingY={6}\n            paddingLeft={8}\n            paddingRight={12}\n            className={styles.selectMenuLoadingWrapper}\n          >\n            <ProgressCircle size=\"small\" aria-labelledby={ariaLabelId} />\n            <Text id={ariaLabelId}>\n              <FormattedMessage\n                description=\"Label for the loading state.\"\n                defaultMessage=\"Loading\"\n                id=\"cycz+bYG+VH7Of4e\"\n              />\n            </Text>\n          </Flex>\n        ) : (\n          children\n        )}\n      </OverlayStackingProvider>\n    </Surface>,\n    document.body,\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/select/components/Option.js

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { CheckmarkSmallIcon } from "@dynatrace/strato-icons";
 import { TextEllipsisAroundChildren } from "../../../core/components/TextEllipsisAroundChildren.js";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
+import { getVirtualFocusStyles } from "../../../core/styles/getVirtualFocusStyles.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
 import { useSelectMenuContext } from "../hooks/use-select-menu-context.js";
 import { SelectActions } from "../state/select-menu-state-reducer.js";
@@ -32,6 +33,11 @@ function Option(props) {
     suffix.componentProps ?? {}
   );
   const { dispatch } = useSelectMenuContext();
+  const isVirtuallyFocused = selectProps.focusOnOption && isFocused;
+  const { className: virtualFocusClassName } = getVirtualFocusStyles(
+    isVirtuallyFocused,
+    isSelected && !isMulti ? "primary" : "neutral"
+  );
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -41,9 +47,9 @@ function Option(props) {
       className: clsx(
         "strato-select-option",
         isMulti === true ? styles.selectOptionMulti : styles.selectOptionSingle,
+        virtualFocusClassName,
         {
           "strato-select-option--selected": isSelected,
-          "strato-select-option--focus": selectProps.focusOnOption ? isFocused : false,
           "strato-select-option--disabled": isDisabled
         },
         consumerClassName

package/esm/forms/select/components/Option.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/Option.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type MouseEvent as ReactMouseEvent } from 'react';\nimport type {\n  OptionProps as ReactSelectOptionProps,\n  GroupBase,\n} from 'react-select';\n\nimport { CheckmarkSmallIcon } from '@dynatrace/strato-icons';\n\nimport { TextEllipsisAroundChildren } from '../../../core/components/TextEllipsisAroundChildren.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseOption, BaseGroup } from '../types.js';\n\nexport type OptionProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectOptionProps<OptionValue, isMulti, Group>;\n\nexport function Option<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<OptionProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const {\n    children,\n    isSelected,\n    innerProps,\n    isFocused,\n    isDisabled,\n    isMulti,\n    selectProps,\n  } = props;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    prefix,\n    suffix,\n  } = props.data;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props.data);\n  const [prefixTrackingProps] = useBehavioralTrackingProps(\n    prefix.componentProps ?? {},\n  );\n  const [suffixTrackingProps] = useBehavioralTrackingProps(\n    suffix.componentProps ?? {},\n  );\n\n  const { dispatch } = useSelectMenuContext();\n\n  return (\n    <Flex\n      data-testid={dataTestId}\n      role=\"option\"\n      {...innerProps}\n      className={clsx(\n        'strato-select-option',\n        isMulti === true ? styles.selectOptionMulti : styles.selectOptionSingle,\n        {\n          'strato-select-option--selected': isSelected,\n          'strato-select-option--focus': selectProps.focusOnOption\n            ? isFocused\n            : false,\n          'strato-select-option--disabled': isDisabled,\n        },\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      onClick={(event: ReactMouseEvent<HTMLDivElement>) => {\n        if (!isDisabled) {\n          // Only if the option is in single select mode, we can close the menu.\n          if (isMulti === false) {\n            dispatch({\n              type: SelectActions.CLOSE,\n            });\n          }\n          innerProps.onClick?.(event);\n        }\n      }}\n      aria-selected={isSelected}\n      {...behavioralTrackingProps}\n    >\n      {isMulti === true ? (\n        <div\n          className={clsx(\n            styles.selectOptionMultiIndicator({\n              selected: isSelected,\n            }),\n          )}\n        >\n          {isSelected === true ? (\n            <CheckmarkSmallIcon\n              className={styles.selectOptionMultiIndicatorIcon}\n            />\n          ) : null}\n        </div>\n      ) : null}\n      {/* Check if any of the options have a prefix defined. If they do, all other items will need to respect the space */}\n      {props.selectProps.optionsHavePrefix ? (\n        <span\n          className={clsx(\n            styles.selectOptionPrefix,\n            prefix.componentProps?.className,\n          )}\n          style={prefix.componentProps?.style}\n          data-testid={prefix.componentProps?.['data-testid']}\n          {...prefixTrackingProps}\n        >\n          {prefix.component}\n        </span>\n      ) : null}\n      <TextEllipsisAroundChildren>{children}</TextEllipsisAroundChildren>\n      {/* For the Suffix icon, we will not need to deal with the other options. Overlaps are fine here. */}\n      {suffix.component ? (\n        <span\n          className={clsx(\n            styles.selectOptionSuffix,\n            suffix.componentProps?.className,\n          )}\n          style={suffix.componentProps?.style}\n          data-testid={suffix.componentProps?.['data-testid']}\n          {...suffixTrackingProps}\n        >\n          {suffix.component}\n        </span>\n      ) : null}\n    </Flex>\n  );\n}\n"],
-  "mappings": "AAwDI,SAwCQ,KAxCR;AAxDJ,OAAO,UAAU;AAOjB,SAAS,0BAA0B;AAEnC,SAAS,kCAAkC;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,YAAY;AACrB,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,YAAY,YAAY;AASjB,SAAS,OAId,OAAuE;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EACF,IAAI,MAAM;AAEV,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,MAAM,IAAI;AACvE,QAAM,CAAC,mBAAmB,IAAI;AAAA,IAC5B,OAAO,kBAAkB,CAAC;AAAA,EAC5B;AACA,QAAM,CAAC,mBAAmB,IAAI;AAAA,IAC5B,OAAO,kBAAkB,CAAC;AAAA,EAC5B;AAEA,QAAM,EAAE,SAAS,IAAI,qBAAqB;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,YAAY,OAAO,OAAO,oBAAoB,OAAO;AAAA,QACrD;AAAA,UACE,kCAAkC;AAAA,UAClC,+BAA+B,YAAY,gBACvC,YACA;AAAA,UACJ,kCAAkC;AAAA,QACpC;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,SAAS,CAAC,UAA2C;AACnD,YAAI,CAAC,YAAY;AAEf,cAAI,YAAY,OAAO;AACrB,qBAAS;AAAA,cACP,MAAM,cAAc;AAAA,YACtB,CAAC;AAAA,UACH;AACA,qBAAW,UAAU,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MACd,GAAG;AAAA,MAEH;AAAA,oBAAY,OACX;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO,2BAA2B;AAAA,gBAChC,UAAU;AAAA,cACZ,CAAC;AAAA,YACH;AAAA,YAEC,yBAAe,OACd;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,OAAO;AAAA;AAAA,YACpB,IACE;AAAA;AAAA,QACN,IACE;AAAA,QAEH,MAAM,YAAY,oBACjB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO,gBAAgB;AAAA,YACzB;AAAA,YACA,OAAO,OAAO,gBAAgB;AAAA,YAC9B,eAAa,OAAO,iBAAiB,aAAa;AAAA,YACjD,GAAG;AAAA,YAEH,iBAAO;AAAA;AAAA,QACV,IACE;AAAA,QACJ,oBAAC,8BAA4B,UAAS;AAAA,QAErC,OAAO,YACN;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO,gBAAgB;AAAA,YACzB;AAAA,YACA,OAAO,OAAO,gBAAgB;AAAA,YAC9B,eAAa,OAAO,iBAAiB,aAAa;AAAA,YACjD,GAAG;AAAA,YAEH,iBAAO;AAAA;AAAA,QACV,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type MouseEvent as ReactMouseEvent } from 'react';\nimport type {\n  OptionProps as ReactSelectOptionProps,\n  GroupBase,\n} from 'react-select';\n\nimport { CheckmarkSmallIcon } from '@dynatrace/strato-icons';\n\nimport { TextEllipsisAroundChildren } from '../../../core/components/TextEllipsisAroundChildren.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { getVirtualFocusStyles } from '../../../core/styles/getVirtualFocusStyles.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseOption, BaseGroup } from '../types.js';\n\nexport type OptionProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectOptionProps<OptionValue, isMulti, Group>;\n\nexport function Option<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<OptionProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const {\n    children,\n    isSelected,\n    innerProps,\n    isFocused,\n    isDisabled,\n    isMulti,\n    selectProps,\n  } = props;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    prefix,\n    suffix,\n  } = props.data;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props.data);\n  const [prefixTrackingProps] = useBehavioralTrackingProps(\n    prefix.componentProps ?? {},\n  );\n  const [suffixTrackingProps] = useBehavioralTrackingProps(\n    suffix.componentProps ?? {},\n  );\n\n  const { dispatch } = useSelectMenuContext();\n\n  const isVirtuallyFocused = selectProps.focusOnOption && isFocused;\n\n  const { className: virtualFocusClassName } = getVirtualFocusStyles(\n    isVirtuallyFocused,\n    isSelected && !isMulti ? 'primary' : 'neutral',\n  );\n\n  return (\n    <Flex\n      data-testid={dataTestId}\n      role=\"option\"\n      {...innerProps}\n      className={clsx(\n        'strato-select-option',\n        isMulti === true ? styles.selectOptionMulti : styles.selectOptionSingle,\n        virtualFocusClassName,\n        {\n          'strato-select-option--selected': isSelected,\n          'strato-select-option--disabled': isDisabled,\n        },\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      onClick={(event: ReactMouseEvent<HTMLDivElement>) => {\n        if (!isDisabled) {\n          // Only if the option is in single select mode, we can close the menu.\n          if (isMulti === false) {\n            dispatch({\n              type: SelectActions.CLOSE,\n            });\n          }\n          innerProps.onClick?.(event);\n        }\n      }}\n      aria-selected={isSelected}\n      {...behavioralTrackingProps}\n    >\n      {isMulti === true ? (\n        <div\n          className={clsx(\n            styles.selectOptionMultiIndicator({\n              selected: isSelected,\n            }),\n          )}\n        >\n          {isSelected === true ? (\n            <CheckmarkSmallIcon\n              className={styles.selectOptionMultiIndicatorIcon}\n            />\n          ) : null}\n        </div>\n      ) : null}\n      {/* Check if any of the options have a prefix defined. If they do, all other items will need to respect the space */}\n      {props.selectProps.optionsHavePrefix ? (\n        <span\n          className={clsx(\n            styles.selectOptionPrefix,\n            prefix.componentProps?.className,\n          )}\n          style={prefix.componentProps?.style}\n          data-testid={prefix.componentProps?.['data-testid']}\n          {...prefixTrackingProps}\n        >\n          {prefix.component}\n        </span>\n      ) : null}\n      <TextEllipsisAroundChildren>{children}</TextEllipsisAroundChildren>\n      {/* For the Suffix icon, we will not need to deal with the other options. Overlaps are fine here. */}\n      {suffix.component ? (\n        <span\n          className={clsx(\n            styles.selectOptionSuffix,\n            suffix.componentProps?.className,\n          )}\n          style={suffix.componentProps?.style}\n          data-testid={suffix.componentProps?.['data-testid']}\n          {...suffixTrackingProps}\n        >\n          {suffix.component}\n        </span>\n      ) : null}\n    </Flex>\n  );\n}\n"],
+  "mappings": "AAgEI,SAsCQ,KAtCR;AAhEJ,OAAO,UAAU;AAOjB,SAAS,0BAA0B;AAEnC,SAAS,kCAAkC;AAC3C,SAAS,kCAAkC;AAC3C,SAAS,6BAA6B;AACtC,SAAS,YAAY;AACrB,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,YAAY,YAAY;AASjB,SAAS,OAId,OAAuE;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EACF,IAAI,MAAM;AAEV,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,MAAM,IAAI;AACvE,QAAM,CAAC,mBAAmB,IAAI;AAAA,IAC5B,OAAO,kBAAkB,CAAC;AAAA,EAC5B;AACA,QAAM,CAAC,mBAAmB,IAAI;AAAA,IAC5B,OAAO,kBAAkB,CAAC;AAAA,EAC5B;AAEA,QAAM,EAAE,SAAS,IAAI,qBAAqB;AAE1C,QAAM,qBAAqB,YAAY,iBAAiB;AAExD,QAAM,EAAE,WAAW,sBAAsB,IAAI;AAAA,IAC3C;AAAA,IACA,cAAc,CAAC,UAAU,YAAY;AAAA,EACvC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,YAAY,OAAO,OAAO,oBAAoB,OAAO;AAAA,QACrD;AAAA,QACA;AAAA,UACE,kCAAkC;AAAA,UAClC,kCAAkC;AAAA,QACpC;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,SAAS,CAAC,UAA2C;AACnD,YAAI,CAAC,YAAY;AAEf,cAAI,YAAY,OAAO;AACrB,qBAAS;AAAA,cACP,MAAM,cAAc;AAAA,YACtB,CAAC;AAAA,UACH;AACA,qBAAW,UAAU,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,iBAAe;AAAA,MACd,GAAG;AAAA,MAEH;AAAA,oBAAY,OACX;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO,2BAA2B;AAAA,gBAChC,UAAU;AAAA,cACZ,CAAC;AAAA,YACH;AAAA,YAEC,yBAAe,OACd;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,OAAO;AAAA;AAAA,YACpB,IACE;AAAA;AAAA,QACN,IACE;AAAA,QAEH,MAAM,YAAY,oBACjB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO,gBAAgB;AAAA,YACzB;AAAA,YACA,OAAO,OAAO,gBAAgB;AAAA,YAC9B,eAAa,OAAO,iBAAiB,aAAa;AAAA,YACjD,GAAG;AAAA,YAEH,iBAAO;AAAA;AAAA,QACV,IACE;AAAA,QACJ,oBAAC,8BAA4B,UAAS;AAAA,QAErC,OAAO,YACN;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO,gBAAgB;AAAA,YACzB;AAAA,YACA,OAAO,OAAO,gBAAgB;AAAA,YAC9B,eAAa,OAAO,iBAAiB,aAAa;AAAA,YACjD,GAAG;AAAA,YAEH,iBAAO;AAAA;AAAA,QACV,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

package/esm/forms/select/styles/Select.css

@@ -1,112 +1,115 @@
-._dlenfc0-3-4-0._dlenfc0-3-4-0 {
+._dlenfc0-3-5-0._dlenfc0-3-5-0 {
   pointer-events: auto;
 }
-._dlenfc1-3-4-0._dlenfc1-3-4-0 {
+._dlenfc1-3-5-0._dlenfc1-3-5-0 {
   min-width: unset;
 }
-._dlenfc3-3-4-0 {
+._dlenfc3-3-5-0 {
   width: 100%;
 }
-._dlenfc4-3-4-0 {
+._dlenfc4-3-5-0 {
   width: auto;
 }
-._dlenfc5-3-4-0 > span {
+._dlenfc5-3-5-0 > span {
   z-index: unset;
 }
-._dlenfc6-3-4-0 {
+._dlenfc6-3-5-0 {
   display: flex;
 }
-._dlenfc7-3-4-0 {
+._dlenfc7-3-5-0 {
   transform: rotate(180deg);
 }
-._dlenfc8-3-4-0 {
+._dlenfc8-3-5-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }
-._dlenfca-3-4-0 {
+._dlenfca-3-5-0 {
   width: auto;
 }
-._dlenfcc-3-4-0 {
+._dlenfcc-3-5-0 {
   cursor: default;
-  background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._dlenfcd-3-4-0 {
+:root:not(._1jgl8s50-3-5-0) ._dlenfcc-3-5-0 {
+  --_bx32h3-3-5-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+}
+._dlenfcd-3-5-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._dlenfce-3-4-0 {
+._1jgl8s50-3-5-0 ._dlenfce-3-5-0, ._1jgl8s50-3-5-0 ._dlenfce-3-5-0:hover, ._1jgl8s50-3-5-0 ._dlenfce-3-5-0:active {
+  --_bx32h3-3-5-0: var(--dt-colors-background-surface-default, #fff);
+  --_bx32h4-3-5-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+}
+._dlenfcf-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcf-3-4-0 {
+._dlenfcg-3-5-0 {
   width: 100%;
   position: relative;
 }
-._dlenfcg-3-4-0 {
+._dlenfch-3-5-0 {
   overflow: auto;
 }
-._dlenfch-3-4-0 {
+._dlenfci-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfci-3-4-0 {
+._dlenfcj-3-5-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfcj-3-4-0 ._dlenfck-3-4-0 {
+._dlenfck-3-5-0 ._dlenfcl-3-5-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}
+._dlenfcm-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
+  align-items: center;
 }
-._dlenfcl-3-4-0.strato-select-divider {
+._dlenfcn-3-5-0.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfcm-3-4-0 {
+._dlenfco-3-5-0 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfcn-3-4-0 {
+._dlenfcp-3-5-0 {
   min-width: 128px;
 }
-._dlenfco-3-4-0 {
+._dlenfcq-3-5-0 {
   display: inline;
 }
-._dlenfco-3-4-0 + ._dlenfco-3-4-0:before {
+._dlenfcq-3-5-0 + ._dlenfcq-3-5-0:before {
   content: ", ";
 }
-._dlenfcp-3-4-0 {
+._dlenfcr-3-5-0 {
   position: relative;
   cursor: pointer;
-  border-radius: var(--dt-spacings-size-8, 8px);
+  border-radius: var(--dt-borders-radius-field-default, 6px);
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcp-3-4-0:hover:not(.strato-select-option--disabled) {
+._dlenfcr-3-5-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcp-3-4-0.strato-select-option--focus {
-  outline: none;
-  background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._dlenfcp-3-4-0.strato-select-option--focus.strato-select-option--selected {
-  background-color: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._dlenfcp-3-4-0.strato-select-option--selected {
+._dlenfcr-3-5-0.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcp-3-4-0.strato-select-option--disabled {
+._dlenfcr-3-5-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcp-3-4-0.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcr-3-5-0.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcp-3-4-0.strato-select-option--selected:hover {
+._dlenfcr-3-5-0.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcp-3-4-0.strato-select-option--selected::before {
+._dlenfcr-3-5-0.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -117,11 +120,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcq-3-4-0:focus {
+._dlenfcs-3-5-0:focus {
   outline: none;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._dlenfcr-3-4-0 {
+._dlenfct-3-5-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-top: var(--dt-spacings-size-6, 6px);
@@ -131,17 +134,14 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfcr-3-4-0:hover:not(.strato-select-option--disabled) {
+._dlenfct-3-5-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcr-3-4-0.strato-select-option--focus {
-  background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._dlenfcr-3-4-0.strato-select-option--disabled {
+._dlenfct-3-5-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcs-3-4-0 {
+._dlenfcu-3-5-0 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -153,29 +153,29 @@
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcs-3-4-0 {
+.strato-select-option--disabled ._dlenfcu-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfct-3-4-0 {
+._dlenfcv-3-5-0 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcu-3-4-0 {
-  fill: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
+._dlenfcw-3-5-0 {
+  fill: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcu-3-4-0 {
+.strato-select-option--disabled ._dlenfcw-3-5-0 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcv-3-4-0 {
+._dlenfcx-3-5-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._dlenfcw-3-4-0 {
+._dlenfcy-3-5-0 {
   display: inline-block;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);

package/esm/forms/select/styles/Select.sty.js

@@ -1,28 +1,31 @@
+import "../../../core/components/app-root/AppRoot.css";
+import "../../../styles/field.css";
 import "./Select.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearReactSelectZIndex = "_dlenfc5-3-4-0";
-var filter = "_dlenfc1-3-4-0";
-var placeholderColor = "_dlenfck-3-4-0";
-var select = "_dlenfc0-3-4-0";
-var selectAll = "_dlenfcq-3-4-0";
-var selectGroupHeading = "_dlenfce-3-4-0";
-var selectMenuDivider = "_dlenfcl-3-4-0";
-var selectMenuListWrapper = "_dlenfcg-3-4-0";
-var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfcm-3-4-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcn-3-4-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfco-3-4-0";
-var selectNoOptionsMessage = "_dlenfch-3-4-0";
-var selectOptionMulti = "_dlenfcr-3-4-0";
-var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcs-3-4-0", variantClassNames: { selected: { true: "_dlenfct-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcu-3-4-0";
-var selectOptionPrefix = "_dlenfcv-3-4-0";
-var selectOptionSingle = "_dlenfcp-3-4-0";
-var selectOptionSuffix = "_dlenfcw-3-4-0";
-var selectTrigger = _7a468({ defaultClassName: "_dlenfc9-3-4-0", variantClassNames: { fullWidth: { true: "_dlenfca-3-4-0" }, showError: { true: "_dlenfcb-3-4-0" }, readOnly: { true: "_dlenfcc-3-4-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-4-0"]] });
-var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-4-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-4-0" }, readOnly: { true: "_dlenfc8-3-4-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfci-3-4-0";
-var selectVirtualizationWrapper = "_dlenfcf-3-4-0";
-var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-4-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-4-0", false: "_dlenfc4-3-4-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfcj-3-4-0";
+var clearReactSelectZIndex = "_dlenfc5-3-5-0";
+var filter = "_dlenfc1-3-5-0";
+var placeholderColor = "_dlenfcl-3-5-0";
+var select = "_dlenfc0-3-5-0";
+var selectAll = "_dlenfcs-3-5-0";
+var selectGroupHeading = "_dlenfcf-3-5-0";
+var selectMenuDivider = "_dlenfcn-3-5-0";
+var selectMenuListWrapper = "_dlenfch-3-5-0";
+var selectMenuLoadingWrapper = "_dlenfcm-3-5-0";
+var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfco-3-5-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-5-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcq-3-5-0";
+var selectNoOptionsMessage = "_dlenfci-3-5-0";
+var selectOptionMulti = "_dlenfct-3-5-0";
+var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcu-3-5-0", variantClassNames: { selected: { true: "_dlenfcv-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcw-3-5-0";
+var selectOptionPrefix = "_dlenfcx-3-5-0";
+var selectOptionSingle = "_dlenfcr-3-5-0";
+var selectOptionSuffix = "_dlenfcy-3-5-0";
+var selectTrigger = _7a468({ defaultClassName: "_dlenfc9-3-5-0", variantClassNames: { fullWidth: { true: "_dlenfca-3-5-0" }, showError: { true: "_dlenfcb-3-5-0" }, readOnly: { true: "_dlenfcc-3-5-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-5-0"], [{ showError: false, readOnly: true }, "_dlenfce-3-5-0"]] });
+var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-5-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-5-0" }, readOnly: { true: "_dlenfc8-3-5-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcj-3-5-0";
+var selectVirtualizationWrapper = "_dlenfcg-3-5-0";
+var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-5-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-5-0", false: "_dlenfc4-3-5-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfck-3-5-0";
 export {
   clearReactSelectZIndex,
   filter,
@@ -32,6 +35,7 @@ export {
   selectGroupHeading,
   selectMenuDivider,
   selectMenuListWrapper,
+  selectMenuLoadingWrapper,
   selectMenuOverlay,
   selectMultiValue,
   selectNoOptionsMessage,

package/esm/forms/select/styles/Select.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/styles/Select.css.ts"],
-  "sourcesContent": ["import './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-4-0';\nexport var filter = '_dlenfc1-3-4-0';\nexport var placeholderColor = '_dlenfck-3-4-0';\nexport var select = '_dlenfc0-3-4-0';\nexport var selectAll = '_dlenfcq-3-4-0';\nexport var selectGroupHeading = '_dlenfce-3-4-0';\nexport var selectMenuDivider = '_dlenfcl-3-4-0';\nexport var selectMenuListWrapper = '_dlenfcg-3-4-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfcm-3-4-0',variantClassNames:{isTriggerWidth:{true:'_dlenfcn-3-4-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfco-3-4-0';\nexport var selectNoOptionsMessage = '_dlenfch-3-4-0';\nexport var selectOptionMulti = '_dlenfcr-3-4-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcs-3-4-0',variantClassNames:{selected:{true:'_dlenfct-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcu-3-4-0';\nexport var selectOptionPrefix = '_dlenfcv-3-4-0';\nexport var selectOptionSingle = '_dlenfcp-3-4-0';\nexport var selectOptionSuffix = '_dlenfcw-3-4-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-4-0',variantClassNames:{fullWidth:{true:'_dlenfca-3-4-0'},showError:{true:'_dlenfcb-3-4-0'},readOnly:{true:'_dlenfcc-3-4-0'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-4-0']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-4-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-4-0'},readOnly:{true:'_dlenfc8-3-4-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfci-3-4-0';\nexport var selectVirtualizationWrapper = '_dlenfcf-3-4-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-4-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-4-0',false:'_dlenfc4-3-4-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfcj-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB;AAC7B,IAAI,SAAS;AACb,IAAI,mBAAmB;AACvB,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,wBAAwB;AAC5B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,gBAAe,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxL,IAAI,mBAAmB;AACvB,IAAI,yBAAyB;AAC7B,IAAI,oBAAoB;AACxB,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvK,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,iBAAgB,GAAE,WAAU,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAC9R,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9N,IAAI,oCAAoC;AACxC,IAAI,8BAA8B;AAClC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjM,IAAI,kBAAkB;",
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../styles/field.css';\nimport './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-5-0';\nexport var filter = '_dlenfc1-3-5-0';\nexport var placeholderColor = '_dlenfcl-3-5-0';\nexport var select = '_dlenfc0-3-5-0';\nexport var selectAll = '_dlenfcs-3-5-0';\nexport var selectGroupHeading = '_dlenfcf-3-5-0';\nexport var selectMenuDivider = '_dlenfcn-3-5-0';\nexport var selectMenuListWrapper = '_dlenfch-3-5-0';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-5-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-5-0',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-5-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-5-0';\nexport var selectNoOptionsMessage = '_dlenfci-3-5-0';\nexport var selectOptionMulti = '_dlenfct-3-5-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-5-0',variantClassNames:{selected:{true:'_dlenfcv-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-5-0';\nexport var selectOptionPrefix = '_dlenfcx-3-5-0';\nexport var selectOptionSingle = '_dlenfcr-3-5-0';\nexport var selectOptionSuffix = '_dlenfcy-3-5-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-5-0',variantClassNames:{fullWidth:{true:'_dlenfca-3-5-0'},showError:{true:'_dlenfcb-3-5-0'},readOnly:{true:'_dlenfcc-3-5-0'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-5-0'],[{showError:false,readOnly:true},'_dlenfce-3-5-0']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-5-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-5-0'},readOnly:{true:'_dlenfc8-3-5-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-5-0';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-5-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-5-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-5-0',false:'_dlenfc4-3-5-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,yBAAyB;AAC7B,IAAI,SAAS;AACb,IAAI,mBAAmB;AACvB,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,wBAAwB;AAC5B,IAAI,2BAA2B;AAC/B,IAAI,oBAAoB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,gBAAe,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxL,IAAI,mBAAmB;AACvB,IAAI,yBAAyB;AAC7B,IAAI,oBAAoB;AACxB,IAAI,6BAA6B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvK,IAAI,iCAAiC;AACrC,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,qBAAqB;AACzB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,iBAAgB,GAAE,WAAU,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,WAAU,OAAM,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACjV,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9N,IAAI,oCAAoC;AACxC,IAAI,8BAA8B;AAClC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjM,IAAI,kBAAkB;",
   "names": []
 }