@dynatrace/strato-components 3.5.0 → 3.6.0

package/esm/forms/search-input/Stepper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/search-input/Stepper.tsx"],
+  "sourcesContent": ["import { useContext, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronDownIcon, ChevronUpIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './Stepper.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport * as baseInputStyles from '../_base-input/BaseInput.sty.js';\nimport { BaseInputContext } from '../_base-input/contexts/BaseInputContext.js';\n\n//#region Typings\n\n/**\n * The properties of the SearchInput Stepper.\n * @public\n */\nexport type SearchInputStepperProps = {\n  /** The zero-based index of the current match. */\n  current: number;\n  /** Called when the current match index should change. */\n  onCurrentChange: (value: number) => void;\n  /** The total number of matches. */\n  total: number;\n};\n\n//#endregion Typings\n\nexport const Stepper = ({\n  current,\n  onCurrentChange,\n  total,\n}: SearchInputStepperProps) => {\n  const intl = useIntl();\n  const { hasError, disabled, ariaDisabled } = useContext(BaseInputContext);\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  if (current > total) {\n    devLog(\n      `The current match index (${current}) is greater than the total number of matches (${total}). Please ensure that the current index is zero-based and less than the total.`,\n    );\n  }\n\n  return (\n    <Flex gap={4}>\n      <div\n        className={styles.matchPositionIndicators}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={intl.formatMessage(\n          {\n            id: 'tw9ulrSgegYXHq69',\n            defaultMessage: 'Match {current} of {total}',\n            description: 'Label for the current match position',\n          },\n          { current: current + 1, total },\n        )}\n      >\n        <span>{current + 1}</span> / <span>{total}</span>\n      </div>\n      <Divider orientation=\"vertical\" className={baseInputStyles.divider} />\n      <div className={styles.stepperButtons} role=\"group\">\n        <Button\n          onClick={(e: MouseEvent) => {\n            e.stopPropagation();\n            onCurrentChange(current === 0 ? total - 1 : current - 1);\n          }}\n          className={styles.stepperButton}\n          color={hasError ? 'critical' : 'neutral'}\n          disabled={disabledOrAriaDisabled || total === 0}\n          aria-label={intl.formatMessage({\n            id: 'GLK6cN59tiRO9GDp',\n            defaultMessage: 'Previous match',\n            description: 'Label for the previous match button',\n          })}\n        >\n          <Button.Prefix>\n            <ChevronUpIcon />\n          </Button.Prefix>\n        </Button>\n        <Button\n          onClick={(e: MouseEvent) => {\n            e.stopPropagation();\n            onCurrentChange(current === total - 1 ? 0 : current + 1);\n          }}\n          className={styles.stepperButton}\n          color={hasError ? 'critical' : 'neutral'}\n          disabled={disabledOrAriaDisabled || total === 0}\n          aria-label={intl.formatMessage({\n            id: 'JLMJNMOPi2dCAbD1',\n            defaultMessage: 'Next match',\n            description: 'Label for the next match button',\n          })}\n        >\n          <Button.Prefix>\n            <ChevronDownIcon />\n          </Button.Prefix>\n        </Button>\n      </div>\n    </Flex>\n  );\n};\n\n(Stepper as typeof Stepper & { displayName: string }).displayName =\n  'SearchInput.Stepper';\n"],
+  "mappings": "AA+CM,SAaE,KAbF;AA/CN,SAAS,kBAA8B;AACvC,SAAS,eAAe;AAExB,SAAS,iBAAiB,qBAAqB;AAE/C,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,YAAY,qBAAqB;AACjC,SAAS,wBAAwB;AAmB1B,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,MAA+B;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,UAAU,UAAU,aAAa,IAAI,WAAW,gBAAgB;AACxE,QAAM,yBAAyB,YAAY,gBAAgB;AAE3D,MAAI,UAAU,OAAO;AACnB;AAAA,MACE,4BAA4B,OAAO,kDAAkD,KAAK;AAAA,IAC5F;AAAA,EACF;AAEA,SACE,qBAAC,QAAK,KAAK,GACT;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,MAAK;AAAA,QACL,aAAU;AAAA,QACV,cAAY,KAAK;AAAA,UACf;AAAA,YACE,IAAI;AAAA,YACJ,gBAAgB;AAAA,YAChB,aAAa;AAAA,UACf;AAAA,UACA,EAAE,SAAS,UAAU,GAAG,MAAM;AAAA,QAChC;AAAA,QAEA;AAAA,8BAAC,UAAM,oBAAU,GAAE;AAAA,UAAO;AAAA,UAAG,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IAC5C;AAAA,IACA,oBAAC,WAAQ,aAAY,YAAW,WAAW,gBAAgB,SAAS;AAAA,IACpE,qBAAC,SAAI,WAAW,OAAO,gBAAgB,MAAK,SAC1C;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,CAAC,MAAkB;AAC1B,cAAE,gBAAgB;AAClB,4BAAgB,YAAY,IAAI,QAAQ,IAAI,UAAU,CAAC;AAAA,UACzD;AAAA,UACA,WAAW,OAAO;AAAA,UAClB,OAAO,WAAW,aAAa;AAAA,UAC/B,UAAU,0BAA0B,UAAU;AAAA,UAC9C,cAAY,KAAK,cAAc;AAAA,YAC7B,IAAI;AAAA,YACJ,gBAAgB;AAAA,YAChB,aAAa;AAAA,UACf,CAAC;AAAA,UAED,8BAAC,OAAO,QAAP,EACC,8BAAC,iBAAc,GACjB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,CAAC,MAAkB;AAC1B,cAAE,gBAAgB;AAClB,4BAAgB,YAAY,QAAQ,IAAI,IAAI,UAAU,CAAC;AAAA,UACzD;AAAA,UACA,WAAW,OAAO;AAAA,UAClB,OAAO,WAAW,aAAa;AAAA,UAC/B,UAAU,0BAA0B,UAAU;AAAA,UAC9C,cAAY,KAAK,cAAc;AAAA,YAC7B,IAAI;AAAA,YACJ,gBAAgB;AAAA,YAChB,aAAa;AAAA,UACf,CAAC;AAAA,UAED,8BAAC,OAAO,QAAP,EACC,8BAAC,mBAAgB,GACnB;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;AAEC,QAAqD,cACpD;",
+  "names": []
+}

package/esm/forms/search-input/Stepper.sty.js

@@ -0,0 +1,16 @@
+import "../../core/components/app-root/AppRoot.css";
+import "../../styles/field.css";
+import "../../styles/textStyle.css";
+import "../hooks/useAutofillEvent.css";
+import "../_base-input/BaseInput.css";
+import "../_base-input/BaseInputContent.css";
+import "./Stepper.css";
+var matchPositionIndicators = "_s3yy5s0-3-6-0 _o6rxr70-3-6-0 _da9a8v0-3-6-0 _da9a8v2-3-6-0 _da9a8v3-3-6-0 _da9a8vb-3-6-0";
+var stepperButton = "_s3yy5s2-3-6-0 _1a8lqy9e-3-6-0";
+var stepperButtons = "_s3yy5s1-3-6-0";
+export {
+  matchPositionIndicators,
+  stepperButton,
+  stepperButtons
+};
+//# sourceMappingURL=Stepper.sty.js.map

package/esm/forms/search-input/Stepper.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/forms/search-input/Stepper.css.ts"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport '../_base-input/BaseInput.css';\nimport '../_base-input/BaseInputContent.css';\nimport './Stepper.css';\nexport var matchPositionIndicators = '_s3yy5s0-3-6-0 _o6rxr70-3-6-0 _da9a8v0-3-6-0 _da9a8v2-3-6-0 _da9a8v3-3-6-0 _da9a8vb-3-6-0';\nexport var stepperButton = '_s3yy5s2-3-6-0 _1a8lqy9e-3-6-0';\nexport var stepperButtons = '_s3yy5s1-3-6-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,0BAA0B;AAC9B,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
+  "names": []
+}

package/esm/forms/select/Select.js

@@ -177,9 +177,13 @@ function SelectFwd(props, forwardedRef) {
     }
   }, [disableFiltering]);
   const filterConfig = {
-    // when a textValue is on the option, the textValue is used;
-    // otherwise we try and stringify whatever possible.
+    // Filter by both visible label and option value/textValue.
+    // This allows searching by value (e.g. "green") when the rendered label differs.
     stringify: (option) => {
+      const searchValue = option.data.textValue ?? option.value;
+      if (searchValue && searchValue !== option.label) {
+        return `${option.label} ${searchValue}`;
+      }
       return `${option.label}`;
     }
   };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/select/Select.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type Ref,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type ReactNode,\n  type ReactElement,\n  type SetStateAction,\n  type Dispatch,\n} from 'react';\nimport ReactSelect, { createFilter, type GroupBase } from 'react-select';\n\nimport { components } from './components/components.js';\nimport type { MenuListFunctionRefObject } from './components/MenuList.js';\nimport { SelectMenuContext } from './contexts/SelectMenuContext.js';\nimport { useSelectOptions, _isOption } from './hooks/use-select-options.js';\nimport { useSelectSlots } from './hooks/use-select-slots.js';\nimport { useSelectValue } from './hooks/use-select-value.js';\nimport { SelectContent } from './SelectContent.js';\nimport { SelectCustomTrigger } from './SelectCustomTrigger.js';\nimport { SelectDisplayValue } from './SelectDisplayValue.js';\nimport {\n  SelectEmptyState,\n  type SelectEmptyStateProps,\n} from './SelectEmptyState.js';\nimport { SelectFilter, type SelectFilterProps } from './SelectFilter.js';\nimport { SelectGroup, SelectGroupLabel } from './SelectGroup.js';\nimport { SelectOption } from './SelectOption.js';\nimport { SelectPrefix, type SelectPrefixProps } from './SelectPrefix.js';\nimport { SelectSuffix } from './SelectSuffix.js';\nimport { SelectTrigger } from './SelectTrigger.js';\nimport {\n  reducer,\n  SelectActions,\n  type SelectReducerAction,\n} from './state/select-menu-state-reducer.js';\nimport * as styles from './styles/Select.sty.js';\nimport type {\n  BaseOption,\n  OptionOrGroup,\n  SelectContentWidthOptionsType,\n  SelectTriggerWidthOptionsType,\n  SelectMultiValue,\n  SelectSingleValue,\n} from './types.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { createStratoLogger } from '../../core/sdk/sdk-logger.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type {\n  FormControlState,\n  FormControlStateProps,\n} from '../../core/types/form-control-state.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { withFormFieldMessageContextProviderWithGenerics } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n} from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Select';\n\n// Redeclare react-select module to extend it with additional props for typesafety.\n// https://react-select.com/typescript#custom-select-props\ndeclare module 'react-select/dist/declarations/src/Select' {\n  export interface Props<\n    Option,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    IsMulti extends boolean,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    Group extends GroupBase<Option>,\n  > {\n    /** Custom placeholder text */\n    placeholderText?: ReactNode;\n    /** The trigger width set by the dev. */\n    triggerWidth?: SelectTriggerWidthOptionsType;\n    /** Custom select trigger */\n    customTrigger?: ReactElement<\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      { [key: string]: any } | null | undefined\n    >;\n    /** Custom display value. */\n    displayValue?: ReactNode[];\n    /** Prefix for the select trigger */\n    prefix?: ReactElement<SelectPrefixProps>;\n    /* TriggerRef that needs to be applied to the trigger in order to setup the menu positioning */\n    triggerRef: HTMLElement | null;\n    /* setter for the TriggerRef */\n    setTriggerRef: Dispatch<SetStateAction<HTMLDivElement | null>>;\n    /** Defines if the space for the prefix icons should be reserved in all options rendered */\n    optionsHavePrefix: boolean;\n    /** Select.Filter component specified by dev */\n    customFilter?: ReactElement<SelectFilterProps>;\n    /** Custom empty state provided by dev */\n    emptyState?: ReactElement<SelectEmptyStateProps>;\n    /** Form control state for errors and hints */\n    controlState?: FormControlState;\n    loading?: boolean;\n    clearable?: boolean;\n    isRequired?: boolean;\n    /** array of all select options (including those in groups) */\n    allOptions?: BaseOption<Option>[];\n    hiddenSelectRef: Ref<HTMLSelectElement>;\n    hiddenSelectName?: string;\n    /** whether the focus styles on the options should be visible */\n    focusOnOption: boolean;\n    /** Ref that needs to be applied to the filter input to manage the focus and keyboard navigation */\n    filterRef?: MutableRefObject<FormControlRef<HTMLDivElement> | null>;\n    /** Ref that needs to be applied to the clear selection element to manage the focus and keyboard navigation */\n    clearSelectionRef?: RefObject<HTMLElement | null>;\n    /** Ref that needs to be applied to the select content (menulist) element to manage the focus and keyboard navigation */\n    contentRef?: RefObject<HTMLDivElement | null>;\n    menuListFunctionRef?: RefObject<MenuListFunctionRefObject | null>;\n    /** The content width set by the dev. */\n    contentWidth?: SelectContentWidthOptionsType;\n    /** Whether the selected options are reordered to the top of the options. */\n    showSelectedOptionsFirst?: boolean;\n    /** The id used for the hidden input. */\n    selectInputId?: string;\n    /** Labels the current element. */\n    'aria-label'?: string;\n    /** Identifies the element (or elements) that label(s) the current element. */\n    'aria-labelledby'?: string;\n    /** Identifies the element (or elements) that describe(s) the object. */\n    'aria-describedby'?: string;\n    /** Identifies the element (or elements) that provide(s) a detailed, extended description for the object. */\n    'aria-details'?: string;\n    /** className and style prop for each of the components. */\n    componentProps: {\n      trigger?: StylingProps &\n        DataTestId &\n        BehaviorTrackingProps & { readOnly: boolean; ariaDisabled?: boolean };\n      content?: StylingProps & DataTestId & BehaviorTrackingProps;\n      filter?: StylingProps & DataTestId & BehaviorTrackingProps;\n      emptyState?: StylingProps & DataTestId & BehaviorTrackingProps;\n    };\n  }\n}\n\n// Redeclare react forwardRef to allow generic types on react\n// https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref\ndeclare module 'react' {\n  function forwardRef<T, P = unknown>(\n    render: (\n      props: P,\n      ref: import('react').Ref<T>,\n    ) => import('react').ReactElement | null,\n  ): (\n    props: P & import('react').RefAttributes<T>,\n  ) => import('react').ReactElement | null;\n}\n\n/**\n * Common select base props.\n * @public\n */\nexport type SelectBaseProps<T, Multiple extends boolean> = PropsWithChildren<{\n  /**\n   * Used to compare options with objects for values either by a specified property of the object or through a comparator function.\n   */\n  compareBy?: keyof T | ((valueA: T, valueB: T) => boolean);\n\n  /** Name used for the component when submitting it in a form */\n  name?: string;\n\n  /** Form name used to connect the component to a form */\n  form?: string;\n\n  /**\n   * Boolean to determine whether the component is required\n   *\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * Whether the component is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Event handler called when the open state for the select changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Whether or not the select allows multiple selection or not\n   * @defaultValue false\n   */\n  multiple?: Multiple;\n\n  /**\n   * Whether or not the select is clearable.\n   * @defaultValue false for single select, true for multi select\n   */\n  clearable?: boolean;\n\n  /** Callback that is called when the select trigger loses focus. */\n  onBlur?: (e: FocusEvent<HTMLInputElement, Element>) => void;\n\n  /** Callback that is called when the select trigger gets focus. */\n  onFocus?: (e: FocusEvent<HTMLInputElement, Element>) => void;\n}> &\n  MaskingProps;\n\n/**\n * @public\n */\nexport type SelectOnChangeValue<\n  OptionValue,\n  Multiple extends boolean,\n> = Multiple extends true\n  ? SelectMultiValue<OptionValue>\n  : SelectSingleValue<OptionValue>;\n\n/**\n * Accepted properties for Select\n * @public\n */\nexport type SelectFormsProps<\n  /*\n   * TODO: Figure out how we can properly infer the type of the Select here\n   * because that would come from the value of the options (as children)\n   * which is not really doable with the given API.\n   */\n  OptionValue,\n  Multiple extends boolean,\n> = SelectBaseProps<OptionValue, Multiple> &\n  FormControlProps<\n    Multiple extends true\n      ? SelectMultiValue<OptionValue>\n      : SelectSingleValue<OptionValue>,\n    (value: SelectOnChangeValue<OptionValue, Multiple>) => void\n  > &\n  FormControlStateProps &\n  DOMProps &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps;\n\n/**\n * Function to return the item that should be focused after\n * updating all options via onChange in a controlled multi select.\n * @param options - all select options\n * @param focusedOptionValue - the value of the previously focused option\n * @returns option with the same value as the previously focused option or null\n */\nfunction getNewFocusedOption(\n  options: OptionOrGroup<BaseOption<unknown>>,\n  focusedOptionValue: unknown,\n): BaseOption<unknown> | null {\n  for (const optionOrGroup of options) {\n    if (_isOption(optionOrGroup)) {\n      if (optionOrGroup.value === focusedOptionValue) {\n        return optionOrGroup;\n      }\n    } else {\n      for (const option of optionOrGroup.options) {\n        if (_isOption(option) && option.value === focusedOptionValue) {\n          return option;\n        }\n      }\n    }\n  }\n\n  return null;\n}\n\n/** Select component */\nfunction SelectFwd<OptionValue, Multiple extends boolean = false>(\n  props: SelectFormsProps<OptionValue, Multiple>,\n  forwardedRef: Ref<FormControlWithOverlayRef>,\n) {\n  const {\n    multiple = false,\n    disabled: propsDisabled,\n    controlState,\n    clearable = multiple,\n    name,\n    id: propId,\n    readOnly: propReadOnly,\n    children,\n    value: propsValue,\n    defaultValue: propsDefaultValue,\n    onChange: propsOnChange,\n    onFocus,\n    onBlur,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    onOpenChange,\n    required: propsRequired,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const slots = useSelectSlots(children);\n\n  const stratoLogger = useMemo(\n    () =>\n      createStratoLogger.bind({\n        name,\n        id: propId,\n        ariaLabel,\n        dataTestId,\n      })(COMPONENT_NAME),\n    [name, propId, ariaLabel, dataTestId],\n  );\n\n  const {\n    disableFiltering,\n    value: filterValueProp,\n    defaultValue: filterDefaultValueProp,\n    onChange: filterOnChangeProp,\n    ...remainingFilterProps\n  } = slots.Filter?.props ?? {};\n\n  const {\n    width: triggerWidthProp,\n    placeholder: triggerPlaceholderProp,\n    ...remainingTriggerProps\n  } = slots.Trigger?.props ?? {};\n\n  const {\n    width: contentWidthProp,\n    loading: contentLoadingProp,\n    showSelectedOptionsFirst: contentShowSelectedOptionsFirstProp,\n    ...remainingContentProps\n  } = slots.Content?.props ?? {};\n\n  const {\n    optionsOrGroups: options,\n    optionsHavePrefix,\n    allOptions,\n  } = useSelectOptions<OptionValue>(slots.Content, stratoLogger);\n\n  const { value, defaultValue } = useSelectValue<OptionValue, Multiple>({\n    value: propsValue,\n    defaultValue: propsDefaultValue,\n    options,\n    multiple: (multiple === true) as Multiple,\n  });\n\n  const hiddenSelectRef = useRef<HTMLSelectElement>(null);\n\n  const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n  const { disabled, required, id, ariaDisabled, readOnly } =\n    useSyncedFormControlProps({\n      propDisabled: propsDisabled,\n      propRequired: propsRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n\n  const { onBlur: validationOnBlur } = useFormFieldValidation(hiddenSelectRef, {\n    required,\n  });\n\n  const menuOpenReducer = useCallback(\n    (state: boolean, action: SelectReducerAction) => {\n      if (readOnly) {\n        return state;\n      }\n\n      const newState = reducer(state, action);\n\n      if (state !== newState) {\n        // Delay the onOpenChange call to not run into a bad setState().\n        queueMicrotask(() => {\n          newState === false && !controlState && validationOnBlur();\n          onOpenChange?.(newState);\n        });\n      }\n\n      return newState;\n    },\n    [readOnly, controlState, validationOnBlur, onOpenChange],\n  );\n\n  const [menuOpen, dispatch] = useReducer(menuOpenReducer, false);\n\n  const [isFocusWithin, setIsFocusWithin] = useState<boolean>(false);\n\n  const [filterValue, setFilterValue] = useControllableState({\n    value: filterValueProp,\n    defaultValue: filterDefaultValueProp,\n    onChange: filterOnChangeProp,\n  });\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n\n  // any is needed as the needed type coming from the react-select is not exported\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const selectRef = useRef<any>(null);\n\n  const hiddenTrigger = useMemo(\n    () => triggerRef?.querySelector('input'),\n    [triggerRef],\n  );\n  const [focusOnOption, setFocusOnOption] = useState<boolean>(true);\n\n  // If the disableFiltering value changes, the filterValue will need to be\n  // reset\n  useEffect(() => {\n    if (\n      disableFiltering === true &&\n      (filterValue !== undefined || filterValue !== '')\n    ) {\n      setFilterValue('');\n    }\n    // We don't want to include filterValue as dependency because when the user types in the input and\n    // disableFiltering is true, we don't want to clear the input\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disableFiltering]);\n\n  const filterConfig = {\n    // when a textValue is on the option, the textValue is used;\n    // otherwise we try and stringify whatever possible.\n    stringify: (option: {\n      label: string;\n      value: string;\n      data: BaseOption<OptionValue>;\n    }) => {\n      return `${option.label}`;\n    },\n  };\n\n  const handleChange = (\n    option:\n      | SelectSingleValue<BaseOption<OptionValue>>\n      | SelectMultiValue<BaseOption<OptionValue>>,\n  ) => {\n    // Send native onChange event for any form control / onChange listeners\n    requestAnimationFrame(() => {\n      const nativeEvent = new Event('change', {\n        bubbles: true,\n        cancelable: true,\n      });\n      hiddenSelectRef?.current?.dispatchEvent(nativeEvent);\n    });\n\n    if (multiple === false) {\n      setFilterValue(''); // clear the filter when an option is selected in single mode\n    }\n\n    // Early exit if the onChange prop is not defined, there is nothing that needs\n    // to be done.\n    if (!propsOnChange) {\n      return;\n    }\n\n    // In a single select scenario, it will only emit a single value of the selected option\n    if (multiple === false) {\n      // If the clicked option is the same as the selected one we can return early.\n      if (option === value) {\n        return;\n      }\n      if (option === null) {\n        // Ensures that null is returned if no value is selected\n        propsOnChange?.(null as SelectOnChangeValue<OptionValue, Multiple>);\n      } else {\n        propsOnChange?.(\n          (option as SelectSingleValue<BaseOption<OptionValue>>)\n            ?.value as SelectOnChangeValue<OptionValue, Multiple>,\n        );\n      }\n    }\n\n    // In a multi select scenario, it will map the value of all selected options and report them\n    // in the on change.\n    if (multiple === true) {\n      const selectedOptionValues = (\n        option as SelectMultiValue<BaseOption<OptionValue>>\n      ).map((individualOption) => individualOption.value);\n      propsOnChange?.(\n        selectedOptionValues as SelectOnChangeValue<OptionValue, Multiple>,\n      );\n    }\n  };\n\n  const filterRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const clearSelectionRef = useRef<HTMLElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const menuListFunctionRef = useRef<MenuListFunctionRefObject>(null);\n\n  const handleArrowKeyOptionFocus = (key: KeyboardEvent['key']) => {\n    if (key !== 'ArrowUp' && key !== 'ArrowDown') {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      if (!contentRef.current) {\n        return;\n      }\n\n      const container = contentRef.current;\n      const focusedElement = container.querySelector(\n        '.strato-select-option--focus',\n      );\n\n      if (focusedElement) {\n        focusedElement.scrollIntoView({\n          block: 'nearest',\n        });\n      } else if (container) {\n        if (key === 'ArrowDown') {\n          container.scrollTop = 0;\n        } else if (menuListFunctionRef.current) {\n          menuListFunctionRef.current.scrollToBottom();\n        }\n      }\n    });\n  };\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef => ({\n      element: containerRef.current,\n      triggerRef: triggerRef,\n      inputRef: hiddenSelectRef.current,\n      focus: () => {\n        hiddenTrigger?.focus();\n      },\n      open: () => {\n        // When opened programmatically the hidden input needs to be focused for the virtual focus\n        hiddenTrigger?.focus();\n        dispatch({\n          type: SelectActions.OPEN,\n        });\n      },\n      close: () =>\n        dispatch({\n          type: SelectActions.CLOSE,\n        }),\n      validate: () => {\n        // The initialization of the hiddenSelectRef is delayed, therefore,\n        // we want to check the validity at the end of the render cycle.\n        queueMicrotask(() => hiddenSelectRef.current?.reportValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [hiddenTrigger, messagesContextDispatch, triggerRef],\n  );\n\n  /**\n   * Workaround for the focus to stay on the selected option for the controlled multi select\n   * See: https://github.com/JedWatson/react-select/issues/5367\n   */\n  if (multiple && propsOnChange) {\n    const select = selectRef.current;\n    if (select?.state.focusedOption) {\n      const focusedOptionValue = select.state.focusedOption.value;\n      const newFocusedOption = getNewFocusedOption(options, focusedOptionValue);\n\n      // HACK: manipulating the state without setState is evil (but needed here as we are mid-transition)\n      select.state.focusedOption = newFocusedOption;\n    }\n  }\n\n  const [hasFormControlError] = useFormControlState(controlState);\n  const showError = controlState\n    ? hasFormControlError\n    : messagesContextState.showError;\n\n  const contextMemo = useMemo(\n    () => ({ state: menuOpen, dispatch }),\n    [menuOpen, dispatch],\n  );\n\n  const onBlurHandler = (event: FocusEvent<HTMLInputElement, Element>) => {\n    if (\n      // The relatedTarget is null when the focus leaves the browser and we want to still trigger the onBlur in this case.\n      !event.relatedTarget ||\n      (event.relatedTarget !== hiddenTrigger &&\n        event.relatedTarget !== clearSelectionRef.current &&\n        event.relatedTarget !== filterRef.current?.inputRef)\n    ) {\n      if (!menuOpen && isFocusWithin) {\n        setIsFocusWithin(false);\n        onBlur?.(event);\n      }\n    }\n  };\n\n  return (\n    <SelectMenuContext.Provider value={contextMemo}>\n      <div\n        ref={containerRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(\n          styles.selectWrapper({\n            fullWidth:\n              triggerWidthProp === 'full' || triggerWidthProp === '100%',\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...mergeProps(restProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ReactSelect\n          instanceId={id}\n          selectInputId={id}\n          className={clsx(styles.select, styles.clearReactSelectZIndex, {\n            [styles.validAndEnabled]: !disabled && !ariaDisabled && !showError,\n          })}\n          unstyled\n          options={options}\n          components={components}\n          // TODO: React select does an instance equality check on this one, so we need to figure out how\n          // to keep that in sync over a controlled state.\n          value={value}\n          defaultValue={defaultValue}\n          onChange={(value) =>\n            // Need to cast this here as React.Select handles the value still as unknown.\n            // TODO: Maybe we can go to the JSX generic?\n            handleChange(\n              value as\n                | SelectSingleValue<BaseOption<OptionValue>>\n                | SelectMultiValue<BaseOption<OptionValue>>,\n            )\n          }\n          onBlur={onBlurHandler}\n          hiddenSelectName={name}\n          ref={selectRef}\n          pageSize={5}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          aria-details={ariaDetails}\n          aria-disabled={ariaDisabled}\n          hiddenSelectRef={hiddenSelectRef}\n          // This has to be set to false as we don't want the input directly in the select trigger\n          // but handle this ourselves\n          isSearchable={false}\n          // Multi selection relevant props\n          isMulti={multiple ?? false}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={multiple === false}\n          // This has to be set to false as we don't want the clear button directly in the select trigger\n          // but handle this ourselves\n          isClearable={false}\n          isDisabled={disabled}\n          isRequired={required}\n          triggerWidth={triggerWidthProp}\n          contentWidth={contentWidthProp ?? 'trigger'}\n          placeholderText={triggerPlaceholderProp}\n          // DISCUSS: Figure out if `undefined` is better here or if we should use `null`\n          displayValue={slots.DisplayValue ?? undefined}\n          prefix={slots.Prefix ?? undefined}\n          customTrigger={slots.CustomTrigger ?? undefined}\n          // Trigger and Menu (Popper) ref connections\n          triggerRef={triggerRef}\n          setTriggerRef={setTriggerRef}\n          // Reserving space for prefix icons\n          optionsHavePrefix={optionsHavePrefix}\n          menuIsOpen={menuOpen}\n          // Handles Filtering in the current select\n          filterOption={(option, inputValue) => {\n            if (disableFiltering === true) {\n              return true;\n            }\n            const filterFunction =\n              createFilter<BaseOption<OptionValue>>(filterConfig);\n\n            // We need to cast this here, because the filter option prop only infers option as `FilterOptionOption<unknown>`. The `FilterOptionOption` type is not exposed by react-select.\n            return filterFunction(\n              option as Parameters<typeof filterFunction>[0],\n              inputValue,\n            );\n          }}\n          customFilter={slots.Filter ?? undefined}\n          inputValue={filterValue}\n          onInputChange={(newValue, actionmeta) => {\n            if (actionmeta.action === 'input-change') {\n              setFilterValue(newValue);\n            }\n          }}\n          emptyState={slots.EmptyState ?? undefined}\n          controlState={controlState}\n          loading={contentLoadingProp}\n          clearable={clearable}\n          allOptions={allOptions}\n          tabSelectsValue={false}\n          focusOnOption={focusOnOption}\n          contentRef={contentRef}\n          menuListFunctionRef={menuListFunctionRef}\n          filterRef={filterRef}\n          clearSelectionRef={clearSelectionRef}\n          showSelectedOptionsFirst={contentShowSelectedOptionsFirstProp}\n          componentProps={{\n            trigger: {\n              className: slots.Trigger?.props.className,\n              style: { ...slots.Trigger?.props.style },\n              readOnly: !!readOnly,\n              ariaDisabled,\n              ...remainingTriggerProps,\n            },\n            filter: {\n              className: slots.Filter?.props.className,\n              style: slots.Filter?.props.style,\n              ...remainingFilterProps,\n            },\n            content: {\n              className: slots.Content?.props.className,\n              style: slots.Content?.props.style,\n              ...remainingContentProps,\n            },\n            emptyState: {\n              ...slots.EmptyState?.props,\n            },\n          }}\n          onFocus={(event) => {\n            if (!isFocusWithin) {\n              onFocus?.(event);\n              setIsFocusWithin(true);\n            }\n          }}\n          onKeyDown={(event) => {\n            if (!menuOpen) {\n              if (event.key === 'Enter' || event.key === ' ') {\n                dispatch({\n                  type: SelectActions.SELECTFOCUS,\n                });\n              }\n\n              return true;\n            }\n\n            // close the dropdown on Escape and focus the trigger\n            if (event.key === 'Escape') {\n              dispatch({\n                type: SelectActions.SELECTFOCUS,\n              });\n\n              hiddenTrigger?.focus();\n            }\n\n            if (filterRef.current || clearSelectionRef.current) {\n              // focus is on filter\n              if (document.activeElement === filterRef.current?.inputRef) {\n                // We only want to remove selected values with Backspace when the focus is not on the filter input\n                if (\n                  event.key === 'Backspace' &&\n                  filterRef.current.inputRef?.value === ''\n                ) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n\n                // focus back on the trigger on tab if there is no clear selection element or shift tab is pressed\n                if (event.key === 'Tab') {\n                  if (!clearSelectionRef.current || event.shiftKey) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    hiddenTrigger?.focus();\n                  } else {\n                    clearSelectionRef.current && setFocusOnOption(false); // prevent setting the focus on the option if there is a clear selection button when tabbing - the clear button should be the only element focused then\n                  }\n                }\n\n                // close the overlay when using a single select and selecting an option while searching in the filter\n                if (event.key === 'Enter' && !props.multiple) {\n                  dispatch({\n                    type: SelectActions.SELECTFOCUS,\n                  });\n                  hiddenTrigger?.focus();\n                }\n\n                // do not select any options if the select is in a loading state\n                if (event.key === 'Enter' && contentLoadingProp) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n\n                // do not select any options if typing space as the first character of the filter\n                if (event.key === ' ' && !filterValue) {\n                  setFilterValue(' ');\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n\n                handleArrowKeyOptionFocus(event.key);\n\n                return true;\n              }\n\n              // focus is on the clear selection element\n              if (document.activeElement === clearSelectionRef.current) {\n                setFocusOnOption(false);\n                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                  event.preventDefault();\n                }\n\n                // focus the trigger on tab (if it is not a shift tab press to focus back on the filter)\n                if (\n                  event.key === 'Tab' &&\n                  !(event.shiftKey && filterRef.current)\n                ) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  hiddenTrigger?.focus();\n                  setFocusOnOption(true);\n                }\n\n                // focus moves from the clear selection element back to the input\n                if (\n                  event.key === 'Tab' &&\n                  event.shiftKey &&\n                  filterRef.current\n                ) {\n                  setFocusOnOption(true);\n                }\n\n                return false;\n              }\n\n              try {\n                // focus is on hidden input element\n                if (\n                  document.activeElement &&\n                  document.getElementById(document.activeElement.id)\n                ) {\n                  if (event.key === 'Tab') {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    if (!event.shiftKey) {\n                      // set focus on filter if available\n                      if (filterRef.current) {\n                        filterRef.current.inputRef?.focus();\n                        return false;\n                      }\n\n                      // set focus on clearSelection if available\n                      if (clearSelectionRef.current) {\n                        clearSelectionRef.current.focus();\n                        setFocusOnOption(false);\n                        return false;\n                      }\n                    } else {\n                      // set focus on clearSelection if available\n                      if (clearSelectionRef.current) {\n                        clearSelectionRef.current.focus();\n                        setFocusOnOption(false);\n                        return false;\n                      }\n                      // set focus on filter if available\n                      if (filterRef.current) {\n                        filterRef.current.inputRef?.focus();\n                        return false;\n                      }\n                    }\n                  }\n\n                  handleArrowKeyOptionFocus(event.key);\n\n                  // do not select any options if the select is in a loading state\n                  if (contentLoadingProp) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                  }\n                }\n              } catch (error) {\n                // eslint-disable-next-line no-console\n                console.log(\n                  'Invalid query selector on the Select trigger',\n                  error,\n                );\n              }\n              return false;\n            }\n\n            try {\n              // close the dropdown when tab is pressed and no filter or clear selection is available\n              if (\n                document.activeElement &&\n                document.getElementById(document.activeElement.id)\n              ) {\n                if (event.key === 'Tab') {\n                  dispatch({\n                    type: SelectActions.SELECTFOCUS,\n                  });\n                } else {\n                  handleArrowKeyOptionFocus(event.key);\n                }\n              }\n            } catch (error) {\n              // eslint-disable-next-line no-console\n              console.log(\n                'Invalid query selector on the Select trigger',\n                error,\n              );\n            }\n\n            setFocusOnOption(true);\n          }}\n        />\n      </div>\n    </SelectMenuContext.Provider>\n  );\n}\n\nconst SelectForwardRef = forwardRef(SelectFwd);\n\n/**\n * Select component that uses a fallback FormFieldMessages-context if it wasn't wrapped in a FormField.\n */\nconst SelectRoot =\n  withFormFieldMessageContextProviderWithGenerics(SelectForwardRef);\n\n/**\n * The `Select` component allows you to choose one or multiple\n * options from a collapsed dropdown with options.\n * @public\n */\nexport const Select = Object.assign(SelectRoot, {\n  Content: SelectContent,\n  Option: SelectOption,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Trigger: SelectTrigger,\n  DisplayValue: SelectDisplayValue,\n  Prefix: SelectPrefix,\n  Suffix: SelectSuffix,\n  CustomTrigger: SelectCustomTrigger,\n  Filter: SelectFilter,\n  EmptyState: SelectEmptyState,\n});\n\n(Select as typeof Select & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAgoBQ;AAhoBR,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EAKA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP,OAAO,eAAe,oBAAoC;AAE1D,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,oBAA4C;AACrD,SAAS,aAAa,wBAAwB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,oBAA4C;AACrD,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,YAAY,YAAY;AASxB,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAWnC,SAAS,kBAAkB;AAC3B,SAAS,uDAAuD;AAChE,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AAMxC,MAAM,iBAAiB;AA6LvB,SAAS,oBACP,SACA,oBAC4B;AAC5B,aAAW,iBAAiB,SAAS;AACnC,QAAI,UAAU,aAAa,GAAG;AAC5B,UAAI,cAAc,UAAU,oBAAoB;AAC9C,eAAO;AAAA,MACT;AAAA,IACF,OAAO;AACL,iBAAW,UAAU,cAAc,SAAS;AAC1C,YAAI,UAAU,MAAM,KAAK,OAAO,UAAU,oBAAoB;AAC5D,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAGA,SAAS,UACP,OACA,cACA;AACA,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,QAAQ,eAAe,QAAQ;AAErC,QAAM,eAAe;AAAA,IACnB,MACE,mBAAmB,KAAK;AAAA,MACtB;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,IACF,CAAC,EAAE,cAAc;AAAA,IACnB,CAAC,MAAM,QAAQ,WAAW,UAAU;AAAA,EACtC;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,MAAM,QAAQ,SAAS,CAAC;AAE5B,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,GAAG;AAAA,EACL,IAAI,MAAM,SAAS,SAAS,CAAC;AAE7B,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,0BAA0B;AAAA,IAC1B,GAAG;AAAA,EACL,IAAI,MAAM,SAAS,SAAS,CAAC;AAE7B,QAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI,iBAA8B,MAAM,SAAS,YAAY;AAE7D,QAAM,EAAE,OAAO,aAAa,IAAI,eAAsC;AAAA,IACpE,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA,UAAW,aAAa;AAAA,EAC1B,CAAC;AAED,QAAM,kBAAkB,OAA0B,IAAI;AAEtD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAgC,IAAI;AAExE,QAAM,EAAE,UAAU,UAAU,IAAI,cAAc,SAAS,IACrD,0BAA0B;AAAA,IACxB,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,EACF,CAAC;AAEH,QAAM,EAAE,QAAQ,iBAAiB,IAAI,uBAAuB,iBAAiB;AAAA,IAC3E;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB;AAAA,IACtB,CAAC,OAAgB,WAAgC;AAC/C,UAAI,UAAU;AACZ,eAAO;AAAA,MACT;AAEA,YAAM,WAAW,QAAQ,OAAO,MAAM;AAEtC,UAAI,UAAU,UAAU;AAEtB,uBAAe,MAAM;AACnB,uBAAa,SAAS,CAAC,gBAAgB,iBAAiB;AACxD,yBAAe,QAAQ;AAAA,QACzB,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,cAAc,kBAAkB,YAAY;AAAA,EACzD;AAEA,QAAM,CAAC,UAAU,QAAQ,IAAI,WAAW,iBAAiB,KAAK;AAE9D,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,KAAK;AAEjE,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,EAAE,OAAO,sBAAsB,UAAU,wBAAwB,IACrE,4BAA4B;AAI9B,QAAM,YAAY,OAAY,IAAI;AAElC,QAAM,gBAAgB;AAAA,IACpB,MAAM,YAAY,cAAc,OAAO;AAAA,IACvC,CAAC,UAAU;AAAA,EACb;AACA,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,IAAI;AAIhE,YAAU,MAAM;AACd,QACE,qBAAqB,SACpB,gBAAgB,UAAa,gBAAgB,KAC9C;AACA,qBAAe,EAAE;AAAA,IACnB;AAAA,EAIF,GAAG,CAAC,gBAAgB,CAAC;AAErB,QAAM,eAAe;AAAA;AAAA;AAAA,IAGnB,WAAW,CAAC,WAIN;AACJ,aAAO,GAAG,OAAO,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,eAAe,CACnB,WAGG;AAEH,0BAAsB,MAAM;AAC1B,YAAM,cAAc,IAAI,MAAM,UAAU;AAAA,QACtC,SAAS;AAAA,QACT,YAAY;AAAA,MACd,CAAC;AACD,uBAAiB,SAAS,cAAc,WAAW;AAAA,IACrD,CAAC;AAED,QAAI,aAAa,OAAO;AACtB,qBAAe,EAAE;AAAA,IACnB;AAIA,QAAI,CAAC,eAAe;AAClB;AAAA,IACF;AAGA,QAAI,aAAa,OAAO;AAEtB,UAAI,WAAW,OAAO;AACpB;AAAA,MACF;AACA,UAAI,WAAW,MAAM;AAEnB,wBAAgB,IAAkD;AAAA,MACpE,OAAO;AACL;AAAA,UACG,QACG;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAIA,QAAI,aAAa,MAAM;AACrB,YAAM,uBACJ,OACA,IAAI,CAAC,qBAAqB,iBAAiB,KAAK;AAClD;AAAA,QACE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,YAAY,OAAuC,IAAI;AAC7D,QAAM,oBAAoB,OAAoB,IAAI;AAClD,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,sBAAsB,OAAkC,IAAI;AAElE,QAAM,4BAA4B,CAAC,QAA8B;AAC/D,QAAI,QAAQ,aAAa,QAAQ,aAAa;AAC5C;AAAA,IACF;AAEA,0BAAsB,MAAM;AAC1B,UAAI,CAAC,WAAW,SAAS;AACvB;AAAA,MACF;AAEA,YAAM,YAAY,WAAW;AAC7B,YAAM,iBAAiB,UAAU;AAAA,QAC/B;AAAA,MACF;AAEA,UAAI,gBAAgB;AAClB,uBAAe,eAAe;AAAA,UAC5B,OAAO;AAAA,QACT,CAAC;AAAA,MACH,WAAW,WAAW;AACpB,YAAI,QAAQ,aAAa;AACvB,oBAAU,YAAY;AAAA,QACxB,WAAW,oBAAoB,SAAS;AACtC,8BAAoB,QAAQ,eAAe;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA;AAAA,IACE;AAAA,IACA,OAAkC;AAAA,MAChC,SAAS,aAAa;AAAA,MACtB;AAAA,MACA,UAAU,gBAAgB;AAAA,MAC1B,OAAO,MAAM;AACX,uBAAe,MAAM;AAAA,MACvB;AAAA,MACA,MAAM,MAAM;AAEV,uBAAe,MAAM;AACrB,iBAAS;AAAA,UACP,MAAM,cAAc;AAAA,QACtB,CAAC;AAAA,MACH;AAAA,MACA,OAAO,MACL,SAAS;AAAA,QACP,MAAM,cAAc;AAAA,MACtB,CAAC;AAAA,MACH,UAAU,MAAM;AAGd,uBAAe,MAAM,gBAAgB,SAAS,eAAe,CAAC;AAC9D,kCAA0B;AAAA,UACxB,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,eAAe,yBAAyB,UAAU;AAAA,EACrD;AAMA,MAAI,YAAY,eAAe;AAC7B,UAAM,SAAS,UAAU;AACzB,QAAI,QAAQ,MAAM,eAAe;AAC/B,YAAM,qBAAqB,OAAO,MAAM,cAAc;AACtD,YAAM,mBAAmB,oBAAoB,SAAS,kBAAkB;AAGxE,aAAO,MAAM,gBAAgB;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,CAAC,mBAAmB,IAAI,oBAAoB,YAAY;AAC9D,QAAM,YAAY,eACd,sBACA,qBAAqB;AAEzB,QAAM,cAAc;AAAA,IAClB,OAAO,EAAE,OAAO,UAAU,SAAS;AAAA,IACnC,CAAC,UAAU,QAAQ;AAAA,EACrB;AAEA,QAAM,gBAAgB,CAAC,UAAiD;AACtE;AAAA;AAAA,MAEE,CAAC,MAAM,iBACN,MAAM,kBAAkB,iBACvB,MAAM,kBAAkB,kBAAkB,WAC1C,MAAM,kBAAkB,UAAU,SAAS;AAAA,MAC7C;AACA,UAAI,CAAC,YAAY,eAAe;AAC9B,yBAAiB,KAAK;AACtB,iBAAS,KAAK;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,aACjC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,OAAO,cAAc;AAAA,UACnB,WACE,qBAAqB,UAAU,qBAAqB;AAAA,QACxD,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,MACjD,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,WAAW,KAAK,OAAO,QAAQ,OAAO,wBAAwB;AAAA,YAC5D,CAAC,OAAO,eAAe,GAAG,CAAC,YAAY,CAAC,gBAAgB,CAAC;AAAA,UAC3D,CAAC;AAAA,UACD,UAAQ;AAAA,UACR;AAAA,UACA;AAAA,UAGA;AAAA,UACA;AAAA,UACA,UAAU,CAACA;AAAA;AAAA;AAAA,YAGT;AAAA,cACEA;AAAA,YAGF;AAAA;AAAA,UAEF,QAAQ;AAAA,UACR,kBAAkB;AAAA,UAClB,KAAK;AAAA,UACL,UAAU;AAAA,UACV,cAAY;AAAA,UACZ,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,gBAAc;AAAA,UACd,iBAAe;AAAA,UACf;AAAA,UAGA,cAAc;AAAA,UAEd,SAAS,YAAY;AAAA,UACrB,qBAAqB;AAAA,UACrB,mBAAmB,aAAa;AAAA,UAGhC,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,cAAc,oBAAoB;AAAA,UAClC,iBAAiB;AAAA,UAEjB,cAAc,MAAM,gBAAgB;AAAA,UACpC,QAAQ,MAAM,UAAU;AAAA,UACxB,eAAe,MAAM,iBAAiB;AAAA,UAEtC;AAAA,UACA;AAAA,UAEA;AAAA,UACA,YAAY;AAAA,UAEZ,cAAc,CAAC,QAAQ,eAAe;AACpC,gBAAI,qBAAqB,MAAM;AAC7B,qBAAO;AAAA,YACT;AACA,kBAAM,iBACJ,aAAsC,YAAY;AAGpD,mBAAO;AAAA,cACL;AAAA,cACA;AAAA,YACF;AAAA,UACF;AAAA,UACA,cAAc,MAAM,UAAU;AAAA,UAC9B,YAAY;AAAA,UACZ,eAAe,CAAC,UAAU,eAAe;AACvC,gBAAI,WAAW,WAAW,gBAAgB;AACxC,6BAAe,QAAQ;AAAA,YACzB;AAAA,UACF;AAAA,UACA,YAAY,MAAM,cAAc;AAAA,UAChC;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,0BAA0B;AAAA,UAC1B,gBAAgB;AAAA,YACd,SAAS;AAAA,cACP,WAAW,MAAM,SAAS,MAAM;AAAA,cAChC,OAAO,EAAE,GAAG,MAAM,SAAS,MAAM,MAAM;AAAA,cACvC,UAAU,CAAC,CAAC;AAAA,cACZ;AAAA,cACA,GAAG;AAAA,YACL;AAAA,YACA,QAAQ;AAAA,cACN,WAAW,MAAM,QAAQ,MAAM;AAAA,cAC/B,OAAO,MAAM,QAAQ,MAAM;AAAA,cAC3B,GAAG;AAAA,YACL;AAAA,YACA,SAAS;AAAA,cACP,WAAW,MAAM,SAAS,MAAM;AAAA,cAChC,OAAO,MAAM,SAAS,MAAM;AAAA,cAC5B,GAAG;AAAA,YACL;AAAA,YACA,YAAY;AAAA,cACV,GAAG,MAAM,YAAY;AAAA,YACvB;AAAA,UACF;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,gBAAI,CAAC,eAAe;AAClB,wBAAU,KAAK;AACf,+BAAiB,IAAI;AAAA,YACvB;AAAA,UACF;AAAA,UACA,WAAW,CAAC,UAAU;AACpB,gBAAI,CAAC,UAAU;AACb,kBAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,yBAAS;AAAA,kBACP,MAAM,cAAc;AAAA,gBACtB,CAAC;AAAA,cACH;AAEA,qBAAO;AAAA,YACT;AAGA,gBAAI,MAAM,QAAQ,UAAU;AAC1B,uBAAS;AAAA,gBACP,MAAM,cAAc;AAAA,cACtB,CAAC;AAED,6BAAe,MAAM;AAAA,YACvB;AAEA,gBAAI,UAAU,WAAW,kBAAkB,SAAS;AAElD,kBAAI,SAAS,kBAAkB,UAAU,SAAS,UAAU;AAE1D,oBACE,MAAM,QAAQ,eACd,UAAU,QAAQ,UAAU,UAAU,IACtC;AACA,wBAAM,eAAe;AACrB,wBAAM,gBAAgB;AAAA,gBACxB;AAGA,oBAAI,MAAM,QAAQ,OAAO;AACvB,sBAAI,CAAC,kBAAkB,WAAW,MAAM,UAAU;AAChD,0BAAM,eAAe;AACrB,0BAAM,gBAAgB;AACtB,mCAAe,MAAM;AAAA,kBACvB,OAAO;AACL,sCAAkB,WAAW,iBAAiB,KAAK;AAAA,kBACrD;AAAA,gBACF;AAGA,oBAAI,MAAM,QAAQ,WAAW,CAAC,MAAM,UAAU;AAC5C,2BAAS;AAAA,oBACP,MAAM,cAAc;AAAA,kBACtB,CAAC;AACD,iCAAe,MAAM;AAAA,gBACvB;AAGA,oBAAI,MAAM,QAAQ,WAAW,oBAAoB;AAC/C,wBAAM,eAAe;AACrB,wBAAM,gBAAgB;AAAA,gBACxB;AAGA,oBAAI,MAAM,QAAQ,OAAO,CAAC,aAAa;AACrC,iCAAe,GAAG;AAClB,wBAAM,eAAe;AACrB,wBAAM,gBAAgB;AAAA,gBACxB;AAEA,0CAA0B,MAAM,GAAG;AAEnC,uBAAO;AAAA,cACT;AAGA,kBAAI,SAAS,kBAAkB,kBAAkB,SAAS;AACxD,iCAAiB,KAAK;AACtB,oBAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AACxD,wBAAM,eAAe;AAAA,gBACvB;AAGA,oBACE,MAAM,QAAQ,SACd,EAAE,MAAM,YAAY,UAAU,UAC9B;AACA,wBAAM,eAAe;AACrB,wBAAM,gBAAgB;AACtB,iCAAe,MAAM;AACrB,mCAAiB,IAAI;AAAA,gBACvB;AAGA,oBACE,MAAM,QAAQ,SACd,MAAM,YACN,UAAU,SACV;AACA,mCAAiB,IAAI;AAAA,gBACvB;AAEA,uBAAO;AAAA,cACT;AAEA,kBAAI;AAEF,oBACE,SAAS,iBACT,SAAS,eAAe,SAAS,cAAc,EAAE,GACjD;AACA,sBAAI,MAAM,QAAQ,OAAO;AACvB,0BAAM,eAAe;AACrB,0BAAM,gBAAgB;AAEtB,wBAAI,CAAC,MAAM,UAAU;AAEnB,0BAAI,UAAU,SAAS;AACrB,kCAAU,QAAQ,UAAU,MAAM;AAClC,+BAAO;AAAA,sBACT;AAGA,0BAAI,kBAAkB,SAAS;AAC7B,0CAAkB,QAAQ,MAAM;AAChC,yCAAiB,KAAK;AACtB,+BAAO;AAAA,sBACT;AAAA,oBACF,OAAO;AAEL,0BAAI,kBAAkB,SAAS;AAC7B,0CAAkB,QAAQ,MAAM;AAChC,yCAAiB,KAAK;AACtB,+BAAO;AAAA,sBACT;AAEA,0BAAI,UAAU,SAAS;AACrB,kCAAU,QAAQ,UAAU,MAAM;AAClC,+BAAO;AAAA,sBACT;AAAA,oBACF;AAAA,kBACF;AAEA,4CAA0B,MAAM,GAAG;AAGnC,sBAAI,oBAAoB;AACtB,0BAAM,eAAe;AACrB,0BAAM,gBAAgB;AAAA,kBACxB;AAAA,gBACF;AAAA,cACF,SAAS,OAAO;AAEd,wBAAQ;AAAA,kBACN;AAAA,kBACA;AAAA,gBACF;AAAA,cACF;AACA,qBAAO;AAAA,YACT;AAEA,gBAAI;AAEF,kBACE,SAAS,iBACT,SAAS,eAAe,SAAS,cAAc,EAAE,GACjD;AACA,oBAAI,MAAM,QAAQ,OAAO;AACvB,2BAAS;AAAA,oBACP,MAAM,cAAc;AAAA,kBACtB,CAAC;AAAA,gBACH,OAAO;AACL,4CAA0B,MAAM,GAAG;AAAA,gBACrC;AAAA,cACF;AAAA,YACF,SAAS,OAAO;AAEd,sBAAQ;AAAA,gBACN;AAAA,gBACA;AAAA,cACF;AAAA,YACF;AAEA,6BAAiB,IAAI;AAAA,UACvB;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,mBAAmB,WAAW,SAAS;AAK7C,MAAM,aACJ,gDAAgD,gBAAgB;AAO3D,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,YAAY;AACd,CAAC;AAEA,OAAmD,cAClD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type MutableRefObject,\n  type PropsWithChildren,\n  type Ref,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type ReactNode,\n  type ReactElement,\n  type SetStateAction,\n  type Dispatch,\n} from 'react';\nimport ReactSelect, { createFilter, type GroupBase } from 'react-select';\n\nimport { components } from './components/components.js';\nimport type { MenuListFunctionRefObject } from './components/MenuList.js';\nimport { SelectMenuContext } from './contexts/SelectMenuContext.js';\nimport { useSelectOptions, _isOption } from './hooks/use-select-options.js';\nimport { useSelectSlots } from './hooks/use-select-slots.js';\nimport { useSelectValue } from './hooks/use-select-value.js';\nimport { SelectContent } from './SelectContent.js';\nimport { SelectCustomTrigger } from './SelectCustomTrigger.js';\nimport { SelectDisplayValue } from './SelectDisplayValue.js';\nimport {\n  SelectEmptyState,\n  type SelectEmptyStateProps,\n} from './SelectEmptyState.js';\nimport { SelectFilter, type SelectFilterProps } from './SelectFilter.js';\nimport { SelectGroup, SelectGroupLabel } from './SelectGroup.js';\nimport { SelectOption } from './SelectOption.js';\nimport { SelectPrefix, type SelectPrefixProps } from './SelectPrefix.js';\nimport { SelectSuffix } from './SelectSuffix.js';\nimport { SelectTrigger } from './SelectTrigger.js';\nimport {\n  reducer,\n  SelectActions,\n  type SelectReducerAction,\n} from './state/select-menu-state-reducer.js';\nimport * as styles from './styles/Select.sty.js';\nimport type {\n  BaseOption,\n  OptionOrGroup,\n  SelectContentWidthOptionsType,\n  SelectTriggerWidthOptionsType,\n  SelectMultiValue,\n  SelectSingleValue,\n} from './types.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { createStratoLogger } from '../../core/sdk/sdk-logger.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type {\n  FormControlState,\n  FormControlStateProps,\n} from '../../core/types/form-control-state.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { withFormFieldMessageContextProviderWithGenerics } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n} from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Select';\n\n// Redeclare react-select module to extend it with additional props for typesafety.\n// https://react-select.com/typescript#custom-select-props\ndeclare module 'react-select/dist/declarations/src/Select' {\n  export interface Props<\n    Option,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    IsMulti extends boolean,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    Group extends GroupBase<Option>,\n  > {\n    /** Custom placeholder text */\n    placeholderText?: ReactNode;\n    /** The trigger width set by the dev. */\n    triggerWidth?: SelectTriggerWidthOptionsType;\n    /** Custom select trigger */\n    customTrigger?: ReactElement<\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      { [key: string]: any } | null | undefined\n    >;\n    /** Custom display value. */\n    displayValue?: ReactNode[];\n    /** Prefix for the select trigger */\n    prefix?: ReactElement<SelectPrefixProps>;\n    /* TriggerRef that needs to be applied to the trigger in order to setup the menu positioning */\n    triggerRef: HTMLElement | null;\n    /* setter for the TriggerRef */\n    setTriggerRef: Dispatch<SetStateAction<HTMLDivElement | null>>;\n    /** Defines if the space for the prefix icons should be reserved in all options rendered */\n    optionsHavePrefix: boolean;\n    /** Select.Filter component specified by dev */\n    customFilter?: ReactElement<SelectFilterProps>;\n    /** Custom empty state provided by dev */\n    emptyState?: ReactElement<SelectEmptyStateProps>;\n    /** Form control state for errors and hints */\n    controlState?: FormControlState;\n    loading?: boolean;\n    clearable?: boolean;\n    isRequired?: boolean;\n    /** array of all select options (including those in groups) */\n    allOptions?: BaseOption<Option>[];\n    hiddenSelectRef: Ref<HTMLSelectElement>;\n    hiddenSelectName?: string;\n    /** whether the focus styles on the options should be visible */\n    focusOnOption: boolean;\n    /** Ref that needs to be applied to the filter input to manage the focus and keyboard navigation */\n    filterRef?: MutableRefObject<FormControlRef<HTMLDivElement> | null>;\n    /** Ref that needs to be applied to the clear selection element to manage the focus and keyboard navigation */\n    clearSelectionRef?: RefObject<HTMLElement | null>;\n    /** Ref that needs to be applied to the select content (menulist) element to manage the focus and keyboard navigation */\n    contentRef?: RefObject<HTMLDivElement | null>;\n    menuListFunctionRef?: RefObject<MenuListFunctionRefObject | null>;\n    /** The content width set by the dev. */\n    contentWidth?: SelectContentWidthOptionsType;\n    /** Whether the selected options are reordered to the top of the options. */\n    showSelectedOptionsFirst?: boolean;\n    /** The id used for the hidden input. */\n    selectInputId?: string;\n    /** Labels the current element. */\n    'aria-label'?: string;\n    /** Identifies the element (or elements) that label(s) the current element. */\n    'aria-labelledby'?: string;\n    /** Identifies the element (or elements) that describe(s) the object. */\n    'aria-describedby'?: string;\n    /** Identifies the element (or elements) that provide(s) a detailed, extended description for the object. */\n    'aria-details'?: string;\n    /** className and style prop for each of the components. */\n    componentProps: {\n      trigger?: StylingProps &\n        DataTestId &\n        BehaviorTrackingProps & { readOnly: boolean; ariaDisabled?: boolean };\n      content?: StylingProps & DataTestId & BehaviorTrackingProps;\n      filter?: StylingProps & DataTestId & BehaviorTrackingProps;\n      emptyState?: StylingProps & DataTestId & BehaviorTrackingProps;\n    };\n  }\n}\n\n// Redeclare react forwardRef to allow generic types on react\n// https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref\ndeclare module 'react' {\n  function forwardRef<T, P = unknown>(\n    render: (\n      props: P,\n      ref: import('react').Ref<T>,\n    ) => import('react').ReactElement | null,\n  ): (\n    props: P & import('react').RefAttributes<T>,\n  ) => import('react').ReactElement | null;\n}\n\n/**\n * Common select base props.\n * @public\n */\nexport type SelectBaseProps<T, Multiple extends boolean> = PropsWithChildren<{\n  /**\n   * Used to compare options with objects for values either by a specified property of the object or through a comparator function.\n   */\n  compareBy?: keyof T | ((valueA: T, valueB: T) => boolean);\n\n  /** Name used for the component when submitting it in a form */\n  name?: string;\n\n  /** Form name used to connect the component to a form */\n  form?: string;\n\n  /**\n   * Boolean to determine whether the component is required\n   *\n   * @defaultValue false\n   */\n  required?: boolean;\n\n  /**\n   * Whether the component is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Event handler called when the open state for the select changes\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n\n  /**\n   * Whether or not the select allows multiple selection or not\n   * @defaultValue false\n   */\n  multiple?: Multiple;\n\n  /**\n   * Whether or not the select is clearable.\n   * @defaultValue false for single select, true for multi select\n   */\n  clearable?: boolean;\n\n  /** Callback that is called when the select trigger loses focus. */\n  onBlur?: (e: FocusEvent<HTMLInputElement, Element>) => void;\n\n  /** Callback that is called when the select trigger gets focus. */\n  onFocus?: (e: FocusEvent<HTMLInputElement, Element>) => void;\n}> &\n  MaskingProps;\n\n/**\n * @public\n */\nexport type SelectOnChangeValue<\n  OptionValue,\n  Multiple extends boolean,\n> = Multiple extends true\n  ? SelectMultiValue<OptionValue>\n  : SelectSingleValue<OptionValue>;\n\n/**\n * Accepted properties for Select\n * @public\n */\nexport type SelectFormsProps<\n  /*\n   * TODO: Figure out how we can properly infer the type of the Select here\n   * because that would come from the value of the options (as children)\n   * which is not really doable with the given API.\n   */\n  OptionValue,\n  Multiple extends boolean,\n> = SelectBaseProps<OptionValue, Multiple> &\n  FormControlProps<\n    Multiple extends true\n      ? SelectMultiValue<OptionValue>\n      : SelectSingleValue<OptionValue>,\n    (value: SelectOnChangeValue<OptionValue, Multiple>) => void\n  > &\n  FormControlStateProps &\n  DOMProps &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps;\n\n/**\n * Function to return the item that should be focused after\n * updating all options via onChange in a controlled multi select.\n * @param options - all select options\n * @param focusedOptionValue - the value of the previously focused option\n * @returns option with the same value as the previously focused option or null\n */\nfunction getNewFocusedOption(\n  options: OptionOrGroup<BaseOption<unknown>>,\n  focusedOptionValue: unknown,\n): BaseOption<unknown> | null {\n  for (const optionOrGroup of options) {\n    if (_isOption(optionOrGroup)) {\n      if (optionOrGroup.value === focusedOptionValue) {\n        return optionOrGroup;\n      }\n    } else {\n      for (const option of optionOrGroup.options) {\n        if (_isOption(option) && option.value === focusedOptionValue) {\n          return option;\n        }\n      }\n    }\n  }\n\n  return null;\n}\n\n/** Select component */\nfunction SelectFwd<OptionValue, Multiple extends boolean = false>(\n  props: SelectFormsProps<OptionValue, Multiple>,\n  forwardedRef: Ref<FormControlWithOverlayRef>,\n) {\n  const {\n    multiple = false,\n    disabled: propsDisabled,\n    controlState,\n    clearable = multiple,\n    name,\n    id: propId,\n    readOnly: propReadOnly,\n    children,\n    value: propsValue,\n    defaultValue: propsDefaultValue,\n    onChange: propsOnChange,\n    onFocus,\n    onBlur,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    onOpenChange,\n    required: propsRequired,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const slots = useSelectSlots(children);\n\n  const stratoLogger = useMemo(\n    () =>\n      createStratoLogger.bind({\n        name,\n        id: propId,\n        ariaLabel,\n        dataTestId,\n      })(COMPONENT_NAME),\n    [name, propId, ariaLabel, dataTestId],\n  );\n\n  const {\n    disableFiltering,\n    value: filterValueProp,\n    defaultValue: filterDefaultValueProp,\n    onChange: filterOnChangeProp,\n    ...remainingFilterProps\n  } = slots.Filter?.props ?? {};\n\n  const {\n    width: triggerWidthProp,\n    placeholder: triggerPlaceholderProp,\n    ...remainingTriggerProps\n  } = slots.Trigger?.props ?? {};\n\n  const {\n    width: contentWidthProp,\n    loading: contentLoadingProp,\n    showSelectedOptionsFirst: contentShowSelectedOptionsFirstProp,\n    ...remainingContentProps\n  } = slots.Content?.props ?? {};\n\n  const {\n    optionsOrGroups: options,\n    optionsHavePrefix,\n    allOptions,\n  } = useSelectOptions<OptionValue>(slots.Content, stratoLogger);\n\n  const { value, defaultValue } = useSelectValue<OptionValue, Multiple>({\n    value: propsValue,\n    defaultValue: propsDefaultValue,\n    options,\n    multiple: (multiple === true) as Multiple,\n  });\n\n  const hiddenSelectRef = useRef<HTMLSelectElement>(null);\n\n  const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n  const { disabled, required, id, ariaDisabled, readOnly } =\n    useSyncedFormControlProps({\n      propDisabled: propsDisabled,\n      propRequired: propsRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n\n  const { onBlur: validationOnBlur } = useFormFieldValidation(hiddenSelectRef, {\n    required,\n  });\n\n  const menuOpenReducer = useCallback(\n    (state: boolean, action: SelectReducerAction) => {\n      if (readOnly) {\n        return state;\n      }\n\n      const newState = reducer(state, action);\n\n      if (state !== newState) {\n        // Delay the onOpenChange call to not run into a bad setState().\n        queueMicrotask(() => {\n          newState === false && !controlState && validationOnBlur();\n          onOpenChange?.(newState);\n        });\n      }\n\n      return newState;\n    },\n    [readOnly, controlState, validationOnBlur, onOpenChange],\n  );\n\n  const [menuOpen, dispatch] = useReducer(menuOpenReducer, false);\n\n  const [isFocusWithin, setIsFocusWithin] = useState<boolean>(false);\n\n  const [filterValue, setFilterValue] = useControllableState({\n    value: filterValueProp,\n    defaultValue: filterDefaultValueProp,\n    onChange: filterOnChangeProp,\n  });\n\n  const { state: messagesContextState, dispatch: messagesContextDispatch } =\n    useFormFieldMessagesContext();\n\n  // any is needed as the needed type coming from the react-select is not exported\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const selectRef = useRef<any>(null);\n\n  const hiddenTrigger = useMemo(\n    () => triggerRef?.querySelector('input'),\n    [triggerRef],\n  );\n  const [focusOnOption, setFocusOnOption] = useState<boolean>(true);\n\n  // If the disableFiltering value changes, the filterValue will need to be\n  // reset\n  useEffect(() => {\n    if (\n      disableFiltering === true &&\n      (filterValue !== undefined || filterValue !== '')\n    ) {\n      setFilterValue('');\n    }\n    // We don't want to include filterValue as dependency because when the user types in the input and\n    // disableFiltering is true, we don't want to clear the input\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disableFiltering]);\n\n  const filterConfig = {\n    // Filter by both visible label and option value/textValue.\n    // This allows searching by value (e.g. \"green\") when the rendered label differs.\n    stringify: (option: {\n      label: string;\n      value: string;\n      data: BaseOption<OptionValue>;\n    }) => {\n      const searchValue = option.data.textValue ?? option.value;\n\n      if (searchValue && searchValue !== option.label) {\n        return `${option.label} ${searchValue}`;\n      }\n\n      return `${option.label}`;\n    },\n  };\n\n  const handleChange = (\n    option:\n      | SelectSingleValue<BaseOption<OptionValue>>\n      | SelectMultiValue<BaseOption<OptionValue>>,\n  ) => {\n    // Send native onChange event for any form control / onChange listeners\n    requestAnimationFrame(() => {\n      const nativeEvent = new Event('change', {\n        bubbles: true,\n        cancelable: true,\n      });\n      hiddenSelectRef?.current?.dispatchEvent(nativeEvent);\n    });\n\n    if (multiple === false) {\n      setFilterValue(''); // clear the filter when an option is selected in single mode\n    }\n\n    // Early exit if the onChange prop is not defined, there is nothing that needs\n    // to be done.\n    if (!propsOnChange) {\n      return;\n    }\n\n    // In a single select scenario, it will only emit a single value of the selected option\n    if (multiple === false) {\n      // If the clicked option is the same as the selected one we can return early.\n      if (option === value) {\n        return;\n      }\n      if (option === null) {\n        // Ensures that null is returned if no value is selected\n        propsOnChange?.(null as SelectOnChangeValue<OptionValue, Multiple>);\n      } else {\n        propsOnChange?.(\n          (option as SelectSingleValue<BaseOption<OptionValue>>)\n            ?.value as SelectOnChangeValue<OptionValue, Multiple>,\n        );\n      }\n    }\n\n    // In a multi select scenario, it will map the value of all selected options and report them\n    // in the on change.\n    if (multiple === true) {\n      const selectedOptionValues = (\n        option as SelectMultiValue<BaseOption<OptionValue>>\n      ).map((individualOption) => individualOption.value);\n      propsOnChange?.(\n        selectedOptionValues as SelectOnChangeValue<OptionValue, Multiple>,\n      );\n    }\n  };\n\n  const filterRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const clearSelectionRef = useRef<HTMLElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const menuListFunctionRef = useRef<MenuListFunctionRefObject>(null);\n\n  const handleArrowKeyOptionFocus = (key: KeyboardEvent['key']) => {\n    if (key !== 'ArrowUp' && key !== 'ArrowDown') {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      if (!contentRef.current) {\n        return;\n      }\n\n      const container = contentRef.current;\n      const focusedElement = container.querySelector(\n        '.strato-select-option--focus',\n      );\n\n      if (focusedElement) {\n        focusedElement.scrollIntoView({\n          block: 'nearest',\n        });\n      } else if (container) {\n        if (key === 'ArrowDown') {\n          container.scrollTop = 0;\n        } else if (menuListFunctionRef.current) {\n          menuListFunctionRef.current.scrollToBottom();\n        }\n      }\n    });\n  };\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef => ({\n      element: containerRef.current,\n      triggerRef: triggerRef,\n      inputRef: hiddenSelectRef.current,\n      focus: () => {\n        hiddenTrigger?.focus();\n      },\n      open: () => {\n        // When opened programmatically the hidden input needs to be focused for the virtual focus\n        hiddenTrigger?.focus();\n        dispatch({\n          type: SelectActions.OPEN,\n        });\n      },\n      close: () =>\n        dispatch({\n          type: SelectActions.CLOSE,\n        }),\n      validate: () => {\n        // The initialization of the hiddenSelectRef is delayed, therefore,\n        // we want to check the validity at the end of the render cycle.\n        queueMicrotask(() => hiddenSelectRef.current?.reportValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [hiddenTrigger, messagesContextDispatch, triggerRef],\n  );\n\n  /**\n   * Workaround for the focus to stay on the selected option for the controlled multi select\n   * See: https://github.com/JedWatson/react-select/issues/5367\n   */\n  if (multiple && propsOnChange) {\n    const select = selectRef.current;\n    if (select?.state.focusedOption) {\n      const focusedOptionValue = select.state.focusedOption.value;\n      const newFocusedOption = getNewFocusedOption(options, focusedOptionValue);\n\n      // HACK: manipulating the state without setState is evil (but needed here as we are mid-transition)\n      select.state.focusedOption = newFocusedOption;\n    }\n  }\n\n  const [hasFormControlError] = useFormControlState(controlState);\n  const showError = controlState\n    ? hasFormControlError\n    : messagesContextState.showError;\n\n  const contextMemo = useMemo(\n    () => ({ state: menuOpen, dispatch }),\n    [menuOpen, dispatch],\n  );\n\n  const onBlurHandler = (event: FocusEvent<HTMLInputElement, Element>) => {\n    if (\n      // The relatedTarget is null when the focus leaves the browser and we want to still trigger the onBlur in this case.\n      !event.relatedTarget ||\n      (event.relatedTarget !== hiddenTrigger &&\n        event.relatedTarget !== clearSelectionRef.current &&\n        event.relatedTarget !== filterRef.current?.inputRef)\n    ) {\n      if (!menuOpen && isFocusWithin) {\n        setIsFocusWithin(false);\n        onBlur?.(event);\n      }\n    }\n  };\n\n  return (\n    <SelectMenuContext.Provider value={contextMemo}>\n      <div\n        ref={containerRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={clsx(\n          styles.selectWrapper({\n            fullWidth:\n              triggerWidthProp === 'full' || triggerWidthProp === '100%',\n          }),\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        {...mergeProps(restProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ReactSelect\n          instanceId={id}\n          selectInputId={id}\n          className={clsx(styles.select, styles.clearReactSelectZIndex, {\n            [styles.validAndEnabled]: !disabled && !ariaDisabled && !showError,\n          })}\n          unstyled\n          options={options}\n          components={components}\n          // TODO: React select does an instance equality check on this one, so we need to figure out how\n          // to keep that in sync over a controlled state.\n          value={value}\n          defaultValue={defaultValue}\n          onChange={(value) =>\n            // Need to cast this here as React.Select handles the value still as unknown.\n            // TODO: Maybe we can go to the JSX generic?\n            handleChange(\n              value as\n                | SelectSingleValue<BaseOption<OptionValue>>\n                | SelectMultiValue<BaseOption<OptionValue>>,\n            )\n          }\n          onBlur={onBlurHandler}\n          hiddenSelectName={name}\n          ref={selectRef}\n          pageSize={5}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          aria-details={ariaDetails}\n          aria-disabled={ariaDisabled}\n          hiddenSelectRef={hiddenSelectRef}\n          // This has to be set to false as we don't want the input directly in the select trigger\n          // but handle this ourselves\n          isSearchable={false}\n          // Multi selection relevant props\n          isMulti={multiple ?? false}\n          hideSelectedOptions={false}\n          closeMenuOnSelect={multiple === false}\n          // This has to be set to false as we don't want the clear button directly in the select trigger\n          // but handle this ourselves\n          isClearable={false}\n          isDisabled={disabled}\n          isRequired={required}\n          triggerWidth={triggerWidthProp}\n          contentWidth={contentWidthProp ?? 'trigger'}\n          placeholderText={triggerPlaceholderProp}\n          // DISCUSS: Figure out if `undefined` is better here or if we should use `null`\n          displayValue={slots.DisplayValue ?? undefined}\n          prefix={slots.Prefix ?? undefined}\n          customTrigger={slots.CustomTrigger ?? undefined}\n          // Trigger and Menu (Popper) ref connections\n          triggerRef={triggerRef}\n          setTriggerRef={setTriggerRef}\n          // Reserving space for prefix icons\n          optionsHavePrefix={optionsHavePrefix}\n          menuIsOpen={menuOpen}\n          // Handles Filtering in the current select\n          filterOption={(option, inputValue) => {\n            if (disableFiltering === true) {\n              return true;\n            }\n            const filterFunction =\n              createFilter<BaseOption<OptionValue>>(filterConfig);\n\n            // We need to cast this here, because the filter option prop only infers option as `FilterOptionOption<unknown>`. The `FilterOptionOption` type is not exposed by react-select.\n            return filterFunction(\n              option as Parameters<typeof filterFunction>[0],\n              inputValue,\n            );\n          }}\n          customFilter={slots.Filter ?? undefined}\n          inputValue={filterValue}\n          onInputChange={(newValue, actionmeta) => {\n            if (actionmeta.action === 'input-change') {\n              setFilterValue(newValue);\n            }\n          }}\n          emptyState={slots.EmptyState ?? undefined}\n          controlState={controlState}\n          loading={contentLoadingProp}\n          clearable={clearable}\n          allOptions={allOptions}\n          tabSelectsValue={false}\n          focusOnOption={focusOnOption}\n          contentRef={contentRef}\n          menuListFunctionRef={menuListFunctionRef}\n          filterRef={filterRef}\n          clearSelectionRef={clearSelectionRef}\n          showSelectedOptionsFirst={contentShowSelectedOptionsFirstProp}\n          componentProps={{\n            trigger: {\n              className: slots.Trigger?.props.className,\n              style: { ...slots.Trigger?.props.style },\n              readOnly: !!readOnly,\n              ariaDisabled,\n              ...remainingTriggerProps,\n            },\n            filter: {\n              className: slots.Filter?.props.className,\n              style: slots.Filter?.props.style,\n              ...remainingFilterProps,\n            },\n            content: {\n              className: slots.Content?.props.className,\n              style: slots.Content?.props.style,\n              ...remainingContentProps,\n            },\n            emptyState: {\n              ...slots.EmptyState?.props,\n            },\n          }}\n          onFocus={(event) => {\n            if (!isFocusWithin) {\n              onFocus?.(event);\n              setIsFocusWithin(true);\n            }\n          }}\n          onKeyDown={(event) => {\n            if (!menuOpen) {\n              if (event.key === 'Enter' || event.key === ' ') {\n                dispatch({\n                  type: SelectActions.SELECTFOCUS,\n                });\n              }\n\n              return true;\n            }\n\n            // close the dropdown on Escape and focus the trigger\n            if (event.key === 'Escape') {\n              dispatch({\n                type: SelectActions.SELECTFOCUS,\n              });\n\n              hiddenTrigger?.focus();\n            }\n\n            if (filterRef.current || clearSelectionRef.current) {\n              // focus is on filter\n              if (document.activeElement === filterRef.current?.inputRef) {\n                // We only want to remove selected values with Backspace when the focus is not on the filter input\n                if (\n                  event.key === 'Backspace' &&\n                  filterRef.current.inputRef?.value === ''\n                ) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n\n                // focus back on the trigger on tab if there is no clear selection element or shift tab is pressed\n                if (event.key === 'Tab') {\n                  if (!clearSelectionRef.current || event.shiftKey) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    hiddenTrigger?.focus();\n                  } else {\n                    clearSelectionRef.current && setFocusOnOption(false); // prevent setting the focus on the option if there is a clear selection button when tabbing - the clear button should be the only element focused then\n                  }\n                }\n\n                // close the overlay when using a single select and selecting an option while searching in the filter\n                if (event.key === 'Enter' && !props.multiple) {\n                  dispatch({\n                    type: SelectActions.SELECTFOCUS,\n                  });\n                  hiddenTrigger?.focus();\n                }\n\n                // do not select any options if the select is in a loading state\n                if (event.key === 'Enter' && contentLoadingProp) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n\n                // do not select any options if typing space as the first character of the filter\n                if (event.key === ' ' && !filterValue) {\n                  setFilterValue(' ');\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n\n                handleArrowKeyOptionFocus(event.key);\n\n                return true;\n              }\n\n              // focus is on the clear selection element\n              if (document.activeElement === clearSelectionRef.current) {\n                setFocusOnOption(false);\n                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                  event.preventDefault();\n                }\n\n                // focus the trigger on tab (if it is not a shift tab press to focus back on the filter)\n                if (\n                  event.key === 'Tab' &&\n                  !(event.shiftKey && filterRef.current)\n                ) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  hiddenTrigger?.focus();\n                  setFocusOnOption(true);\n                }\n\n                // focus moves from the clear selection element back to the input\n                if (\n                  event.key === 'Tab' &&\n                  event.shiftKey &&\n                  filterRef.current\n                ) {\n                  setFocusOnOption(true);\n                }\n\n                return false;\n              }\n\n              try {\n                // focus is on hidden input element\n                if (\n                  document.activeElement &&\n                  document.getElementById(document.activeElement.id)\n                ) {\n                  if (event.key === 'Tab') {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    if (!event.shiftKey) {\n                      // set focus on filter if available\n                      if (filterRef.current) {\n                        filterRef.current.inputRef?.focus();\n                        return false;\n                      }\n\n                      // set focus on clearSelection if available\n                      if (clearSelectionRef.current) {\n                        clearSelectionRef.current.focus();\n                        setFocusOnOption(false);\n                        return false;\n                      }\n                    } else {\n                      // set focus on clearSelection if available\n                      if (clearSelectionRef.current) {\n                        clearSelectionRef.current.focus();\n                        setFocusOnOption(false);\n                        return false;\n                      }\n                      // set focus on filter if available\n                      if (filterRef.current) {\n                        filterRef.current.inputRef?.focus();\n                        return false;\n                      }\n                    }\n                  }\n\n                  handleArrowKeyOptionFocus(event.key);\n\n                  // do not select any options if the select is in a loading state\n                  if (contentLoadingProp) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                  }\n                }\n              } catch (error) {\n                // eslint-disable-next-line no-console\n                console.log(\n                  'Invalid query selector on the Select trigger',\n                  error,\n                );\n              }\n              return false;\n            }\n\n            try {\n              // close the dropdown when tab is pressed and no filter or clear selection is available\n              if (\n                document.activeElement &&\n                document.getElementById(document.activeElement.id)\n              ) {\n                if (event.key === 'Tab') {\n                  dispatch({\n                    type: SelectActions.SELECTFOCUS,\n                  });\n                } else {\n                  handleArrowKeyOptionFocus(event.key);\n                }\n              }\n            } catch (error) {\n              // eslint-disable-next-line no-console\n              console.log(\n                'Invalid query selector on the Select trigger',\n                error,\n              );\n            }\n\n            setFocusOnOption(true);\n          }}\n        />\n      </div>\n    </SelectMenuContext.Provider>\n  );\n}\n\nconst SelectForwardRef = forwardRef(SelectFwd);\n\n/**\n * Select component that uses a fallback FormFieldMessages-context if it wasn't wrapped in a FormField.\n */\nconst SelectRoot =\n  withFormFieldMessageContextProviderWithGenerics(SelectForwardRef);\n\n/**\n * The `Select` component allows you to choose one or multiple\n * options from a collapsed dropdown with options.\n * @public\n */\nexport const Select = Object.assign(SelectRoot, {\n  Content: SelectContent,\n  Option: SelectOption,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Trigger: SelectTrigger,\n  DisplayValue: SelectDisplayValue,\n  Prefix: SelectPrefix,\n  Suffix: SelectSuffix,\n  CustomTrigger: SelectCustomTrigger,\n  Filter: SelectFilter,\n  EmptyState: SelectEmptyState,\n});\n\n(Select as typeof Select & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": ["value"]
 }

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

@@ -65,6 +65,7 @@ function Control(props) {
       key: "hidden-react-select-input",
       id,
       autoComplete: "off",
+      "aria-haspopup": "listbox",
       "aria-invalid": showError,
       "aria-labelledby": ariaLabelledBy ?? customTriggerId ?? triggerId,
       "aria-label": selectProps["aria-label"],

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 { 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": "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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-haspopup': 'listbox',\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": "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",
   "names": []
 }

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

@@ -75,6 +75,7 @@ function MenuList(props) {
       children: /* @__PURE__ */ jsx(
         "div",
         {
+          role: "presentation",
           style: {
             height: optionVirtualizer.getTotalSize(),
             display: "grid",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/MenuList.tsx"],
-  "sourcesContent": ["import { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport type {\n  GroupBase,\n  MenuListProps as ReactSelectMenuListProps,\n} from 'react-select';\n\nimport { NoOptionsMessage } from './NoOptionsMessage.js';\nimport type { OptionProps } from './Option.js';\nimport {\n  applyStoredSelectionSortingOptions,\n  sortSelectedOptions,\n} from './sort-selected-options-first.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseGroup, BaseOption } from '../types.js';\n\n/**\n * @internal\n */\nexport interface MenuListFunctionRefObject {\n  /** Function to scroll to the last option. */\n  scrollToBottom: () => void;\n}\n\ntype MenuListProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectMenuListProps<OptionValue, isMulti, Group>;\n\nexport function MenuList<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<MenuListProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const { children, selectProps, innerProps } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n  // Get a setter on the parentRef to get notified when the element re-renders.\n  const [notifyParentRefChange, setNotifyParentRefChange] =\n    useState<HTMLDivElement | null>();\n\n  const initialRender = useRef(true);\n  const sortingMap = useRef(new WeakMap());\n\n  let childrenArray = Children.toArray(children) as Array<\n    ReactElement<OptionProps<BaseOption<OptionValue>, isMulti, Group>>\n  >;\n\n  const currentChildrenLength = useRef(childrenArray.length);\n\n  // During the initial rendering, the sorting is created and positions saved in a WeakMap.\n  // If only the NoOptionsMessage/empty state is shown we don't need any sorting\n  if (\n    selectProps.showSelectedOptionsFirst &&\n    !(childrenArray.length === 1 && childrenArray[0].type === NoOptionsMessage)\n  ) {\n    if (initialRender.current === true) {\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    } else if (currentChildrenLength.current !== childrenArray.length) {\n      currentChildrenLength.current = childrenArray.length;\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    }\n    // Otherwise the data is sorted by the initial sorting parameters.\n    else {\n      const [newChildrenArray, newSortingMap] =\n        applyStoredSelectionSortingOptions(childrenArray, sortingMap.current);\n      childrenArray = newChildrenArray;\n      if (newSortingMap) {\n        sortingMap.current = newSortingMap;\n      }\n    }\n  }\n\n  initialRender.current = false;\n\n  const optionVirtualizer = useVirtualizer({\n    count: childrenArray.length,\n    getScrollElement: () => parentRef.current,\n    overscan: 5,\n    estimateSize: () => 32,\n  });\n\n  const menulistref = useMergeRefs([\n    props.innerRef,\n    parentRef,\n    setNotifyParentRefChange,\n    selectProps.contentRef,\n  ]);\n\n  useImperativeHandle(\n    selectProps.menuListFunctionRef,\n    (): MenuListFunctionRefObject => ({\n      scrollToBottom: () => {\n        optionVirtualizer.scrollToIndex(childrenArray.length);\n      },\n    }),\n  );\n\n  // When the parentElement re-renders, we will need to remeasure the virtualizer in order to\n  // keep the correct height.\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      optionVirtualizer.measure();\n    });\n    // Deliberately leave optionVirtualizer out of the update deps to prevent a maximum update depth exceeded issue.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notifyParentRefChange, childrenArray.length]);\n\n  return (\n    <div\n      {...innerProps}\n      ref={menulistref}\n      className={clsx(styles.selectMenuListWrapper, 'strato-select-menulist')}\n      style={{\n        width:\n          optionVirtualizer.scrollOffset !== null &&\n          optionVirtualizer.scrollOffset > 0 &&\n          selectProps.contentWidth === 'max-content'\n            ? optionVirtualizer.scrollRect?.width\n            : undefined,\n      }}\n    >\n      <div\n        style={{\n          height: optionVirtualizer.getTotalSize(),\n          display: 'grid',\n          gridTemplateRows: optionVirtualizer.measurementsCache\n            .map((el) => `${el.size}px`)\n            .join(' '),\n        }}\n        key={`wrapper-${selectProps.options.length}`}\n        className={styles.selectVirtualizationWrapper}\n      >\n        {optionVirtualizer.getVirtualItems().map((virtualRow) => {\n          const child = childrenArray?.[virtualRow.index];\n          return (\n            <div\n              key={virtualRow.key}\n              className=\"strato-select-option\"\n              // data-index is required for the virtualizer to map the measure\n              // element correctly to the measured index.\n              data-index={virtualRow.index}\n              style={{\n                gridRow: virtualRow.index + 1,\n                minWidth: 0,\n                height: 'fit-content',\n              }}\n              ref={(el) => {\n                optionVirtualizer.measureElement(el);\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport type {\n  GroupBase,\n  MenuListProps as ReactSelectMenuListProps,\n} from 'react-select';\n\nimport { NoOptionsMessage } from './NoOptionsMessage.js';\nimport type { OptionProps } from './Option.js';\nimport {\n  applyStoredSelectionSortingOptions,\n  sortSelectedOptions,\n} from './sort-selected-options-first.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseGroup, BaseOption } from '../types.js';\n\n/**\n * @internal\n */\nexport interface MenuListFunctionRefObject {\n  /** Function to scroll to the last option. */\n  scrollToBottom: () => void;\n}\n\ntype MenuListProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectMenuListProps<OptionValue, isMulti, Group>;\n\nexport function MenuList<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<MenuListProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const { children, selectProps, innerProps } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n  // Get a setter on the parentRef to get notified when the element re-renders.\n  const [notifyParentRefChange, setNotifyParentRefChange] =\n    useState<HTMLDivElement | null>();\n\n  const initialRender = useRef(true);\n  const sortingMap = useRef(new WeakMap());\n\n  let childrenArray = Children.toArray(children) as Array<\n    ReactElement<OptionProps<BaseOption<OptionValue>, isMulti, Group>>\n  >;\n\n  const currentChildrenLength = useRef(childrenArray.length);\n\n  // During the initial rendering, the sorting is created and positions saved in a WeakMap.\n  // If only the NoOptionsMessage/empty state is shown we don't need any sorting\n  if (\n    selectProps.showSelectedOptionsFirst &&\n    !(childrenArray.length === 1 && childrenArray[0].type === NoOptionsMessage)\n  ) {\n    if (initialRender.current === true) {\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    } else if (currentChildrenLength.current !== childrenArray.length) {\n      currentChildrenLength.current = childrenArray.length;\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    }\n    // Otherwise the data is sorted by the initial sorting parameters.\n    else {\n      const [newChildrenArray, newSortingMap] =\n        applyStoredSelectionSortingOptions(childrenArray, sortingMap.current);\n      childrenArray = newChildrenArray;\n      if (newSortingMap) {\n        sortingMap.current = newSortingMap;\n      }\n    }\n  }\n\n  initialRender.current = false;\n\n  const optionVirtualizer = useVirtualizer({\n    count: childrenArray.length,\n    getScrollElement: () => parentRef.current,\n    overscan: 5,\n    estimateSize: () => 32,\n  });\n\n  const menulistref = useMergeRefs([\n    props.innerRef,\n    parentRef,\n    setNotifyParentRefChange,\n    selectProps.contentRef,\n  ]);\n\n  useImperativeHandle(\n    selectProps.menuListFunctionRef,\n    (): MenuListFunctionRefObject => ({\n      scrollToBottom: () => {\n        optionVirtualizer.scrollToIndex(childrenArray.length);\n      },\n    }),\n  );\n\n  // When the parentElement re-renders, we will need to remeasure the virtualizer in order to\n  // keep the correct height.\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      optionVirtualizer.measure();\n    });\n    // Deliberately leave optionVirtualizer out of the update deps to prevent a maximum update depth exceeded issue.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notifyParentRefChange, childrenArray.length]);\n\n  return (\n    <div\n      {...innerProps}\n      ref={menulistref}\n      className={clsx(styles.selectMenuListWrapper, 'strato-select-menulist')}\n      style={{\n        width:\n          optionVirtualizer.scrollOffset !== null &&\n          optionVirtualizer.scrollOffset > 0 &&\n          selectProps.contentWidth === 'max-content'\n            ? optionVirtualizer.scrollRect?.width\n            : undefined,\n      }}\n    >\n      {/* role=\"presentation\" on a div is intentional \u2014 neutralizes the virtualization wrapper so screen readers count options correctly */}\n      <div\n        role=\"presentation\"\n        style={{\n          height: optionVirtualizer.getTotalSize(),\n          display: 'grid',\n          gridTemplateRows: optionVirtualizer.measurementsCache\n            .map((el) => `${el.size}px`)\n            .join(' '),\n        }}\n        key={`wrapper-${selectProps.options.length}`}\n        className={styles.selectVirtualizationWrapper}\n      >\n        {optionVirtualizer.getVirtualItems().map((virtualRow) => {\n          const child = childrenArray?.[virtualRow.index];\n          return (\n            <div\n              key={virtualRow.key}\n              className=\"strato-select-option\"\n              // data-index is required for the virtualizer to map the measure\n              // element correctly to the measured index.\n              data-index={virtualRow.index}\n              style={{\n                gridRow: virtualRow.index + 1,\n                minWidth: 0,\n                height: 'fit-content',\n              }}\n              ref={(el) => {\n                optionVirtualizer.measureElement(el);\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -22,6 +22,7 @@ function Option(props) {
     className: consumerClassName,
     style: consumerStyle,
     "data-testid": dataTestId,
+    "aria-label": ariaLabel,
     prefix,
     suffix
   } = props.data;
@@ -66,6 +67,7 @@ function Option(props) {
         }
       },
       "aria-selected": isSelected,
+      "aria-label": ariaLabel,
       ...behavioralTrackingProps,
       children: [
         isMulti === true ? /* @__PURE__ */ jsx(

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 { 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;",
+  "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    'aria-label': ariaLabel,\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      aria-label={ariaLabel}\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": "AAiEI,SAuCQ,KAvCR;AAjEJ,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,cAAc;AAAA,IACd;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,MACf,cAAY;AAAA,MACX,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/hooks/use-select-options.js

@@ -90,9 +90,6 @@ function getOptionLabel(option, fallbackLabel) {
   }
   const labelIsStringifyable = _canReceiveDefaultTextFormat(option.label);
   const stringifiedValue = safeStringify(option.value);
-  if (labelIsStringifyable && stringifiedValue) {
-    return `${option.label} ${stringifiedValue}`;
-  }
   if (labelIsStringifyable) {
     return `${option.label}`;
   }