npm - @vkontakte/vkui - Versions diffs - 5.9.0 → 5.9.2 - Mend

@vkontakte/vkui 5.9.0 → 5.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/dist/cssm/components/CustomSelect/CustomSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { defaultFilterFn, getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { debounce, getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { Input } from '../Input/Input';\nimport { NativeSelectProps } from '../NativeSelect/NativeSelect';\nimport { SelectType } from '../Select/Select';\nimport { SelectMimicry } from '../SelectMimicry/SelectMimicry';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { CustomSelectClearButton, CustomSelectClearButtonProps } from './CustomSelectClearButton';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelect--sizeY-none'],\n [SizeType.COMPACT]: styles['CustomSelect--sizeY-compact'],\n};\n\nconst findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex((option, i) => i > startIndex && !option.disabled);\n};\n\nconst findIndexBefore = (\n options: CustomSelectOptionInterface[] = [],\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 (!option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nconst warn = warnOnce('CustomSelect');\n\nconst checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {\n if (new Set(options.map((item) => typeof item.value)).size > 1) {\n warn(\n 'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',\n 'error',\n );\n }\n};\n\nfunction defaultRenderOptionFn({ option, ...props }: CustomSelectOptionProps): React.ReactNode {\n return <CustomSelectOption {...props} />;\n}\n\nconst handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n};\n\nfunction findSelectedIndex(\n options: CustomSelectOptionInterface[],\n value: SelectValue,\n withClear: boolean,\n) {\n if (withClear && value === '') {\n return -1;\n }\n return (\n options.findIndex((item) => {\n value = typeof item.value === 'number' ? Number(value) : value;\n return item.value === value;\n }) ?? -1\n );\n}\n\nconst filter = (\n options: SelectProps['options'],\n inputValue: string,\n filterFn: SelectProps['filterFn'],\n) => {\n return typeof filterFn === 'function'\n ? options.filter((option) => filterFn(inputValue, option))\n : options;\n};\n\nconst defaultOptions: CustomSelectOptionInterface[] = [];\n\ntype SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n\nexport interface CustomSelectOptionInterface {\n value: SelectValue;\n label: React.ReactElement \| string;\n disabled?: boolean;\n [index: string]: any;\n}\n\nexport interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {\n /*\n Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n /\n searchable?: boolean;\n /\n Текст, который будет отображен, если приходит пустой `options`.\n /\n emptyText?: string;\n /\n > ⚠️ В v6 из возвращаемых типов будет удалён `CustomSelectOptionInterface[]`. Для кастомной фильтрации используйте\n * > `filterFn`.\n /\n onInputChange?: (\n e: React.ChangeEvent,\n options: CustomSelectOptionInterface[],\n ) => void \| CustomSelectOptionInterface[];\n options: CustomSelectOptionInterface[];\n /\n Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n /\n filterFn?:\n \| false\n \| ((\n value: string,\n option: CustomSelectOptionInterface,\n getOptionLabel?: (option: Partial<CustomSelectOptionInterface>) => string,\n ) => boolean);\n popupDirection?: 'top' \| 'bottom';\n /\n Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)\n \n > ⚠️ Важно: cвойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n * опции.\n /\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /\n Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.\n /\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /\n Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`\n * \"победит\" `renderDropdown`.\n /\n fetching?: boolean;\n onClose?: VoidFunction;\n onOpen?: VoidFunction;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n /\n ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;\n /\n Если `true`, то справа будет отображаться кнопка для очистки значения\n /\n allowClearButton?: boolean;\n dropdownOffsetDistance?: number;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n selectType?: SelectType;\n}\n\ntype MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;\n\n/\n @see https://vkcom.github.io/VKUI/#/CustomSelect\n /\nexport function CustomSelect(props: SelectProps) {\n const [opened, setOpened] = React.useState(false);\n const {\n before,\n name,\n className,\n getRef,\n getRootRef,\n popupDirection,\n style,\n onChange,\n children,\n onInputChange: onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n forceDropdownPortal,\n selectType = 'default',\n autoHideScrollbar,\n autoHideScrollbarDelay,\n searchable = false,\n renderOption: renderOptionProp = defaultRenderOptionFn,\n options: optionsProp = defaultOptions,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n icon: iconProp,\n ClearButton = CustomSelectClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n fixDropdownWidth = true,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(optionsProp);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const containerRef = React.useRef<HTMLLabelElement>(null);\n const handleRootRef = useExternRef(containerRef, getRootRef);\n const scrollBoxRef = React.useRef<HTMLDivElement \| null>(null);\n const selectElRef = useExternRef(getRef);\n\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number \| undefined>(-1);\n const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);\n const [inputValue, setInputValue] = React.useState('');\n const [nativeSelectValue, setNativeSelectValue] = React.useState(\n () => props.value ?? props.defaultValue ?? (allowClearButton ? '' : undefined),\n );\n const [keyboardInput, setKeyboardInput] = React.useState('');\n const [popperPlacement, setPopperPlacement] = React.useState<PlacementWithAuto \| undefined>(\n undefined,\n );\n const [options, setOptions] = React.useState(optionsProp);\n const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number \| undefined>(\n findSelectedIndex(optionsProp, props.value ?? props.defaultValue, allowClearButton),\n );\n\n React.useEffect(() => {\n setIsControlledOutside(props.value !== undefined);\n setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);\n }, [props.value]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n options.some(({ value }) => nativeSelectValue === value) \|\|\n (allowClearButton && nativeSelectValue === '')\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const selected = React.useMemo(() => {\n if (!options.length) {\n return null;\n }\n\n return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;\n }, [options, selectedOptionIndex]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement?.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down'])) \|\|\n undefined,\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const resetKeyboardInput = React.useCallback(() => {\n setKeyboardInput('');\n }, []);\n\n const scrollToElement = React.useCallback((index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = dropdown ? (dropdown.children[index] as HTMLElement) : null;\n\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 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 isValidIndex = React.useCallback(\n (index: number) => {\n return index >= 0 && index < (options.length ?? 0);\n },\n [options.length],\n );\n\n const focusOptionByIndex = React.useCallback(\n (index: number \| undefined, scrollTo = true) => {\n if (index === undefined \|\| index < 0 \|\| index > (options.length ?? 0) - 1) {\n return;\n }\n\n const option = options[index];\n\n if (option?.disabled) {\n return;\n }\n\n if (scrollTo) {\n scrollToElement(index);\n }\n\n // Это оптимизация, прежде всего, под `onMouseOver`\n setFocusedOptionIndex((focusedOptionIndex) =>\n focusedOptionIndex !== index ? index : focusedOptionIndex,\n );\n },\n [options, scrollToElement],\n );\n\n const areOptionsShown = React.useCallback(() => {\n return scrollBoxRef.current !== null;\n }, []);\n\n const setScrollBoxRef = React.useCallback(\n (ref: HTMLDivElement \| null) => {\n scrollBoxRef.current = ref;\n\n if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {\n {\n scrollToElement(selectedOptionIndex, true);\n }\n }\n },\n [isValidIndex, scrollToElement, selectedOptionIndex],\n );\n\n const onKeyboardInput = React.useCallback(\n (key: string) => {\n const fullInput = keyboardInput + key;\n\n const optionIndex = options.findIndex((option) => {\n return getTitleFromChildren(option.label).toLowerCase().includes(fullInput);\n });\n\n if (optionIndex !== undefined && optionIndex > -1) {\n focusOptionByIndex(optionIndex);\n }\n\n setKeyboardInput(fullInput);\n },\n [focusOptionByIndex, keyboardInput, options],\n );\n\n /\n Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.\n * Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.\n /\n const close = React.useCallback(() => {\n resetKeyboardInput();\n\n setInputValue('');\n setOpened(false);\n setFocusedOptionIndex(-1);\n onClose?.();\n }, [onClose, resetKeyboardInput]);\n\n const selectOption = React.useCallback(\n (index: number) => {\n const item = options[index];\n\n setNativeSelectValue(item?.value);\n close();\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside &&\n props.value !== nativeSelectValue &&\n nativeSelectValue === item?.value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n },\n [close, options, selectElRef, isControlledOutside, props.value, nativeSelectValue],\n );\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionIndex === undefined \|\| !isValidIndex(focusedOptionIndex)) {\n return;\n }\n\n selectOption(focusedOptionIndex);\n }, [focusedOptionIndex, isValidIndex, selectOption]);\n\n const open = React.useCallback(() => {\n setOpened(true);\n setFocusedOptionIndex(selectedOptionIndex);\n\n if (typeof onOpen === 'function') {\n onOpen();\n }\n }, [onOpen, selectedOptionIndex]);\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('blur');\n selectElRef.current?.dispatchEvent(event);\n }, [close, selectElRef]);\n\n const resetFocusedOption = React.useCallback(() => {\n setFocusedOptionIndex(-1);\n }, []);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focus');\n selectElRef.current?.dispatchEvent(event);\n }, [selectElRef]);\n\n const onClick = React.useCallback(() => {\n if (opened) {\n close();\n } else {\n open();\n }\n }, [close, open, opened]);\n\n const handleKeyUp = React.useMemo(() => debounce(resetKeyboardInput, 1000), [resetKeyboardInput]);\n\n const focusOption = React.useCallback(\n (type: 'next' \| 'prev') => {\n let index = focusedOptionIndex;\n\n if (type === 'next') {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === 'prev') {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index);\n },\n [focusOptionByIndex, focusedOptionIndex, options],\n );\n\n React.useEffect(\n function updateOptionsAndSelectedOptionIndex() {\n const value = props.value ?? nativeSelectValue ?? props.defaultValue;\n\n const options =\n searchable && inputValue !== undefined\n ? filter(optionsProp, inputValue, filterFn)\n : optionsProp;\n\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));\n },\n [\n filterFn,\n inputValue,\n nativeSelectValue,\n optionsProp,\n props.defaultValue,\n props.value,\n searchable,\n allowClearButton,\n ],\n );\n\n /\n Нужен для правильного поведения обработчика onClick на select. Фильтрует клики, которые были сделаны по\n * выпадающему списку.\n */\n const onLabelClick = React.useCallback((e: React.MouseEvent<HTMLLabelElement>) => {\n if (scrollBoxRef.current?.contains(e.target as Node)) {\n e.preventDefault();\n }\n }, []);\n\n const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const newSelectedOptionIndex = findSelectedIndex(\n options,\n e.currentTarget.value,\n allowClearButton,\n );\n\n if (selectedOptionIndex !== newSelectedOptionIndex) {\n if (!isControlledOutside) {\n setSelectedOptionIndex(newSelectedOptionIndex);\n }\n onChange?.(e);\n }\n };\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (event) => {\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n areOptionsShown() && focusOption('prev');\n break;\n case 'ArrowDown':\n areOptionsShown() && focusOption('next');\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n areOptionsShown() && selectFocused();\n break;\n }\n },\n [areOptionsShown, close, focusOption, selectFocused],\n );\n\n const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n // TODO [>=6]: удалить `onInputChangeProp`.\n if (onInputChangeProp) {\n const options = onInputChangeProp(e, optionsProp);\n if (options) {\n if (process.env.NODE_ENV === 'development') {\n warn(\n 'Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет ' +\n 'проигнорировано в v6.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn.',\n );\n }\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n } else {\n const options = filter(optionsProp, e.target.value, filterFn);\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n setInputValue(e.target.value);\n },\n [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],\n );\n\n const handleKeyDownSelect = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key.length === 1 && event.key !== ' ') {\n onKeyboardInput(event.key);\n return;\n }\n\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n if (opened) {\n areOptionsShown() && focusOption('prev');\n } else {\n open();\n }\n break;\n case 'ArrowDown':\n if (opened) {\n areOptionsShown() && focusOption('next');\n } else {\n open();\n }\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n case 'Spacebar':\n case ' ':\n if (opened) {\n areOptionsShown() && selectFocused();\n } else {\n open();\n }\n break;\n }\n },\n [areOptionsShown, close, focusOption, onKeyboardInput, open, opened, selectFocused],\n );\n\n const handleOptionClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n const index = Array.prototype.indexOf.call(\n e.currentTarget.parentNode?.children,\n e.currentTarget,\n );\n const option = options[index];\n\n if (option && !option.disabled) {\n selectOption(index);\n }\n },\n [options, selectOption],\n );\n\n const handleOptionHover = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n focusOptionByIndex(\n Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget),\n false,\n );\n },\n [focusOptionByIndex],\n );\n\n const renderOption = React.useCallback(\n (option: CustomSelectOptionInterface, index: number) => {\n const hovered = index === focusedOptionIndex;\n const selected = index === selectedOptionIndex;\n\n return (\n <React.Fragment key={`${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: handleOptionDown,\n // Используем `onMouseOver` вместо `onMouseEnter`.\n // При параметре `searchable`, обновляется \"ребёнок\", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:\n // 1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.\n // > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.\n // 2. Если это тач-устройство.\n // > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,\n // но не на тот, на который нажали в первый раз.\n // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744\n onMouseOver: handleOptionHover,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionIndex,\n handleOptionClick,\n handleOptionHover,\n renderOptionProp,\n selectedOptionIndex,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n options?.length > 0 ? (\n options.map(renderOption)\n ) : (\n <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, options, renderDropdown, renderOption]);\n\n const controlledValueSet = isControlledOutside && props.value !== '';\n const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';\n const clearButtonShown =\n allowClearButton && !opened && (controlledValueSet \|\| uncontrolledValueSet);\n\n const clearButton = React.useMemo(() => {\n if (!clearButtonShown) {\n return null;\n }\n\n return (\n <ClearButton\n className={iconProp === undefined ? styles['CustomSelect--clear-icon'] : undefined}\n onClick={() => setNativeSelectValue('')}\n />\n );\n }, [clearButtonShown, ClearButton, iconProp]);\n\n const icon = React.useMemo(() => {\n if (iconProp !== undefined) {\n return iconProp;\n }\n\n return (\n <DropdownIcon\n className={clearButtonShown ? styles['CustomSelect__dropdown-icon'] : undefined}\n opened={opened}\n />\n );\n }, [clearButtonShown, iconProp, opened]);\n\n const afterIcons = (icon \|\| clearButtonShown) && (\n <React.Fragment>\n {clearButton}\n {icon}\n </React.Fragment>\n );\n\n return (\n <label\n className={classNames(\n styles['CustomSelect'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n ref={handleRootRef}\n onClick={onLabelClick}\n >\n {opened && searchable ? (\n <Input\n {...restProps}\n autoFocus\n onBlur={onBlur}\n className={openedClassNames}\n value={inputValue}\n onKeyDown={onInputKeyDown}\n onChange={onInputChange}\n // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.\n // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.\n // @ts-expect-error: TS2322 MouseEventHandler<HTMLSelectElement> !== MouseEventHandler<HTMLInputElement>\n onClick={props.onClick}\n before={before}\n after={afterIcons}\n mode={getFormFieldModeFromSelectType(selectType)}\n />\n ) : (\n <SelectMimicry\n {...restProps}\n aria-hidden\n onClick={onClick}\n onKeyDown={handleKeyDownSelect}\n onKeyUp={handleKeyUp}\n onFocus={onFocus}\n onBlur={onBlur}\n className={openedClassNames}\n before={before}\n after={afterIcons}\n selectType={selectType}\n >\n {selected?.label}\n </SelectMimicry>\n )}\n <select\n ref={selectElRef}\n name={name}\n onChange={onNativeSelectChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onClick={props.onClick}\n value={nativeSelectValue}\n aria-hidden\n className={styles['CustomSelect__control']}\n >\n {allowClearButton && <option key=\"\" value=\"\" />}\n {optionsProp.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </select>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popupDirection}\n scrollBoxRef={setScrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetFocusedOption}\n fetching={fetching}\n offsetDistance={dropdownOffsetDistance}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </label>\n );\n}\n"],"names":["React","classNames","useAdaptivity","useExternRef","SizeType","defaultFilterFn","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","debounce","getTitleFromChildren","warnOnce","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Input","SelectMimicry","Footnote","CustomSelectClearButton","styles","sizeYClassNames","none","COMPACT","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","warn","checkOptionsValueType","Set","map","item","value","size","defaultRenderOptionFn","props","handleOptionDown","e","preventDefault","findSelectedIndex","withClear","Number","filter","inputValue","filterFn","defaultOptions","CustomSelect","opened","setOpened","useState","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOption","renderOptionProp","optionsProp","emptyText","icon","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","restProps","process","env","NODE_ENV","sizeY","containerRef","useRef","handleRootRef","scrollBoxRef","selectElRef","focusedOptionIndex","setFocusedOptionIndex","isControlledOutside","setIsControlledOutside","undefined","setInputValue","nativeSelectValue","setNativeSelectValue","defaultValue","keyboardInput","setKeyboardInput","popperPlacement","setPopperPlacement","setOptions","selectedOptionIndex","setSelectedOptionIndex","useEffect","some","event","Event","bubbles","current","dispatchEvent","selected","useMemo","openedClassNames","includes","resetKeyboardInput","useCallback","scrollToElement","index","center","dropdown","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","isValidIndex","focusOptionByIndex","scrollTo","areOptionsShown","setScrollBoxRef","ref","onKeyboardInput","key","fullInput","optionIndex","label","toLowerCase","close","selectOption","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","open","onBlur","resetFocusedOption","onFocus","onClick","handleKeyUp","focusOption","type","nextIndex","beforeIndex","updateOptionsAndSelectedOptionIndex","onLabelClick","contains","target","onNativeSelectChange","newSelectedOptionIndex","currentTarget","onInputKeyDown","handleKeyDownSelect","handleOptionClick","Array","prototype","indexOf","call","parentNode","handleOptionHover","hovered","Fragment","onMouseDown","onMouseOver","resolvedContent","defaultDropdownContent","controlledValueSet","uncontrolledValueSet","clearButtonShown","clearButton","afterIcons","REGULAR","autoFocus","onKeyDown","after","mode","aria-hidden","onKeyUp","select","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","sameWidth","forcePortal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,eAAe,EAAEC,8BAA8B,QAAQ,mBAAmB;AACnF,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjE,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SACEC,kBAAkB,QAEb,2CAA2C;AAClD,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,SAASC,KAAK,QAAQ,iBAAiB;AAGvC,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,uBAAuB,QAAsC,4BAA4B;AAClG,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,2BAA2B;IACxC,CAACd,SAASiB,OAAO,CAAC,EAAEH,MAAM,CAAC,8BAA8B;AAC3D;AAEA,MAAMI,iBAAiB,CAACC,UAAyC,EAAE,EAAEC,aAAa,CAAC,CAAC;IAClF,IAAIA,cAAcD,QAAQE,MAAM,GAAG,GAAG;QACpC,OAAO,CAAC;IACV;IACA,OAAOF,QAAQG,SAAS,CAAC,CAACC,QAAQC,IAAMA,IAAIJ,cAAc,CAACG,OAAOE,QAAQ;AAC5E;AAEA,MAAMC,kBAAkB,CACtBP,UAAyC,EAAE,EAC3CQ,WAAmBR,QAAQE,MAAM;IAEjC,IAAIO,SAAS,CAAC;IACd,IAAID,YAAY,GAAG;QACjB,OAAOC;IACT;IACA,IAAK,IAAIJ,IAAIG,WAAW,GAAGH,KAAK,GAAGA,IAAK;QACtC,IAAID,SAASJ,OAAO,CAACK,EAAE;QAEvB,IAAI,CAACD,OAAOE,QAAQ,EAAE;YACpBG,SAASJ;YACT;QACF;IACF;IACA,OAAOI;AACT;AAEA,MAAMC,OAAOvB,SAAS;AAEtB,MAAMwB,wBAAwB,CAACX;IAC7B,IAAI,IAAIY,IAAIZ,QAAQa,GAAG,CAAC,CAACC,OAAS,OAAOA,KAAKC,KAAK,GAAGC,IAAI,GAAG,GAAG;QAC9DN,KACE,+FACA;IAEJ;AACF;AAEA,SAASO,sBAAsB,EAAEb,MAAM,EAAE,GAAGc,OAAgC;IAC1E,qBAAO,oBAAC7B,oBAAuB6B;AACjC;AAEA,MAAMC,mBAAsC,CAACC;IAC3CA,EAAEC,cAAc;AAClB;AAEA,SAASC,kBACPtB,OAAsC,EACtCe,KAAkB,EAClBQ,SAAkB;IAElB,IAAIA,aAAaR,UAAU,IAAI;QAC7B,OAAO,CAAC;IACV;IACA,OACEf,QAAQG,SAAS,CAAC,CAACW;QACjBC,QAAQ,OAAOD,KAAKC,KAAK,KAAK,WAAWS,OAAOT,SAASA;QACzD,OAAOD,KAAKC,KAAK,KAAKA;IACxB,MAAM,CAAC;AAEX;AAEA,MAAMU,SAAS,CACbzB,SACA0B,YACAC;IAEA,OAAO,OAAOA,aAAa,aACvB3B,QAAQyB,MAAM,CAAC,CAACrB,SAAWuB,SAASD,YAAYtB,WAChDJ;AACN;AAEA,MAAM4B,iBAAgD,EAAE;AAuFxD;;CAEC,GACD,OAAO,SAASC,aAAaX,KAAkB;IAC7C,MAAM,CAACY,QAAQC,UAAU,GAAGtD,MAAMuD,QAAQ,CAAC;IAC3C,MAAM,EACJC,MAAM,EACNC,IAAI,EACJC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,cAAc,EACdC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,eAAeC,iBAAiB,EAChCC,cAAc,EACdC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,mBAAmB,EACnBC,aAAa,SAAS,EACtBC,iBAAiB,EACjBC,sBAAsB,EACtBC,aAAa,KAAK,EAClBC,cAAcC,mBAAmBrC,qBAAqB,EACtDjB,SAASuD,cAAc3B,cAAc,EACrC4B,YAAY,mBAAmB,EAC/B7B,WAAW7C,eAAe,EAC1B2E,MAAMC,QAAQ,EACdC,cAAcjE,uBAAuB,EACrCkE,mBAAmB,KAAK,EACxBC,yBAAyB,CAAC,EAC1BC,mBAAmB,IAAI,EACvB,GAAGC,WACJ,GAAG7C;IAEJ,IAAI8C,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CvD,sBAAsB4C;IACxB;IAEA,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAGxF;IAE3B,MAAMyF,eAAe3F,MAAM4F,MAAM,CAAmB;IACpD,MAAMC,gBAAgB1F,aAAawF,cAAc/B;IACjD,MAAMkC,eAAe9F,MAAM4F,MAAM,CAAwB;IACzD,MAAMG,cAAc5F,aAAawD;IAEjC,MAAM,CAACqC,oBAAoBC,sBAAsB,GAAGjG,MAAMuD,QAAQ,CAAqB,CAAC;IACxF,MAAM,CAAC2C,qBAAqBC,uBAAuB,GAAGnG,MAAMuD,QAAQ,CAACd,MAAMH,KAAK,KAAK8D;IACrF,MAAM,CAACnD,YAAYoD,cAAc,GAAGrG,MAAMuD,QAAQ,CAAC;IACnD,MAAM,CAAC+C,mBAAmBC,qBAAqB,GAAGvG,MAAMuD,QAAQ,CAC9D,IAAMd,MAAMH,KAAK,IAAIG,MAAM+D,YAAY,IAAKrB,CAAAA,mBAAmB,KAAKiB,SAAQ;IAE9E,MAAM,CAACK,eAAeC,iBAAiB,GAAG1G,MAAMuD,QAAQ,CAAC;IACzD,MAAM,CAACoD,iBAAiBC,mBAAmB,GAAG5G,MAAMuD,QAAQ,CAC1D6C;IAEF,MAAM,CAAC7E,SAASsF,WAAW,GAAG7G,MAAMuD,QAAQ,CAACuB;IAC7C,MAAM,CAACgC,qBAAqBC,uBAAuB,GAAG/G,MAAMuD,QAAQ,CAClEV,kBAAkBiC,aAAarC,MAAMH,KAAK,IAAIG,MAAM+D,YAAY,EAAErB;IAGpEnF,MAAMgH,SAAS,CAAC;QACdb,uBAAuB1D,MAAMH,KAAK,KAAK8D;QACvCG,qBAAqB,CAACD,oBAAsB7D,MAAMH,KAAK,IAAIgE;IAC7D,GAAG;QAAC7D,MAAMH,KAAK;KAAC;IAEhB/B,0BAA0B;QACxB,IACEgB,QAAQ0F,IAAI,CAAC,CAAC,EAAE3E,KAAK,EAAE,GAAKgE,sBAAsBhE,UACjD6C,oBAAoBmB,sBAAsB,IAC3C;YACA,MAAMY,QAAQ,IAAIC,MAAM,UAAU;gBAAEC,SAAS;YAAK;YAElDrB,YAAYsB,OAAO,EAAEC,cAAcJ;QACrC;IACF,GAAG;QAACZ;KAAkB;IAEtB,MAAMiB,WAAWvH,MAAMwH,OAAO,CAAC;QAC7B,IAAI,CAACjG,QAAQE,MAAM,EAAE;YACnB,OAAO;QACT;QAEA,OAAOqF,wBAAwBV,YAAY7E,OAAO,CAACuF,oBAAoB,GAAGV;IAC5E,GAAG;QAAC7E;QAASuF;KAAoB;IAEjC,MAAMW,mBAAmBzH,MAAMwH,OAAO,CACpC,IACE,AAACnE,UACC+B,2BAA2B,KAC1BuB,CAAAA,iBAAiBe,SAAS,SACvBxG,MAAM,CAAC,uBAAuB,GAC9BA,MAAM,CAAC,yBAAyB,AAAD,KACrCkF,WACF;QAAChB;QAAwB/B;QAAQsD;KAAgB;IAGnD,MAAMgB,qBAAqB3H,MAAM4H,WAAW,CAAC;QAC3ClB,iBAAiB;IACnB,GAAG,EAAE;IAEL,MAAMmB,kBAAkB7H,MAAM4H,WAAW,CAAC,CAACE,OAAeC,SAAS,KAAK;QACtE,MAAMC,WAAWlC,aAAauB,OAAO;QACrC,MAAMhF,OAAO2F,WAAYA,SAAShE,QAAQ,CAAC8D,MAAM,GAAmB;QAEpE,IAAI,CAACzF,QAAQ,CAAC2F,UAAU;YACtB;QACF;QAEA,MAAMC,iBAAiBD,SAASE,YAAY;QAC5C,MAAMC,YAAYH,SAASG,SAAS;QACpC,MAAMC,UAAU/F,KAAKgG,SAAS;QAC9B,MAAMC,aAAajG,KAAK6F,YAAY;QAEpC,IAAIH,QAAQ;YACVC,SAASG,SAAS,GAAGC,UAAUH,iBAAiB,IAAIK,aAAa;QACnE,OAAO,IAAIF,UAAUE,aAAaL,iBAAiBE,WAAW;YAC5DH,SAASG,SAAS,GAAGC,UAAUH,iBAAiBK;QAClD,OAAO,IAAIF,UAAUD,WAAW;YAC9BH,SAASG,SAAS,GAAGC;QACvB;IACF,GAAG,EAAE;IAEL,MAAMG,eAAevI,MAAM4H,WAAW,CACpC,CAACE;QACC,OAAOA,SAAS,KAAKA,QAASvG,CAAAA,QAAQE,MAAM,IAAI,CAAA;IAClD,GACA;QAACF,QAAQE,MAAM;KAAC;IAGlB,MAAM+G,qBAAqBxI,MAAM4H,WAAW,CAC1C,CAACE,OAA2BW,WAAW,IAAI;QACzC,IAAIX,UAAU1B,aAAa0B,QAAQ,KAAKA,QAAQ,AAACvG,CAAAA,QAAQE,MAAM,IAAI,CAAA,IAAK,GAAG;YACzE;QACF;QAEA,MAAME,SAASJ,OAAO,CAACuG,MAAM;QAE7B,IAAInG,QAAQE,UAAU;YACpB;QACF;QAEA,IAAI4G,UAAU;YACZZ,gBAAgBC;QAClB;QAEA,mDAAmD;QACnD7B,sBAAsB,CAACD,qBACrBA,uBAAuB8B,QAAQA,QAAQ9B;IAE3C,GACA;QAACzE;QAASsG;KAAgB;IAG5B,MAAMa,kBAAkB1I,MAAM4H,WAAW,CAAC;QACxC,OAAO9B,aAAauB,OAAO,KAAK;IAClC,GAAG,EAAE;IAEL,MAAMsB,kBAAkB3I,MAAM4H,WAAW,CACvC,CAACgB;QACC9C,aAAauB,OAAO,GAAGuB;QAEvB,IAAIA,OAAO9B,wBAAwBV,aAAamC,aAAazB,sBAAsB;YACjF;gBACEe,gBAAgBf,qBAAqB;YACvC;QACF;IACF,GACA;QAACyB;QAAcV;QAAiBf;KAAoB;IAGtD,MAAM+B,kBAAkB7I,MAAM4H,WAAW,CACvC,CAACkB;QACC,MAAMC,YAAYtC,gBAAgBqC;QAElC,MAAME,cAAczH,QAAQG,SAAS,CAAC,CAACC;YACrC,OAAOlB,qBAAqBkB,OAAOsH,KAAK,EAAEC,WAAW,GAAGxB,QAAQ,CAACqB;QACnE;QAEA,IAAIC,gBAAgB5C,aAAa4C,cAAc,CAAC,GAAG;YACjDR,mBAAmBQ;QACrB;QAEAtC,iBAAiBqC;IACnB,GACA;QAACP;QAAoB/B;QAAelF;KAAQ;IAG9C;;;GAGC,GACD,MAAM4H,QAAQnJ,MAAM4H,WAAW,CAAC;QAC9BD;QAEAtB,cAAc;QACd/C,UAAU;QACV2C,sBAAsB,CAAC;QACvB5B;IACF,GAAG;QAACA;QAASsD;KAAmB;IAEhC,MAAMyB,eAAepJ,MAAM4H,WAAW,CACpC,CAACE;QACC,MAAMzF,OAAOd,OAAO,CAACuG,MAAM;QAE3BvB,qBAAqBlE,MAAMC;QAC3B6G;QAEA,MAAME,8DACJnD,uBACAzD,MAAMH,KAAK,KAAKgE,qBAChBA,sBAAsBjE,MAAMC;QAE9B,IAAI+G,6DAA6D;YAC/D,MAAMnC,QAAQ,IAAIC,MAAM,UAAU;gBAAEC,SAAS;YAAK;YAClDrB,YAAYsB,OAAO,EAAEC,cAAcJ;QACrC;IACF,GACA;QAACiC;QAAO5H;QAASwE;QAAaG;QAAqBzD,MAAMH,KAAK;QAAEgE;KAAkB;IAGpF,MAAMgD,gBAAgBtJ,MAAM4H,WAAW,CAAC;QACtC,IAAI5B,uBAAuBI,aAAa,CAACmC,aAAavC,qBAAqB;YACzE;QACF;QAEAoD,aAAapD;IACf,GAAG;QAACA;QAAoBuC;QAAca;KAAa;IAEnD,MAAMG,OAAOvJ,MAAM4H,WAAW,CAAC;QAC7BtE,UAAU;QACV2C,sBAAsBa;QAEtB,IAAI,OAAO1C,WAAW,YAAY;YAChCA;QACF;IACF,GAAG;QAACA;QAAQ0C;KAAoB;IAEhC,MAAM0C,SAASxJ,MAAM4H,WAAW,CAAC;QAC/BuB;QACA,MAAMjC,QAAQ,IAAIC,MAAM;QACxBpB,YAAYsB,OAAO,EAAEC,cAAcJ;IACrC,GAAG;QAACiC;QAAOpD;KAAY;IAEvB,MAAM0D,qBAAqBzJ,MAAM4H,WAAW,CAAC;QAC3C3B,sBAAsB,CAAC;IACzB,GAAG,EAAE;IAEL,MAAMyD,UAAU1J,MAAM4H,WAAW,CAAC;QAChC,MAAMV,QAAQ,IAAIC,MAAM;QACxBpB,YAAYsB,OAAO,EAAEC,cAAcJ;IACrC,GAAG;QAACnB;KAAY;IAEhB,MAAM4D,UAAU3J,MAAM4H,WAAW,CAAC;QAChC,IAAIvE,QAAQ;YACV8F;QACF,OAAO;YACLI;QACF;IACF,GAAG;QAACJ;QAAOI;QAAMlG;KAAO;IAExB,MAAMuG,cAAc5J,MAAMwH,OAAO,CAAC,IAAMhH,SAASmH,oBAAoB,OAAO;QAACA;KAAmB;IAEhG,MAAMkC,cAAc7J,MAAM4H,WAAW,CACnC,CAACkC;QACC,IAAIhC,QAAQ9B;QAEZ,IAAI8D,SAAS,QAAQ;YACnB,MAAMC,YAAYzI,eAAeC,SAASuG;YAC1CA,QAAQiC,cAAc,CAAC,IAAIzI,eAAeC,WAAWwI,WAAW,kDAAkD;QACpH,OAAO,IAAID,SAAS,QAAQ;YAC1B,MAAME,cAAclI,gBAAgBP,SAASuG;YAC7CA,QAAQkC,gBAAgB,CAAC,IAAIlI,gBAAgBP,WAAWyI,aAAa,0DAA0D;QACjI;QAEAxB,mBAAmBV;IACrB,GACA;QAACU;QAAoBxC;QAAoBzE;KAAQ;IAGnDvB,MAAMgH,SAAS,CACb,SAASiD;QACP,MAAM3H,QAAQG,MAAMH,KAAK,IAAIgE,qBAAqB7D,MAAM+D,YAAY;QAEpE,MAAMjF,UACJoD,cAAc1B,eAAemD,YACzBpD,OAAO8B,aAAa7B,YAAYC,YAChC4B;QAEN+B,WAAWtF;QACXwF,uBAAuBlE,kBAAkBtB,SAASe,OAAO6C;IAC3D,GACA;QACEjC;QACAD;QACAqD;QACAxB;QACArC,MAAM+D,YAAY;QAClB/D,MAAMH,KAAK;QACXqC;QACAQ;KACD;IAGH;;;GAGC,GACD,MAAM+E,eAAelK,MAAM4H,WAAW,CAAC,CAACjF;QACtC,IAAImD,aAAauB,OAAO,EAAE8C,SAASxH,EAAEyH,MAAM,GAAW;YACpDzH,EAAEC,cAAc;QAClB;IACF,GAAG,EAAE;IAEL,MAAMyH,uBAAoE,CAAC1H;QACzE,MAAM2H,yBAAyBzH,kBAC7BtB,SACAoB,EAAE4H,aAAa,CAACjI,KAAK,EACrB6C;QAGF,IAAI2B,wBAAwBwD,wBAAwB;YAClD,IAAI,CAACpE,qBAAqB;gBACxBa,uBAAuBuD;YACzB;YACAvG,WAAWpB;QACb;IACF;IAEA,MAAM6H,iBAA+DxK,MAAM4H,WAAW,CACpF,CAACV;QACC;YAAC;YAAW;YAAa;YAAU;SAAQ,CAACQ,QAAQ,CAACR,MAAM4B,GAAG,KAC5DJ,qBACAxB,MAAMtE,cAAc;QAEtB,OAAQsE,MAAM4B,GAAG;YACf,KAAK;gBACHJ,qBAAqBmB,YAAY;gBACjC;YACF,KAAK;gBACHnB,qBAAqBmB,YAAY;gBACjC;YACF,KAAK;gBACHV;gBACA;YACF,KAAK;gBACHT,qBAAqBY;gBACrB;QACJ;IACF,GACA;QAACZ;QAAiBS;QAAOU;QAAaP;KAAc;IAGtD,MAAMrF,gBAA4DjE,MAAM4H,WAAW,CACjF,CAACjF;QACC,2CAA2C;QAC3C,IAAIuB,mBAAmB;YACrB,MAAM3C,UAAU2C,kBAAkBvB,GAAGmC;YACrC,IAAIvD,SAAS;gBACX,IAAIgE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;oBAC1CxD,KACE,8EACE;gBAEN;gBACA4E,WAAWtF;gBACXwF,uBAAuBlE,kBAAkBtB,SAAS+E,mBAAmBnB;YACvE;QACF,OAAO;YACL,MAAM5D,UAAUyB,OAAO8B,aAAanC,EAAEyH,MAAM,CAAC9H,KAAK,EAAEY;YACpD2D,WAAWtF;YACXwF,uBAAuBlE,kBAAkBtB,SAAS+E,mBAAmBnB;QACvE;QACAkB,cAAc1D,EAAEyH,MAAM,CAAC9H,KAAK;IAC9B,GACA;QAACY;QAAUoD;QAAmBpC;QAAmBY;QAAaK;KAAiB;IAGjF,MAAMsF,sBAAsBzK,MAAM4H,WAAW,CAC3C,CAACV;QACC,IAAIA,MAAM4B,GAAG,CAACrH,MAAM,KAAK,KAAKyF,MAAM4B,GAAG,KAAK,KAAK;YAC/CD,gBAAgB3B,MAAM4B,GAAG;YACzB;QACF;QAEA;YAAC;YAAW;YAAa;YAAU;SAAQ,CAACpB,QAAQ,CAACR,MAAM4B,GAAG,KAC5DJ,qBACAxB,MAAMtE,cAAc;QAEtB,OAAQsE,MAAM4B,GAAG;YACf,KAAK;gBACH,IAAIzF,QAAQ;oBACVqF,qBAAqBmB,YAAY;gBACnC,OAAO;oBACLN;gBACF;gBACA;YACF,KAAK;gBACH,IAAIlG,QAAQ;oBACVqF,qBAAqBmB,YAAY;gBACnC,OAAO;oBACLN;gBACF;gBACA;YACF,KAAK;gBACHJ;gBACA;YACF,KAAK;YACL,KAAK;YACL,KAAK;gBACH,IAAI9F,QAAQ;oBACVqF,qBAAqBY;gBACvB,OAAO;oBACLC;gBACF;gBACA;QACJ;IACF,GACA;QAACb;QAAiBS;QAAOU;QAAahB;QAAiBU;QAAMlG;QAAQiG;KAAc;IAGrF,MAAMoB,oBAAoB1K,MAAM4H,WAAW,CACzC,CAACjF;QACC,MAAMmF,QAAQ6C,MAAMC,SAAS,CAACC,OAAO,CAACC,IAAI,CACxCnI,EAAE4H,aAAa,CAACQ,UAAU,EAAE/G,UAC5BrB,EAAE4H,aAAa;QAEjB,MAAM5I,SAASJ,OAAO,CAACuG,MAAM;QAE7B,IAAInG,UAAU,CAACA,OAAOE,QAAQ,EAAE;YAC9BuH,aAAatB;QACf;IACF,GACA;QAACvG;QAAS6H;KAAa;IAGzB,MAAM4B,oBAAoBhL,MAAM4H,WAAW,CACzC,CAACjF;QACC6F,mBACEmC,MAAMC,SAAS,CAACC,OAAO,CAACC,IAAI,CAACnI,EAAE4H,aAAa,CAACQ,UAAU,EAAE/G,UAAUrB,EAAE4H,aAAa,GAClF;IAEJ,GACA;QAAC/B;KAAmB;IAGtB,MAAM5D,eAAe5E,MAAM4H,WAAW,CACpC,CAACjG,QAAqCmG;QACpC,MAAMmD,UAAUnD,UAAU9B;QAC1B,MAAMuB,WAAWO,UAAUhB;QAE3B,qBACE,oBAAC9G,MAAMkL,QAAQ;YAACpC,KAAK,CAAC,EAAEnH,OAAOW,KAAK,CAAC,CAAC;WACnCuC,iBAAiB;YAChBlD;YACAsJ;YACAjH,UAAUrC,OAAOsH,KAAK;YACtB1B;YACA1F,UAAUF,OAAOE,QAAQ;YACzB8H,SAASe;YACTS,aAAazI;YACb,kDAAkD;YAClD,kHAAkH;YAClH,sGAAsG;YACtG,qHAAqH;YACrH,+BAA+B;YAC/B,0IAA0I;YAC1I,oDAAoD;YACpD,kGAAkG;YAClG0I,aAAaJ;QACf;IAGN,GACA;QACEhF;QACA0E;QACAM;QACAnG;QACAiC;KACD;IAGH,MAAMuE,kBAAkBrL,MAAMwH,OAAO,CAAC;QACpC,MAAM8D,yBACJ/J,SAASE,SAAS,IAChBF,QAAQa,GAAG,CAACwC,8BAEZ,oBAAC5D;YAAS0C,WAAWxC,MAAM,CAAC,sBAAsB;WAAG6D;QAGzD,IAAI,OAAOZ,mBAAmB,YAAY;YACxC,OAAOA,eAAe;gBAAEmH;YAAuB;QACjD,OAAO;YACL,OAAOA;QACT;IACF,GAAG;QAACvG;QAAWxD;QAAS4C;QAAgBS;KAAa;IAErD,MAAM2G,qBAAqBrF,uBAAuBzD,MAAMH,KAAK,KAAK;IAClE,MAAMkJ,uBAAuB,CAACtF,uBAAuBI,sBAAsB;IAC3E,MAAMmF,mBACJtG,oBAAoB,CAAC9B,UAAWkI,CAAAA,sBAAsBC,oBAAmB;IAE3E,MAAME,cAAc1L,MAAMwH,OAAO,CAAC;QAChC,IAAI,CAACiE,kBAAkB;YACrB,OAAO;QACT;QAEA,qBACE,oBAACvG;YACCxB,WAAWuB,aAAamB,YAAYlF,MAAM,CAAC,2BAA2B,GAAGkF;YACzEuD,SAAS,IAAMpD,qBAAqB;;IAG1C,GAAG;QAACkF;QAAkBvG;QAAaD;KAAS;IAE5C,MAAMD,OAAOhF,MAAMwH,OAAO,CAAC;QACzB,IAAIvC,aAAamB,WAAW;YAC1B,OAAOnB;QACT;QAEA,qBACE,oBAACpE;YACC6C,WAAW+H,mBAAmBvK,MAAM,CAAC,8BAA8B,GAAGkF;YACtE/C,QAAQA;;IAGd,GAAG;QAACoI;QAAkBxG;QAAU5B;KAAO;IAEvC,MAAMsI,aAAa,AAAC3G,CAAAA,QAAQyG,gBAAe,mBACzC,oBAACzL,MAAMkL,QAAQ,QACZQ,aACA1G;IAIL,qBACE,oBAACiE;QACCvF,WAAWzD,WACTiB,MAAM,CAAC,eAAe,EACtBwE,UAAUtF,SAASwL,OAAO,IAAIzK,eAAe,CAACuE,MAAM,EACpDhC;QAEFI,OAAOA;QACP8E,KAAK/C;QACL8D,SAASO;OAER7G,UAAUsB,2BACT,oBAAC7D;QACE,GAAGwE,SAAS;QACbuG,WAAAA;QACArC,QAAQA;QACR9F,WAAW+D;QACXnF,OAAOW;QACP6I,WAAWtB;QACXzG,UAAUE;QACV,kIAAkI;QAClI,4FAA4F;QAC5F,wGAAwG;QACxG0F,SAASlH,MAAMkH,OAAO;QACtBnG,QAAQA;QACRuI,OAAOJ;QACPK,MAAM1L,+BAA+BkE;uBAGvC,oBAACzD;QACE,GAAGuE,SAAS;QACb2G,eAAAA;QACAtC,SAASA;QACTmC,WAAWrB;QACXyB,SAAStC;QACTF,SAASA;QACTF,QAAQA;QACR9F,WAAW+D;QACXjE,QAAQA;QACRuI,OAAOJ;QACPnH,YAAYA;OAEX+C,UAAU0B,sBAGf,oBAACkD;QACCvD,KAAK7C;QACLtC,MAAMA;QACNM,UAAUsG;QACVb,QAAQ/G,MAAM+G,MAAM;QACpBE,SAASjH,MAAMiH,OAAO;QACtBC,SAASlH,MAAMkH,OAAO;QACtBrH,OAAOgE;QACP2F,eAAAA;QACAvI,WAAWxC,MAAM,CAAC,wBAAwB;OAEzCiE,kCAAoB,oBAACxD;QAAOmH,KAAI;QAAGxG,OAAM;QACzCwC,YAAY1C,GAAG,CAAC,CAACC,qBAChB,oBAACV;YAAOmH,KAAK,CAAC,EAAEzG,KAAKC,KAAK,CAAC,CAAC;YAAEA,OAAOD,KAAKC,KAAK;cAGlDe,wBACC,oBAAC1C;QACCyL,WAAWzG;QACX0G,WAAWxI;QACXiC,cAAc6C;QACd2D,mBAAmB1F;QACnB2F,cAAc9C;QACdnF,UAAUA;QACVkI,gBAAgBpH;QAChBqH,WAAWpH;QACXqH,aAAanI;QACbE,mBAAmBA;QACnBC,wBAAwBA;OAEvB2G;AAKX"}
1	+ {"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { defaultFilterFn, getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { debounce, getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { Input } from '../Input/Input';\nimport { NativeSelectProps } from '../NativeSelect/NativeSelect';\nimport { SelectType } from '../Select/Select';\nimport { SelectMimicry } from '../SelectMimicry/SelectMimicry';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { CustomSelectClearButton, CustomSelectClearButtonProps } from './CustomSelectClearButton';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelect--sizeY-none'],\n [SizeType.COMPACT]: styles['CustomSelect--sizeY-compact'],\n};\n\nconst findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex((option, i) => i > startIndex && !option.disabled);\n};\n\nconst findIndexBefore = (\n options: CustomSelectOptionInterface[] = [],\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 (!option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nconst warn = warnOnce('CustomSelect');\n\nconst checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {\n if (new Set(options.map((item) => typeof item.value)).size > 1) {\n warn(\n 'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',\n 'error',\n );\n }\n};\n\nfunction defaultRenderOptionFn({ option, ...props }: CustomSelectOptionProps): React.ReactNode {\n return <CustomSelectOption {...props} />;\n}\n\nconst handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n};\n\nfunction findSelectedIndex(\n options: CustomSelectOptionInterface[],\n value: SelectValue,\n withClear: boolean,\n) {\n if (withClear && value === '') {\n return -1;\n }\n return (\n options.findIndex((item) => {\n value = typeof item.value === 'number' ? Number(value) : value;\n return item.value === value;\n }) ?? -1\n );\n}\n\nconst filter = (\n options: SelectProps['options'],\n inputValue: string,\n filterFn: SelectProps['filterFn'],\n) => {\n return typeof filterFn === 'function'\n ? options.filter((option) => filterFn(inputValue, option))\n : options;\n};\n\nconst defaultOptions: CustomSelectOptionInterface[] = [];\n\ntype SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n\nexport interface CustomSelectOptionInterface {\n value: SelectValue;\n label: React.ReactElement \| string;\n disabled?: boolean;\n [index: string]: any;\n}\n\ninterface CustomSelectRenderOption extends CustomSelectOptionProps {\n option?: CustomSelectOptionInterface;\n}\n\nexport interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {\n /*\n Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n /\n searchable?: boolean;\n /\n Текст, который будет отображен, если приходит пустой `options`.\n /\n emptyText?: string;\n /\n > ⚠️ В v6 из возвращаемых типов будет удалён `CustomSelectOptionInterface[]`. Для кастомной фильтрации используйте\n * > `filterFn`.\n /\n onInputChange?: (\n e: React.ChangeEvent,\n options: CustomSelectOptionInterface[],\n ) => void \| CustomSelectOptionInterface[];\n options: CustomSelectOptionInterface[];\n /\n Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n /\n filterFn?:\n \| false\n \| ((\n value: string,\n option: CustomSelectOptionInterface,\n getOptionLabel?: (option: Partial<CustomSelectOptionInterface>) => string,\n ) => boolean);\n popupDirection?: 'top' \| 'bottom';\n /\n Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)\n \n > ⚠️ Важно: cвойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n * опции.\n /\n renderOption?: (props: CustomSelectRenderOption) => React.ReactNode;\n /\n Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.\n /\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /\n Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`\n * \"победит\" `renderDropdown`.\n /\n fetching?: boolean;\n onClose?: VoidFunction;\n onOpen?: VoidFunction;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n /\n ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;\n /\n Если `true`, то справа будет отображаться кнопка для очистки значения\n /\n allowClearButton?: boolean;\n dropdownOffsetDistance?: number;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n selectType?: SelectType;\n}\n\ntype MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;\n\n/\n @see https://vkcom.github.io/VKUI/#/CustomSelect\n /\nexport function CustomSelect(props: SelectProps) {\n const [opened, setOpened] = React.useState(false);\n const {\n before,\n name,\n className,\n getRef,\n getRootRef,\n popupDirection,\n style,\n onChange,\n children,\n onInputChange: onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n forceDropdownPortal,\n selectType = 'default',\n autoHideScrollbar,\n autoHideScrollbarDelay,\n searchable = false,\n renderOption: renderOptionProp = defaultRenderOptionFn,\n options: optionsProp = defaultOptions,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n icon: iconProp,\n ClearButton = CustomSelectClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n fixDropdownWidth = true,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(optionsProp);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const containerRef = React.useRef<HTMLLabelElement>(null);\n const handleRootRef = useExternRef(containerRef, getRootRef);\n const scrollBoxRef = React.useRef<HTMLDivElement \| null>(null);\n const selectElRef = useExternRef(getRef);\n\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number \| undefined>(-1);\n const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);\n const [inputValue, setInputValue] = React.useState('');\n const [nativeSelectValue, setNativeSelectValue] = React.useState(\n () => props.value ?? props.defaultValue ?? (allowClearButton ? '' : undefined),\n );\n const [keyboardInput, setKeyboardInput] = React.useState('');\n const [popperPlacement, setPopperPlacement] = React.useState<PlacementWithAuto \| undefined>(\n undefined,\n );\n const [options, setOptions] = React.useState(optionsProp);\n const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number \| undefined>(\n findSelectedIndex(optionsProp, props.value ?? props.defaultValue, allowClearButton),\n );\n\n React.useEffect(() => {\n setIsControlledOutside(props.value !== undefined);\n setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);\n }, [props.value]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n options.some(({ value }) => nativeSelectValue === value) \|\|\n (allowClearButton && nativeSelectValue === '')\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const selected = React.useMemo(() => {\n if (!options.length) {\n return null;\n }\n\n return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;\n }, [options, selectedOptionIndex]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement?.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down'])) \|\|\n undefined,\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const resetKeyboardInput = React.useCallback(() => {\n setKeyboardInput('');\n }, []);\n\n const scrollToElement = React.useCallback((index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = dropdown ? (dropdown.children[index] as HTMLElement) : null;\n\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 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 isValidIndex = React.useCallback(\n (index: number) => {\n return index >= 0 && index < (options.length ?? 0);\n },\n [options.length],\n );\n\n const focusOptionByIndex = React.useCallback(\n (index: number \| undefined, scrollTo = true) => {\n if (index === undefined \|\| index < 0 \|\| index > (options.length ?? 0) - 1) {\n return;\n }\n\n const option = options[index];\n\n if (option?.disabled) {\n return;\n }\n\n if (scrollTo) {\n scrollToElement(index);\n }\n\n // Это оптимизация, прежде всего, под `onMouseOver`\n setFocusedOptionIndex((focusedOptionIndex) =>\n focusedOptionIndex !== index ? index : focusedOptionIndex,\n );\n },\n [options, scrollToElement],\n );\n\n const areOptionsShown = React.useCallback(() => {\n return scrollBoxRef.current !== null;\n }, []);\n\n const setScrollBoxRef = React.useCallback(\n (ref: HTMLDivElement \| null) => {\n scrollBoxRef.current = ref;\n\n if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {\n {\n scrollToElement(selectedOptionIndex, true);\n }\n }\n },\n [isValidIndex, scrollToElement, selectedOptionIndex],\n );\n\n const onKeyboardInput = React.useCallback(\n (key: string) => {\n const fullInput = keyboardInput + key;\n\n const optionIndex = options.findIndex((option) => {\n return getTitleFromChildren(option.label).toLowerCase().includes(fullInput);\n });\n\n if (optionIndex !== undefined && optionIndex > -1) {\n focusOptionByIndex(optionIndex);\n }\n\n setKeyboardInput(fullInput);\n },\n [focusOptionByIndex, keyboardInput, options],\n );\n\n /\n Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.\n * Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.\n /\n const close = React.useCallback(() => {\n resetKeyboardInput();\n\n setInputValue('');\n setOpened(false);\n setFocusedOptionIndex(-1);\n onClose?.();\n }, [onClose, resetKeyboardInput]);\n\n const selectOption = React.useCallback(\n (index: number) => {\n const item = options[index];\n\n setNativeSelectValue(item?.value);\n close();\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside &&\n props.value !== nativeSelectValue &&\n nativeSelectValue === item?.value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n },\n [close, options, selectElRef, isControlledOutside, props.value, nativeSelectValue],\n );\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionIndex === undefined \|\| !isValidIndex(focusedOptionIndex)) {\n return;\n }\n\n selectOption(focusedOptionIndex);\n }, [focusedOptionIndex, isValidIndex, selectOption]);\n\n const open = React.useCallback(() => {\n setOpened(true);\n setFocusedOptionIndex(selectedOptionIndex);\n\n if (typeof onOpen === 'function') {\n onOpen();\n }\n }, [onOpen, selectedOptionIndex]);\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('blur');\n selectElRef.current?.dispatchEvent(event);\n }, [close, selectElRef]);\n\n const resetFocusedOption = React.useCallback(() => {\n setFocusedOptionIndex(-1);\n }, []);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focus');\n selectElRef.current?.dispatchEvent(event);\n }, [selectElRef]);\n\n const onClick = React.useCallback(() => {\n if (opened) {\n close();\n } else {\n open();\n }\n }, [close, open, opened]);\n\n const handleKeyUp = React.useMemo(() => debounce(resetKeyboardInput, 1000), [resetKeyboardInput]);\n\n const focusOption = React.useCallback(\n (type: 'next' \| 'prev') => {\n let index = focusedOptionIndex;\n\n if (type === 'next') {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === 'prev') {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index);\n },\n [focusOptionByIndex, focusedOptionIndex, options],\n );\n\n React.useEffect(\n function updateOptionsAndSelectedOptionIndex() {\n const value = props.value ?? nativeSelectValue ?? props.defaultValue;\n\n const options =\n searchable && inputValue !== undefined\n ? filter(optionsProp, inputValue, filterFn)\n : optionsProp;\n\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));\n },\n [\n filterFn,\n inputValue,\n nativeSelectValue,\n optionsProp,\n props.defaultValue,\n props.value,\n searchable,\n allowClearButton,\n ],\n );\n\n /\n Нужен для правильного поведения обработчика onClick на select. Фильтрует клики, которые были сделаны по\n * выпадающему списку.\n */\n const onLabelClick = React.useCallback((e: React.MouseEvent<HTMLLabelElement>) => {\n if (scrollBoxRef.current?.contains(e.target as Node)) {\n e.preventDefault();\n }\n }, []);\n\n const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const newSelectedOptionIndex = findSelectedIndex(\n options,\n e.currentTarget.value,\n allowClearButton,\n );\n\n if (selectedOptionIndex !== newSelectedOptionIndex) {\n if (!isControlledOutside) {\n setSelectedOptionIndex(newSelectedOptionIndex);\n }\n onChange?.(e);\n }\n };\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (event) => {\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n areOptionsShown() && focusOption('prev');\n break;\n case 'ArrowDown':\n areOptionsShown() && focusOption('next');\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n areOptionsShown() && selectFocused();\n break;\n }\n },\n [areOptionsShown, close, focusOption, selectFocused],\n );\n\n const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n // TODO [>=6]: удалить `onInputChangeProp`.\n if (onInputChangeProp) {\n const options = onInputChangeProp(e, optionsProp);\n if (options) {\n if (process.env.NODE_ENV === 'development') {\n warn(\n 'Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет ' +\n 'проигнорировано в v6.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn.',\n );\n }\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n } else {\n const options = filter(optionsProp, e.target.value, filterFn);\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n setInputValue(e.target.value);\n },\n [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],\n );\n\n const handleKeyDownSelect = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key.length === 1 && event.key !== ' ') {\n onKeyboardInput(event.key);\n return;\n }\n\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n if (opened) {\n areOptionsShown() && focusOption('prev');\n } else {\n open();\n }\n break;\n case 'ArrowDown':\n if (opened) {\n areOptionsShown() && focusOption('next');\n } else {\n open();\n }\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n case 'Spacebar':\n case ' ':\n if (opened) {\n areOptionsShown() && selectFocused();\n } else {\n open();\n }\n break;\n }\n },\n [areOptionsShown, close, focusOption, onKeyboardInput, open, opened, selectFocused],\n );\n\n const handleOptionClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n const index = Array.prototype.indexOf.call(\n e.currentTarget.parentNode?.children,\n e.currentTarget,\n );\n const option = options[index];\n\n if (option && !option.disabled) {\n selectOption(index);\n }\n },\n [options, selectOption],\n );\n\n const handleOptionHover = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n focusOptionByIndex(\n Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget),\n false,\n );\n },\n [focusOptionByIndex],\n );\n\n const renderOption = React.useCallback(\n (option: CustomSelectOptionInterface, index: number) => {\n const hovered = index === focusedOptionIndex;\n const selected = index === selectedOptionIndex;\n\n return (\n <React.Fragment key={`${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: handleOptionDown,\n // Используем `onMouseOver` вместо `onMouseEnter`.\n // При параметре `searchable`, обновляется \"ребёнок\", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:\n // 1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.\n // > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.\n // 2. Если это тач-устройство.\n // > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,\n // но не на тот, на который нажали в первый раз.\n // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744\n onMouseOver: handleOptionHover,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionIndex,\n handleOptionClick,\n handleOptionHover,\n renderOptionProp,\n selectedOptionIndex,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n options?.length > 0 ? (\n options.map(renderOption)\n ) : (\n <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, options, renderDropdown, renderOption]);\n\n const controlledValueSet = isControlledOutside && props.value !== '';\n const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';\n const clearButtonShown =\n allowClearButton && !opened && (controlledValueSet \|\| uncontrolledValueSet);\n\n const clearButton = React.useMemo(() => {\n if (!clearButtonShown) {\n return null;\n }\n\n return (\n <ClearButton\n className={iconProp === undefined ? styles['CustomSelect--clear-icon'] : undefined}\n onClick={() => setNativeSelectValue('')}\n />\n );\n }, [clearButtonShown, ClearButton, iconProp]);\n\n const icon = React.useMemo(() => {\n if (iconProp !== undefined) {\n return iconProp;\n }\n\n return (\n <DropdownIcon\n className={clearButtonShown ? styles['CustomSelect__dropdown-icon'] : undefined}\n opened={opened}\n />\n );\n }, [clearButtonShown, iconProp, opened]);\n\n const afterIcons = (icon \|\| clearButtonShown) && (\n <React.Fragment>\n {clearButton}\n {icon}\n </React.Fragment>\n );\n\n return (\n <label\n className={classNames(\n styles['CustomSelect'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n ref={handleRootRef}\n onClick={onLabelClick}\n >\n {opened && searchable ? (\n <Input\n {...restProps}\n autoFocus\n onBlur={onBlur}\n className={openedClassNames}\n value={inputValue}\n onKeyDown={onInputKeyDown}\n onChange={onInputChange}\n // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.\n // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.\n // @ts-expect-error: TS2322 MouseEventHandler<HTMLSelectElement> !== MouseEventHandler<HTMLInputElement>\n onClick={props.onClick}\n before={before}\n after={afterIcons}\n mode={getFormFieldModeFromSelectType(selectType)}\n />\n ) : (\n <SelectMimicry\n {...restProps}\n aria-hidden\n onClick={onClick}\n onKeyDown={handleKeyDownSelect}\n onKeyUp={handleKeyUp}\n onFocus={onFocus}\n onBlur={onBlur}\n className={openedClassNames}\n before={before}\n after={afterIcons}\n selectType={selectType}\n >\n {selected?.label}\n </SelectMimicry>\n )}\n <select\n ref={selectElRef}\n name={name}\n onChange={onNativeSelectChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onClick={props.onClick}\n value={nativeSelectValue}\n aria-hidden\n className={styles['CustomSelect__control']}\n >\n {allowClearButton && <option key=\"\" value=\"\" />}\n {optionsProp.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </select>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popupDirection}\n scrollBoxRef={setScrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetFocusedOption}\n fetching={fetching}\n offsetDistance={dropdownOffsetDistance}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </label>\n );\n}\n"],"names":["React","classNames","useAdaptivity","useExternRef","SizeType","defaultFilterFn","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","debounce","getTitleFromChildren","warnOnce","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Input","SelectMimicry","Footnote","CustomSelectClearButton","styles","sizeYClassNames","none","COMPACT","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","warn","checkOptionsValueType","Set","map","item","value","size","defaultRenderOptionFn","props","handleOptionDown","e","preventDefault","findSelectedIndex","withClear","Number","filter","inputValue","filterFn","defaultOptions","CustomSelect","opened","setOpened","useState","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOption","renderOptionProp","optionsProp","emptyText","icon","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","restProps","process","env","NODE_ENV","sizeY","containerRef","useRef","handleRootRef","scrollBoxRef","selectElRef","focusedOptionIndex","setFocusedOptionIndex","isControlledOutside","setIsControlledOutside","undefined","setInputValue","nativeSelectValue","setNativeSelectValue","defaultValue","keyboardInput","setKeyboardInput","popperPlacement","setPopperPlacement","setOptions","selectedOptionIndex","setSelectedOptionIndex","useEffect","some","event","Event","bubbles","current","dispatchEvent","selected","useMemo","openedClassNames","includes","resetKeyboardInput","useCallback","scrollToElement","index","center","dropdown","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","isValidIndex","focusOptionByIndex","scrollTo","areOptionsShown","setScrollBoxRef","ref","onKeyboardInput","key","fullInput","optionIndex","label","toLowerCase","close","selectOption","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","open","onBlur","resetFocusedOption","onFocus","onClick","handleKeyUp","focusOption","type","nextIndex","beforeIndex","updateOptionsAndSelectedOptionIndex","onLabelClick","contains","target","onNativeSelectChange","newSelectedOptionIndex","currentTarget","onInputKeyDown","handleKeyDownSelect","handleOptionClick","Array","prototype","indexOf","call","parentNode","handleOptionHover","hovered","Fragment","onMouseDown","onMouseOver","resolvedContent","defaultDropdownContent","controlledValueSet","uncontrolledValueSet","clearButtonShown","clearButton","afterIcons","REGULAR","autoFocus","onKeyDown","after","mode","aria-hidden","onKeyUp","select","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","sameWidth","forcePortal"],"mappings":"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"}

package/dist/cssm/components/CustomSelectOption/CustomSelectOption.module.css CHANGED Viewed

@@ -5,7 +5,6 @@
   position: relative;
   box-sizing: border-box;
   padding: 8px 12px;
-  white-space: nowrap;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -55,8 +54,6 @@
 .CustomSelectOption__children {
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 .CustomSelectOption__after {
@@ -68,8 +65,6 @@
 .CustomSelectOption__description {
   color: var(--vkui--color_text_secondary);
-  text-overflow: ellipsis;
-  overflow: hidden;
 }
 .CustomSelectOption__selectedIcon {

package/dist/cssm/components/FormLayout/FormLayout.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HasComponent, HasRef } from '../../types';
-export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> & HasRef<HTMLElement> & HasComponent;
+import { HasComponent, HasRef, HasRootRef } from '../../types';
+export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> & HasRef<HTMLElement> & HasRootRef<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout
  */
-export declare const FormLayout: ({ children, Component, getRef, onSubmit, className, ...restProps }: FormLayoutProps) => React.JSX.Element;
+export declare const FormLayout: ({ children, Component, getRef, getRootRef, onSubmit, className, ...restProps }: FormLayoutProps) => React.JSX.Element;
 //# sourceMappingURL=FormLayout.d.ts.map

package/dist/cssm/components/FormLayout/FormLayout.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAE~~/B,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;~~AAKnD~~,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAChE,MAAM,CAAC,WAAW,CAAC,GACnB,YAAY,CAAC;AAEf;;GAEG;AACH,eAAO,MAAM,UAAU,~~uEAOpB~~,eAAe,~~sBAcjB~~,CAAC"}
1	+ {"version":3,"file":"FormLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK/D,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAChE,MAAM,CAAC,WAAW,CAAC,GACnB,UAAU,CAAC,WAAW,CAAC,GACvB,YAAY,CAAC;AAEf;;GAEG;AACH,eAAO,MAAM,UAAU,mFAQpB,eAAe,sBAgBjB,CAAC"}

package/dist/cssm/components/FormLayout/FormLayout.js CHANGED Viewed

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
 import styles from './FormLayout.module.css';
 const preventDefault = (e)=>e.preventDefault();
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout
- */ export const FormLayout = ({ children, Component = 'form', getRef, onSubmit = preventDefault, className, ...restProps })=>{
+ */ export const FormLayout = ({ children, Component = 'form', getRef, getRootRef, onSubmit = preventDefault, className, ...restProps })=>{
+    const formLayoutRef = useExternRef(getRef, getRootRef);
     return /*#__PURE__*/ React.createElement(Component, {
         ...restProps,
         className: classNames(styles['FormLayout'], className),
         onSubmit: onSubmit,
-        ref: getRef
+        ref: formLayoutRef
     }, children, Component === 'form' && /*#__PURE__*/ React.createElement("input", {
         type: "submit",
         className: styles['FormLayout__submit'],

package/dist/cssm/components/FormLayout/FormLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n HasRef<HTMLElement> &\n HasComponent;\n\n/*\n @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n children,\n Component = 'form',\n getRef,\n onSubmit = preventDefault,\n className,\n ...restProps\n}: FormLayoutProps) => {\n return (\n <Component\n {...restProps}\n className={classNames(styles['FormLayout'], className)}\n onSubmit={onSubmit}\n ref={~~getRef~~}\n >\n {children}\n {Component === 'form' && (\n <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n )}\n </Component>\n );\n};\n"],"names":["React","classNames","styles","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps","ref","input","type","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;~~AAE7C~~,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,iBAAiB,CAACC,IAAuBA,EAAED,cAAc;~~AAM~~/D;;CAEC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAM,EACNC,~~WAAWN~~,cAAc,~~EACzBO~~,SAAS,EACT,GAAGC,WACa;IAChB,qBACE,~~oBAACJ~~;QACE,~~GAAGI~~,SAAS;QACbD,~~WAAWT~~,~~WAAWC~~,MAAM,CAAC,aAAa,~~EAAEQ~~;QAC5CD,UAAUA;~~QACVG~~,~~KAAKJ~~;~~OAEJF~~,UACAC,cAAc,wBACb,~~oBAACM~~;QAAMC,MAAK;~~QAASJ~~,~~WAAWR~~,MAAM,CAAC,qBAAqB;~~QAAEa~~,OAAM;;AAI5E,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n HasRef<HTMLElement> &\n HasRootRef<HTMLElement> &\n HasComponent;\n\n/*\n @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n children,\n Component = 'form',\n getRef, // TOOD [>=6]: remove\n getRootRef,\n onSubmit = preventDefault,\n className,\n ...restProps\n}: FormLayoutProps) => {\n const formLayoutRef = useExternRef(getRef, getRootRef);\n\n return (\n <Component\n {...restProps}\n className={classNames(styles['FormLayout'], className)}\n onSubmit={onSubmit}\n ref={formLayoutRef}\n >\n {children}\n {Component === 'form' && (\n <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n )}\n </Component>\n );\n};\n"],"names":["React","classNames","useExternRef","styles","preventDefault","e","FormLayout","children","Component","getRef","getRootRef","onSubmit","className","restProps","formLayoutRef","ref","input","type","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AAExD,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,iBAAiB,CAACC,IAAuBA,EAAED,cAAc;AAO/D;;CAEC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAM,EACNC,UAAU,EACVC,WAAWP,cAAc,EACzBQ,SAAS,EACT,GAAGC,WACa;IAChB,MAAMC,gBAAgBZ,aAAaO,QAAQC;IAE3C,qBACE,oBAACF;QACE,GAAGK,SAAS;QACbD,WAAWX,WAAWE,MAAM,CAAC,aAAa,EAAES;QAC5CD,UAAUA;QACVI,KAAKD;OAEJP,UACAC,cAAc,wBACb,oBAACQ;QAAMC,MAAK;QAASL,WAAWT,MAAM,CAAC,qBAAqB;QAAEe,OAAM;;AAI5E,EAAE"}

package/dist/cssm/components/Gallery/Gallery.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAM~~/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;~~AAExD~~,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kFAQjB,YAAY,~~6BAyDd~~,CAAC"}
1	+ {"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kFAQjB,YAAY,6BAqDd,CAAC"}

package/dist/cssm/components/Gallery/Gallery.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { clamp } from '../../helpers/math';
 import { useIsClient } from '../../hooks/useIsClient';
-import { useTimeout } from '../../hooks/useTimeout';
 import { BaseGallery } from '../BaseGallery/BaseGallery';
 import { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';
+import { useAutoPlay } from './hooks';
 /**
  * @see https://vkcom.github.io/VKUI/#/Gallery
  */ export const Gallery = ({ initialSlideIndex = 0, children, timeout = 0, onChange, bullets, looped, ...props })=>{
@@ -27,12 +27,7 @@ import { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';
         onChange,
         slideIndex
     ]);
-    const autoplay = useTimeout(()=>handleChange((slideIndex + 1) % childCount), timeout);
-    React.useEffect(()=>timeout ? autoplay.set() : autoplay.clear(), [
-        timeout,
-        slideIndex,
-        autoplay
-    ]);
+    useAutoPlay(timeout, slideIndex, ()=>handleChange((slideIndex + 1) % childCount));
     // prevent invalid slideIndex
     // any slide index is invalid with no slides, just keep it as is
     const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;

package/dist/cssm/components/Gallery/Gallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { ~~useTimeout~~ } from '~~../../hooks~~/~~useTimeout~~';\nimport { ~~BaseGallery~~ } from '../BaseGallery/~~BaseGallery~~';\nimport { ~~CarouselBase~~ } from '../BaseGallery/~~CarouselBase/CarouselBase~~';\nimport { ~~BaseGalleryProps~~ } from '~~../BaseGallery/types~~';\n\nexport interface GalleryProps extends BaseGalleryProps {\n initialSlideIndex?: number;\n timeout?: number;\n // Отвечает за зацикливание слайдов\n looped?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n initialSlideIndex = 0,\n children,\n timeout = 0,\n onChange,\n bullets,\n looped,\n ...props\n}: GalleryProps) => {\n const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n const isControlled = typeof props.slideIndex === 'number';\n const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n const isDraggable = !isControlled \|\| Boolean(onChange);\n const slides = React.useMemo(\n () => React.Children.toArray(children).filter((item) => Boolean(item)),\n [children],\n );\n const childCount = slides.length;\n const isClient = useIsClient();\n\n const handleChange: GalleryProps['onChange'] = React.useCallback(\n (current: number) => {\n if (current === slideIndex) {\n return;\n }\n !isControlled && setSlideIndex(current);\n onChange && onChange(current);\n },\n [isControlled, onChange, slideIndex],\n );\n\n ~~const~~ ~~autoplay~~ ~~= useTimeout~~(() => handleChange((slideIndex + 1) % childCount)~~, timeout~~);\n ~~React.useEffect(~~\n ~~() => (timeout ? autoplay.set() : autoplay.clear()),\n [timeout, slideIndex, autoplay],\n~~ ~~);\n\n~~ // prevent invalid slideIndex\n // any slide index is invalid with no slides, just keep it as is\n const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n // notify parent in controlled mode\n React.useEffect(() => {\n if (onChange && safeSlideIndex !== slideIndex) {\n onChange(safeSlideIndex);\n }\n setSlideIndex(safeSlideIndex);\n }, [onChange, safeSlideIndex, slideIndex]);\n\n if (!isClient) {\n return null;\n }\n\n const Component = looped ? CarouselBase : BaseGallery;\n\n return (\n <Component\n isDraggable={isDraggable}\n {...props}\n bullets={childCount > 0 && bullets}\n slideIndex={safeSlideIndex}\n onChange={handleChange}\n >\n {slides}\n </Component>\n );\n};\n"],"names":["React","clamp","useIsClient","~~useTimeout~~","~~BaseGallery~~","~~CarouselBase~~","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","isClient","handleChange","useCallback","current","~~autoplay~~","useEffect","~~set","clear","safeSlideIndex","~~Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,~~UAAU~~,QAAQ,~~yBAAyB~~;~~AACpD~~,SAASC,~~WAAW~~,QAAQ,~~6BAA6B~~;~~AACzD~~,SAASC,~~YAAY~~,QAAQ,~~2CAA2C~~;~~AAUxE~~;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACN,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGf,MAAMgB,QAAQ,CAACT;IACxD,MAAMU,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,UAAU,IAAI,IAAIJ;IAC1D,MAAMK,cAAc,CAACF,gBAAgBG,QAAQV;IAC7C,MAAMW,SAASrB,MAAMsB,OAAO,CAC1B,IAAMtB,MAAMuB,QAAQ,CAACC,OAAO,CAAChB,UAAUiB,MAAM,CAAC,CAACC,OAASN,QAAQM,QAChE;QAAClB;KAAS;IAEZ,MAAMmB,aAAaN,OAAOO,MAAM;IAChC,MAAMC,WAAW3B;IAEjB,MAAM4B,eAAyC9B,MAAM+B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYd,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAciB;QAC/BtB,YAAYA,SAASsB;IACvB,GACA;QAACf;QAAcP;QAAUQ;KAAW;~~IAGtC~~,~~MAAMe~~,~~WAAW9B~~,~~WAAW~~,~~IAAM2B~~,aAAa,AAACZ,CAAAA,aAAa,CAAA,IAAKS~~,aAAalB~~;~~IAC/ET~~,~~MAAMkC,SAAS,CACb,IAAOzB,UAAUwB,SAASE,GAAG,KAAKF,SAASG,KAAK,IAChD;QAAC3B;QAASS;QAAYe;KAAS;IAGjC,~~6BAA6B;IAC7B,gEAAgE;IAChE,~~MAAMI~~,~~iBAAiBV~~,aAAa,IAAI1B,MAAMiB,YAAY,GAAGS,aAAa,KAAKT;IAC/E,mCAAmC;IACnClB,MAAMkC,SAAS,CAAC;QACd,IAAIxB,~~YAAY2B~~,~~mBAAmBnB~~,YAAY;YAC7CR,~~SAAS2B~~;QACX;~~QACAtB~~,~~cAAcsB~~;IAChB,GAAG;~~QAAC3B~~;~~QAAU2B~~;~~QAAgBnB~~;KAAW;IAEzC,IAAI,CAACW,UAAU;QACb,OAAO;IACT;IAEA,~~MAAMS~~,~~YAAY1B~~,~~SAASP~~,eAAeD;IAE1C,qBACE,~~oBAACkC~~;~~QACCnB~~,aAAaA;QACZ,GAAGN,KAAK;QACTF,SAASgB,aAAa,KAAKhB;QAC3BO,~~YAAYmB~~;~~QACZ3B~~,UAAUoB;OAETT;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n initialSlideIndex?: number;\n timeout?: number;\n // Отвечает за зацикливание слайдов\n looped?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n initialSlideIndex = 0,\n children,\n timeout = 0,\n onChange,\n bullets,\n looped,\n ...props\n}: GalleryProps) => {\n const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n const isControlled = typeof props.slideIndex === 'number';\n const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n const isDraggable = !isControlled \|\| Boolean(onChange);\n const slides = React.useMemo(\n () => React.Children.toArray(children).filter((item) => Boolean(item)),\n [children],\n );\n const childCount = slides.length;\n const isClient = useIsClient();\n\n const handleChange: GalleryProps['onChange'] = React.useCallback(\n (current: number) => {\n if (current === slideIndex) {\n return;\n }\n !isControlled && setSlideIndex(current);\n onChange && onChange(current);\n },\n [isControlled, onChange, slideIndex],\n );\n\n useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));\n\n // prevent invalid slideIndex\n // any slide index is invalid with no slides, just keep it as is\n const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n // notify parent in controlled mode\n React.useEffect(() => {\n if (onChange && safeSlideIndex !== slideIndex) {\n onChange(safeSlideIndex);\n }\n setSlideIndex(safeSlideIndex);\n }, [onChange, safeSlideIndex, slideIndex]);\n\n if (!isClient) {\n return null;\n }\n\n const Component = looped ? CarouselBase : BaseGallery;\n\n return (\n <Component\n isDraggable={isDraggable}\n {...props}\n bullets={childCount > 0 && bullets}\n slideIndex={safeSlideIndex}\n onChange={handleChange}\n >\n {slides}\n </Component>\n );\n};\n"],"names":["React","clamp","useIsClient","BaseGallery","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","isClient","handleChange","useCallback","current","safeSlideIndex","useEffect","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,YAAY,QAAQ,2CAA2C;AAExE,SAASC,WAAW,QAAQ,UAAU;AAStC;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACN,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGf,MAAMgB,QAAQ,CAACT;IACxD,MAAMU,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,UAAU,IAAI,IAAIJ;IAC1D,MAAMK,cAAc,CAACF,gBAAgBG,QAAQV;IAC7C,MAAMW,SAASrB,MAAMsB,OAAO,CAC1B,IAAMtB,MAAMuB,QAAQ,CAACC,OAAO,CAAChB,UAAUiB,MAAM,CAAC,CAACC,OAASN,QAAQM,QAChE;QAAClB;KAAS;IAEZ,MAAMmB,aAAaN,OAAOO,MAAM;IAChC,MAAMC,WAAW3B;IAEjB,MAAM4B,eAAyC9B,MAAM+B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYd,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAciB;QAC/BtB,YAAYA,SAASsB;IACvB,GACA;QAACf;QAAcP;QAAUQ;KAAW;IAGtCb,YAAYI,SAASS,YAAY,IAAMY,aAAa,AAACZ,CAAAA,aAAa,CAAA,IAAKS;IAEvE,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMM,iBAAiBN,aAAa,IAAI1B,MAAMiB,YAAY,GAAGS,aAAa,KAAKT;IAC/E,mCAAmC;IACnClB,MAAMkC,SAAS,CAAC;QACd,IAAIxB,YAAYuB,mBAAmBf,YAAY;YAC7CR,SAASuB;QACX;QACAlB,cAAckB;IAChB,GAAG;QAACvB;QAAUuB;QAAgBf;KAAW;IAEzC,IAAI,CAACW,UAAU;QACb,OAAO;IACT;IAEA,MAAMM,YAAYvB,SAASR,eAAeD;IAE1C,qBACE,oBAACgC;QACChB,aAAaA;QACZ,GAAGN,KAAK;QACTF,SAASgB,aAAa,KAAKhB;QAC3BO,YAAYe;QACZvB,UAAUoB;OAETT;AAGP,EAAE"}

package/dist/cssm/components/Gallery/hooks.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction): void;
2	+ //# sourceMappingURL=hooks.d.ts.map

package/dist/cssm/components/Gallery/hooks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/hooks.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,QAkCxF"}

package/dist/cssm/components/Gallery/hooks.js ADDED Viewed

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useDOM } from '../../lib/dom';
+export function useAutoPlay(timeout, slideIndex, callbackFn) {
+    const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);
+    const { document } = useDOM();
+    React.useEffect(()=>timeout ? setAutoPlay() : clearAutoPlay(), [
+        timeout,
+        slideIndex,
+        clearAutoPlay,
+        setAutoPlay
+    ]);
+    // Отключаем прокрутку слайдов при неактивной вкладке
+    React.useEffect(function preventSlideChange() {
+        if (!document || !timeout) {
+            return;
+        }
+        const changeAutoPlay = ()=>{
+            if (document.visibilityState === 'visible') {
+                clearAutoPlay();
+                setAutoPlay();
+            }
+            if (document.visibilityState === 'hidden') {
+                clearAutoPlay();
+            }
+        };
+        document.addEventListener('visibilitychange', changeAutoPlay);
+        return ()=>{
+            document.removeEventListener('visibilitychange', changeAutoPlay);
+        };
+    }, [
+        document,
+        timeout,
+        clearAutoPlay,
+        setAutoPlay
+    ]);
+}
+//# sourceMappingURL=hooks.js.map

package/dist/cssm/components/Gallery/hooks.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/Gallery/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\n\nexport function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction) {\n const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);\n const { document } = useDOM();\n\n React.useEffect(\n () => (timeout ? setAutoPlay() : clearAutoPlay()),\n [timeout, slideIndex, clearAutoPlay, setAutoPlay],\n );\n\n // Отключаем прокрутку слайдов при неактивной вкладке\n React.useEffect(\n function preventSlideChange() {\n if (!document || !timeout) {\n return;\n }\n\n const changeAutoPlay = () => {\n if (document.visibilityState === 'visible') {\n clearAutoPlay();\n setAutoPlay();\n }\n if (document.visibilityState === 'hidden') {\n clearAutoPlay();\n }\n };\n\n document.addEventListener('visibilitychange', changeAutoPlay);\n\n return () => {\n document.removeEventListener('visibilitychange', changeAutoPlay);\n };\n },\n [document, timeout, clearAutoPlay, setAutoPlay],\n );\n}\n"],"names":["React","useTimeout","useDOM","useAutoPlay","timeout","slideIndex","callbackFn","clear","clearAutoPlay","set","setAutoPlay","document","useEffect","preventSlideChange","changeAutoPlay","visibilityState","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,OAAO,SAASC,YAAYC,OAAe,EAAEC,UAAkB,EAAEC,UAAwB;IACvF,MAAM,EAAEC,OAAOC,aAAa,EAAEC,KAAKC,WAAW,EAAE,GAAGT,WAAWK,YAAYF;IAC1E,MAAM,EAAEO,QAAQ,EAAE,GAAGT;IAErBF,MAAMY,SAAS,CACb,IAAOR,UAAUM,gBAAgBF,iBACjC;QAACJ;QAASC;QAAYG;QAAeE;KAAY;IAGnD,qDAAqD;IACrDV,MAAMY,SAAS,CACb,SAASC;QACP,IAAI,CAACF,YAAY,CAACP,SAAS;YACzB;QACF;QAEA,MAAMU,iBAAiB;YACrB,IAAIH,SAASI,eAAe,KAAK,WAAW;gBAC1CP;gBACAE;YACF;YACA,IAAIC,SAASI,eAAe,KAAK,UAAU;gBACzCP;YACF;QACF;QAEAG,SAASK,gBAAgB,CAAC,oBAAoBF;QAE9C,OAAO;YACLH,SAASM,mBAAmB,CAAC,oBAAoBH;QACnD;IACF,GACA;QAACH;QAAUP;QAASI;QAAeE;KAAY;AAEnD"}

package/dist/cssm/components/Group/Group.module.css CHANGED Viewed

@@ -9,12 +9,12 @@
 }
 .Group--mode-plain:not(:first-of-type) > .Group__header {
-  margin-top: -16px;
+  margin-top: -8px;
 }
 @media (max-width: 767.9px) {
   .Group--sizeX-none.Group--mode-none:not(:first-of-type) > .Group__header {
-    margin-top: -16px;
+    margin-top: -8px;
   }
 }

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAM~~/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;~~AAoBhE~~,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;~~AAgFD~~;;GAEG;AACH,eAAO,MAAM,gBAAgB,0JAW1B,qBAAqB,~~sBA0IvB~~,CAAC"}
1	+ {"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBhE,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA2GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,0JAW1B,qBAAqB,sBA+IvB,CAAC"}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { useDirection } from '../../hooks/useDirection';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
@@ -12,28 +13,47 @@ import styles from './HorizontalScroll.module.css';
  */ function now() {
     return performance && performance.now ? performance.now() : Date.now();
 }
+/**
+ * Округление к большему по модулю
+ *
+ * ## Пример
+ *
+ * ```ts
+ * import { strict as assert } from 'node:assert';
+ *
+ * assert.equal(roundingAwayFromZero(5.1), 6)
+ * assert.equal(roundingAwayFromZero(-5.1), -6)
+ * ```
+ */ function roundingAwayFromZero(value) {
+    return value > 0 ? Math.ceil(value) : Math.floor(value);
+}
 /**
  * Округляем el.scrollLeft
  * https://github.com/VKCOM/VKUI/pull/2445
- */ const roundUpElementScrollLeft = (el)=>Math.ceil(el.scrollLeft);
+ */ const roundUpElementScrollLeft = (el)=>roundingAwayFromZero(el.scrollLeft);
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
  * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
  * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
  */ const SCROLL_ONE_FRAME_TIME = 250;
-function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollToRightBorder, onScrollEnd, onScrollStart, initialScrollWidth, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME }) {
+function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollToEndBorder, onScrollEnd, onScrollStart, initialScrollWidth, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, textDirection }) {
     if (!scrollElement || !getScrollPosition) {
         return;
     }
     /**
-   * максимальное значение сдвига влево
-   */ const maxLeft = initialScrollWidth - scrollElement.offsetWidth;
-    let startLeft = roundUpElementScrollLeft(scrollElement);
-    let endLeft = getScrollPosition(startLeft);
+   * крайнее значение сдвига
+   */ const extremeScrollLeft = (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
+    let startScrollLeft = roundUpElementScrollLeft(scrollElement);
+    let endScrollLeft = getScrollPosition(startScrollLeft);
     onScrollStart();
-    if (endLeft >= maxLeft) {
-        onScrollToRightBorder();
-        endLeft = maxLeft;
+    /**
+   * Если окончание прокрутки вышло за ноль
+   */ if (startScrollLeft * endScrollLeft < 0) {
+        endScrollLeft = 0;
+    }
+    if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {
+        onScrollToEndBorder();
+        endScrollLeft = extremeScrollLeft;
     }
     const startTime = now();
     (function scroll() {
@@ -44,9 +64,10 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         const time = now();
         const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
         const value = easeInOutSine(elapsed);
-        const currentLeft = startLeft + (endLeft - startLeft) * value;
-        scrollElement.scrollLeft = Math.ceil(currentLeft);
-        if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {
+        const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;
+        scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);
+        const scrollEnd = textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);
+        if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {
             requestAnimationFrame(scroll);
             return;
         }
@@ -62,8 +83,11 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
  */ export const HorizontalScroll = ({ children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'l', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, ...restProps })=>{
     const [canScrollLeft, setCanScrollLeft] = React.useState(false);
     const [canScrollRight, setCanScrollRight] = React.useState(false);
+    const [directionRef, textDirection = 'ltr'] = useDirection();
+    const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;
+    const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;
     const isCustomScrollingRef = React.useRef(false);
-    const scrollerRef = useExternRef(getRef);
+    const scrollerRef = useExternRef(getRef, directionRef);
     const animationQueue = React.useRef([]);
     const hasPointer = useAdaptivityHasPointer();
     const scrollTo = React.useCallback((getScrollPosition)=>{
@@ -72,18 +96,21 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
                 scrollElement,
                 getScrollPosition,
                 animationQueue: animationQueue.current,
-                onScrollToRightBorder: ()=>setCanScrollRight(false),
+                onScrollToEndBorder: ()=>setCanScrollEnd(false),
                 onScrollEnd: ()=>isCustomScrollingRef.current = false,
                 onScrollStart: ()=>isCustomScrollingRef.current = true,
                 initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,
-                scrollAnimationDuration
+                scrollAnimationDuration,
+                textDirection
             }));
         if (animationQueue.current.length === 1) {
             animationQueue.current[0]();
         }
     }, [
+        scrollerRef,
         scrollAnimationDuration,
-        scrollerRef
+        textDirection,
+        setCanScrollEnd
     ]);
     const scrollToLeft = React.useCallback(()=>{
         const getScrollPosition = getScrollToLeft ?? ((i)=>i - scrollerRef.current.offsetWidth);
@@ -104,13 +131,15 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     const calculateArrowsVisibility = React.useCallback(()=>{
         if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
             const scrollElement = scrollerRef.current;
-            setCanScrollLeft(scrollElement.scrollLeft > 0);
-            setCanScrollRight(roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth < scrollElement.scrollWidth);
+            setCanScrollStart(scrollElement.scrollLeft !== 0);
+            setCanScrollEnd(Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth < scrollElement.scrollWidth);
         }
     }, [
+        showArrows,
         hasPointer,
         scrollerRef,
-        showArrows
+        setCanScrollStart,
+        setCanScrollEnd
     ]);
     const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);
     React.useEffect(function addScrollerRefToScrollEvent() {