@dynatrace/strato-components 3.3.3 → 3.5.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/select/SelectOption.tsx"],
-  "sourcesContent": ["import {\n  type Key,\n  type PropsWithChildren,\n  type ReactNode,\n  type ReactElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n/**\n * @public\n */\nexport type SelectOptionProps<OptionValue> = PropsWithChildren &\n  StylingProps &\n  DataTestId & {\n    value: OptionValue;\n\n    textValue?: string;\n\n    id?: Key;\n\n    'aria-label'?: string;\n\n    disabled?: boolean;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a Select.Option\n * @internal\n */\nexport function _isSelectOptionElement<T>(\n  child: ReactNode,\n): child is ReactElement<SelectOptionProps<T>> {\n  if (isElement(child) && child.type === SelectOption) {\n    return true;\n  }\n  return false;\n}\n\n/**\n * `Select.Option` defines a single option within the select component.\n * `Select.Option` components are only valid within `Select.Content` or\n * `Select.Group` elements.\n *\n * @example\n * ```tsx\n * <Select.Content>\n *    <Select.Option value=\"red\">Red</Select.Option>\n *    <Select.Option value=\"green\">Green</Select.Option>\n *    <Select.Group>\n *      <Select.GroupLabel>Other colors</Select.GroupLabel>\n *      <Select.Option value=\"purple\">Purple</Select.Option>\n *    <Select.Option value=\"pink\">Pink</Select.Option>\n *    </Select.Group>\n * </Select.Content>\n * ```\n * @public\n */\nexport function SelectOption<OptionValue>(\n  props: SelectOptionProps<OptionValue>,\n): null {\n  return null;\n}\n"],
-  "mappings": "AAMA,SAAS,iBAAiB;AA0BnB,SAAS,uBACd,OAC6C;AAC7C,MAAI,UAAU,KAAK,KAAK,MAAM,SAAS,cAAc;AACnD,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAqBO,SAAS,aACd,OACM;AACN,SAAO;AACT;",
+  "sourcesContent": ["import {\n  type Key,\n  type PropsWithChildren,\n  type ReactNode,\n  type ReactElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n/**\n * @public\n */\nexport type SelectOptionProps<OptionValue> = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps & {\n    value: OptionValue;\n\n    textValue?: string;\n\n    id?: Key;\n\n    'aria-label'?: string;\n\n    disabled?: boolean;\n  };\n\n/**\n * Typeguard function that will check if a ReactNode is a Select.Option\n * @internal\n */\nexport function _isSelectOptionElement<T>(\n  child: ReactNode,\n): child is ReactElement<SelectOptionProps<T>> {\n  if (isElement(child) && child.type === SelectOption) {\n    return true;\n  }\n  return false;\n}\n\n/**\n * `Select.Option` defines a single option within the select component.\n * `Select.Option` components are only valid within `Select.Content` or\n * `Select.Group` elements.\n *\n * @example\n * ```tsx\n * <Select.Content>\n *    <Select.Option value=\"red\">Red</Select.Option>\n *    <Select.Option value=\"green\">Green</Select.Option>\n *    <Select.Group>\n *      <Select.GroupLabel>Other colors</Select.GroupLabel>\n *      <Select.Option value=\"purple\">Purple</Select.Option>\n *    <Select.Option value=\"pink\">Pink</Select.Option>\n *    </Select.Group>\n * </Select.Content>\n * ```\n * @public\n */\nexport function SelectOption<OptionValue>(\n  props: SelectOptionProps<OptionValue>,\n): null {\n  return null;\n}\n"],
+  "mappings": "AAMA,SAAS,iBAAiB;AA4BnB,SAAS,uBACd,OAC6C;AAC7C,MAAI,UAAU,KAAK,KAAK,MAAM,SAAS,cAAc;AACnD,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAqBO,SAAS,aACd,OACM;AACN,SAAO;AACT;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/select/SelectPrefix.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n//#region Typings\n/**\n * Accepted properties for the Select Prefix\n * @public\n */\nexport type SelectPrefixProps = PropsWithChildren<unknown> &\n  StylingProps &\n  DataTestId;\n//#endregion\n\n/**\n * The `Select.Prefix` component allows you to specify any content, that should\n * be prefixed in the trigger element. The `Select.Prefix` component is only valid\n * within the `Select.Trigger` and `Select.Option` element.\n * @example\n * ```tsx\n * <Select.DisplayValue>\n *   <Select.Prefix>\n *     <WhatsNewIcon />\n *   </Select.Prefix>\n * </Select.DisplayValue>\n * ```\n * @public\n */\nexport function SelectPrefix(props: SelectPrefixProps): null {\n  return null;\n}\n"],
-  "mappings": "AA6BO,SAAS,aAAa,OAAgC;AAC3D,SAAO;AACT;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n//#region Typings\n/**\n * Accepted properties for the Select Prefix\n * @public\n */\nexport type SelectPrefixProps = PropsWithChildren<unknown> &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps;\n//#endregion\n\n/**\n * The `Select.Prefix` component allows you to specify any content, that should\n * be prefixed in the trigger element. The `Select.Prefix` component is only valid\n * within the `Select.Trigger` and `Select.Option` element.\n * @example\n * ```tsx\n * <Select.DisplayValue>\n *   <Select.Prefix>\n *     <WhatsNewIcon />\n *   </Select.Prefix>\n * </Select.DisplayValue>\n * ```\n * @public\n */\nexport function SelectPrefix(props: SelectPrefixProps): null {\n  return null;\n}\n"],
+  "mappings": "AA+BO,SAAS,aAAa,OAAgC;AAC3D,SAAO;AACT;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/select/SelectSuffix.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n//#region Typings\n\n/**\n * Accepted properties for the Select Suffix\n * @public\n */\nexport type SelectSuffixProps = PropsWithChildren<unknown> &\n  StylingProps &\n  DataTestId;\n//#endregion\n\n/**\n * The `Select.Suffix` component allows you to specify any content, that should\n * be prefixed in the trigger element. The `Select.Suffix` component is only valid\n * within the `Select.Trigger` and `Select.Option` element.\n * @example\n * ```tsx\n * <Select.DisplayValue>\n *   <Select.Suffix>\n *     <WhatsNewIcon />\n *   </Select.Suffix>\n * </Select.DisplayValue>\n * ```\n * @public\n */\nexport function SelectSuffix(props: SelectSuffixProps): null {\n  return null;\n}\n"],
-  "mappings": "AA8BO,SAAS,aAAa,OAAgC;AAC3D,SAAO;AACT;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n//#region Typings\n\n/**\n * Accepted properties for the Select Suffix\n * @public\n */\nexport type SelectSuffixProps = PropsWithChildren<unknown> &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps;\n//#endregion\n\n/**\n * The `Select.Suffix` component allows you to specify any content, that should\n * be prefixed in the trigger element. The `Select.Suffix` component is only valid\n * within the `Select.Trigger` and `Select.Option` element.\n * @example\n * ```tsx\n * <Select.DisplayValue>\n *   <Select.Suffix>\n *     <WhatsNewIcon />\n *   </Select.Suffix>\n * </Select.DisplayValue>\n * ```\n * @public\n */\nexport function SelectSuffix(props: SelectSuffixProps): null {\n  return null;\n}\n"],
+  "mappings": "AAgCO,SAAS,aAAa,OAAgC;AAC3D,SAAO;AACT;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/select/SelectTrigger.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type ReactNode } from 'react';\n\nimport type { SelectTriggerWidthOptionsType } from './types.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n\n/**\n * @public\n */\nexport type SelectTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId & {\n    /**\n     * The placeholder text displayed in the Select.Trigger.\n     */\n    placeholder?: ReactNode;\n    /**\n     * The width of the Select.Trigger.\n     * @defaultValue 'content'\n     */\n    width?: SelectTriggerWidthOptionsType;\n  };\n\n/**\n * @public\n */\nexport function SelectTrigger(props: SelectTriggerProps): null {\n  return null;\n}\n"],
-  "mappings": "AA2BO,SAAS,cAAc,OAAiC;AAC7D,SAAO;AACT;",
+  "sourcesContent": ["import { type PropsWithChildren, type ReactNode } from 'react';\n\nimport type { SelectTriggerWidthOptionsType } from './types.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\n/**\n * @public\n */\nexport type SelectTriggerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps & {\n    /**\n     * The placeholder text displayed in the Select.Trigger.\n     */\n    placeholder?: ReactNode;\n    /**\n     * The width of the Select.Trigger.\n     * @defaultValue 'content'\n     */\n    width?: SelectTriggerWidthOptionsType;\n  };\n\n/**\n * @public\n */\nexport function SelectTrigger(props: SelectTriggerProps): null {\n  return null;\n}\n"],
+  "mappings": "AA4BO,SAAS,cAAc,OAAiC;AAC7D,SAAO;AACT;",
   "names": []
 }

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

@@ -3,7 +3,8 @@ import clsx from "clsx";
 import {
   useMemo,
   Children,
-  cloneElement
+  cloneElement,
+  useRef
 } from "react";
 import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
 import { HiddenSelect } from "./HiddenSelect.js";
@@ -14,6 +15,7 @@ import { useId } from "../../../core/hooks/useId.js";
 import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
 import { OverlayStackingProvider } from "../../../core/providers/OverlayStackingProvider.js";
 import { useFocusRing } from "../../../core/styles/useFocusRing.js";
+import { isVisualRefreshEnabled } from "../../../core/utils/is-visual-refresh-enabled.js";
 import { mergeProps as _mergeProps } from "../../../core/utils/merge-props.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
 import { InternalBaseItem as BaseItem } from "../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
@@ -54,6 +56,7 @@ function Control(props) {
     selectProps.controlState
   );
   const showError = selectProps.controlState ? hasFormControlError : state.showError;
+  const isCritical = isVisualRefreshEnabled() ? showError && !isDisabled : showError;
   const hiddenReactSelectInput = Array.isArray(valueContainer.props.children) ? valueContainer.props.children[1] : null;
   const id = selectProps["selectInputId"];
   const hiddenInput = useMemo(
@@ -84,14 +87,25 @@ function Control(props) {
     disabled: isDisabled
   });
   const { dispatch } = useSelectMenuContext();
+  const handledByTouchRef = useRef(false);
   const interactionProps = useMemo(() => {
     return {
-      onTouchStart: () => {
+      onTouchEnd: () => {
+        handledByTouchRef.current = true;
         dispatch({
           type: SelectActions.SELECTFOCUS
         });
+        requestAnimationFrame(() => {
+          selectProps.filterRef?.current?.inputRef?.focus({
+            preventScroll: true
+          });
+        });
       },
       onClick: () => {
+        if (handledByTouchRef.current) {
+          handledByTouchRef.current = false;
+          return;
+        }
         dispatch({
           type: SelectActions.SELECTFOCUS
         });
@@ -116,7 +130,7 @@ function Control(props) {
           ..._mergeProps(
             selectProps.customTrigger.props,
             innerProps,
-            interactionProps
+            ...isDisabled ? [] : [interactionProps]
           )
         },
         [selectProps.customTrigger.props?.children, hiddenInput]
@@ -146,12 +160,13 @@ function Control(props) {
         width: selectProps.triggerWidth,
         ...innerProps,
         variant: "emphasized",
-        ...interactionProps,
-        color: showError ? "critical" : "neutral",
+        ...isDisabled ? void 0 : interactionProps,
+        color: isCritical ? "critical" : "neutral",
         className: clsx(
           "strato-components-select-control-trigger",
           styles.selectTrigger({
             fullWidth: selectProps.triggerWidth === "full" || selectProps.triggerWidth === "100%",
+            showError,
             readOnly
           }),
           focusClassName,
@@ -180,7 +195,8 @@ function Control(props) {
             {
               className: clsx(
                 styles.selectTriggerIconWrapper({
-                  isOverlayOpen: selectProps.menuIsOpen
+                  isOverlayOpen: selectProps.menuIsOpen,
+                  readOnly
                 })
               ),
               children: /* @__PURE__ */ jsx(ChevronDownSmallIcon, {})

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} from 'react';\nimport type {\n  GroupBase,\n  ControlProps as ReactSelectControlProps,\n} from 'react-select';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { HiddenSelect } from './HiddenSelect.js';\nimport { _isValueContainerComponent } from './ValueContainer.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useFormControlState } from '../../../core/hooks/useFormControlState.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { OverlayStackingProvider } from '../../../core/providers/OverlayStackingProvider.js';\nimport { useFocusRing } from '../../../core/styles/useFocusRing.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { InternalBaseItem as BaseItem } from '../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\n\n//#region Typings\ntype ControlProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectControlProps<OptionValue, isMulti, Group>;\n//#endregion Typings\n\n/** Iterates over child nodes to extract the value container. */\nfunction getSelectValueContainer<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(children: ReactNode) {\n  const childrenArray = Children.toArray(children);\n\n  for (const child of childrenArray) {\n    if (_isValueContainerComponent<OptionValue, isMulti, Group>(child)) {\n      return child;\n    }\n  }\n\n  // Assertion to control the return type, we should always get a valueContainer.\n  throw new Error('Assertion to make sure the container exists.');\n}\n\nexport function Control<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<ControlProps<OptionValue, isMulti, Group>>) {\n  const { children, isDisabled, innerRef, innerProps, selectProps } = props;\n  const ariaLabelledBy = selectProps['aria-labelledby'];\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    readOnly,\n    ariaDisabled,\n    ...remainingProps\n  } = selectProps.componentProps.trigger ?? {};\n  const rootRef = useMergeRefs<HTMLElement | null>([\n    innerRef,\n    selectProps.setTriggerRef,\n  ]);\n\n  const valueContainer = getSelectValueContainer(children);\n  const baseId = useId();\n  const triggerId = `strato-select-trigger${baseId}`;\n  const customTriggerId = selectProps.customTrigger?.props?.id;\n\n  const { state } = useFormFieldMessagesContext();\n  /** Please remove with removal of control state. */\n  const [hasFormControlError, hint] = useFormControlState(\n    selectProps.controlState,\n  );\n\n  const showError = selectProps.controlState\n    ? hasFormControlError\n    : state.showError;\n\n  const hiddenReactSelectInput = Array.isArray(valueContainer.props.children)\n    ? valueContainer.props.children[1]\n    : null;\n  const id = selectProps['selectInputId'];\n\n  const hiddenInput = useMemo(\n    () =>\n      cloneElement(hiddenReactSelectInput, {\n        ...hiddenReactSelectInput.props,\n        key: 'hidden-react-select-input',\n        id,\n        autoComplete: 'off',\n        'aria-invalid': showError,\n        'aria-labelledby': ariaLabelledBy ?? customTriggerId ?? triggerId,\n        'aria-label': selectProps['aria-label'],\n        'aria-describedby': selectProps['aria-describedby'],\n        'aria-details': selectProps['aria-details'],\n      }),\n    [\n      hiddenReactSelectInput,\n      id,\n      showError,\n      ariaLabelledBy,\n      customTriggerId,\n      triggerId,\n      selectProps,\n    ],\n  );\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: showError ? 'critical' : 'neutral',\n    focusWithin: true,\n    disabled: isDisabled,\n  });\n\n  const { dispatch } = useSelectMenuContext();\n\n  const interactionProps = useMemo(() => {\n    return {\n      onTouchStart: () => {\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n      },\n      onClick: () => {\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            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          {...interactionProps}\n          color={showError ? 'critical' : 'neutral'}\n          className={clsx(\n            'strato-components-select-control-trigger',\n            styles.selectTrigger({\n              fullWidth:\n                selectProps.triggerWidth === 'full' ||\n                selectProps.triggerWidth === '100%',\n              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                }),\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": "AA2LW,cA2CD,YA3CC;AA3LX,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,4BAA4B;AAErC,SAAS,oBAAoB;AAC7B,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,mCAAmC;AAC5C,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,YAAY,YAAY;AAWxB,SAAS,wBAIP,UAAqB;AACrB,QAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,aAAW,SAAS,eAAe;AACjC,QAAI,2BAAwD,KAAK,GAAG;AAClE,aAAO;AAAA,IACT;AAAA,EACF;AAGA,QAAM,IAAI,MAAM,8CAA8C;AAChE;AAEO,SAAS,QAId,OAA4D;AAC5D,QAAM,EAAE,UAAU,YAAY,UAAU,YAAY,YAAY,IAAI;AACpE,QAAM,iBAAiB,YAAY,iBAAiB;AACpD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,YAAY,eAAe,WAAW,CAAC;AAC3C,QAAM,UAAU,aAAiC;AAAA,IAC/C;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AAED,QAAM,iBAAiB,wBAAwB,QAAQ;AACvD,QAAM,SAAS,MAAM;AACrB,QAAM,YAAY,wBAAwB,MAAM;AAChD,QAAM,kBAAkB,YAAY,eAAe,OAAO;AAE1D,QAAM,EAAE,MAAM,IAAI,4BAA4B;AAE9C,QAAM,CAAC,qBAAqB,IAAI,IAAI;AAAA,IAClC,YAAY;AAAA,EACd;AAEA,QAAM,YAAY,YAAY,eAC1B,sBACA,MAAM;AAEV,QAAM,yBAAyB,MAAM,QAAQ,eAAe,MAAM,QAAQ,IACtE,eAAe,MAAM,SAAS,CAAC,IAC/B;AACJ,QAAM,KAAK,YAAY,eAAe;AAEtC,QAAM,cAAc;AAAA,IAClB,MACE,aAAa,wBAAwB;AAAA,MACnC,GAAG,uBAAuB;AAAA,MAC1B,KAAK;AAAA,MACL;AAAA,MACA,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,mBAAmB,kBAAkB,mBAAmB;AAAA,MACxD,cAAc,YAAY,YAAY;AAAA,MACtC,oBAAoB,YAAY,kBAAkB;AAAA,MAClD,gBAAgB,YAAY,cAAc;AAAA,IAC5C,CAAC;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,IAClD,OAAO,YAAY,aAAa;AAAA,IAChC,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,EAAE,SAAS,IAAI,qBAAqB;AAE1C,QAAM,mBAAmB,QAAQ,MAAM;AACrC,WAAO;AAAA,MACL,cAAc,MAAM;AAClB,iBAAS;AAAA,UACP,MAAM,cAAc;AAAA,QACtB,CAAC;AAAA,MACH;AAAA,MACA,SAAS,MAAM;AACb,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;AAAA,UACF;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,GAAG;AAAA,QACJ,OAAO,YAAY,aAAa;AAAA,QAChC,WAAW;AAAA,UACT;AAAA,UACA,OAAO,cAAc;AAAA,YACnB,WACE,YAAY,iBAAiB,UAC7B,YAAY,iBAAiB;AAAA,YAC/B;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,gBAC7B,CAAC;AAAA,cACH;AAAA,cAEA,8BAAC,wBAAqB;AAAA;AAAA,UACxB,GACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,UAAU,YAAY;AAAA,QACtB,gBAAgB,YAAY;AAAA,QAC5B,MAAM,YAAY;AAAA,QAClB,UAAU,cAAc;AAAA,QACxB,cAAc,YAAY;AAAA;AAAA,IAC5B;AAAA,IACC,QACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,YAAY,UAAU;AAAA,QAC/B,UAAU,cAAc;AAAA,QAEvB;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;",
+  "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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",
   "names": []
 }

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

@@ -5,6 +5,7 @@ import {
   applyStoredSelectionSortingOptions,
   sortSelectedOptions
 } from "./sort-selected-options-first.js";
+import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
 function Group(props) {
   const initialRender = useRef(true);
   const sortingMap = useRef(/* @__PURE__ */ new WeakMap());
@@ -14,6 +15,7 @@ function Group(props) {
     style: consumerStyle,
     "data-testid": dataTestId
   } = props.data;
+  const [groupTrackingProps] = useBehavioralTrackingProps(props.data);
   let childrenArray = Children.toArray(children);
   if (props.selectProps.showSelectedOptionsFirst) {
     if (initialRender.current === true) {
@@ -35,7 +37,8 @@ function Group(props) {
         role: "group",
         className: consumerClassName,
         style: consumerStyle,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        ...groupTrackingProps
       }),
       children: childrenArray
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/Group.tsx"],
-  "sourcesContent": ["import { useRef, type ReactElement, Children } from 'react';\nimport type {\n  GroupBase,\n  OptionProps,\n  GroupProps as ReactSelectGroupProps,\n} from 'react-select';\nimport { components } from 'react-select';\n\nimport {\n  applyStoredSelectionSortingOptions,\n  sortSelectedOptions,\n} from './sort-selected-options-first.js';\nimport type { BaseGroup, BaseOption } from '../types.js';\n\ntype GroupProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectGroupProps<OptionValue, isMulti, Group>;\n\nexport function Group<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<GroupProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const initialRender = useRef(true);\n  const sortingMap = useRef(new WeakMap());\n\n  const { children, innerProps, ...remainingProps } = props;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props.data;\n\n  let childrenArray = Children.toArray(children) as Array<\n    ReactElement<OptionProps<BaseOption<OptionValue>, isMulti, Group>>\n  >;\n\n  // During the initial rendering, the sorting is created and positions saved in a WeakMap.\n  if (props.selectProps.showSelectedOptionsFirst) {\n    if (initialRender.current === true) {\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  return (\n    <components.Group\n      {...remainingProps}\n      // Need to Object.assign to allow for adding the data attribute.\n      innerProps={Object.assign(innerProps ?? {}, {\n        role: 'group',\n        className: consumerClassName,\n        style: consumerStyle,\n        'data-testid': dataTestId,\n      })}\n    >\n      {childrenArray}\n    </components.Group>\n  );\n}\n\nGroup.displayName = 'Select.SelectGroup';\n"],
-  "mappings": "AA0DI;AA1DJ,SAAS,QAA2B,gBAAgB;AAMpD,SAAS,kBAAkB;AAE3B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AASA,SAAS,MAId,OAAsE;AACtE,QAAM,gBAAgB,OAAO,IAAI;AACjC,QAAM,aAAa,OAAO,oBAAI,QAAQ,CAAC;AAEvC,QAAM,EAAE,UAAU,YAAY,GAAG,eAAe,IAAI;AACpD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI,MAAM;AAEV,MAAI,gBAAgB,SAAS,QAAQ,QAAQ;AAK7C,MAAI,MAAM,YAAY,0BAA0B;AAC9C,QAAI,cAAc,YAAY,MAAM;AAClC,OAAC,eAAe,WAAW,OAAO,IAAI,oBAAoB,aAAa;AAAA,IACzE,OAEK;AACH,YAAM,CAAC,kBAAkB,aAAa,IACpC,mCAAmC,eAAe,WAAW,OAAO;AACtE,sBAAgB;AAChB,UAAI,eAAe;AACjB,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAEA,gBAAc,UAAU;AAExB,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACE,GAAG;AAAA,MAEJ,YAAY,OAAO,OAAO,cAAc,CAAC,GAAG;AAAA,QAC1C,MAAM;AAAA,QACN,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAe;AAAA,MACjB,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,cAAc;",
+  "sourcesContent": ["import { useRef, type ReactElement, Children } from 'react';\nimport type {\n  GroupBase,\n  OptionProps,\n  GroupProps as ReactSelectGroupProps,\n} from 'react-select';\nimport { components } from 'react-select';\n\nimport {\n  applyStoredSelectionSortingOptions,\n  sortSelectedOptions,\n} from './sort-selected-options-first.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BaseGroup, BaseOption } from '../types.js';\n\ntype GroupProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectGroupProps<OptionValue, isMulti, Group>;\n\nexport function Group<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<GroupProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const initialRender = useRef(true);\n  const sortingMap = useRef(new WeakMap());\n\n  const { children, innerProps, ...remainingProps } = props;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props.data;\n\n  const [groupTrackingProps] = useBehavioralTrackingProps(props.data);\n\n  let childrenArray = Children.toArray(children) as Array<\n    ReactElement<OptionProps<BaseOption<OptionValue>, isMulti, Group>>\n  >;\n\n  // During the initial rendering, the sorting is created and positions saved in a WeakMap.\n  if (props.selectProps.showSelectedOptionsFirst) {\n    if (initialRender.current === true) {\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  return (\n    <components.Group\n      {...remainingProps}\n      // Need to Object.assign to allow for adding the data attribute.\n      innerProps={Object.assign(innerProps ?? {}, {\n        role: 'group',\n        className: consumerClassName,\n        style: consumerStyle,\n        'data-testid': dataTestId,\n        ...groupTrackingProps,\n      })}\n    >\n      {childrenArray}\n    </components.Group>\n  );\n}\n\nGroup.displayName = 'Select.SelectGroup';\n"],
+  "mappings": "AA6DI;AA7DJ,SAAS,QAA2B,gBAAgB;AAMpD,SAAS,kBAAkB;AAE3B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC;AASpC,SAAS,MAId,OAAsE;AACtE,QAAM,gBAAgB,OAAO,IAAI;AACjC,QAAM,aAAa,OAAO,oBAAI,QAAQ,CAAC;AAEvC,QAAM,EAAE,UAAU,YAAY,GAAG,eAAe,IAAI;AACpD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI,MAAM;AAEV,QAAM,CAAC,kBAAkB,IAAI,2BAA2B,MAAM,IAAI;AAElE,MAAI,gBAAgB,SAAS,QAAQ,QAAQ;AAK7C,MAAI,MAAM,YAAY,0BAA0B;AAC9C,QAAI,cAAc,YAAY,MAAM;AAClC,OAAC,eAAe,WAAW,OAAO,IAAI,oBAAoB,aAAa;AAAA,IACzE,OAEK;AACH,YAAM,CAAC,kBAAkB,aAAa,IACpC,mCAAmC,eAAe,WAAW,OAAO;AACtE,sBAAgB;AAChB,UAAI,eAAe;AACjB,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAEA,gBAAc,UAAU;AAExB,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACE,GAAG;AAAA,MAEJ,YAAY,OAAO,OAAO,cAAc,CAAC,GAAG;AAAA,QAC1C,MAAM;AAAA,QACN,WAAW;AAAA,QACX,OAAO;AAAA,QACP,eAAe;AAAA,QACf,GAAG;AAAA,MACL,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,cAAc;",
   "names": []
 }

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

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
 import { Text } from "../../../typography/text/Text.js";
 import * as styles from "../styles/Select.sty.js";
@@ -13,6 +14,7 @@ function GroupHeading(props) {
     style: consumerStyle,
     "data-testid": dataTestId
   } = labelProps ?? {};
+  const [labelTrackingProps] = useBehavioralTrackingProps(labelProps ?? {});
   return /* @__PURE__ */ jsx(
     Flex,
     {
@@ -22,6 +24,7 @@ function GroupHeading(props) {
       className: consumerClassName,
       style: consumerStyle,
       "data-testid": dataTestId,
+      ...labelTrackingProps,
       children: /* @__PURE__ */ jsx(
         Text,
         {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/GroupHeading.tsx"],
-  "sourcesContent": ["import type {\n  GroupBase,\n  GroupHeadingProps as ReactSelectGroupHeadingProps,\n} from 'react-select';\n\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport * as styles from '../styles/Select.sty.js';\n\ntype GroupHeadingProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectGroupHeadingProps<\n  OptionValue,\n  isMulti,\n  Group & { labelProps?: StylingProps & DataTestId }\n>;\n\nexport function GroupHeading<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: GroupHeadingProps<OptionValue, isMulti, Group>) {\n  const {\n    id,\n    children,\n    data: { labelProps },\n  } = props;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = labelProps ?? {};\n\n  return (\n    <Flex\n      paddingX={12}\n      paddingTop={12}\n      paddingBottom={4}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      <Text\n        as=\"span\"\n        id={id}\n        textStyle=\"small-emphasized\"\n        className={styles.selectGroupHeading}\n      >\n        {children}\n      </Text>\n    </Flex>\n  );\n}\n"],
-  "mappings": "AA8CM;AAvCN,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,YAAY,YAAY;AAYjB,SAAS,aAId,OAAuD;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,MAAM,EAAE,WAAW;AAAA,EACrB,IAAI;AACJ,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI,cAAc,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MAEb;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH;AAAA,UACA,WAAU;AAAA,UACV,WAAW,OAAO;AAAA,UAEjB;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import type {\n  GroupBase,\n  GroupHeadingProps as ReactSelectGroupHeadingProps,\n} from 'react-select';\n\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../core/types/data-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport * as styles from '../styles/Select.sty.js';\n\ntype GroupHeadingProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectGroupHeadingProps<\n  OptionValue,\n  isMulti,\n  Group & { labelProps?: StylingProps & DataTestId & BehaviorTrackingProps }\n>;\n\nexport function GroupHeading<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: GroupHeadingProps<OptionValue, isMulti, Group>) {\n  const {\n    id,\n    children,\n    data: { labelProps },\n  } = props;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = labelProps ?? {};\n\n  const [labelTrackingProps] = useBehavioralTrackingProps(labelProps ?? {});\n\n  return (\n    <Flex\n      paddingX={12}\n      paddingTop={12}\n      paddingBottom={4}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...labelTrackingProps}\n    >\n      <Text\n        as=\"span\"\n        id={id}\n        textStyle=\"small-emphasized\"\n        className={styles.selectGroupHeading}\n      >\n        {children}\n      </Text>\n    </Flex>\n  );\n}\n"],
+  "mappings": "AAmDM;AA9CN,SAAS,kCAAkC;AAI3C,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,YAAY,YAAY;AAYjB,SAAS,aAId,OAAuD;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,MAAM,EAAE,WAAW;AAAA,EACrB,IAAI;AACJ,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAAI,cAAc,CAAC;AAEnB,QAAM,CAAC,kBAAkB,IAAI,2BAA2B,cAAc,CAAC,CAAC;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH;AAAA,UACA,WAAU;AAAA,UACV,WAAW,OAAO;AAAA,UAEjB;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -11,7 +11,6 @@ import { createPortal } from "react-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { usePopper } from "react-popper";
 import Borders from "@dynatrace/strato-design-tokens/borders";
-import Colors from "@dynatrace/strato-design-tokens/colors";
 import { CheckmarkSmallIcon, MinusIcon } from "@dynatrace/strato-icons";
 import { Button } from "../../../buttons/button/Button.js";
 import { ProgressCircle } from "../../../content/progress/ProgressCircle.js";
@@ -139,7 +138,11 @@ function Menu(props) {
     [selectProps.triggerRef]
   );
   useEffect(() => {
-    return () => hiddenTrigger?.focus();
+    return () => {
+      if (!document.activeElement || document.activeElement === document.body) {
+        hiddenTrigger?.focus();
+      }
+    };
   }, [hiddenTrigger]);
   const intl = useIntl();
   const ariaLabelId = useId();
@@ -386,7 +389,7 @@ function Menu(props) {
               paddingY: 6,
               paddingLeft: 8,
               paddingRight: 12,
-              style: { color: Colors.Text.Neutral.Subdued },
+              className: styles.selectMenuLoadingWrapper,
               children: [
                 /* @__PURE__ */ jsx(ProgressCircle, { size: "small", "aria-labelledby": ariaLabelId }),
                 /* @__PURE__ */ jsx(Text, { id: ariaLabelId, children: /* @__PURE__ */ jsx(

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

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

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

@@ -22,8 +22,8 @@ function NoOptionsMessage(props) {
         as: "p",
         ...remainingProps,
         children: selectEmptyState ?? intl.formatMessage({
-          defaultMessage: "No items found.",
-          id: "ZYdCWJSSKEkwsXkW",
+          defaultMessage: "No results found",
+          id: "U09aNQxYT1yrJ4eJ",
           description: "Default message when no options are available in the select."
         })
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/NoOptionsMessage.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useIntl } from 'react-intl';\nimport type {\n  GroupBase,\n  NoticeProps as ReactNoOptionsMessageProps,\n} from 'react-select';\n\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport * as styles from '../styles/Select.sty.js';\n\ntype NoOptionsMessageProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactNoOptionsMessageProps<OptionValue, isMulti, Group>;\n\nexport function NoOptionsMessage<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<NoOptionsMessageProps<OptionValue, isMulti, Group>>) {\n  const selectEmptyState = props.selectProps.emptyState?.props.children;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props.selectProps.componentProps.emptyState ?? {};\n  const intl = useIntl();\n\n  if (!selectEmptyState || _canReceiveDefaultTextFormat(selectEmptyState)) {\n    return (\n      <Text\n        textStyle=\"base\"\n        style={consumerStyle}\n        className={clsx(styles.selectNoOptionsMessage, consumerClassName)}\n        as=\"p\"\n        {...remainingProps}\n      >\n        {selectEmptyState ??\n          intl.formatMessage({\n            defaultMessage: 'No items found.',\n            id: 'ZYdCWJSSKEkwsXkW',\n            description:\n              'Default message when no options are available in the select.',\n          })}\n      </Text>\n    );\n  } else {\n    return (\n      <Text\n        textStyle=\"base\"\n        style={consumerStyle}\n        className={clsx(styles.selectNoOptionsMessage, consumerClassName)}\n        as=\"p\"\n        {...remainingProps}\n      >\n        {selectEmptyState}\n      </Text>\n    );\n  }\n}\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useIntl } from 'react-intl';\nimport type {\n  GroupBase,\n  NoticeProps as ReactNoOptionsMessageProps,\n} from 'react-select';\n\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport * as styles from '../styles/Select.sty.js';\n\ntype NoOptionsMessageProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactNoOptionsMessageProps<OptionValue, isMulti, Group>;\n\nexport function NoOptionsMessage<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<NoOptionsMessageProps<OptionValue, isMulti, Group>>) {\n  const selectEmptyState = props.selectProps.emptyState?.props.children;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props.selectProps.componentProps.emptyState ?? {};\n  const intl = useIntl();\n\n  if (!selectEmptyState || _canReceiveDefaultTextFormat(selectEmptyState)) {\n    return (\n      <Text\n        textStyle=\"base\"\n        style={consumerStyle}\n        className={clsx(styles.selectNoOptionsMessage, consumerClassName)}\n        as=\"p\"\n        {...remainingProps}\n      >\n        {selectEmptyState ??\n          intl.formatMessage({\n            defaultMessage: 'No results found',\n            id: 'U09aNQxYT1yrJ4eJ',\n            description:\n              'Default message when no options are available in the select.',\n          })}\n      </Text>\n    );\n  } else {\n    return (\n      <Text\n        textStyle=\"base\"\n        style={consumerStyle}\n        className={clsx(styles.selectNoOptionsMessage, consumerClassName)}\n        as=\"p\"\n        {...remainingProps}\n      >\n        {selectEmptyState}\n      </Text>\n    );\n  }\n}\n"],
   "mappings": "AAgCM;AAhCN,OAAO,UAAU;AACjB,SAAS,eAAe;AAMxB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,YAAY,YAAY;AAQjB,SAAS,iBAId,OAAqE;AACrE,QAAM,mBAAmB,MAAM,YAAY,YAAY,MAAM;AAC7D,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI,MAAM,YAAY,eAAe,cAAc,CAAC;AACpD,QAAM,OAAO,QAAQ;AAErB,MAAI,CAAC,oBAAoB,6BAA6B,gBAAgB,GAAG;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,QACP,WAAW,KAAK,OAAO,wBAAwB,iBAAiB;AAAA,QAChE,IAAG;AAAA,QACF,GAAG;AAAA,QAEH,8BACC,KAAK,cAAc;AAAA,UACjB,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aACE;AAAA,QACJ,CAAC;AAAA;AAAA,IACL;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,QACP,WAAW,KAAK,OAAO,wBAAwB,iBAAiB;AAAA,QAChE,IAAG;AAAA,QACF,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
   "names": []
 }

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

@@ -2,6 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { CheckmarkSmallIcon } from "@dynatrace/strato-icons";
 import { TextEllipsisAroundChildren } from "../../../core/components/TextEllipsisAroundChildren.js";
+import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
+import { getVirtualFocusStyles } from "../../../core/styles/getVirtualFocusStyles.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
 import { useSelectMenuContext } from "../hooks/use-select-menu-context.js";
 import { SelectActions } from "../state/select-menu-state-reducer.js";
@@ -23,7 +25,19 @@ function Option(props) {
     prefix,
     suffix
   } = props.data;
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(props.data);
+  const [prefixTrackingProps] = useBehavioralTrackingProps(
+    prefix.componentProps ?? {}
+  );
+  const [suffixTrackingProps] = useBehavioralTrackingProps(
+    suffix.componentProps ?? {}
+  );
   const { dispatch } = useSelectMenuContext();
+  const isVirtuallyFocused = selectProps.focusOnOption && isFocused;
+  const { className: virtualFocusClassName } = getVirtualFocusStyles(
+    isVirtuallyFocused,
+    isSelected && !isMulti ? "primary" : "neutral"
+  );
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -33,9 +47,9 @@ function Option(props) {
       className: clsx(
         "strato-select-option",
         isMulti === true ? styles.selectOptionMulti : styles.selectOptionSingle,
+        virtualFocusClassName,
         {
           "strato-select-option--selected": isSelected,
-          "strato-select-option--focus": selectProps.focusOnOption ? isFocused : false,
           "strato-select-option--disabled": isDisabled
         },
         consumerClassName
@@ -52,6 +66,7 @@ function Option(props) {
         }
       },
       "aria-selected": isSelected,
+      ...behavioralTrackingProps,
       children: [
         isMulti === true ? /* @__PURE__ */ jsx(
           "div",
@@ -78,6 +93,7 @@ function Option(props) {
             ),
             style: prefix.componentProps?.style,
             "data-testid": prefix.componentProps?.["data-testid"],
+            ...prefixTrackingProps,
             children: prefix.component
           }
         ) : null,
@@ -91,6 +107,7 @@ function Option(props) {
             ),
             style: suffix.componentProps?.style,
             "data-testid": suffix.componentProps?.["data-testid"],
+            ...suffixTrackingProps,
             children: suffix.component
           }
         ) : null

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