npm - @vkontakte/vkui - Versions diffs - 5.8.0-beta.0 → 5.8.1-alpha.0 - Mend

@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { defaultFilterFn, getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { debounce, getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { Input } from '../Input/Input';\nimport { NativeSelectProps } from '../NativeSelect/NativeSelect';\nimport { SelectType } from '../Select/Select';\nimport { SelectMimicry } from '../SelectMimicry/SelectMimicry';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { CustomSelectClearButton, CustomSelectClearButtonProps } from './CustomSelectClearButton';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelect--sizeY-none'],\n [SizeType.COMPACT]: styles['CustomSelect--sizeY-compact'],\n};\n\nconst findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex((option, i) => i > startIndex && !option.disabled);\n};\n\nconst findIndexBefore = (\n options: CustomSelectOptionInterface[] = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nconst warn = warnOnce('CustomSelect');\n\nconst checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {\n if (new Set(options.map((item) => typeof item.value)).size > 1) {\n warn(\n 'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',\n 'error',\n );\n }\n};\n\nfunction defaultRenderOptionFn({ option, ...props }: CustomSelectOptionProps): React.ReactNode {\n return <CustomSelectOption {...props} />;\n}\n\nconst handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n};\n\nfunction findSelectedIndex(\n options: CustomSelectOptionInterface[],\n value: SelectValue,\n withClear: boolean,\n) {\n if (withClear && value === '') {\n return -1;\n }\n return (\n options.findIndex((item) => {\n value = typeof item.value === 'number' ? Number(value) : value;\n return item.value === value;\n }) ?? -1\n );\n}\n\nconst filter = (\n options: SelectProps['options'],\n inputValue: string,\n filterFn: SelectProps['filterFn'],\n) => {\n return typeof filterFn === 'function'\n ? options.filter((option) => filterFn(inputValue, option))\n : options;\n};\n\nconst defaultOptions: CustomSelectOptionInterface[] = [];\n\ntype SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n\nexport interface CustomSelectOptionInterface {\n value: SelectValue;\n label: React.ReactElement \| string;\n disabled?: boolean;\n [index: string]: any;\n}\n\nexport interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {\n /*\n Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n /\n searchable?: boolean;\n /\n Текст, который будет отображен, если приходит пустой `options`.\n /\n emptyText?: string;\n /\n > ⚠️ В v6 из возвращаемых типов будет удалён `CustomSelectOptionInterface[]`. Для кастомной фильтрации используйте\n * > `filterFn`.\n /\n onInputChange?: (\n e: React.ChangeEvent,\n options: CustomSelectOptionInterface[],\n ) => void \| CustomSelectOptionInterface[];\n options: CustomSelectOptionInterface[];\n /\n Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n /\n filterFn?:\n \| false\n \| ((\n value: string,\n option: CustomSelectOptionInterface,\n getOptionLabel?: (option: Partial<CustomSelectOptionInterface>) => string,\n ) => boolean);\n popupDirection?: 'top' \| 'bottom';\n /\n Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)\n \n > ⚠️ Важно: cвойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n * опции.\n /\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /\n Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.\n /\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /\n Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`\n * \"победит\" `renderDropdown`.\n /\n fetching?: boolean;\n onClose?: VoidFunction;\n onOpen?: VoidFunction;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n /\n ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;\n /\n Если `true`, то справа будет отображаться кнопка для очистки значения\n /\n allowClearButton?: boolean;\n dropdownOffsetDistance?: number;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n selectType?: SelectType;\n}\n\ntype MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;\n\n/\n @see https://vkcom.github.io/VKUI/#/CustomSelect\n /\nexport function CustomSelect(props: SelectProps) {\n const [opened, setOpened] = React.useState(false);\n const {\n before,\n name,\n className,\n getRef,\n getRootRef,\n popupDirection,\n style,\n onChange,\n children,\n onInputChange: onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n forceDropdownPortal,\n selectType = 'default',\n autoHideScrollbar,\n autoHideScrollbarDelay,\n searchable = false,\n renderOption: renderOptionProp = defaultRenderOptionFn,\n options: optionsProp = defaultOptions,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n icon: iconProp,\n ClearButton = CustomSelectClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n fixDropdownWidth = true,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(optionsProp);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const containerRef = React.useRef<HTMLLabelElement>(null);\n const handleRootRef = useExternRef(containerRef, getRootRef);\n const scrollBoxRef = React.useRef<HTMLDivElement \| null>(null);\n const selectElRef = useExternRef(getRef);\n\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number \| undefined>(-1);\n const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);\n const [inputValue, setInputValue] = React.useState('');\n const [nativeSelectValue, setNativeSelectValue] = React.useState(\n () => props.value ?? props.defaultValue ?? (allowClearButton ? '' : undefined),\n );\n const [keyboardInput, setKeyboardInput] = React.useState('');\n const [popperPlacement, setPopperPlacement] = React.useState<PlacementWithAuto \| undefined>(\n undefined,\n );\n const [options, setOptions] = React.useState(optionsProp);\n const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number \| undefined>(\n findSelectedIndex(optionsProp, props.value ?? props.defaultValue, allowClearButton),\n );\n\n React.useEffect(() => {\n setIsControlledOutside(props.value !== undefined);\n setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);\n }, [props.value]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n options.some(({ value }) => nativeSelectValue === value) \|\|\n (allowClearButton && nativeSelectValue === '')\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const selected = React.useMemo(() => {\n if (!options.length) {\n return null;\n }\n\n return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;\n }, [options, selectedOptionIndex]);\n\n const openedClassNames = React.useMemo(\n () =>\n 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","styles","sizeYClassNames","none","COMPACT","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","warn","checkOptionsValueType","Set","map","item","value","size","defaultRenderOptionFn","props","handleOptionDown","e","preventDefault","findSelectedIndex","withClear","Number","filter","inputValue","filterFn","defaultOptions","CustomSelect","opened","setOpened","useState","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOption","renderOptionProp","optionsProp","emptyText","icon","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","restProps","process","env","NODE_ENV","sizeY","containerRef","useRef","handleRootRef","scrollBoxRef","selectElRef","focusedOptionIndex","setFocusedOptionIndex","isControlledOutside","setIsControlledOutside","undefined","setInputValue","nativeSelectValue","setNativeSelectValue","defaultValue","keyboardInput","setKeyboardInput","popperPlacement","setPopperPlacement","setOptions","selectedOptionIndex","setSelectedOptionIndex","useEffect","some","event","Event","bubbles","current","dispatchEvent","selected","useMemo","openedClassNames","includes","resetKeyboardInput","useCallback","scrollToElement","index","center","dropdown","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","isValidIndex","focusOptionByIndex","scrollTo","areOptionsShown","setScrollBoxRef","ref","onKeyboardInput","key","fullInput","optionIndex","label","toLowerCase","close","selectOption","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","open","onBlur","resetFocusedOption","onFocus","onClick","handleKeyUp","focusOption","type","nextIndex","beforeIndex","updateOptionsAndSelectedOptionIndex","onLabelClick","contains","target","onNativeSelectChange","newSelectedOptionIndex","currentTarget","onInputKeyDown","handleKeyDownSelect","handleOptionClick","Array","prototype","indexOf","call","parentNode","handleOptionHover","hovered","Fragment","onMouseDown","onMouseOver","resolvedContent","defaultDropdownContent","controlledValueSet","uncontrolledValueSet","clearButtonShown","clearButton","afterIcons","REGULAR","autoFocus","onKeyDown","after","mode","aria-hidden","onKeyUp","select","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","sameWidth","forcePortal"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { defaultFilterFn, getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { debounce, getTitleFromChildren } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { Input } from '../Input/Input';\nimport { NativeSelectProps } from '../NativeSelect/NativeSelect';\nimport { SelectType } from '../Select/Select';\nimport { SelectMimicry } from '../SelectMimicry/SelectMimicry';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { CustomSelectClearButton, CustomSelectClearButtonProps } from './CustomSelectClearButton';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelect--sizeY-none'],\n [SizeType.COMPACT]: styles['CustomSelect--sizeY-compact'],\n};\n\nconst findIndexAfter = (options: CustomSelectOptionInterface[] = [], startIndex = -1) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex((option, i) => i > startIndex && !option.disabled);\n};\n\nconst findIndexBefore = (\n options: CustomSelectOptionInterface[] = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nconst warn = warnOnce('CustomSelect');\n\nconst checkOptionsValueType = (options: CustomSelectOptionInterface[]) => {\n if (new Set(options.map((item) => typeof item.value)).size > 1) {\n warn(\n 'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',\n 'error',\n );\n }\n};\n\nfunction defaultRenderOptionFn({ option, ...props }: CustomSelectOptionProps): React.ReactNode {\n return <CustomSelectOption {...props} />;\n}\n\nconst handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n};\n\nfunction findSelectedIndex(\n options: CustomSelectOptionInterface[],\n value: SelectValue,\n withClear: boolean,\n) {\n if (withClear && value === '') {\n return -1;\n }\n return (\n options.findIndex((item) => {\n value = typeof item.value === 'number' ? Number(value) : value;\n return item.value === value;\n }) ?? -1\n );\n}\n\nconst filter = (\n options: SelectProps['options'],\n inputValue: string,\n filterFn: SelectProps['filterFn'],\n) => {\n return typeof filterFn === 'function'\n ? options.filter((option) => filterFn(inputValue, option))\n : options;\n};\n\nconst defaultOptions: CustomSelectOptionInterface[] = [];\n\ntype SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n\nexport interface CustomSelectOptionInterface {\n value: SelectValue;\n label: React.ReactElement \| string;\n disabled?: boolean;\n [index: string]: any;\n}\n\nexport interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {\n /*\n Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n /\n searchable?: boolean;\n /\n Текст, который будет отображен, если приходит пустой `options`.\n /\n emptyText?: string;\n /\n > ⚠️ В v6 из возвращаемых типов будет удалён `CustomSelectOptionInterface[]`. Для кастомной фильтрации используйте\n * > `filterFn`.\n /\n onInputChange?: (\n e: React.ChangeEvent,\n options: CustomSelectOptionInterface[],\n ) => void \| CustomSelectOptionInterface[];\n options: CustomSelectOptionInterface[];\n /\n Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n /\n filterFn?:\n \| false\n \| ((\n value: string,\n option: CustomSelectOptionInterface,\n getOptionLabel?: (option: Partial<CustomSelectOptionInterface>) => string,\n ) => boolean);\n popupDirection?: 'top' \| 'bottom';\n /\n Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)\n \n > ⚠️ Важно: cвойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n * опции.\n /\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /\n Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.\n /\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /\n Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`\n * \"победит\" `renderDropdown`.\n /\n fetching?: boolean;\n onClose?: VoidFunction;\n onOpen?: VoidFunction;\n /\n Иконка раскрывающегося списка\n /\n icon?: React.ReactNode;\n /\n Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n /\n ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;\n /\n Если `true`, то справа будет отображаться кнопка для очистки значения\n /\n allowClearButton?: boolean;\n dropdownOffsetDistance?: number;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n selectType?: SelectType;\n}\n\ntype MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;\n\n/\n @see https://vkcom.github.io/VKUI/#/CustomSelect\n /\nexport function CustomSelect(props: SelectProps) {\n const [opened, setOpened] = React.useState(false);\n const {\n before,\n name,\n className,\n getRef,\n getRootRef,\n popupDirection,\n style,\n onChange,\n children,\n onInputChange: onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n forceDropdownPortal,\n selectType = 'default',\n autoHideScrollbar,\n autoHideScrollbarDelay,\n searchable = false,\n renderOption: renderOptionProp = defaultRenderOptionFn,\n options: optionsProp = defaultOptions,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n icon: iconProp,\n ClearButton = CustomSelectClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n fixDropdownWidth = true,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(optionsProp);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const containerRef = React.useRef<HTMLLabelElement>(null);\n const handleRootRef = useExternRef(containerRef, getRootRef);\n const scrollBoxRef = React.useRef<HTMLDivElement \| null>(null);\n const selectElRef = useExternRef(getRef);\n\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number \| undefined>(-1);\n const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);\n const [inputValue, setInputValue] = React.useState('');\n const [nativeSelectValue, setNativeSelectValue] = React.useState(\n () => props.value ?? props.defaultValue ?? (allowClearButton ? '' : undefined),\n );\n const [keyboardInput, setKeyboardInput] = React.useState('');\n const [popperPlacement, setPopperPlacement] = React.useState<PlacementWithAuto \| undefined>(\n undefined,\n );\n const [options, setOptions] = React.useState(optionsProp);\n const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number \| undefined>(\n findSelectedIndex(optionsProp, props.value ?? props.defaultValue, allowClearButton),\n );\n\n React.useEffect(() => {\n setIsControlledOutside(props.value !== undefined);\n setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);\n }, [props.value]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n options.some(({ value }) => nativeSelectValue === value) \|\|\n (allowClearButton && nativeSelectValue === '')\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const selected = React.useMemo(() => {\n if (!options.length) {\n return null;\n }\n\n return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;\n }, [options, selectedOptionIndex]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement?.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down'])) \|\|\n undefined,\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const resetKeyboardInput = React.useCallback(() => {\n setKeyboardInput('');\n }, []);\n\n const scrollToElement = React.useCallback((index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = dropdown ? (dropdown.children[index] as HTMLElement) : null;\n\n if (!item \|\| !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n }, []);\n\n const isValidIndex = React.useCallback(\n (index: number) => {\n return index >= 0 && index < (options.length ?? 0);\n },\n [options.length],\n );\n\n const focusOptionByIndex = React.useCallback(\n (index: number \| undefined, scrollTo = true) => {\n if (index === undefined \|\| index < 0 \|\| index > (options.length ?? 0) - 1) {\n return;\n }\n\n const option = options[index];\n\n if (option?.disabled) {\n return;\n }\n\n if (scrollTo) {\n scrollToElement(index);\n }\n\n // Это оптимизация, прежде всего, под `onMouseOver`\n setFocusedOptionIndex((focusedOptionIndex) =>\n focusedOptionIndex !== index ? index : focusedOptionIndex,\n );\n },\n [options, scrollToElement],\n );\n\n const areOptionsShown = React.useCallback(() => {\n return scrollBoxRef.current !== null;\n }, []);\n\n const setScrollBoxRef = React.useCallback(\n (ref: HTMLDivElement \| null) => {\n scrollBoxRef.current = ref;\n\n if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {\n {\n scrollToElement(selectedOptionIndex, true);\n }\n }\n },\n [isValidIndex, scrollToElement, selectedOptionIndex],\n );\n\n const onKeyboardInput = React.useCallback(\n (key: string) => {\n const fullInput = keyboardInput + key;\n\n const optionIndex = options.findIndex((option) => {\n return getTitleFromChildren(option.label).toLowerCase().includes(fullInput);\n });\n\n if (optionIndex !== undefined && optionIndex > -1) {\n focusOptionByIndex(optionIndex);\n }\n\n setKeyboardInput(fullInput);\n },\n [focusOptionByIndex, keyboardInput, options],\n );\n\n /\n Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.\n * Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.\n /\n const close = React.useCallback(() => {\n resetKeyboardInput();\n\n setInputValue('');\n setOpened(false);\n setFocusedOptionIndex(-1);\n onClose?.();\n }, [onClose, resetKeyboardInput]);\n\n const selectOption = React.useCallback(\n (index: number) => {\n const item = options[index];\n\n setNativeSelectValue(item?.value);\n close();\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside &&\n props.value !== nativeSelectValue &&\n nativeSelectValue === item?.value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n },\n [close, options, selectElRef, isControlledOutside, props.value, nativeSelectValue],\n );\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionIndex === undefined \|\| !isValidIndex(focusedOptionIndex)) {\n return;\n }\n\n selectOption(focusedOptionIndex);\n }, [focusedOptionIndex, isValidIndex, selectOption]);\n\n const open = React.useCallback(() => {\n setOpened(true);\n setFocusedOptionIndex(selectedOptionIndex);\n\n if (typeof onOpen === 'function') {\n onOpen();\n }\n }, [onOpen, selectedOptionIndex]);\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('blur');\n selectElRef.current?.dispatchEvent(event);\n }, [close, selectElRef]);\n\n const resetFocusedOption = React.useCallback(() => {\n setFocusedOptionIndex(-1);\n }, []);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focus');\n selectElRef.current?.dispatchEvent(event);\n }, [selectElRef]);\n\n const onClick = React.useCallback(() => {\n if (opened) {\n close();\n } else {\n open();\n }\n }, [close, open, opened]);\n\n const handleKeyUp = React.useMemo(() => debounce(resetKeyboardInput, 1000), [resetKeyboardInput]);\n\n const focusOption = React.useCallback(\n (type: 'next' \| 'prev') => {\n let index = focusedOptionIndex;\n\n if (type === 'next') {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === 'prev') {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index);\n },\n [focusOptionByIndex, focusedOptionIndex, options],\n );\n\n React.useEffect(\n function updateOptionsAndSelectedOptionIndex() {\n const value = props.value ?? nativeSelectValue ?? props.defaultValue;\n\n const options =\n searchable && inputValue !== undefined\n ? filter(optionsProp, inputValue, filterFn)\n : optionsProp;\n\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));\n },\n [\n filterFn,\n inputValue,\n nativeSelectValue,\n optionsProp,\n props.defaultValue,\n props.value,\n searchable,\n allowClearButton,\n ],\n );\n\n /\n Нужен для правильного поведения обработчика onClick на select. Фильтрует клики, которые были сделаны по\n * выпадающему списку.\n */\n const onLabelClick = React.useCallback((e: React.MouseEvent<HTMLLabelElement>) => {\n if (scrollBoxRef.current?.contains(e.target as Node)) {\n e.preventDefault();\n }\n }, []);\n\n const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const newSelectedOptionIndex = findSelectedIndex(\n options,\n e.currentTarget.value,\n allowClearButton,\n );\n\n if (selectedOptionIndex !== newSelectedOptionIndex) {\n if (!isControlledOutside) {\n setSelectedOptionIndex(newSelectedOptionIndex);\n }\n onChange?.(e);\n }\n };\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(\n (event) => {\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n areOptionsShown() && focusOption('prev');\n break;\n case 'ArrowDown':\n areOptionsShown() && focusOption('next');\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n areOptionsShown() && selectFocused();\n break;\n }\n },\n [areOptionsShown, close, focusOption, selectFocused],\n );\n\n const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n // TODO [>=6]: удалить `onInputChangeProp`.\n if (onInputChangeProp) {\n const options = onInputChangeProp(e, optionsProp);\n if (options) {\n if (process.env.NODE_ENV === 'development') {\n warn(\n 'Этот метод фильтрации устарел. Возвращаемое значение onInputChange будет ' +\n 'проигнорировано в v6.0.0. Для фильтрации обновляйте props.options самостоятельно или используйте свойство filterFn.',\n );\n }\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n } else {\n const options = filter(optionsProp, e.target.value, filterFn);\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n }\n setInputValue(e.target.value);\n },\n [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],\n );\n\n const handleKeyDownSelect = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key.length === 1 && event.key !== ' ') {\n onKeyboardInput(event.key);\n return;\n }\n\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n if (opened) {\n areOptionsShown() && focusOption('prev');\n } else {\n open();\n }\n break;\n case 'ArrowDown':\n if (opened) {\n areOptionsShown() && focusOption('next');\n } else {\n open();\n }\n break;\n case 'Escape':\n close();\n break;\n case 'Enter':\n case 'Spacebar':\n case ' ':\n if (opened) {\n areOptionsShown() && selectFocused();\n } else {\n open();\n }\n break;\n }\n },\n [areOptionsShown, close, focusOption, onKeyboardInput, open, opened, selectFocused],\n );\n\n const handleOptionClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n const index = Array.prototype.indexOf.call(\n e.currentTarget.parentNode?.children,\n e.currentTarget,\n );\n const option = options[index];\n\n if (option && !option.disabled) {\n selectOption(index);\n }\n },\n [options, selectOption],\n );\n\n const handleOptionHover = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n focusOptionByIndex(\n Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget),\n false,\n );\n },\n [focusOptionByIndex],\n );\n\n const renderOption = React.useCallback(\n (option: CustomSelectOptionInterface, index: number) => {\n const hovered = index === focusedOptionIndex;\n const selected = index === selectedOptionIndex;\n\n return (\n <React.Fragment key={`${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: handleOptionDown,\n // Используем `onMouseOver` вместо `onMouseEnter`.\n // При параметре `searchable`, обновляется \"ребёнок\", из-за чего `onMouseEnter` не срабатывает в следующих кейсах:\n // 1. До загрузки выпадающего списка, курсор мышки находится над произвольным элементом этого списка.\n // > Лечение: только увод курсора мыши и возвращении его обратно вызывает событие `onMouseEnter` на этот элемент.\n // 2. Если это тач-устройство.\n // > Лечение: нужно нажать на какой-нибудь произвольный элемент списка, после чего `onMouseEnter` будет работать на соседние элементы,\n // но не на тот, на который нажали в первый раз.\n // Более подробно по ссылке https://github.com/facebook/react/issues/13956#issuecomment-1082055744\n onMouseOver: handleOptionHover,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionIndex,\n handleOptionClick,\n handleOptionHover,\n renderOptionProp,\n selectedOptionIndex,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n options?.length > 0 ? (\n options.map(renderOption)\n ) : (\n <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, options, renderDropdown, renderOption]);\n\n const controlledValueSet = isControlledOutside && props.value !== '';\n const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';\n const clearButtonShown =\n allowClearButton && !opened && (controlledValueSet \|\| uncontrolledValueSet);\n\n const clearButton = React.useMemo(() => {\n if (!clearButtonShown) {\n return null;\n }\n\n return (\n <ClearButton\n className={iconProp === undefined ? styles['CustomSelect--clear-icon'] : undefined}\n onClick={() => setNativeSelectValue('')}\n />\n );\n }, [clearButtonShown, ClearButton, iconProp]);\n\n const icon = React.useMemo(() => {\n if (iconProp !== undefined) {\n return iconProp;\n }\n\n return (\n <DropdownIcon\n className={clearButtonShown ? styles['CustomSelect__dropdown-icon'] : undefined}\n opened={opened}\n />\n );\n }, [clearButtonShown, iconProp, opened]);\n\n const afterIcons = (icon \|\| clearButtonShown) && (\n <React.Fragment>\n {clearButton}\n {icon}\n </React.Fragment>\n );\n\n return (\n <label\n className={classNames(\n styles['CustomSelect'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n ref={handleRootRef}\n onClick={onLabelClick}\n >\n {opened && searchable ? (\n <Input\n {...restProps}\n autoFocus\n onBlur={onBlur}\n className={openedClassNames}\n value={inputValue}\n onKeyDown={onInputKeyDown}\n onChange={onInputChange}\n // TODO Ожидается, что клик поймает нативный select, но его перехватывает Input. К сожалению, это приводит к конфликтам типизации.\n // TODO Нужно перестать пытаться превратить CustomSelect в select. Тогда эта проблема уйдёт.\n // @ts-expect-error: TS2322 MouseEventHandler<HTMLSelectElement> !== MouseEventHandler<HTMLInputElement>\n onClick={props.onClick}\n before={before}\n after={afterIcons}\n mode={getFormFieldModeFromSelectType(selectType)}\n />\n ) : (\n <SelectMimicry\n {...restProps}\n aria-hidden\n onClick={onClick}\n onKeyDown={handleKeyDownSelect}\n onKeyUp={handleKeyUp}\n onFocus={onFocus}\n onBlur={onBlur}\n className={openedClassNames}\n before={before}\n after={afterIcons}\n selectType={selectType}\n >\n {selected?.label}\n </SelectMimicry>\n )}\n <select\n ref={selectElRef}\n name={name}\n onChange={onNativeSelectChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onClick={props.onClick}\n value={nativeSelectValue}\n aria-hidden\n className={styles['CustomSelect__control']}\n >\n {allowClearButton && <option key=\"\" value=\"\" />}\n {optionsProp.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </select>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popupDirection}\n scrollBoxRef={setScrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetFocusedOption}\n fetching={fetching}\n offsetDistance={dropdownOffsetDistance}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </label>\n );\n}\n"],"names":["React","classNames","useAdaptivity","useExternRef","SizeType","defaultFilterFn","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","debounce","getTitleFromChildren","warnOnce","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Input","SelectMimicry","Footnote","CustomSelectClearButton","styles","sizeYClassNames","none","COMPACT","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","warn","checkOptionsValueType","Set","map","item","value","size","defaultRenderOptionFn","props","handleOptionDown","e","preventDefault","findSelectedIndex","withClear","Number","filter","inputValue","filterFn","defaultOptions","CustomSelect","opened","setOpened","useState","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOption","renderOptionProp","optionsProp","emptyText","icon","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","fixDropdownWidth","restProps","process","env","NODE_ENV","sizeY","containerRef","useRef","handleRootRef","scrollBoxRef","selectElRef","focusedOptionIndex","setFocusedOptionIndex","isControlledOutside","setIsControlledOutside","undefined","setInputValue","nativeSelectValue","setNativeSelectValue","defaultValue","keyboardInput","setKeyboardInput","popperPlacement","setPopperPlacement","setOptions","selectedOptionIndex","setSelectedOptionIndex","useEffect","some","event","Event","bubbles","current","dispatchEvent","selected","useMemo","openedClassNames","includes","resetKeyboardInput","useCallback","scrollToElement","index","center","dropdown","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","isValidIndex","focusOptionByIndex","scrollTo","areOptionsShown","setScrollBoxRef","ref","onKeyboardInput","key","fullInput","optionIndex","label","toLowerCase","close","selectOption","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","open","onBlur","resetFocusedOption","onFocus","onClick","handleKeyUp","focusOption","type","nextIndex","beforeIndex","updateOptionsAndSelectedOptionIndex","onLabelClick","contains","target","onNativeSelectChange","newSelectedOptionIndex","currentTarget","onInputKeyDown","handleKeyDownSelect","handleOptionClick","Array","prototype","indexOf","call","parentNode","handleOptionHover","hovered","Fragment","onMouseDown","onMouseOver","resolvedContent","defaultDropdownContent","controlledValueSet","uncontrolledValueSet","clearButtonShown","clearButton","afterIcons","REGULAR","autoFocus","onKeyDown","after","mode","aria-hidden","onKeyUp","select","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","sameWidth","forcePortal"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { Placement } from '../../lib/floating';
-import { HasRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';
-export interface CustomSelectDropdownProps extends React.HTMLAttributes<HTMLElement>, HasRef<HTMLDivElement>, TrackerOptionsProps {
+export interface CustomSelectDropdownProps extends HTMLAttributesWithRootRef<HTMLDivElement>, TrackerOptionsProps {
     targetRef: React.RefObject<HTMLElement>;
     placement?: Placement;
     scrollBoxRef?: React.Ref<HTMLDivElement>;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport { ~~HasRef~~ } from '../../types';\nimport { CustomScrollView } from '../CustomScrollView/CustomScrollView';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { Popper } from '../Popper/Popper';\nimport { Spinner } from '../Spinner/Spinner';\nimport styles from './CustomSelectDropdown.module.css';\n\nexport interface CustomSelectDropdownProps\n extends ~~React.HTMLAttributes~~<~~HTMLElement>,\n HasRef<~~HTMLDivElement>,\n TrackerOptionsProps {\n targetRef: React.RefObject<HTMLElement>;\n placement?: Placement;\n scrollBoxRef?: React.Ref<HTMLDivElement>;\n fetching?: boolean;\n offsetDistance?: number;\n sameWidth?: boolean;\n forcePortal?: boolean;\n onPlacementChange?: (placement?: Placement) => void;\n}\n\nconst calcIsTop = (placement?: Placement) => placement?.includes('top');\n\nexport const CustomSelectDropdown = ({\n children,\n targetRef,\n scrollBoxRef,\n placement,\n fetching,\n onPlacementChange: parentOnPlacementChange,\n offsetDistance = 0,\n sameWidth = true,\n forcePortal = true,\n autoHideScrollbar,\n autoHideScrollbarDelay,\n className,\n ...restProps\n}: CustomSelectDropdownProps) => {\n const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));\n\n const onPlacementChange = React.useCallback(\n ({ placement }: { placement?: Placement }) => {\n setIsTop(calcIsTop(placement));\n parentOnPlacementChange?.(placement);\n },\n [parentOnPlacementChange, setIsTop],\n );\n\n return (\n <Popper\n targetRef={targetRef}\n offsetDistance={offsetDistance}\n sameWidth={sameWidth}\n onPlacementChange={onPlacementChange}\n placement={placement}\n className={classNames(\n styles['CustomSelectDropdown'],\n 'vkuiInternalCustomSelectDropdown',\n offsetDistance === 0 &&\n (isTop ? styles['CustomSelectDropdown--top'] : styles['CustomSelectDropdown--bottom']),\n sameWidth &&\n classNames(\n styles['CustomSelectDropdown--wide'],\n 'vkuiInternalCustomSelectDropdown--wide',\n ),\n className,\n )}\n forcePortal={forcePortal}\n autoUpdateOnTargetResize\n {...restProps}\n >\n <CustomScrollView\n boxRef={scrollBoxRef}\n className={styles['CustomSelectDropdown__in']}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n >\n {fetching ? (\n <div className={styles['CustomSelectDropdown__fetching']}>\n <Spinner size=\"small\" />\n </div>\n ) : (\n children\n )}\n </CustomScrollView>\n </Popper>\n );\n};\n"],"names":["React","classNames","CustomScrollView","Popper","Spinner","styles","calcIsTop","placement","includes","CustomSelectDropdown","children","targetRef","scrollBoxRef","fetching","onPlacementChange","parentOnPlacementChange","offsetDistance","sameWidth","forcePortal","autoHideScrollbar","autoHideScrollbarDelay","className","restProps","isTop","setIsTop","useState","useCallback","autoUpdateOnTargetResize","boxRef","div","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,gBAAgB,QAAQ,uCAAuC;AAExE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,OAAOC,YAAY,oCAAoC;~~AAgBvD~~,MAAMC,YAAY,CAACC,YAA0BA,WAAWC,SAAS;AAEjE,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZL,SAAS,EACTM,QAAQ,EACRC,mBAAmBC,uBAAuB,EAC1CC,iBAAiB,CAAC,EAClBC,YAAY,IAAI,EAChBC,cAAc,IAAI,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,SAAS,EACT,GAAGC,WACuB;IAC1B,MAAM,CAACC,OAAOC,SAAS,GAAGxB,MAAMyB,QAAQ,CAAC,IAAMnB,UAAUC;IAEzD,MAAMO,oBAAoBd,MAAM0B,WAAW,CACzC,CAAC,EAAEnB,SAAS,EAA6B;QACvCiB,SAASlB,UAAUC;QACnBQ,0BAA0BR;IAC5B,GACA;QAACQ;QAAyBS;KAAS;IAGrC,qBACE,oBAACrB;QACCQ,WAAWA;QACXK,gBAAgBA;QAChBC,WAAWA;QACXH,mBAAmBA;QACnBP,WAAWA;QACXc,WAAWpB,WACTI,MAAM,CAAC,uBAAuB,EAC9B,oCACAW,mBAAmB,KAChBO,CAAAA,QAAQlB,MAAM,CAAC,4BAA4B,GAAGA,MAAM,CAAC,+BAA+B,AAAD,GACtFY,aACEhB,WACEI,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB;QAEFH,aAAaA;QACbS,0BAAAA;QACC,GAAGL,SAAS;qBAEb,oBAACpB;QACC0B,QAAQhB;QACRS,WAAWhB,MAAM,CAAC,2BAA2B;QAC7Cc,mBAAmBA;QACnBC,wBAAwBA;OAEvBP,yBACC,oBAACgB;QAAIR,WAAWhB,MAAM,CAAC,iCAAiC;qBACtD,oBAACD;QAAQ0B,MAAK;UAGhBpB;AAKV,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CustomScrollView } from '../CustomScrollView/CustomScrollView';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { Popper } from '../Popper/Popper';\nimport { Spinner } from '../Spinner/Spinner';\nimport styles from './CustomSelectDropdown.module.css';\n\nexport interface CustomSelectDropdownProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n TrackerOptionsProps {\n targetRef: React.RefObject<HTMLElement>;\n placement?: Placement;\n scrollBoxRef?: React.Ref<HTMLDivElement>;\n fetching?: boolean;\n offsetDistance?: number;\n sameWidth?: boolean;\n forcePortal?: boolean;\n onPlacementChange?: (placement?: Placement) => void;\n}\n\nconst calcIsTop = (placement?: Placement) => placement?.includes('top');\n\nexport const CustomSelectDropdown = ({\n children,\n targetRef,\n scrollBoxRef,\n placement,\n fetching,\n onPlacementChange: parentOnPlacementChange,\n offsetDistance = 0,\n sameWidth = true,\n forcePortal = true,\n autoHideScrollbar,\n autoHideScrollbarDelay,\n className,\n ...restProps\n}: CustomSelectDropdownProps) => {\n const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));\n\n const onPlacementChange = React.useCallback(\n ({ placement }: { placement?: Placement }) => {\n setIsTop(calcIsTop(placement));\n parentOnPlacementChange?.(placement);\n },\n [parentOnPlacementChange, setIsTop],\n );\n\n return (\n <Popper\n targetRef={targetRef}\n offsetDistance={offsetDistance}\n sameWidth={sameWidth}\n onPlacementChange={onPlacementChange}\n placement={placement}\n className={classNames(\n styles['CustomSelectDropdown'],\n 'vkuiInternalCustomSelectDropdown',\n offsetDistance === 0 &&\n (isTop ? styles['CustomSelectDropdown--top'] : styles['CustomSelectDropdown--bottom']),\n sameWidth &&\n classNames(\n styles['CustomSelectDropdown--wide'],\n 'vkuiInternalCustomSelectDropdown--wide',\n ),\n className,\n )}\n forcePortal={forcePortal}\n autoUpdateOnTargetResize\n {...restProps}\n >\n <CustomScrollView\n boxRef={scrollBoxRef}\n className={styles['CustomSelectDropdown__in']}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n >\n {fetching ? (\n <div className={styles['CustomSelectDropdown__fetching']}>\n <Spinner size=\"small\" />\n </div>\n ) : (\n children\n )}\n </CustomScrollView>\n </Popper>\n );\n};\n"],"names":["React","classNames","CustomScrollView","Popper","Spinner","styles","calcIsTop","placement","includes","CustomSelectDropdown","children","targetRef","scrollBoxRef","fetching","onPlacementChange","parentOnPlacementChange","offsetDistance","sameWidth","forcePortal","autoHideScrollbar","autoHideScrollbarDelay","className","restProps","isTop","setIsTop","useState","useCallback","autoUpdateOnTargetResize","boxRef","div","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,gBAAgB,QAAQ,uCAAuC;AAExE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,OAAOC,YAAY,oCAAoC;AAevD,MAAMC,YAAY,CAACC,YAA0BA,WAAWC,SAAS;AAEjE,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZL,SAAS,EACTM,QAAQ,EACRC,mBAAmBC,uBAAuB,EAC1CC,iBAAiB,CAAC,EAClBC,YAAY,IAAI,EAChBC,cAAc,IAAI,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,SAAS,EACT,GAAGC,WACuB;IAC1B,MAAM,CAACC,OAAOC,SAAS,GAAGxB,MAAMyB,QAAQ,CAAC,IAAMnB,UAAUC;IAEzD,MAAMO,oBAAoBd,MAAM0B,WAAW,CACzC,CAAC,EAAEnB,SAAS,EAA6B;QACvCiB,SAASlB,UAAUC;QACnBQ,0BAA0BR;IAC5B,GACA;QAACQ;QAAyBS;KAAS;IAGrC,qBACE,oBAACrB;QACCQ,WAAWA;QACXK,gBAAgBA;QAChBC,WAAWA;QACXH,mBAAmBA;QACnBP,WAAWA;QACXc,WAAWpB,WACTI,MAAM,CAAC,uBAAuB,EAC9B,oCACAW,mBAAmB,KAChBO,CAAAA,QAAQlB,MAAM,CAAC,4BAA4B,GAAGA,MAAM,CAAC,+BAA+B,AAAD,GACtFY,aACEhB,WACEI,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB;QAEFH,aAAaA;QACbS,0BAAAA;QACC,GAAGL,SAAS;qBAEb,oBAACpB;QACC0B,QAAQhB;QACRS,WAAWhB,MAAM,CAAC,2BAA2B;QAC7Cc,mBAAmBA;QACnBC,wBAAwBA;OAEvBP,yBACC,oBAACgB;QAAIR,WAAWhB,MAAM,CAAC,iCAAiC;qBACtD,oBAACD;QAAQ0B,MAAK;UAGhBpB;AAKV,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface CustomSelectOptionProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Вставляет основной контент.
      * @deprecated since v6.0.0

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ~~HasRootRef~~ } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelectOption--sizeY-none'],\n [SizeType.REGULAR]: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps\n extends ~~React.HTMLAttributes~~<HTMLDivElement~~>,\n HasRootRef<HTMLDivElement~~> {\n /*\n Вставляет основной контент.\n * @deprecated since v6.0.0\n /\n option?: any;\n /\n Добавляет описание под основным блоком.\n /\n description?: React.ReactNode;\n /\n Вставляет элемент в начало блока перед основным контентом.\n * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n /\n before?: React.ReactNode;\n /\n Вставляет элемент в конец блока после основного контента.\n * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n /\n after?: React.ReactNode;\n /\n Позволяет создавать вложенность.\n /\n hierarchy?: number;\n /\n Включает состояние выбранного элемента списка.\n /\n selected?: boolean;\n /\n Включает состояние наведения.\n /\n hovered?: boolean;\n /\n Включает состояние фокуса.\n /\n focused?: boolean;\n /\n Блокирует весь блок.\n \n > ⚠️ Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select) или [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect), то свойство явно должно выставляться только через структуру `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n * опции.\n /\n disabled?: boolean;\n}\n\nconst warn = warnOnce('CustomSelectOption');\n\n/\n @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n children,\n hierarchy = 0,\n hovered,\n selected,\n before,\n after,\n option,\n description,\n disabled,\n style: styleProp,\n className,\n onClick,\n ...restProps\n}: CustomSelectOptionProps) => {\n const title = typeof children === 'string' ? children : undefined;\n const { sizeY = 'none' } = useAdaptivity();\n const style = React.useMemo(\n () =>\n hierarchy > 0\n ? {\n '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n ...styleProp,\n }\n : styleProp,\n [hierarchy, styleProp],\n );\n\n if (!!option && process.env.NODE_ENV === 'development') {\n // TODO [>=6]: Удалить св-во `option`\n warn('Свойство option было добавлено по ошибке и будет удалено в v6.0.0.');\n }\n\n return (\n <Paragraph\n {...restProps}\n onClick={disabled ? undefined : onClick}\n Component=\"div\"\n role=\"option\"\n title={title}\n aria-disabled={disabled}\n aria-selected={selected}\n className={classNames(\n styles['CustomSelectOption'],\n sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n hovered && !disabled && styles['CustomSelectOption--hover'],\n disabled && styles['CustomSelectOption--disabled'],\n hierarchy > 0 && styles['CustomSelectOption--hierarchy'],\n className,\n )}\n style={style}\n >\n {hasReactNode(before) && <div className={styles['CustomSelectOption__before']}>{before}</div>}\n <div className={styles['CustomSelectOption__main']}>\n <div className={styles['CustomSelectOption__children']}>{children}</div>\n {hasReactNode(description) && (\n <Footnote className={styles['CustomSelectOption__description']}>{description}</Footnote>\n )}\n </div>\n <div className={styles['CustomSelectOption__after']}>\n {hasReactNode(after) && <div>{after}</div>}\n {selected && <Icon16Done className={styles['CustomSelectOption__selectedIcon']} />}\n </div>\n </Paragraph>\n );\n};\n"],"names":["React","Icon16Done","classNames","hasReactNode","useAdaptivity","SizeType","warnOnce","Footnote","Paragraph","styles","sizeYClassNames","none","REGULAR","warn","CustomSelectOption","children","hierarchy","hovered","selected","before","after","option","description","disabled","style","styleProp","className","onClick","restProps","title","undefined","sizeY","useMemo","process","env","NODE_ENV","Component","role","aria-disabled","aria-selected","COMPACT","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,oCAAoC;AACjE;~~AAkDA~~,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,QAAQ,OAAOd,aAAa,WAAWA,WAAWe;IACxD,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAMoB,QAAQxB,MAAMgC,OAAO,CACzB,IACEhB,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,WACN;QAACT;QAAWS;KAAU;IAGxB,IAAI,CAAC,CAACJ,UAAUY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACtD,qCAAqC;QACrCtB,KAAK;IACP;IAEA,qBACE,oBAACL;QACE,GAAGoB,SAAS;QACbD,SAASJ,WAAWO,YAAYH;QAChCS,WAAU;QACVC,MAAK;QACLR,OAAOA;QACPS,iBAAef;QACfgB,iBAAerB;QACfQ,WAAWxB,WACTO,MAAM,CAAC,qBAAqB,EAC5BsB,UAAU1B,SAASmC,OAAO,IAAI9B,eAAe,CAACqB,MAAM,EACpDd,WAAW,CAACM,YAAYd,MAAM,CAAC,4BAA4B,EAC3Dc,YAAYd,MAAM,CAAC,+BAA+B,EAClDO,YAAY,KAAKP,MAAM,CAAC,gCAAgC,EACxDiB;QAEFF,OAAOA;OAENrB,aAAagB,yBAAW,oBAACsB;QAAIf,WAAWjB,MAAM,CAAC,6BAA6B;OAAGU,uBAChF,oBAACsB;QAAIf,WAAWjB,MAAM,CAAC,2BAA2B;qBAChD,oBAACgC;QAAIf,WAAWjB,MAAM,CAAC,+BAA+B;OAAGM,WACxDZ,aAAamB,8BACZ,oBAACf;QAASmB,WAAWjB,MAAM,CAAC,kCAAkC;OAAGa,6BAGrE,oBAACmB;QAAIf,WAAWjB,MAAM,CAAC,4BAA4B;OAChDN,aAAaiB,wBAAU,oBAACqB,aAAKrB,QAC7BF,0BAAY,oBAACjB;QAAWyB,WAAWjB,MAAM,CAAC,mCAAmC;;AAItF,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelectOption--sizeY-none'],\n [SizeType.REGULAR]: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Вставляет основной контент.\n * @deprecated since v6.0.0\n /\n option?: any;\n /\n Добавляет описание под основным блоком.\n /\n description?: React.ReactNode;\n /\n Вставляет элемент в начало блока перед основным контентом.\n * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n /\n before?: React.ReactNode;\n /\n Вставляет элемент в конец блока после основного контента.\n * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n /\n after?: React.ReactNode;\n /\n Позволяет создавать вложенность.\n /\n hierarchy?: number;\n /\n Включает состояние выбранного элемента списка.\n /\n selected?: boolean;\n /\n Включает состояние наведения.\n /\n hovered?: boolean;\n /\n Включает состояние фокуса.\n /\n focused?: boolean;\n /\n Блокирует весь блок.\n \n > ⚠️ Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select) или [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect), то свойство явно должно выставляться только через структуру `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n * опции.\n /\n disabled?: boolean;\n}\n\nconst warn = warnOnce('CustomSelectOption');\n\n/\n @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n children,\n hierarchy = 0,\n hovered,\n selected,\n before,\n after,\n option,\n description,\n disabled,\n style: styleProp,\n className,\n onClick,\n ...restProps\n}: CustomSelectOptionProps) => {\n const title = typeof children === 'string' ? children : undefined;\n const { sizeY = 'none' } = useAdaptivity();\n const style = React.useMemo(\n () =>\n hierarchy > 0\n ? {\n '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n ...styleProp,\n }\n : styleProp,\n [hierarchy, styleProp],\n );\n\n if (!!option && process.env.NODE_ENV === 'development') {\n // TODO [>=6]: Удалить св-во `option`\n warn('Свойство option было добавлено по ошибке и будет удалено в v6.0.0.');\n }\n\n return (\n <Paragraph\n {...restProps}\n onClick={disabled ? undefined : onClick}\n Component=\"div\"\n role=\"option\"\n title={title}\n aria-disabled={disabled}\n aria-selected={selected}\n className={classNames(\n styles['CustomSelectOption'],\n sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n hovered && !disabled && styles['CustomSelectOption--hover'],\n disabled && styles['CustomSelectOption--disabled'],\n hierarchy > 0 && styles['CustomSelectOption--hierarchy'],\n className,\n )}\n style={style}\n >\n {hasReactNode(before) && <div className={styles['CustomSelectOption__before']}>{before}</div>}\n <div className={styles['CustomSelectOption__main']}>\n <div className={styles['CustomSelectOption__children']}>{children}</div>\n {hasReactNode(description) && (\n <Footnote className={styles['CustomSelectOption__description']}>{description}</Footnote>\n )}\n </div>\n <div className={styles['CustomSelectOption__after']}>\n {hasReactNode(after) && <div>{after}</div>}\n {selected && <Icon16Done className={styles['CustomSelectOption__selectedIcon']} />}\n </div>\n </Paragraph>\n );\n};\n"],"names":["React","Icon16Done","classNames","hasReactNode","useAdaptivity","SizeType","warnOnce","Footnote","Paragraph","styles","sizeYClassNames","none","REGULAR","warn","CustomSelectOption","children","hierarchy","hovered","selected","before","after","option","description","disabled","style","styleProp","className","onClick","restProps","title","undefined","sizeY","useMemo","process","env","NODE_ENV","Component","role","aria-disabled","aria-selected","COMPACT","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,oCAAoC;AACjE;AAgDA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,QAAQ,OAAOd,aAAa,WAAWA,WAAWe;IACxD,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAMoB,QAAQxB,MAAMgC,OAAO,CACzB,IACEhB,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,WACN;QAACT;QAAWS;KAAU;IAGxB,IAAI,CAAC,CAACJ,UAAUY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACtD,qCAAqC;QACrCtB,KAAK;IACP;IAEA,qBACE,oBAACL;QACE,GAAGoB,SAAS;QACbD,SAASJ,WAAWO,YAAYH;QAChCS,WAAU;QACVC,MAAK;QACLR,OAAOA;QACPS,iBAAef;QACfgB,iBAAerB;QACfQ,WAAWxB,WACTO,MAAM,CAAC,qBAAqB,EAC5BsB,UAAU1B,SAASmC,OAAO,IAAI9B,eAAe,CAACqB,MAAM,EACpDd,WAAW,CAACM,YAAYd,MAAM,CAAC,4BAA4B,EAC3Dc,YAAYd,MAAM,CAAC,+BAA+B,EAClDO,YAAY,KAAKP,MAAM,CAAC,gCAAgC,EACxDiB;QAEFF,OAAOA;OAENrB,aAAagB,yBAAW,oBAACsB;QAAIf,WAAWjB,MAAM,CAAC,6BAA6B;OAAGU,uBAChF,oBAACsB;QAAIf,WAAWjB,MAAM,CAAC,2BAA2B;qBAChD,oBAACgC;QAAIf,WAAWjB,MAAM,CAAC,+BAA+B;OAAGM,WACxDZ,aAAamB,8BACZ,oBAACf;QAASmB,WAAWjB,MAAM,CAAC,kCAAkC;OAAGa,6BAGrE,oBAACmB;QAAIf,WAAWjB,MAAM,CAAC,4BAA4B;OAChDN,aAAaiB,wBAAU,oBAACqB,aAAKrB,QAC7BF,0BAAY,oBAACjB;QAAWyB,WAAWjB,MAAM,CAAC,mCAAmC;;AAItF,EAAE"}

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 export type DatePickerDateFormat = {
     day: number;
     month: number;
     year: number;
 };
-export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {
+export interface DatePickerProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {
     min?: DatePickerDateFormat;
     max?: DatePickerDateFormat;
     name?: string;

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { classNames, leadingZero } from '@vkontakte/vkjs';
+import { leadingZero } from '@vkontakte/vkjs';
 import { range } from '../../helpers/range';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { Input } from '../Input/Input';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './DatePicker.module.css';
 const DefaultMonths = [
     'Января',
@@ -43,7 +44,7 @@ const DatePickerCustom = ({ name, min = {
     day: 31,
     month: 12,
     year: 2100
-}, dayPlaceholder, monthPlaceholder, yearPlaceholder, popupDirection, defaultValue, monthNames, day = 0, month = 0, year = 0, onDateChange, disabled, className, ...restProps })=>{
+}, dayPlaceholder, monthPlaceholder, yearPlaceholder, popupDirection, defaultValue, monthNames, day = 0, month = 0, year = 0, onDateChange, disabled, ...restProps })=>{
     const onSelectChange = (e)=>{
         onDateChange?.({
             day,
@@ -64,8 +65,8 @@ const DatePickerCustom = ({ name, min = {
             label: String(value),
             value: value
         }));
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['DatePicker'], className),
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['DatePicker'],
         ...restProps
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['DatePicker__container']

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, leadingZero } from '@vkontakte/vkjs';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input } from '../Input/Input';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n 'Января',\n 'Февраля',\n 'Марта',\n 'Апреля',\n 'Мая',\n 'Июня',\n 'Июля',\n 'Августа',\n 'Сентября',\n 'Октября',\n 'Ноября',\n 'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n day: number;\n month: number;\n year: number;\n};\n\nexport interface DatePickerProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' \| 'min' \| 'max'> {\n min?: DatePickerDateFormat;\n max?: DatePickerDateFormat;\n name?: string;\n defaultValue?: DatePickerDateFormat;\n popupDirection?: 'top' \| 'bottom';\n monthNames?: string[];\n dayPlaceholder?: string;\n monthPlaceholder?: string;\n yearPlaceholder?: string;\n onDateChange?: (value: DatePickerDateFormat) => void;\n disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({ day = 0, month = 0, year = 0 }: Partial<DatePickerDateFormat>) {\n return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n const splited = date.split('-');\n\n return {\n day: Number(splited[2]),\n month: Number(splited[1]),\n year: Number(splited[0]),\n };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n return month ? new Date(year \|\| 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n name,\n min = { day: 0, month: 0, year: 0 },\n max = { day: 31, month: 12, year: 2100 },\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n popupDirection,\n defaultValue,\n monthNames,\n day = 0,\n month = 0,\n year = 0,\n onDateChange,\n disabled,\n className,\n ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n onDateChange?.({\n day,\n month,\n year,\n [e.target.name]: Number(e.target.value),\n });\n };\n const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n label: String(value),\n value,\n }));\n const monthOptions = (monthNames \|\| DefaultMonths).map((name, index) => ({\n label: name,\n value: index + 1,\n }));\n const yearOptions = range(max.year, min.year).map((value) => ({\n label: String(value),\n value: value,\n }));\n return (\n <div className={classNames(styles['DatePicker'], className)} {...restProps}>\n <div className={styles['DatePicker__container']}>\n <div className={styles['DatePicker__day']}>\n <CustomSelect\n name=\"day\"\n value={day}\n options={dayOptions}\n placeholder={dayPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n <div className={styles['DatePicker__month']}>\n <CustomSelect\n className={styles['DatePicker__monthSelect']}\n name=\"month\"\n value={month}\n options={monthOptions}\n placeholder={monthPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n <div className={styles['DatePicker__year']}>\n <CustomSelect\n name=\"year\"\n value={year}\n options={yearOptions}\n placeholder={yearPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n </div>\n <input type=\"hidden\" name={name} value={convertToInputFormat({ day, month, year })} />\n </div>\n );\n};\n\nconst DatePickerNative = ({\n min = { day: 0, month: 0, year: 0 },\n max = { day: 31, month: 12, year: 2100 },\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n popupDirection,\n defaultValue,\n day,\n month,\n year,\n onDateChange,\n ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n const defProps =\n day && month && year ? { defaultValue: convertToInputFormat({ day, month, year }) } : {};\n const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n onDateChange?.(parseInputDate(e.currentTarget.value));\n },\n [onDateChange],\n );\n return (\n <Input\n {...restProps}\n type=\"date\"\n onChange={onStringChange}\n min={convertToInputFormat(min)}\n max={convertToInputFormat(max)}\n {...defProps}\n />\n );\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n const hasPointer = useAdaptivityHasPointer();\n const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({\n day: defaultValue?.day \|\| 0,\n month: defaultValue?.month \|\| 0,\n year: defaultValue?.year \|\| 0,\n }));\n\n const onDateChange = React.useCallback(\n (update: DatePickerDateFormat) => {\n setValue(update);\n props.onDateChange && props.onDateChange({ ...update });\n },\n [props],\n );\n\n const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"names":["React","classNames","leadingZero","range","useAdaptivityHasPointer","CustomSelect","Input","styles","DefaultMonths","convertToInputFormat","day","month","year","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","className","restProps","onSelectChange","e","target","value","dayOptions","map","label","String","monthOptions","index","yearOptions","div","options","placeholder","onChange","input","type","DatePickerNative","defProps","onStringChange","useCallback","currentTarget","DatePicker","props","hasPointer","setValue","useState","update","Cmp"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { leadingZero } from '@vkontakte/vkjs';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input } from '../Input/Input';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n 'Января',\n 'Февраля',\n 'Марта',\n 'Апреля',\n 'Мая',\n 'Июня',\n 'Июля',\n 'Августа',\n 'Сентября',\n 'Октября',\n 'Ноября',\n 'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n day: number;\n month: number;\n year: number;\n};\n\nexport interface DatePickerProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'defaultValue' \| 'min' \| 'max'> {\n min?: DatePickerDateFormat;\n max?: DatePickerDateFormat;\n name?: string;\n defaultValue?: DatePickerDateFormat;\n popupDirection?: 'top' \| 'bottom';\n monthNames?: string[];\n dayPlaceholder?: string;\n monthPlaceholder?: string;\n yearPlaceholder?: string;\n onDateChange?: (value: DatePickerDateFormat) => void;\n disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({ day = 0, month = 0, year = 0 }: Partial<DatePickerDateFormat>) {\n return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n const splited = date.split('-');\n\n return {\n day: Number(splited[2]),\n month: Number(splited[1]),\n year: Number(splited[0]),\n };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n return month ? new Date(year \|\| 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n name,\n min = { day: 0, month: 0, year: 0 },\n max = { day: 31, month: 12, year: 2100 },\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n popupDirection,\n defaultValue,\n monthNames,\n day = 0,\n month = 0,\n year = 0,\n onDateChange,\n disabled,\n ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n onDateChange?.({\n day,\n month,\n year,\n [e.target.name]: Number(e.target.value),\n });\n };\n const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n label: String(value),\n value,\n }));\n const monthOptions = (monthNames \|\| DefaultMonths).map((name, index) => ({\n label: name,\n value: index + 1,\n }));\n const yearOptions = range(max.year, min.year).map((value) => ({\n label: String(value),\n value: value,\n }));\n return (\n <RootComponent baseClassName={styles['DatePicker']} {...restProps}>\n <div className={styles['DatePicker__container']}>\n <div className={styles['DatePicker__day']}>\n <CustomSelect\n name=\"day\"\n value={day}\n options={dayOptions}\n placeholder={dayPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n <div className={styles['DatePicker__month']}>\n <CustomSelect\n className={styles['DatePicker__monthSelect']}\n name=\"month\"\n value={month}\n options={monthOptions}\n placeholder={monthPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n <div className={styles['DatePicker__year']}>\n <CustomSelect\n name=\"year\"\n value={year}\n options={yearOptions}\n placeholder={yearPlaceholder}\n popupDirection={popupDirection}\n onChange={onSelectChange}\n disabled={disabled}\n />\n </div>\n </div>\n <input type=\"hidden\" name={name} value={convertToInputFormat({ day, month, year })} />\n </RootComponent>\n );\n};\n\nconst DatePickerNative = ({\n min = { day: 0, month: 0, year: 0 },\n max = { day: 31, month: 12, year: 2100 },\n dayPlaceholder,\n monthPlaceholder,\n yearPlaceholder,\n popupDirection,\n defaultValue,\n day,\n month,\n year,\n onDateChange,\n ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n const defProps =\n day && month && year ? { defaultValue: convertToInputFormat({ day, month, year }) } : {};\n const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n onDateChange?.(parseInputDate(e.currentTarget.value));\n },\n [onDateChange],\n );\n return (\n <Input\n {...restProps}\n type=\"date\"\n onChange={onStringChange}\n min={convertToInputFormat(min)}\n max={convertToInputFormat(max)}\n {...defProps}\n />\n );\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n const hasPointer = useAdaptivityHasPointer();\n const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({\n day: defaultValue?.day \|\| 0,\n month: defaultValue?.month \|\| 0,\n year: defaultValue?.year \|\| 0,\n }));\n\n const onDateChange = React.useCallback(\n (update: DatePickerDateFormat) => {\n setValue(update);\n props.onDateChange && props.onDateChange({ ...update });\n },\n [props],\n );\n\n const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"names":["React","leadingZero","range","useAdaptivityHasPointer","CustomSelect","Input","RootComponent","styles","DefaultMonths","convertToInputFormat","day","month","year","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","restProps","onSelectChange","e","target","value","dayOptions","map","label","String","monthOptions","index","yearOptions","baseClassName","div","className","options","placeholder","onChange","input","type","DatePickerNative","defProps","onStringChange","useCallback","currentTarget","DatePicker","props","hasPointer","setValue","useState","update","Cmp"],"mappings":"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"}

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
-}
+import { HTMLAttributesWithRootRef } from '../../types';
+export type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
  */
-export declare const Div: ({ children, getRootRef, className, ...restProps }: DivProps) => React.JSX.Element;
+export declare const Div: (props: DivProps) => React.JSX.Element;

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

@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Div.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
- */ export const Div = ({ children, getRootRef, className, ...restProps })=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        ...restProps,
-        ref: getRootRef,
-        className: classNames(styles['Div'], className)
-    }, children);
-};
+ */ export const Div = (props)=>/*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['Div'],
+        ...props
+    });
 //# sourceMappingURL=Div.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~classNames~~ } from '~~@vkontakte/vkjs~~';\nimport { ~~HasRootRef~~ } from '~~../../types~~';\nimport styles from './Div.module.css';\n\nexport ~~interface~~ DivProps~~\n extends~~ ~~React.HTMLAttributes~~<HTMLDivElement~~>,\~~n ~~HasRootRef<HTMLDivElement> {}~~\n\n/*\n @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = (~~{ children, getRootRef, className, ...restProps }~~: DivProps) => ~~{\n return (\n~~ <~~div~~ ~~{...restProps} ref~~={~~getRootRef} className={classNames(~~styles['Div'], ~~className)}>\n~~ {~~children~~}\n ~~</div>\n );\n};\n~~"],"names":["React","~~classNames~~","styles","Div","~~children~~","~~getRootRef~~"~~,"className","restProps","div","ref"~~],"mappings":"AAAA,YAAYA,WAAW,QAAQ;~~AAC~~/B,SAASC,~~UAAU~~,QAAQ,~~kBAAkB~~;~~AAE7C~~,OAAOC,YAAY,mBAAmB;~~AAMtC~~;;CAEC,GACD,OAAO,MAAMC,MAAM,~~CAAC~~,~~EAAEC~~,~~QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGC,WAAqB~~;~~IAC7E~~,~~qBACE~~,~~oBAACC;QAAK,GAAGD,SAAS;QAAEE,KAAKJ;QAAYC,WAAWL,WAAWC,~~MAAM,CAAC,MAAM,~~EAAEI~~;~~OACvEF;AAGP,EAAE~~"}
1	+ {"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Div.module.css';\n\nexport type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = (props: DivProps) => <RootComponent baseClassName={styles['Div']} {...props} />;\n"],"names":["React","RootComponent","styles","Div","props","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,mBAAmB;AAItC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAACC,sBAAoB,oBAACH;QAAcI,eAAeH,MAAM,CAAC,MAAM;QAAG,GAAGE,KAAK;OAAK"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface DropdownIconProps extends React.HTMLAttributes<SVGSVGElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGElement> {
     opened?: boolean;
 }
 export declare const DropdownIcon: ({ opened, className, ...restProps }: DropdownIconProps) => React.JSX.Element;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon20ChevronUp,\n Icon20Dropdown,\n Icon24ChevronDown,\n Icon24ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\n\nexport interface DropdownIconProps extends ~~React.HTMLAttributes~~<SVGSVGElement> {\n opened?: boolean;\n}\n\nexport const DropdownIcon = ({ opened = false, className, ...restProps }: DropdownIconProps) => {\n const { sizeY } = useAdaptivityConditionalRender();\n const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n return (\n <React.Fragment>\n {sizeY.compact && (\n <IconCompact className={classNames(sizeY.compact.className, className)} {...restProps} />\n )}\n {sizeY.regular && (\n <IconRegular className={classNames(sizeY.regular.className, className)} {...restProps} />\n )}\n </React.Fragment>\n );\n};\n"],"names":["React","Icon20ChevronUp","Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","classNames","useAdaptivityConditionalRender","DropdownIcon","opened","className","restProps","sizeY","IconCompact","IconRegular","Fragment","compact","regular"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,QACV,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;~~AAM5F~~,OAAO,MAAMC,eAAe,CAAC,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAA8B;IACzF,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAClB,MAAMM,cAAcJ,SAASP,kBAAkBC;IAC/C,MAAMW,cAAcL,SAASJ,kBAAkBD;IAE/C,qBACE,oBAACH,MAAMc,QAAQ,QACZH,MAAMI,OAAO,kBACZ,oBAACH;QAAYH,WAAWJ,WAAWM,MAAMI,OAAO,CAACN,SAAS,EAAEA;QAAa,GAAGC,SAAS;QAEtFC,MAAMK,OAAO,kBACZ,oBAACH;QAAYJ,WAAWJ,WAAWM,MAAMK,OAAO,CAACP,SAAS,EAAEA;QAAa,GAAGC,SAAS;;AAI7F,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Icon20ChevronUp,\n Icon20Dropdown,\n Icon24ChevronDown,\n Icon24ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HTMLAttributesWithRootRef } from '../../types';\n\nexport interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGElement> {\n opened?: boolean;\n}\n\nexport const DropdownIcon = ({ opened = false, className, ...restProps }: DropdownIconProps) => {\n const { sizeY } = useAdaptivityConditionalRender();\n const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n return (\n <React.Fragment>\n {sizeY.compact && (\n <IconCompact className={classNames(sizeY.compact.className, className)} {...restProps} />\n )}\n {sizeY.regular && (\n <IconRegular className={classNames(sizeY.regular.className, className)} {...restProps} />\n )}\n </React.Fragment>\n );\n};\n"],"names":["React","Icon20ChevronUp","Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","classNames","useAdaptivityConditionalRender","DropdownIcon","opened","className","restProps","sizeY","IconCompact","IconRegular","Fragment","compact","regular"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,QACV,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAO5F,OAAO,MAAMC,eAAe,CAAC,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAA8B;IACzF,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAClB,MAAMM,cAAcJ,SAASP,kBAAkBC;IAC/C,MAAMW,cAAcL,SAASJ,kBAAkBD;IAE/C,qBACE,oBAACH,MAAMc,QAAQ,QACZH,MAAMI,OAAO,kBACZ,oBAACH;QAAYH,WAAWJ,WAAWM,MAAMI,OAAO,CAACN,SAAS,EAAEA;QAAa,GAAGC,SAAS;QAEtFC,MAAMK,OAAO,kBACZ,oBAACH;QAAYJ,WAAWJ,WAAWM,MAAMK,OAAO,CAACP,SAAS,EAAEA;QAAa,GAAGC,SAAS;;AAI7F,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     tabbar?: React.ReactNode;
     activeStory: string;
     children: React.ReactElement | Iterable<React.ReactElement>;
@@ -7,4 +8,4 @@ export interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic
  */
-export declare const Epic: (props: EpicProps) => React.JSX.Element;
+export declare const Epic: ({ activeStory, tabbar, children, ...restProps }: EpicProps) => React.JSX.Element;

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

@@ -2,18 +2,18 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { getNavId } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { ScrollSaver } from './ScrollSaver';
 import styles from './Epic.module.css';
 const warn = warnOnce('Epic');
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic
- */ export const Epic = (props)=>{
+ */ export const Epic = ({ activeStory, tabbar, children, ...restProps })=>{
     const scroll = React.useRef({}).current;
-    const { activeStory, tabbar, children, className, ...restProps } = props;
     const story = React.Children.toArray(children).find((story)=>/*#__PURE__*/ React.isValidElement(story) && getNavId(story.props, warn) === activeStory) ?? null;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar', className)
+        baseClassName: classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar')
     }, /*#__PURE__*/ React.createElement(ScrollSaver, {
         key: activeStory,
         initialScroll: scroll[activeStory] || 0,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends ~~React.HTMLAttributes~~<HTMLDivElement> {\n tabbar?: React.ReactNode;\n activeStory: string;\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\nconst warn = warnOnce('Epic');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = (~~props~~: EpicProps) => {\n const scroll = React.useRef<{ [key: string]: number }>({}).current;\n ~~const { activeStory, tabbar, children, className, ...restProps } = props;\n~~\n const story =\n (React.Children.toArray(children).find(\n (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n ) as React.ReactElement \| undefined) ?? null;\n\n return (\n <~~div~~\n {...restProps}\n ~~className~~={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar'~~, className~~)}\n >\n <ScrollSaver\n key={activeStory}\n initialScroll={scroll[activeStory] \|\| 0}\n saveScroll={(value) => (scroll[activeStory] = value)}\n >\n {story}\n </ScrollSaver>\n {tabbar}\n </~~div~~>\n );\n};\n"],"names":["React","classNames","getNavId","warnOnce","ScrollSaver","styles","warn","Epic","~~props~~","~~scroll~~","~~useRef~~","~~current~~","~~activeStory~~","~~tabbar~~","~~children~~","~~className","restProps","~~story","Children","toArray","find","isValidElement","~~div~~","key","initialScroll","saveScroll","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;~~AAC9C~~,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAQvC,MAAMC,~~OAAOH~~,SAAS;AAEtB;;CAEC,GACD,OAAO,~~MAAMI~~,OAAO,~~CAACC;IACnB~~,~~MAAMC~~,~~SAAST~~,~~MAAMU~~,MAAM,~~CAA4B~~,~~CAAC~~,GAAGC,~~OAAO~~;~~IAClE~~,~~MAAM~~,~~EAAEC~~,~~WAAW~~,~~EAAEC,~~MAAM,~~EAAEC~~,~~QAAQ~~,~~EAAEC,SAAS,EAAE,~~GAAGC,~~WAAW,GAAGR~~;~~IAEnE~~,~~MAAMS~~,QACJ,~~AAACjB~~,~~MAAMkB~~,QAAQ,CAACC,OAAO,~~CAACL~~,~~UAAUM~~,IAAI,CACpC,CAACH,~~sBAAUjB~~,~~MAAMqB~~,cAAc,CAACJ,~~UAAUf~~,~~SAASe~~,~~MAAMT~~,KAAK,~~EAAEF~~,~~UAAUM~~,gBACpC;IAE1C,qBACE,~~oBAACU~~;QACE,~~GAAGN~~,SAAS;~~QACbD~~,~~WAAWd~~,~~WAAWI~~,MAAM,CAAC,OAAO,~~EAAEQ~~,UAAU~~,+BAA+BE~~;~~qBAE/E~~,~~oBAACX~~;~~QACCmB~~,~~KAAKX~~;~~QACLY~~,~~eAAef~~,MAAM,~~CAACG~~,YAAY,IAAI;~~QACtCa~~,YAAY,CAACC,~~QAAWjB~~,MAAM,~~CAACG~~,YAAY,~~GAAGc~~;~~OAE7CT~~,~~QAEFJ~~;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n tabbar?: React.ReactNode;\n activeStory: string;\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\nconst warn = warnOnce('Epic');\n\n/*\n @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = ({ activeStory, tabbar, children, ...restProps }: EpicProps) => {\n const scroll = React.useRef<{ [key: string]: number }>({}).current;\n\n const story =\n (React.Children.toArray(children).find(\n (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n ) as React.ReactElement \| undefined) ?? null;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar')}\n >\n <ScrollSaver\n key={activeStory}\n initialScroll={scroll[activeStory] \|\| 0}\n saveScroll={(value) => (scroll[activeStory] = value)}\n >\n {story}\n </ScrollSaver>\n {tabbar}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","getNavId","warnOnce","RootComponent","ScrollSaver","styles","warn","Epic","activeStory","tabbar","children","restProps","scroll","useRef","current","story","Children","toArray","find","isValidElement","props","baseClassName","key","initialScroll","saveScroll","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAQvC,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,OAAO,CAAC,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAsB;IAC7E,MAAMC,SAASb,MAAMc,MAAM,CAA4B,CAAC,GAAGC,OAAO;IAElE,MAAMC,QACJ,AAAChB,MAAMiB,QAAQ,CAACC,OAAO,CAACP,UAAUQ,IAAI,CACpC,CAACH,sBAAUhB,MAAMoB,cAAc,CAACJ,UAAUd,SAASc,MAAMK,KAAK,EAAEd,UAAUE,gBACpC;IAE1C,qBACE,oBAACL;QACE,GAAGQ,SAAS;QACbU,eAAerB,WAAWK,MAAM,CAAC,OAAO,EAAEI,UAAU;qBAEpD,oBAACL;QACCkB,KAAKd;QACLe,eAAeX,MAAM,CAACJ,YAAY,IAAI;QACtCgB,YAAY,CAACC,QAAWb,MAAM,CAACJ,YAAY,GAAGiB;OAE7CV,QAEFN;AAGP,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
-export interface FixedLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
+import { HasRef, HTMLAttributesWithRootRef } from '../../types';
+export interface FixedLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     vertical?: 'top' | 'bottom';
     /**
      * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.

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

@@ -8,6 +8,10 @@ import { Platform } from '../../lib/platform';
 import { SplitColContext } from '../SplitCol/SplitColContext';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
 import styles from './FixedLayout.module.css';
+const stylesVertical = {
+    top: styles['FixedLayout--vertical-top'],
+    bottom: classNames(styles['FixedLayout--vertical-bottom'], 'vkuiInternalFixedLayout--vertical-bottom')
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */ export const FixedLayout = ({ children, style, vertical, getRootRef, getRef, filled, className, useParentWidth, ...restProps })=>{
@@ -38,10 +42,7 @@ import styles from './FixedLayout.module.css';
         ...restProps,
         fixed: true,
         ref: ref,
-        className: classNames(styles['FixedLayout'], platform === Platform.IOS && 'vkuiInternalFixedLayout--ios', filled && styles['FixedLayout--filled'], vertical && ({
-            top: styles['FixedLayout--vertical-top'],
-            bottom: classNames(styles['FixedLayout--vertical-bottom'], 'vkuiInternalFixedLayout--vertical-bottom')
-        })[vertical], className),
+        className: classNames(styles['FixedLayout'], platform === Platform.IOS && 'vkuiInternalFixedLayout--ios', filled && styles['FixedLayout--filled'], vertical && stylesVertical[vertical], className),
         style: {
             ...style,
             width