@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","sizeYClassNames","none","compact","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","root","onClick","onRootClick","onMouseMove","onRootMouseMove","onMouseDown","onRootMouseDown","rootRef","rootRest","onBlur","onFocus","select","getSelectRef","selectRest","input","getInputRef","onChangeInput","onInputFocus","onInputBlur","onKeyDown","onNativeInputKeyDown","onNativeInputClick","readOnly","inputRest","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","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","afterItems","onClearButtonClick","focus","icon","document","passClickAndFocusToInputOnClick","clickTargetIsNotAnInput","target","click","inputIsNotFocused","activeElement","preventInputBlurWhenClickInsideFocusedSelectArea","isInputFocused","ariaActiveDescendantId","selectInputAriaProps","resetOptionFocusOnMouseLeave","updateLastMousePosition","baseClassName","autoComplete","autoCapitalize","autoCorrect","spellCheck","after","Component","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","sizeYClassNames","none","compact","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","root","onClick","onRootClick","onMouseMove","onRootMouseMove","onMouseDown","onRootMouseDown","rootRef","rootRest","onBlur","onFocus","select","getSelectRef","selectRest","input","getInputRef","onChangeInput","onInputFocus","onInputBlur","onKeyDown","onNativeInputKeyDown","onNativeInputClick","readOnly","inputRest","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","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","afterItems","onClearButtonClick","focus","icon","document","passClickAndFocusToInputOnClick","clickTargetIsNotAnInput","target","click","inputIsNotFocused","activeElement","preventInputBlurWhenClickInsideFocusedSelectArea","isInputFocused","ariaActiveDescendantId","selectInputAriaProps","resetOptionFocusOnMouseLeave","updateLastMousePosition","baseClassName","autoComplete","autoCapitalize","autoCorrect","spellCheck","after","Component","tabIndex","aria-hidden","data-testid","item","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","autoWidth","forcePortal","role","aria-labelledby"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,kEAMpB,WAAW,KAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,kEAMpB,WAAW,KAAG,KAAK,CAAC,SAatB,CAAC"}
|
|
@@ -17,7 +17,8 @@ import { Footnote } from "../Typography/Footnote/Footnote.js";
|
|
|
17
17
|
const role = roleProp !== null && roleProp !== void 0 ? roleProp : Component === 'footer' ? 'contentinfo' : undefined;
|
|
18
18
|
return /*#__PURE__*/ _jsx(Footnote, _object_spread_props(_object_spread({
|
|
19
19
|
Component: Component,
|
|
20
|
-
role: role
|
|
20
|
+
role: role,
|
|
21
|
+
align: "center"
|
|
21
22
|
}, restProps), {
|
|
22
23
|
className: classNames("vkuiFooter__host", className),
|
|
23
24
|
children: children
|
|
@@ -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","Footer","children","className","Component","role","roleProp","restProps","undefined"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,qCAAkC;AAK3D;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,QAAQ,EACRC,SAAS,EACTC,YAAY,QAAQ,EACpBC,MAAMC,QAAQ,EAEF,WADTC;QAJHL;QACAC;QACAC;QACAC;;IAGA,MAAMA,OAAOC,qBAAAA,sBAAAA,WAAaF,cAAc,WAAW,gBAAgBI;IACnE,qBACE,KAACR;QACCI,WAAWA;QACXC,MAAMA;
|
|
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","Footer","children","className","Component","role","roleProp","restProps","undefined","align"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,qCAAkC;AAK3D;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrBC,QAAQ,EACRC,SAAS,EACTC,YAAY,QAAQ,EACpBC,MAAMC,QAAQ,EAEF,WADTC;QAJHL;QACAC;QACAC;QACAC;;IAGA,MAAMA,OAAOC,qBAAAA,sBAAAA,WAAaF,cAAc,WAAW,gBAAgBI;IACnE,qBACE,KAACR;QACCI,WAAWA;QACXC,MAAMA;QACNI,OAAM;OACFF;QACJJ,WAAWJ,+BAAwBI;kBAElCD;;AAGP,EAAE"}
|
|
@@ -56,5 +56,5 @@ export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDiv
|
|
|
56
56
|
/**
|
|
57
57
|
* @see https://vkui.io/components/horizontal-scroll
|
|
58
58
|
*/
|
|
59
|
-
export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ContentWrapperComponent, contentWrapperRef, contentWrapperClassName, ...restProps }: HorizontalScrollProps) => React.ReactNode;
|
|
59
|
+
export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ContentWrapperComponent, contentWrapperRef, contentWrapperClassName, onPointerEnter, onPointerLeave, onMouseEnter, ...restProps }: HorizontalScrollProps) => React.ReactNode;
|
|
60
60
|
//# sourceMappingURL=HorizontalScroll.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGrE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAqBhF,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC5C;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC3C;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AA6GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,8SAoB9B,qBAAqB,KAAG,KAAK,CAAC,SA6JhC,CAAC"}
|
|
@@ -5,13 +5,14 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
|
|
|
5
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
6
|
import * as React from "react";
|
|
7
7
|
import { classNames, noop } from "@vkontakte/vkjs";
|
|
8
|
-
import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer.js";
|
|
9
8
|
import { useConfigDirection } from "../../hooks/useConfigDirection.js";
|
|
10
9
|
import { useExternRef } from "../../hooks/useExternRef.js";
|
|
11
10
|
import { useFocusVisible } from "../../hooks/useFocusVisible.js";
|
|
12
11
|
import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
|
|
13
12
|
import { easeInOutSine } from "../../lib/fx.js";
|
|
13
|
+
import { mergeCalls } from "../../lib/mergeCalls.js";
|
|
14
14
|
import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
|
|
15
|
+
import { useHover } from "../Clickable/useState.js";
|
|
15
16
|
import { RootComponent } from "../RootComponent/RootComponent.js";
|
|
16
17
|
import { ScrollArrow } from "../ScrollArrow/ScrollArrow.js";
|
|
17
18
|
/**
|
|
@@ -89,7 +90,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
89
90
|
* @see https://vkui.io/components/horizontal-scroll
|
|
90
91
|
*/ export const HorizontalScroll = (_param)=>{
|
|
91
92
|
var { children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId, // ContentWrapper
|
|
92
|
-
ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName } = _param, restProps = _object_without_properties(_param, [
|
|
93
|
+
ContentWrapperComponent = 'div', contentWrapperRef, contentWrapperClassName, onPointerEnter, onPointerLeave, onMouseEnter } = _param, restProps = _object_without_properties(_param, [
|
|
93
94
|
"children",
|
|
94
95
|
"getScrollToLeft",
|
|
95
96
|
"getScrollToRight",
|
|
@@ -103,7 +104,10 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
103
104
|
"nextButtonTestId",
|
|
104
105
|
"ContentWrapperComponent",
|
|
105
106
|
"contentWrapperRef",
|
|
106
|
-
"contentWrapperClassName"
|
|
107
|
+
"contentWrapperClassName",
|
|
108
|
+
"onPointerEnter",
|
|
109
|
+
"onPointerLeave",
|
|
110
|
+
"onMouseEnter"
|
|
107
111
|
]);
|
|
108
112
|
const [canScrollStart, setCanScrollStart] = React.useState(false);
|
|
109
113
|
const [canScrollEnd, setCanScrollEnd] = React.useState(false);
|
|
@@ -118,7 +122,9 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
118
122
|
const isCustomScrollingRef = React.useRef(false);
|
|
119
123
|
const scrollerRef = useExternRef(getRef);
|
|
120
124
|
const animationQueue = React.useRef([]);
|
|
121
|
-
const
|
|
125
|
+
const _useHover = useHover(), { isHovered } = _useHover, hoverHandlers = _object_without_properties(_useHover, [
|
|
126
|
+
"isHovered"
|
|
127
|
+
]);
|
|
122
128
|
const scrollTo = React.useCallback((getScrollPosition)=>{
|
|
123
129
|
const scrollElement = scrollerRef.current;
|
|
124
130
|
animationQueue.current.push(()=>{
|
|
@@ -161,7 +167,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
161
167
|
scrollerRef
|
|
162
168
|
]);
|
|
163
169
|
const calculateArrowsVisibility = React.useCallback(()=>{
|
|
164
|
-
if (showArrows &&
|
|
170
|
+
if (showArrows && scrollerRef.current && !isCustomScrollingRef.current) {
|
|
165
171
|
const scrollElement = scrollerRef.current;
|
|
166
172
|
const scrollLeft = scrollElement.scrollLeft;
|
|
167
173
|
setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);
|
|
@@ -169,7 +175,6 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
169
175
|
}
|
|
170
176
|
}, [
|
|
171
177
|
showArrows,
|
|
172
|
-
hasPointer,
|
|
173
178
|
scrollerRef,
|
|
174
179
|
isRtl
|
|
175
180
|
]);
|
|
@@ -211,11 +216,16 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
211
216
|
calculateArrowsVisibility,
|
|
212
217
|
scrollerRef
|
|
213
218
|
]);
|
|
214
|
-
|
|
215
|
-
|
|
219
|
+
const handlers = mergeCalls(hoverHandlers, {
|
|
220
|
+
onPointerEnter,
|
|
221
|
+
onPointerLeave
|
|
222
|
+
});
|
|
223
|
+
return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, restProps, handlers), {
|
|
224
|
+
baseClassName: classNames("vkuiHorizontalScroll__host", 'vkuiInternalHorizontalScroll', (showArrows === 'always' || isHovered) && "vkuiHorizontalScroll__showArrows", isRtl && "vkuiHorizontalScroll__rtl"),
|
|
225
|
+
// FIXME: onMouseEnter из restProps затирается, а при callMultiply орет линтер на рефы.
|
|
216
226
|
onMouseEnter: calculateArrowsVisibility,
|
|
217
227
|
children: [
|
|
218
|
-
showArrows &&
|
|
228
|
+
showArrows && canScrollStart && /*#__PURE__*/ _jsx(ScrollArrow, {
|
|
219
229
|
"data-testid": prevButtonTestId,
|
|
220
230
|
size: arrowSize,
|
|
221
231
|
offsetY: arrowOffsetY,
|
|
@@ -225,7 +235,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
225
235
|
className: classNames("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowLeft"),
|
|
226
236
|
onClick: scrollToStart
|
|
227
237
|
}),
|
|
228
|
-
showArrows &&
|
|
238
|
+
showArrows && canScrollEnd && /*#__PURE__*/ _jsx(ScrollArrow, {
|
|
229
239
|
"data-testid": nextButtonTestId,
|
|
230
240
|
size: arrowSize,
|
|
231
241
|
offsetY: arrowOffsetY,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface ScrollContext {\n scrollElement: HTMLElement | null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToEndBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /**\n * Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.\n */\n initialScrollWidth: number;\n textDirection: 'ltr' | 'rtl';\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /**\n * Функция для расчета величины прокрутки при нажатии на левую стрелку.\n */\n getScrollToLeft?: ScrollPositionHandler;\n /**\n * Функция для расчета величины прокрутки при нажатии на правую стрелку.\n */\n getScrollToRight?: ScrollPositionHandler;\n /**\n * Размер стрелок.\n */\n arrowSize?: ScrollArrowProps['size'];\n /**\n * Смещает иконки кнопок навигации по вертикали.\n */\n arrowOffsetY?: number | string;\n /**\n * Показывать ли стрелки.\n */\n showArrows?: boolean | 'always';\n /**\n * Длительность анимации скролла.\n */\n scrollAnimationDuration?: number;\n /**\n * Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n */\n scrollOnAnyWheel?: boolean;\n /**\n * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.\n */\n prevButtonTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.\n */\n nextButtonTestId?: string;\n /**\n * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.\n */\n ContentWrapperComponent?: React.ElementType;\n /**\n * `ref` для обертки над контентом, прокинутым в `children`.\n */\n contentWrapperRef?: React.Ref<HTMLElement>;\n /**\n * Специфичный `className` для обертки над контентом, прокинутым в `children`.\n */\n contentWrapperClassName?: string;\n}\n\n/**\n * Timing method.\n */\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю.\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445.\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToEndBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration,\n textDirection,\n}: ScrollContext) {\n if (!scrollElement || !getScrollPosition) {\n return;\n }\n\n /**\n * Крайнее значение сдвига.\n */\n const extremeScrollLeft =\n (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n const diff = endScrollLeft - remappedStartScrollLeft;\n if (textDirection === 'rtl') {\n endScrollLeft = startScrollLeft - diff;\n }\n\n onScrollStart();\n\n /**\n * Если окончание прокрутки вышло за ноль.\n */\n if (startScrollLeft * endScrollLeft < 0) {\n endScrollLeft = 0;\n }\n\n if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n onScrollToEndBorder();\n endScrollLeft = extremeScrollLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n const scrollEnd =\n textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/**\n * @see https://vkui.io/components/horizontal-scroll\n */\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'm',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n prevButtonTestId,\n nextButtonTestId,\n // ContentWrapper\n ContentWrapperComponent = 'div',\n contentWrapperRef,\n contentWrapperClassName,\n ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n const [canScrollStart, setCanScrollStart] = React.useState(false);\n const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n });\n\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToEndBorder: () => setCanScrollEnd(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n scrollAnimationDuration,\n textDirection: direction,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n );\n\n const scrollToStart = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToEnd = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const calculateArrowsVisibility = React.useCallback(() => {\n if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n const scrollLeft = scrollElement.scrollLeft;\n\n setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n setCanScrollEnd(\n Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [showArrows, hasPointer, scrollerRef, isRtl]);\n\n React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n useIsomorphicLayoutEffect(\n function addWheelEventHandler() {\n const scrollEl = scrollerRef.current;\n if (!scrollEl) {\n return noop;\n }\n /**\n * Прокрутка с помощью любого колеса мыши.\n */\n const onWheel = (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n };\n\n const listenerOptions = { passive: false };\n\n if (scrollOnAnyWheel) {\n scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n }\n scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n return () => {\n if (scrollOnAnyWheel) {\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n }\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n };\n },\n [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles.withConstArrows,\n isRtl && styles.rtl,\n )}\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollStart && (\n <ScrollArrow\n data-testid={prevButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowLeft)}\n onClick={scrollToStart}\n />\n )}\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollEnd && (\n <ScrollArrow\n data-testid={nextButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowRight)}\n onClick={scrollToEnd}\n />\n )}\n <div\n className={classNames(styles.in, focusVisibleClassNames)}\n ref={scrollerRef}\n tabIndex={0}\n {...focusEvents}\n >\n <ContentWrapperComponent\n className={classNames(styles.inWrapper, contentWrapperClassName)}\n ref={contentWrapperRef}\n >\n {children}\n </ContentWrapperComponent>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useConfigDirection","useExternRef","useFocusVisible","useFocusVisibleClassName","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","focusVisible","focusEvents","focusVisibleClassNames","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,aAAa,QAAQ,kBAAe;AAC7C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,WAAW,QAA+B,gCAA6B;AA6EhF;;CAEC,GACD,SAASC;IACP,OAAOC,eAAeA,YAAYD,GAAG,GAAGC,YAAYD,GAAG,KAAKE,KAAKF,GAAG;AACtE;AAEA;;;;;;;;;;;CAWC,GACD,SAASG,qBAAqBC,KAAa;IACzC,OAAOA,QAAQ,IAAIC,KAAKC,IAAI,CAACF,SAASC,KAAKE,KAAK,CAACH;AACnD;AAEA;;;CAGC,GACD,MAAMI,2BAA2B,CAACC,KAAoBN,qBAAqBM,GAAGC,UAAU;AAExF;;;;CAIC,GACD,MAAMC,wBAAwB;AAE9B,SAASC,SAAS,EAChBC,aAAa,EACbC,iBAAiB,EACjBC,cAAc,EACdC,mBAAmB,EACnBC,WAAW,EACXC,aAAa,EACbC,kBAAkB,EAClBC,uBAAuB,EACvBC,aAAa,EACC;IACd,IAAI,CAACR,iBAAiB,CAACC,mBAAmB;QACxC;IACF;IAEA;;GAEC,GACD,MAAMQ,oBACJ,AAACD,CAAAA,kBAAkB,QAAQ,IAAI,CAAC,CAAA,IAAMF,CAAAA,qBAAqBN,cAAcU,WAAW,AAAD;IAErF,MAAMC,kBAAkBhB,yBAAyBK;IACjD,MAAMY,0BAA0BD,kBAAmBH,CAAAA,kBAAkB,QAAQ,CAAC,IAAI,CAAA;IAElF,IAAIK,gBAAgBZ,kBAAkBW;IAEtC,MAAME,OAAOD,gBAAgBD;IAC7B,IAAIJ,kBAAkB,OAAO;QAC3BK,gBAAgBF,kBAAkBG;IACpC;IAEAT;IAEA;;GAEC,GACD,IAAIM,kBAAkBE,gBAAgB,GAAG;QACvCA,gBAAgB;IAClB;IAEA,IAAIrB,KAAKuB,GAAG,CAACF,kBAAkBrB,KAAKuB,GAAG,CAACN,oBAAoB;QAC1DN;QACAU,gBAAgBJ;IAClB;IAEA,MAAMO,YAAY7B;IAEjB,CAAA,SAAS8B;QACR,MAAMC,OAAO/B;QACb,MAAMgC,UAAU3B,KAAK4B,GAAG,CAAC,AAACF,CAAAA,OAAOF,SAAQ,IAAKT,yBAAyB;QAEvE,MAAMhB,QAAQR,cAAcoC;QAE5B,MAAME,oBAAoBV,kBAAkB,AAACE,CAAAA,gBAAgBF,eAAc,IAAKpB;QAChFS,cAAcH,UAAU,GAAGP,qBAAqB+B;QAEhD,MAAMC,YACJd,kBAAkB,QAAQhB,KAAK+B,GAAG,CAAC,GAAGV,iBAAiBrB,KAAK4B,GAAG,CAAC,GAAGP;QACrE,IAAIlB,yBAAyBK,mBAAmBsB,aAAaH,YAAY,GAAG;YAC1EK,sBAAsBP;YACtB;QACF;QAEAb;QACAF,eAAeuB,KAAK;QACpB,IAAIvB,eAAewB,MAAM,GAAG,GAAG;YAC7BxB,cAAc,CAAC,EAAE;QACnB;IACF,CAAA;AACF;AAEA;;CAEC,GACD,OAAO,MAAMyB,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,eAAe,EACfC,gBAAgB,EAChBC,aAAa,IAAI,EACjBC,YAAY,GAAG,EACfC,YAAY,EACZ1B,0BAA0BT,qBAAqB,EAC/CoC,MAAM,EACNC,mBAAmB,KAAK,EACxBC,gBAAgB,EAChBC,gBAAgB,EAChB,iBAAiB;IACjBC,0BAA0B,KAAK,EAC/BC,iBAAiB,EACjBC,uBAAuB,EAED,WADnBC;QAfHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACA1B;QACA2B;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;;IAGA,MAAM,CAACE,gBAAgBC,kBAAkB,GAAGpE,MAAMqE,QAAQ,CAAC;IAC3D,MAAM,CAACC,cAAcC,gBAAgB,GAAGvE,MAAMqE,QAAQ,CAAC;IACvD,MAAyC/D,mBAAAA,mBAAnC,EAAEkE,YAAY,EAAkB,GAAGlE,kBAAhBmE,yCAAgBnE;QAAjCkE;;IACR,MAAME,yBAAyBnE,yBAAyB;QACtDiE;IACF;IAEA,MAAMG,YAAYvE;IAClB,MAAMwE,QAAQD,cAAc;IAE5B,MAAME,uBAAuB7E,MAAM8E,MAAM,CAAC;IAE1C,MAAMC,cAAc1E,aAAasD;IAEjC,MAAMhC,iBAAiB3B,MAAM8E,MAAM,CAAiB,EAAE;IAEtD,MAAME,aAAa7E;IAEnB,MAAM8E,WAAWjF,MAAMkF,WAAW,CAChC,CAACxD;QACC,MAAMD,gBAAgBsD,YAAYI,OAAO;QAEzCxD,eAAewD,OAAO,CAACC,IAAI,CAAC;gBAQJ3D;mBAPtBD,SAAS;gBACPC;gBACAC;gBACAC,gBAAgBA,eAAewD,OAAO;gBACtCvD,qBAAqB,IAAM2C,gBAAgB;gBAC3C1C,aAAa,IAAOgD,qBAAqBM,OAAO,GAAG;gBACnDrD,eAAe,IAAO+C,qBAAqBM,OAAO,GAAG;gBACrDpD,oBAAoBN,CAAAA,0BAAAA,qCAAAA,mCAAAA,cAAe4D,iBAAiB,cAAhC5D,uDAAAA,iCAAkC6D,WAAW,KAAI;gBACrEtD;gBACAC,eAAe0C;YACjB;;QAEF,IAAIhD,eAAewD,OAAO,CAAChC,MAAM,KAAK,GAAG;YACvCxB,eAAewD,OAAO,CAAC,EAAE;QAC3B;IACF,GACA;QAACJ;QAAa/C;QAAyB2C;QAAWJ;KAAgB;IAGpE,MAAMgB,gBAAgBvF,MAAMkF,WAAW,CAAC;QACtC,MAAMxD,oBACJ4B,4BAAAA,6BAAAA,kBAAoB,CAACkC,IAAcA,IAAIT,YAAYI,OAAO,CAAEhD,WAAW;QACzE8C,SAASvD;IACX,GAAG;QAAC4B;QAAiB2B;QAAUF;KAAY;IAE3C,MAAMU,cAAczF,MAAMkF,WAAW,CAAC;QACpC,MAAMxD,oBACJ6B,6BAAAA,8BAAAA,mBAAqB,CAACiC,IAAcA,IAAIT,YAAYI,OAAO,CAAEhD,WAAW;QAC1E8C,SAASvD;IACX,GAAG;QAAC6B;QAAkB0B;QAAUF;KAAY;IAE5C,MAAMW,4BAA4B1F,MAAMkF,WAAW,CAAC;QAClD,IAAI1B,cAAcwB,cAAcD,YAAYI,OAAO,IAAI,CAACN,qBAAqBM,OAAO,EAAE;YACpF,MAAM1D,gBAAgBsD,YAAYI,OAAO;YACzC,MAAM7D,aAAaG,cAAcH,UAAU;YAE3C8C,kBAAkBQ,QAAQtD,aAAa,IAAIA,aAAa;YACxDiD,gBACEtD,KAAKuB,GAAG,CAACpB,yBAAyBK,kBAAkBA,cAAcU,WAAW,GAC3EV,cAAc6D,WAAW;QAE/B;IACF,GAAG;QAAC9B;QAAYwB;QAAYD;QAAaH;KAAM;IAE/C5E,MAAM2F,SAAS,CAACD,2BAA2B;QAACA;QAA2BrC;KAAS;IAEhF5C,0BACE,SAASmF;QACP,MAAMC,WAAWd,YAAYI,OAAO;QACpC,IAAI,CAACU,UAAU;YACb,OAAO3F;QACT;QACA;;OAEC,GACD,MAAM4F,UAAU,CAACC;YACfhB,YAAYI,OAAO,CAAEa,QAAQ,CAAC;gBAAEC,MAAMF,EAAEG,MAAM,GAAGH,EAAEI,MAAM;gBAAEC,UAAU;YAAO;YAC5EL,EAAEM,cAAc;QAClB;QAEA,MAAMC,kBAAkB;YAAEC,SAAS;QAAM;QAEzC,IAAI3C,kBAAkB;YACpBiC,SAASW,gBAAgB,CAAC,SAASV,SAASQ;QAC9C;QACAT,SAASW,gBAAgB,CAAC,UAAUd,2BAA2BY;QAE/D,OAAO;YACL,IAAI1C,kBAAkB;gBACpB,4FAA4F;gBAC5FiC,SAASY,mBAAmB,CAAC,SAASX,SAASQ;YACjD;YACA,6FAA6F;YAC7FT,SAASY,mBAAmB,CAAC,UAAUf,2BAA2BY;QACpE;IACF,GACA;QAAC1C;QAAkB8B;QAA2BX;KAAY;IAG5D,qBACE,MAACrE,uDACKwD;QACJwC,eAAezG,yCAEb,gCACAuD,eAAe,qDACfoB;QAEF+B,cAAcjB;;YAEblC,cAAewB,CAAAA,cAAcA,eAAe4B,SAAQ,KAAMzC,gCACzD,KAACxD;gBACCkG,eAAahD;gBACbiD,MAAMrD;gBACNsD,SAASrD;gBACTiB,WAAU;gBACVqC,aAAW;gBACXC,UAAU,CAAC;gBACXC,WAAWjH;gBACXkH,SAAS5B;;YAGZ/B,cAAewB,CAAAA,cAAcA,eAAe4B,SAAQ,KAAMtC,8BACzD,KAAC3D;gBACCkG,eAAa/C;gBACbgD,MAAMrD;gBACNsD,SAASrD;gBACTiB,WAAU;gBACVqC,aAAW;gBACXC,UAAU,CAAC;gBACXC,WAAWjH;gBACXkH,SAAS1B;;0BAGb,KAAC2B;gBACCF,WAAWjH,uCAAsByE;gBACjC2C,KAAKtC;gBACLkC,UAAU;eACNxC;0BAEJ,cAAA,KAACV;oBACCmD,WAAWjH,8CAA6BgE;oBACxCoD,KAAKrD;8BAEJX;;;;;AAKX,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { easeInOutSine } from '../../lib/fx';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { useHover } from '../Clickable/useState';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface ScrollContext {\n scrollElement: HTMLElement | null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToEndBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /**\n * Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.\n */\n initialScrollWidth: number;\n textDirection: 'ltr' | 'rtl';\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /**\n * Функция для расчета величины прокрутки при нажатии на левую стрелку.\n */\n getScrollToLeft?: ScrollPositionHandler;\n /**\n * Функция для расчета величины прокрутки при нажатии на правую стрелку.\n */\n getScrollToRight?: ScrollPositionHandler;\n /**\n * Размер стрелок.\n */\n arrowSize?: ScrollArrowProps['size'];\n /**\n * Смещает иконки кнопок навигации по вертикали.\n */\n arrowOffsetY?: number | string;\n /**\n * Показывать ли стрелки.\n */\n showArrows?: boolean | 'always';\n /**\n * Длительность анимации скролла.\n */\n scrollAnimationDuration?: number;\n /**\n * Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n */\n scrollOnAnyWheel?: boolean;\n /**\n * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.\n */\n prevButtonTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.\n */\n nextButtonTestId?: string;\n /**\n * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.\n */\n ContentWrapperComponent?: React.ElementType;\n /**\n * `ref` для обертки над контентом, прокинутым в `children`.\n */\n contentWrapperRef?: React.Ref<HTMLElement>;\n /**\n * Специфичный `className` для обертки над контентом, прокинутым в `children`.\n */\n contentWrapperClassName?: string;\n}\n\n/**\n * Timing method.\n */\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю.\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445.\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToEndBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration,\n textDirection,\n}: ScrollContext) {\n if (!scrollElement || !getScrollPosition) {\n return;\n }\n\n /**\n * Крайнее значение сдвига.\n */\n const extremeScrollLeft =\n (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n const startScrollLeft = roundUpElementScrollLeft(scrollElement);\n const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);\n\n let endScrollLeft = getScrollPosition(remappedStartScrollLeft);\n\n const diff = endScrollLeft - remappedStartScrollLeft;\n if (textDirection === 'rtl') {\n endScrollLeft = startScrollLeft - diff;\n }\n\n onScrollStart();\n\n /**\n * Если окончание прокрутки вышло за ноль.\n */\n if (startScrollLeft * endScrollLeft < 0) {\n endScrollLeft = 0;\n }\n\n if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n onScrollToEndBorder();\n endScrollLeft = extremeScrollLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n const scrollEnd =\n textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/**\n * @see https://vkui.io/components/horizontal-scroll\n */\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'm',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n prevButtonTestId,\n nextButtonTestId,\n // ContentWrapper\n ContentWrapperComponent = 'div',\n contentWrapperRef,\n contentWrapperClassName,\n onPointerEnter,\n onPointerLeave,\n onMouseEnter,\n ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n const [canScrollStart, setCanScrollStart] = React.useState(false);\n const [canScrollEnd, setCanScrollEnd] = React.useState(false);\n const { focusVisible, ...focusEvents } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n });\n\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const { isHovered, ...hoverHandlers } = useHover();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToEndBorder: () => setCanScrollEnd(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n scrollAnimationDuration,\n textDirection: direction,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],\n );\n\n const scrollToStart = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToEnd = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const calculateArrowsVisibility = React.useCallback(() => {\n if (showArrows && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n const scrollLeft = scrollElement.scrollLeft;\n\n setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);\n setCanScrollEnd(\n Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [showArrows, scrollerRef, isRtl]);\n\n React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n useIsomorphicLayoutEffect(\n function addWheelEventHandler() {\n const scrollEl = scrollerRef.current;\n if (!scrollEl) {\n return noop;\n }\n /**\n * Прокрутка с помощью любого колеса мыши.\n */\n const onWheel = (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n };\n\n const listenerOptions = { passive: false };\n\n if (scrollOnAnyWheel) {\n scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n }\n scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n return () => {\n if (scrollOnAnyWheel) {\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n }\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n };\n },\n [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n );\n\n const handlers = mergeCalls(hoverHandlers, { onPointerEnter, onPointerLeave });\n\n return (\n <RootComponent\n {...restProps}\n {...handlers}\n baseClassName={classNames(\n styles.host,\n 'vkuiInternalHorizontalScroll',\n (showArrows === 'always' || isHovered) && styles.showArrows,\n isRtl && styles.rtl,\n )}\n // FIXME: onMouseEnter из restProps затирается, а при callMultiply орет линтер на рефы.\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && canScrollStart && (\n <ScrollArrow\n data-testid={prevButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowLeft)}\n onClick={scrollToStart}\n />\n )}\n {showArrows && canScrollEnd && (\n <ScrollArrow\n data-testid={nextButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowRight)}\n onClick={scrollToEnd}\n />\n )}\n <div\n className={classNames(styles.in, focusVisibleClassNames)}\n ref={scrollerRef}\n tabIndex={0}\n {...focusEvents}\n >\n <ContentWrapperComponent\n className={classNames(styles.inWrapper, contentWrapperClassName)}\n ref={contentWrapperRef}\n >\n {children}\n </ContentWrapperComponent>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","noop","useConfigDirection","useExternRef","useFocusVisible","useFocusVisibleClassName","easeInOutSine","mergeCalls","useIsomorphicLayoutEffect","useHover","RootComponent","ScrollArrow","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","remappedStartScrollLeft","endScrollLeft","diff","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","onPointerEnter","onPointerLeave","onMouseEnter","restProps","canScrollStart","setCanScrollStart","useState","canScrollEnd","setCanScrollEnd","focusVisible","focusEvents","focusVisibleClassNames","direction","isRtl","isCustomScrollingRef","useRef","scrollerRef","isHovered","hoverHandlers","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToStart","i","scrollToEnd","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","handlers","baseClassName","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { HTMLAttributesWithRootRef } from '../../types';
|
|
3
3
|
import { type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
|
|
4
|
-
export interface SubnavigationBarProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
|
|
4
|
+
export interface SubnavigationBarProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'arrowSize' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
|
|
5
5
|
/**
|
|
6
6
|
* Отключение возможности прокручивания компонента по горизонтали.
|
|
7
7
|
*/
|
|
8
8
|
fixed?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Отключает отступы. Рекомендуется использовать с `mode="outline"` у [`SubnavigationButton`](https://vkui.io/components/subnavigation-button).
|
|
11
|
+
*/
|
|
12
|
+
noPadding?: boolean;
|
|
9
13
|
}
|
|
10
14
|
/**
|
|
11
15
|
* @see https://vkui.io/components/subnavigation-bar
|
|
12
16
|
*/
|
|
13
|
-
export declare const SubnavigationBar: ({ fixed, children, showArrows, getScrollToLeft, getScrollToRight, scrollAnimationDuration, ...restProps }: SubnavigationBarProps) => React.ReactNode;
|
|
17
|
+
export declare const SubnavigationBar: ({ fixed, children, showArrows, noPadding, arrowSize, getScrollToLeft, getScrollToRight, scrollAnimationDuration, ...restProps }: SubnavigationBarProps) => React.ReactNode;
|
|
14
18
|
//# sourceMappingURL=SubnavigationBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubnavigationBar.d.ts","sourceRoot":"","sources":["../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CACF,qBAAqB,
|
|
1
|
+
{"version":3,"file":"SubnavigationBar.d.ts","sourceRoot":"","sources":["../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,qBAAqB,EAE3B,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,IAAI,CACF,qBAAqB,EACnB,YAAY,GACZ,WAAW,GACX,iBAAiB,GACjB,kBAAkB,GAClB,yBAAyB,CAC5B;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAMD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,iIAU9B,qBAAqB,KAAG,KAAK,CAAC,SAgChC,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
|
3
3
|
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
5
|
import * as React from "react";
|
|
6
|
-
import { hasReactNode } from "@vkontakte/vkjs";
|
|
6
|
+
import { classNames, hasReactNode } from "@vkontakte/vkjs";
|
|
7
7
|
import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll.js";
|
|
8
8
|
import { RootComponent } from "../RootComponent/RootComponent.js";
|
|
9
9
|
const defaultScrollToLeft = (x)=>x - 240;
|
|
@@ -11,10 +11,12 @@ const defaultScrollToRight = (x)=>x + 240;
|
|
|
11
11
|
/**
|
|
12
12
|
* @see https://vkui.io/components/subnavigation-bar
|
|
13
13
|
*/ export const SubnavigationBar = (_param)=>{
|
|
14
|
-
var { fixed = false, children, showArrows = true, getScrollToLeft = defaultScrollToLeft, getScrollToRight = defaultScrollToRight, scrollAnimationDuration } = _param, restProps = _object_without_properties(_param, [
|
|
14
|
+
var { fixed = false, children, showArrows = true, noPadding = false, arrowSize = 's', getScrollToLeft = defaultScrollToLeft, getScrollToRight = defaultScrollToRight, scrollAnimationDuration } = _param, restProps = _object_without_properties(_param, [
|
|
15
15
|
"fixed",
|
|
16
16
|
"children",
|
|
17
17
|
"showArrows",
|
|
18
|
+
"noPadding",
|
|
19
|
+
"arrowSize",
|
|
18
20
|
"getScrollToLeft",
|
|
19
21
|
"getScrollToRight",
|
|
20
22
|
"scrollAnimationDuration"
|
|
@@ -27,6 +29,7 @@ const defaultScrollToRight = (x)=>x + 240;
|
|
|
27
29
|
ScrollWrapper = HorizontalScroll;
|
|
28
30
|
scrollWrapperProps = {
|
|
29
31
|
showArrows,
|
|
32
|
+
arrowSize,
|
|
30
33
|
getScrollToLeft,
|
|
31
34
|
getScrollToRight,
|
|
32
35
|
scrollAnimationDuration
|
|
@@ -39,7 +42,7 @@ const defaultScrollToRight = (x)=>x + 240;
|
|
|
39
42
|
className: "vkuiSubnavigationBar__in"
|
|
40
43
|
}, scrollWrapperProps), {
|
|
41
44
|
children: /*#__PURE__*/ _jsx("ul", {
|
|
42
|
-
className: "vkuiSubnavigationBar__scrollIn",
|
|
45
|
+
className: classNames("vkuiSubnavigationBar__scrollIn", noPadding && "vkuiSubnavigationBar__noPadding"),
|
|
43
46
|
children: React.Children.map(children, (child, idx)=>hasReactNode(child) ? /*#__PURE__*/ _jsx("li", {
|
|
44
47
|
className: "vkuiSubnavigationBar__item",
|
|
45
48
|
children: child
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n HorizontalScroll,\n type HorizontalScrollProps,\n type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n Pick<\n HorizontalScrollProps,\n 'showArrows' | 'getScrollToLeft'
|
|
1
|
+
{"version":3,"sources":["../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n HorizontalScroll,\n type HorizontalScrollProps,\n type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n Pick<\n HorizontalScrollProps,\n | 'showArrows'\n | 'arrowSize'\n | 'getScrollToLeft'\n | 'getScrollToRight'\n | 'scrollAnimationDuration'\n > {\n /**\n * Отключение возможности прокручивания компонента по горизонтали.\n */\n fixed?: boolean;\n /**\n * Отключает отступы. Рекомендуется использовать с `mode=\"outline\"` у [`SubnavigationButton`](https://vkui.io/components/subnavigation-button).\n */\n noPadding?: boolean;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkui.io/components/subnavigation-bar\n */\nexport const SubnavigationBar = ({\n fixed = false,\n children,\n showArrows = true,\n noPadding = false,\n arrowSize = 's',\n getScrollToLeft = defaultScrollToLeft,\n getScrollToRight = defaultScrollToRight,\n scrollAnimationDuration,\n ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n let ScrollWrapper: React.ElementType;\n let scrollWrapperProps = {};\n\n if (fixed) {\n ScrollWrapper = 'div';\n } else {\n ScrollWrapper = HorizontalScroll;\n scrollWrapperProps = {\n showArrows,\n arrowSize,\n getScrollToLeft,\n getScrollToRight,\n scrollAnimationDuration,\n };\n }\n\n return (\n <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n <ul className={classNames(styles.scrollIn, noPadding && styles.noPadding)}>\n {React.Children.map(children, (child, idx) =>\n hasReactNode(child) ? (\n <li key={idx} className={styles.item}>\n {child}\n </li>\n ) : null,\n )}\n </ul>\n </ScrollWrapper>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","hasReactNode","HorizontalScroll","RootComponent","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","noPadding","arrowSize","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","className","ul","Children","map","child","idx","li"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAuB/D,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB;QAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,YAAY,KAAK,EACjBC,YAAY,GAAG,EACfC,kBAAkBT,mBAAmB,EACrCU,mBAAmBR,oBAAoB,EACvCS,uBAAuB,EAED,WADnBC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIV,OAAO;QACTS,gBAAgB;IAClB,OAAO;QACLA,gBAAgBf;QAChBgB,qBAAqB;YACnBR;YACAE;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACZ;QAAcgB,eAAeX;OAA+BQ;kBAC3D,cAAA,KAACC;YAAcG,SAAS;WAAiBF;sBACvC,cAAA,KAACG;gBAAGD,WAAWpB,6CAA4BW;0BACxCZ,MAAMuB,QAAQ,CAACC,GAAG,CAACd,UAAU,CAACe,OAAOC,MACpCxB,aAAauB,uBACX,KAACE;wBAAaN,SAAS;kCACpBI;uBADMC,OAGP;;;;AAMhB,EAAE"}
|
|
@@ -26,6 +26,10 @@ export interface TypographyProps extends React.AllHTMLAttributes<HTMLElement>, H
|
|
|
26
26
|
* Делает блок инлайновым.
|
|
27
27
|
*/
|
|
28
28
|
inline?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Выравнивание текста. Не имеет эффекта при inline={true}.
|
|
31
|
+
*/
|
|
32
|
+
align?: 'start' | 'center' | 'end';
|
|
29
33
|
}
|
|
30
|
-
export declare const Typography: ({ weight, useAccentWeight, Component, normalize, inline, ...restProps }: TypographyProps) => React.ReactNode;
|
|
34
|
+
export declare const Typography: ({ weight, useAccentWeight, Component, normalize, inline, align, ...restProps }: TypographyProps) => React.ReactNode;
|
|
31
35
|
//# sourceMappingURL=Typography.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAgB5D,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,EAAE,eAAe,UAAQ,UAM5F;AAED,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,YAAY,EACZ,UAAU,CAAC,WAAW,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAED,eAAO,MAAM,UAAU,GAAI,gFAQxB,eAAe,KAAG,KAAK,CAAC,SAY1B,CAAC"}
|