@dynatrace/strato-components 3.7.1 → 3.9.0

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

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

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

@@ -55,12 +55,17 @@ function MenuList(props) {
     () => ({
       scrollToBottom: () => {
         optionVirtualizer.scrollToIndex(childrenArray.length);
+      },
+      scrollToIndex: (index) => {
+        optionVirtualizer.scrollToIndex(index);
       }
     })
   );
   useEffect(() => {
     requestAnimationFrame(() => {
-      optionVirtualizer.measure();
+      optionVirtualizer.elementsCache.forEach((element) => {
+        optionVirtualizer.measureElement(element);
+      });
     });
   }, [notifyParentRefChange, childrenArray.length]);
   return /* @__PURE__ */ jsx(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/MenuList.tsx"],
-  "sourcesContent": ["import { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport type {\n  GroupBase,\n  MenuListProps as ReactSelectMenuListProps,\n} from 'react-select';\n\nimport { NoOptionsMessage } from './NoOptionsMessage.js';\nimport type { OptionProps } from './Option.js';\nimport {\n  applyStoredSelectionSortingOptions,\n  sortSelectedOptions,\n} from './sort-selected-options-first.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseGroup, BaseOption } from '../types.js';\n\n/**\n * @internal\n */\nexport interface MenuListFunctionRefObject {\n  /** Function to scroll to the last option. */\n  scrollToBottom: () => void;\n}\n\ntype MenuListProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectMenuListProps<OptionValue, isMulti, Group>;\n\nexport function MenuList<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<MenuListProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const { children, selectProps, innerProps } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n  // Get a setter on the parentRef to get notified when the element re-renders.\n  const [notifyParentRefChange, setNotifyParentRefChange] =\n    useState<HTMLDivElement | null>();\n\n  const initialRender = useRef(true);\n  const sortingMap = useRef(new WeakMap());\n\n  let childrenArray = Children.toArray(children) as Array<\n    ReactElement<OptionProps<BaseOption<OptionValue>, isMulti, Group>>\n  >;\n\n  const currentChildrenLength = useRef(childrenArray.length);\n\n  // During the initial rendering, the sorting is created and positions saved in a WeakMap.\n  // If only the NoOptionsMessage/empty state is shown we don't need any sorting\n  if (\n    selectProps.showSelectedOptionsFirst &&\n    !(childrenArray.length === 1 && childrenArray[0].type === NoOptionsMessage)\n  ) {\n    if (initialRender.current === true) {\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    } else if (currentChildrenLength.current !== childrenArray.length) {\n      currentChildrenLength.current = childrenArray.length;\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    }\n    // Otherwise the data is sorted by the initial sorting parameters.\n    else {\n      const [newChildrenArray, newSortingMap] =\n        applyStoredSelectionSortingOptions(childrenArray, sortingMap.current);\n      childrenArray = newChildrenArray;\n      if (newSortingMap) {\n        sortingMap.current = newSortingMap;\n      }\n    }\n  }\n\n  initialRender.current = false;\n\n  const optionVirtualizer = useVirtualizer({\n    count: childrenArray.length,\n    getScrollElement: () => parentRef.current,\n    overscan: 5,\n    estimateSize: () => 32,\n  });\n\n  const menulistref = useMergeRefs([\n    props.innerRef,\n    parentRef,\n    setNotifyParentRefChange,\n    selectProps.contentRef,\n  ]);\n\n  useImperativeHandle(\n    selectProps.menuListFunctionRef,\n    (): MenuListFunctionRefObject => ({\n      scrollToBottom: () => {\n        optionVirtualizer.scrollToIndex(childrenArray.length);\n      },\n    }),\n  );\n\n  // When the parentElement re-renders, we will need to remeasure the virtualizer in order to\n  // keep the correct height.\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      optionVirtualizer.measure();\n    });\n    // Deliberately leave optionVirtualizer out of the update deps to prevent a maximum update depth exceeded issue.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notifyParentRefChange, childrenArray.length]);\n\n  return (\n    <div\n      {...innerProps}\n      ref={menulistref}\n      className={clsx(styles.selectMenuListWrapper, 'strato-select-menulist')}\n      style={{\n        width:\n          optionVirtualizer.scrollOffset !== null &&\n          optionVirtualizer.scrollOffset > 0 &&\n          selectProps.contentWidth === 'max-content'\n            ? optionVirtualizer.scrollRect?.width\n            : undefined,\n      }}\n    >\n      {/* role=\"presentation\" on a div is intentional \u2014 neutralizes the virtualization wrapper so screen readers count options correctly */}\n      <div\n        role=\"presentation\"\n        style={{\n          height: optionVirtualizer.getTotalSize(),\n          display: 'grid',\n          gridTemplateRows: optionVirtualizer.measurementsCache\n            .map((el) => `${el.size}px`)\n            .join(' '),\n        }}\n        key={`wrapper-${selectProps.options.length}`}\n        className={styles.selectVirtualizationWrapper}\n      >\n        {optionVirtualizer.getVirtualItems().map((virtualRow) => {\n          const child = childrenArray?.[virtualRow.index];\n          return (\n            <div\n              key={virtualRow.key}\n              className=\"strato-select-option\"\n              // data-index is required for the virtualizer to map the measure\n              // element correctly to the measured index.\n              data-index={virtualRow.index}\n              style={{\n                gridRow: virtualRow.index + 1,\n                minWidth: 0,\n                height: 'fit-content',\n              }}\n              ref={(el) => {\n                optionVirtualizer.measureElement(el);\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport type {\n  GroupBase,\n  MenuListProps as ReactSelectMenuListProps,\n} from 'react-select';\n\nimport { NoOptionsMessage } from './NoOptionsMessage.js';\nimport type { OptionProps } from './Option.js';\nimport {\n  applyStoredSelectionSortingOptions,\n  sortSelectedOptions,\n} from './sort-selected-options-first.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseGroup, BaseOption } from '../types.js';\n\n/**\n * @internal\n */\nexport interface MenuListFunctionRefObject {\n  /** Function to scroll to the last option. */\n  scrollToBottom: () => void;\n  /** Function to scroll to a specific virtualizer index. */\n  scrollToIndex: (index: number) => void;\n}\n\ntype MenuListProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectMenuListProps<OptionValue, isMulti, Group>;\n\nexport function MenuList<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<MenuListProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const { children, selectProps, innerProps } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n  // Get a setter on the parentRef to get notified when the element re-renders.\n  const [notifyParentRefChange, setNotifyParentRefChange] =\n    useState<HTMLDivElement | null>();\n\n  const initialRender = useRef(true);\n  const sortingMap = useRef(new WeakMap());\n\n  let childrenArray = Children.toArray(children) as Array<\n    ReactElement<OptionProps<BaseOption<OptionValue>, isMulti, Group>>\n  >;\n\n  const currentChildrenLength = useRef(childrenArray.length);\n\n  // During the initial rendering, the sorting is created and positions saved in a WeakMap.\n  // If only the NoOptionsMessage/empty state is shown we don't need any sorting\n  if (\n    selectProps.showSelectedOptionsFirst &&\n    !(childrenArray.length === 1 && childrenArray[0].type === NoOptionsMessage)\n  ) {\n    if (initialRender.current === true) {\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    } else if (currentChildrenLength.current !== childrenArray.length) {\n      currentChildrenLength.current = childrenArray.length;\n      [childrenArray, sortingMap.current] = sortSelectedOptions(childrenArray);\n    }\n    // Otherwise the data is sorted by the initial sorting parameters.\n    else {\n      const [newChildrenArray, newSortingMap] =\n        applyStoredSelectionSortingOptions(childrenArray, sortingMap.current);\n      childrenArray = newChildrenArray;\n      if (newSortingMap) {\n        sortingMap.current = newSortingMap;\n      }\n    }\n  }\n\n  initialRender.current = false;\n\n  const optionVirtualizer = useVirtualizer({\n    count: childrenArray.length,\n    getScrollElement: () => parentRef.current,\n    overscan: 5,\n    estimateSize: () => 32,\n  });\n\n  const menulistref = useMergeRefs([\n    props.innerRef,\n    parentRef,\n    setNotifyParentRefChange,\n    selectProps.contentRef,\n  ]);\n\n  useImperativeHandle(\n    selectProps.menuListFunctionRef,\n    (): MenuListFunctionRefObject => ({\n      scrollToBottom: () => {\n        optionVirtualizer.scrollToIndex(childrenArray.length);\n      },\n      scrollToIndex: (index: number) => {\n        optionVirtualizer.scrollToIndex(index);\n      },\n    }),\n  );\n\n  // When the parentElement re-renders, we will need to remeasure the virtualizer in order to\n  // keep the correct height.\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      optionVirtualizer.elementsCache.forEach((element) => {\n        optionVirtualizer.measureElement(element);\n      });\n    });\n    // Deliberately leave optionVirtualizer out of the update deps to prevent a maximum update depth exceeded issue.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notifyParentRefChange, childrenArray.length]);\n\n  return (\n    <div\n      {...innerProps}\n      ref={menulistref}\n      className={clsx(styles.selectMenuListWrapper, 'strato-select-menulist')}\n      style={{\n        width:\n          optionVirtualizer.scrollOffset !== null &&\n          optionVirtualizer.scrollOffset > 0 &&\n          selectProps.contentWidth === 'max-content'\n            ? optionVirtualizer.scrollRect?.width\n            : undefined,\n      }}\n    >\n      {/* role=\"presentation\" on a div is intentional \u2014 neutralizes the virtualization wrapper so screen readers count options correctly */}\n      <div\n        role=\"presentation\"\n        style={{\n          height: optionVirtualizer.getTotalSize(),\n          display: 'grid',\n          gridTemplateRows: optionVirtualizer.measurementsCache\n            .map((el) => `${el.size}px`)\n            .join(' '),\n        }}\n        key={`wrapper-${selectProps.options.length}`}\n        className={styles.selectVirtualizationWrapper}\n      >\n        {optionVirtualizer.getVirtualItems().map((virtualRow) => {\n          const child = childrenArray?.[virtualRow.index];\n          return (\n            <div\n              key={virtualRow.key}\n              className=\"strato-select-option\"\n              // data-index is required for the virtualizer to map the measure\n              // element correctly to the measured index.\n              data-index={virtualRow.index}\n              style={{\n                gridRow: virtualRow.index + 1,\n                minWidth: 0,\n                height: 'fit-content',\n              }}\n              ref={(el) => {\n                optionVirtualizer.measureElement(el);\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],
+  "mappings": "AA2JY;AA3JZ,SAAS,sBAAsB;AAC/B,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAMP,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,YAAY,YAAY;AAmBjB,SAAS,SAId,OAAyE;AACzE,QAAM,EAAE,UAAU,aAAa,WAAW,IAAI;AAE9C,QAAM,YAAY,OAA8B,IAAI;AAEpD,QAAM,CAAC,uBAAuB,wBAAwB,IACpD,SAAgC;AAElC,QAAM,gBAAgB,OAAO,IAAI;AACjC,QAAM,aAAa,OAAO,oBAAI,QAAQ,CAAC;AAEvC,MAAI,gBAAgB,SAAS,QAAQ,QAAQ;AAI7C,QAAM,wBAAwB,OAAO,cAAc,MAAM;AAIzD,MACE,YAAY,4BACZ,EAAE,cAAc,WAAW,KAAK,cAAc,CAAC,EAAE,SAAS,mBAC1D;AACA,QAAI,cAAc,YAAY,MAAM;AAClC,OAAC,eAAe,WAAW,OAAO,IAAI,oBAAoB,aAAa;AAAA,IACzE,WAAW,sBAAsB,YAAY,cAAc,QAAQ;AACjE,4BAAsB,UAAU,cAAc;AAC9C,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,QAAM,oBAAoB,eAAe;AAAA,IACvC,OAAO,cAAc;AAAA,IACrB,kBAAkB,MAAM,UAAU;AAAA,IAClC,UAAU;AAAA,IACV,cAAc,MAAM;AAAA,EACtB,CAAC;AAED,QAAM,cAAc,aAAa;AAAA,IAC/B,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AAED;AAAA,IACE,YAAY;AAAA,IACZ,OAAkC;AAAA,MAChC,gBAAgB,MAAM;AACpB,0BAAkB,cAAc,cAAc,MAAM;AAAA,MACtD;AAAA,MACA,eAAe,CAAC,UAAkB;AAChC,0BAAkB,cAAc,KAAK;AAAA,MACvC;AAAA,IACF;AAAA,EACF;AAIA,YAAU,MAAM;AACd,0BAAsB,MAAM;AAC1B,wBAAkB,cAAc,QAAQ,CAAC,YAAY;AACnD,0BAAkB,eAAe,OAAO;AAAA,MAC1C,CAAC;AAAA,IACH,CAAC;AAAA,EAGH,GAAG,CAAC,uBAAuB,cAAc,MAAM,CAAC;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,KAAK,OAAO,uBAAuB,wBAAwB;AAAA,MACtE,OAAO;AAAA,QACL,OACE,kBAAkB,iBAAiB,QACnC,kBAAkB,eAAe,KACjC,YAAY,iBAAiB,gBACzB,kBAAkB,YAAY,QAC9B;AAAA,MACR;AAAA,MAGA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,YACL,QAAQ,kBAAkB,aAAa;AAAA,YACvC,SAAS;AAAA,YACT,kBAAkB,kBAAkB,kBACjC,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,IAAI,EAC1B,KAAK,GAAG;AAAA,UACb;AAAA,UAEA,WAAW,OAAO;AAAA,UAEjB,4BAAkB,gBAAgB,EAAE,IAAI,CAAC,eAAe;AACvD,kBAAM,QAAQ,gBAAgB,WAAW,KAAK;AAC9C,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAU;AAAA,gBAGV,cAAY,WAAW;AAAA,gBACvB,OAAO;AAAA,kBACL,SAAS,WAAW,QAAQ;AAAA,kBAC5B,UAAU;AAAA,kBACV,QAAQ;AAAA,gBACV;AAAA,gBACA,KAAK,CAAC,OAAO;AACX,oCAAkB,eAAe,EAAE;AAAA,gBACrC;AAAA,gBAEC;AAAA;AAAA,cAdI,WAAW;AAAA,YAelB;AAAA,UAEJ,CAAC;AAAA;AAAA,QAxBI,WAAW,YAAY,QAAQ,MAAM;AAAA,MAyB5C;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -3,7 +3,9 @@ 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 { useModality } from "../../../core/hooks/useModality.js";
 import { getVirtualFocusStyles } from "../../../core/utils/getVirtualFocusStyles.js";
+import { modalityStore } from "../../../core/utils/modality.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";
@@ -12,7 +14,11 @@ function Option(props) {
   const {
     children,
     isSelected,
-    innerProps,
+    innerProps: {
+      onMouseMove: _onMouseMove,
+      onMouseOver: _onMouseOver,
+      ...innerProps
+    },
     isFocused,
     isDisabled,
     isMulti,
@@ -33,8 +39,9 @@ function Option(props) {
   const [suffixTrackingProps] = useBehavioralTrackingProps(
     suffix.componentProps ?? {}
   );
+  const modality = useModality();
   const { dispatch } = useSelectMenuContext();
-  const isVirtuallyFocused = selectProps.focusOnOption && isFocused;
+  const isVirtuallyFocused = modality === "keyboard" && selectProps.focusOnOption && isFocused;
   const { className: virtualFocusClassName } = getVirtualFocusStyles(
     isVirtuallyFocused,
     isSelected && !isMulti ? "primary" : "neutral"
@@ -45,13 +52,15 @@ function Option(props) {
       "data-testid": dataTestId,
       role: "option",
       ...innerProps,
+      onMouseMove: () => modalityStore.setState("pointer"),
       className: clsx(
         "strato-select-option",
         isMulti === true ? styles.selectOptionMulti : styles.selectOptionSingle,
         virtualFocusClassName,
         {
           "strato-select-option--selected": isSelected,
-          "strato-select-option--disabled": isDisabled
+          "strato-select-option--disabled": isDisabled,
+          "strato-select-option--focus": isVirtuallyFocused
         },
         consumerClassName
       ),

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

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

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

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

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

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

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

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

package/esm/forms/shared-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/forms/shared-types.ts"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\n\n/**\n * BaseFormControl ref\n * @public\n */\nexport interface FormControlRef<T extends HTMLElement = HTMLElement> {\n  /** Returns the wrapping element ref.*/\n  readonly element: T | null;\n  /** Returns the underlying input ref.*/\n  readonly inputRef?: HTMLInputElement | HTMLSelectElement | null;\n  /** Will focus the underlying input or interactive element. */\n  focus?: () => void;\n  /** Validates the form control and sets the validity state. */\n  validate: () => void;\n}\n\n/**\n * Ref for form-elements with overlay\n * @public\n */\nexport interface FormControlWithOverlayRef<\n  T extends HTMLElement = HTMLDivElement,\n> extends FormControlRef<T> {\n  /** Function to open the overlay of the control. */\n  open: () => void;\n  /** Function to close the overlay of the control. */\n  close: () => void;\n  /** Ref to the opening trigger element. */\n  readonly triggerRef?: HTMLElement | null;\n}\n\n/**\n * An imperative handle giving access to the root element and the actual input element of the component, as well as the open and close handlers for the overlay.\n * @public\n */\nexport interface TimeRangePickerRef<T extends HTMLElement = HTMLDivElement>\n  extends Omit<FormControlWithOverlayRef<T>, 'inputRef'> {\n  /** Returns the underlying input ref.*/\n  readonly inputRef: {\n    /** Returns the underlying 'From' input ref.*/\n    readonly from?: HTMLInputElement | null;\n    /** Returns the underlying 'To' input ref.*/\n    readonly to?: HTMLInputElement | null;\n  };\n}\n\n/**\n * Type guard function that determines whether a FormControlRef is\n * of type FormControlWithOverlayRef.\n * @internal\n */\nexport function isFormControlWithOverlayRef<T extends HTMLElement>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  props: any,\n): props is FormControlWithOverlayRef<T> {\n  return 'open' in props;\n}\n\n/**\n * Type guard function that determines whether the input is of type FormControlRef.\n * @internal\n */\nexport function isFormControlRef(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref: any,\n): ref is FormControlRef {\n  return !isNil(ref) && 'element' in ref;\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AAoDf,SAAS,4BAEd,OACuC;AACvC,SAAO,UAAU;AACnB;AAMO,SAAS,iBAEd,KACuB;AACvB,SAAO,CAAC,MAAM,GAAG,KAAK,aAAa;AACrC;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\n\nimport type { ValidationState } from './validation/types.js';\n\n/**\n * BaseFormControl ref\n * @public\n */\nexport interface FormControlRef<T extends HTMLElement = HTMLElement> {\n  /** Returns the wrapping element ref.*/\n  readonly element: T | null;\n  /** Returns the underlying input ref.*/\n  readonly inputRef?: HTMLInputElement | HTMLSelectElement | null;\n  /** Will focus the underlying input or interactive element. */\n  focus?: () => void;\n  /** Validates the form control and sets the validity state. */\n  validate: () => void;\n  /**\n   * Validates the form control asynchronously and returns the validation state.\n   * @deprecated Use this method when you need the validation result returned. In the next major\n   * version, `validate()` will return `Promise<ValidationState>` directly and this method will\n   * be removed, switch to `validate()` at that point.\n   */\n  validateAsync?: () => Promise<ValidationState>;\n}\n\n/**\n * Ref for form-elements with overlay\n * @public\n */\nexport interface FormControlWithOverlayRef<\n  T extends HTMLElement = HTMLDivElement,\n> extends FormControlRef<T> {\n  /** Function to open the overlay of the control. */\n  open: () => void;\n  /** Function to close the overlay of the control. */\n  close: () => void;\n  /** Ref to the opening trigger element. */\n  readonly triggerRef?: HTMLElement | null;\n}\n\n/**\n * An imperative handle giving access to the root element and the actual input element of the component, as well as the open and close handlers for the overlay.\n * @public\n */\nexport interface TimeRangePickerRef<T extends HTMLElement = HTMLDivElement>\n  extends Omit<FormControlWithOverlayRef<T>, 'inputRef'> {\n  /** Returns the underlying input ref.*/\n  readonly inputRef: {\n    /** Returns the underlying 'From' input ref.*/\n    readonly from?: HTMLInputElement | null;\n    /** Returns the underlying 'To' input ref.*/\n    readonly to?: HTMLInputElement | null;\n  };\n}\n\n/**\n * Type guard function that determines whether a FormControlRef is\n * of type FormControlWithOverlayRef.\n * @internal\n */\nexport function isFormControlWithOverlayRef<T extends HTMLElement>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  props: any,\n): props is FormControlWithOverlayRef<T> {\n  return 'open' in props;\n}\n\n/**\n * Type guard function that determines whether the input is of type FormControlRef.\n * @internal\n */\nexport function isFormControlRef(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref: any,\n): ref is FormControlRef {\n  return !isNil(ref) && 'element' in ref;\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AA6Df,SAAS,4BAEd,OACuC;AACvC,SAAO,UAAU;AACnB;AAMO,SAAS,iBAEd,KACuB;AACvB,SAAO,CAAC,MAAM,GAAG,KAAK,aAAa;AACrC;",
   "names": []
 }

package/esm/forms/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-7-1 {
+._r47o0w1-3-9-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-7-1:empty::before {
+._r47o0w1-3-9-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-7-1:focus:empty {
+._r47o0w1-3-9-0:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-7-1 {
+._r47o0w2-3-9-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-7-1:focus:empty {
+._r47o0w2-3-9-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-7-1 {
+._r47o0w3-3-9-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-7-1:empty::before {
+._r47o0w3-3-9-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-7-1 {
+._r47o0w4-3-9-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

package/esm/forms/spin-buttons/SpinButton.sty.js

@@ -1,7 +1,7 @@
 import "./SpinButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-7-1", variantClassNames: { error: { true: "_r47o0w2-3-7-1" }, disabled: { true: "_r47o0w3-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-7-1"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-7-1";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-9-0", variantClassNames: { error: { true: "_r47o0w2-3-9-0" }, disabled: { true: "_r47o0w3-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-9-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-9-0";
 export {
   spinButtonCSS,
   spinButtonGroupCSS

package/esm/forms/spin-buttons/SpinButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/spin-buttons/SpinButton.css.ts"],
-  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-7-1',variantClassNames:{error:{true:'_r47o0w2-3-7-1'},disabled:{true:'_r47o0w3-3-7-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-7-1']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-7-1';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-9-0',variantClassNames:{error:{true:'_r47o0w2-3-9-0'},disabled:{true:'_r47o0w3-3-9-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-9-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACrO,IAAI,qBAAqB;",
   "names": []
 }