@vkontakte/vkui 7.8.2 → 7.9.1

package/dist/cssm/components/ChipsSelect/ChipsSelect.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useGlobalOnEventOutside } from "../../hooks/useGlobalOnClickOutside.js";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
 import { Keys } from "../../lib/accessibility.js";
 import { defaultFilterFn } from "../../lib/select.js";
 import { ChipsInputBase } from "../ChipsInputBase/ChipsInputBase.js";
@@ -38,10 +39,23 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
 /**
  * @see https://vkui.io/components/chips-select
  */ export const ChipsSelect = ({ // FormFieldProps
-id: labelledbyId, getRootRef, className, status = 'default', icon: dropdownIconProp, onChangeStart, // CustomSelectDropdownProps
+getRootRef, className, status = 'default', icon: dropdownIconProp, onChangeStart, // CustomSelectDropdownProps
 options: optionsProp, placement: placementProp = 'bottom', closeAfterSelect = true, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR, emptyText = DEFAULT_EMPTY_TEXT, creatable = false, fetching = false, dropdownAutoWidth, forceDropdownPortal, noMaxHeight = false, filterFn = defaultFilterFn, sortFn = false, dropdownTestId, onClose, onOpen, overscrollBehavior, renderDropdown, // ChipsInputProps
-getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInputValue, disabled, readOnly, getOptionValue = getOptionValueDefault, getOptionLabel = getOptionLabelDefault, getNewOptionData = getNewOptionDataDefault, renderChip = renderChipDefault, renderOption = renderOptionDefault, onChange, onFocus: onFocusProp, onInputChange: onInputChangeProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, dropdownOffsetDistance = 0, allowClearButton, clearButtonTestId, delimiter, // a11y
-chipsListLabel, ...restProps })=>{
+getRef, value: valueProp, defaultValue, inputValue: inputValueProp, defaultInputValue: defaultInputValueProp, getOptionValue = getOptionValueDefault, getOptionLabel = getOptionLabelDefault, getNewOptionData = getNewOptionDataDefault, renderChip = renderChipDefault, renderOption = renderOptionDefault, onChange, onInputChange: onInputChangeProp, dropdownOffsetDistance = 0, allowClearButton, clearButtonTestId, delimiter, // a11y
+chipsListLabel, // input native props
+disabled: disabledProp, readOnly: readOnlyProp, id: idProp, onFocus: onFocusProp, onBlur: onBlurProp, onKeyDown: onKeyDownProp, slotProps, ...restProps })=>{
+    const { getRootRef: getInputRef, value: resolvedInputValue, defaultValue: resolvedDefaultInputValue, onChange: resolvedOnInputChange, disabled, readOnly, id: labelledbyId, onFocus, onBlur, onKeyDown, ...inputRest } = useMergeProps({
+        getRootRef: getRef,
+        value: inputValueProp,
+        defaultValue: defaultInputValueProp,
+        onChange: onInputChangeProp,
+        disabled: disabledProp,
+        readOnly: readOnlyProp,
+        id: idProp,
+        onFocus: onFocusProp,
+        onBlur: onBlurProp,
+        onKeyDown: onKeyDownProp
+    }, slotProps?.input);
     const { // Связано с ChipsInputProps
     // option
     value, addOptionFromInput, addOption, removeOption, clearOptions, // input
@@ -55,9 +69,9 @@ chipsListLabel, ...restProps })=>{
         getOptionLabel,
         getNewOptionData,
         // input
-        inputValue: inputValueProp,
-        defaultInputValue,
-        onInputChange: onInputChangeProp,
+        inputValue: resolvedInputValue,
+        defaultInputValue: resolvedDefaultInputValue,
+        onInputChange: resolvedOnInputChange,
         // dropdown
         options: optionsProp,
         emptyText,
@@ -73,7 +87,7 @@ chipsListLabel, ...restProps })=>{
     });
     // Связано с ChipsInputProps
     const rootRef = useExternRef(getRootRef);
-    const inputRef = useExternRef(getRef, inputRefHook);
+    const inputRef = useExternRef(getInputRef, inputRefHook);
     // Связано с CustomSelectDropdownProps
     const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState(placementProp);
     const onDropdownPlacementChange = React.useCallback((placement)=>{
@@ -87,8 +101,8 @@ chipsListLabel, ...restProps })=>{
     const dropdownCurrentItemId = focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;
     const dropdownScrollBoxRef = React.useRef(null);
     const handleFocus = (event)=>{
-        if (onFocusProp) {
-            onFocusProp(event);
+        if (onFocus) {
+            onFocus(event);
         }
         if (!readOnly) {
             setOpened(true);
@@ -96,8 +110,8 @@ chipsListLabel, ...restProps })=>{
         }
     };
     const handleBlur = (event)=>{
-        if (onBlurProp) {
-            onBlurProp(event);
+        if (onBlur) {
+            onBlur(event);
         }
         // Не добавляем значение, если его нужно выбрать строго из списка
         if (!readOnly && !event.defaultPrevented && !creatable) {
@@ -146,8 +160,8 @@ chipsListLabel, ...restProps })=>{
         focusOptionByIndex(index, focusedOptionIndex);
     };
     const handleKeyDown = (event)=>{
-        if (onKeyDownProp) {
-            onKeyDownProp(event);
+        if (onKeyDown) {
+            onKeyDown(event);
         }
         if (event.defaultPrevented || readOnly) {
             return;
@@ -311,13 +325,9 @@ chipsListLabel, ...restProps })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(ChipsInputBase, {
-                ...restProps,
-                disabled: disabled,
-                readOnly: readOnly,
                 clearButtonShown: clearButtonShown,
                 clearButtonTestId: clearButtonTestId,
                 // FormFieldProps
-                id: labelledbyId,
                 getRootRef: rootRef,
                 className: classNames(styles.host, openedClassNames, className),
                 status: status,
@@ -332,20 +342,29 @@ chipsListLabel, ...restProps })=>{
                 onRemoveChipOption: removeOption,
                 renderChip: renderChip,
                 onClear: clearOptions,
-                // input
-                getRef: inputRef,
-                inputValue: inputValue,
-                onInputChange: onInputChange,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                onKeyDown: handleKeyDown,
                 // a11y
-                role: "combobox",
-                "aria-expanded": opened,
-                "aria-autocomplete": "list",
-                "aria-activedescendant": opened ? dropdownCurrentItemId : undefined,
-                "aria-haspopup": "listbox",
-                chipsListLabel: chipsListLabel
+                chipsListLabel: chipsListLabel,
+                slotProps: {
+                    ...slotProps,
+                    input: {
+                        'role': 'combobox',
+                        'aria-expanded': opened,
+                        'aria-autocomplete': 'list',
+                        'aria-activedescendant': opened ? dropdownCurrentItemId : undefined,
+                        'aria-haspopup': 'listbox',
+                        'getRootRef': inputRef,
+                        'value': inputValue,
+                        'onChange': onInputChange,
+                        disabled,
+                        readOnly,
+                        'id': labelledbyId,
+                        'onFocus': handleFocus,
+                        'onBlur': handleBlur,
+                        'onKeyDown': handleKeyDown,
+                        ...inputRest
+                    }
+                },
+                ...restProps
             }),
             opened && /*#__PURE__*/ _jsx(CustomSelectDropdown, {
                 "data-testid": dropdownTestId,

package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type MouseEventHandler } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnEventOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n  getNewOptionDataDefault,\n  getOptionLabelDefault,\n  getOptionValueDefault,\n  renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n  CustomSelectDropdown,\n  type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n  CustomSelectOption,\n  type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n  DEFAULT_EMPTY_TEXT,\n  DEFAULT_SELECTED_BEHAVIOR,\n  FOCUS_ACTION_NEXT,\n  FOCUS_ACTION_PREV,\n  isCreateNewOptionPreset,\n  isEmptyOptionPreset,\n  isNotServicePreset,\n  renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n  options: Array<OptionPreset<O>> = [],\n  startIndex = -1,\n) => {\n  if (startIndex >= options.length - 1) {\n    return -1;\n  }\n  return options.findIndex(\n    (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n  );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n  options: Array<OptionPreset<O>> = [],\n  endIndex: number = options.length,\n) => {\n  let result = -1;\n  if (endIndex <= 0) {\n    return result;\n  }\n  for (let i = endIndex - 1; i >= 0; i--) {\n    let option = options[i];\n\n    if (!isNotServicePreset(option) || !option.disabled) {\n      result = i;\n      break;\n    }\n  }\n  return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n  extends ChipsInputBaseProps<O>,\n    UseChipsSelectProps<O>,\n    Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n    Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n  /**\n   * Расположение выпадающего списка.\n   */\n  placement?: 'top' | 'bottom';\n  /**\n   * Отрисовка Spinner вместо списка опций в выпадающем списке.\n   */\n  fetching?: boolean;\n  /**\n   * Закрытие выпадающего списка после выбора элемента.\n   */\n  closeAfterSelect?: boolean;\n  /**\n   * Ширина раскрывающегося списка зависит от контента.\n   */\n  dropdownAutoWidth?: boolean;\n  /**\n   * Принудительно использовать портал.\n   */\n  forceDropdownPortal?: boolean;\n  /**\n   * Передает атрибут `data-testid` для дропдауна.\n   */\n  dropdownTestId?: string;\n  /**\n   * Иконка раскрывающегося списка.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n   */\n  addOnBlur?: boolean;\n  /**\n   * Отключает максимальную высоту по умолчанию.\n   */\n  noMaxHeight?: boolean;\n  /**\n   * Функция для отрисовки кастомной опции в выпадающем списке.\n   */\n  renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n  /**\n   * Рендер-проп для кастомного рендера содержимого дропдауна.\n   * В `defaultDropdownContent` содержится список опций.\n   */\n  renderDropdown?: ({\n    defaultDropdownContent,\n  }: {\n    defaultDropdownContent: React.ReactNode;\n  }) => React.ReactNode;\n  /**\n   * Событие срабатывающее перед `onChange`.\n   */\n  onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n  /**\n   * Отступ от выпадающего списка.\n   */\n  dropdownOffsetDistance?: number;\n\n  /**\n   * Если `true`, то справа будет отображаться кнопка для очистки значения.\n   */\n  allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/chips-select\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n  // FormFieldProps\n  id: labelledbyId,\n  getRootRef,\n  className,\n  status = 'default',\n  icon: dropdownIconProp,\n  onChangeStart,\n\n  // CustomSelectDropdownProps\n  options: optionsProp,\n  placement: placementProp = 'bottom',\n  closeAfterSelect = true,\n  selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n  emptyText = DEFAULT_EMPTY_TEXT,\n  creatable = false,\n  fetching = false,\n  dropdownAutoWidth,\n  forceDropdownPortal,\n  noMaxHeight = false,\n  filterFn = defaultFilterFn,\n  sortFn = false,\n  dropdownTestId,\n  onClose,\n  onOpen,\n  overscrollBehavior,\n  renderDropdown,\n\n  // ChipsInputProps\n  getRef,\n  value: valueProp,\n  defaultValue,\n  inputValue: inputValueProp,\n  defaultInputValue,\n  disabled,\n  readOnly,\n  getOptionValue = getOptionValueDefault,\n  getOptionLabel = getOptionLabelDefault,\n  getNewOptionData = getNewOptionDataDefault,\n  renderChip = renderChipDefault,\n  renderOption = renderOptionDefault,\n  onChange,\n  onFocus: onFocusProp,\n  onInputChange: onInputChangeProp,\n  onBlur: onBlurProp,\n  onKeyDown: onKeyDownProp,\n  dropdownOffsetDistance = 0,\n  allowClearButton,\n  clearButtonTestId,\n  delimiter,\n\n  // a11y\n  chipsListLabel,\n  ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n  const {\n    // Связано с ChipsInputProps\n    // option\n    value,\n    addOptionFromInput,\n    addOption,\n    removeOption,\n    clearOptions,\n    // input\n    inputRef: inputRefHook,\n    inputValue,\n    clearInput,\n    onInputChange,\n\n    // Связано с CustomSelectDropdownProps\n    options,\n    opened,\n    setOpened,\n    focusedOption,\n    focusedOptionIndex,\n    setFocusedOption,\n    setFocusedOptionIndex,\n  } = useChipsSelect({\n    // option\n    value: valueProp,\n    defaultValue,\n    onChange,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n\n    // input\n    inputValue: inputValueProp,\n    defaultInputValue,\n    onInputChange: onInputChangeProp,\n\n    // dropdown\n    options: optionsProp,\n    emptyText,\n    creatable,\n    filterFn,\n    sortFn,\n    selectedBehavior,\n    onClose,\n    onOpen,\n\n    // other\n    disabled,\n    delimiter,\n  });\n\n  // Связано с ChipsInputProps\n  const rootRef = useExternRef(getRootRef);\n  const inputRef = useExternRef(getRef, inputRefHook);\n\n  // Связано с CustomSelectDropdownProps\n  const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n    'top' | 'bottom'\n  >(placementProp);\n\n  const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n    if (placement.startsWith('top')) {\n      setDropdownVerticalPlacement('top');\n    } else if (placement.startsWith('bottom')) {\n      setDropdownVerticalPlacement('bottom');\n    }\n  }, []);\n\n  const dropdownId = React.useId();\n  const dropdownCurrentItemId =\n    focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n  const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n\n    if (!readOnly) {\n      setOpened(true);\n      setFocusedOptionIndex(null);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n\n    // Не добавляем значение, если его нужно выбрать строго из списка\n    if (!readOnly && !event.defaultPrevented && !creatable) {\n      event.preventDefault();\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = dropdownScrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    /* istanbul ignore next: нет представления как воспроизвести */\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n    if (index === oldIndex) {\n      /* istanbul ignore next: нет представления как воспроизвести */\n      return;\n    }\n\n    const option = options[index];\n\n    if (isNotServicePreset(option) && option.disabled) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = nextIndex === null ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      const nextIndex = findIndexAfter(options, index);\n      index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n    } else if (type === FOCUS_ACTION_PREV) {\n      const beforeIndex = findIndexBefore(options, index);\n      index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n    }\n\n    focusOptionByIndex(index, focusedOptionIndex);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (onKeyDownProp) {\n      onKeyDownProp(event);\n    }\n\n    if (event.defaultPrevented || readOnly) {\n      return;\n    }\n\n    switch (event.key) {\n      case Keys.ARROW_UP:\n      case Keys.ARROW_DOWN:\n        event.preventDefault();\n\n        if (!opened) {\n          setOpened(true);\n          focusOption(null, FOCUS_ACTION_NEXT);\n        } else {\n          focusOption(\n            focusedOptionIndex,\n            event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n          );\n        }\n        break;\n      case Keys.ENTER: {\n        if (!opened) {\n          break;\n        }\n        if (focusedOptionIndex != null) {\n          const foundOption = options[focusedOptionIndex];\n          if (foundOption && isNotServicePreset(foundOption)) {\n            event.preventDefault();\n\n            if (onChangeStart) {\n              onChangeStart(event, foundOption);\n            }\n\n            addOption(foundOption);\n            setFocusedOptionIndex(null);\n            clearInput();\n            if (closeAfterSelect) {\n              setOpened(false);\n            }\n\n            break;\n          }\n        }\n\n        if (!creatable) {\n          event.preventDefault();\n        }\n        break;\n      }\n      case Keys.ESCAPE:\n      case Keys.TAB:\n        if (opened) {\n          setOpened(false);\n        }\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex === null) {\n      setFocusedOption(null);\n    } else {\n      const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n      if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n        setFocusedOption(foundFocusedOptionIndex);\n      }\n    }\n  }, [options, focusedOptionIndex, setFocusedOption]);\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const handleClickOutside = React.useCallback(() => {\n    setOpened(false);\n  }, [setOpened]);\n\n  useGlobalOnEventOutside(\n    'mousedown', // см. https://github.com/VKCOM/VKUI/pull/8582\n    handleClickOutside,\n    opened ? rootRef : null,\n    opened ? dropdownScrollBoxRef : null,\n  );\n\n  const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      setOpened(!opened);\n    },\n    [opened, setOpened],\n  );\n\n  const dropdownContent = React.useMemo(() => {\n    const defaultDropdownContent = options.map((option, index) => {\n      const dropdownItemId = `${dropdownId}-${index}`;\n\n      if (isEmptyOptionPreset(option)) {\n        return (\n          <Footnote key=\"empty-text\" className={styles.empty}>\n            {option.placeholder}\n          </Footnote>\n        );\n      }\n      if (isCreateNewOptionPreset(option)) {\n        return (\n          <CustomSelectOption\n            key=\"create-new-option\"\n            id={dropdownItemId}\n            hovered={focusedOptionIndex === index}\n            onMouseDown={() => addOptionFromInput(inputValue)}\n            onMouseEnter={() => setFocusedOptionIndex(index)}\n          >\n            {option.actionText}\n          </CustomSelectOption>\n        );\n      }\n      return (\n        <React.Fragment key={`${typeof option.value}-${option.value}`}>\n          {renderOption(\n            {\n              id: dropdownItemId,\n              disabled: option.disabled,\n              hovered: focusedOption\n                ? getOptionValue(option) === getOptionValue(focusedOption)\n                : false,\n              children: option.label,\n              selected: !!value.find(\n                (selectedOption: Option) =>\n                  getOptionValue(selectedOption) === getOptionValue(option),\n              ),\n              getRootRef(node) {\n                if (node) {\n                  chipsSelectOptions[index] = node;\n                }\n              },\n              onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n                if (option.disabled) {\n                  return;\n                }\n                if (onChangeStart) {\n                  onChangeStart(event, option);\n                }\n\n                if (!event.defaultPrevented) {\n                  closeAfterSelect && setOpened(false);\n                  addOption(option);\n                  clearInput();\n                }\n              },\n              onMouseEnter() {\n                setFocusedOptionIndex(index);\n              },\n            },\n            option,\n          )}\n        </React.Fragment>\n      );\n    });\n\n    if (renderDropdown) {\n      return renderDropdown({\n        defaultDropdownContent,\n      });\n    }\n    return defaultDropdownContent;\n  }, [\n    addOption,\n    addOptionFromInput,\n    chipsSelectOptions,\n    clearInput,\n    closeAfterSelect,\n    dropdownId,\n    focusedOption,\n    focusedOptionIndex,\n    getOptionValue,\n    inputValue,\n    onChangeStart,\n    options,\n    renderDropdown,\n    renderOption,\n    setFocusedOptionIndex,\n    setOpened,\n    value,\n  ]);\n\n  const openedClassNames = React.useMemo(\n    () =>\n      (opened &&\n        dropdownOffsetDistance === 0 &&\n        (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n      undefined,\n    [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n  );\n\n  const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n  return (\n    <>\n      <ChipsInputBase\n        {...restProps}\n        disabled={disabled}\n        readOnly={readOnly}\n        clearButtonShown={clearButtonShown}\n        clearButtonTestId={clearButtonTestId}\n        // FormFieldProps\n        id={labelledbyId}\n        getRootRef={rootRef}\n        className={classNames(styles.host, openedClassNames, className)}\n        status={status}\n        after={\n          dropdownIconProp || (\n            <DropdownIcon\n              opened={opened}\n              onClick={onDropdownIconClick}\n              className={classNames(\n                styles.dropdownIcon,\n                clearButtonShown && styles.dropdownIconWithOffset,\n              )}\n            />\n          )\n        }\n        // option\n        value={value}\n        onAddChipOption={addOptionFromInput}\n        onRemoveChipOption={removeOption}\n        renderChip={renderChip}\n        onClear={clearOptions}\n        // input\n        getRef={inputRef}\n        inputValue={inputValue}\n        onInputChange={onInputChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        // a11y\n        role=\"combobox\"\n        aria-expanded={opened}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n        aria-haspopup=\"listbox\"\n        chipsListLabel={chipsListLabel}\n      />\n      {opened && (\n        <CustomSelectDropdown\n          data-testid={dropdownTestId}\n          targetRef={rootRef}\n          placement={dropdownVerticalPlacement}\n          scrollBoxRef={dropdownScrollBoxRef}\n          onPlacementChange={onDropdownPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          autoWidth={dropdownAutoWidth}\n          forcePortal={forceDropdownPortal}\n          noMaxHeight={noMaxHeight}\n          offsetDistance={dropdownOffsetDistance}\n          overscrollBehavior={overscrollBehavior}\n          // a11y\n          id={dropdownId}\n          role=\"listbox\"\n          aria-labelledby={labelledbyId}\n        >\n          {dropdownContent}\n        </CustomSelectDropdown>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnEventOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","styles","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","chipsListLabel","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","empty","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","popUp","popDown","clearButtonShown","host","after","onClick","dropdownIcon","dropdownIconWithOffset","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type MouseEventHandler } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnEventOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n  getNewOptionDataDefault,\n  getOptionLabelDefault,\n  getOptionValueDefault,\n  renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n  CustomSelectDropdown,\n  type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n  CustomSelectOption,\n  type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n  DEFAULT_EMPTY_TEXT,\n  DEFAULT_SELECTED_BEHAVIOR,\n  FOCUS_ACTION_NEXT,\n  FOCUS_ACTION_PREV,\n  isCreateNewOptionPreset,\n  isEmptyOptionPreset,\n  isNotServicePreset,\n  renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n  options: Array<OptionPreset<O>> = [],\n  startIndex = -1,\n) => {\n  if (startIndex >= options.length - 1) {\n    return -1;\n  }\n  return options.findIndex(\n    (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n  );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n  options: Array<OptionPreset<O>> = [],\n  endIndex: number = options.length,\n) => {\n  let result = -1;\n  if (endIndex <= 0) {\n    return result;\n  }\n  for (let i = endIndex - 1; i >= 0; i--) {\n    let option = options[i];\n\n    if (!isNotServicePreset(option) || !option.disabled) {\n      result = i;\n      break;\n    }\n  }\n  return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n  extends ChipsInputBaseProps<O>,\n    UseChipsSelectProps<O>,\n    Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n    Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n  /**\n   * Расположение выпадающего списка.\n   */\n  placement?: 'top' | 'bottom';\n  /**\n   * Отрисовка Spinner вместо списка опций в выпадающем списке.\n   */\n  fetching?: boolean;\n  /**\n   * Закрытие выпадающего списка после выбора элемента.\n   */\n  closeAfterSelect?: boolean;\n  /**\n   * Ширина раскрывающегося списка зависит от контента.\n   */\n  dropdownAutoWidth?: boolean;\n  /**\n   * Принудительно использовать портал.\n   */\n  forceDropdownPortal?: boolean;\n  /**\n   * Передает атрибут `data-testid` для дропдауна.\n   */\n  dropdownTestId?: string;\n  /**\n   * Иконка раскрывающегося списка.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n   */\n  addOnBlur?: boolean;\n  /**\n   * Отключает максимальную высоту по умолчанию.\n   */\n  noMaxHeight?: boolean;\n  /**\n   * Функция для отрисовки кастомной опции в выпадающем списке.\n   */\n  renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n  /**\n   * Рендер-проп для кастомного рендера содержимого дропдауна.\n   * В `defaultDropdownContent` содержится список опций.\n   */\n  renderDropdown?: ({\n    defaultDropdownContent,\n  }: {\n    defaultDropdownContent: React.ReactNode;\n  }) => React.ReactNode;\n  /**\n   * Событие срабатывающее перед `onChange`.\n   */\n  onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n  /**\n   * Отступ от выпадающего списка.\n   */\n  dropdownOffsetDistance?: number;\n\n  /**\n   * Если `true`, то справа будет отображаться кнопка для очистки значения.\n   */\n  allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkui.io/components/chips-select\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n  // FormFieldProps\n  getRootRef,\n  className,\n  status = 'default',\n  icon: dropdownIconProp,\n  onChangeStart,\n\n  // CustomSelectDropdownProps\n  options: optionsProp,\n  placement: placementProp = 'bottom',\n  closeAfterSelect = true,\n  selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n  emptyText = DEFAULT_EMPTY_TEXT,\n  creatable = false,\n  fetching = false,\n  dropdownAutoWidth,\n  forceDropdownPortal,\n  noMaxHeight = false,\n  filterFn = defaultFilterFn,\n  sortFn = false,\n  dropdownTestId,\n  onClose,\n  onOpen,\n  overscrollBehavior,\n  renderDropdown,\n\n  // ChipsInputProps\n  getRef,\n  value: valueProp,\n  defaultValue,\n  inputValue: inputValueProp,\n  defaultInputValue: defaultInputValueProp,\n  getOptionValue = getOptionValueDefault,\n  getOptionLabel = getOptionLabelDefault,\n  getNewOptionData = getNewOptionDataDefault,\n  renderChip = renderChipDefault,\n  renderOption = renderOptionDefault,\n  onChange,\n  onInputChange: onInputChangeProp,\n  dropdownOffsetDistance = 0,\n  allowClearButton,\n  clearButtonTestId,\n  delimiter,\n\n  // a11y\n  chipsListLabel,\n\n  // input native props\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  id: idProp,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  onKeyDown: onKeyDownProp,\n\n  slotProps,\n  ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n  const {\n    getRootRef: getInputRef,\n    value: resolvedInputValue,\n    defaultValue: resolvedDefaultInputValue,\n    onChange: resolvedOnInputChange,\n    disabled,\n    readOnly,\n    id: labelledbyId,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    ...inputRest\n  } = useMergeProps(\n    {\n      getRootRef: getRef,\n      value: inputValueProp,\n      defaultValue: defaultInputValueProp,\n      onChange: onInputChangeProp,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      id: idProp,\n      onFocus: onFocusProp,\n      onBlur: onBlurProp,\n      onKeyDown: onKeyDownProp,\n    },\n    slotProps?.input,\n  );\n\n  const {\n    // Связано с ChipsInputProps\n    // option\n    value,\n    addOptionFromInput,\n    addOption,\n    removeOption,\n    clearOptions,\n    // input\n    inputRef: inputRefHook,\n    inputValue,\n    clearInput,\n    onInputChange,\n\n    // Связано с CustomSelectDropdownProps\n    options,\n    opened,\n    setOpened,\n    focusedOption,\n    focusedOptionIndex,\n    setFocusedOption,\n    setFocusedOptionIndex,\n  } = useChipsSelect({\n    // option\n    value: valueProp,\n    defaultValue,\n    onChange,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n\n    // input\n    inputValue: resolvedInputValue as string,\n    defaultInputValue: resolvedDefaultInputValue as string,\n    onInputChange: resolvedOnInputChange,\n\n    // dropdown\n    options: optionsProp,\n    emptyText,\n    creatable,\n    filterFn,\n    sortFn,\n    selectedBehavior,\n    onClose,\n    onOpen,\n\n    // other\n    disabled,\n    delimiter,\n  });\n\n  // Связано с ChipsInputProps\n  const rootRef = useExternRef(getRootRef);\n  const inputRef = useExternRef(getInputRef, inputRefHook);\n\n  // Связано с CustomSelectDropdownProps\n  const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n    'top' | 'bottom'\n  >(placementProp);\n\n  const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n    if (placement.startsWith('top')) {\n      setDropdownVerticalPlacement('top');\n    } else if (placement.startsWith('bottom')) {\n      setDropdownVerticalPlacement('bottom');\n    }\n  }, []);\n\n  const dropdownId = React.useId();\n  const dropdownCurrentItemId =\n    focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n  const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocus) {\n      onFocus(event);\n    }\n\n    if (!readOnly) {\n      setOpened(true);\n      setFocusedOptionIndex(null);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlur) {\n      onBlur(event);\n    }\n\n    // Не добавляем значение, если его нужно выбрать строго из списка\n    if (!readOnly && !event.defaultPrevented && !creatable) {\n      event.preventDefault();\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = dropdownScrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    /* istanbul ignore next: нет представления как воспроизвести */\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n    if (index === oldIndex) {\n      /* istanbul ignore next: нет представления как воспроизвести */\n      return;\n    }\n\n    const option = options[index];\n\n    if (isNotServicePreset(option) && option.disabled) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = nextIndex === null ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      const nextIndex = findIndexAfter(options, index);\n      index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n    } else if (type === FOCUS_ACTION_PREV) {\n      const beforeIndex = findIndexBefore(options, index);\n      index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n    }\n\n    focusOptionByIndex(index, focusedOptionIndex);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (onKeyDown) {\n      onKeyDown(event);\n    }\n\n    if (event.defaultPrevented || readOnly) {\n      return;\n    }\n\n    switch (event.key) {\n      case Keys.ARROW_UP:\n      case Keys.ARROW_DOWN:\n        event.preventDefault();\n\n        if (!opened) {\n          setOpened(true);\n          focusOption(null, FOCUS_ACTION_NEXT);\n        } else {\n          focusOption(\n            focusedOptionIndex,\n            event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n          );\n        }\n        break;\n      case Keys.ENTER: {\n        if (!opened) {\n          break;\n        }\n        if (focusedOptionIndex != null) {\n          const foundOption = options[focusedOptionIndex];\n          if (foundOption && isNotServicePreset(foundOption)) {\n            event.preventDefault();\n\n            if (onChangeStart) {\n              onChangeStart(event, foundOption);\n            }\n\n            addOption(foundOption);\n            setFocusedOptionIndex(null);\n            clearInput();\n            if (closeAfterSelect) {\n              setOpened(false);\n            }\n\n            break;\n          }\n        }\n\n        if (!creatable) {\n          event.preventDefault();\n        }\n        break;\n      }\n      case Keys.ESCAPE:\n      case Keys.TAB:\n        if (opened) {\n          setOpened(false);\n        }\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex === null) {\n      setFocusedOption(null);\n    } else {\n      const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n      if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n        setFocusedOption(foundFocusedOptionIndex);\n      }\n    }\n  }, [options, focusedOptionIndex, setFocusedOption]);\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const handleClickOutside = React.useCallback(() => {\n    setOpened(false);\n  }, [setOpened]);\n\n  useGlobalOnEventOutside(\n    'mousedown', // см. https://github.com/VKCOM/VKUI/pull/8582\n    handleClickOutside,\n    opened ? rootRef : null,\n    opened ? dropdownScrollBoxRef : null,\n  );\n\n  const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      setOpened(!opened);\n    },\n    [opened, setOpened],\n  );\n\n  const dropdownContent = React.useMemo(() => {\n    const defaultDropdownContent = options.map((option, index) => {\n      const dropdownItemId = `${dropdownId}-${index}`;\n\n      if (isEmptyOptionPreset(option)) {\n        return (\n          <Footnote key=\"empty-text\" className={styles.empty}>\n            {option.placeholder}\n          </Footnote>\n        );\n      }\n      if (isCreateNewOptionPreset(option)) {\n        return (\n          <CustomSelectOption\n            key=\"create-new-option\"\n            id={dropdownItemId}\n            hovered={focusedOptionIndex === index}\n            onMouseDown={() => addOptionFromInput(inputValue)}\n            onMouseEnter={() => setFocusedOptionIndex(index)}\n          >\n            {option.actionText}\n          </CustomSelectOption>\n        );\n      }\n      return (\n        <React.Fragment key={`${typeof option.value}-${option.value}`}>\n          {renderOption(\n            {\n              id: dropdownItemId,\n              disabled: option.disabled,\n              hovered: focusedOption\n                ? getOptionValue(option) === getOptionValue(focusedOption)\n                : false,\n              children: option.label,\n              selected: !!value.find(\n                (selectedOption: Option) =>\n                  getOptionValue(selectedOption) === getOptionValue(option),\n              ),\n              getRootRef(node) {\n                if (node) {\n                  chipsSelectOptions[index] = node;\n                }\n              },\n              onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n                if (option.disabled) {\n                  return;\n                }\n                if (onChangeStart) {\n                  onChangeStart(event, option);\n                }\n\n                if (!event.defaultPrevented) {\n                  closeAfterSelect && setOpened(false);\n                  addOption(option);\n                  clearInput();\n                }\n              },\n              onMouseEnter() {\n                setFocusedOptionIndex(index);\n              },\n            },\n            option,\n          )}\n        </React.Fragment>\n      );\n    });\n\n    if (renderDropdown) {\n      return renderDropdown({\n        defaultDropdownContent,\n      });\n    }\n    return defaultDropdownContent;\n  }, [\n    addOption,\n    addOptionFromInput,\n    chipsSelectOptions,\n    clearInput,\n    closeAfterSelect,\n    dropdownId,\n    focusedOption,\n    focusedOptionIndex,\n    getOptionValue,\n    inputValue,\n    onChangeStart,\n    options,\n    renderDropdown,\n    renderOption,\n    setFocusedOptionIndex,\n    setOpened,\n    value,\n  ]);\n\n  const openedClassNames = React.useMemo(\n    () =>\n      (opened &&\n        dropdownOffsetDistance === 0 &&\n        (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n      undefined,\n    [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n  );\n\n  const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n  return (\n    <>\n      <ChipsInputBase\n        clearButtonShown={clearButtonShown}\n        clearButtonTestId={clearButtonTestId}\n        // FormFieldProps\n        getRootRef={rootRef}\n        className={classNames(styles.host, openedClassNames, className)}\n        status={status}\n        after={\n          dropdownIconProp || (\n            <DropdownIcon\n              opened={opened}\n              onClick={onDropdownIconClick}\n              className={classNames(\n                styles.dropdownIcon,\n                clearButtonShown && styles.dropdownIconWithOffset,\n              )}\n            />\n          )\n        }\n        // option\n        value={value}\n        onAddChipOption={addOptionFromInput}\n        onRemoveChipOption={removeOption}\n        renderChip={renderChip}\n        onClear={clearOptions}\n        // a11y\n        chipsListLabel={chipsListLabel}\n        slotProps={{\n          ...slotProps,\n          input: {\n            'role': 'combobox',\n            'aria-expanded': opened,\n            'aria-autocomplete': 'list',\n            'aria-activedescendant': opened ? dropdownCurrentItemId : undefined,\n            'aria-haspopup': 'listbox',\n            'getRootRef': inputRef,\n            'value': inputValue,\n            'onChange': onInputChange,\n            disabled,\n            readOnly,\n            'id': labelledbyId,\n            'onFocus': handleFocus,\n            'onBlur': handleBlur,\n            'onKeyDown': handleKeyDown,\n            ...inputRest,\n          },\n        }}\n        {...restProps}\n      />\n      {opened && (\n        <CustomSelectDropdown\n          data-testid={dropdownTestId}\n          targetRef={rootRef}\n          placement={dropdownVerticalPlacement}\n          scrollBoxRef={dropdownScrollBoxRef}\n          onPlacementChange={onDropdownPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          autoWidth={dropdownAutoWidth}\n          forcePortal={forceDropdownPortal}\n          noMaxHeight={noMaxHeight}\n          offsetDistance={dropdownOffsetDistance}\n          overscrollBehavior={overscrollBehavior}\n          // a11y\n          id={dropdownId}\n          role=\"listbox\"\n          aria-labelledby={labelledbyId}\n        >\n          {dropdownContent}\n        </CustomSelectDropdown>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnEventOutside","useMergeProps","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","styles","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","defaultInputValueProp","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onInputChange","onInputChangeProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","chipsListLabel","disabledProp","readOnly","readOnlyProp","id","idProp","onFocus","onFocusProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","slotProps","restProps","getInputRef","resolvedInputValue","resolvedDefaultInputValue","resolvedOnInputChange","labelledbyId","inputRest","input","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","empty","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","popUp","popDown","clearButtonShown","host","after","onClick","dropdownIcon","dropdownIconWithOffset","onAddChipOption","onRemoveChipOption","onClear","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","role","aria-labelledby"],"mappings":"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"}

package/dist/cssm/components/CustomSelect/CustomSelect.js

@@ -5,6 +5,7 @@ import { classNames } from "@vkontakte/vkjs";
 import { getRequiredValueByKey } from "../../helpers/getValueByKey.js";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
+import { useMergeProps } from "../../hooks/useMergeProps.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { useDOM } from "../../lib/dom.js";
 import { defaultFilterFn } from "../../lib/select.js";
@@ -13,10 +14,11 @@ import { preventDefault } from "../../lib/utils.js";
 import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown.js";
 import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption.js";
 import { NOT_SELECTED, remapFromNativeValueToSelectValue } from "../NativeSelect/NativeSelect.js";
+import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { CustomSelectInput } from "./CustomSelectInput/CustomSelectInput.js";
-import { checkMixControlledAndUncontrolledState, checkOptionsValueType, filter, findSelectedIndex, getOptionByValue } from "./helpers.js";
+import { checkDeprecatedProps, checkMixControlledAndUncontrolledState, checkOptionsValueType, filter, findSelectedIndex, getOptionByValue } from "./helpers.js";
 import { useAfterItems } from "./hooks/useAfterItems.js";
 import { useDropdownOpenedController } from "./hooks/useDropdownOpenedController.js";
 import { useFocusedOptionController } from "./hooks/useFocusedOptionController.js";
@@ -65,25 +67,44 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
 /**
  * @see https://vkui.io/components/custom-select
  */ export function CustomSelect(props) {
-    const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': options, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, 'onInputKeyDown': onInputKeyDownProp, readOnly, accessible = false, fetchingInProgressLabel, fetchingCompletedLabel, ...restProps } = props;
+    const { style, className, getRootRef, before, name, getRef, popupDirection = 'bottom', onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, labelTextTestId, multiline, placeholder, status, forceDropdownPortal, align, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': options, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, 'onInputKeyDown': onInputKeyDownProp, accessible = false, fetchingInProgressLabel, fetchingCompletedLabel, 'value': selectValue, slotProps, ...restProps } = props;
     if (process.env.NODE_ENV === 'development') {
         checkOptionsValueType(options);
+        checkDeprecatedProps(props);
     }
     const { sizeY = 'none' } = useAdaptivity();
+    const { onClick: onRootClick, onMouseMove: onRootMouseMove, onMouseDown: onRootMouseDown, getRootRef: rootRef, ...rootRest } = useMergeProps({
+        style,
+        className,
+        getRootRef
+    }, slotProps?.root);
+    const { getRootRef: getSelectRef, ...selectRest } = useMergeProps({
+        getRootRef: getRef,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onClick: props.onClick
+    }, slotProps?.select);
+    const { getRootRef: getInputRef, onChange: onChangeInput, onFocus: onInputFocus, onBlur: onInputBlur, onKeyDown: onNativeInputKeyDown, onClick: onNativeInputClick, readOnly, ...inputRest } = useMergeProps({
+        getRootRef: getSelectInputRef,
+        onChange: onInputChangeProp,
+        // Приводим типы так как в CustomSelect типы в rest определены как React.SelectHTMLAttributes<HTMLSelectElement>
+        // Хотя эти свойства прокидываются в input
+        ...restProps
+    }, slotProps?.input);
     const containerRef = React.useRef(null);
-    const handleRootRef = useExternRef(containerRef, getRootRef);
-    const selectElRef = useExternRef(getRef);
-    const selectInputRef = useExternRef(getSelectInputRef);
+    const handleRootRef = useExternRef(containerRef, rootRef);
+    const selectElRef = useExternRef(getSelectRef);
+    const selectInputRef = useExternRef(getInputRef);
     const propsValue = React.useMemo(()=>{
-        if (props.value === undefined) {
+        if (selectValue === undefined) {
             return undefined;
         }
-        return getOptionByValue(options, props.value)?.value ?? null;
+        return getOptionByValue(options, selectValue)?.value ?? null;
     }, [
         options,
-        props.value
+        selectValue
     ]);
-    const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
+    const [isControlledOutside, setIsControlledOutside] = React.useState(selectValue !== undefined);
     const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
     const { nativeSelectValue, setNativeSelectValue, selectedOptionValue, setSelectedOptionValue, onNativeSelectChange } = useSelectedOptionController({
         value: propsValue,
@@ -100,7 +121,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
         options,
         accessible,
         selectedValue: selectedOptionValue,
-        onInputChange: onInputChangeProp
+        onInputChange: onChangeInput
     });
     const filteredOptions = React.useMemo(()=>filter(options, searchable ? inputValue : '', filterFn), [
         filterFn,
@@ -184,7 +205,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
         focusedOptionValue,
         selectOption
     ]);
-    const onInputKeyDown = useInputKeyboardController({
+    const handleInputKeyDown = useInputKeyboardController({
         opened,
         open,
         close,
@@ -363,41 +384,53 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
     }, [
         resetFocusedOption
     ]);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], className),
-        style: style,
-        ref: handleRootRef,
-        onClick: passClickAndFocusToInputOnClick,
-        onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea,
-        onMouseMove: function updateLastMousePosition(e) {
-            lastMousePositionRef.current = {
-                x: e.clientX,
-                y: e.clientY
-            };
-        },
+    const updateLastMousePosition = (e)=>{
+        lastMousePositionRef.current = {
+            x: e.clientX,
+            y: e.clientY
+        };
+    };
+    return /*#__PURE__*/ _jsxs(RootComponent, {
+        baseClassName: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY]),
+        getRootRef: handleRootRef,
+        onClick: callMultiple(onRootClick, passClickAndFocusToInputOnClick),
+        onMouseDown: callMultiple(onRootMouseDown, preventInputBlurWhenClickInsideFocusedSelectArea),
+        onMouseMove: callMultiple(onRootMouseMove, updateLastMousePosition),
+        ...rootRest,
         children: [
             /*#__PURE__*/ _jsx(CustomSelectInput, {
                 autoComplete: "off",
                 autoCapitalize: "none",
                 autoCorrect: "off",
                 spellCheck: "false",
-                ...restProps,
-                ...selectInputAriaProps,
-                getRef: selectInputRef,
-                onFocus: onFocus,
-                onBlur: onBlur,
-                className: openedClassNames,
-                readOnly: readOnly || !searchable,
                 fetching: fetching,
                 searchable: searchable,
                 accessible: accessible,
-                value: inputValue,
-                onKeyDown: !readOnly ? onInputKeyDown : undefined,
-                onChange: onInputChange,
-                onClick: !readOnly ? toggleOpened : undefined,
                 before: before,
                 after: afterItems,
                 selectType: selectType,
+                align: align,
+                status: status,
+                placeholder: placeholder,
+                multiline: multiline,
+                labelTextTestId: labelTextTestId,
+                slotProps: {
+                    root: {
+                        className: openedClassNames
+                    },
+                    input: {
+                        getRootRef: selectInputRef,
+                        onChange: onInputChange,
+                        onFocus: callMultiple(onFocus, onInputFocus),
+                        onBlur: callMultiple(onBlur, onInputFocus),
+                        onKeyDown: !readOnly ? callMultiple(handleInputKeyDown, onNativeInputKeyDown) : onNativeInputKeyDown,
+                        onClick: !readOnly ? callMultiple(toggleOpened, onNativeInputClick) : onNativeInputClick,
+                        value: inputValue,
+                        readOnly: readOnly || !searchable,
+                        ...selectInputAriaProps,
+                        ...inputRest
+                    }
+                },
                 children: selected?.label
             }),
             /*#__PURE__*/ _jsx(FetchingStatus, {
@@ -406,19 +439,18 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
                 fetchingInProgressLabel: fetchingInProgressLabel,
                 fetchingCompletedLabel: fetchingCompletedLabel
             }),
-            /*#__PURE__*/ _jsxs("select", {
+            /*#__PURE__*/ _jsxs(RootComponent, {
+                Component: "select",
+                baseClassName: styles.control,
                 tabIndex: -1,
-                ref: selectElRef,
                 name: name,
-                onChange: onNativeSelectChange,
-                onBlur: props.onBlur,
-                onFocus: props.onFocus,
-                onClick: props.onClick,
                 value: nativeSelectValue,
                 "aria-hidden": true,
-                className: styles.control,
                 "data-testid": nativeSelectTestId,
                 required: required,
+                onChange: onNativeSelectChange,
+                getRootRef: selectElRef,
+                ...selectRest,
                 children: [
                     (allowClearButton || nativeSelectValue === NOT_SELECTED.NATIVE) && /*#__PURE__*/ _jsx("option", {
                         value: NOT_SELECTED.NATIVE