@dynatrace/strato-components 3.2.1 → 3.3.0

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

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

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

@@ -1,71 +1,71 @@
-._dlenfc0-3-2-1._dlenfc0-3-2-1 {
+._dlenfc0-3-3-0._dlenfc0-3-3-0 {
   pointer-events: auto;
 }
-._dlenfc1-3-2-1._dlenfc1-3-2-1 {
+._dlenfc1-3-3-0._dlenfc1-3-3-0 {
   min-width: unset;
 }
-._dlenfc3-3-2-1 {
+._dlenfc3-3-3-0 {
   width: 100%;
 }
-._dlenfc4-3-2-1 {
+._dlenfc4-3-3-0 {
   width: auto;
 }
-._dlenfc5-3-2-1 > span {
+._dlenfc5-3-3-0 > span {
   z-index: unset;
 }
-._dlenfc6-3-2-1 {
+._dlenfc6-3-3-0 {
   display: flex;
 }
-._dlenfc7-3-2-1 {
+._dlenfc7-3-3-0 {
   transform: rotate(180deg);
 }
-._dlenfc9-3-2-1 {
+._dlenfc9-3-3-0 {
   width: auto;
 }
-._dlenfca-3-2-1 {
+._dlenfca-3-3-0 {
   cursor: not-allowed;
 }
-._dlenfcb-3-2-1 {
+._dlenfcb-3-3-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfcc-3-2-1 {
+._dlenfcc-3-3-0 {
   width: 100%;
   position: relative;
 }
-._dlenfcd-3-2-1 {
+._dlenfcd-3-3-0 {
   overflow: auto;
 }
-._dlenfce-3-2-1 {
+._dlenfce-3-3-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._dlenfcf-3-2-1 {
+._dlenfcf-3-3-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-._dlenfcg-3-2-1 ._dlenfch-3-2-1 {
+._dlenfcg-3-3-0 ._dlenfch-3-3-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._dlenfci-3-2-1.strato-select-divider {
+._dlenfci-3-3-0.strato-select-divider {
   margin: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-0, 0);
 }
-._dlenfcj-3-2-1 {
+._dlenfcj-3-3-0 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   max-height: 101vh;
 }
-._dlenfck-3-2-1 {
+._dlenfck-3-3-0 {
   min-width: 128px;
 }
-._dlenfcl-3-2-1 {
+._dlenfcl-3-3-0 {
   display: inline;
 }
-._dlenfcl-3-2-1 + ._dlenfcl-3-2-1:before {
+._dlenfcl-3-3-0 + ._dlenfcl-3-3-0:before {
   content: ", ";
 }
-._dlenfcm-3-2-1 {
+._dlenfcm-3-3-0 {
   position: relative;
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
@@ -75,30 +75,30 @@
   padding-bottom: var(--dt-spacings-size-6, 6px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }
-._dlenfcm-3-2-1:hover:not(.strato-select-option--disabled) {
+._dlenfcm-3-3-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfcm-3-2-1.strato-select-option--focus {
+._dlenfcm-3-3-0.strato-select-option--focus {
   outline: none;
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._dlenfcm-3-2-1.strato-select-option--focus.strato-select-option--selected {
+._dlenfcm-3-3-0.strato-select-option--focus.strato-select-option--selected {
   background-color: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._dlenfcm-3-2-1.strato-select-option--selected {
+._dlenfcm-3-3-0.strato-select-option--selected {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._dlenfcm-3-2-1.strato-select-option--disabled {
+._dlenfcm-3-3-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcm-3-2-1.strato-select-option--selected.strato-select-option--disabled:before {
+._dlenfcm-3-3-0.strato-select-option--selected.strato-select-option--disabled:before {
   background-color: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._dlenfcm-3-2-1.strato-select-option--selected:hover {
+._dlenfcm-3-3-0.strato-select-option--selected:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._dlenfcm-3-2-1.strato-select-option--selected::before {
+._dlenfcm-3-3-0.strato-select-option--selected::before {
   content: " ";
   position: absolute;
   display: block;
@@ -109,11 +109,11 @@
   left: 0px;
   transform: translate(4px);
 }
-._dlenfcn-3-2-1:focus {
+._dlenfcn-3-3-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);
 }
-._dlenfco-3-2-1 {
+._dlenfco-3-3-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);
@@ -123,17 +123,17 @@
   cursor: pointer;
   border-radius: var(--dt-spacings-size-8, 8px);
 }
-._dlenfco-3-2-1:hover:not(.strato-select-option--disabled) {
+._dlenfco-3-3-0:hover:not(.strato-select-option--disabled) {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._dlenfco-3-2-1.strato-select-option--focus {
+._dlenfco-3-3-0.strato-select-option--focus {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._dlenfco-3-2-1.strato-select-option--disabled {
+._dlenfco-3-3-0.strato-select-option--disabled {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._dlenfcp-3-2-1 {
+._dlenfcp-3-3-0 {
   display: flex;
   width: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -145,29 +145,29 @@
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-sizing: border-box;
 }
-.strato-select-option--disabled ._dlenfcp-3-2-1 {
+.strato-select-option--disabled ._dlenfcp-3-3-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._dlenfcq-3-2-1 {
+._dlenfcq-3-3-0 {
   border-color: var(--dt-colors-background-field-primary-accent, #474fcf);
   background-color: var(--dt-colors-background-field-primary-accent, #474fcf);
 }
-._dlenfcr-3-2-1 {
+._dlenfcr-3-3-0 {
   fill: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
   height: 100%;
   width: 100%;
 }
-.strato-select-option--disabled ._dlenfcr-3-2-1 {
+.strato-select-option--disabled ._dlenfcr-3-3-0 {
   fill: var(--dt-colors-icon-primary-disabled, #595a7d80);
 }
-._dlenfcs-3-2-1 {
+._dlenfcs-3-3-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);
 }
-._dlenfct-3-2-1 {
+._dlenfct-3-3-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

@@ -1,28 +1,28 @@
 import "./Select.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearReactSelectZIndex = "_dlenfc5-3-2-1";
-var filter = "_dlenfc1-3-2-1";
-var placeholderColor = "_dlenfch-3-2-1";
-var select = "_dlenfc0-3-2-1";
-var selectAll = "_dlenfcn-3-2-1";
-var selectGroupHeading = "_dlenfcb-3-2-1";
-var selectMenuDivider = "_dlenfci-3-2-1";
-var selectMenuListWrapper = "_dlenfcd-3-2-1";
-var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfcj-3-2-1", variantClassNames: { isTriggerWidth: { true: "_dlenfck-3-2-1" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
-var selectMultiValue = "_dlenfcl-3-2-1";
-var selectNoOptionsMessage = "_dlenfce-3-2-1";
-var selectOptionMulti = "_dlenfco-3-2-1";
-var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcp-3-2-1", variantClassNames: { selected: { true: "_dlenfcq-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var selectOptionMultiIndicatorIcon = "_dlenfcr-3-2-1";
-var selectOptionPrefix = "_dlenfcs-3-2-1";
-var selectOptionSingle = "_dlenfcm-3-2-1";
-var selectOptionSuffix = "_dlenfct-3-2-1";
-var selectTrigger = _7a468({ defaultClassName: "_dlenfc8-3-2-1", variantClassNames: { fullWidth: { true: "_dlenfc9-3-2-1" }, readOnly: { true: "_dlenfca-3-2-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-2-1", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-2-1" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
-var selectValueContainerTruncationBox = "_dlenfcf-3-2-1";
-var selectVirtualizationWrapper = "_dlenfcc-3-2-1";
-var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-2-1", variantClassNames: { fullWidth: { true: "_dlenfc3-3-2-1", false: "_dlenfc4-3-2-1" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
-var validAndEnabled = "_dlenfcg-3-2-1";
+var clearReactSelectZIndex = "_dlenfc5-3-3-0";
+var filter = "_dlenfc1-3-3-0";
+var placeholderColor = "_dlenfch-3-3-0";
+var select = "_dlenfc0-3-3-0";
+var selectAll = "_dlenfcn-3-3-0";
+var selectGroupHeading = "_dlenfcb-3-3-0";
+var selectMenuDivider = "_dlenfci-3-3-0";
+var selectMenuListWrapper = "_dlenfcd-3-3-0";
+var selectMenuOverlay = _7a468({ defaultClassName: "_dlenfcj-3-3-0", variantClassNames: { isTriggerWidth: { true: "_dlenfck-3-3-0" } }, defaultVariants: { isTriggerWidth: false }, compoundVariants: [] });
+var selectMultiValue = "_dlenfcl-3-3-0";
+var selectNoOptionsMessage = "_dlenfce-3-3-0";
+var selectOptionMulti = "_dlenfco-3-3-0";
+var selectOptionMultiIndicator = _7a468({ defaultClassName: "_dlenfcp-3-3-0", variantClassNames: { selected: { true: "_dlenfcq-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var selectOptionMultiIndicatorIcon = "_dlenfcr-3-3-0";
+var selectOptionPrefix = "_dlenfcs-3-3-0";
+var selectOptionSingle = "_dlenfcm-3-3-0";
+var selectOptionSuffix = "_dlenfct-3-3-0";
+var selectTrigger = _7a468({ defaultClassName: "_dlenfc8-3-3-0", variantClassNames: { fullWidth: { true: "_dlenfc9-3-3-0" }, readOnly: { true: "_dlenfca-3-3-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var selectTriggerIconWrapper = _7a468({ defaultClassName: "_dlenfc6-3-3-0", variantClassNames: { isOverlayOpen: { true: "_dlenfc7-3-3-0" } }, defaultVariants: { isOverlayOpen: false }, compoundVariants: [] });
+var selectValueContainerTruncationBox = "_dlenfcf-3-3-0";
+var selectVirtualizationWrapper = "_dlenfcc-3-3-0";
+var selectWrapper = _7a468({ defaultClassName: "_dlenfc2-3-3-0", variantClassNames: { fullWidth: { true: "_dlenfc3-3-3-0", false: "_dlenfc4-3-3-0" } }, defaultVariants: { fullWidth: false }, compoundVariants: [] });
+var validAndEnabled = "_dlenfcg-3-3-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 './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-2-1';\nexport var filter = '_dlenfc1-3-2-1';\nexport var placeholderColor = '_dlenfch-3-2-1';\nexport var select = '_dlenfc0-3-2-1';\nexport var selectAll = '_dlenfcn-3-2-1';\nexport var selectGroupHeading = '_dlenfcb-3-2-1';\nexport var selectMenuDivider = '_dlenfci-3-2-1';\nexport var selectMenuListWrapper = '_dlenfcd-3-2-1';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfcj-3-2-1',variantClassNames:{isTriggerWidth:{true:'_dlenfck-3-2-1'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcl-3-2-1';\nexport var selectNoOptionsMessage = '_dlenfce-3-2-1';\nexport var selectOptionMulti = '_dlenfco-3-2-1';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcp-3-2-1',variantClassNames:{selected:{true:'_dlenfcq-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcr-3-2-1';\nexport var selectOptionPrefix = '_dlenfcs-3-2-1';\nexport var selectOptionSingle = '_dlenfcm-3-2-1';\nexport var selectOptionSuffix = '_dlenfct-3-2-1';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc8-3-2-1',variantClassNames:{fullWidth:{true:'_dlenfc9-3-2-1'},readOnly:{true:'_dlenfca-3-2-1'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-2-1',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-2-1'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcf-3-2-1';\nexport var selectVirtualizationWrapper = '_dlenfcc-3-2-1';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-2-1',variantClassNames:{fullWidth:{true:'_dlenfc3-3-2-1',false:'_dlenfc4-3-2-1'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfcg-3-2-1';"],
+  "sourcesContent": ["import './Select.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearReactSelectZIndex = '_dlenfc5-3-3-0';\nexport var filter = '_dlenfc1-3-3-0';\nexport var placeholderColor = '_dlenfch-3-3-0';\nexport var select = '_dlenfc0-3-3-0';\nexport var selectAll = '_dlenfcn-3-3-0';\nexport var selectGroupHeading = '_dlenfcb-3-3-0';\nexport var selectMenuDivider = '_dlenfci-3-3-0';\nexport var selectMenuListWrapper = '_dlenfcd-3-3-0';\nexport var selectMenuOverlay = _7a468({defaultClassName:'_dlenfcj-3-3-0',variantClassNames:{isTriggerWidth:{true:'_dlenfck-3-3-0'}},defaultVariants:{isTriggerWidth:false},compoundVariants:[]});\nexport var selectMultiValue = '_dlenfcl-3-3-0';\nexport var selectNoOptionsMessage = '_dlenfce-3-3-0';\nexport var selectOptionMulti = '_dlenfco-3-3-0';\nexport var selectOptionMultiIndicator = _7a468({defaultClassName:'_dlenfcp-3-3-0',variantClassNames:{selected:{true:'_dlenfcq-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var selectOptionMultiIndicatorIcon = '_dlenfcr-3-3-0';\nexport var selectOptionPrefix = '_dlenfcs-3-3-0';\nexport var selectOptionSingle = '_dlenfcm-3-3-0';\nexport var selectOptionSuffix = '_dlenfct-3-3-0';\nexport var selectTrigger = _7a468({defaultClassName:'_dlenfc8-3-3-0',variantClassNames:{fullWidth:{true:'_dlenfc9-3-3-0'},readOnly:{true:'_dlenfca-3-3-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var selectTriggerIconWrapper = _7a468({defaultClassName:'_dlenfc6-3-3-0',variantClassNames:{isOverlayOpen:{true:'_dlenfc7-3-3-0'}},defaultVariants:{isOverlayOpen:false},compoundVariants:[]});\nexport var selectValueContainerTruncationBox = '_dlenfcf-3-3-0';\nexport var selectVirtualizationWrapper = '_dlenfcc-3-3-0';\nexport var selectWrapper = _7a468({defaultClassName:'_dlenfc2-3-3-0',variantClassNames:{fullWidth:{true:'_dlenfc3-3-3-0',false:'_dlenfc4-3-3-0'}},defaultVariants:{fullWidth:false},compoundVariants:[]});\nexport var validAndEnabled = '_dlenfcg-3-3-0';"],
   "mappings": "AAAA,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,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,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3M,IAAI,2BAA2B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,eAAc,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7L,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-2-1 {
+._r47o0w1-3-3-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-2-1:empty::before {
+._r47o0w1-3-3-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-2-1:focus:empty {
+._r47o0w1-3-3-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-2-1 {
+._r47o0w2-3-3-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-2-1:focus:empty {
+._r47o0w2-3-3-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-2-1 {
+._r47o0w3-3-3-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-2-1:empty::before {
+._r47o0w3-3-3-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-2-1 {
+._r47o0w4-3-3-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-2-1", variantClassNames: { error: { true: "_r47o0w2-3-2-1" }, disabled: { true: "_r47o0w3-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-2-1"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-2-1";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-3-0", variantClassNames: { error: { true: "_r47o0w2-3-3-0" }, disabled: { true: "_r47o0w3-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-3-0"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-3-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-2-1',variantClassNames:{error:{true:'_r47o0w2-3-2-1'},disabled:{true:'_r47o0w3-3-2-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-2-1']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-2-1';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-3-0',variantClassNames:{error:{true:'_r47o0w2-3-3-0'},disabled:{true:'_r47o0w3-3-3-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-3-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-3-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": []
 }

package/esm/forms/spin-buttons/number-spin-button/hooks/useBeforeInputHandler.js

@@ -110,6 +110,7 @@ const useBeforeInputHandler = (ref, props, applyText, text) => {
       }
       const selection = getSelection();
       if (!selection) {
+        event.preventDefault();
         return;
       }
       const domText = ref?.current?.textContent ?? "";

package/esm/forms/spin-buttons/number-spin-button/hooks/useBeforeInputHandler.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/number-spin-button/hooks/useBeforeInputHandler.ts"],
-  "sourcesContent": ["import { useCallback, type RefObject } from 'react';\n\nimport { useValidationAndFormatting } from './useValidationAndFormatting.js';\nimport { useSelection } from '../../hooks/useSelection.js';\nimport type { SpinButtonTextSelection } from '../../types.js';\nimport type { NumberSpinButtonProps } from '../types.js';\n\nconst reNumber = new RegExp('^-?\\\\d*$');\nconst reNonNegativeNumber = new RegExp('^\\\\d*$');\n\n/**\n * Returns the number of digits for a given value.\n * If the number is negative, add an additional character for the sign\n */\nfunction getNrOfDigits(value: number) {\n  return value < 0\n    ? 2 + Math.floor(Math.log10(Math.abs(value)))\n    : 1 + Math.floor(Math.log10(value));\n}\n\n/**\n * Processes the given value for provided input type and selection.\n */\nfunction processInputEvent(\n  value: string,\n  inputType: string,\n  selection: SpinButtonTextSelection,\n  subsitute: string,\n) {\n  const collapsed = selection.start === selection.end;\n  switch (inputType) {\n    case 'insertText':\n    case 'insertFromPaste':\n      return (\n        value.substring(0, selection.start) +\n        subsitute +\n        value.substring(selection.end)\n      );\n    case 'deleteByCut':\n      return (\n        value.substring(0, selection.start) + value.substring(selection.end)\n      );\n    case 'deleteContentBackward':\n      return collapsed\n        ? value.substring(0, selection.start - 1) +\n            value.substring(selection.end)\n        : value.substring(0, selection.start) + value.substring(selection.end);\n    case 'deleteContentForward':\n      return collapsed\n        ? value.substring(0, selection.start) +\n            value.substring(selection.end + 1)\n        : value.substring(0, selection.start) + value.substring(selection.end);\n    case 'insertCompositionText':\n      return value;\n    case 'deleteByDrag':\n    case 'insertFromDrop':\n    default:\n      // Ignore drag&drop and other unknown input types for now.\n      return undefined;\n  }\n}\n\n/**\n * Calculates a candidate value based on the source text, the current selection and the input type.\n */\nfunction getCandidate(\n  text: string,\n  domText: string,\n  selection: SpinButtonTextSelection,\n  inputType: string,\n  substitute: string,\n  formatLength: number,\n) {\n  // If padding is enabled, calculate the nr. of padding slots.\n  const candidateOffset =\n    formatLength > 0 ? Math.max(formatLength - text.length, 0) : 0;\n\n  // Trying to forwardDelete a padding character should not change anything.\n  if (\n    selection.start < candidateOffset &&\n    inputType === 'deleteContentForward'\n  ) {\n    return undefined;\n  }\n\n  // Use domtext instead of text as candidate input, if content edit happens within the padding area\n  const useDomText =\n    selection.start < candidateOffset &&\n    (inputType === 'insertText' || inputType === 'insertFromPaste');\n\n  // If the domtext is used, only take the part right of the cursor as value.\n  // This makes modifying the text within the padding area feel more natural.\n  const value = useDomText ? domText.substring(selection.end) : text;\n\n  // Offset the selection position.\n  const candidateSelection: SpinButtonTextSelection = {\n    start: Math.max(selection.start - candidateOffset, 0),\n    end: Math.max(selection.end - candidateOffset, 0),\n  };\n\n  // Process the input event and get the actual candidate.\n  return processInputEvent(value, inputType, candidateSelection, substitute);\n}\n\n/**\n * Calculates a new cursor position for a given input event, selection and padding.\n */\nfunction getNewSelection(\n  selection: SpinButtonTextSelection,\n  candidate: string,\n  substitute: string,\n  inputType: string,\n  formatLength: number,\n) {\n  // Right align mode is only active, if padding is enabled and if the candidate still fits within the padded length.\n  const rightAlign = formatLength > 0 && candidate.length <= formatLength;\n  const collapsed = selection.start === selection.end;\n\n  let curserPos = 0;\n  switch (inputType) {\n    case 'insertText':\n    case 'insertFromPaste':\n      // For right aligned mode, keep the cursor position at the end of the selection.\n      // For left aligned mode, set the cursor to the end of the inserted text.\n      curserPos = rightAlign\n        ? selection.end\n        : selection.start + substitute.length;\n      break;\n    case 'deleteContentBackward':\n      // For right aligned mode, keep the cursor postion at the end of the selection.\n      // For left aligned mode and if the selection is not collapsed, keep the cursor position. Otherwise move the cursor left.\n      curserPos = rightAlign\n        ? selection.end\n        : collapsed\n        ? selection.start - 1\n        : selection.start;\n      break;\n    case 'deleteContentForward':\n      // For right aligned mode, if the selection is not collapsed, keep the cursor position. Otherwise move the cursor right.\n      // For left aligned mode, keep the cursor postion at the start of the selection.\n      curserPos = rightAlign\n        ? collapsed\n          ? selection.start + 1\n          : selection.end\n        : selection.start;\n      break;\n    case 'deleteByCut':\n      // Based on the writing mode, keep the cursor at either the left or right bound of the current seletion\n      curserPos = rightAlign ? selection.end : selection.start;\n  }\n\n  return {\n    start: curserPos,\n    end: curserPos,\n  } as SpinButtonTextSelection;\n}\n\n/**\n * Hook to provide input validation using the native onBeforeInput method.\n */\nexport const useBeforeInputHandler = (\n  ref: RefObject<HTMLElement | null> | undefined,\n  props: NumberSpinButtonProps,\n  applyText: (value: string, fireOnChange?: boolean) => void,\n  text: string,\n) => {\n  const {\n    onBeforeInput,\n    displayFormat: { length: formatLength = 0 } = {},\n    readOnly,\n    disabled,\n    onChange,\n    minValue = Number.MIN_SAFE_INTEGER,\n    maxValue = Number.MAX_SAFE_INTEGER,\n  } = props;\n\n  const { getSelection, setSelection } = useSelection(ref);\n  const { parse, format } = useValidationAndFormatting(\n    props.displayFormat,\n    props.required,\n    minValue,\n    maxValue,\n  );\n\n  /** This callback validates generic number min/max and length constraints. */\n  const defaultOnBeforeInput = useCallback(\n    (candidate: string, event: InputEvent) => {\n      // Reject candidate if it's not a valid integer.\n      // Only allow leading -, if negative values are allowed.\n      const isInteger =\n        minValue < 0\n          ? reNumber.test(candidate)\n          : reNonNegativeNumber.test(candidate);\n\n      if (!isInteger) {\n        event.preventDefault();\n        return;\n      }\n\n      const value = parse(candidate);\n      if (value === null) {\n        //  nothing else to check\n        return;\n      }\n\n      // Calculate max nr. of digits for a given min or max value.\n      const maxLength =\n        value < 0 ? getNrOfDigits(minValue) : getNrOfDigits(maxValue);\n\n      // Ignore candidates longer than this limit.\n      if (candidate.length > maxLength) {\n        event.preventDefault();\n        return;\n      }\n\n      // Don't allow to enter a value > maxValue for a positive value,\n      // and vice versa for negative ones.\n      if (value < 0 ? value < minValue : value > maxValue) {\n        event.preventDefault();\n        return;\n      }\n    },\n    [maxValue, minValue, parse],\n  );\n\n  /**\n   * This callback validates the input against optional external and internal constraints and initializes the expected selection.\n   */\n  const beforeInputHandler = useCallback(\n    (event: InputEvent) => {\n      if (disabled || readOnly) {\n        event.preventDefault();\n        return;\n      }\n      const selection = getSelection();\n\n      // Nothing to change if selection/cursor is not within the current spinbutton.\n      if (!selection) {\n        return;\n      }\n\n      const domText = ref?.current?.textContent ?? '';\n\n      // If data is comming from the clipboard, strip formatting and use plain text version as substitute.\n      const substitute =\n        event.data ?? event.dataTransfer?.getData('text/plain') ?? '';\n\n      // Calculate a candidate for given input event and configuration.\n      const candidate = getCandidate(\n        text,\n        domText,\n        selection,\n        event.inputType,\n        substitute,\n        formatLength,\n      );\n\n      // If no candidate could be created, ignore the event.\n      if (candidate === undefined) {\n        event.preventDefault();\n        return;\n      }\n\n      // Validate against an optional external candidate validation.\n      // Break early if validation fails.\n      onBeforeInput?.(candidate, event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      // Validate using the internal constraints.\n      // Break early if validation fails.\n      defaultOnBeforeInput(candidate, event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      // Calculate the new cursor position.\n      const newSelection =\n        domText === '' || domText === '-'\n          ? { start: 0, end: 0, rtl: true } // Use last possible cursor position. (Necessary if padding is enabled)\n          : getNewSelection(\n              selection,\n              candidate,\n              substitute,\n              event.inputType,\n              formatLength,\n            );\n\n      // Set the internal state and dom text, then update the cursor position.\n      applyText(candidate);\n      setSelection(newSelection);\n\n      // Workaround to prevent/revert dead key inputs\n      if (event.inputType === 'insertCompositionText') {\n        setTimeout(() => {\n          if (ref?.current) {\n            // Update original text content and selection\n            ref.current.textContent = format(text);\n            setTimeout(() => setSelection(selection), 0);\n          }\n        }, 0);\n      }\n\n      // Invoke onChange callback if available\n      const newValue = parse(candidate);\n      props.value !== newValue && onChange?.(newValue);\n      event.preventDefault();\n    },\n    [\n      disabled,\n      readOnly,\n      getSelection,\n      ref,\n      text,\n      formatLength,\n      onBeforeInput,\n      defaultOnBeforeInput,\n      applyText,\n      setSelection,\n      parse,\n      props.value,\n      onChange,\n      format,\n    ],\n  );\n\n  return beforeInputHandler;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useCallback, type RefObject } from 'react';\n\nimport { useValidationAndFormatting } from './useValidationAndFormatting.js';\nimport { useSelection } from '../../hooks/useSelection.js';\nimport type { SpinButtonTextSelection } from '../../types.js';\nimport type { NumberSpinButtonProps } from '../types.js';\n\nconst reNumber = new RegExp('^-?\\\\d*$');\nconst reNonNegativeNumber = new RegExp('^\\\\d*$');\n\n/**\n * Returns the number of digits for a given value.\n * If the number is negative, add an additional character for the sign\n */\nfunction getNrOfDigits(value: number) {\n  return value < 0\n    ? 2 + Math.floor(Math.log10(Math.abs(value)))\n    : 1 + Math.floor(Math.log10(value));\n}\n\n/**\n * Processes the given value for provided input type and selection.\n */\nfunction processInputEvent(\n  value: string,\n  inputType: string,\n  selection: SpinButtonTextSelection,\n  subsitute: string,\n) {\n  const collapsed = selection.start === selection.end;\n  switch (inputType) {\n    case 'insertText':\n    case 'insertFromPaste':\n      return (\n        value.substring(0, selection.start) +\n        subsitute +\n        value.substring(selection.end)\n      );\n    case 'deleteByCut':\n      return (\n        value.substring(0, selection.start) + value.substring(selection.end)\n      );\n    case 'deleteContentBackward':\n      return collapsed\n        ? value.substring(0, selection.start - 1) +\n            value.substring(selection.end)\n        : value.substring(0, selection.start) + value.substring(selection.end);\n    case 'deleteContentForward':\n      return collapsed\n        ? value.substring(0, selection.start) +\n            value.substring(selection.end + 1)\n        : value.substring(0, selection.start) + value.substring(selection.end);\n    case 'insertCompositionText':\n      return value;\n    case 'deleteByDrag':\n    case 'insertFromDrop':\n    default:\n      // Ignore drag&drop and other unknown input types for now.\n      return undefined;\n  }\n}\n\n/**\n * Calculates a candidate value based on the source text, the current selection and the input type.\n */\nfunction getCandidate(\n  text: string,\n  domText: string,\n  selection: SpinButtonTextSelection,\n  inputType: string,\n  substitute: string,\n  formatLength: number,\n) {\n  // If padding is enabled, calculate the nr. of padding slots.\n  const candidateOffset =\n    formatLength > 0 ? Math.max(formatLength - text.length, 0) : 0;\n\n  // Trying to forwardDelete a padding character should not change anything.\n  if (\n    selection.start < candidateOffset &&\n    inputType === 'deleteContentForward'\n  ) {\n    return undefined;\n  }\n\n  // Use domtext instead of text as candidate input, if content edit happens within the padding area\n  const useDomText =\n    selection.start < candidateOffset &&\n    (inputType === 'insertText' || inputType === 'insertFromPaste');\n\n  // If the domtext is used, only take the part right of the cursor as value.\n  // This makes modifying the text within the padding area feel more natural.\n  const value = useDomText ? domText.substring(selection.end) : text;\n\n  // Offset the selection position.\n  const candidateSelection: SpinButtonTextSelection = {\n    start: Math.max(selection.start - candidateOffset, 0),\n    end: Math.max(selection.end - candidateOffset, 0),\n  };\n\n  // Process the input event and get the actual candidate.\n  return processInputEvent(value, inputType, candidateSelection, substitute);\n}\n\n/**\n * Calculates a new cursor position for a given input event, selection and padding.\n */\nfunction getNewSelection(\n  selection: SpinButtonTextSelection,\n  candidate: string,\n  substitute: string,\n  inputType: string,\n  formatLength: number,\n) {\n  // Right align mode is only active, if padding is enabled and if the candidate still fits within the padded length.\n  const rightAlign = formatLength > 0 && candidate.length <= formatLength;\n  const collapsed = selection.start === selection.end;\n\n  let curserPos = 0;\n  switch (inputType) {\n    case 'insertText':\n    case 'insertFromPaste':\n      // For right aligned mode, keep the cursor position at the end of the selection.\n      // For left aligned mode, set the cursor to the end of the inserted text.\n      curserPos = rightAlign\n        ? selection.end\n        : selection.start + substitute.length;\n      break;\n    case 'deleteContentBackward':\n      // For right aligned mode, keep the cursor postion at the end of the selection.\n      // For left aligned mode and if the selection is not collapsed, keep the cursor position. Otherwise move the cursor left.\n      curserPos = rightAlign\n        ? selection.end\n        : collapsed\n        ? selection.start - 1\n        : selection.start;\n      break;\n    case 'deleteContentForward':\n      // For right aligned mode, if the selection is not collapsed, keep the cursor position. Otherwise move the cursor right.\n      // For left aligned mode, keep the cursor postion at the start of the selection.\n      curserPos = rightAlign\n        ? collapsed\n          ? selection.start + 1\n          : selection.end\n        : selection.start;\n      break;\n    case 'deleteByCut':\n      // Based on the writing mode, keep the cursor at either the left or right bound of the current seletion\n      curserPos = rightAlign ? selection.end : selection.start;\n  }\n\n  return {\n    start: curserPos,\n    end: curserPos,\n  } as SpinButtonTextSelection;\n}\n\n/**\n * Hook to provide input validation using the native onBeforeInput method.\n */\nexport const useBeforeInputHandler = (\n  ref: RefObject<HTMLElement | null> | undefined,\n  props: NumberSpinButtonProps,\n  applyText: (value: string, fireOnChange?: boolean) => void,\n  text: string,\n) => {\n  const {\n    onBeforeInput,\n    displayFormat: { length: formatLength = 0 } = {},\n    readOnly,\n    disabled,\n    onChange,\n    minValue = Number.MIN_SAFE_INTEGER,\n    maxValue = Number.MAX_SAFE_INTEGER,\n  } = props;\n\n  const { getSelection, setSelection } = useSelection(ref);\n  const { parse, format } = useValidationAndFormatting(\n    props.displayFormat,\n    props.required,\n    minValue,\n    maxValue,\n  );\n\n  /** This callback validates generic number min/max and length constraints. */\n  const defaultOnBeforeInput = useCallback(\n    (candidate: string, event: InputEvent) => {\n      // Reject candidate if it's not a valid integer.\n      // Only allow leading -, if negative values are allowed.\n      const isInteger =\n        minValue < 0\n          ? reNumber.test(candidate)\n          : reNonNegativeNumber.test(candidate);\n\n      if (!isInteger) {\n        event.preventDefault();\n        return;\n      }\n\n      const value = parse(candidate);\n      if (value === null) {\n        //  nothing else to check\n        return;\n      }\n\n      // Calculate max nr. of digits for a given min or max value.\n      const maxLength =\n        value < 0 ? getNrOfDigits(minValue) : getNrOfDigits(maxValue);\n\n      // Ignore candidates longer than this limit.\n      if (candidate.length > maxLength) {\n        event.preventDefault();\n        return;\n      }\n\n      // Don't allow to enter a value > maxValue for a positive value,\n      // and vice versa for negative ones.\n      if (value < 0 ? value < minValue : value > maxValue) {\n        event.preventDefault();\n        return;\n      }\n    },\n    [maxValue, minValue, parse],\n  );\n\n  /**\n   * This callback validates the input against optional external and internal constraints and initializes the expected selection.\n   */\n  const beforeInputHandler = useCallback(\n    (event: InputEvent) => {\n      if (disabled || readOnly) {\n        event.preventDefault();\n        return;\n      }\n      const selection = getSelection();\n\n      // Nothing to change if selection/cursor is not within the current spinbutton.\n      if (!selection) {\n        event.preventDefault();\n        return;\n      }\n\n      const domText = ref?.current?.textContent ?? '';\n\n      // If data is comming from the clipboard, strip formatting and use plain text version as substitute.\n      const substitute =\n        event.data ?? event.dataTransfer?.getData('text/plain') ?? '';\n\n      // Calculate a candidate for given input event and configuration.\n      const candidate = getCandidate(\n        text,\n        domText,\n        selection,\n        event.inputType,\n        substitute,\n        formatLength,\n      );\n\n      // If no candidate could be created, ignore the event.\n      if (candidate === undefined) {\n        event.preventDefault();\n        return;\n      }\n\n      // Validate against an optional external candidate validation.\n      // Break early if validation fails.\n      onBeforeInput?.(candidate, event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      // Validate using the internal constraints.\n      // Break early if validation fails.\n      defaultOnBeforeInput(candidate, event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      // Calculate the new cursor position.\n      const newSelection =\n        domText === '' || domText === '-'\n          ? { start: 0, end: 0, rtl: true } // Use last possible cursor position. (Necessary if padding is enabled)\n          : getNewSelection(\n              selection,\n              candidate,\n              substitute,\n              event.inputType,\n              formatLength,\n            );\n\n      // Set the internal state and dom text, then update the cursor position.\n      applyText(candidate);\n      setSelection(newSelection);\n\n      // Workaround to prevent/revert dead key inputs\n      if (event.inputType === 'insertCompositionText') {\n        setTimeout(() => {\n          if (ref?.current) {\n            // Update original text content and selection\n            ref.current.textContent = format(text);\n            setTimeout(() => setSelection(selection), 0);\n          }\n        }, 0);\n      }\n\n      // Invoke onChange callback if available\n      const newValue = parse(candidate);\n      props.value !== newValue && onChange?.(newValue);\n      event.preventDefault();\n    },\n    [\n      disabled,\n      readOnly,\n      getSelection,\n      ref,\n      text,\n      formatLength,\n      onBeforeInput,\n      defaultOnBeforeInput,\n      applyText,\n      setSelection,\n      parse,\n      props.value,\n      onChange,\n      format,\n    ],\n  );\n\n  return beforeInputHandler;\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmC;AAE5C,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAI7B,MAAM,WAAW,IAAI,OAAO,UAAU;AACtC,MAAM,sBAAsB,IAAI,OAAO,QAAQ;AAM/C,SAAS,cAAc,OAAe;AACpC,SAAO,QAAQ,IACX,IAAI,KAAK,MAAM,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,CAAC,IAC1C,IAAI,KAAK,MAAM,KAAK,MAAM,KAAK,CAAC;AACtC;AAKA,SAAS,kBACP,OACA,WACA,WACA,WACA;AACA,QAAM,YAAY,UAAU,UAAU,UAAU;AAChD,UAAQ,WAAW;AAAA,IACjB,KAAK;AAAA,IACL,KAAK;AACH,aACE,MAAM,UAAU,GAAG,UAAU,KAAK,IAClC,YACA,MAAM,UAAU,UAAU,GAAG;AAAA,IAEjC,KAAK;AACH,aACE,MAAM,UAAU,GAAG,UAAU,KAAK,IAAI,MAAM,UAAU,UAAU,GAAG;AAAA,IAEvE,KAAK;AACH,aAAO,YACH,MAAM,UAAU,GAAG,UAAU,QAAQ,CAAC,IACpC,MAAM,UAAU,UAAU,GAAG,IAC/B,MAAM,UAAU,GAAG,UAAU,KAAK,IAAI,MAAM,UAAU,UAAU,GAAG;AAAA,IACzE,KAAK;AACH,aAAO,YACH,MAAM,UAAU,GAAG,UAAU,KAAK,IAChC,MAAM,UAAU,UAAU,MAAM,CAAC,IACnC,MAAM,UAAU,GAAG,UAAU,KAAK,IAAI,MAAM,UAAU,UAAU,GAAG;AAAA,IACzE,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAEE,aAAO;AAAA,EACX;AACF;AAKA,SAAS,aACP,MACA,SACA,WACA,WACA,YACA,cACA;AAEA,QAAM,kBACJ,eAAe,IAAI,KAAK,IAAI,eAAe,KAAK,QAAQ,CAAC,IAAI;AAG/D,MACE,UAAU,QAAQ,mBAClB,cAAc,wBACd;AACA,WAAO;AAAA,EACT;AAGA,QAAM,aACJ,UAAU,QAAQ,oBACjB,cAAc,gBAAgB,cAAc;AAI/C,QAAM,QAAQ,aAAa,QAAQ,UAAU,UAAU,GAAG,IAAI;AAG9D,QAAM,qBAA8C;AAAA,IAClD,OAAO,KAAK,IAAI,UAAU,QAAQ,iBAAiB,CAAC;AAAA,IACpD,KAAK,KAAK,IAAI,UAAU,MAAM,iBAAiB,CAAC;AAAA,EAClD;AAGA,SAAO,kBAAkB,OAAO,WAAW,oBAAoB,UAAU;AAC3E;AAKA,SAAS,gBACP,WACA,WACA,YACA,WACA,cACA;AAEA,QAAM,aAAa,eAAe,KAAK,UAAU,UAAU;AAC3D,QAAM,YAAY,UAAU,UAAU,UAAU;AAEhD,MAAI,YAAY;AAChB,UAAQ,WAAW;AAAA,IACjB,KAAK;AAAA,IACL,KAAK;AAGH,kBAAY,aACR,UAAU,MACV,UAAU,QAAQ,WAAW;AACjC;AAAA,IACF,KAAK;AAGH,kBAAY,aACR,UAAU,MACV,YACA,UAAU,QAAQ,IAClB,UAAU;AACd;AAAA,IACF,KAAK;AAGH,kBAAY,aACR,YACE,UAAU,QAAQ,IAClB,UAAU,MACZ,UAAU;AACd;AAAA,IACF,KAAK;AAEH,kBAAY,aAAa,UAAU,MAAM,UAAU;AAAA,EACvD;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,KAAK;AAAA,EACP;AACF;AAKO,MAAM,wBAAwB,CACnC,KACA,OACA,WACA,SACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA,eAAe,EAAE,QAAQ,eAAe,EAAE,IAAI,CAAC;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,OAAO;AAAA,IAClB,WAAW,OAAO;AAAA,EACpB,IAAI;AAEJ,QAAM,EAAE,cAAc,aAAa,IAAI,aAAa,GAAG;AACvD,QAAM,EAAE,OAAO,OAAO,IAAI;AAAA,IACxB,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF;AAGA,QAAM,uBAAuB;AAAA,IAC3B,CAAC,WAAmB,UAAsB;AAGxC,YAAM,YACJ,WAAW,IACP,SAAS,KAAK,SAAS,IACvB,oBAAoB,KAAK,SAAS;AAExC,UAAI,CAAC,WAAW;AACd,cAAM,eAAe;AACrB;AAAA,MACF;AAEA,YAAM,QAAQ,MAAM,SAAS;AAC7B,UAAI,UAAU,MAAM;AAElB;AAAA,MACF;AAGA,YAAM,YACJ,QAAQ,IAAI,cAAc,QAAQ,IAAI,cAAc,QAAQ;AAG9D,UAAI,UAAU,SAAS,WAAW;AAChC,cAAM,eAAe;AACrB;AAAA,MACF;AAIA,UAAI,QAAQ,IAAI,QAAQ,WAAW,QAAQ,UAAU;AACnD,cAAM,eAAe;AACrB;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAKA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,YAAY,UAAU;AACxB,cAAM,eAAe;AACrB;AAAA,MACF;AACA,YAAM,YAAY,aAAa;AAG/B,UAAI,CAAC,WAAW;AACd,cAAM,eAAe;AACrB;AAAA,MACF;AAEA,YAAM,UAAU,KAAK,SAAS,eAAe;AAG7C,YAAM,aACJ,MAAM,QAAQ,MAAM,cAAc,QAAQ,YAAY,KAAK;AAG7D,YAAM,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAGA,UAAI,cAAc,QAAW;AAC3B,cAAM,eAAe;AACrB;AAAA,MACF;AAIA,sBAAgB,WAAW,KAAK;AAChC,UAAI,MAAM,kBAAkB;AAC1B;AAAA,MACF;AAIA,2BAAqB,WAAW,KAAK;AACrC,UAAI,MAAM,kBAAkB;AAC1B;AAAA,MACF;AAGA,YAAM,eACJ,YAAY,MAAM,YAAY,MAC1B,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,KAAK,IAC9B;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN;AAAA,MACF;AAGN,gBAAU,SAAS;AACnB,mBAAa,YAAY;AAGzB,UAAI,MAAM,cAAc,yBAAyB;AAC/C,mBAAW,MAAM;AACf,cAAI,KAAK,SAAS;AAEhB,gBAAI,QAAQ,cAAc,OAAO,IAAI;AACrC,uBAAW,MAAM,aAAa,SAAS,GAAG,CAAC;AAAA,UAC7C;AAAA,QACF,GAAG,CAAC;AAAA,MACN;AAGA,YAAM,WAAW,MAAM,SAAS;AAChC,YAAM,UAAU,YAAY,WAAW,QAAQ;AAC/C,YAAM,eAAe;AAAA,IACvB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/forms/spin-buttons/spin-button-group/SpinButtonGroup.js

@@ -9,6 +9,9 @@ import { TextSpinButton } from "../text-spin-button/TextSpinButton.js";
 const InternalSpinButtonGroup = ({
   children,
   valueOverflow = false,
+  onLeadingEdge,
+  onTrailingEdge,
+  onTrailingOverflow,
   className: consumerClassName,
   style: consumerStyle,
   "data-testid": dataTestId,
@@ -17,11 +20,16 @@ const InternalSpinButtonGroup = ({
 }) => {
   const { clonedChildren, spinButtonRefs, triggerRefs } = useValueOverflow(
     children,
-    valueOverflow
+    valueOverflow,
+    onTrailingOverflow,
+    onTrailingEdge
   );
   const { onKeyDownHandler } = useNavigateSpinButton(
     spinButtonRefs,
-    triggerRefs
+    triggerRefs,
+    onLeadingEdge,
+    onTrailingEdge,
+    onTrailingOverflow
   );
   return /* @__PURE__ */ jsx(
     "span",

package/esm/forms/spin-buttons/spin-button-group/SpinButtonGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/spin-button-group/SpinButtonGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren } from 'react';\n\nimport { useNavigateSpinButton } from './hooks/useNavigateSpinButton.js';\nimport { useValueOverflow } from './hooks/useValueOverflow.js';\nimport { SpinButtonGroupSeparator } from './SpinButtonGroupSeparator.js';\nimport type { SpinButtonGroupProps } from './types.js';\nimport { NumberSpinButton } from '../number-spin-button/NumberSpinButton.js';\nimport { spinButtonGroupCSS } from '../SpinButton.sty.js';\nimport { TextSpinButton } from '../text-spin-button/TextSpinButton.js';\n\nconst InternalSpinButtonGroup = ({\n  children,\n  valueOverflow = false,\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  'data-dtrum-mask': dataDtrumMask,\n  'data-dtrum-allow': dataDtrumAllow,\n}: PropsWithChildren<SpinButtonGroupProps>) => {\n  const { clonedChildren, spinButtonRefs, triggerRefs } = useValueOverflow(\n    children,\n    valueOverflow,\n  );\n\n  const { onKeyDownHandler } = useNavigateSpinButton(\n    spinButtonRefs,\n    triggerRefs,\n  );\n\n  return (\n    <span\n      className={clsx(spinButtonGroupCSS, consumerClassName)}\n      data-valuetype=\"iso8601\"\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      onKeyDown={onKeyDownHandler}\n    >\n      {clonedChildren}\n    </span>\n  );\n};\n\n/**\n * Use the _SpinButtonGroup to combine text and number spinbuttons and provide ootb navigation between them.\n * @internal\n */\nexport const SpinButtonGroup = Object.assign(InternalSpinButtonGroup, {\n  Number: NumberSpinButton,\n  Text: TextSpinButton,\n  Separator: SpinButtonGroupSeparator,\n});\n\n(\n  SpinButtonGroup as typeof SpinButtonGroup & { displayName: string }\n).displayName = '_SpinButtonGroup';\n"],
-  "mappings": "AA+BI;AA/BJ,OAAO,UAAU;AAGjB,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAEzC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAE/B,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AACtB,MAA+C;AAC7C,QAAM,EAAE,gBAAgB,gBAAgB,YAAY,IAAI;AAAA,IACtD;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,iBAAiB,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,oBAAoB,iBAAiB;AAAA,MACrD,kBAAe;AAAA,MACf,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,yBAAyB;AAAA,EACpE,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAGC,gBACA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren } from 'react';\n\nimport { useNavigateSpinButton } from './hooks/useNavigateSpinButton.js';\nimport { useValueOverflow } from './hooks/useValueOverflow.js';\nimport { SpinButtonGroupSeparator } from './SpinButtonGroupSeparator.js';\nimport type { SpinButtonGroupProps } from './types.js';\nimport { NumberSpinButton } from '../number-spin-button/NumberSpinButton.js';\nimport { spinButtonGroupCSS } from '../SpinButton.sty.js';\nimport { TextSpinButton } from '../text-spin-button/TextSpinButton.js';\n\nconst InternalSpinButtonGroup = ({\n  children,\n  valueOverflow = false,\n  onLeadingEdge,\n  onTrailingEdge,\n  onTrailingOverflow,\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  'data-dtrum-mask': dataDtrumMask,\n  'data-dtrum-allow': dataDtrumAllow,\n}: PropsWithChildren<SpinButtonGroupProps>) => {\n  const { clonedChildren, spinButtonRefs, triggerRefs } = useValueOverflow(\n    children,\n    valueOverflow,\n    onTrailingOverflow,\n    onTrailingEdge,\n  );\n\n  const { onKeyDownHandler } = useNavigateSpinButton(\n    spinButtonRefs,\n    triggerRefs,\n    onLeadingEdge,\n    onTrailingEdge,\n    onTrailingOverflow,\n  );\n\n  return (\n    <span\n      className={clsx(spinButtonGroupCSS, consumerClassName)}\n      data-valuetype=\"iso8601\"\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      onKeyDown={onKeyDownHandler}\n    >\n      {clonedChildren}\n    </span>\n  );\n};\n\n/**\n * Use the _SpinButtonGroup to combine text and number spinbuttons and provide ootb navigation between them.\n * @internal\n */\nexport const SpinButtonGroup = Object.assign(InternalSpinButtonGroup, {\n  Number: NumberSpinButton,\n  Text: TextSpinButton,\n  Separator: SpinButtonGroupSeparator,\n});\n\n(\n  SpinButtonGroup as typeof SpinButtonGroup & { displayName: string }\n).displayName = '_SpinButtonGroup';\n"],
+  "mappings": "AAuCI;AAvCJ,OAAO,UAAU;AAGjB,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAEzC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAE/B,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,oBAAoB;AACtB,MAA+C;AAC7C,QAAM,EAAE,gBAAgB,gBAAgB,YAAY,IAAI;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,iBAAiB,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,oBAAoB,iBAAiB;AAAA,MACrD,kBAAe;AAAA,MACf,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;AAMO,MAAM,kBAAkB,OAAO,OAAO,yBAAyB;AAAA,EACpE,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAGC,gBACA,cAAc;",
   "names": []
 }