npm - @vkontakte/vkui - Versions diffs - 5.4.1 → 5.4.3 - Mend

@vkontakte/vkui 5.4.1 → 5.4.3

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

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

@@ -205,12 +205,23 @@ const defaultOptions = [];
             const item = options[focusedOptionIndex];
             setNativeSelectValue(item?.value);
             close();
+            const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === item?.value;
+            if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
+                const event = new Event('change', {
+                    bubbles: true
+                });
+                selectElRef.current?.dispatchEvent(event);
+            }
         }
     }, [
         close,
         focusedOptionIndex,
         isValidIndex,
-        options
+        options,
+        selectElRef,
+        isControlledOutside,
+        props.value,
+        nativeSelectValue
     ]);
     const open = React.useCallback(()=>{
         setOpened(true);
@@ -461,7 +472,9 @@ const defaultOptions = [];
         renderDropdown,
         renderOption
     ]);
-    const clearButtonShown = allowClearButton && !opened && nativeSelectValue !== '';
+    const controlledValueSet = isControlledOutside && props.value !== '';
+    const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';
+    const clearButtonShown = allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);
     const clearButton = React.useMemo(()=>{
         if (!clearButtonShown) {
             return null;

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

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

@@ -44,4 +44,4 @@ export interface CustomSelectOptionProps extends React.HTMLAttributes<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelectOption
  */
-export declare const CustomSelectOption: ({ children, hierarchy, hovered, selected, before, after, option, description, disabled, style: styleProp, className, ...restProps }: CustomSelectOptionProps) => JSX.Element;
+export declare const CustomSelectOption: ({ children, hierarchy, hovered, selected, before, after, option, description, disabled, style: styleProp, className, onClick, ...restProps }: CustomSelectOptionProps) => JSX.Element;

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

@@ -14,7 +14,7 @@ const sizeYClassNames = {
 const warn = warnOnce('CustomSelectOption');
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelectOption
- */ export const CustomSelectOption = ({ children , hierarchy =0 , hovered , selected , before , after , option , description , disabled , style: styleProp , className , ...restProps })=>{
+ */ export const CustomSelectOption = ({ children , hierarchy =0 , hovered , selected , before , after , option , description , disabled , style: styleProp , className , onClick , ...restProps })=>{
     const title = typeof children === 'string' ? children : undefined;
     const { sizeY ='none'  } = useAdaptivity();
     const style = React.useMemo(()=>hierarchy > 0 ? {
@@ -30,6 +30,7 @@ const warn = warnOnce('CustomSelectOption');
     }
     return /*#__PURE__*/ React.createElement(Paragraph, {
         ...restProps,
+        onClick: disabled ? undefined : onClick,
         Component: "div",
         role: "option",
         title: title,

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 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 ...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 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","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;AA8CA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,qBAAqB,CAAC,EACjCC,SAAQ,EACRC,WAAY,EAAC,EACbC,QAAO,EACPC,SAAQ,EACRC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,OAAOC,UAAS,EAChBC,UAAS,~~EACT~~,GAAGC,WACqB,GAAK;IAC7B,MAAMC,QAAQ,~~OAAOb~~,aAAa,WAAWA,~~WAAWc~~,SAAS;IACjE,MAAM,EAAEC,OAAQ,OAAM,EAAE,~~GAAG1B~~;IAC3B,MAAMoB,QAAQxB,~~MAAM+B~~,OAAO,CACzB,~~IACEf~~,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,SAAS,EACf;QAACT;QAAWS;KAAU;IAGxB,IAAI,CAAC,CAACJ,~~UAAUW~~,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACtD,qCAAqC;~~QACrCrB~~,KAAK;IACP,CAAC;IAED,qBACE,oBAACL;QACE,~~GAAGmB~~,SAAS;~~QACbQ~~,WAAU;QACVC,MAAK;QACLR,OAAOA;QACPS,~~iBAAed~~;~~QACfe~~,~~iBAAepB~~;QACfQ,WAAWxB,WACTO,MAAM,CAAC,qBAAqB,~~EAC5BqB~~,~~UAAUzB~~,~~SAASkC~~,OAAO,~~IAAI7B~~,eAAe,~~CAACoB~~,MAAM,~~EACpDb~~,WAAW,CAACM,YAAYd,MAAM,CAAC,4BAA4B,EAC3Dc,YAAYd,MAAM,CAAC,+BAA+B,EAClDO,YAAY,KAAKP,MAAM,CAAC,gCAAgC,EACxDiB;QAEFF,OAAOA;OAENrB,aAAagB,yBAAW,~~oBAACqB~~;~~QAAId~~,WAAWjB,MAAM,CAAC,6BAA6B;OAAGU,uBAChF,~~oBAACqB~~;~~QAAId~~,WAAWjB,MAAM,CAAC,2BAA2B;qBAChD,~~oBAAC+B~~;~~QAAId~~,WAAWjB,MAAM,CAAC,+BAA+B;OAAGM,WACxDZ,aAAamB,8BACZ,oBAACf;QAASmB,WAAWjB,MAAM,CAAC,kCAAkC;OAAGa,6BAGrE,~~oBAACkB~~;~~QAAId~~,WAAWjB,MAAM,CAAC,4BAA4B;OAChDN,aAAaiB,wBAAU,~~oBAACoB~~,~~aAAKpB~~,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 { 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 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;AA8CA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,qBAAqB,CAAC,EACjCC,SAAQ,EACRC,WAAY,EAAC,EACbC,QAAO,EACPC,SAAQ,EACRC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,OAAOC,UAAS,EAChBC,UAAS,EACTC,QAAO,EACP,GAAGC,WACqB,GAAK;IAC7B,MAAMC,QAAQ,OAAOd,aAAa,WAAWA,WAAWe,SAAS;IACjE,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAG3B;IAC3B,MAAMoB,QAAQxB,MAAMgC,OAAO,CACzB,IACEhB,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,SAAS,EACf;QAACT;QAAWS;KAAU;IAGxB,IAAI,CAAC,CAACJ,UAAUY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACtD,qCAAqC;QACrCtB,KAAK;IACP,CAAC;IAED,qBACE,oBAACL;QACE,GAAGoB,SAAS;QACbD,SAASJ,WAAWO,YAAYH,OAAO;QACvCS,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/FormLayoutGroup/FormLayoutGroup.module.css CHANGED Viewed

@@ -4,7 +4,6 @@
     var(--vkui--size_base_padding_horizontal--regular);
   flex-wrap: wrap;
   align-items: flex-start;
-  isolation: isolate;
 }
 .FormLayoutGroup__removable {

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

@@ -2,11 +2,21 @@ import * as React from 'react';
 import { HasComponent, HasRef, HasRootRef } from '../../types';
 export interface HorizontalCellProps extends React.AnchorHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement>, HasComponent {
     size?: 's' | 'm' | 'l';
+    /**
+     * Заголовок
+     */
     header?: React.ReactNode;
+    /**
+     * Дополнительная строка текста под `children`.
+     */
     subtitle?: React.ReactNode;
+    /**
+     * Дополнительная строка текста под `children` и `subtitle`.
+     */
+    extraSubtitle?: React.ReactNode;
     disabled?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */
-export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, ...restProps }: HorizontalCellProps) => JSX.Element;
+export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, ...restProps }: HorizontalCellProps) => JSX.Element;

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

@@ -13,7 +13,7 @@ const CellTypography = ({ size , children , ...restProps })=>{
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */ export const HorizontalCell = ({ className , header , style , subtitle , size ='s' , children =/*#__PURE__*/ React.createElement(Avatar, {
     size: 56
-}) , getRootRef , getRef , ...restProps })=>{
+}) , getRootRef , getRef , extraSubtitle , ...restProps })=>{
     return /*#__PURE__*/ React.createElement("div", {
         ref: getRootRef,
         style: style,
@@ -34,7 +34,9 @@ const CellTypography = ({ size , children , ...restProps })=>{
         size: size
     }, header), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['HorizontalCell__subtitle']
-    }, subtitle))));
+    }, subtitle), hasReactNode(extraSubtitle) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: styles['HorizontalCell__subtitle']
+    }, extraSubtitle))));
 };
 //# sourceMappingURL=HorizontalCell.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n return size === 's' ? (\n <Caption {...restProps}>{children}</Caption>\n ) : (\n <Subhead {...restProps}>{children}</Subhead>\n );\n};\n\nexport interface HorizontalCellProps\n extends React.AnchorHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement>,\n HasComponent {\n size?: 's' \| 'm' \| 'l';\n header?: React.ReactNode;\n subtitle?: React.ReactNode;\n disabled?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n className,\n header,\n style,\n subtitle,\n size = 's',\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n ...restProps\n}: HorizontalCellProps) => {\n return (\n <div\n ref={getRootRef}\n style={style}\n className={classNames(\n styles['HorizontalCell'],\n {\n s: styles['HorizontalCell--size-s'],\n m: styles['HorizontalCell--size-m'],\n l: styles['HorizontalCell--size-l'],\n }[size],\n className,\n )}\n >\n <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n {hasReactNode(children) && (\n <div className={styles['HorizontalCell__image']}>{children}</div>\n )}\n <div className={styles['HorizontalCell__content']}>\n {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n {hasReactNode(subtitle) && (\n <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n )}\n </div>\n </Tappable>\n </div>\n );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","div","ref","s","m","l"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAMjD,MAAMC,iBAAiB,CAAC,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGC,WAAgC,GAAK;IAChF,OAAOF,SAAS,oBACd,oBAACL,SAAYO,WAAYD,0BAEzB,oBAACJ,SAAYK,WAAYD,SAC1B;AACH;~~AAaA~~;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRP,MAAO,IAAG,EACVC,wBAAW,oBAACR;IAAOO,MAAM;GAAM,EAC/BQ,WAAU,EACVC,OAAM,~~EACN~~,~~GAAGP~~,WACiB,GAAK;IACzB,qBACE,~~oBAACQ~~;QACCC,~~KAAKH~~;QACLF,OAAOA;QACPF,WAAWb,WACTO,MAAM,CAAC,iBAAiB,EACxB;~~YACEc~~,~~GAAGd~~,MAAM,CAAC,yBAAyB;~~YACnCe~~,~~GAAGf~~,MAAM,CAAC,yBAAyB;~~YACnCgB~~,~~GAAGhB~~,MAAM,CAAC,yBAAyB;QACrC,CAAC,CAACE,KAAK,EACPI;qBAGF,oBAACV;QAASU,WAAWN,MAAM,CAAC,uBAAuB;QAAEU,YAAYC;QAAS,GAAGP,SAAS;OACnFV,aAAaS,2BACZ,~~oBAACS~~;~~QAAIN~~,WAAWN,MAAM,CAAC,wBAAwB;OAAGG,yBAEpD,~~oBAACS~~;~~QAAIN~~,WAAWN,MAAM,CAAC,0BAA0B;OAC9CN,aAAaa,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDb,aAAae,2BACZ,oBAACX;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGS;AAMtE,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n return size === 's' ? (\n <Caption {...restProps}>{children}</Caption>\n ) : (\n <Subhead {...restProps}>{children}</Subhead>\n );\n};\n\nexport interface HorizontalCellProps\n extends React.AnchorHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement>,\n HasComponent {\n size?: 's' \| 'm' \| 'l';\n /*\n Заголовок\n /\n header?: React.ReactNode;\n /\n Дополнительная строка текста под `children`.\n /\n subtitle?: React.ReactNode;\n /\n Дополнительная строка текста под `children` и `subtitle`.\n /\n extraSubtitle?: React.ReactNode;\n disabled?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n className,\n header,\n style,\n subtitle,\n size = 's',\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n extraSubtitle,\n ...restProps\n}: HorizontalCellProps) => {\n return (\n <div\n ref={getRootRef}\n style={style}\n className={classNames(\n styles['HorizontalCell'],\n {\n s: styles['HorizontalCell--size-s'],\n m: styles['HorizontalCell--size-m'],\n l: styles['HorizontalCell--size-l'],\n }[size],\n className,\n )}\n >\n <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n {hasReactNode(children) && (\n <div className={styles['HorizontalCell__image']}>{children}</div>\n )}\n <div className={styles['HorizontalCell__content']}>\n {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n {hasReactNode(subtitle) && (\n <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n )}\n {hasReactNode(extraSubtitle) && (\n <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n )}\n </div>\n </Tappable>\n </div>\n );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref","s","m","l"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAMjD,MAAMC,iBAAiB,CAAC,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGC,WAAgC,GAAK;IAChF,OAAOF,SAAS,oBACd,oBAACL,SAAYO,WAAYD,0BAEzB,oBAACJ,SAAYK,WAAYD,SAC1B;AACH;AAuBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRP,MAAO,IAAG,EACVC,wBAAW,oBAACR;IAAOO,MAAM;GAAM,EAC/BQ,WAAU,EACVC,OAAM,EACNC,cAAa,EACb,GAAGR,WACiB,GAAK;IACzB,qBACE,oBAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWb,WACTO,MAAM,CAAC,iBAAiB,EACxB;YACEe,GAAGf,MAAM,CAAC,yBAAyB;YACnCgB,GAAGhB,MAAM,CAAC,yBAAyB;YACnCiB,GAAGjB,MAAM,CAAC,yBAAyB;QACrC,CAAC,CAACE,KAAK,EACPI;qBAGF,oBAACV;QAASU,WAAWN,MAAM,CAAC,uBAAuB;QAAEU,YAAYC;QAAS,GAAGP,SAAS;OACnFV,aAAaS,2BACZ,oBAACU;QAAIP,WAAWN,MAAM,CAAC,wBAAwB;OAAGG,yBAEpD,oBAACU;QAAIP,WAAWN,MAAM,CAAC,0BAA0B;OAC9CN,aAAaa,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDb,aAAae,2BACZ,oBAACX;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGS,WAE3Df,aAAakB,gCACZ,oBAACd;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGY;AAMtE,EAAE"}

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

@@ -1,4 +1,8 @@
 .HorizontalCell {
+  --vkui_internal--side_cell_gap: calc(
+    var(--vkui--size_base_padding_horizontal--regular) - var(--vkui--spacing_size_s)
+  );
   display: flex;
   font-family: var(--vkui--font_family_base);
 }
@@ -13,6 +17,12 @@
   font-family: inherit;
 }
+/* Перебиваем селектор в Tappable--sizeX-(compact|none) */
+.HorizontalCell .HorizontalCell__body {
+  border-radius: var(--vkui--size_border_radius--regular);
+}
 .HorizontalCell__content {
   color: var(--vkui--color_text_primary);
   word-break: break-all;
@@ -28,11 +38,16 @@
 }
 .HorizontalCell--size-s {
-  max-width: 80px;
+  --vkui_internal--side_cell_gap: calc(
+    var(--vkui--size_base_padding_horizontal--regular) - var(--vkui--spacing_size_m)
+  );
+  --vkui_internal--side_cell_width: calc(72px + var(--vkui_internal--side_cell_gap));
+  max-width: 72px;
 }
 .HorizontalCell__image {
-  padding: 4px 6px;
+  padding: 4px var(--vkui--spacing_size_s);
 }
 .HorizontalCell__content {
@@ -41,7 +56,7 @@
 }
 .HorizontalCell--size-s .HorizontalCell__image {
-  padding: 4px 8px;
+  padding: 4px var(--vkui--spacing_size_m);
 }
 .HorizontalCell--size-s .HorizontalCell__content {
@@ -50,6 +65,8 @@
 }
 .HorizontalCell--size-m {
+  --vkui_internal--side_cell_width: calc(100px + var(--vkui_internal--side_cell_gap));
   width: 100px;
 }
@@ -60,20 +77,15 @@
 .HorizontalCell:first-child::before,
 .HorizontalCell:last-child::after {
   content: '';
-  min-width: 10px;
-}
-.HorizontalCell--size-s:first-child::before,
-.HorizontalCell--size-s:last-child::after {
-  min-width: 8px;
+  min-width: var(--vkui_internal--side_cell_gap);
 }
 .HorizontalCell--size-s:first-child,
 .HorizontalCell--size-s:last-child {
-  max-width: 88px;
+  max-width: var(--vkui_internal--side_cell_width);
 }
 .HorizontalCell--size-m:first-child,
 .HorizontalCell--size-m:last-child {
-  width: 110px;
+  width: var(--vkui_internal--side_cell_width);
 }

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

@@ -61,7 +61,7 @@ export { ImageBaseContext };
             width: size,
             height: size
         },
-        className: classNames(className, styles['ImageBase'], sizeClassName, withBorder && styles['ImageBase--withBorder'], loaded && styles['ImageBase--loaded']),
+        className: classNames(className, styles['ImageBase'], sizeClassName, loaded && styles['ImageBase--loaded']),
         role: hasSrc ? 'img' : 'presentation',
         "aria-label": ariaLabel,
         onClick: onClick
@@ -83,7 +83,10 @@ export { ImageBaseContext };
         onError: handleImageError
     }), fallbackIcon && /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['ImageBase__fallback'])
-    }, fallbackIcon), children));
+    }, fallbackIcon), children, withBorder && /*#__PURE__*/ React.createElement("div", {
+        "aria-hidden": true,
+        className: styles['ImageBase__border']
+    })));
 };
 ImageBase.Badge = ImageBaseBadge;
 ImageBase.Overlay = ImageBaseOverlay;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /*\n Задаёт размер картинки.\n \n Используйте размеры заданные дизайн-системой `16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 56 \| 64 \| 72 \| 80 \| 88 \| 96`.\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n /\n size?: ImageBaseSize \| number;\n /\n Включает или отключает обводку.\n /\n withBorder?: boolean;\n /\n Фолбек на случай, если картинка не прогрузилась.\n \n > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n \n > ⚠️ Может перекрывать `children`.\n /\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n getRef,\n size = 24,\n width,\n height,\n style,\n className,\n getRootRef,\n withBorder = true,\n 'fallbackIcon': fallbackIconProp,\n children,\n 'aria-label': ariaLabel,\n onClick,\n onLoad,\n onError,\n ...restProps\n}: ImageBaseProps) => {\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const hasSrc = src \|\| srcSet;\n const needShowFallbackIcon = (failed \|\| !hasSrc) && React.isValidElement(fallbackIconProp);\n\n const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (fallbackIcon) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n const sizeClassName = (() => {\n switch (size) {\n case 28:\n return styles['ImageBase--size-28'];\n case 32:\n return styles['ImageBase--size-32'];\n case 40:\n return styles['ImageBase--size-40'];\n case 48:\n return styles['ImageBase--size-48'];\n case 72:\n return styles['ImageBase--size-72'];\n }\n\n return null;\n })();\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <div\n {...restProps}\n ref={getRootRef}\n style={{ ...style, width: size, height: size }}\n className={classNames(\n className,\n styles['ImageBase'],\n sizeClassName,\n ~~withBorder && styles['ImageBase--withBorder'],\n~~ loaded && styles['ImageBase--loaded'],\n )}\n role={hasSrc ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {hasSrc && (\n <img\n ref={getRef}\n alt={alt}\n className={styles['ImageBase__img']}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n height={height}\n onLoad={handleImageLoad}\n onError={handleImageError}\n />\n )}\n {fallbackIcon && (\n <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n )}\n {children}\n </div>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","Badge","Overlay"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,QAAkC,kCAAkC;AAC3F,SAASC,gBAAgB,QAAoC,sCAAsC;AACnG,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,eAAe;AAClE,OAAOC,YAAY,yBAAyB;AAU5C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,YAAY;AAEnB,SAASN,gBAAgB,GAAG;AAkC5B;;CAEC,GACD,OAAO,MAAMO,YAAY,CAAC,EACxBC,IAAG,EACHC,YAAW,EACXC,SAAQ,EACRC,QAAO,EACPC,eAAc,EACdC,MAAK,EACLC,IAAG,EACHC,OAAM,EACNC,OAAM,EACNC,OAAM,EACNC,MAAO,GAAE,EACTC,MAAK,EACLC,OAAM,EACNC,MAAK,EACLC,UAAS,EACTC,WAAU,EACVC,YAAa,IAAI,CAAA,EACjB,gBAAgBC,iBAAgB,EAChCC,SAAQ,EACR,cAAcC,UAAS,EACvBC,QAAO,EACPC,OAAM,EACNC,QAAO,EACP,GAAGC,WACY,GAAK;IACpB,MAAM,CAACC,QAAQC,UAAU,GAAGrC,MAAMsC,QAAQ,CAAC,KAAK;IAChD,MAAM,CAACC,QAAQC,UAAU,GAAGxC,MAAMsC,QAAQ,CAAC,KAAK;IAEhD,MAAMG,SAASvB,OAAOC;IACtB,MAAMuB,uBAAuB,AAACH,CAAAA,UAAU,CAACE,MAAK,mBAAMzC,MAAM2C,cAAc,CAACd;IAEzE,MAAMe,eAAeF,uBAAuBb,mBAAmB,IAAI;IAEnE,IAAIgB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CzC,aAAagB;QACb,IAAIsB,cAAc;YAChBvC,qBAAqBiB,MAAM;gBAAE0B,MAAM;gBAAgBC,OAAOL;YAAa;QACzE,CAAC;IACH,CAAC;IAED,MAAMM,kBAAkB,CAACC,QAAkD;QACzEd,UAAU,IAAI;QACdG,UAAU,KAAK;QACfP,SAASkB;IACX;IAEA,MAAMC,mBAAmB,CAACD,QAAkD;QAC1Ed,UAAU,KAAK;QACfG,UAAU,IAAI;QACdN,UAAUiB;IACZ;IAEA,MAAME,gBAAgB,AAAC,CAAA,IAAM;QAC3B,OAAQ/B;YACN,KAAK;gBACH,OAAOf,MAAM,CAAC,qBAAqB;YACrC,KAAK;gBACH,OAAOA,MAAM,CAAC,qBAAqB;YACrC,KAAK;gBACH,OAAOA,MAAM,CAAC,qBAAqB;YACrC,KAAK;gBACH,OAAOA,MAAM,CAAC,qBAAqB;YACrC,KAAK;gBACH,OAAOA,MAAM,CAAC,qBAAqB;QACvC;QAEA,OAAO,IAAI;IACb,CAAA;IAEA,qBACE,oBAACH,iBAAiBkD,QAAQ;QAACL,OAAO;YAAE3B;QAAK;qBACvC,oBAACiC;QACE,GAAGpB,SAAS;QACbqB,KAAK7B;QACLF,OAAO;YAAE,GAAGA,KAAK;YAAEF,OAAOD;YAAME,QAAQF;QAAK;QAC7CI,WAAWzB,WACTyB,WACAnB,MAAM,CAAC,YAAY,EACnB8C,~~eACAzB~~,~~cAAcrB,MAAM,CAAC,wBAAwB,EAC7C6B,~~UAAU7B,MAAM,CAAC,oBAAoB;QAEvCkD,MAAMhB,SAAS,QAAQ,cAAc;QACrCiB,cAAY3B;QACZC,SAASA;OAERS,wBACC,oBAACkB;QACCH,KAAKnC;QACLT,KAAKA;QACLc,WAAWnB,MAAM,CAAC,iBAAiB;QACnCM,aAAaA;QACbC,UAAUA;QACVC,SAASA;QACTC,gBAAgBA;QAChBC,OAAOA;QACPC,KAAKA;QACLC,QAAQA;QACRC,QAAQA;QACRG,OAAOA;QACPC,QAAQA;QACRS,QAAQiB;QACRhB,SAASkB;QAGZR,8BACC,oBAACW;QAAI7B,WAAWzB,WAAWM,MAAM,CAAC,sBAAsB;OAAIqC,eAE7Dd;~~AAIT~~,EAAE;~~AAEFnB~~,~~UAAUiD~~,KAAK,~~GAAG1D~~;AAElBS,~~UAAUkD~~,OAAO,~~GAAG1D~~"}
1	+ {"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /*\n Задаёт размер картинки.\n \n Используйте размеры заданные дизайн-системой `16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 56 \| 64 \| 72 \| 80 \| 88 \| 96`.\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n /\n size?: ImageBaseSize \| number;\n /\n Включает или отключает обводку.\n /\n withBorder?: boolean;\n /\n Фолбек на случай, если картинка не прогрузилась.\n \n > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n \n > ⚠️ Может перекрывать `children`.\n /\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n getRef,\n size = 24,\n width,\n height,\n style,\n className,\n getRootRef,\n withBorder = true,\n 'fallbackIcon': fallbackIconProp,\n children,\n 'aria-label': ariaLabel,\n onClick,\n onLoad,\n onError,\n ...restProps\n}: ImageBaseProps) => {\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const hasSrc = src \|\| srcSet;\n const needShowFallbackIcon = (failed \|\| !hasSrc) && React.isValidElement(fallbackIconProp);\n\n const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (fallbackIcon) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n const sizeClassName = (() => {\n switch (size) {\n case 28:\n return styles['ImageBase--size-28'];\n case 32:\n return styles['ImageBase--size-32'];\n case 40:\n return styles['ImageBase--size-40'];\n case 48:\n return styles['ImageBase--size-48'];\n case 72:\n return styles['ImageBase--size-72'];\n }\n\n return null;\n })();\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <div\n {...restProps}\n ref={getRootRef}\n style={{ ...style, width: size, height: size }}\n className={classNames(\n className,\n styles['ImageBase'],\n sizeClassName,\n loaded && styles['ImageBase--loaded'],\n )}\n role={hasSrc ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {hasSrc && (\n <img\n ref={getRef}\n alt={alt}\n className={styles['ImageBase__img']}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n height={height}\n onLoad={handleImageLoad}\n onError={handleImageError}\n />\n )}\n {fallbackIcon && (\n <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n )}\n {children}\n {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n </div>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","sizeClassName","Provider","div","ref","role","aria-label","img","aria-hidden","Badge","Overlay"],"mappings":"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"}

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

@@ -8,10 +8,21 @@
   color: var(--vkui--color_icon_secondary);
   background-color: var(--vkui--color_background_secondary);
   background-size: cover;
+  isolation: isolate;
 }
-.ImageBase--withBorder {
-  box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_image_border_alpha);
+.ImageBase__border {
+  pointer-events: none;
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_image_base_border);
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  transform-origin: left top;
+  border: var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);
+  border-radius: inherit;
 }
 .ImageBase__img {

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './InfoRow.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
@@ -11,8 +12,8 @@ import styles from './InfoRow.module.css';
         className: classNames(styles['InfoRow'], className),
         weight: "3"
     }, hasReactNode(header) && /*#__PURE__*/ React.createElement(Subhead, {
-        Component: "span",
+        Component: "strong",
         className: styles['InfoRow__header']
-    }, header), children);
+    }, header, /*#__PURE__*/ React.createElement(VisuallyHidden, null, "\xa0")), children);
 //# sourceMappingURL=InfoRow.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n header: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n <Headline\n {...restProps}\n Component=\"span\"\n className={classNames(styles['InfoRow'], className)}\n weight=\"3\"\n >\n {hasReactNode(header) && (\n <Subhead Component=\"~~span~~\" className={styles['InfoRow__header']}>\n {header}\n </Subhead>\n )}\n {children}\n </Headline>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Subhead","styles","InfoRow","header","children","className","restProps","Component","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAM,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAyB,iBACjF,~~oBAACP~~;QACE,~~GAAGO~~,SAAS;QACbC,WAAU;QACVF,~~WAAWR~~,~~WAAWI~~,MAAM,CAAC,UAAU,EAAEI;QACzCG,QAAO;~~OAENV~~,~~aAAaK~~,yBACZ,~~oBAACH~~;~~QAAQO~~,WAAU;~~QAAOF~~,WAAWJ,MAAM,CAAC,kBAAkB;~~OAC3DE~~,~~SAGJC~~,UAEH"}
1	+ {"version":3,"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n header: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n <Headline\n {...restProps}\n Component=\"span\"\n className={classNames(styles['InfoRow'], className)}\n weight=\"3\"\n >\n {hasReactNode(header) && (\n <Subhead Component=\"strong\" className={styles['InfoRow__header']}>\n {header}\n <VisuallyHidden> </VisuallyHidden>\n </Subhead>\n )}\n {children}\n </Headline>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Subhead","VisuallyHidden","styles","InfoRow","header","children","className","restProps","Component","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,uBAAuB;AAM1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAM,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAyB,iBACjF,oBAACR;QACE,GAAGQ,SAAS;QACbC,WAAU;QACVF,WAAWT,WAAWK,MAAM,CAAC,UAAU,EAAEI;QACzCG,QAAO;OAENX,aAAaM,yBACZ,oBAACJ;QAAQQ,WAAU;QAASF,WAAWJ,MAAM,CAAC,kBAAkB;OAC7DE,sBACD,oBAACH,sBAAe,UAGnBI,UAEH"}