npm - @vkontakte/vkui - Versions diffs - 5.5.2 → 5.5.4 - Mend

@vkontakte/vkui 5.5.2 → 5.5.4

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 (111) hide show

package/dist/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 classNames(\n opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement?.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down']),\n ),\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 selectFocused = React.useCallback(() => {\n if (focusedOptionIndex !== undefined && isValidIndex(focusedOptionIndex)) {\n const item = options[focusedOptionIndex];\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 }, [\n close,\n focusedOptionIndex,\n isValidIndex,\n options,\n selectElRef,\n isControlledOutside,\n props.value,\n nativeSelectValue,\n ]);\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 selectFocused();\n }\n },\n [options, selectFocused],\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","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","useState","opened","setOpened","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOptionProp","renderOption","optionsProp","emptyText","icon","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","restProps","process","env","NODE_ENV","sizeY","containerRef","useRef","handleRootRef","scrollBoxRef","selectElRef","focusedOptionIndex","setFocusedOptionIndex","undefined","isControlledOutside","setIsControlledOutside","setInputValue","defaultValue","nativeSelectValue","setNativeSelectValue","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","selectFocused","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","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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"}
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 classNames(\n opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement?.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down']),\n ),\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","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","useState","opened","setOpened","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOptionProp","renderOption","optionsProp","emptyText","icon","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","restProps","process","env","NODE_ENV","sizeY","containerRef","useRef","handleRootRef","scrollBoxRef","selectElRef","focusedOptionIndex","setFocusedOptionIndex","undefined","isControlledOutside","setIsControlledOutside","setInputValue","defaultValue","nativeSelectValue","setNativeSelectValue","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/components/FixedLayout/FixedLayout.d.ts CHANGED Viewed

@@ -7,6 +7,11 @@ export interface FixedLayoutProps extends React.HTMLAttributes<HTMLDivElement>,
      * Это часто необходимо для фиксированных кнопок в нижней части экрана.
      */
     filled?: boolean;
+    /**
+     * Всегда соответствовать ширине родителя.
+     * Ширина пересчитывается по событию `window` `resize`.
+     */
+    useParentWidth?: boolean;
 }
 export interface FixedLayoutState {
     position: 'absolute' | null;
@@ -17,4 +22,4 @@ export interface FixedLayoutState {
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */
-export declare const FixedLayout: ({ children, style, vertical, getRootRef, getRef, filled, className, ...restProps }: FixedLayoutProps) => React.JSX.Element;
+export declare const FixedLayout: ({ children, style, vertical, getRootRef, getRef, filled, className, useParentWidth, ...restProps }: FixedLayoutProps) => React.JSX.Element;

package/dist/components/FixedLayout/FixedLayout.js CHANGED Viewed

@@ -14,14 +14,15 @@ import { TooltipContainer } from "../Tooltip/TooltipContainer";
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */ export var FixedLayout = function(_param) {
-    var children = _param.children, style = _param.style, vertical = _param.vertical, getRootRef = _param.getRootRef, getRef = _param.getRef, filled = _param.filled, className = _param.className, restProps = _object_without_properties(_param, [
+    var children = _param.children, style = _param.style, vertical = _param.vertical, getRootRef = _param.getRootRef, getRef = _param.getRef, filled = _param.filled, className = _param.className, useParentWidth = _param.useParentWidth, restProps = _object_without_properties(_param, [
         "children",
         "style",
         "vertical",
         "getRootRef",
         "getRef",
         "filled",
-        "className"
+        "className",
+        "useParentWidth"
     ]);
     var platform = usePlatform();
     var ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef
@@ -29,7 +30,11 @@ import { TooltipContainer } from "../Tooltip/TooltipContainer";
     var window = useDOM().window;
     var colRef = React.useContext(SplitColContext).colRef;
     var doResize = function() {
-        if (colRef === null || colRef === void 0 ? void 0 : colRef.current) {
+        if (useParentWidth && ref.current) {
+            var _ref_current_parentElement;
+            var parentWidth = (_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.getBoundingClientRect().width;
+            setWidth(parentWidth ? "".concat(parentWidth, "px") : undefined);
+        } else if (colRef === null || colRef === void 0 ? void 0 : colRef.current) {
             var computedStyle = getComputedStyle(colRef.current);
             setWidth("".concat(colRef.current.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight), "px"));
         } else {
@@ -38,7 +43,9 @@ import { TooltipContainer } from "../Tooltip/TooltipContainer";
     };
     React.useEffect(doResize, [
         colRef,
-        platform
+        platform,
+        ref,
+        useParentWidth
     ]);
     useGlobalEventListener(window, "resize", doResize);
     return /*#__PURE__*/ React.createElement(TooltipContainer, _object_spread_props(_object_spread({}, restProps), {

package/dist/components/FixedLayout/FixedLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n vertical?: 'top' \| 'bottom';\n /*\n Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n /\n filled?: boolean;\n}\n\nexport interface FixedLayoutState {\n position: 'absolute' \| null;\n top: number;\n bottom: number;\n width: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n children,\n style,\n vertical,\n getRootRef,\n getRef,\n filled,\n className,\n ...restProps\n}: FixedLayoutProps) => {\n const platform = usePlatform();\n const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n const [width, setWidth] = React.useState<string \| undefined>(undefined);\n const { window } = useDOM();\n const { colRef } = React.useContext(SplitColContext);\n const doResize = () => {\n if (colRef?.current) {\n const computedStyle = getComputedStyle(colRef.current);\n\n setWidth(\n `${\n colRef.current.clientWidth -\n parseFloat(computedStyle.paddingLeft) -\n parseFloat(computedStyle.paddingRight)\n }px`,\n );\n } else {\n setWidth(undefined);\n }\n };\n React.useEffect(doResize, [colRef, platform]);\n useGlobalEventListener(window, 'resize', doResize);\n\n return (\n <TooltipContainer\n {...restProps}\n fixed\n ref={ref}\n className={classNames(\n styles['FixedLayout'],\n platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n filled && styles['FixedLayout--filled'],\n vertical &&\n {\n top: styles['FixedLayout--vertical-top'],\n bottom: classNames(\n styles['FixedLayout--vertical-bottom'],\n 'vkuiInternalFixedLayout--vertical-bottom',\n ),\n }[vertical],\n className,\n )}\n style={{ ...style, width }}\n >\n {children}\n </TooltipContainer>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","useState","undefined","width","setWidth","window","colRef","useContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;~~AAsB~~/D;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,~~WACGC~~;~~QAPHP~~;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,~~WAAWd~~;IACjB,~~IAAMe~~,~~MAAMjB~~,aAAaW,YAAYC,SAAS,6BAA6B;IAC3E,IAA0Bd,mCAAAA,~~MAAMoB~~,SAA6BC,gBAAtDC,~~QAAmBtB~~,~~oBAAZuB~~,~~WAAYvB~~;IAC1B,IAAM,~~AAAEwB~~,~~SAAWnB~~,~~SAAXmB~~;IACR,IAAM,AAAEC,~~SAAWzB~~,~~MAAM0B~~,~~WAAWnB~~,~~iBAA5BkB~~;~~IACR~~,IAAME,WAAW;QACf,~~IAAIF~~,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQG,SAAS;~~YACnB~~,~~IAAMC~~,gBAAgBC,~~iBAAiBL~~,OAAOG;YAE9CL,SACE,AAAC,GAIA,OAHCE,OAAOG,~~QAAQG~~,cACfC,WAAWH,cAAcI,eACzBD,WAAWH,cAAcK,eAC1B;QAEL,OAAO;~~YACLX~~,SAASF;QACX;IACF;~~IACArB~~,~~MAAMmC~~,~~UAAUR~~,UAAU;QAACF;QAAQP;~~KAAS~~;~~IAC5Cf~~,~~uBAAuBqB~~,QAAQ,UAAUG;IAEzC,qBACE,~~oBAACnB~~,~~0DACKS~~;~~QACJmB~~,OAAAA;~~QACAjB~~,KAAKA;~~QACLH~~,WAAWf,~~8BAETiB~~,~~aAAaZ~~,~~SAAS+B~~,OAAO,~~gCAC7BtB~~,qCACAH,YACE,CAAA;~~YACE0B~~,GAAG;YACHC,~~QAAQtC~~,+CAEN;QAEJ,CAAA,CAAC,CAACW,SAAS,EACbI;QAEFL,OAAO,wCAAKA;~~YAAOW~~,OAAAA;;~~QAElBZ~~;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n vertical?: 'top' \| 'bottom';\n /*\n Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n /\n filled?: boolean;\n /\n Всегда соответствовать ширине родителя.\n * Ширина пересчитывается по событию `window` `resize`.\n /\n useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n position: 'absolute' \| null;\n top: number;\n bottom: number;\n width: string;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n children,\n style,\n vertical,\n getRootRef,\n getRef,\n filled,\n className,\n useParentWidth,\n ...restProps\n}: FixedLayoutProps) => {\n const platform = usePlatform();\n const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n const [width, setWidth] = React.useState<string \| undefined>(undefined);\n const { window } = useDOM();\n const { colRef } = React.useContext(SplitColContext);\n\n const doResize = () => {\n if (useParentWidth && ref.current) {\n const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;\n setWidth(parentWidth ? `${parentWidth}px` : undefined);\n } else if (colRef?.current) {\n const computedStyle = getComputedStyle(colRef.current);\n\n setWidth(\n `${\n colRef.current.clientWidth -\n parseFloat(computedStyle.paddingLeft) -\n parseFloat(computedStyle.paddingRight)\n }px`,\n );\n } else {\n setWidth(undefined);\n }\n };\n React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n useGlobalEventListener(window, 'resize', doResize);\n\n return (\n <TooltipContainer\n {...restProps}\n fixed\n ref={ref}\n className={classNames(\n styles['FixedLayout'],\n platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n filled && styles['FixedLayout--filled'],\n vertical &&\n {\n top: styles['FixedLayout--vertical-top'],\n bottom: classNames(\n styles['FixedLayout--vertical-bottom'],\n 'vkuiInternalFixedLayout--vertical-bottom',\n ),\n }[vertical],\n className,\n )}\n style={{ ...style, width }}\n >\n {children}\n </TooltipContainer>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","ref","useState","undefined","width","setWidth","window","colRef","useContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AA2B/D;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACAC,wBAAAA,gBACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWf;IACjB,IAAMgB,MAAMlB,aAAaW,YAAYC,SAAS,6BAA6B;IAC3E,IAA0Bd,mCAAAA,MAAMqB,SAA6BC,gBAAtDC,QAAmBvB,oBAAZwB,WAAYxB;IAC1B,IAAM,AAAEyB,SAAWpB,SAAXoB;IACR,IAAM,AAAEC,SAAW1B,MAAM2B,WAAWpB,iBAA5BmB;IAER,IAAME,WAAW;QACf,IAAIX,kBAAkBG,IAAIS,SAAS;gBACbT;YAApB,IAAMU,cAAcV,CAAAA,6BAAAA,IAAIS,QAAQE,2BAAZX,wCAAAA,KAAAA,IAAAA,2BAA2BY,wBAAwBT;YACvEC,SAASM,cAAc,AAAC,GAAc,OAAZA,aAAY,QAAMR;QAC9C,OAAO,IAAII,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQG,SAAS;YAC1B,IAAMI,gBAAgBC,iBAAiBR,OAAOG;YAE9CL,SACE,AAAC,GAIA,OAHCE,OAAOG,QAAQM,cACfC,WAAWH,cAAcI,eACzBD,WAAWH,cAAcK,eAC1B;QAEL,OAAO;YACLd,SAASF;QACX;IACF;IACAtB,MAAMuC,UAAUX,UAAU;QAACF;QAAQP;QAAUC;QAAKH;KAAe;IACjEd,uBAAuBsB,QAAQ,UAAUG;IAEzC,qBACE,oBAACpB,0DACKU;QACJsB,OAAAA;QACApB,KAAKA;QACLJ,WAAWf,8BAETkB,aAAab,SAASmC,OAAO,gCAC7B1B,qCACAH,YACE,CAAA;YACE8B,GAAG;YACHC,QAAQ1C,+CAEN;QAEJ,CAAA,CAAC,CAACW,SAAS,EACbI;QAEFL,OAAO,wCAAKA;YAAOY,OAAAA;;QAElBb;AAGP,EAAE"}

package/dist/components/Group/Group.js CHANGED Viewed

@@ -13,10 +13,9 @@ import { ModalRootContext } from "../ModalRoot/ModalRootContext";
 import { Separator } from "../Separator/Separator";
 import { Spacing } from "../Spacing/Spacing";
 import { Footnote } from "../Typography/Footnote/Footnote";
-var _obj;
-var sizeXClassNames = (_obj = {
-    none: "vkuiGroup--sizeX-none"
-}, _define_property(_obj, SizeType.COMPACT, "vkuiGroup--sizeX-compact"), _define_property(_obj, SizeType.REGULAR, "vkuiGroup--sizeX-regular"), _obj);
+var sizeXClassNames = _define_property({
+    none: classNames("vkuiGroup--sizeX-none", "vkuiInternalGroup--sizeX-none")
+}, SizeType.COMPACT, "vkuiGroup--sizeX-compact");
 var warn = warnOnce("Group");
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
@@ -40,6 +39,9 @@ var warn = warnOnce("Group");
         // Подробнее в "none" можно прочитать в ADAPTIVITY_GUIDE.md
         mode = isInsideModal ? "plain" : "none";
     }
+    if (mode === "none" && sizeX !== "none") {
+        mode = sizeX === SizeType.REGULAR ? "card" : "plain";
+    }
     var isTabPanel = restProps.role === "tabpanel";
     if (process.env.NODE_ENV === "development" && isTabPanel && (!restProps["aria-controls"] || !restProps["id"])) {
         warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
@@ -49,7 +51,7 @@ var warn = warnOnce("Group");
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("section", _object_spread_props(_object_spread({}, restProps), {
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: classNames("vkuiInternalGroup", "vkuiGroup", platform === Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && ({
+        className: classNames("vkuiInternalGroup", "vkuiGroup", platform === Platform.IOS && "vkuiGroup--ios", sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], mode && ({
             none: classNames("vkuiGroup--mode-none", "vkuiInternalGroup--mode-none"),
             plain: classNames("vkuiGroup--mode-plain", "vkuiInternalGroup--mode-plain"),
             card: classNames("vkuiGroup--mode-card", "vkuiInternalGroup--mode-card")

package/dist/components/Group/Group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n none: styles['Group--sizeX-none']~~,\n [SizeType.COMPACT]:~~ ~~styles[~~'~~Group~~--sizeX-~~compact~~'],\n [SizeType.~~REGULAR~~]: styles['Group--sizeX-~~regular~~'],\n};\n\nexport interface GroupProps\n extends HasRootRef<HTMLElement>,\n React.HTMLAttributes<HTMLElement>,\n HasChildren {\n header?: React.ReactNode;\n description?: React.ReactNode;\n /*\n show - разделитель всегда показывается,\n hide - разделитель всегда спрятан,\n auto - разделитель рисуется автоматически между соседними группами.\n /\n separator?: 'show' \| 'hide' \| 'auto';\n /*\n Режим отображения. Если установлен 'card', выглядит как карточка c\n * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n * по умолчанию 'plain'.\n /\n mode?: 'plain' \| 'card';\n /\n Отвечает за отступы вокруг контента в режиме 'card'.\n /\n padding?: 's' \| 'm';\n}\n\nconst warn = warnOnce('Group');\n/\n @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n header,\n description,\n children,\n separator = 'auto',\n getRootRef,\n mode: modeProps,\n padding = 'm',\n className,\n tabIndex: tabIndexProp,\n ...restProps\n}: GroupProps) => {\n const { isInsideModal } = React.useContext(ModalRootContext);\n const platform = usePlatform();\n const { sizeX = 'none' } = useAdaptivity();\n\n let mode: GroupProps['mode'] \| 'none' = modeProps;\n\n if (!modeProps) {\n // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n mode = isInsideModal ? 'plain' : 'none';\n }\n\n const isTabPanel = restProps.role === 'tabpanel';\n\n if (\n process.env.NODE_ENV === 'development' &&\n isTabPanel &&\n (!restProps['aria-controls'] \|\| !restProps['id'])\n ) {\n warn(\n 'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n );\n }\n\n const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n const separatorClassName = classNames(\n styles['Group__separator'],\n separator === 'show' && styles['Group__separator--force'],\n );\n\n return (\n <>\n <section\n {...restProps}\n tabIndex={tabIndex}\n ref={getRootRef}\n className={classNames(\n 'vkuiInternalGroup',\n styles['Group'],\n platform === Platform.IOS && styles['Group--ios'],\n sizeXClassNames[sizeX],\n mode &&\n {\n none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n }[mode],\n {\n s: styles['Group--padding-s'],\n m: styles['Group--padding-m'],\n }[padding],\n className,\n )}\n >\n {header}\n {children}\n {hasReactNode(description) && (\n <Footnote className={styles['Group__description']}>{description}</Footnote>\n )}\n </section>\n\n {separator !== 'hide' && (\n <React.Fragment>\n <Spacing\n className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n size={16}\n />\n <Separator\n className={classNames(separatorClassName, styles['Group__separator--separator'])}\n />\n </React.Fragment>\n )}\n </>\n );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","sizeXClassNames","none","COMPACT","~~REGULAR","~~warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;~~IAGnC;AAAxB~~,IAAMC~~,mBAAkB~~;~~IACtBC~~,~~IAAI~~;~~oBADkB~~,~~MAErBR,~~SAASS~~,uDAFY,MAGrBT,SAASU,sCAHY~~;~~AA+BxB~~,IAAMC,~~OAAOT~~,SAAS;AACtB;;CAEC,GACD,OAAO,~~IAAMU~~,QAAQ;QACnBC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,~~gBAAkB9B~~,~~MAAM+B~~,~~WAAWvB~~,~~kBAAnCsB~~;IACR,IAAME,~~WAAW5B~~;IACjB,IAA2BD,iBAAAA,wCAAAA,~~eAAnB8B~~,OAAAA,0CAAQ;IAEhB,IAAIV,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,~~IAAMI~~,~~aAAaL~~,~~UAAUM~~,SAAS;IAEtC,IACEC,QAAQC,IAAIC,aAAa,iBACzBJ,cACC,CAAA,~~CAACL~~,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,IAAMW,~~WAAWO~~,~~cAAcN~~,~~iBAAiBW~~,YAAY,~~IAAIX~~;IAEhE,~~IAAMY~~,qBAAqBvC,~~mCAEzBoB~~,cAAc;IAGhB,qBACE,wDACE,~~oBAACoB~~,~~mDACKZ~~;QACJF,UAAUA;~~QACVe~~,~~KAAKpB~~;QACLI,~~WAAWzB~~,WACT,~~kCAEA+B~~,~~aAAa1B~~,SAASqC,~~yBACtB/B~~,eAAe,~~CAACqB~~,MAAM,~~EACtBV~~,QACE,CAAA;~~YACEV~~,MAAMZ,mCAAuC;YAC7C2C,OAAO3C,oCAAwC;YAC/C4C,MAAM5C,mCAAuC;QAC/C,CAAA,CAAC,~~CAACsB~~,KAAK,EACT;~~YACEuB~~,CAAC;YACDC,CAAC;QACH,CAAC,~~CAACtB~~,QAAQ,EACVC;QAGDR,QACAE,~~UACAlB~~,~~aAAaiB~~,8BACZ,~~oBAACR~~;~~QAASe~~,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,~~oBAACrB~~,MAAMgD,8BACL,oBAACtC;~~QACCgB~~,~~WAAWzB~~,WAAWuC;QACtBS,MAAM;sBAER,oBAACxC;~~QACCiB~~,~~WAAWzB~~,WAAWuC;;AAMlC,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n};\n\nexport interface GroupProps\n extends HasRootRef<HTMLElement>,\n React.HTMLAttributes<HTMLElement>,\n HasChildren {\n header?: React.ReactNode;\n description?: React.ReactNode;\n /*\n show - разделитель всегда показывается,\n hide - разделитель всегда спрятан,\n auto - разделитель рисуется автоматически между соседними группами.\n /\n separator?: 'show' \| 'hide' \| 'auto';\n /*\n Режим отображения. Если установлен 'card', выглядит как карточка c\n * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n * по умолчанию 'plain'.\n /\n mode?: 'plain' \| 'card';\n /\n Отвечает за отступы вокруг контента в режиме 'card'.\n /\n padding?: 's' \| 'm';\n}\n\nconst warn = warnOnce('Group');\n/\n @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n header,\n description,\n children,\n separator = 'auto',\n getRootRef,\n mode: modeProps,\n padding = 'm',\n className,\n tabIndex: tabIndexProp,\n ...restProps\n}: GroupProps) => {\n const { isInsideModal } = React.useContext(ModalRootContext);\n const platform = usePlatform();\n const { sizeX = 'none' } = useAdaptivity();\n\n let mode: GroupProps['mode'] \| 'none' = modeProps;\n\n if (!modeProps) {\n // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n mode = isInsideModal ? 'plain' : 'none';\n }\n\n if (mode === 'none' && sizeX !== 'none') {\n mode = sizeX === SizeType.REGULAR ? 'card' : 'plain';\n }\n\n const isTabPanel = restProps.role === 'tabpanel';\n\n if (\n process.env.NODE_ENV === 'development' &&\n isTabPanel &&\n (!restProps['aria-controls'] \|\| !restProps['id'])\n ) {\n warn(\n 'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n );\n }\n\n const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n const separatorClassName = classNames(\n styles['Group__separator'],\n separator === 'show' && styles['Group__separator--force'],\n );\n\n return (\n <>\n <section\n {...restProps}\n tabIndex={tabIndex}\n ref={getRootRef}\n className={classNames(\n 'vkuiInternalGroup',\n styles['Group'],\n platform === Platform.IOS && styles['Group--ios'],\n sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n mode &&\n {\n none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n }[mode],\n {\n s: styles['Group--padding-s'],\n m: styles['Group--padding-m'],\n }[padding],\n className,\n )}\n >\n {header}\n {children}\n {hasReactNode(description) && (\n <Footnote className={styles['Group__description']}>{description}</Footnote>\n )}\n </section>\n\n {separator !== 'hide' && (\n <React.Fragment>\n <Spacing\n className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n size={16}\n />\n <Separator\n className={classNames(separatorClassName, styles['Group__separator--separator'])}\n />\n </React.Fragment>\n )}\n </>\n );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","sizeXClassNames","none","COMPACT","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","REGULAR","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC;IACJC,MAAMZ,oCAAwC;GAC7CI,SAASS;AA4BZ,IAAMC,OAAOR,SAAS;AACtB;;CAEC,GACD,OAAO,IAAMS,QAAQ;QACnBC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkB7B,MAAM8B,WAAWtB,kBAAnCqB;IACR,IAAME,WAAW3B;IACjB,IAA2BD,iBAAAA,wCAAAA,eAAnB6B,OAAAA,0CAAQ;IAEhB,IAAIV,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,IAAIP,SAAS,UAAUU,UAAU,QAAQ;QACvCV,OAAOU,UAAU3B,SAAS4B,UAAU,SAAS;IAC/C;IAEA,IAAMC,aAAaN,UAAUO,SAAS;IAEtC,IACEC,QAAQC,IAAIC,aAAa,iBACzBJ,cACC,CAAA,CAACN,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,IAAMW,WAAWQ,cAAcP,iBAAiBY,YAAY,IAAIZ;IAEhE,IAAMa,qBAAqBvC,mCAEzBmB,cAAc;IAGhB,qBACE,wDACE,oBAACqB,mDACKb;QACJF,UAAUA;QACVgB,KAAKrB;QACLI,WAAWxB,WACT,kCAEA8B,aAAazB,SAASqC,yBACtBX,UAAU3B,SAAS4B,WAAWrB,eAAe,CAACoB,MAAM,EACpDV,QACE,CAAA;YACET,MAAMZ,mCAAuC;YAC7C2C,OAAO3C,oCAAwC;YAC/C4C,MAAM5C,mCAAuC;QAC/C,CAAA,CAAC,CAACqB,KAAK,EACT;YACEwB,CAAC;YACDC,CAAC;QACH,CAAC,CAACvB,QAAQ,EACVC;QAGDR,QACAE,UACAjB,aAAagB,8BACZ,oBAACP;QAASc,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,oBAACpB,MAAMgD,8BACL,oBAACtC;QACCe,WAAWxB,WAAWuC;QACtBS,MAAM;sBAER,oBAACxC;QACCgB,WAAWxB,WAAWuC;;AAMlC,EAAE"}

package/dist/components/Header/Header.js CHANGED Viewed

@@ -89,12 +89,12 @@ var HeaderContent = function(_param) {
         mode: mode,
         size: size
     }, /*#__PURE__*/ React.createElement("span", {
-        className: classNames("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
+        className: classNames("vkuiHeader__content-in", multiline && "vkuiHeader__content--multiline")
     }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiHeader__indicator",
         weight: "2"
     }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
-        className: "vkuiHeader__subtitle",
+        className: classNames("vkuiHeader__subtitle", multiline && "vkuiHeader__content--multiline"),
         Component: "span"
     }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(Paragraph, {
         className: "vkuiHeader__aside",

package/dist/components/Header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n mode?: 'primary' \| 'secondary' \| 'tertiary';\n size?: 'regular' \| 'large';\n subtitle?: React.ReactNode;\n /*\n Допускаются иконки, текст, Link\n /\n aside?: React.ReactNode;\n /\n Допускаются текст, Indicator\n /\n indicator?: React.ReactNode;\n multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' \| 'mode' \| 'size' \| 'className'> &\n HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n const isLarge = size === 'large';\n\n const platform = usePlatform();\n if (platform === Platform.IOS) {\n switch (mode) {\n case 'primary':\n return isLarge ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Title weight=\"1\" level=\"3\" {...restProps} />\n );\n case 'secondary':\n return <Footnote weight=\"1\" caps {...restProps} />;\n case 'tertiary':\n return <Title weight=\"1\" level=\"3\" {...restProps} />;\n }\n }\n\n switch (mode) {\n case 'primary':\n return isLarge ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Headline weight=\"2\" {...restProps} />\n );\n case 'secondary':\n return <Footnote weight=\"1\" caps {...restProps} />;\n case 'tertiary':\n return <Headline weight=\"2\" {...restProps} />;\n }\n\n return null;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n mode = 'primary',\n size = 'regular',\n children,\n subtitle,\n indicator,\n aside,\n getRootRef,\n multiline,\n className,\n ...restProps\n}: HeaderProps) => {\n const platform = usePlatform();\n\n return (\n <header\n {...restProps}\n ref={getRootRef}\n className={classNames(\n styles['Header'],\n platform === Platform.IOS && styles['Header--ios'],\n {\n primary: styles['Header--mode-primary'],\n secondary: styles['Header--mode-secondary'],\n tertiary: styles['Header--mode-tertiary'],\n }[mode],\n isPrimitiveReactNode(indicator) && styles['Header--pi'],\n hasReactNode(subtitle) && styles['Header--with-subtitle'],\n className,\n )}\n >\n <div className={styles['Header__main']}>\n <HeaderContent\n className={styles['Header__content']}\n Component=\"span\"\n mode={mode}\n size={size}\n >\n <span\n className={classNames(\n styles['Header__content-in'],\n multiline && styles['Header__content~~-in~~--multiline'],\n )}\n >\n {children}\n </span>\n {hasReactNode(indicator) && (\n <Footnote className={styles['Header__indicator']} weight=\"2\">\n {indicator}\n </Footnote>\n )}\n </HeaderContent>\n\n {hasReactNode(subtitle) && (\n <Subhead className={styles['Header__subtitle']} Component=\"span\">\n {subtitle}\n </Subhead>\n )}\n </div>\n\n {hasReactNode(aside) && (\n <Paragraph className={styles['Header__aside']} Component=\"span\">\n {aside}\n </Paragraph>\n )}\n </header>\n );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAqBlD,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWZ;IACjB,IAAIY,aAAaX,SAASY,KAAK;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACL;oBAAMQ,OAAM;oBAAIC,QAAO;mBAAQL,4BAEhC,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;YAEpC,KAAK;gBACH,qBAAO,oBAACR;oBAASa,QAAO;oBAAIC,MAAAA;mBAASN;YACvC,KAAK;gBACH,qBAAO,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACL;gBAAMQ,OAAM;gBAAIC,QAAO;eAAQL,4BAEhC,oBAACP;gBAASY,QAAO;eAAQL;QAE7B,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAIC,MAAAA;eAASN;QACvC,KAAK;YACH,qBAAO,oBAACP;gBAASY,QAAO;eAAQL;IACpC;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,IAAMO,SAAS;6BACpBT,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPS,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGd;QATHF;QACAC;QACAS;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMZ,WAAWZ;IAEjB,qBACE,oBAACyB,kDACKf;QACJgB,KAAKJ;QACLE,WAAW3B,yBAETe,aAAaX,SAASY,0BACtB;YACEc,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAACrB,KAAK,EACPT,qBAAqBqB,gCACrBtB,aAAaqB,0CACbK;sBAGF,oBAACM;QAAIN,SAAS;qBACZ,oBAACjB;QACCiB,SAAS;QACTO,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW3B,qCAET0B;OAGDL,WAEFpB,aAAasB,4BACZ,oBAAClB;QAASsB,SAAS;QAA+BT,QAAO;OACtDK,aAKNtB,aAAaqB,2BACZ,oBAACd;~~QAAQmB~~,~~SAAS~~;~~QAA8BO~~,WAAU;~~OACvDZ~~,YAKNrB,aAAauB,wBACZ,oBAACjB;QAAUoB,SAAS;QAA2BO,WAAU;OACtDV;AAKX,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n mode?: 'primary' \| 'secondary' \| 'tertiary';\n size?: 'regular' \| 'large';\n subtitle?: React.ReactNode;\n /*\n Допускаются иконки, текст, Link\n /\n aside?: React.ReactNode;\n /\n Допускаются текст, Indicator\n /\n indicator?: React.ReactNode;\n multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' \| 'mode' \| 'size' \| 'className'> &\n HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n const isLarge = size === 'large';\n\n const platform = usePlatform();\n if (platform === Platform.IOS) {\n switch (mode) {\n case 'primary':\n return isLarge ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Title weight=\"1\" level=\"3\" {...restProps} />\n );\n case 'secondary':\n return <Footnote weight=\"1\" caps {...restProps} />;\n case 'tertiary':\n return <Title weight=\"1\" level=\"3\" {...restProps} />;\n }\n }\n\n switch (mode) {\n case 'primary':\n return isLarge ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Headline weight=\"2\" {...restProps} />\n );\n case 'secondary':\n return <Footnote weight=\"1\" caps {...restProps} />;\n case 'tertiary':\n return <Headline weight=\"2\" {...restProps} />;\n }\n\n return null;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n mode = 'primary',\n size = 'regular',\n children,\n subtitle,\n indicator,\n aside,\n getRootRef,\n multiline,\n className,\n ...restProps\n}: HeaderProps) => {\n const platform = usePlatform();\n\n return (\n <header\n {...restProps}\n ref={getRootRef}\n className={classNames(\n styles['Header'],\n platform === Platform.IOS && styles['Header--ios'],\n {\n primary: styles['Header--mode-primary'],\n secondary: styles['Header--mode-secondary'],\n tertiary: styles['Header--mode-tertiary'],\n }[mode],\n isPrimitiveReactNode(indicator) && styles['Header--pi'],\n hasReactNode(subtitle) && styles['Header--with-subtitle'],\n className,\n )}\n >\n <div className={styles['Header__main']}>\n <HeaderContent\n className={styles['Header__content']}\n Component=\"span\"\n mode={mode}\n size={size}\n >\n <span\n className={classNames(\n styles['Header__content-in'],\n multiline && styles['Header__content--multiline'],\n )}\n >\n {children}\n </span>\n {hasReactNode(indicator) && (\n <Footnote className={styles['Header__indicator']} weight=\"2\">\n {indicator}\n </Footnote>\n )}\n </HeaderContent>\n\n {hasReactNode(subtitle) && (\n <Subhead\n className={classNames(\n styles['Header__subtitle'],\n multiline && styles['Header__content--multiline'],\n )}\n Component=\"span\"\n >\n {subtitle}\n </Subhead>\n )}\n </div>\n\n {hasReactNode(aside) && (\n <Paragraph className={styles['Header__aside']} Component=\"span\">\n {aside}\n </Paragraph>\n )}\n </header>\n );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAqBlD,IAAMC,gBAAgB;QAAGC,cAAAA,MAAMC,cAAAA,MAASC;QAAfF;QAAMC;;IAC7B,IAAME,UAAUF,SAAS;IAEzB,IAAMG,WAAWZ;IACjB,IAAIY,aAAaX,SAASY,KAAK;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACL;oBAAMQ,OAAM;oBAAIC,QAAO;mBAAQL,4BAEhC,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;YAEpC,KAAK;gBACH,qBAAO,oBAACR;oBAASa,QAAO;oBAAIC,MAAAA;mBAASN;YACvC,KAAK;gBACH,qBAAO,oBAACJ;oBAAMS,QAAO;oBAAID,OAAM;mBAAQJ;QAC3C;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACL;gBAAMQ,OAAM;gBAAIC,QAAO;eAAQL,4BAEhC,oBAACP;gBAASY,QAAO;eAAQL;QAE7B,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAIC,MAAAA;eAASN;QACvC,KAAK;YACH,qBAAO,oBAACP;gBAASY,QAAO;eAAQL;IACpC;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,IAAMO,SAAS;6BACpBT,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,yBACPS,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGd;QATHF;QACAC;QACAS;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMZ,WAAWZ;IAEjB,qBACE,oBAACyB,kDACKf;QACJgB,KAAKJ;QACLE,WAAW3B,yBAETe,aAAaX,SAASY,0BACtB;YACEc,OAAO;YACPC,SAAS;YACTC,QAAQ;QACV,CAAC,CAACrB,KAAK,EACPT,qBAAqBqB,gCACrBtB,aAAaqB,0CACbK;sBAGF,oBAACM;QAAIN,SAAS;qBACZ,oBAACjB;QACCiB,SAAS;QACTO,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW3B,qCAET0B;OAGDL,WAEFpB,aAAasB,4BACZ,oBAAClB;QAASsB,SAAS;QAA+BT,QAAO;OACtDK,aAKNtB,aAAaqB,2BACZ,oBAACd;QACCmB,WAAW3B,mCAET0B;QAEFQ,WAAU;OAETZ,YAKNrB,aAAauB,wBACZ,oBAACjB;QAAUoB,SAAS;QAA2BO,WAAU;OACtDV;AAKX,EAAE"}

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

@@ -181,12 +181,7 @@ function doScroll(param) {
     ]);
     return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
         className: classNames("vkuiHorizontalScroll", "vkuiInternalHorizontalScroll", showArrows === "always" && "vkuiHorizontalScroll--withConstArrows", className)
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiHorizontalScroll__in",
-        ref: scrollerRef
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiHorizontalScroll__in-wrapper"
-    }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(ScrollArrow, {
+    }), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(ScrollArrow, {
         size: arrowSize,
         offsetY: arrowOffsetY,
         direction: "left",
@@ -198,7 +193,12 @@ function doScroll(param) {
         direction: "right",
         className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowRight"),
         onClick: scrollToRight
-    }));
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHorizontalScroll__in",
+        ref: scrollerRef
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHorizontalScroll__in-wrapper"
+    }, children)));
 };
 //# sourceMappingURL=HorizontalScroll.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n scrollElement: HTMLElement \| null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToRightBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /*\n Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n /\n initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /\n Функция для расчета величины прокрутки при клике на левую стрелку.\n /\n getScrollToLeft?: ScrollPositionHandler;\n /\n Функция для расчета величины прокрутки при клике на правую стрелку.\n /\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: 'm' \| 'l';\n /\n Смещает иконки кнопок навигации по вертикали.\n /\n arrowOffsetY?: number \| string;\n showArrows?: boolean \| 'always';\n scrollAnimationDuration?: number;\n /\n Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n /\n scrollOnAnyWheel?: boolean;\n}\n\n/\n timing method\n /\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/\n Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n /\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/\n Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n /\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToRightBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n if (!scrollElement \|\| !getScrollPosition) {\n return;\n }\n\n /\n максимальное значение сдвига влево\n /\n const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n let startLeft = roundUpElementScrollLeft(scrollElement);\n let endLeft = getScrollPosition(startLeft);\n\n onScrollStart();\n\n if (endLeft >= maxLeft) {\n onScrollToRightBorder();\n endLeft = maxLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentLeft = startLeft + (endLeft - startLeft) value;\n scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n /\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'l',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n className,\n scrollOnAnyWheel = false,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToRightBorder: () => setCanScrollRight(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth \|\| 0,\n scrollAnimationDuration,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollAnimationDuration, scrollerRef],\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const onscroll = React.useCallback(() => {\n if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollLeft(scrollElement.scrollLeft > 0);\n setCanScrollRight(\n roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [hasPointer, scrollerRef, showArrows]);\n\n const scrollEvent = useEventListener('scroll', onscroll);\n React.useEffect(() => {\n if (scrollerRef.current) {\n scrollEvent.add(scrollerRef.current);\n }\n }, [scrollEvent, scrollerRef]);\n React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n /\n Прокрутка с помощью любого колеса мыши\n */\n const onwheel = React.useCallback(\n (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n },\n [scrollerRef],\n );\n\n const wheelEvent = useEventListener('wheel', onwheel);\n React.useEffect(() => {\n if (!scrollerRef.current \|\| !scrollOnAnyWheel) {\n return noop;\n }\n\n wheelEvent.add(scrollerRef.current);\n\n return wheelEvent.remove;\n }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['HorizontalScroll'],\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n className,\n )}\n >\n <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n </div>\n {showArrows && (hasPointer \|\| hasPointer === undefined) && canScrollLeft && (\n <ScrollArrow\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowLeft'],\n )}\n onClick={scrollToLeft}\n />\n )}\n {showArrows && (hasPointer \|\| hasPointer === undefined) && canScrollRight && (\n <ScrollArrow\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowRight'],\n )}\n onClick={scrollToRight}\n />\n )}\n </div>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","ScrollArrow","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","offsetY","direction","onClick"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n scrollElement: HTMLElement \| null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToRightBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /*\n Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n /\n initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /\n Функция для расчета величины прокрутки при клике на левую стрелку.\n /\n getScrollToLeft?: ScrollPositionHandler;\n /\n Функция для расчета величины прокрутки при клике на правую стрелку.\n /\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: 'm' \| 'l';\n /\n Смещает иконки кнопок навигации по вертикали.\n /\n arrowOffsetY?: number \| string;\n showArrows?: boolean \| 'always';\n scrollAnimationDuration?: number;\n /\n Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n /\n scrollOnAnyWheel?: boolean;\n}\n\n/\n timing method\n /\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/\n Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n /\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/\n Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n /\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToRightBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n if (!scrollElement \|\| !getScrollPosition) {\n return;\n }\n\n /\n максимальное значение сдвига влево\n /\n const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n let startLeft = roundUpElementScrollLeft(scrollElement);\n let endLeft = getScrollPosition(startLeft);\n\n onScrollStart();\n\n if (endLeft >= maxLeft) {\n onScrollToRightBorder();\n endLeft = maxLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentLeft = startLeft + (endLeft - startLeft) value;\n scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n /\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'l',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n className,\n scrollOnAnyWheel = false,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToRightBorder: () => setCanScrollRight(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth \|\| 0,\n scrollAnimationDuration,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollAnimationDuration, scrollerRef],\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const onscroll = React.useCallback(() => {\n if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollLeft(scrollElement.scrollLeft > 0);\n setCanScrollRight(\n roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [hasPointer, scrollerRef, showArrows]);\n\n const scrollEvent = useEventListener('scroll', onscroll);\n React.useEffect(() => {\n if (scrollerRef.current) {\n scrollEvent.add(scrollerRef.current);\n }\n }, [scrollEvent, scrollerRef]);\n React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n /\n Прокрутка с помощью любого колеса мыши\n */\n const onwheel = React.useCallback(\n (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n },\n [scrollerRef],\n );\n\n const wheelEvent = useEventListener('wheel', onwheel);\n React.useEffect(() => {\n if (!scrollerRef.current \|\| !scrollOnAnyWheel) {\n return noop;\n }\n\n wheelEvent.add(scrollerRef.current);\n\n return wheelEvent.remove;\n }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['HorizontalScroll'],\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n className,\n )}\n >\n {showArrows && (hasPointer \|\| hasPointer === undefined) && canScrollLeft && (\n <ScrollArrow\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowLeft'],\n )}\n onClick={scrollToLeft}\n />\n )}\n {showArrows && (hasPointer \|\| hasPointer === undefined) && canScrollRight && (\n <ScrollArrow\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowRight'],\n )}\n onClick={scrollToRight}\n />\n )}\n <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n </div>\n </div>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","ScrollArrow","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","undefined","size","offsetY","direction","onClick","ref"],"mappings":"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"}

package/dist/components/ImageBase/ImageBase.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { HasRef, HasRootRef } from '../../types';
+import type { HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
 import { type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
@@ -15,7 +15,7 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, Ha
      *
      * > ⚠️ Использование кастомного размера – это пограничный кейс.
      */
-    size?: ImageBaseSize | number;
+    size?: LiteralUnion<ImageBaseSize, number>;
     /**
      * Включает или отключает обводку.
      */