@dynatrace/strato-components 3.11.2 → 3.12.0

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

@@ -126,7 +126,13 @@ function Control(props) {
           ..._mergeProps(
             selectProps.customTrigger.props,
             innerProps,
-            ...isDisabled ? [] : [interactionProps]
+            ...isDisabled ? [] : [
+              interactionProps,
+              {
+                onFocus: selectProps.onFocus,
+                onBlur: selectProps.onBlur
+              }
+            ]
           )
         },
         [selectProps.customTrigger.props?.children, hiddenInput]
@@ -138,6 +144,8 @@ function Control(props) {
     interactionProps,
     rootRef,
     selectProps.customTrigger,
+    selectProps.onFocus,
+    selectProps.onBlur,
     triggerId
   ]);
   if (customTrigger) {
@@ -208,6 +216,7 @@ function Control(props) {
         required: selectProps.isRequired,
         selectedValues: selectProps.value,
         name: selectProps.hiddenSelectName,
+        form: selectProps.hiddenSelectForm,
         disabled: isDisabled || readOnly,
         controlState: selectProps.controlState
       }

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  Children,\n  cloneElement,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  useMemo,\n  useRef,\n} from 'react';\nimport type {\n  ControlProps as ReactSelectControlProps,\n  GroupBase,\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 { useFocusRing } from '../../../core/hooks/useFocusRing.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../../core/hooks/useVisualRefreshEnabled.js';\nimport { OverlayStackingProvider } from '../../../core/providers/OverlayStackingProvider.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 { 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 showError = selectProps.formControlShowError;\n  const hint = selectProps.formControlHint;\n\n  // with the visual refresh enabled, a disabled select should not receive critical coloring on error\n  const isCritical = useVisualRefreshEnabled()\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          id={selectProps.formControlHintProps.id}\n          variant={showError ? 'error' : 'hint'}\n          disabled={isDisabled || ariaDisabled}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n}\n"],
-  "mappings": "AAyMW,cA4CD,YA5CC;AAzMX,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,4BAA4B;AAErC,SAAS,oBAAoB;AAC7B,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,YAAY,YAAY;AAWxB,SAAS,wBAIP,UAAqB;AACrB,QAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,aAAW,SAAS,eAAe;AACjC,QAAI,2BAAwD,KAAK,GAAG;AAClE,aAAO;AAAA,IACT;AAAA,EACF;AAGA,QAAM,IAAI,MAAM,8CAA8C;AAChE;AAEO,SAAS,QAId,OAA4D;AAC5D,QAAM,EAAE,UAAU,YAAY,UAAU,YAAY,YAAY,IAAI;AACpE,QAAM,iBAAiB,YAAY,iBAAiB;AACpD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,YAAY,eAAe,WAAW,CAAC;AAC3C,QAAM,UAAU,aAAiC;AAAA,IAC/C;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AAED,QAAM,iBAAiB,wBAAwB,QAAQ;AACvD,QAAM,SAAS,MAAM;AACrB,QAAM,YAAY,wBAAwB,MAAM;AAChD,QAAM,kBAAkB,YAAY,eAAe,OAAO;AAE1D,QAAM,YAAY,YAAY;AAC9B,QAAM,OAAO,YAAY;AAGzB,QAAM,aAAa,wBAAwB,IACvC,aAAa,CAAC,aACd;AAEJ,QAAM,yBAAyB,MAAM,QAAQ,eAAe,MAAM,QAAQ,IACtE,eAAe,MAAM,SAAS,CAAC,IAC/B;AACJ,QAAM,KAAK,YAAY,eAAe;AAEtC,QAAM,cAAc;AAAA,IAClB,MACE,aAAa,wBAAwB;AAAA,MACnC,GAAG,uBAAuB;AAAA,MAC1B,KAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,mBAAmB,kBAAkB,mBAAmB;AAAA,MACxD,cAAc,YAAY,YAAY;AAAA,MACtC,oBAAoB,YAAY,kBAAkB;AAAA,MAClD,gBAAgB,YAAY,cAAc;AAAA,IAC5C,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,IAClD,OAAO,YAAY,aAAa;AAAA,IAChC,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,EAAE,SAAS,IAAI,qBAAqB;AAC1C,QAAM,oBAAoB,OAAO,KAAK;AAEtC,QAAM,mBAAmB,QAAQ,MAAM;AACrC,WAAO;AAAA,MACL,YAAY,MAAM;AAIhB,0BAAkB,UAAU;AAC5B,iBAAS;AAAA,UACP,MAAM,cAAc;AAAA,QACtB,CAAC;AACD,8BAAsB,MAAM;AAC1B,sBAAY,WAAW,SAAS,UAAU,MAAM;AAAA,YAC9C,eAAe;AAAA,UACjB,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAAA,MACA,SAAS,MAAM;AAEb,YAAI,kBAAkB,SAAS;AAC7B,4BAAkB,UAAU;AAC5B;AAAA,QACF;AACA,iBAAS;AAAA,UACP,MAAM,cAAc;AAAA,QACtB,CAAC;AAAA,MACH;AAAA,MAEA,WAAW,CAAC,UAA2C;AACrD,aACG,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,CAAC,YAAY,SACb;AACA,mBAAS;AAAA,YACP,MAAM,cAAc;AAAA,UACtB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,YAAY,OAAO,CAAC;AAElC,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,YAAY,eAAe;AAM7B,aAAO;AAAA,QACL,YAAY;AAAA,QACZ;AAAA,UACE,KAAK;AAAA,UACL,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,GAAG;AAAA,YACD,YAAY,cAAc;AAAA,YAC1B;AAAA,YACA,GAAI,aAAa,CAAC,IAAI,CAAC,gBAAgB;AAAA,UACzC;AAAA,QACF;AAAA,QACA,CAAC,YAAY,cAAc,OAAO,UAAU,WAAW;AAAA,MACzD;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF,CAAC;AAED,MAAI,eAAe;AACjB,WAAO,oBAAC,2BAAyB,yBAAc;AAAA,EACjD;AAEA,SACE,qBAAC,QAAK,SAAS,GAAG,eAAc,UAAS,KAAK,GAC5C;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAa;AAAA,QACb,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,OAAO,YAAY;AAAA,QAClB,GAAG;AAAA,QACJ,SAAQ;AAAA,QACP,GAAI,aAAa,SAAY;AAAA,QAC9B,OAAO,aAAa,aAAa;AAAA,QACjC,WAAW;AAAA,UACT;AAAA,UACA,OAAO,cAAc;AAAA,YACnB,WACE,YAAY,iBAAiB,UAC7B,YAAY,iBAAiB;AAAA,YAC/B;AAAA,YACA;AAAA,UACF,CAAC;AAAA,UACD;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,IAAG;AAAA,QACF,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,sBAAY,UACX;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,eAAa,YAAY,OAAO,MAAM,aAAa;AAAA,cACnD,WAAW,YAAY,OAAO,MAAM;AAAA,cACpC,OAAO,YAAY,OAAO,MAAM;AAAA,cAE/B,sBAAY,OAAO,MAAM;AAAA;AAAA,UAC5B;AAAA,UAEF,qBAAC,OAAO,OAAP,EACE;AAAA;AAAA,YACA;AAAA,aACH;AAAA,UACA,oBAAC,OAAO,QAAP,EACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,OAAO,yBAAyB;AAAA,kBAC9B,eAAe,YAAY;AAAA,kBAC3B;AAAA,gBACF,CAAC;AAAA,cACH;AAAA,cAEA,8BAAC,wBAAqB;AAAA;AAAA,UACxB,GACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,UAAU,YAAY;AAAA,QACtB,gBAAgB,YAAY;AAAA,QAC5B,MAAM,YAAY;AAAA,QAClB,UAAU,cAAc;AAAA,QACxB,cAAc,YAAY;AAAA;AAAA,IAC5B;AAAA,IACC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,YAAY,qBAAqB;AAAA,QACrC,SAAS,YAAY,UAAU;AAAA,QAC/B,UAAU,cAAc;AAAA,QAEvB;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  useMemo,\n  useRef,\n} from 'react';\nimport type {\n  ControlProps as ReactSelectControlProps,\n  GroupBase,\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 { useFocusRing } from '../../../core/hooks/useFocusRing.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../../core/hooks/useVisualRefreshEnabled.js';\nimport { OverlayStackingProvider } from '../../../core/providers/OverlayStackingProvider.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 { 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 showError = selectProps.formControlShowError;\n  const hint = selectProps.formControlHint;\n\n  // with the visual refresh enabled, a disabled select should not receive critical coloring on error\n  const isCritical = useVisualRefreshEnabled()\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\n              ? []\n              : [\n                  interactionProps,\n                  {\n                    onFocus: selectProps.onFocus,\n                    onBlur: selectProps.onBlur,\n                  },\n                ]),\n          ),\n        },\n        [selectProps.customTrigger.props?.children, hiddenInput],\n      );\n    }\n  }, [\n    hiddenInput,\n    innerProps,\n    interactionProps,\n    rootRef,\n    selectProps.customTrigger,\n    selectProps.onFocus,\n    selectProps.onBlur,\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        form={selectProps.hiddenSelectForm}\n        disabled={isDisabled || readOnly}\n        controlState={selectProps.controlState}\n      />\n      {hint && (\n        <BaseItem\n          id={selectProps.formControlHintProps.id}\n          variant={showError ? 'error' : 'hint'}\n          disabled={isDisabled || ariaDisabled}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n}\n"],
+  "mappings": "AAmNW,cA4CD,YA5CC;AAnNX,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,4BAA4B;AAErC,SAAS,oBAAoB;AAC7B,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,YAAY,YAAY;AAWxB,SAAS,wBAIP,UAAqB;AACrB,QAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,aAAW,SAAS,eAAe;AACjC,QAAI,2BAAwD,KAAK,GAAG;AAClE,aAAO;AAAA,IACT;AAAA,EACF;AAGA,QAAM,IAAI,MAAM,8CAA8C;AAChE;AAEO,SAAS,QAId,OAA4D;AAC5D,QAAM,EAAE,UAAU,YAAY,UAAU,YAAY,YAAY,IAAI;AACpE,QAAM,iBAAiB,YAAY,iBAAiB;AACpD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,YAAY,eAAe,WAAW,CAAC;AAC3C,QAAM,UAAU,aAAiC;AAAA,IAC/C;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AAED,QAAM,iBAAiB,wBAAwB,QAAQ;AACvD,QAAM,SAAS,MAAM;AACrB,QAAM,YAAY,wBAAwB,MAAM;AAChD,QAAM,kBAAkB,YAAY,eAAe,OAAO;AAE1D,QAAM,YAAY,YAAY;AAC9B,QAAM,OAAO,YAAY;AAGzB,QAAM,aAAa,wBAAwB,IACvC,aAAa,CAAC,aACd;AAEJ,QAAM,yBAAyB,MAAM,QAAQ,eAAe,MAAM,QAAQ,IACtE,eAAe,MAAM,SAAS,CAAC,IAC/B;AACJ,QAAM,KAAK,YAAY,eAAe;AAEtC,QAAM,cAAc;AAAA,IAClB,MACE,aAAa,wBAAwB;AAAA,MACnC,GAAG,uBAAuB;AAAA,MAC1B,KAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,mBAAmB,kBAAkB,mBAAmB;AAAA,MACxD,cAAc,YAAY,YAAY;AAAA,MACtC,oBAAoB,YAAY,kBAAkB;AAAA,MAClD,gBAAgB,YAAY,cAAc;AAAA,IAC5C,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,IAClD,OAAO,YAAY,aAAa;AAAA,IAChC,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,EAAE,SAAS,IAAI,qBAAqB;AAC1C,QAAM,oBAAoB,OAAO,KAAK;AAEtC,QAAM,mBAAmB,QAAQ,MAAM;AACrC,WAAO;AAAA,MACL,YAAY,MAAM;AAIhB,0BAAkB,UAAU;AAC5B,iBAAS;AAAA,UACP,MAAM,cAAc;AAAA,QACtB,CAAC;AACD,8BAAsB,MAAM;AAC1B,sBAAY,WAAW,SAAS,UAAU,MAAM;AAAA,YAC9C,eAAe;AAAA,UACjB,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAAA,MACA,SAAS,MAAM;AAEb,YAAI,kBAAkB,SAAS;AAC7B,4BAAkB,UAAU;AAC5B;AAAA,QACF;AACA,iBAAS;AAAA,UACP,MAAM,cAAc;AAAA,QACtB,CAAC;AAAA,MACH;AAAA,MAEA,WAAW,CAAC,UAA2C;AACrD,aACG,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,CAAC,YAAY,SACb;AACA,mBAAS;AAAA,YACP,MAAM,cAAc;AAAA,UACtB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,YAAY,OAAO,CAAC;AAElC,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,YAAY,eAAe;AAM7B,aAAO;AAAA,QACL,YAAY;AAAA,QACZ;AAAA,UACE,KAAK;AAAA,UACL,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,GAAG;AAAA,YACD,YAAY,cAAc;AAAA,YAC1B;AAAA,YACA,GAAI,aACA,CAAC,IACD;AAAA,cACE;AAAA,cACA;AAAA,gBACE,SAAS,YAAY;AAAA,gBACrB,QAAQ,YAAY;AAAA,cACtB;AAAA,YACF;AAAA,UACN;AAAA,QACF;AAAA,QACA,CAAC,YAAY,cAAc,OAAO,UAAU,WAAW;AAAA,MACzD;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,EACF,CAAC;AAED,MAAI,eAAe;AACjB,WAAO,oBAAC,2BAAyB,yBAAc;AAAA,EACjD;AAEA,SACE,qBAAC,QAAK,SAAS,GAAG,eAAc,UAAS,KAAK,GAC5C;AAAA,wBAAC,2BACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,WAAU;AAAA,QACV,eAAa;AAAA,QACb,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,OAAO,YAAY;AAAA,QAClB,GAAG;AAAA,QACJ,SAAQ;AAAA,QACP,GAAI,aAAa,SAAY;AAAA,QAC9B,OAAO,aAAa,aAAa;AAAA,QACjC,WAAW;AAAA,UACT;AAAA,UACA,OAAO,cAAc;AAAA,YACnB,WACE,YAAY,iBAAiB,UAC7B,YAAY,iBAAiB;AAAA,YAC/B;AAAA,YACA;AAAA,UACF,CAAC;AAAA,UACD;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,IAAG;AAAA,QACF,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,sBAAY,UACX;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACC,eAAa,YAAY,OAAO,MAAM,aAAa;AAAA,cACnD,WAAW,YAAY,OAAO,MAAM;AAAA,cACpC,OAAO,YAAY,OAAO,MAAM;AAAA,cAE/B,sBAAY,OAAO,MAAM;AAAA;AAAA,UAC5B;AAAA,UAEF,qBAAC,OAAO,OAAP,EACE;AAAA;AAAA,YACA;AAAA,aACH;AAAA,UACA,oBAAC,OAAO,QAAP,EACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,OAAO,yBAAyB;AAAA,kBAC9B,eAAe,YAAY;AAAA,kBAC3B;AAAA,gBACF,CAAC;AAAA,cACH;AAAA,cAEA,8BAAC,wBAAqB;AAAA;AAAA,UACxB,GACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,UAAU,YAAY;AAAA,QACtB,gBAAgB,YAAY;AAAA,QAC5B,MAAM,YAAY;AAAA,QAClB,MAAM,YAAY;AAAA,QAClB,UAAU,cAAc;AAAA,QACxB,cAAc,YAAY;AAAA;AAAA,IAC5B;AAAA,IACC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,YAAY,qBAAqB;AAAA,QACrC,SAAS,YAAY,UAAU;AAAA,QAC/B,UAAU,cAAc;AAAA,QAEvB;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;",
   "names": []
 }

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

@@ -14,6 +14,7 @@ const HiddenSelect = forwardRef(
   (props, forwardedRef) => {
     const {
       name,
+      form,
       selectedValues,
       required,
       disabled,
@@ -61,6 +62,7 @@ const HiddenSelect = forwardRef(
       {
         ref: useMergeRefs([forwardedRef, ref]),
         name,
+        form,
         multiple,
         tabIndex: -1,
         required,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/HiddenSelect.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  type ReactElement,\n  type Ref,\n  type SyntheticEvent,\n  useMemo,\n  useRef,\n} from 'react';\nimport { PropsValue, SingleValue } from 'react-select';\n\nimport { VisuallyHidden } from '../../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport type { FormControlState } from '../../../core/types/form-control-state.js';\nimport { useFormFieldValidation } from '../../forms-core/hooks/useFormFieldValidation.js';\nimport type { BaseOption } from '../types.js';\n\n//#region Typings\n/** Accepted properties for the HiddenSelect component */\ninterface HiddenSelectProps<OptionValue> {\n  ref: Ref<HTMLSelectElement>;\n  name?: string;\n  selectedValues?: PropsValue<OptionValue>;\n  required?: boolean;\n  disabled?: boolean;\n  ariaDisabled?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  controlState?: FormControlState;\n}\n//#endregion\n\n/**\n * HiddenSelect component\n * @internal\n */\nexport const HiddenSelect: <OptionValue>(\n  props: HiddenSelectProps<OptionValue>,\n) => /* @__PURE__ */ ReactElement | null = forwardRef(\n  /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  <OptionValue extends any>(\n    props: HiddenSelectProps<OptionValue>,\n    forwardedRef: HiddenSelectProps<OptionValue>['ref'],\n  ) => {\n    const {\n      name,\n      selectedValues,\n      required,\n      disabled,\n      ariaDisabled,\n      controlState,\n    } = props;\n    const multiple = Array.isArray(selectedValues);\n\n    const id = useId();\n    const ref = useRef<HTMLSelectElement | null>(null);\n\n    const selectedValuesArray = useMemo(() => {\n      // Use textValue if it's defined. If not, use label (only if it's a string). Otherwise, use the value property.\n      const extractValue = (\n        val: SingleValue<BaseOption<OptionValue>>,\n      ): string => {\n        return val?.textValue ?? '';\n      };\n\n      if (multiple) {\n        return selectedValues?.length > 0\n          ? selectedValues.map(extractValue)\n          : [];\n      }\n\n      if (selectedValues) {\n        return [\n          extractValue(\n            selectedValues as unknown as SingleValue<BaseOption<OptionValue>>,\n          ),\n        ];\n      }\n\n      return [];\n    }, [multiple, selectedValues]);\n\n    const { ariaProps, onBlur, onChange, onInvalid } = useFormFieldValidation(\n      ref,\n      // selectedValuesArray already contains only plain strings, so it is safe\n      // to join for a dep key \u2014 no risk of BigInt or circular-reference errors.\n      { selectedValues: selectedValuesArray.join(',') },\n      {},\n      id,\n    );\n\n    const handleInvalid = controlState\n      ? (event: SyntheticEvent<HTMLSelectElement>) => {\n          // Suppress the native browser validation popup.\n          event.preventDefault();\n        }\n      : onInvalid;\n\n    const value = useMemo(() => {\n      if (multiple) {\n        return selectedValuesArray;\n      }\n      // use string value or empty string as array values are not allowed for single select\n      return selectedValues\n        ? `${\n            (selectedValues as unknown as SingleValue<BaseOption<OptionValue>>)\n              ?.value\n          }`\n        : '';\n    }, [multiple, selectedValues, selectedValuesArray]);\n\n    return (\n      <VisuallyHidden>\n        <select\n          ref={useMergeRefs([forwardedRef, ref])}\n          name={name}\n          multiple={multiple}\n          tabIndex={-1}\n          required={required}\n          disabled={disabled}\n          aria-disabled={ariaDisabled}\n          aria-hidden\n          value={value && value.length !== 0 ? value : undefined}\n          id={id}\n          onChange={() => undefined}\n          onInvalid={handleInvalid}\n          {...(controlState ? {} : { ...ariaProps, onBlur, onChange })}\n        >\n          {selectedValuesArray.map((val, key) => {\n            return <option value={`${val}`} key={`${key}-${val}`} />;\n          })}\n        </select>\n      </VisuallyHidden>\n    );\n  },\n);\n\n(HiddenSelect as typeof HiddenSelect & { displayName: string }).displayName =\n  'HiddenSelect';\n"],
-  "mappings": "AAiImB;AAjInB;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B;AAqBhC,MAAM,eAE8B;AAAA;AAAA;AAAA,EAGzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AACJ,UAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,UAAM,KAAK,MAAM;AACjB,UAAM,MAAM,OAAiC,IAAI;AAEjD,UAAM,sBAAsB,QAAQ,MAAM;AAExC,YAAM,eAAe,CACnB,QACW;AACX,eAAO,KAAK,aAAa;AAAA,MAC3B;AAEA,UAAI,UAAU;AACZ,eAAO,gBAAgB,SAAS,IAC5B,eAAe,IAAI,YAAY,IAC/B,CAAC;AAAA,MACP;AAEA,UAAI,gBAAgB;AAClB,eAAO;AAAA,UACL;AAAA,YACE;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,aAAO,CAAC;AAAA,IACV,GAAG,CAAC,UAAU,cAAc,CAAC;AAE7B,UAAM,EAAE,WAAW,QAAQ,UAAU,UAAU,IAAI;AAAA,MACjD;AAAA;AAAA;AAAA,MAGA,EAAE,gBAAgB,oBAAoB,KAAK,GAAG,EAAE;AAAA,MAChD,CAAC;AAAA,MACD;AAAA,IACF;AAEA,UAAM,gBAAgB,eAClB,CAAC,UAA6C;AAE5C,YAAM,eAAe;AAAA,IACvB,IACA;AAEJ,UAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAI,UAAU;AACZ,eAAO;AAAA,MACT;AAEA,aAAO,iBACH,GACG,gBACG,KACN,KACA;AAAA,IACN,GAAG,CAAC,UAAU,gBAAgB,mBAAmB,CAAC;AAElD,WACE,oBAAC,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,aAAa,CAAC,cAAc,GAAG,CAAC;AAAA,QACrC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,eAAW;AAAA,QACX,OAAO,SAAS,MAAM,WAAW,IAAI,QAAQ;AAAA,QAC7C;AAAA,QACA,UAAU,MAAM;AAAA,QAChB,WAAW;AAAA,QACV,GAAI,eAAe,CAAC,IAAI,EAAE,GAAG,WAAW,QAAQ,SAAS;AAAA,QAEzD,8BAAoB,IAAI,CAAC,KAAK,QAAQ;AACrC,iBAAO,oBAAC,YAAO,OAAO,GAAG,GAAG,MAAS,GAAG,GAAG,IAAI,GAAG,EAAI;AAAA,QACxD,CAAC;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;",
+  "sourcesContent": ["import {\n  forwardRef,\n  type ReactElement,\n  type Ref,\n  type SyntheticEvent,\n  useMemo,\n  useRef,\n} from 'react';\nimport { PropsValue, SingleValue } from 'react-select';\n\nimport { VisuallyHidden } from '../../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport type { FormControlState } from '../../../core/types/form-control-state.js';\nimport { useFormFieldValidation } from '../../forms-core/hooks/useFormFieldValidation.js';\nimport type { BaseOption } from '../types.js';\n\n//#region Typings\n/** Accepted properties for the HiddenSelect component */\ninterface HiddenSelectProps<OptionValue> {\n  ref: Ref<HTMLSelectElement>;\n  name?: string;\n  form?: string;\n  selectedValues?: PropsValue<OptionValue>;\n  required?: boolean;\n  disabled?: boolean;\n  ariaDisabled?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  controlState?: FormControlState;\n}\n//#endregion\n\n/**\n * HiddenSelect component\n * @internal\n */\nexport const HiddenSelect: <OptionValue>(\n  props: HiddenSelectProps<OptionValue>,\n) => /* @__PURE__ */ ReactElement | null = forwardRef(\n  /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  <OptionValue extends any>(\n    props: HiddenSelectProps<OptionValue>,\n    forwardedRef: HiddenSelectProps<OptionValue>['ref'],\n  ) => {\n    const {\n      name,\n      form,\n      selectedValues,\n      required,\n      disabled,\n      ariaDisabled,\n      controlState,\n    } = props;\n    const multiple = Array.isArray(selectedValues);\n\n    const id = useId();\n    const ref = useRef<HTMLSelectElement | null>(null);\n\n    const selectedValuesArray = useMemo(() => {\n      // Use textValue if it's defined. If not, use label (only if it's a string). Otherwise, use the value property.\n      const extractValue = (\n        val: SingleValue<BaseOption<OptionValue>>,\n      ): string => {\n        return val?.textValue ?? '';\n      };\n\n      if (multiple) {\n        return selectedValues?.length > 0\n          ? selectedValues.map(extractValue)\n          : [];\n      }\n\n      if (selectedValues) {\n        return [\n          extractValue(\n            selectedValues as unknown as SingleValue<BaseOption<OptionValue>>,\n          ),\n        ];\n      }\n\n      return [];\n    }, [multiple, selectedValues]);\n\n    const { ariaProps, onBlur, onChange, onInvalid } = useFormFieldValidation(\n      ref,\n      // selectedValuesArray already contains only plain strings, so it is safe\n      // to join for a dep key \u2014 no risk of BigInt or circular-reference errors.\n      { selectedValues: selectedValuesArray.join(',') },\n      {},\n      id,\n    );\n\n    const handleInvalid = controlState\n      ? (event: SyntheticEvent<HTMLSelectElement>) => {\n          // Suppress the native browser validation popup.\n          event.preventDefault();\n        }\n      : onInvalid;\n\n    const value = useMemo(() => {\n      if (multiple) {\n        return selectedValuesArray;\n      }\n      // use string value or empty string as array values are not allowed for single select\n      return selectedValues\n        ? `${\n            (selectedValues as unknown as SingleValue<BaseOption<OptionValue>>)\n              ?.value\n          }`\n        : '';\n    }, [multiple, selectedValues, selectedValuesArray]);\n\n    return (\n      <VisuallyHidden>\n        <select\n          ref={useMergeRefs([forwardedRef, ref])}\n          name={name}\n          form={form}\n          multiple={multiple}\n          tabIndex={-1}\n          required={required}\n          disabled={disabled}\n          aria-disabled={ariaDisabled}\n          aria-hidden\n          value={value && value.length !== 0 ? value : undefined}\n          id={id}\n          onChange={() => undefined}\n          onInvalid={handleInvalid}\n          {...(controlState ? {} : { ...ariaProps, onBlur, onChange })}\n        >\n          {selectedValuesArray.map((val, key) => {\n            return <option value={`${val}`} key={`${key}-${val}`} />;\n          })}\n        </select>\n      </VisuallyHidden>\n    );\n  },\n);\n\n(HiddenSelect as typeof HiddenSelect & { displayName: string }).displayName =\n  'HiddenSelect';\n"],
+  "mappings": "AAoImB;AApInB;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B;AAsBhC,MAAM,eAE8B;AAAA;AAAA;AAAA,EAGzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AACJ,UAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,UAAM,KAAK,MAAM;AACjB,UAAM,MAAM,OAAiC,IAAI;AAEjD,UAAM,sBAAsB,QAAQ,MAAM;AAExC,YAAM,eAAe,CACnB,QACW;AACX,eAAO,KAAK,aAAa;AAAA,MAC3B;AAEA,UAAI,UAAU;AACZ,eAAO,gBAAgB,SAAS,IAC5B,eAAe,IAAI,YAAY,IAC/B,CAAC;AAAA,MACP;AAEA,UAAI,gBAAgB;AAClB,eAAO;AAAA,UACL;AAAA,YACE;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,aAAO,CAAC;AAAA,IACV,GAAG,CAAC,UAAU,cAAc,CAAC;AAE7B,UAAM,EAAE,WAAW,QAAQ,UAAU,UAAU,IAAI;AAAA,MACjD;AAAA;AAAA;AAAA,MAGA,EAAE,gBAAgB,oBAAoB,KAAK,GAAG,EAAE;AAAA,MAChD,CAAC;AAAA,MACD;AAAA,IACF;AAEA,UAAM,gBAAgB,eAClB,CAAC,UAA6C;AAE5C,YAAM,eAAe;AAAA,IACvB,IACA;AAEJ,UAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAI,UAAU;AACZ,eAAO;AAAA,MACT;AAEA,aAAO,iBACH,GACG,gBACG,KACN,KACA;AAAA,IACN,GAAG,CAAC,UAAU,gBAAgB,mBAAmB,CAAC;AAElD,WACE,oBAAC,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,aAAa,CAAC,cAAc,GAAG,CAAC;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,eAAW;AAAA,QACX,OAAO,SAAS,MAAM,WAAW,IAAI,QAAQ;AAAA,QAC7C;AAAA,QACA,UAAU,MAAM;AAAA,QAChB,WAAW;AAAA,QACV,GAAI,eAAe,CAAC,IAAI,EAAE,GAAG,WAAW,QAAQ,SAAS;AAAA,QAEzD,8BAAoB,IAAI,CAAC,KAAK,QAAQ;AACrC,iBAAO,oBAAC,YAAO,OAAO,GAAG,GAAG,MAAS,GAAG,GAAG,IAAI,GAAG,EAAI;AAAA,QACxD,CAAC;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;",
   "names": []
 }

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

@@ -29,6 +29,7 @@ import { _FormFieldContext as FormFieldContext } from "../../forms-core/contexts
 import { FormFieldMessageContext } from "../../forms-core/contexts/FormFieldMessageContext.js";
 import { SearchInput } from "../../search-input/SearchInput.js";
 import { useSelectMenuContext } from "../hooks/use-select-menu-context.js";
+import { safeStringify } from "../hooks/use-select-options.js";
 import { SelectActions } from "../state/select-menu-state-reducer.js";
 import * as styles from "../styles/Select.sty.js";
 const sameWidthModifier = {
@@ -146,38 +147,55 @@ function Menu(props) {
   }, [hiddenTrigger]);
   const intl = useIntl();
   const ariaLabelId = useId();
-  const allSelected = useMemo(() => {
-    return isMulti && selectProps.allOptions?.length === selectProps.value?.length;
-  }, [isMulti, selectProps.allOptions, selectProps.value]);
+  const selectableOptions = useMemo(
+    () => (selectProps.allOptions ?? []).filter((option) => !option.isDisabled),
+    [selectProps.allOptions]
+  );
+  const selectedKeys = useMemo(() => {
+    const value = selectProps.value;
+    const selected = Array.isArray(value) ? value : [];
+    return new Set(selected.map((option) => safeStringify(option.value)));
+  }, [selectProps.value]);
+  const isOptionSelected = (option) => selectedKeys.has(safeStringify(option.value));
+  const areAllOptionsSelected = isMulti && selectableOptions.length > 0 && selectableOptions.every(isOptionSelected);
+  const areSomeOptionsSelected = isMulti && selectableOptions.some(isOptionSelected);
+  let selectAllState = false;
+  if (areAllOptionsSelected) {
+    selectAllState = true;
+  } else if (areSomeOptionsSelected) {
+    selectAllState = "mixed";
+  }
   const handleSelectAllInteraction = () => {
     if (!selectProps.loading) {
-      if (allSelected) {
+      if (areAllOptionsSelected) {
         selectProps.onChange([], {
           action: "clear",
           removedValues: selectProps.value
         });
       } else {
         selectProps.onChange(
-          selectProps.allOptions,
+          selectableOptions,
           {}
         );
       }
     }
   };
-  const dataDtProperties = `state:${allSelected ? "deselect" : "select"}`;
+  const dataDtProperties = `state:${areAllOptionsSelected ? "deselect" : "select"}`;
   const noOptionsAvailable = selectProps.allOptions === void 0 || selectProps.allOptions.length === 0;
   const isFiltering = selectProps.customFilter && inputValue !== void 0 && inputValue !== "";
   const showClearSelection = selectProps.clearable && selectProps.value && isMulti === false && !isFiltering;
-  const showSelectAll = selectProps.clearable && isMulti && !isFiltering && !noOptionsAvailable;
+  const showSelectAll = selectProps.clearable && isMulti && !isFiltering && !noOptionsAvailable && selectableOptions.length > 0;
   return createPortal(
     /* @__PURE__ */ jsx(
       Surface,
       {
         "data-testid": contentDataTestId,
+        "data-dt-owner": selectProps.menuOwnerId,
         ref: rootPortalRef,
         ...innerProps,
         elevation: "floating",
         padding: 4,
+        tabIndex: -1,
         className: clsx(
           styles.selectMenuOverlay({
             isTriggerWidth: selectProps.contentWidth === "trigger" || selectProps.customFilter && selectProps.contentWidth === "content"
@@ -244,7 +262,8 @@ function Menu(props) {
                 className: clsx(
                   styles.selectMenuDivider,
                   "strato-select-divider"
-                )
+                ),
+                "aria-hidden": true
               }
             )
           ] }),
@@ -308,7 +327,8 @@ function Menu(props) {
                 className: clsx(
                   styles.selectMenuDivider,
                   "strato-select-divider"
-                )
+                ),
+                "aria-hidden": true
               }
             )
           ] }),
@@ -317,13 +337,14 @@ function Menu(props) {
               Flex,
               {
                 tabIndex: 0,
-                role: "option",
+                role: "checkbox",
+                "aria-checked": selectAllState,
                 className: clsx(
                   "strato-select-option",
                   styles.selectOptionMulti,
                   styles.selectAll,
                   {
-                    "strato-select-option--selected": selectProps.value?.length > 0,
+                    "strato-select-option--selected": areSomeOptionsSelected,
                     "strato-select-option--disabled": selectProps.loading
                   }
                 ),
@@ -346,17 +367,17 @@ function Menu(props) {
                     {
                       className: clsx(
                         styles.selectOptionMultiIndicator({
-                          selected: selectProps.value?.length > 0
+                          selected: areSomeOptionsSelected
                         })
                       ),
                       children: [
-                        allSelected ? /* @__PURE__ */ jsx(
+                        areAllOptionsSelected ? /* @__PURE__ */ jsx(
                           CheckmarkSmallIcon,
                           {
                             className: styles.selectOptionMultiIndicatorIcon
                           }
                         ) : null,
-                        !allSelected && selectProps.value?.length > 0 ? /* @__PURE__ */ jsx(
+                        !areAllOptionsSelected && areSomeOptionsSelected ? /* @__PURE__ */ jsx(
                           MinusIcon,
                           {
                             className: styles.selectOptionMultiIndicatorIcon

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

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

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

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import clsx from "clsx";
 import {
@@ -8,13 +8,58 @@ import {
   useState,
   Children
 } from "react";
-import { NoOptionsMessage } from "./NoOptionsMessage.js";
+import { useIntl } from "react-intl";
+import { NoOptionsMessage, noResultsMessage } from "./NoOptionsMessage.js";
 import {
   applyStoredSelectionSortingOptions,
   sortSelectedOptions
 } from "./sort-selected-options-first.js";
 import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
+import { screenReaderOnly } from "../../../styles/screen-reader-only.sty.js";
 import * as styles from "../styles/Select.sty.js";
+function countSelectableOptions(children) {
+  let count = 0;
+  for (const child of children) {
+    if (child === null || child === void 0) {
+      continue;
+    }
+    const props = child.props;
+    if ("type" in props) {
+      if (!props.isDisabled) {
+        count += 1;
+      }
+    } else {
+      count += props.options.filter((o) => !o.isDisabled).length;
+    }
+  }
+  return count;
+}
+function buildFilterAnnouncement(intl, children, isFiltering, isShowingNoOptions) {
+  if (!isFiltering) {
+    if (isShowingNoOptions) {
+      return "";
+    }
+    return intl.formatMessage(
+      {
+        defaultMessage: "{count, plural, one {Showing # option} other {Showing all # options}}",
+        id: "k21q5kyTS9rGFWLF",
+        description: "Screen reader announcement when the select filter is cleared, showing the total number of available options."
+      },
+      { count: countSelectableOptions(children) }
+    );
+  }
+  if (isShowingNoOptions) {
+    return intl.formatMessage(noResultsMessage);
+  }
+  return intl.formatMessage(
+    {
+      defaultMessage: "{count, plural, one {# option found} other {# options found}}",
+      id: "IUvOgujQzBX+gSUq",
+      description: "Screen reader announcement of the number of options matching the select filter."
+    },
+    { count: countSelectableOptions(children) }
+  );
+}
 function MenuList(props) {
   const { children, selectProps, innerProps } = props;
   const parentRef = useRef(null);
@@ -23,7 +68,8 @@ function MenuList(props) {
   const sortingMap = useRef(/* @__PURE__ */ new WeakMap());
   let childrenArray = Children.toArray(children);
   const currentChildrenLength = useRef(childrenArray.length);
-  if (selectProps.showSelectedOptionsFirst && !(childrenArray.length === 1 && childrenArray[0].type === NoOptionsMessage)) {
+  const isShowingNoOptions = childrenArray.length === 1 && childrenArray[0].type === NoOptionsMessage;
+  if (selectProps.showSelectedOptionsFirst && !isShowingNoOptions) {
     if (initialRender.current === true) {
       [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);
     } else if (currentChildrenLength.current !== childrenArray.length) {
@@ -38,6 +84,14 @@ function MenuList(props) {
     }
   }
   initialRender.current = false;
+  const intl = useIntl();
+  const isFiltering = selectProps.customFilter !== void 0 && selectProps.inputValue !== void 0 && selectProps.inputValue !== "";
+  const filterAnnouncement = buildFilterAnnouncement(
+    intl,
+    childrenArray,
+    isFiltering,
+    isShowingNoOptions
+  );
   const optionVirtualizer = useVirtualizer({
     count: childrenArray.length,
     getScrollElement: () => parentRef.current,
@@ -68,54 +122,69 @@ function MenuList(props) {
       });
     });
   }, [notifyParentRefChange, childrenArray.length]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...innerProps,
-      ref: menulistref,
-      className: clsx(styles.selectMenuListWrapper, "strato-select-menulist"),
-      style: {
-        width: optionVirtualizer.scrollOffset !== null && optionVirtualizer.scrollOffset > 0 && selectProps.contentWidth === "max-content" ? optionVirtualizer.scrollRect?.width : void 0
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          role: "presentation",
-          style: {
-            height: optionVirtualizer.getTotalSize(),
-            display: "grid",
-            // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.
-            gridTemplateRows: Array.from(
-              optionVirtualizer.measurementsCache,
-              (el) => `${el?.size ?? 32}px`
-            ).join(" ")
-          },
-          className: styles.selectVirtualizationWrapper,
-          children: optionVirtualizer.getVirtualItems().map((virtualRow) => {
-            const child = childrenArray?.[virtualRow.index];
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "strato-select-option",
-                "data-index": virtualRow.index,
-                style: {
-                  gridRow: virtualRow.index + 1,
-                  minWidth: 0,
-                  height: "fit-content"
-                },
-                ref: (el) => {
-                  optionVirtualizer.measureElement(el);
-                },
-                children: child
-              },
-              virtualRow.key
-            );
-          })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectProps.customFilter && // Rendered as a sibling, not a child, of the listbox below — role="listbox"
+    // only permits option/group children, so a nested role="status" trips axe's
+    // aria-required-children rule.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: screenReaderOnly,
+        children: filterAnnouncement
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...innerProps,
+        ref: menulistref,
+        className: clsx(styles.selectMenuListWrapper, "strato-select-menulist"),
+        style: {
+          width: optionVirtualizer.scrollOffset !== null && optionVirtualizer.scrollOffset > 0 && selectProps.contentWidth === "max-content" ? optionVirtualizer.scrollRect?.width : void 0
         },
-        `wrapper-${selectProps.options.length}`
-      )
-    }
-  );
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "presentation",
+            style: {
+              height: optionVirtualizer.getTotalSize(),
+              display: "grid",
+              // Array.from is used instead of .map() because measurementsCache can be sparse, causing gaps between options.
+              gridTemplateRows: Array.from(
+                optionVirtualizer.measurementsCache,
+                (el) => `${el?.size ?? 32}px`
+              ).join(" ")
+            },
+            className: styles.selectVirtualizationWrapper,
+            children: optionVirtualizer.getVirtualItems().map((virtualRow) => {
+              const child = childrenArray?.[virtualRow.index];
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "strato-select-option",
+                  "data-index": virtualRow.index,
+                  style: {
+                    gridRow: virtualRow.index + 1,
+                    minWidth: 0,
+                    height: "fit-content"
+                  },
+                  ref: (el) => {
+                    optionVirtualizer.measureElement(el);
+                  },
+                  children: child
+                },
+                virtualRow.key
+              );
+            })
+          },
+          `wrapper-${selectProps.options.length}`
+        )
+      }
+    )
+  ] });
 }
 export {
   MenuList