@dynatrace/strato-components 3.6.0 → 3.7.1

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

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

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

@@ -5,9 +5,9 @@ import "../hooks/useAutofillEvent.css";
 import "../_base-input/BaseInput.css";
 import "../_base-input/BaseInputContent.css";
 import "./Stepper.css";
-var matchPositionIndicators = "_s3yy5s0-3-6-0 _o6rxr70-3-6-0 _da9a8v0-3-6-0 _da9a8v2-3-6-0 _da9a8v3-3-6-0 _da9a8vb-3-6-0";
-var stepperButton = "_s3yy5s2-3-6-0 _1a8lqy9e-3-6-0";
-var stepperButtons = "_s3yy5s1-3-6-0";
+var matchPositionIndicators = "_s3yy5s0-3-7-1 _o6rxr70-3-7-1 _da9a8v0-3-7-1 _da9a8v2-3-7-1 _da9a8v3-3-7-1 _da9a8vb-3-7-1";
+var stepperButton = "_s3yy5s2-3-7-1 _1a8lqy9e-3-7-1";
+var stepperButtons = "_s3yy5s1-3-7-1";
 export {
   matchPositionIndicators,
   stepperButton,

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

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

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

@@ -10,11 +10,11 @@ import { ChevronDownSmallIcon } from "@dynatrace/strato-icons";
 import { HiddenSelect } from "./HiddenSelect.js";
 import { _isValueContainerComponent } from "./ValueContainer.js";
 import { Button } from "../../../buttons/button/Button.js";
+import { useFocusRing } from "../../../core/hooks/useFocusRing.js";
 import { useFormControlState } from "../../../core/hooks/useFormControlState.js";
 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";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/Control.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  type ReactNode,\n  type KeyboardEvent as ReactKeyboardEvent,\n  Children,\n  cloneElement,\n  useRef,\n} from 'react';\nimport type {\n  GroupBase,\n  ControlProps as ReactSelectControlProps,\n} from 'react-select';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { HiddenSelect } from './HiddenSelect.js';\nimport { _isValueContainerComponent } from './ValueContainer.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useFormControlState } from '../../../core/hooks/useFormControlState.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { OverlayStackingProvider } from '../../../core/providers/OverlayStackingProvider.js';\nimport { useFocusRing } from '../../../core/styles/useFocusRing.js';\nimport { isVisualRefreshEnabled } from '../../../core/utils/is-visual-refresh-enabled.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { InternalBaseItem as BaseItem } from '../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\n\n//#region Typings\ntype ControlProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectControlProps<OptionValue, isMulti, Group>;\n//#endregion Typings\n\n/** Iterates over child nodes to extract the value container. */\nfunction getSelectValueContainer<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(children: ReactNode) {\n  const childrenArray = Children.toArray(children);\n\n  for (const child of childrenArray) {\n    if (_isValueContainerComponent<OptionValue, isMulti, Group>(child)) {\n      return child;\n    }\n  }\n\n  // Assertion to control the return type, we should always get a valueContainer.\n  throw new Error('Assertion to make sure the container exists.');\n}\n\nexport function Control<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<ControlProps<OptionValue, isMulti, Group>>) {\n  const { children, isDisabled, innerRef, innerProps, selectProps } = props;\n  const ariaLabelledBy = selectProps['aria-labelledby'];\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    readOnly,\n    ariaDisabled,\n    ...remainingProps\n  } = selectProps.componentProps.trigger ?? {};\n  const rootRef = useMergeRefs<HTMLElement | null>([\n    innerRef,\n    selectProps.setTriggerRef,\n  ]);\n\n  const valueContainer = getSelectValueContainer(children);\n  const baseId = useId();\n  const triggerId = `strato-select-trigger${baseId}`;\n  const customTriggerId = selectProps.customTrigger?.props?.id;\n\n  const { state } = useFormFieldMessagesContext();\n  /** Please remove with removal of control state. */\n  const [hasFormControlError, hint] = useFormControlState(\n    selectProps.controlState,\n  );\n\n  const showError = selectProps.controlState\n    ? hasFormControlError\n    : state.showError;\n\n  // with the visual refresh enabled, a disabled select should not receive critical coloring on error\n  const isCritical = isVisualRefreshEnabled()\n    ? showError && !isDisabled\n    : showError;\n\n  const hiddenReactSelectInput = Array.isArray(valueContainer.props.children)\n    ? valueContainer.props.children[1]\n    : null;\n  const id = selectProps['selectInputId'];\n\n  const hiddenInput = useMemo(\n    () =>\n      cloneElement(hiddenReactSelectInput, {\n        ...hiddenReactSelectInput.props,\n        key: 'hidden-react-select-input',\n        id,\n        autoComplete: 'off',\n        'aria-haspopup': 'listbox',\n        'aria-invalid': showError,\n        'aria-labelledby': ariaLabelledBy ?? customTriggerId ?? triggerId,\n        'aria-label': selectProps['aria-label'],\n        'aria-describedby': selectProps['aria-describedby'],\n        'aria-details': selectProps['aria-details'],\n      }),\n    [\n      hiddenReactSelectInput,\n      id,\n      showError,\n      ariaLabelledBy,\n      customTriggerId,\n      triggerId,\n      selectProps,\n    ],\n  );\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: showError ? 'critical' : 'neutral',\n    focusWithin: true,\n    disabled: isDisabled,\n  });\n\n  const { dispatch } = useSelectMenuContext();\n  const handledByTouchRef = useRef(false);\n\n  const interactionProps = useMemo(() => {\n    return {\n      onTouchEnd: () => {\n        // On mobile, touchend fires before the emulated click. We dispatch\n        // SELECTFOCUS to toggle the menu, then focus the filter input on the\n        // next animation frame.\n        handledByTouchRef.current = true;\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n        requestAnimationFrame(() => {\n          selectProps.filterRef?.current?.inputRef?.focus({\n            preventScroll: true,\n          });\n        });\n      },\n      onClick: () => {\n        // Skip the emulated click that follows a touchend on mobile.\n        if (handledByTouchRef.current) {\n          handledByTouchRef.current = false;\n          return;\n        }\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n      },\n\n      onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {\n        if (\n          (event.key === 'Enter' || event.key === ' ') &&\n          !selectProps.isMulti\n        ) {\n          dispatch({\n            type: SelectActions.CLOSE,\n          });\n        }\n      },\n    };\n  }, [dispatch, selectProps.isMulti]);\n\n  const customTrigger = useMemo(() => {\n    if (selectProps.customTrigger) {\n      /** React Select dummyInput is applied in the ValueContainers children in order to\n       * handle / react to the inputs correctly. This one needs to be passed through in order for the\n       * trigger to work correctly.\n       */\n\n      return cloneElement(\n        selectProps.customTrigger,\n        {\n          key: 'custom-trigger',\n          ref: rootRef,\n          id: triggerId,\n          ..._mergeProps(\n            selectProps.customTrigger.props,\n            innerProps,\n            ...(isDisabled ? [] : [interactionProps]),\n          ),\n        },\n        [selectProps.customTrigger.props?.children, hiddenInput],\n      );\n    }\n  }, [\n    hiddenInput,\n    innerProps,\n    interactionProps,\n    rootRef,\n    selectProps.customTrigger,\n    triggerId,\n  ]);\n\n  if (customTrigger) {\n    return <OverlayStackingProvider>{customTrigger}</OverlayStackingProvider>;\n  }\n\n  return (\n    <Flex padding={0} flexDirection=\"column\" gap={4}>\n      <OverlayStackingProvider>\n        <Button\n          ref={rootRef}\n          id={triggerId}\n          textAlign=\"start\"\n          data-testid={dataTestId}\n          disabled={isDisabled}\n          aria-disabled={ariaDisabled}\n          width={selectProps.triggerWidth}\n          {...innerProps}\n          variant=\"emphasized\"\n          {...(isDisabled ? undefined : interactionProps)}\n          color={isCritical ? 'critical' : 'neutral'}\n          className={clsx(\n            'strato-components-select-control-trigger',\n            styles.selectTrigger({\n              fullWidth:\n                selectProps.triggerWidth === 'full' ||\n                selectProps.triggerWidth === '100%',\n              showError,\n              readOnly,\n            }),\n            focusClassName,\n            consumerClassName,\n          )}\n          style={consumerStyle}\n          as=\"div\"\n          {...focusProps}\n          {...remainingProps}\n        >\n          {selectProps.prefix && (\n            <Button.Prefix\n              data-testid={selectProps.prefix.props['data-testid']}\n              className={selectProps.prefix.props.className}\n              style={selectProps.prefix.props.style}\n            >\n              {selectProps.prefix.props.children}\n            </Button.Prefix>\n          )}\n          <Button.Label>\n            {hiddenInput}\n            {valueContainer}\n          </Button.Label>\n          <Button.Suffix>\n            <div\n              className={clsx(\n                styles.selectTriggerIconWrapper({\n                  isOverlayOpen: selectProps.menuIsOpen,\n                  readOnly,\n                }),\n              )}\n            >\n              <ChevronDownSmallIcon />\n            </div>\n          </Button.Suffix>\n        </Button>\n      </OverlayStackingProvider>\n      <HiddenSelect<OptionValue>\n        ref={selectProps.hiddenSelectRef}\n        required={selectProps.isRequired}\n        selectedValues={selectProps.value}\n        name={selectProps.hiddenSelectName}\n        disabled={isDisabled || readOnly}\n        controlState={selectProps.controlState}\n      />\n      {hint && (\n        <BaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={isDisabled || ariaDisabled}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n}\n"],
-  "mappings": "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",
+  "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 { useFocusRing } from '../../../core/hooks/useFocusRing.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 { isVisualRefreshEnabled } from '../../../core/utils/is-visual-refresh-enabled.js';\nimport { mergeProps as _mergeProps } from '../../../core/utils/merge-props.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { InternalBaseItem as BaseItem } from '../../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\n\n//#region Typings\ntype ControlProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectControlProps<OptionValue, isMulti, Group>;\n//#endregion Typings\n\n/** Iterates over child nodes to extract the value container. */\nfunction getSelectValueContainer<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(children: ReactNode) {\n  const childrenArray = Children.toArray(children);\n\n  for (const child of childrenArray) {\n    if (_isValueContainerComponent<OptionValue, isMulti, Group>(child)) {\n      return child;\n    }\n  }\n\n  // Assertion to control the return type, we should always get a valueContainer.\n  throw new Error('Assertion to make sure the container exists.');\n}\n\nexport function Control<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n>(props: Readonly<ControlProps<OptionValue, isMulti, Group>>) {\n  const { children, isDisabled, innerRef, innerProps, selectProps } = props;\n  const ariaLabelledBy = selectProps['aria-labelledby'];\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    readOnly,\n    ariaDisabled,\n    ...remainingProps\n  } = selectProps.componentProps.trigger ?? {};\n  const rootRef = useMergeRefs<HTMLElement | null>([\n    innerRef,\n    selectProps.setTriggerRef,\n  ]);\n\n  const valueContainer = getSelectValueContainer(children);\n  const baseId = useId();\n  const triggerId = `strato-select-trigger${baseId}`;\n  const customTriggerId = selectProps.customTrigger?.props?.id;\n\n  const { state } = useFormFieldMessagesContext();\n  /** Please remove with removal of control state. */\n  const [hasFormControlError, hint] = useFormControlState(\n    selectProps.controlState,\n  );\n\n  const showError = selectProps.controlState\n    ? hasFormControlError\n    : state.showError;\n\n  // with the visual refresh enabled, a disabled select should not receive critical coloring on error\n  const isCritical = isVisualRefreshEnabled()\n    ? showError && !isDisabled\n    : showError;\n\n  const hiddenReactSelectInput = Array.isArray(valueContainer.props.children)\n    ? valueContainer.props.children[1]\n    : null;\n  const id = selectProps['selectInputId'];\n\n  const hiddenInput = useMemo(\n    () =>\n      cloneElement(hiddenReactSelectInput, {\n        ...hiddenReactSelectInput.props,\n        key: 'hidden-react-select-input',\n        id,\n        autoComplete: 'off',\n        'aria-haspopup': 'listbox',\n        'aria-invalid': showError,\n        'aria-labelledby': ariaLabelledBy ?? customTriggerId ?? triggerId,\n        'aria-label': selectProps['aria-label'],\n        'aria-describedby': selectProps['aria-describedby'],\n        'aria-details': selectProps['aria-details'],\n      }),\n    [\n      hiddenReactSelectInput,\n      id,\n      showError,\n      ariaLabelledBy,\n      customTriggerId,\n      triggerId,\n      selectProps,\n    ],\n  );\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: showError ? 'critical' : 'neutral',\n    focusWithin: true,\n    disabled: isDisabled,\n  });\n\n  const { dispatch } = useSelectMenuContext();\n  const handledByTouchRef = useRef(false);\n\n  const interactionProps = useMemo(() => {\n    return {\n      onTouchEnd: () => {\n        // On mobile, touchend fires before the emulated click. We dispatch\n        // SELECTFOCUS to toggle the menu, then focus the filter input on the\n        // next animation frame.\n        handledByTouchRef.current = true;\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n        requestAnimationFrame(() => {\n          selectProps.filterRef?.current?.inputRef?.focus({\n            preventScroll: true,\n          });\n        });\n      },\n      onClick: () => {\n        // Skip the emulated click that follows a touchend on mobile.\n        if (handledByTouchRef.current) {\n          handledByTouchRef.current = false;\n          return;\n        }\n        dispatch({\n          type: SelectActions.SELECTFOCUS,\n        });\n      },\n\n      onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {\n        if (\n          (event.key === 'Enter' || event.key === ' ') &&\n          !selectProps.isMulti\n        ) {\n          dispatch({\n            type: SelectActions.CLOSE,\n          });\n        }\n      },\n    };\n  }, [dispatch, selectProps.isMulti]);\n\n  const customTrigger = useMemo(() => {\n    if (selectProps.customTrigger) {\n      /** React Select dummyInput is applied in the ValueContainers children in order to\n       * handle / react to the inputs correctly. This one needs to be passed through in order for the\n       * trigger to work correctly.\n       */\n\n      return cloneElement(\n        selectProps.customTrigger,\n        {\n          key: 'custom-trigger',\n          ref: rootRef,\n          id: triggerId,\n          ..._mergeProps(\n            selectProps.customTrigger.props,\n            innerProps,\n            ...(isDisabled ? [] : [interactionProps]),\n          ),\n        },\n        [selectProps.customTrigger.props?.children, hiddenInput],\n      );\n    }\n  }, [\n    hiddenInput,\n    innerProps,\n    interactionProps,\n    rootRef,\n    selectProps.customTrigger,\n    triggerId,\n  ]);\n\n  if (customTrigger) {\n    return <OverlayStackingProvider>{customTrigger}</OverlayStackingProvider>;\n  }\n\n  return (\n    <Flex padding={0} flexDirection=\"column\" gap={4}>\n      <OverlayStackingProvider>\n        <Button\n          ref={rootRef}\n          id={triggerId}\n          textAlign=\"start\"\n          data-testid={dataTestId}\n          disabled={isDisabled}\n          aria-disabled={ariaDisabled}\n          width={selectProps.triggerWidth}\n          {...innerProps}\n          variant=\"emphasized\"\n          {...(isDisabled ? undefined : interactionProps)}\n          color={isCritical ? 'critical' : 'neutral'}\n          className={clsx(\n            'strato-components-select-control-trigger',\n            styles.selectTrigger({\n              fullWidth:\n                selectProps.triggerWidth === 'full' ||\n                selectProps.triggerWidth === '100%',\n              showError,\n              readOnly,\n            }),\n            focusClassName,\n            consumerClassName,\n          )}\n          style={consumerStyle}\n          as=\"div\"\n          {...focusProps}\n          {...remainingProps}\n        >\n          {selectProps.prefix && (\n            <Button.Prefix\n              data-testid={selectProps.prefix.props['data-testid']}\n              className={selectProps.prefix.props.className}\n              style={selectProps.prefix.props.style}\n            >\n              {selectProps.prefix.props.children}\n            </Button.Prefix>\n          )}\n          <Button.Label>\n            {hiddenInput}\n            {valueContainer}\n          </Button.Label>\n          <Button.Suffix>\n            <div\n              className={clsx(\n                styles.selectTriggerIconWrapper({\n                  isOverlayOpen: selectProps.menuIsOpen,\n                  readOnly,\n                }),\n              )}\n            >\n              <ChevronDownSmallIcon />\n            </div>\n          </Button.Suffix>\n        </Button>\n      </OverlayStackingProvider>\n      <HiddenSelect<OptionValue>\n        ref={selectProps.hiddenSelectRef}\n        required={selectProps.isRequired}\n        selectedValues={selectProps.value}\n        name={selectProps.hiddenSelectName}\n        disabled={isDisabled || readOnly}\n        controlState={selectProps.controlState}\n      />\n      {hint && (\n        <BaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={isDisabled || ariaDisabled}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { CheckmarkSmallIcon } from "@dynatrace/strato-icons";
 import { TextEllipsisAroundChildren } from "../../../core/components/TextEllipsisAroundChildren.js";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
-import { getVirtualFocusStyles } from "../../../core/styles/getVirtualFocusStyles.js";
+import { getVirtualFocusStyles } from "../../../core/utils/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";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/select/components/Option.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type MouseEvent as ReactMouseEvent } from 'react';\nimport type {\n  OptionProps as ReactSelectOptionProps,\n  GroupBase,\n} from 'react-select';\n\nimport { CheckmarkSmallIcon } from '@dynatrace/strato-icons';\n\nimport { TextEllipsisAroundChildren } from '../../../core/components/TextEllipsisAroundChildren.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { getVirtualFocusStyles } from '../../../core/styles/getVirtualFocusStyles.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { useSelectMenuContext } from '../hooks/use-select-menu-context.js';\nimport { SelectActions } from '../state/select-menu-state-reducer.js';\nimport * as styles from '../styles/Select.sty.js';\nimport type { BaseOption, BaseGroup } from '../types.js';\n\nexport type OptionProps<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends GroupBase<OptionValue>,\n> = ReactSelectOptionProps<OptionValue, isMulti, Group>;\n\nexport function Option<\n  OptionValue,\n  isMulti extends boolean,\n  Group extends BaseGroup<OptionValue>,\n>(props: Readonly<OptionProps<BaseOption<OptionValue>, isMulti, Group>>) {\n  const {\n    children,\n    isSelected,\n    innerProps,\n    isFocused,\n    isDisabled,\n    isMulti,\n    selectProps,\n  } = props;\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    '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"],
+  "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;",
   "names": []
 }

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

@@ -1,89 +1,89 @@
-._dlenfc0-3-6-0._dlenfc0-3-6-0 {
+._dlenfc0-3-7-1._dlenfc0-3-7-1 {
   pointer-events: auto;
 }
-._dlenfc1-3-6-0._dlenfc1-3-6-0 {
+._dlenfc1-3-7-1._dlenfc1-3-7-1 {
   min-width: unset;
 }
-._dlenfc3-3-6-0 {
+._dlenfc3-3-7-1 {
   width: 100%;
 }
-._dlenfc4-3-6-0 {
+._dlenfc4-3-7-1 {
   width: auto;
 }
-._dlenfc5-3-6-0 > span {
+._dlenfc5-3-7-1 > span {
   z-index: unset;
 }
-._dlenfc6-3-6-0 {
+._dlenfc6-3-7-1 {
   display: flex;
 }
-._dlenfc7-3-6-0 {
+._dlenfc7-3-7-1 {
   transform: rotate(180deg);
 }
-._dlenfc8-3-6-0 {
+._dlenfc8-3-7-1 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }
-._dlenfca-3-6-0 {
+._dlenfca-3-7-1 {
   width: auto;
 }
-._dlenfcc-3-6-0 {
+._dlenfcc-3-7-1 {
   cursor: default;
 }
-:root:not(._1jgl8s50-3-6-0) ._dlenfcc-3-6-0 {
-  --_bx32h3-3-6-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+:root:not(._1jgl8s50-3-7-1) ._dlenfcc-3-7-1 {
+  --_bx32h3-3-7-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._dlenfcd-3-6-0 {
+._dlenfcd-3-7-1 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-6-0 ._dlenfce-3-6-0, ._1jgl8s50-3-6-0 ._dlenfce-3-6-0:hover, ._1jgl8s50-3-6-0 ._dlenfce-3-6-0:active {
-  --_bx32h3-3-6-0: var(--dt-colors-background-surface-default, #fff);
-  --_bx32h4-3-6-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);
+._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);
 }
-._dlenfcf-3-6-0 {
+._dlenfcf-3-7-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcg-3-6-0 {
+._dlenfcg-3-7-1 {
   width: 100%;
   position: relative;
 }
-._dlenfch-3-6-0 {
+._dlenfch-3-7-1 {
   overflow: auto;
 }
-._dlenfci-3-6-0 {
+._dlenfci-3-7-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcj-3-6-0 {
+._dlenfcj-3-7-1 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfck-3-6-0 ._dlenfcl-3-6-0 {
+._dlenfck-3-7-1 ._dlenfcl-3-7-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcm-3-6-0 {
+._dlenfcm-3-7-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._dlenfcn-3-6-0.strato-select-divider {
+._dlenfcn-3-7-1.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfco-3-6-0 {
+._dlenfco-3-7-1 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfcp-3-6-0 {
+._dlenfcp-3-7-1 {
   min-width: 128px;
 }
-._dlenfcq-3-6-0 {
+._dlenfcq-3-7-1 {
   display: inline;
 }
-._dlenfcq-3-6-0 + ._dlenfcq-3-6-0:before {
+._dlenfcq-3-7-1 + ._dlenfcq-3-7-1:before {
   content: ", ";
 }
-._dlenfcr-3-6-0 {
+._dlenfcr-3-7-1 {
   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-6-0:hover:not(.strato-select-option--disabled) {
+._dlenfcr-3-7-1:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcr-3-6-0.strato-select-option--selected {
+._dlenfcr-3-7-1.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcr-3-6-0.strato-select-option--disabled {
+._dlenfcr-3-7-1.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcr-3-6-0.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcr-3-7-1.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcr-3-6-0.strato-select-option--selected:hover {
+._dlenfcr-3-7-1.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcr-3-6-0.strato-select-option--selected::before {
+._dlenfcr-3-7-1.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -120,11 +120,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcs-3-6-0:focus {
+._dlenfcs-3-7-1: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-6-0 {
+._dlenfct-3-7-1 {
   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-6-0:hover:not(.strato-select-option--disabled) {
+._dlenfct-3-7-1:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfct-3-6-0.strato-select-option--disabled {
+._dlenfct-3-7-1.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcu-3-6-0 {
+._dlenfcu-3-7-1 {
   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-6-0 {
+.strato-select-option--disabled ._dlenfcu-3-7-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcv-3-6-0 {
+._dlenfcv-3-7-1 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcw-3-6-0 {
+._dlenfcw-3-7-1 {
   fill: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcw-3-6-0 {
+.strato-select-option--disabled ._dlenfcw-3-7-1 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcx-3-6-0 {
+._dlenfcx-3-7-1 {
   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-6-0 {
+._dlenfcy-3-7-1 {
   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-6-0";
-var filter = "_dlenfc1-3-6-0";
-var placeholderColor = "_dlenfcl-3-6-0";
-var select = "_dlenfc0-3-6-0";
-var selectAll = "_dlenfcs-3-6-0";
-var selectGroupHeading = "_dlenfcf-3-6-0";
-var selectMenuDivider = "_dlenfcn-3-6-0";
-var selectMenuListWrapper = "_dlenfch-3-6-0";
-var selectMenuLoadingWrapper = "_dlenfcm-3-6-0";
-var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfco-3-6-0", variantClassNames: { isTriggerWidth: { true: "_dlenfcp-3-6-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcq-3-6-0";
-var selectNoOptionsMessage = "_dlenfci-3-6-0";
-var selectOptionMulti = "_dlenfct-3-6-0";
-var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcu-3-6-0", variantClassNames: { selected: { true: "_dlenfcv-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcw-3-6-0";
-var selectOptionPrefix = "_dlenfcx-3-6-0";
-var selectOptionSingle = "_dlenfcr-3-6-0";
-var selectOptionSuffix = "_dlenfcy-3-6-0";
-var selectTrigger = _7a468({ defaultClassName: "_dlenfc9-3-6-0", variantClassNames: { fullWidth: { true: "_dlenfca-3-6-0" }, showError: { true: "_dlenfcb-3-6-0" }, readOnly: { true: "_dlenfcc-3-6-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [[{ showError: true, readOnly: true }, "_dlenfcd-3-6-0"], [{ showError: false, readOnly: true }, "_dlenfce-3-6-0"]] });
-var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-6-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-6-0" }, readOnly: { true: "_dlenfc8-3-6-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcj-3-6-0";
-var selectVirtualizationWrapper = "_dlenfcg-3-6-0";
-var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-6-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-6-0", false: "_dlenfc4-3-6-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfck-3-6-0";
+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";
 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-6-0';\nexport var filter = '_dlenfc1-3-6-0';\nexport var placeholderColor = '_dlenfcl-3-6-0';\nexport var select = '_dlenfc0-3-6-0';\nexport var selectAll = '_dlenfcs-3-6-0';\nexport var selectGroupHeading = '_dlenfcf-3-6-0';\nexport var selectMenuDivider = '_dlenfcn-3-6-0';\nexport var selectMenuListWrapper = '_dlenfch-3-6-0';\nexport var selectMenuLoadingWrapper = '_dlenfcm-3-6-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfco-3-6-0',variantClassNames:{isTriggerWidth:{true:'_dlenfcp-3-6-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcq-3-6-0';\nexport var selectNoOptionsMessage = '_dlenfci-3-6-0';\nexport var selectOptionMulti = '_dlenfct-3-6-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcu-3-6-0',variantClassNames:{selected:{true:'_dlenfcv-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcw-3-6-0';\nexport var selectOptionPrefix = '_dlenfcx-3-6-0';\nexport var selectOptionSingle = '_dlenfcr-3-6-0';\nexport var selectOptionSuffix = '_dlenfcy-3-6-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc9-3-6-0',variantClassNames:{fullWidth:{true:'_dlenfca-3-6-0'},showError:{true:'_dlenfcb-3-6-0'},readOnly:{true:'_dlenfcc-3-6-0'}},defaultVariants:{fullWidth:false},compoundVariants:[[{showError:true,readOnly:true},'_dlenfcd-3-6-0'],[{showError:false,readOnly:true},'_dlenfce-3-6-0']]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-6-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-6-0'},readOnly:{true:'_dlenfc8-3-6-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcj-3-6-0';\nexport var selectVirtualizationWrapper = '_dlenfcg-3-6-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-6-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-6-0',false:'_dlenfc4-3-6-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfck-3-6-0';"],
+  "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';"],
   "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/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-6-0 {
+._r47o0w1-3-7-1 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-6-0:empty::before {
+._r47o0w1-3-7-1:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-6-0:focus:empty {
+._r47o0w1-3-7-1:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-6-0 {
+._r47o0w2-3-7-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-6-0:focus:empty {
+._r47o0w2-3-7-1:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-6-0 {
+._r47o0w3-3-7-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-6-0:empty::before {
+._r47o0w3-3-7-1:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-6-0 {
+._r47o0w4-3-7-1 {
   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-6-0", variantClassNames: { error: { true: "_r47o0w2-3-6-0" }, disabled: { true: "_r47o0w3-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-6-0"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-6-0";
+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";
 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-6-0',variantClassNames:{error:{true:'_r47o0w2-3-6-0'},disabled:{true:'_r47o0w3-3-6-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-6-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-6-0';"],
+  "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';"],
   "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": []
 }

package/esm/forms/spin-buttons/spin-button-group/hooks/useValueOverflow.js

@@ -35,11 +35,12 @@ function handleValueOverflow({
   const overflowChar = candidate.substring(candidate.length - 1);
   const overflowDigit = parseInt(overflowChar);
   const isNumericOverflow = Number.isInteger(overflowDigit);
-  const candidateValue = parseInt(candidate);
+  const isCandidateNumeric = /^\d+$/.test(candidate);
+  const candidateValue = parseInt(candidate, 10);
   const hasNextInGroup = nextSpinButton !== void 0;
   const canAdvanceOutOfGroup = nextSpinButton === void 0 && onTrailingEdge !== void 0;
   const isReplacingWholeValue = sel !== void 0 && sel.start === 0 && sel.end === currentText.length;
-  if (isNumericOverflow && maxNrOfDigits >= 2 && candidate.length === 1 && candidateValue > Math.floor(maxValue / 10) && (currentText === "" || isReplacingWholeValue) && (hasNextInGroup || canAdvanceOutOfGroup)) {
+  if (isCandidateNumeric && isNumericOverflow && maxNrOfDigits >= 2 && candidate.length === 1 && candidateValue > Math.floor(maxValue / 10) && (currentText === "" || isReplacingWholeValue) && (hasNextInGroup || canAdvanceOutOfGroup)) {
     currentHandler.applyText(candidate, true);
     event.preventDefault();
     if (hasNextInGroup) {
@@ -49,7 +50,7 @@ function handleValueOverflow({
     }
     return;
   }
-  if (candidate.length === maxNrOfDigits && candidateValue <= maxValue) {
+  if (isCandidateNumeric && candidate.length === maxNrOfDigits && candidateValue <= maxValue) {
     const hasCrossGroupEdge = !hasNextInGroup && onTrailingEdge !== void 0;
     if (hasNextInGroup || hasCrossGroupEdge) {
       currentHandler?.applyText(candidate, true);
@@ -66,7 +67,7 @@ function handleValueOverflow({
     currentHandler.selectAll();
     return;
   }
-  if (isNumericOverflow && candidate.length === maxNrOfDigits && candidateValue > maxValue && hasNextInGroup) {
+  if (isCandidateNumeric && isNumericOverflow && candidate.length === maxNrOfDigits && candidateValue > maxValue && hasNextInGroup) {
     event.preventDefault();
     if (nextSpinButton.type === "number") {
       nextSpinButton.applyText(overflowChar, true);
@@ -79,7 +80,7 @@ function handleValueOverflow({
     return;
   }
   if (!hasNextInGroup && onTrailingOverflow) {
-    if (!isNumericOverflow) {
+    if (!isNumericOverflow || !isCandidateNumeric) {
       return;
     }
     if (candidate.length <= maxNrOfDigits && candidateValue <= maxValue) {