@vkontakte/vkui 7.9.2 → 7.10.1
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.
- package/README.md +1 -0
- package/dist/components/Button/Button.js +6 -4
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/CarouselBase/CarouselBase.d.ts +1 -1
- package/dist/components/CarouselBase/CarouselBase.d.ts.map +1 -1
- package/dist/components/CarouselBase/CarouselBase.js +14 -6
- package/dist/components/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/components/CarouselBase/ScrollArrows.d.ts +1 -2
- package/dist/components/CarouselBase/ScrollArrows.d.ts.map +1 -1
- package/dist/components/CarouselBase/ScrollArrows.js +2 -2
- package/dist/components/CarouselBase/ScrollArrows.js.map +1 -1
- package/dist/components/Clickable/useState.d.ts +15 -0
- package/dist/components/Clickable/useState.d.ts.map +1 -1
- package/dist/components/Clickable/useState.js +1 -1
- package/dist/components/Clickable/useState.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +1 -1
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/Footer/Footer.d.ts.map +1 -1
- package/dist/components/Footer/Footer.js +2 -1
- package/dist/components/Footer/Footer.js.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.js +20 -10
- package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/components/SubnavigationBar/SubnavigationBar.d.ts +6 -2
- package/dist/components/SubnavigationBar/SubnavigationBar.d.ts.map +1 -1
- package/dist/components/SubnavigationBar/SubnavigationBar.js +6 -3
- package/dist/components/SubnavigationBar/SubnavigationBar.js.map +1 -1
- package/dist/components/Typography/Typography.d.ts +5 -1
- package/dist/components/Typography/Typography.d.ts.map +1 -1
- package/dist/components/Typography/Typography.js +9 -3
- package/dist/components/Typography/Typography.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/ActionSheet/ActionSheet.module.css +4 -4
- package/dist/cssm/components/Alert/Alert.module.css +4 -4
- package/dist/cssm/components/Button/Button.js +3 -1
- package/dist/cssm/components/Button/Button.js.map +1 -1
- package/dist/cssm/components/CarouselBase/CarouselBase.js +10 -5
- package/dist/cssm/components/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/cssm/components/CarouselBase/CarouselBase.module.css +1 -1
- package/dist/cssm/components/CarouselBase/ScrollArrows.js +2 -2
- package/dist/cssm/components/CarouselBase/ScrollArrows.js.map +1 -1
- package/dist/cssm/components/CellButton/CellButton.module.css +4 -2
- package/dist/cssm/components/Clickable/useState.js +1 -1
- package/dist/cssm/components/Clickable/useState.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.module.css +2 -2
- package/dist/cssm/components/DateInput/DateInput.module.css +3 -2
- package/dist/cssm/components/Epic/Epic.module.css +2 -1
- package/dist/cssm/components/FixedLayout/FixedLayout.module.css +6 -3
- package/dist/cssm/components/Flex/Flex.module.css +12 -4
- package/dist/cssm/components/Footer/Footer.js +1 -0
- package/dist/cssm/components/Footer/Footer.js.map +1 -1
- package/dist/cssm/components/Footer/Footer.module.css +0 -1
- package/dist/cssm/components/FormField/FormField.module.css +10 -6
- package/dist/cssm/components/FormItem/FormItem.module.css +24 -12
- package/dist/cssm/components/GridAvatar/GridAvatar.module.css +1 -1
- package/dist/cssm/components/Group/Group.module.css +5 -2
- package/dist/cssm/components/HorizontalCell/HorizontalCell.module.css +4 -2
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +14 -8
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.module.css +3 -3
- package/dist/cssm/components/IconButton/IconButton.module.css +6 -2
- package/dist/cssm/components/MiniInfoCell/MiniInfoCell.module.css +4 -2
- package/dist/cssm/components/ModalCard/ModalCard.module.css +2 -1
- package/dist/cssm/components/ModalCardBase/ModalCardBase.module.css +14 -10
- package/dist/cssm/components/ModalPage/ModalPage.module.css +2 -1
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.module.css +5 -3
- package/dist/cssm/components/Panel/Panel.module.css +4 -2
- package/dist/cssm/components/PanelHeader/PanelHeader.module.css +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.module.css +2 -2
- package/dist/cssm/components/PopoutWrapper/PopoutWrapper.module.css +2 -2
- package/dist/cssm/components/Removable/Removable.module.css +9 -4
- package/dist/cssm/components/Root/Root.module.css +8 -8
- package/dist/cssm/components/Search/Search.module.css +2 -3
- package/dist/cssm/components/Snackbar/Snackbar.module.css +4 -2
- package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.module.css +15 -15
- package/dist/cssm/components/SplitLayout/SplitLayout.module.css +8 -4
- package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js +4 -3
- package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js.map +1 -1
- package/dist/cssm/components/SubnavigationBar/SubnavigationBar.module.css +9 -0
- package/dist/cssm/components/Switch/Switch.module.css +32 -20
- package/dist/cssm/components/Typography/Typography.js +7 -2
- package/dist/cssm/components/Typography/Typography.js.map +1 -1
- package/dist/cssm/components/Typography/Typography.module.css +12 -0
- package/dist/cssm/hooks/useDraggableWithDomApi/useDraggableWithDomApi.js +1 -1
- package/dist/cssm/hooks/useDraggableWithDomApi/useDraggableWithDomApi.js.map +1 -1
- package/dist/cssm/hooks/useKeyboardInputTracker.js +4 -4
- package/dist/cssm/hooks/useKeyboardInputTracker.js.map +1 -1
- package/dist/cssm/index.js +1 -0
- package/dist/cssm/index.js.map +1 -1
- package/dist/cssm/lib/adaptivity/functions.js.map +1 -1
- package/dist/cssm/lib/animation/useReducedMotion.js +7 -2
- package/dist/cssm/lib/animation/useReducedMotion.js.map +1 -1
- package/dist/cssm/lib/dom.js +2 -2
- package/dist/cssm/lib/dom.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingMiddlewaresBootstrap/index.js.map +1 -1
- package/dist/cssm/lib/sheet/controllers/BottomSheetController.js +1 -1
- package/dist/cssm/lib/sheet/controllers/BottomSheetController.js.map +1 -1
- package/dist/cssm/styles/constants.css +2 -1
- package/dist/cssm/styles/customMedias.generated.css +21 -21
- package/dist/hooks/useDraggableWithDomApi/useDraggableWithDomApi.d.ts.map +1 -1
- package/dist/hooks/useDraggableWithDomApi/useDraggableWithDomApi.js +1 -1
- package/dist/hooks/useDraggableWithDomApi/useDraggableWithDomApi.js.map +1 -1
- package/dist/hooks/useKeyboardInputTracker.d.ts.map +1 -1
- package/dist/hooks/useKeyboardInputTracker.js +4 -4
- package/dist/hooks/useKeyboardInputTracker.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/adaptivity/functions.d.ts.map +1 -1
- package/dist/lib/adaptivity/functions.js.map +1 -1
- package/dist/lib/animation/useReducedMotion.d.ts +6 -0
- package/dist/lib/animation/useReducedMotion.d.ts.map +1 -1
- package/dist/lib/animation/useReducedMotion.js +7 -2
- package/dist/lib/animation/useReducedMotion.js.map +1 -1
- package/dist/lib/dom.d.ts.map +1 -1
- package/dist/lib/dom.js +2 -2
- package/dist/lib/dom.js.map +1 -1
- package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.d.ts +1 -1
- package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.js.map +1 -1
- package/dist/lib/sheet/controllers/BottomSheetController.js +1 -1
- package/dist/lib/sheet/controllers/BottomSheetController.js.map +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/package.json +2 -1
- package/src/components/ActionSheet/ActionSheet.module.css +4 -4
- package/src/components/Alert/Alert.module.css +4 -4
- package/src/components/Button/Button.tsx +1 -1
- package/src/components/CarouselBase/CarouselBase.module.css +1 -1
- package/src/components/CarouselBase/CarouselBase.module.css.d.ts.map +1 -1
- package/src/components/CarouselBase/CarouselBase.tsx +10 -4
- package/src/components/CarouselBase/ScrollArrows.tsx +1 -3
- package/src/components/CellButton/CellButton.module.css +2 -1
- package/src/components/CellButton/CellButton.module.css.d.ts.map +1 -1
- package/src/components/Clickable/useState.tsx +8 -3
- package/src/components/CustomSelect/CustomSelect.tsx +1 -1
- package/src/components/CustomSelectOption/CustomSelectOption.module.css +1 -1
- package/src/components/DateInput/DateInput.module.css +3 -2
- package/src/components/DateInput/DateInput.module.css.d.ts.map +1 -1
- package/src/components/Epic/Epic.module.css +2 -1
- package/src/components/FixedLayout/FixedLayout.module.css +4 -2
- package/src/components/FixedLayout/FixedLayout.module.css.d.ts.map +1 -1
- package/src/components/Flex/Flex.module.css +6 -2
- package/src/components/Flex/Flex.module.css.d.ts.map +1 -1
- package/src/components/Footer/Footer.module.css +0 -1
- package/src/components/Footer/Footer.tsx +1 -0
- package/src/components/FormField/FormField.module.css +10 -6
- package/src/components/FormField/FormField.module.css.d.ts.map +1 -1
- package/src/components/FormItem/FormItem.module.css +12 -6
- package/src/components/FormItem/FormItem.module.css.d.ts.map +1 -1
- package/src/components/GridAvatar/GridAvatar.module.css +1 -1
- package/src/components/GridAvatar/GridAvatar.module.css.d.ts.map +1 -1
- package/src/components/Group/Group.module.css +5 -2
- package/src/components/Group/Group.module.css.d.ts.map +1 -1
- package/src/components/HorizontalCell/HorizontalCell.module.css +4 -2
- package/src/components/HorizontalCell/HorizontalCell.module.css.d.ts.map +1 -1
- package/src/components/HorizontalScroll/HorizontalScroll.module.css +3 -3
- package/src/components/HorizontalScroll/HorizontalScroll.module.css.d.ts.map +1 -1
- package/src/components/HorizontalScroll/HorizontalScroll.tsx +15 -7
- package/src/components/IconButton/IconButton.module.css +6 -2
- package/src/components/IconButton/IconButton.module.css.d.ts.map +1 -1
- package/src/components/MiniInfoCell/MiniInfoCell.module.css +4 -2
- package/src/components/MiniInfoCell/MiniInfoCell.module.css.d.ts.map +1 -1
- package/src/components/ModalCard/ModalCard.module.css +2 -1
- package/src/components/ModalCard/ModalCard.module.css.d.ts.map +1 -1
- package/src/components/ModalCardBase/ModalCardBase.module.css +7 -5
- package/src/components/ModalCardBase/ModalCardBase.module.css.d.ts.map +1 -1
- package/src/components/ModalPage/ModalPage.module.css +2 -1
- package/src/components/ModalPage/ModalPage.module.css.d.ts.map +1 -1
- package/src/components/ModalPageHeader/ModalPageHeader.module.css +5 -2
- package/src/components/ModalPageHeader/ModalPageHeader.module.css.d.ts.map +1 -1
- package/src/components/Panel/Panel.module.css +2 -1
- package/src/components/Panel/Panel.module.css.d.ts.map +1 -1
- package/src/components/PanelHeader/PanelHeader.module.css +1 -1
- package/src/components/PanelHeader/PanelHeader.module.css.d.ts.map +1 -1
- package/src/components/PanelHeaderButton/PanelHeaderButton.module.css +2 -2
- package/src/components/PopoutWrapper/PopoutWrapper.module.css +2 -2
- package/src/components/Removable/Removable.module.css +9 -4
- package/src/components/Removable/Removable.module.css.d.ts.map +1 -1
- package/src/components/Root/Root.module.css +8 -8
- package/src/components/Search/Search.module.css +2 -2
- package/src/components/Snackbar/Snackbar.module.css +4 -2
- package/src/components/Snackbar/Snackbar.module.css.d.ts.map +1 -1
- package/src/components/Snackbar/subcomponents/Basic/Basic.module.css +15 -15
- package/src/components/SplitLayout/SplitLayout.module.css +4 -2
- package/src/components/SplitLayout/SplitLayout.module.css.d.ts.map +1 -1
- package/src/components/SubnavigationBar/SubnavigationBar.module.css +9 -0
- package/src/components/SubnavigationBar/SubnavigationBar.module.css.d.ts.map +1 -1
- package/src/components/SubnavigationBar/SubnavigationBar.tsx +14 -3
- package/src/components/Switch/Switch.module.css +32 -20
- package/src/components/Switch/Switch.module.css.d.ts.map +1 -1
- package/src/components/Typography/Typography.module.css +12 -0
- package/src/components/Typography/Typography.module.css.d.ts.map +1 -1
- package/src/components/Typography/Typography.tsx +12 -0
- package/src/hooks/useDraggableWithDomApi/useDraggableWithDomApi.ts +7 -1
- package/src/hooks/useKeyboardInputTracker.ts +20 -4
- package/src/index.ts +1 -0
- package/src/lib/adaptivity/functions.ts +36 -6
- package/src/lib/animation/useReducedMotion.ts +7 -1
- package/src/lib/dom.tsx +11 -2
- package/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts +1 -1
- package/src/lib/sheet/controllers/BottomSheetController.ts +1 -1
- package/src/styles/constants.css +2 -1
- package/src/styles/customMedias.generated.css +21 -21
- package/dist/cssm/hooks/useAdaptivityHasPointer.js +0 -15
- package/dist/cssm/hooks/useAdaptivityHasPointer.js.map +0 -1
- package/dist/hooks/useAdaptivityHasPointer.d.ts +0 -9
- package/dist/hooks/useAdaptivityHasPointer.d.ts.map +0 -1
- package/dist/hooks/useAdaptivityHasPointer.js +0 -15
- package/dist/hooks/useAdaptivityHasPointer.js.map +0 -1
- package/src/hooks/useAdaptivityHasPointer.ts +0 -25
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getRequiredValueByKey } from '../../helpers/getValueByKey';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn, type FilterFn } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { preventDefault } from '../../lib/utils';\nimport { type HasDataAttribute, type HasRootRef } from '../../types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport {\n type NativeSelectProps,\n NOT_SELECTED,\n remapFromNativeValueToSelectValue,\n type SelectValue,\n} from '../NativeSelect/NativeSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { SelectType } from '../Select/Select';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { type CustomSelectClearButtonProps } from './CustomSelectClearButton';\nimport {\n CustomSelectInput,\n type CustomSelectInputProps,\n} from './CustomSelectInput/CustomSelectInput';\nimport {\n checkDeprecatedProps,\n checkMixControlledAndUncontrolledState,\n checkOptionsValueType,\n filter,\n findSelectedIndex,\n getOptionByValue,\n} from './helpers';\nimport { useAfterItems } from './hooks/useAfterItems';\nimport { useDropdownOpenedController } from './hooks/useDropdownOpenedController';\nimport { useFocusedOptionController } from './hooks/useFocusedOptionController';\nimport { useInputKeyboardController } from './hooks/useInputKeyboardController';\nimport { useInputValueController } from './hooks/useInputValueController';\nimport { useScrollListController } from './hooks/useScrollListController';\nimport { useSelectedOptionController } from './hooks/useSelectedOptionController';\nimport type {\n CustomSelectOptionInterface,\n CustomSelectRenderOption,\n MousePosition,\n PopupDirection,\n} from './types';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n};\n\nfunction defaultRenderOptionFn<T extends CustomSelectOptionInterface>({\n option,\n ...props\n}: CustomSelectRenderOption<T>): React.ReactNode {\n return <CustomSelectOption {...props} />;\n}\n\nfunction isMousePositionChanged(event: React.MouseEvent, prevPosition: MousePosition) {\n return (\n Math.abs(prevPosition.x - event.clientX) >= 1 || Math.abs(prevPosition.y - event.clientY) >= 1\n );\n}\n\nconst FETCH_STATUS_RESET_DELAY = 2000;\n\nconst FetchingStatus = ({\n fetching = false,\n options,\n fetchingInProgressLabel = 'Список опций загружается...',\n fetchingCompletedLabel = `Загружено опций: ${options.length}`,\n}: Pick<\n SelectProps,\n 'fetching' | 'fetchingInProgressLabel' | 'fetchingCompletedLabel' | 'options'\n>) => {\n const [status, setStatus] = React.useState<'fetching' | 'loaded' | 'none'>('none');\n\n const content = getRequiredValueByKey(status, {\n fetching: fetchingInProgressLabel,\n loaded:\n typeof fetchingCompletedLabel === 'function'\n ? fetchingCompletedLabel(options.length)\n : fetchingCompletedLabel,\n none: '',\n });\n\n useIsomorphicLayoutEffect(\n function updateStatus() {\n if (fetching) {\n setStatus('fetching');\n } else {\n if (status === 'fetching') {\n setStatus('loaded');\n setTimeout(() => setStatus('none'), FETCH_STATUS_RESET_DELAY);\n }\n }\n },\n [fetching],\n );\n\n return <VisuallyHidden aria-live=\"polite\">{content}</VisuallyHidden>;\n};\n\nexport type { CustomSelectClearButtonProps };\n\nexport interface SelectProps<\n OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface,\n> extends Omit<NativeSelectProps, 'slotProps'>,\n Omit<FormFieldProps, 'maxHeight'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'>,\n Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'readOnly'> {\n /**\n * Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `select`: свойства для прокидывания в нативный `select`;\n * - `input`: свойства для прокидывания в нативный `input`.\n */\n slotProps?: NativeSelectProps['slotProps'] & {\n input?: React.InputHTMLAttributes<HTMLInputElement> &\n HasDataAttribute &\n HasRootRef<HTMLInputElement>;\n };\n /**\n * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n *\n * Ref на внутрений компонент input.\n */\n getSelectInputRef?: React.Ref<HTMLInputElement>;\n /**\n * Если `true`, то при нажатии на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n */\n searchable?: boolean;\n /**\n * Текст, который будет отображен, если приходит пустой `options`.\n */\n emptyText?: string;\n /**\n * Событие изменения текстового поля.\n */\n onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Список опций в списке.\n */\n options: OptionInterfaceT[];\n /**\n * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n */\n filterFn?: false | FilterFn<OptionInterfaceT>;\n /**\n * Направление раскрытия выпадающего списка.\n */\n popupDirection?: PopupDirection;\n /**\n * Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkui.io/components/custom-select#custom-select-option-api).\n *\n * > ⚠️ Важно: свойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе `CustomSelect` не будет знать об актуальном состоянии\n * опции.\n */\n renderOption?: (props: CustomSelectRenderOption<OptionInterfaceT>) => 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 /**\n * Обработчик закрытия выпадающего списка.\n */\n onClose?: VoidFunction;\n /**\n * Обработчик открытия выпадающего списка.\n */\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 /**\n * Передает атрибут `data-testid` для кнопки очистки.\n */\n clearButtonTestId?: string;\n /**\n * Отступ от выпадающего списка.\n */\n dropdownOffsetDistance?: number;\n /**\n * Ширина раскрывающегося списка зависит от контента.\n */\n dropdownAutoWidth?: boolean;\n /**\n * Использовать Portal для рендеринга выпадающего списка.\n */\n forceDropdownPortal?: boolean;\n /**\n * Тип отображения компонента.\n */\n selectType?: SelectType;\n /**\n * Отключает максимальную высоту по умолчанию.\n */\n noMaxHeight?: boolean;\n /**\n * Передает атрибут `data-testid` для элемента, внутри которого отображается текст выбранной опции `CustomSelect` или плейсхолдер.\n */\n labelTextTestId?: string;\n /**\n * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { 'data-testid': ... } }`.\n *\n * Передает атрибут `data-testid` для нативного элемента `select`.\n */\n nativeSelectTestId?: string;\n /**\n * Обработчик события `keyDown` в поле ввода.\n */\n onInputKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;\n /**\n * Включает режим в котором выбранное значение `CustomSelect` читается скринридерами корректно.\n * В данном режиме введенное в поле ввода значение не сбрасывается при потере фокуса.\n */\n accessible?: boolean /* TODO [>=v8] включить по умолчанию */;\n /**\n * Текстовая метка для индикации процесса загрузки данных для пользователей скринридерами. По умолчанию: `\"Список опций загружается...\"`.\n */\n fetchingInProgressLabel?: string;\n /**\n * Текстовая метка для индикации завершения процесса загрузки данных для пользователей скринридерами. По умолчанию: `\"Загружено опций: ${options.length}\"`.\n */\n fetchingCompletedLabel?: string | ((optionsCount: number) => string);\n}\n\n/**\n * @see https://vkui.io/components/custom-select\n */\nexport function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(\n props: SelectProps<OptionInterfaceT>,\n): React.ReactNode {\n const {\n style,\n className,\n getRootRef,\n before,\n name,\n getRef,\n popupDirection = 'bottom',\n onChange,\n children,\n 'onInputChange': onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n labelTextTestId,\n multiline,\n placeholder,\n status,\n forceDropdownPortal,\n align,\n selectType = 'default',\n searchable = false,\n 'renderOption': renderOptionProp = defaultRenderOptionFn,\n 'options': options,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n 'icon': iconProp,\n ClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n dropdownAutoWidth = false,\n noMaxHeight = false,\n 'aria-labelledby': ariaLabelledBy,\n clearButtonTestId,\n nativeSelectTestId,\n defaultValue,\n required,\n getSelectInputRef,\n overscrollBehavior,\n 'onInputKeyDown': onInputKeyDownProp,\n accessible = false,\n fetchingInProgressLabel,\n fetchingCompletedLabel,\n 'value': selectValue,\n 'onBlur': onSelectBlur,\n 'onFocus': onSelectFocus,\n 'onClick': onSelectClick,\n\n slotProps,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(options);\n checkDeprecatedProps(props);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const {\n onClick: onRootClick,\n onMouseMove: onRootMouseMove,\n onMouseDown: onRootMouseDown,\n getRootRef: rootRef,\n ...rootRest\n } = useMergeProps(\n {\n style,\n className,\n getRootRef,\n },\n slotProps?.root,\n );\n\n const { getRootRef: getSelectRef, ...selectRest } = useMergeProps(\n {\n getRootRef: getRef,\n onBlur: onSelectBlur,\n onFocus: onSelectFocus,\n onClick: onSelectClick,\n },\n slotProps?.select,\n );\n\n const {\n getRootRef: getInputRef,\n onChange: onChangeInput,\n onFocus: onInputFocus,\n onBlur: onInputBlur,\n onKeyDown: onNativeInputKeyDown,\n onClick: onNativeInputClick,\n readOnly,\n ...inputRest\n } = useMergeProps(\n {\n getRootRef: getSelectInputRef,\n onChange: onInputChangeProp,\n // Приводим типы так как в CustomSelect типы в rest определены как React.SelectHTMLAttributes<HTMLSelectElement>\n // Хотя эти свойства прокидываются в input\n ...(restProps as React.InputHTMLAttributes<HTMLInputElement>),\n },\n slotProps?.input,\n );\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const handleRootRef = useExternRef(containerRef, rootRef);\n const selectElRef = useExternRef(getSelectRef);\n const selectInputRef = useExternRef(getInputRef);\n\n const propsValue = React.useMemo<SelectValue | undefined>(() => {\n if (selectValue === undefined) {\n return undefined;\n }\n return getOptionByValue(options, selectValue)?.value ?? null;\n }, [options, selectValue]);\n\n const [isControlledOutside, setIsControlledOutside] = React.useState(selectValue !== undefined);\n const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);\n\n const {\n nativeSelectValue,\n setNativeSelectValue,\n selectedOptionValue,\n setSelectedOptionValue,\n onNativeSelectChange,\n } = useSelectedOptionController({\n value: propsValue,\n defaultValue,\n isControlledOutside,\n allowClearButton,\n onChange,\n });\n\n const selected = React.useMemo(\n () => options.find((option) => option.value === selectedOptionValue),\n [options, selectedOptionValue],\n );\n\n const { inputValue, onInputChange, resetInputValue, resetInputValueBySelectedOption } =\n useInputValueController({\n options,\n accessible,\n selectedValue: selectedOptionValue,\n onInputChange: onChangeInput,\n });\n\n const filteredOptions = React.useMemo(\n () => filter(options, searchable ? inputValue : '', filterFn),\n [filterFn, inputValue, options, searchable],\n );\n\n const { scrollToElement, optionsWrapperRef, scrollBoxRef } = useScrollListController();\n\n const {\n focusedOptionValue,\n setFocusedOptionValue,\n resetFocusedOption,\n focusOptionByIndex,\n focusOption,\n selectFocusedValue,\n } = useFocusedOptionController({\n selectedOptionValue,\n filteredOptions,\n scrollToElement,\n });\n\n const scrollToSelectedOption = () => {\n scrollToElement(findSelectedIndex(filteredOptions, selectedOptionValue), true);\n };\n\n const { opened, open, close, toggleOpened } = useDropdownOpenedController({\n onOpen: callMultiple(selectFocusedValue, onOpen),\n onOpened: scrollToSelectedOption,\n onClose,\n onClosed: accessible ? resetInputValueBySelectedOption : resetInputValue,\n });\n\n React.useEffect(\n function updateOptionsValue() {\n const value =\n propsValue !== undefined\n ? propsValue\n : remapFromNativeValueToSelectValue(nativeSelectValue);\n setSelectedOptionValue(value);\n setFocusedOptionValue(value);\n },\n [propsValue, nativeSelectValue, setFocusedOptionValue, setSelectedOptionValue],\n );\n\n React.useEffect(\n function syncIsControlledState() {\n setIsControlledOutside((oldIsControlled) => {\n const newIsControlled = propsValue !== undefined;\n checkMixControlledAndUncontrolledState(oldIsControlled, newIsControlled);\n return newIsControlled;\n });\n },\n [propsValue],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (\n filteredOptions.some(({ value }) => nativeSelectValue === value) ||\n (allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE)\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n undefined,\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const selectOption = React.useCallback(\n (value: Exclude<SelectValue, null>) => {\n setNativeSelectValue(value ?? NOT_SELECTED.NATIVE);\n close();\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside && propsValue !== nativeSelectValue && nativeSelectValue === value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n },\n [close, setNativeSelectValue, isControlledOutside, propsValue, nativeSelectValue, selectElRef],\n );\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionValue === null) {\n return;\n }\n\n selectOption(focusedOptionValue);\n }, [focusedOptionValue, selectOption]);\n\n const handleInputKeyDown = useInputKeyboardController({\n opened,\n open,\n close,\n resetFocusedOption,\n selectFocused,\n focusOption,\n scrollBoxRef,\n onInputKeyDown: onInputKeyDownProp,\n });\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('focusout', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }, [close, selectElRef]);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focusin', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }, [selectElRef]);\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 = filteredOptions[index];\n\n if (option && !option.disabled) {\n selectOption(option.value);\n }\n },\n [filteredOptions, selectOption],\n );\n\n const lastMousePositionRef = React.useRef<MousePosition>({ x: 0, y: 0 });\n const focusOptionOnMouseMove = React.useCallback(\n (e: React.MouseEvent<HTMLElement>, index: number) => {\n if (isMousePositionChanged(e, lastMousePositionRef.current)) {\n focusOptionByIndex(index, false);\n }\n },\n [focusOptionByIndex],\n );\n\n const popupAriaId = React.useId();\n const renderOption = React.useCallback(\n (option: OptionInterfaceT, index: number) => {\n const hovered = option.value === focusedOptionValue;\n const selected = option.value === selectedOptionValue;\n\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: preventDefault,\n // Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`.\n // Потому что если при навигации с клавиатуры курсор наведён на\n // список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter\n // обработчик которого фокусирует опцию под курсором, хотя при навигация с клавиатуры пользователь мог уйти дальше по списку, это путает.\n // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,\n // а значит нельзя на них опираться, чтобы запретить обработку такого события.\n // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.\n onMouseMove: (e) => focusOptionOnMouseMove(e, index),\n id: `${popupAriaId}-${option.value}`,\n ...option,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionValue,\n selectedOptionValue,\n renderOptionProp,\n handleOptionClick,\n popupAriaId,\n focusOptionOnMouseMove,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n filteredOptions.length > 0 ? (\n <div ref={optionsWrapperRef}>{filteredOptions.map(renderOption)}</div>\n ) : (\n <Footnote className={styles.empty}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, filteredOptions, optionsWrapperRef, renderDropdown, renderOption]);\n\n const afterItems = useAfterItems({\n value: propsValue,\n nativeSelectValue,\n isControlledOutside,\n opened,\n allowClearButton,\n ClearButton,\n onClearButtonClick: () => {\n setNativeSelectValue(NOT_SELECTED.NATIVE);\n resetInputValue();\n selectInputRef.current && selectInputRef.current.focus();\n },\n clearButtonTestId,\n disabled: restProps.disabled,\n readOnly,\n icon: iconProp,\n });\n\n const { document } = useDOM();\n const passClickAndFocusToInputOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n // Раньше внешней оберткой CustomSelect был <label>, что позволяло по клику в любую область CustomSelect,\n // даже где нету интерактивного элемента, фокусировать <input> и передавать на него событие клика.\n // Так как мы больше не оборачиваем CustomSelect в <label>, то для обертки CustomSelect мы симулируем работу <label>.\n // передаем фокус и клик по <input>, если пользователь кликнул в зоне обертки.\n // В <label> мы не больше не оборачиваем, потому что это заставляет скринридер\n // дважды произносить текст выбранной опции при фокусе, если CustomSelect связан с внешним <label>.\n // Воспроизводится в некоторых версиях Chrome, при навигации по странице с помощью стрелок.\n // Договорились со специалистом по доступности убрать <label>-обёртки из Select и CustomSelect\n\n if (!selectInputRef.current || !document) {\n return;\n }\n\n const clickTargetIsNotAnInput = e.target !== selectInputRef.current;\n if (clickTargetIsNotAnInput) {\n selectInputRef.current.click();\n\n const inputIsNotFocused = document.activeElement !== selectInputRef.current;\n if (inputIsNotFocused) {\n selectInputRef.current.focus();\n }\n }\n },\n [document, selectInputRef],\n );\n\n const preventInputBlurWhenClickInsideFocusedSelectArea = (\n e: React.MouseEvent<HTMLDivElement>,\n ) => {\n // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,\n // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.\n // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки\n const isInputFocused = document && document.activeElement === selectInputRef.current;\n if (isInputFocused) {\n e.preventDefault();\n }\n };\n\n const ariaActiveDescendantId = focusedOptionValue !== null ? focusedOptionValue : undefined;\n\n const selectInputAriaProps: React.HTMLAttributes<HTMLElement> = {\n 'role': 'combobox',\n 'aria-controls': popupAriaId,\n 'aria-expanded': opened,\n 'aria-activedescendant':\n ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-haspopup': 'listbox',\n 'aria-autocomplete': 'none',\n };\n\n const resetOptionFocusOnMouseLeave = React.useCallback(\n (event: React.MouseEvent) => {\n // В Хроме eсли мышка пользователя находится над инпутом селекта,\n // и он с клавиатуры открывает опции, причём одна из опций\n // уже выбрана, то видно, как выбранная опция получает фокус,\n // но потом сразу же его теряет.\n // Связано это с тем, что в этот момент вызывается onMouseLeave, на который у нас\n // завязан сброс состония фокуса у опции. По хорошему фокус должен оставаться.\n // Нам не интересен вызов onMouseLeave если мышка при этом не двигалась.\n if (isMousePositionChanged(event, lastMousePositionRef.current)) {\n resetFocusedOption();\n }\n },\n [resetFocusedOption],\n );\n\n const updateLastMousePosition = (e: React.MouseEvent) => {\n lastMousePositionRef.current = { x: e.clientX, y: e.clientY };\n };\n\n return (\n <RootComponent\n baseClassName={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}\n getRootRef={handleRootRef}\n onClick={callMultiple(onRootClick, passClickAndFocusToInputOnClick)}\n onMouseDown={callMultiple(onRootMouseDown, preventInputBlurWhenClickInsideFocusedSelectArea)}\n onMouseMove={callMultiple(onRootMouseMove, updateLastMousePosition)}\n {...rootRest}\n >\n <CustomSelectInput\n autoComplete=\"off\"\n autoCapitalize=\"none\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n fetching={fetching}\n searchable={searchable}\n accessible={accessible}\n before={before}\n after={afterItems}\n selectType={selectType}\n align={align}\n status={status}\n placeholder={placeholder}\n multiline={multiline}\n labelTextTestId={labelTextTestId}\n slotProps={{\n root: { className: openedClassNames },\n input: {\n getRootRef: selectInputRef,\n onChange: onInputChange,\n onFocus: callMultiple(onFocus, onInputFocus),\n onBlur: callMultiple(onBlur, onInputFocus),\n onKeyDown: !readOnly\n ? callMultiple(handleInputKeyDown, onNativeInputKeyDown)\n : onNativeInputKeyDown,\n onClick: !readOnly\n ? callMultiple(toggleOpened, onNativeInputClick)\n : onNativeInputClick,\n value: inputValue,\n readOnly: readOnly || !searchable,\n ...selectInputAriaProps,\n ...inputRest,\n },\n }}\n >\n {selected?.label}\n </CustomSelectInput>\n\n <FetchingStatus\n fetching={fetching}\n options={filteredOptions}\n fetchingInProgressLabel={fetchingInProgressLabel}\n fetchingCompletedLabel={fetchingCompletedLabel}\n />\n <RootComponent\n Component=\"select\"\n baseClassName={styles.control}\n tabIndex={-1}\n name={name}\n value={nativeSelectValue}\n aria-hidden\n data-testid={nativeSelectTestId}\n required={required}\n onChange={onNativeSelectChange}\n getRootRef={selectElRef}\n {...selectRest}\n >\n {(allowClearButton || nativeSelectValue === NOT_SELECTED.NATIVE) && (\n <option key={NOT_SELECTED.NATIVE} value={NOT_SELECTED.NATIVE} />\n )}\n {options.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </RootComponent>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popperPlacement}\n scrollBoxRef={scrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetOptionFocusOnMouseLeave}\n fetching={fetching}\n overscrollBehavior={overscrollBehavior}\n offsetDistance={dropdownOffsetDistance}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n role=\"listbox\"\n id={popupAriaId}\n aria-labelledby={ariaLabelledBy}\n tabIndex={-1}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </RootComponent>\n );\n}\n"],"names":["React","classNames","getRequiredValueByKey","useAdaptivity","useExternRef","useMergeProps","callMultiple","useDOM","defaultFilterFn","useIsomorphicLayoutEffect","preventDefault","CustomSelectDropdown","CustomSelectOption","NOT_SELECTED","remapFromNativeValueToSelectValue","RootComponent","Footnote","VisuallyHidden","CustomSelectInput","checkDeprecatedProps","checkMixControlledAndUncontrolledState","checkOptionsValueType","filter","findSelectedIndex","getOptionByValue","useAfterItems","useDropdownOpenedController","useFocusedOptionController","useInputKeyboardController","useInputValueController","useScrollListController","useSelectedOptionController","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","defaultRenderOptionFn","option","props","isMousePositionChanged","event","prevPosition","Math","abs","x","clientX","y","clientY","FETCH_STATUS_RESET_DELAY","FetchingStatus","fetching","options","fetchingInProgressLabel","fetchingCompletedLabel","length","status","setStatus","useState","content","loaded","updateStatus","setTimeout","aria-live","CustomSelect","style","className","getRootRef","before","name","getRef","popupDirection","onChange","children","onInputChangeProp","renderDropdown","onOpen","onClose","labelTextTestId","multiline","placeholder","forceDropdownPortal","align","selectType","searchable","renderOptionProp","emptyText","filterFn","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","dropdownAutoWidth","noMaxHeight","ariaLabelledBy","clearButtonTestId","nativeSelectTestId","defaultValue","required","getSelectInputRef","overscrollBehavior","onInputKeyDownProp","accessible","selectValue","onSelectBlur","onSelectFocus","onSelectClick","slotProps","restProps","process","env","NODE_ENV","sizeY","onClick","onRootClick","onMouseMove","onRootMouseMove","onMouseDown","onRootMouseDown","rootRef","rootRest","root","getSelectRef","selectRest","onBlur","onFocus","select","getInputRef","onChangeInput","onInputFocus","onInputBlur","onKeyDown","onNativeInputKeyDown","onNativeInputClick","readOnly","inputRest","input","containerRef","useRef","handleRootRef","selectElRef","selectInputRef","propsValue","useMemo","undefined","value","isControlledOutside","setIsControlledOutside","popperPlacement","setPopperPlacement","nativeSelectValue","setNativeSelectValue","selectedOptionValue","setSelectedOptionValue","onNativeSelectChange","selected","find","inputValue","onInputChange","resetInputValue","resetInputValueBySelectedOption","selectedValue","filteredOptions","scrollToElement","optionsWrapperRef","scrollBoxRef","focusedOptionValue","setFocusedOptionValue","resetFocusedOption","focusOptionByIndex","focusOption","selectFocusedValue","scrollToSelectedOption","opened","open","close","toggleOpened","onOpened","onClosed","useEffect","updateOptionsValue","syncIsControlledState","oldIsControlled","newIsControlled","some","NATIVE","Event","bubbles","current","dispatchEvent","openedClassNames","includes","popUp","popDown","selectOption","useCallback","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","handleInputKeyDown","onInputKeyDown","handleOptionClick","e","index","Array","prototype","indexOf","call","currentTarget","parentNode","disabled","lastMousePositionRef","focusOptionOnMouseMove","popupAriaId","useId","renderOption","hovered","Fragment","label","id","resolvedContent","defaultDropdownContent","div","ref","map","empty","afterItems","onClearButtonClick","focus","icon","document","passClickAndFocusToInputOnClick","clickTargetIsNotAnInput","target","click","inputIsNotFocused","activeElement","preventInputBlurWhenClickInsideFocusedSelectArea","isInputFocused","ariaActiveDescendantId","selectInputAriaProps","resetOptionFocusOnMouseLeave","updateLastMousePosition","baseClassName","host","autoComplete","autoCapitalize","autoCorrect","spellCheck","after","Component","control","tabIndex","aria-hidden","data-testid","item","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","autoWidth","forcePortal","role","aria-labelledby"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getRequiredValueByKey } from '../../helpers/getValueByKey';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn, type FilterFn } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { preventDefault } from '../../lib/utils';\nimport { type HasDataAttribute, type HasRootRef } from '../../types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport {\n type NativeSelectProps,\n NOT_SELECTED,\n remapFromNativeValueToSelectValue,\n type SelectValue,\n} from '../NativeSelect/NativeSelect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { SelectType } from '../Select/Select';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { type CustomSelectClearButtonProps } from './CustomSelectClearButton';\nimport {\n CustomSelectInput,\n type CustomSelectInputProps,\n} from './CustomSelectInput/CustomSelectInput';\nimport {\n checkDeprecatedProps,\n checkMixControlledAndUncontrolledState,\n checkOptionsValueType,\n filter,\n findSelectedIndex,\n getOptionByValue,\n} from './helpers';\nimport { useAfterItems } from './hooks/useAfterItems';\nimport { useDropdownOpenedController } from './hooks/useDropdownOpenedController';\nimport { useFocusedOptionController } from './hooks/useFocusedOptionController';\nimport { useInputKeyboardController } from './hooks/useInputKeyboardController';\nimport { useInputValueController } from './hooks/useInputValueController';\nimport { useScrollListController } from './hooks/useScrollListController';\nimport { useSelectedOptionController } from './hooks/useSelectedOptionController';\nimport type {\n CustomSelectOptionInterface,\n CustomSelectRenderOption,\n MousePosition,\n PopupDirection,\n} from './types';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles.sizeYNone,\n compact: styles.sizeYCompact,\n};\n\nfunction defaultRenderOptionFn<T extends CustomSelectOptionInterface>({\n option,\n ...props\n}: CustomSelectRenderOption<T>): React.ReactNode {\n return <CustomSelectOption {...props} />;\n}\n\nfunction isMousePositionChanged(event: React.MouseEvent, prevPosition: MousePosition) {\n return (\n Math.abs(prevPosition.x - event.clientX) >= 1 || Math.abs(prevPosition.y - event.clientY) >= 1\n );\n}\n\nconst FETCH_STATUS_RESET_DELAY = 2000;\n\nconst FetchingStatus = ({\n fetching = false,\n options,\n fetchingInProgressLabel = 'Список опций загружается...',\n fetchingCompletedLabel = `Загружено опций: ${options.length}`,\n}: Pick<\n SelectProps,\n 'fetching' | 'fetchingInProgressLabel' | 'fetchingCompletedLabel' | 'options'\n>) => {\n const [status, setStatus] = React.useState<'fetching' | 'loaded' | 'none'>('none');\n\n const content = getRequiredValueByKey(status, {\n fetching: fetchingInProgressLabel,\n loaded:\n typeof fetchingCompletedLabel === 'function'\n ? fetchingCompletedLabel(options.length)\n : fetchingCompletedLabel,\n none: '',\n });\n\n useIsomorphicLayoutEffect(\n function updateStatus() {\n if (fetching) {\n setStatus('fetching');\n } else {\n if (status === 'fetching') {\n setStatus('loaded');\n setTimeout(() => setStatus('none'), FETCH_STATUS_RESET_DELAY);\n }\n }\n },\n [fetching],\n );\n\n return <VisuallyHidden aria-live=\"polite\">{content}</VisuallyHidden>;\n};\n\nexport type { CustomSelectClearButtonProps };\n\nexport interface SelectProps<\n OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface,\n> extends Omit<NativeSelectProps, 'slotProps'>,\n Omit<FormFieldProps, 'maxHeight'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'>,\n Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'readOnly'> {\n /**\n * Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `select`: свойства для прокидывания в нативный `select`;\n * - `input`: свойства для прокидывания в нативный `input`.\n */\n slotProps?: NativeSelectProps['slotProps'] & {\n input?: React.InputHTMLAttributes<HTMLInputElement> &\n HasDataAttribute &\n HasRootRef<HTMLInputElement>;\n };\n /**\n * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.\n *\n * Ref на внутрений компонент input.\n */\n getSelectInputRef?: React.Ref<HTMLInputElement>;\n /**\n * Если `true`, то при нажатии на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n */\n searchable?: boolean;\n /**\n * Текст, который будет отображен, если приходит пустой `options`.\n */\n emptyText?: string;\n /**\n * Событие изменения текстового поля.\n */\n onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /**\n * Список опций в списке.\n */\n options: OptionInterfaceT[];\n /**\n * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n */\n filterFn?: false | FilterFn<OptionInterfaceT>;\n /**\n * Направление раскрытия выпадающего списка.\n */\n popupDirection?: PopupDirection;\n /**\n * Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkui.io/components/custom-select#custom-select-option-api).\n *\n * > ⚠️ Важно: свойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе `CustomSelect` не будет знать об актуальном состоянии\n * опции.\n */\n renderOption?: (props: CustomSelectRenderOption<OptionInterfaceT>) => 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 /**\n * Обработчик закрытия выпадающего списка.\n */\n onClose?: VoidFunction;\n /**\n * Обработчик открытия выпадающего списка.\n */\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 /**\n * Передает атрибут `data-testid` для кнопки очистки.\n */\n clearButtonTestId?: string;\n /**\n * Отступ от выпадающего списка.\n */\n dropdownOffsetDistance?: number;\n /**\n * Ширина раскрывающегося списка зависит от контента.\n */\n dropdownAutoWidth?: boolean;\n /**\n * Использовать Portal для рендеринга выпадающего списка.\n */\n forceDropdownPortal?: boolean;\n /**\n * Тип отображения компонента.\n */\n selectType?: SelectType;\n /**\n * Отключает максимальную высоту по умолчанию.\n */\n noMaxHeight?: boolean;\n /**\n * Передает атрибут `data-testid` для элемента, внутри которого отображается текст выбранной опции `CustomSelect` или плейсхолдер.\n */\n labelTextTestId?: string;\n /**\n * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { 'data-testid': ... } }`.\n *\n * Передает атрибут `data-testid` для нативного элемента `select`.\n */\n nativeSelectTestId?: string;\n /**\n * Обработчик события `keyDown` в поле ввода.\n */\n onInputKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;\n /**\n * Включает режим в котором выбранное значение `CustomSelect` читается скринридерами корректно.\n * В данном режиме введенное в поле ввода значение не сбрасывается при потере фокуса.\n */\n accessible?: boolean /* TODO [>=v8] включить по умолчанию */;\n /**\n * Текстовая метка для индикации процесса загрузки данных для пользователей скринридерами. По умолчанию: `\"Список опций загружается...\"`.\n */\n fetchingInProgressLabel?: string;\n /**\n * Текстовая метка для индикации завершения процесса загрузки данных для пользователей скринридерами. По умолчанию: `\"Загружено опций: ${options.length}\"`.\n */\n fetchingCompletedLabel?: string | ((optionsCount: number) => string);\n}\n\n/**\n * @see https://vkui.io/components/custom-select\n */\nexport function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(\n props: SelectProps<OptionInterfaceT>,\n): React.ReactNode {\n const {\n style,\n className,\n getRootRef,\n before,\n name,\n getRef,\n popupDirection = 'bottom',\n onChange,\n children,\n 'onInputChange': onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n labelTextTestId,\n multiline,\n placeholder,\n status,\n forceDropdownPortal,\n align,\n selectType = 'default',\n searchable = false,\n 'renderOption': renderOptionProp = defaultRenderOptionFn,\n 'options': options,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n 'icon': iconProp,\n ClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n dropdownAutoWidth = false,\n noMaxHeight = false,\n 'aria-labelledby': ariaLabelledBy,\n clearButtonTestId,\n nativeSelectTestId,\n defaultValue,\n required,\n getSelectInputRef,\n overscrollBehavior,\n 'onInputKeyDown': onInputKeyDownProp,\n accessible = false,\n fetchingInProgressLabel,\n fetchingCompletedLabel,\n 'value': selectValue,\n 'onBlur': onSelectBlur,\n 'onFocus': onSelectFocus,\n 'onClick': onSelectClick,\n\n slotProps,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(options);\n checkDeprecatedProps(props);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const {\n onClick: onRootClick,\n onMouseMove: onRootMouseMove,\n onMouseDown: onRootMouseDown,\n getRootRef: rootRef,\n ...rootRest\n } = useMergeProps(\n {\n style,\n className,\n getRootRef,\n },\n slotProps?.root,\n );\n\n const { getRootRef: getSelectRef, ...selectRest } = useMergeProps(\n {\n getRootRef: getRef,\n onBlur: onSelectBlur,\n onFocus: onSelectFocus,\n onClick: onSelectClick,\n },\n slotProps?.select,\n );\n\n const {\n getRootRef: getInputRef,\n onChange: onChangeInput,\n onFocus: onInputFocus,\n onBlur: onInputBlur,\n onKeyDown: onNativeInputKeyDown,\n onClick: onNativeInputClick,\n readOnly,\n ...inputRest\n } = useMergeProps(\n {\n getRootRef: getSelectInputRef,\n onChange: onInputChangeProp,\n // Приводим типы так как в CustomSelect типы в rest определены как React.SelectHTMLAttributes<HTMLSelectElement>\n // Хотя эти свойства прокидываются в input\n ...(restProps as React.InputHTMLAttributes<HTMLInputElement>),\n },\n slotProps?.input,\n );\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const handleRootRef = useExternRef(containerRef, rootRef);\n const selectElRef = useExternRef(getSelectRef);\n const selectInputRef = useExternRef(getInputRef);\n\n const propsValue = React.useMemo<SelectValue | undefined>(() => {\n if (selectValue === undefined) {\n return undefined;\n }\n return getOptionByValue(options, selectValue)?.value ?? null;\n }, [options, selectValue]);\n\n const [isControlledOutside, setIsControlledOutside] = React.useState(selectValue !== undefined);\n const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);\n\n const {\n nativeSelectValue,\n setNativeSelectValue,\n selectedOptionValue,\n setSelectedOptionValue,\n onNativeSelectChange,\n } = useSelectedOptionController({\n value: propsValue,\n defaultValue,\n isControlledOutside,\n allowClearButton,\n onChange,\n });\n\n const selected = React.useMemo(\n () => options.find((option) => option.value === selectedOptionValue),\n [options, selectedOptionValue],\n );\n\n const { inputValue, onInputChange, resetInputValue, resetInputValueBySelectedOption } =\n useInputValueController({\n options,\n accessible,\n selectedValue: selectedOptionValue,\n onInputChange: onChangeInput,\n });\n\n const filteredOptions = React.useMemo(\n () => filter(options, searchable ? inputValue : '', filterFn),\n [filterFn, inputValue, options, searchable],\n );\n\n const { scrollToElement, optionsWrapperRef, scrollBoxRef } = useScrollListController();\n\n const {\n focusedOptionValue,\n setFocusedOptionValue,\n resetFocusedOption,\n focusOptionByIndex,\n focusOption,\n selectFocusedValue,\n } = useFocusedOptionController({\n selectedOptionValue,\n filteredOptions,\n scrollToElement,\n });\n\n const scrollToSelectedOption = () => {\n scrollToElement(findSelectedIndex(filteredOptions, selectedOptionValue), true);\n };\n\n const { opened, open, close, toggleOpened } = useDropdownOpenedController({\n onOpen: callMultiple(selectFocusedValue, onOpen),\n onOpened: scrollToSelectedOption,\n onClose,\n onClosed: accessible ? resetInputValueBySelectedOption : resetInputValue,\n });\n\n React.useEffect(\n function updateOptionsValue() {\n const value =\n propsValue !== undefined\n ? propsValue\n : remapFromNativeValueToSelectValue(nativeSelectValue);\n setSelectedOptionValue(value);\n setFocusedOptionValue(value);\n },\n [propsValue, nativeSelectValue, setFocusedOptionValue, setSelectedOptionValue],\n );\n\n React.useEffect(\n function syncIsControlledState() {\n setIsControlledOutside((oldIsControlled) => {\n const newIsControlled = propsValue !== undefined;\n checkMixControlledAndUncontrolledState(oldIsControlled, newIsControlled);\n return newIsControlled;\n });\n },\n [propsValue],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (\n filteredOptions.some(({ value }) => nativeSelectValue === value) ||\n (allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE)\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n undefined,\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const selectOption = React.useCallback(\n (value: Exclude<SelectValue, null>) => {\n setNativeSelectValue(value ?? NOT_SELECTED.NATIVE);\n close();\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside && propsValue !== nativeSelectValue && nativeSelectValue === value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n },\n [close, setNativeSelectValue, isControlledOutside, propsValue, nativeSelectValue, selectElRef],\n );\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionValue === null) {\n return;\n }\n\n selectOption(focusedOptionValue);\n }, [focusedOptionValue, selectOption]);\n\n const handleInputKeyDown = useInputKeyboardController({\n opened,\n open,\n close,\n resetFocusedOption,\n selectFocused,\n focusOption,\n scrollBoxRef,\n onInputKeyDown: onInputKeyDownProp,\n });\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('focusout', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }, [close, selectElRef]);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focusin', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }, [selectElRef]);\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 = filteredOptions[index];\n\n if (option && !option.disabled) {\n selectOption(option.value);\n }\n },\n [filteredOptions, selectOption],\n );\n\n const lastMousePositionRef = React.useRef<MousePosition>({ x: 0, y: 0 });\n const focusOptionOnMouseMove = React.useCallback(\n (e: React.MouseEvent<HTMLElement>, index: number) => {\n if (isMousePositionChanged(e, lastMousePositionRef.current)) {\n focusOptionByIndex(index, false);\n }\n },\n [focusOptionByIndex],\n );\n\n const popupAriaId = React.useId();\n const renderOption = React.useCallback(\n (option: OptionInterfaceT, index: number) => {\n const hovered = option.value === focusedOptionValue;\n const selected = option.value === selectedOptionValue;\n\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: preventDefault,\n // Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`.\n // Потому что если при навигации с клавиатуры курсор наведён на\n // список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter\n // обработчик которого фокусирует опцию под курсором, хотя при навигация с клавиатуры пользователь мог уйти дальше по списку, это путает.\n // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,\n // а значит нельзя на них опираться, чтобы запретить обработку такого события.\n // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.\n onMouseMove: (e) => focusOptionOnMouseMove(e, index),\n id: `${popupAriaId}-${option.value}`,\n ...option,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionValue,\n selectedOptionValue,\n renderOptionProp,\n handleOptionClick,\n popupAriaId,\n focusOptionOnMouseMove,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n filteredOptions.length > 0 ? (\n <div ref={optionsWrapperRef}>{filteredOptions.map(renderOption)}</div>\n ) : (\n <Footnote className={styles.empty}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, filteredOptions, optionsWrapperRef, renderDropdown, renderOption]);\n\n const afterItems = useAfterItems({\n value: propsValue,\n nativeSelectValue,\n isControlledOutside,\n opened,\n allowClearButton,\n ClearButton,\n onClearButtonClick: () => {\n setNativeSelectValue(NOT_SELECTED.NATIVE);\n resetInputValue();\n selectInputRef.current && selectInputRef.current.focus();\n },\n clearButtonTestId,\n disabled: restProps.disabled,\n readOnly,\n icon: iconProp,\n });\n\n const { document } = useDOM();\n const passClickAndFocusToInputOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n // Раньше внешней оберткой CustomSelect был <label>, что позволяло по клику в любую область CustomSelect,\n // даже где нету интерактивного элемента, фокусировать <input> и передавать на него событие клика.\n // Так как мы больше не оборачиваем CustomSelect в <label>, то для обертки CustomSelect мы симулируем работу <label>.\n // передаем фокус и клик по <input>, если пользователь кликнул в зоне обертки.\n // В <label> мы не больше не оборачиваем, потому что это заставляет скринридер\n // дважды произносить текст выбранной опции при фокусе, если CustomSelect связан с внешним <label>.\n // Воспроизводится в некоторых версиях Chrome, при навигации по странице с помощью стрелок.\n // Договорились со специалистом по доступности убрать <label>-обёртки из Select и CustomSelect\n\n if (!selectInputRef.current || !document) {\n return;\n }\n\n const clickTargetIsNotAnInput = e.target !== selectInputRef.current;\n if (clickTargetIsNotAnInput) {\n selectInputRef.current.click();\n\n const inputIsNotFocused = document.activeElement !== selectInputRef.current;\n if (inputIsNotFocused) {\n selectInputRef.current.focus();\n }\n }\n },\n [document, selectInputRef],\n );\n\n const preventInputBlurWhenClickInsideFocusedSelectArea = (\n e: React.MouseEvent<HTMLDivElement>,\n ) => {\n // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,\n // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.\n // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки\n const isInputFocused = document && document.activeElement === selectInputRef.current;\n if (isInputFocused) {\n e.preventDefault();\n }\n };\n\n const ariaActiveDescendantId = focusedOptionValue !== null ? focusedOptionValue : undefined;\n\n const selectInputAriaProps: React.HTMLAttributes<HTMLElement> = {\n 'role': 'combobox',\n 'aria-controls': popupAriaId,\n 'aria-expanded': opened,\n 'aria-activedescendant':\n ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-haspopup': 'listbox',\n 'aria-autocomplete': 'none',\n };\n\n const resetOptionFocusOnMouseLeave = React.useCallback(\n (event: React.MouseEvent) => {\n // В Хроме eсли мышка пользователя находится над инпутом селекта,\n // и он с клавиатуры открывает опции, причём одна из опций\n // уже выбрана, то видно, как выбранная опция получает фокус,\n // но потом сразу же его теряет.\n // Связано это с тем, что в этот момент вызывается onMouseLeave, на который у нас\n // завязан сброс состония фокуса у опции. По хорошему фокус должен оставаться.\n // Нам не интересен вызов onMouseLeave если мышка при этом не двигалась.\n if (isMousePositionChanged(event, lastMousePositionRef.current)) {\n resetFocusedOption();\n }\n },\n [resetFocusedOption],\n );\n\n const updateLastMousePosition = (e: React.MouseEvent) => {\n lastMousePositionRef.current = { x: e.clientX, y: e.clientY };\n };\n\n return (\n <RootComponent\n baseClassName={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}\n getRootRef={handleRootRef}\n onClick={callMultiple(onRootClick, passClickAndFocusToInputOnClick)}\n onMouseDown={callMultiple(onRootMouseDown, preventInputBlurWhenClickInsideFocusedSelectArea)}\n onMouseMove={callMultiple(onRootMouseMove, updateLastMousePosition)}\n {...rootRest}\n >\n <CustomSelectInput\n autoComplete=\"off\"\n autoCapitalize=\"none\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n fetching={fetching}\n searchable={searchable}\n accessible={accessible}\n before={before}\n after={afterItems}\n selectType={selectType}\n align={align}\n status={status}\n placeholder={placeholder}\n multiline={multiline}\n labelTextTestId={labelTextTestId}\n slotProps={{\n root: { className: openedClassNames },\n input: {\n getRootRef: selectInputRef,\n onChange: onInputChange,\n onFocus: callMultiple(onFocus, onInputFocus),\n onBlur: callMultiple(onBlur, onInputBlur),\n onKeyDown: !readOnly\n ? callMultiple(handleInputKeyDown, onNativeInputKeyDown)\n : onNativeInputKeyDown,\n onClick: !readOnly\n ? callMultiple(toggleOpened, onNativeInputClick)\n : onNativeInputClick,\n value: inputValue,\n readOnly: readOnly || !searchable,\n ...selectInputAriaProps,\n ...inputRest,\n },\n }}\n >\n {selected?.label}\n </CustomSelectInput>\n\n <FetchingStatus\n fetching={fetching}\n options={filteredOptions}\n fetchingInProgressLabel={fetchingInProgressLabel}\n fetchingCompletedLabel={fetchingCompletedLabel}\n />\n <RootComponent\n Component=\"select\"\n baseClassName={styles.control}\n tabIndex={-1}\n name={name}\n value={nativeSelectValue}\n aria-hidden\n data-testid={nativeSelectTestId}\n required={required}\n onChange={onNativeSelectChange}\n getRootRef={selectElRef}\n {...selectRest}\n >\n {(allowClearButton || nativeSelectValue === NOT_SELECTED.NATIVE) && (\n <option key={NOT_SELECTED.NATIVE} value={NOT_SELECTED.NATIVE} />\n )}\n {options.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </RootComponent>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popperPlacement}\n scrollBoxRef={scrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetOptionFocusOnMouseLeave}\n fetching={fetching}\n overscrollBehavior={overscrollBehavior}\n offsetDistance={dropdownOffsetDistance}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n role=\"listbox\"\n id={popupAriaId}\n aria-labelledby={ariaLabelledBy}\n tabIndex={-1}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </RootComponent>\n );\n}\n"],"names":["React","classNames","getRequiredValueByKey","useAdaptivity","useExternRef","useMergeProps","callMultiple","useDOM","defaultFilterFn","useIsomorphicLayoutEffect","preventDefault","CustomSelectDropdown","CustomSelectOption","NOT_SELECTED","remapFromNativeValueToSelectValue","RootComponent","Footnote","VisuallyHidden","CustomSelectInput","checkDeprecatedProps","checkMixControlledAndUncontrolledState","checkOptionsValueType","filter","findSelectedIndex","getOptionByValue","useAfterItems","useDropdownOpenedController","useFocusedOptionController","useInputKeyboardController","useInputValueController","useScrollListController","useSelectedOptionController","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","defaultRenderOptionFn","option","props","isMousePositionChanged","event","prevPosition","Math","abs","x","clientX","y","clientY","FETCH_STATUS_RESET_DELAY","FetchingStatus","fetching","options","fetchingInProgressLabel","fetchingCompletedLabel","length","status","setStatus","useState","content","loaded","updateStatus","setTimeout","aria-live","CustomSelect","style","className","getRootRef","before","name","getRef","popupDirection","onChange","children","onInputChangeProp","renderDropdown","onOpen","onClose","labelTextTestId","multiline","placeholder","forceDropdownPortal","align","selectType","searchable","renderOptionProp","emptyText","filterFn","iconProp","ClearButton","allowClearButton","dropdownOffsetDistance","dropdownAutoWidth","noMaxHeight","ariaLabelledBy","clearButtonTestId","nativeSelectTestId","defaultValue","required","getSelectInputRef","overscrollBehavior","onInputKeyDownProp","accessible","selectValue","onSelectBlur","onSelectFocus","onSelectClick","slotProps","restProps","process","env","NODE_ENV","sizeY","onClick","onRootClick","onMouseMove","onRootMouseMove","onMouseDown","onRootMouseDown","rootRef","rootRest","root","getSelectRef","selectRest","onBlur","onFocus","select","getInputRef","onChangeInput","onInputFocus","onInputBlur","onKeyDown","onNativeInputKeyDown","onNativeInputClick","readOnly","inputRest","input","containerRef","useRef","handleRootRef","selectElRef","selectInputRef","propsValue","useMemo","undefined","value","isControlledOutside","setIsControlledOutside","popperPlacement","setPopperPlacement","nativeSelectValue","setNativeSelectValue","selectedOptionValue","setSelectedOptionValue","onNativeSelectChange","selected","find","inputValue","onInputChange","resetInputValue","resetInputValueBySelectedOption","selectedValue","filteredOptions","scrollToElement","optionsWrapperRef","scrollBoxRef","focusedOptionValue","setFocusedOptionValue","resetFocusedOption","focusOptionByIndex","focusOption","selectFocusedValue","scrollToSelectedOption","opened","open","close","toggleOpened","onOpened","onClosed","useEffect","updateOptionsValue","syncIsControlledState","oldIsControlled","newIsControlled","some","NATIVE","Event","bubbles","current","dispatchEvent","openedClassNames","includes","popUp","popDown","selectOption","useCallback","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","handleInputKeyDown","onInputKeyDown","handleOptionClick","e","index","Array","prototype","indexOf","call","currentTarget","parentNode","disabled","lastMousePositionRef","focusOptionOnMouseMove","popupAriaId","useId","renderOption","hovered","Fragment","label","id","resolvedContent","defaultDropdownContent","div","ref","map","empty","afterItems","onClearButtonClick","focus","icon","document","passClickAndFocusToInputOnClick","clickTargetIsNotAnInput","target","click","inputIsNotFocused","activeElement","preventInputBlurWhenClickInsideFocusedSelectArea","isInputFocused","ariaActiveDescendantId","selectInputAriaProps","resetOptionFocusOnMouseLeave","updateLastMousePosition","baseClassName","host","autoComplete","autoCapitalize","autoCorrect","spellCheck","after","Component","control","tabIndex","aria-hidden","data-testid","item","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","autoWidth","forcePortal","role","aria-labelledby"],"mappings":"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"}
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
|
|
19
19
|
-webkit-padding-start: calc(
|
|
20
20
|
var(--vkui_internal--custom_select_option_hierarchy_level) *
|
|
21
|
-
|
|
21
|
+
var(--vkui--size_option_hierarchy--regular)
|
|
22
22
|
);
|
|
23
23
|
|
|
24
24
|
padding-inline-start: calc(
|
|
25
25
|
var(--vkui_internal--custom_select_option_hierarchy_level) *
|
|
26
|
-
|
|
26
|
+
var(--vkui--size_option_hierarchy--regular)
|
|
27
27
|
);
|
|
28
28
|
}
|
|
29
29
|
|
|
@@ -41,8 +41,9 @@
|
|
|
41
41
|
box-sizing: border-box;
|
|
42
42
|
align-self: center;
|
|
43
43
|
inline-size: calc(
|
|
44
|
-
100% -
|
|
45
|
-
|
|
44
|
+
100% -
|
|
45
|
+
var(--vkui_internal--DateInput_input_margin_inline_start) -
|
|
46
|
+
var(--vkui_internal--DateInput_input_margin_inline_end)
|
|
46
47
|
);
|
|
47
48
|
margin-inline: var(--vkui_internal--DateInput_input_margin_inline_start)
|
|
48
49
|
var(--vkui_internal--DateInput_input_margin_inline_end);
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
:global(.vkuiInternalEpic--hasTabbar).host {
|
|
9
9
|
--vkui_internal--snackbar_safe_area_inset_bottom: calc(
|
|
10
|
-
var(--vkui_internal--tabbar_height) +
|
|
10
|
+
var(--vkui_internal--tabbar_height) +
|
|
11
|
+
var(--vkui_internal--safe_area_inset_bottom)
|
|
11
12
|
);
|
|
12
13
|
}
|
|
@@ -42,10 +42,12 @@
|
|
|
42
42
|
|
|
43
43
|
:global(.vkuiInternalEpic--hasTabbar) .verticalBottom {
|
|
44
44
|
-webkit-padding-after: calc(
|
|
45
|
-
var(--vkui_internal--tabbar_height) +
|
|
45
|
+
var(--vkui_internal--tabbar_height) +
|
|
46
|
+
var(--vkui_internal--safe_area_inset_bottom)
|
|
46
47
|
);
|
|
47
48
|
padding-block-end: calc(
|
|
48
|
-
var(--vkui_internal--tabbar_height) +
|
|
49
|
+
var(--vkui_internal--tabbar_height) +
|
|
50
|
+
var(--vkui_internal--safe_area_inset_bottom)
|
|
49
51
|
);
|
|
50
52
|
}
|
|
51
53
|
|
|
@@ -59,7 +61,8 @@
|
|
|
59
61
|
:global(.vkuiInternalPanelHeader) ~ .verticalTop,
|
|
60
62
|
:global(.vkuiInternalPanelHeader) ~ * .verticalTop:not(:global(.vkuiInternalPanelHeader__fixed)) {
|
|
61
63
|
inset-block-start: calc(
|
|
62
|
-
var(--vkui_internal--panel_header_height) +
|
|
64
|
+
var(--vkui_internal--panel_header_height) +
|
|
65
|
+
var(--vkui_internal--safe_area_inset_top)
|
|
63
66
|
);
|
|
64
67
|
}
|
|
65
68
|
|
|
@@ -32,16 +32,24 @@
|
|
|
32
32
|
@supports not (inset: 0) {
|
|
33
33
|
.host {
|
|
34
34
|
-webkit-margin-before: calc(
|
|
35
|
-
-1 *
|
|
35
|
+
-1 *
|
|
36
|
+
var(--vkui_internal--row_gap) +
|
|
37
|
+
var(--vkui_internal--flex_original_margin_block)
|
|
36
38
|
);
|
|
37
39
|
margin-block-start: calc(
|
|
38
|
-
-1 *
|
|
40
|
+
-1 *
|
|
41
|
+
var(--vkui_internal--row_gap) +
|
|
42
|
+
var(--vkui_internal--flex_original_margin_block)
|
|
39
43
|
);
|
|
40
44
|
-webkit-margin-start: calc(
|
|
41
|
-
-1 *
|
|
45
|
+
-1 *
|
|
46
|
+
var(--vkui_internal--column_gap) +
|
|
47
|
+
var(--vkui_internal--flex_original_margin_inline)
|
|
42
48
|
);
|
|
43
49
|
margin-inline-start: calc(
|
|
44
|
-
-1 *
|
|
50
|
+
-1 *
|
|
51
|
+
var(--vkui_internal--column_gap) +
|
|
52
|
+
var(--vkui_internal--flex_original_margin_inline)
|
|
45
53
|
);
|
|
46
54
|
}
|
|
47
55
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkui.io/components/group#footer\n */\nexport const Footer = ({\n children,\n className,\n Component = 'footer',\n role: roleProp,\n ...restProps\n}: FooterProps): React.ReactNode => {\n const role = roleProp ?? (Component === 'footer' ? 'contentinfo' : undefined);\n return (\n <Footnote\n Component={Component}\n role={role}\n {...restProps}\n className={classNames(styles.host, className)}\n >\n {children}\n </Footnote>\n );\n};\n"],"names":["React","classNames","Footnote","styles","Footer","children","className","Component","role","roleProp","restProps","undefined","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,QAAQ,EACRC,SAAS,EACTC,YAAY,QAAQ,EACpBC,MAAMC,QAAQ,EACd,GAAGC,WACS;IACZ,MAAMF,OAAOC,YAAaF,CAAAA,cAAc,WAAW,gBAAgBI,SAAQ;IAC3E,qBACE,KAACT;QACCK,WAAWA;QACXC,MAAMA;QACL,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkui.io/components/group#footer\n */\nexport const Footer = ({\n children,\n className,\n Component = 'footer',\n role: roleProp,\n ...restProps\n}: FooterProps): React.ReactNode => {\n const role = roleProp ?? (Component === 'footer' ? 'contentinfo' : undefined);\n return (\n <Footnote\n Component={Component}\n role={role}\n align=\"center\"\n {...restProps}\n className={classNames(styles.host, className)}\n >\n {children}\n </Footnote>\n );\n};\n"],"names":["React","classNames","Footnote","styles","Footer","children","className","Component","role","roleProp","restProps","undefined","align","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrBC,QAAQ,EACRC,SAAS,EACTC,YAAY,QAAQ,EACpBC,MAAMC,QAAQ,EACd,GAAGC,WACS;IACZ,MAAMF,OAAOC,YAAaF,CAAAA,cAAc,WAAW,gBAAgBI,SAAQ;IAC3E,qBACE,KAACT;QACCK,WAAWA;QACXC,MAAMA;QACNI,OAAM;QACL,GAAGF,SAAS;QACbJ,WAAWL,WAAWE,OAAOU,IAAI,EAAEP;kBAElCD;;AAGP,EAAE"}
|
|
@@ -142,7 +142,9 @@
|
|
|
142
142
|
|
|
143
143
|
:global(.vkuiInternalFormItem--status-error) .modeDefault > .border,
|
|
144
144
|
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
|
|
145
|
-
:global(.vkuiInternalFormItem--status-error)
|
|
145
|
+
:global(.vkuiInternalFormItem--status-error)
|
|
146
|
+
.focusVisible
|
|
147
|
+
> .border,
|
|
146
148
|
.statusError.modeDefault > .border,
|
|
147
149
|
.statusError.focusVisible > .border {
|
|
148
150
|
z-index: var(--vkui_internal--z_index_form_field_status);
|
|
@@ -162,7 +164,9 @@
|
|
|
162
164
|
|
|
163
165
|
:global(.vkuiInternalFormItem--status-valid) .modeDefault > .border,
|
|
164
166
|
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
|
|
165
|
-
:global(.vkuiInternalFormItem--status-valid)
|
|
167
|
+
:global(.vkuiInternalFormItem--status-valid)
|
|
168
|
+
.focusVisible
|
|
169
|
+
> .border,
|
|
166
170
|
.statusValid.modeDefault > .border,
|
|
167
171
|
.statusValid.focusVisible > .border {
|
|
168
172
|
z-index: var(--vkui_internal--z_index_form_field_status);
|
|
@@ -225,7 +229,7 @@
|
|
|
225
229
|
|
|
226
230
|
:global(
|
|
227
231
|
.vkuiInternalFormLayoutGroup--segmented.vkuiInternalFormLayoutGroup--mode-horizontal
|
|
228
|
-
|
|
232
|
+
.vkuiInternalFormItem
|
|
229
233
|
):first-of-type
|
|
230
234
|
.host {
|
|
231
235
|
border-start-start-radius: var(--vkui--size_border_radius--regular);
|
|
@@ -236,7 +240,7 @@
|
|
|
236
240
|
|
|
237
241
|
:global(
|
|
238
242
|
.vkuiInternalFormLayoutGroup--segmented.vkuiInternalFormLayoutGroup--mode-horizontal
|
|
239
|
-
|
|
243
|
+
.vkuiInternalFormItem
|
|
240
244
|
):last-of-type
|
|
241
245
|
.host {
|
|
242
246
|
border-start-end-radius: var(--vkui--size_border_radius--regular);
|
|
@@ -247,7 +251,7 @@
|
|
|
247
251
|
|
|
248
252
|
:global(
|
|
249
253
|
.vkuiInternalFormLayoutGroup--segmented.vkuiInternalFormLayoutGroup--mode-vertical
|
|
250
|
-
|
|
254
|
+
.vkuiInternalFormItem
|
|
251
255
|
):first-of-type
|
|
252
256
|
.host {
|
|
253
257
|
border-start-start-radius: var(--vkui--size_border_radius--regular);
|
|
@@ -258,7 +262,7 @@
|
|
|
258
262
|
|
|
259
263
|
:global(
|
|
260
264
|
.vkuiInternalFormLayoutGroup--segmented.vkuiInternalFormLayoutGroup--mode-vertical
|
|
261
|
-
|
|
265
|
+
.vkuiInternalFormItem
|
|
262
266
|
):last-of-type
|
|
263
267
|
.host {
|
|
264
268
|
border-end-start-radius: var(--vkui--size_border_radius--regular);
|
|
@@ -160,12 +160,16 @@
|
|
|
160
160
|
:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .withTop,
|
|
161
161
|
.withTop .removable {
|
|
162
162
|
-webkit-margin-before: calc(
|
|
163
|
-
-1 *
|
|
164
|
-
|
|
163
|
+
-1 *
|
|
164
|
+
var(--vkui--spacing_size_2xs) -
|
|
165
|
+
var(--vkui--font_subhead--line_height--regular) -
|
|
166
|
+
var(--vkui--spacing_size_m)
|
|
165
167
|
);
|
|
166
168
|
margin-block-start: calc(
|
|
167
|
-
-1 *
|
|
168
|
-
|
|
169
|
+
-1 *
|
|
170
|
+
var(--vkui--spacing_size_2xs) -
|
|
171
|
+
var(--vkui--font_subhead--line_height--regular) -
|
|
172
|
+
var(--vkui--spacing_size_m)
|
|
169
173
|
);
|
|
170
174
|
}
|
|
171
175
|
|
|
@@ -174,12 +178,16 @@
|
|
|
174
178
|
:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .sizeYCompact.withTop,
|
|
175
179
|
.sizeYCompact.withTop .removable {
|
|
176
180
|
-webkit-margin-before: calc(
|
|
177
|
-
-1 *
|
|
178
|
-
|
|
181
|
+
-1 *
|
|
182
|
+
var(--vkui--spacing_size_2xs) -
|
|
183
|
+
var(--vkui--font_subhead--line_height--compact) -
|
|
184
|
+
var(--vkui--spacing_size_s)
|
|
179
185
|
);
|
|
180
186
|
margin-block-start: calc(
|
|
181
|
-
-1 *
|
|
182
|
-
|
|
187
|
+
-1 *
|
|
188
|
+
var(--vkui--spacing_size_2xs) -
|
|
189
|
+
var(--vkui--font_subhead--line_height--compact) -
|
|
190
|
+
var(--vkui--spacing_size_s)
|
|
183
191
|
);
|
|
184
192
|
}
|
|
185
193
|
|
|
@@ -188,12 +196,16 @@
|
|
|
188
196
|
:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .sizeYNone.withTop,
|
|
189
197
|
.sizeYNone.withTop .removable {
|
|
190
198
|
-webkit-margin-before: calc(
|
|
191
|
-
-1 *
|
|
192
|
-
|
|
199
|
+
-1 *
|
|
200
|
+
var(--vkui--spacing_size_2xs) -
|
|
201
|
+
var(--vkui--font_subhead--line_height--compact) -
|
|
202
|
+
var(--vkui--spacing_size_s)
|
|
193
203
|
);
|
|
194
204
|
margin-block-start: calc(
|
|
195
|
-
-1 *
|
|
196
|
-
|
|
205
|
+
-1 *
|
|
206
|
+
var(--vkui--spacing_size_2xs) -
|
|
207
|
+
var(--vkui--font_subhead--line_height--compact) -
|
|
208
|
+
var(--vkui--spacing_size_s)
|
|
197
209
|
);
|
|
198
210
|
}
|
|
199
211
|
}
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
.item:nth-last-child(n + 3) ~ .item:nth-last-child(2),
|
|
35
35
|
/* четвертый с конца */
|
|
36
|
-
.item:nth-last-child(4) {
|
|
36
|
+
.item:nth-last-child(4) {
|
|
37
37
|
-webkit-margin-after: var(--vkui_internal--grid_avatar_image_offset);
|
|
38
38
|
margin-block-end: var(--vkui_internal--grid_avatar_image_offset);
|
|
39
39
|
}
|
|
@@ -260,7 +260,8 @@
|
|
|
260
260
|
|
|
261
261
|
.modePlainInsideModal + .separatorSibling {
|
|
262
262
|
padding-inline: calc(
|
|
263
|
-
var(--vkui--size_base_padding_horizontal--regular) +
|
|
263
|
+
var(--vkui--size_base_padding_horizontal--regular) +
|
|
264
|
+
var(--vkui--spacing_size_m)
|
|
264
265
|
);
|
|
265
266
|
}
|
|
266
267
|
}
|
|
@@ -320,7 +321,9 @@
|
|
|
320
321
|
|
|
321
322
|
:global(.vkuiInternalPanelHeader--vkcom) ~ .host:first-of-type,
|
|
322
323
|
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
|
|
323
|
-
:global(.vkuiInternalPanelHeader--vkcom)
|
|
324
|
+
:global(.vkuiInternalPanelHeader--vkcom)
|
|
325
|
+
+ *
|
|
326
|
+
.host:first-of-type {
|
|
324
327
|
position: relative;
|
|
325
328
|
inset-block-start: -1px;
|
|
326
329
|
border-start-start-radius: 0;
|
|
@@ -45,7 +45,8 @@
|
|
|
45
45
|
|
|
46
46
|
.sizeS {
|
|
47
47
|
--vkui_internal--side_cell_gap: calc(
|
|
48
|
-
var(--vkui--size_base_padding_horizontal--regular) -
|
|
48
|
+
var(--vkui--size_base_padding_horizontal--regular) -
|
|
49
|
+
var(--vkui--spacing_size_m)
|
|
49
50
|
);
|
|
50
51
|
--vkui_internal--cell_width: 72px;
|
|
51
52
|
}
|
|
@@ -112,7 +113,8 @@
|
|
|
112
113
|
|
|
113
114
|
.sized:first-child:last-child {
|
|
114
115
|
max-inline-size: calc(
|
|
115
|
-
var(--vkui_internal--cell_width) +
|
|
116
|
+
var(--vkui_internal--cell_width) +
|
|
117
|
+
(2 * (var(--vkui_internal--side_cell_gap)))
|
|
116
118
|
);
|
|
117
119
|
}
|
|
118
120
|
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { classNames, noop } from "@vkontakte/vkjs";
|
|
5
|
-
import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer.js";
|
|
6
5
|
import { useConfigDirection } from "../../hooks/useConfigDirection.js";
|
|
7
6
|
import { useExternRef } from "../../hooks/useExternRef.js";
|
|
8
7
|
import { useFocusVisible } from "../../hooks/useFocusVisible.js";
|
|
9
8
|
import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
|
|
10
9
|
import { easeInOutSine } from "../../lib/fx.js";
|
|
10
|
+
import { mergeCalls } from "../../lib/mergeCalls.js";
|
|
11
11
|
import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
|
|
12
|
+
import { useHover } from "../Clickable/useState.js";
|
|
12
13
|
import { RootComponent } from "../RootComponent/RootComponent.js";
|
|
13
14
|
import { ScrollArrow } from "../ScrollArrow/ScrollArrow.js";
|
|
14
15
|
import styles from "./HorizontalScroll.module.css";
|
|
@@ -86,7 +87,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
86
87
|
/**
|
|
87
88
|
* @see https://vkui.io/components/horizontal-scroll
|
|
88
89
|
*/ export const HorizontalScroll = ({ children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId, // ContentWrapper
|
|
89
|
-
ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, ...restProps })=>{
|
|
90
|
+
ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, onPointerEnter, onPointerLeave, onMouseEnter, ...restProps })=>{
|
|
90
91
|
const [canScrollStart, setCanScrollStart] = React.useState(false);
|
|
91
92
|
const [canScrollEnd, setCanScrollEnd] = React.useState(false);
|
|
92
93
|
const { focusVisible, ...focusEvents } = useFocusVisible();
|
|
@@ -98,7 +99,7 @@ ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, ...
|
|
|
98
99
|
const isCustomScrollingRef = React.useRef(false);
|
|
99
100
|
const scrollerRef = useExternRef(getRef);
|
|
100
101
|
const animationQueue = React.useRef([]);
|
|
101
|
-
const
|
|
102
|
+
const { isHovered, ...hoverHandlers } = useHover();
|
|
102
103
|
const scrollTo = React.useCallback((getScrollPosition)=>{
|
|
103
104
|
const scrollElement = scrollerRef.current;
|
|
104
105
|
animationQueue.current.push(()=>doScroll({
|
|
@@ -138,7 +139,7 @@ ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, ...
|
|
|
138
139
|
scrollerRef
|
|
139
140
|
]);
|
|
140
141
|
const calculateArrowsVisibility = React.useCallback(()=>{
|
|
141
|
-
if (showArrows &&
|
|
142
|
+
if (showArrows && scrollerRef.current && !isCustomScrollingRef.current) {
|
|
142
143
|
const scrollElement = scrollerRef.current;
|
|
143
144
|
const scrollLeft = scrollElement.scrollLeft;
|
|
144
145
|
setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);
|
|
@@ -146,7 +147,6 @@ ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, ...
|
|
|
146
147
|
}
|
|
147
148
|
}, [
|
|
148
149
|
showArrows,
|
|
149
|
-
hasPointer,
|
|
150
150
|
scrollerRef,
|
|
151
151
|
isRtl
|
|
152
152
|
]);
|
|
@@ -188,12 +188,18 @@ ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, ...
|
|
|
188
188
|
calculateArrowsVisibility,
|
|
189
189
|
scrollerRef
|
|
190
190
|
]);
|
|
191
|
+
const handlers = mergeCalls(hoverHandlers, {
|
|
192
|
+
onPointerEnter,
|
|
193
|
+
onPointerLeave
|
|
194
|
+
});
|
|
191
195
|
return /*#__PURE__*/ _jsxs(RootComponent, {
|
|
192
196
|
...restProps,
|
|
193
|
-
|
|
197
|
+
...handlers,
|
|
198
|
+
baseClassName: classNames(styles.host, 'vkuiInternalHorizontalScroll', (showArrows === 'always' || isHovered) && styles.showArrows, isRtl && styles.rtl),
|
|
199
|
+
// FIXME: onMouseEnter из restProps затирается, а при callMultiply орет линтер на рефы.
|
|
194
200
|
onMouseEnter: calculateArrowsVisibility,
|
|
195
201
|
children: [
|
|
196
|
-
showArrows &&
|
|
202
|
+
showArrows && canScrollStart && /*#__PURE__*/ _jsx(ScrollArrow, {
|
|
197
203
|
"data-testid": prevButtonTestId,
|
|
198
204
|
size: arrowSize,
|
|
199
205
|
offsetY: arrowOffsetY,
|
|
@@ -203,7 +209,7 @@ ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, ...
|
|
|
203
209
|
className: classNames(styles.arrow, styles.arrowLeft),
|
|
204
210
|
onClick: scrollToStart
|
|
205
211
|
}),
|
|
206
|
-
showArrows &&
|
|
212
|
+
showArrows && canScrollEnd && /*#__PURE__*/ _jsx(ScrollArrow, {
|
|
207
213
|
"data-testid": nextButtonTestId,
|
|
208
214
|
size: arrowSize,
|
|
209
215
|
offsetY: arrowOffsetY,
|