@vkontakte/vkui 4.34.0 → 4.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.browserslistrc +5 -0
- package/.cache/.eslintcache +1 -1
- package/.cache/.stylelintcache +1 -1
- package/.cache/.tsbuildinfo +291 -268
- package/.cache/ts/src/components/ActionSheetItem/ActionSheetItem.d.ts +1 -1
- package/.cache/ts/src/components/AppRoot/AppRoot.d.ts +1 -1
- package/.cache/ts/src/components/Button/Button.d.ts +1 -1
- package/.cache/ts/src/components/CardGrid/CardGrid.d.ts +1 -1
- package/.cache/ts/src/components/Checkbox/Checkbox.d.ts +1 -1
- package/.cache/ts/src/components/ChipsSelect/ChipsSelect.d.ts +1 -1
- package/.cache/ts/src/components/ConfigProvider/ConfigProviderContext.d.ts +1 -0
- package/.cache/ts/src/components/CustomSelect/CustomSelect.d.ts +1 -1
- package/.cache/ts/src/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +2 -1
- package/.cache/ts/src/components/DatePicker/DatePicker.d.ts +1 -1
- package/.cache/ts/src/components/Dropdown/Dropdown.d.ts +46 -5
- package/.cache/ts/src/components/Epic/Epic.d.ts +1 -1
- package/.cache/ts/src/components/FocusTrap/FocusTrap.d.ts +1 -1
- package/.cache/ts/src/components/Group/Group.d.ts +1 -1
- package/.cache/ts/src/components/HorizontalScroll/HorizontalScroll.d.ts +1 -1
- package/.cache/ts/src/components/IconButton/IconButton.d.ts +1 -1
- package/.cache/ts/src/components/Input/Input.d.ts +1 -1
- package/.cache/ts/src/components/ModalCard/ModalCard.d.ts +1 -1
- package/.cache/ts/src/components/ModalCardBase/ModalCardBase.d.ts +1 -1
- package/.cache/ts/src/components/ModalPage/ModalPage.d.ts +1 -1
- package/.cache/ts/src/components/ModalRoot/ModalRoot.d.ts +1 -1
- package/.cache/ts/src/components/ModalRoot/ModalRootAdaptive.d.ts +1 -1
- package/.cache/ts/src/components/ModalRoot/ModalRootDesktop.d.ts +1 -1
- package/.cache/ts/src/components/NativeSelect/NativeSelect.d.ts +1 -1
- package/.cache/ts/src/components/Panel/Panel.d.ts +1 -1
- package/.cache/ts/src/components/PanelHeader/PanelHeader.d.ts +1 -1
- package/.cache/ts/src/components/PanelHeaderBack/PanelHeaderBack.d.ts +1 -1
- package/.cache/ts/src/components/PopoutRoot/PopoutRoot.d.ts +1 -1
- package/.cache/ts/src/components/Popper/Popper.d.ts +18 -1
- package/.cache/ts/src/components/PopperArrow/PopperArrow.d.ts +8 -0
- package/.cache/ts/src/components/Radio/Radio.d.ts +1 -1
- package/.cache/ts/src/components/RangeSlider/UniversalSlider.d.ts +1 -1
- package/.cache/ts/src/components/RichCell/RichCell.d.ts +1 -1
- package/.cache/ts/src/components/RichTooltip/RichTooltip.d.ts +7 -2
- package/.cache/ts/src/components/Search/Search.d.ts +1 -1
- package/.cache/ts/src/components/Select/Select.d.ts +1 -1
- package/.cache/ts/src/components/SelectMimicry/SelectMimicry.d.ts +1 -1
- package/.cache/ts/src/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/.cache/ts/src/components/Snackbar/Snackbar.d.ts +5 -1
- package/.cache/ts/src/components/SplitCol/SplitCol.d.ts +1 -0
- package/.cache/ts/src/components/Tabbar/Tabbar.d.ts +8 -1
- package/.cache/ts/src/components/Tabs/Tabs.d.ts +14 -3
- package/.cache/ts/src/components/TabsItem/TabsItem.d.ts +22 -1
- package/.cache/ts/src/components/Tappable/Tappable.d.ts +1 -1
- package/.cache/ts/src/components/TextTooltip/TextTooltip.d.ts +5 -1
- package/.cache/ts/src/components/Textarea/Textarea.d.ts +4 -1
- package/.cache/ts/src/components/Tooltip/Tooltip.d.ts +18 -1
- package/.cache/ts/src/components/Typography/Headline/Headline.d.ts +3 -3
- package/.cache/ts/src/components/View/View.d.ts +2 -18
- package/.cache/ts/src/components/View/ViewInfinite.d.ts +1 -1
- package/.cache/ts/src/components/WriteBar/WriteBar.d.ts +5 -1
- package/.cache/ts/src/hoc/withAdaptivity.d.ts +1 -1
- package/.cache/ts/src/hoc/withContext.d.ts +1 -1
- package/.cache/ts/src/hoc/withPlatform.d.ts +1 -1
- package/.cache/ts/src/tokenized/index.d.ts +26 -0
- package/.eslintrc.json +14 -4
- package/dist/cjs/components/AppRoot/AppRoot.js +13 -15
- package/dist/cjs/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/cjs/components/Button/Button.js +6 -4
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/CardScroll/CardScroll.js +3 -1
- package/dist/cjs/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js +5 -0
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js +7 -1
- package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js +477 -553
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js +73 -35
- package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/cjs/components/Dropdown/Dropdown.js +147 -26
- package/dist/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/components/Epic/Epic.js +1 -6
- package/dist/cjs/components/Epic/Epic.js.map +1 -1
- package/dist/cjs/components/FocusTrap/FocusTrap.js +9 -10
- package/dist/cjs/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/cjs/components/FormField/FormField.js +4 -10
- package/dist/cjs/components/FormField/FormField.js.map +1 -1
- package/dist/cjs/components/HorizontalCell/HorizontalCell.js +4 -7
- package/dist/cjs/components/HorizontalCell/HorizontalCell.js.map +1 -1
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js +1 -0
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cjs/components/Input/Input.js +3 -6
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js +2 -2
- package/dist/cjs/components/MiniInfoCell/MiniInfoCell.js.map +1 -1
- package/dist/cjs/components/ModalCardBase/ModalCardBase.js +1 -0
- package/dist/cjs/components/ModalCardBase/ModalCardBase.js.map +1 -1
- package/dist/cjs/components/NativeSelect/NativeSelect.js +1 -0
- package/dist/cjs/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/cjs/components/Panel/Panel.js +1 -0
- package/dist/cjs/components/Panel/Panel.js.map +1 -1
- package/dist/cjs/components/PanelHeader/PanelHeader.js +1 -0
- package/dist/cjs/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/cjs/components/Popper/Popper.js +16 -22
- package/dist/cjs/components/Popper/Popper.js.map +1 -1
- package/dist/cjs/components/PopperArrow/PopperArrow.js +40 -0
- package/dist/cjs/components/PopperArrow/PopperArrow.js.map +1 -0
- package/dist/cjs/components/Radio/Radio.js +1 -0
- package/dist/cjs/components/Radio/Radio.js.map +1 -1
- package/dist/cjs/components/RangeSlider/UniversalSlider.js +1 -0
- package/dist/cjs/components/RangeSlider/UniversalSlider.js.map +1 -1
- package/dist/cjs/components/RichTooltip/RichTooltip.js +6 -15
- package/dist/cjs/components/RichTooltip/RichTooltip.js.map +1 -1
- package/dist/cjs/components/Select/Select.js +1 -0
- package/dist/cjs/components/Select/Select.js.map +1 -1
- package/dist/cjs/components/SelectMimicry/SelectMimicry.js +4 -1
- package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/cjs/components/SimpleCell/SimpleCell.js +21 -31
- package/dist/cjs/components/SimpleCell/SimpleCell.js.map +1 -1
- package/dist/cjs/components/Snackbar/Snackbar.js +7 -11
- package/dist/cjs/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/cjs/components/SplitCol/SplitCol.js +7 -1
- package/dist/cjs/components/SplitCol/SplitCol.js.map +1 -1
- package/dist/cjs/components/SplitLayout/SplitLayout.js +5 -8
- package/dist/cjs/components/SplitLayout/SplitLayout.js.map +1 -1
- package/dist/cjs/components/Tabbar/Tabbar.js +15 -14
- package/dist/cjs/components/Tabbar/Tabbar.js.map +1 -1
- package/dist/cjs/components/TabbarItem/TabbarItem.js +8 -10
- package/dist/cjs/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.js +23 -5
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/TabsItem/TabsItem.js +39 -22
- package/dist/cjs/components/TabsItem/TabsItem.js.map +1 -1
- package/dist/cjs/components/TextTooltip/TextTooltip.js +6 -9
- package/dist/cjs/components/TextTooltip/TextTooltip.js.map +1 -1
- package/dist/cjs/components/Textarea/Textarea.js +5 -4
- package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +94 -71
- package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/components/Typography/Headline/Headline.js +11 -2
- package/dist/cjs/components/Typography/Headline/Headline.js.map +1 -1
- package/dist/cjs/components/View/View.js +388 -453
- package/dist/cjs/components/View/View.js.map +1 -1
- package/dist/cjs/components/WriteBar/WriteBar.js +12 -5
- package/dist/cjs/components/WriteBar/WriteBar.js.map +1 -1
- package/dist/cjs/components/WriteBarIcon/WriteBarIcon.js +3 -8
- package/dist/cjs/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
- package/dist/cjs/hoc/withAdaptivity.js.map +1 -1
- package/dist/cjs/hoc/withContext.js.map +1 -1
- package/dist/cjs/hoc/withPlatform.js.map +1 -1
- package/dist/cjs/hooks/useOrientationChange.js +2 -1
- package/dist/cjs/hooks/useOrientationChange.js.map +1 -1
- package/dist/cjs/tokenized/index.js +104 -0
- package/dist/cjs/tokenized/index.js.map +1 -1
- package/dist/components/ActionSheetItem/ActionSheetItem.d.ts +1 -1
- package/dist/components/AppRoot/AppRoot.d.ts +1 -1
- package/dist/components/AppRoot/AppRoot.js +13 -15
- package/dist/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.js +6 -4
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/CardGrid/CardGrid.d.ts +1 -1
- package/dist/components/CardScroll/CardScroll.js +3 -1
- package/dist/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.d.ts +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.js +5 -0
- package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/components/ConfigProvider/ConfigProviderContext.d.ts +1 -0
- package/dist/components/ConfigProvider/ConfigProviderContext.js +3 -0
- package/dist/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +473 -579
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +2 -1
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js +71 -35
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts +1 -1
- package/dist/components/Dropdown/Dropdown.d.ts +46 -5
- package/dist/components/Dropdown/Dropdown.js +137 -27
- package/dist/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/components/Epic/Epic.d.ts +1 -1
- package/dist/components/Epic/Epic.js +1 -4
- package/dist/components/Epic/Epic.js.map +1 -1
- package/dist/components/FocusTrap/FocusTrap.d.ts +1 -1
- package/dist/components/FocusTrap/FocusTrap.js +9 -9
- package/dist/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/components/FormField/FormField.js +4 -8
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/Group/Group.d.ts +1 -1
- package/dist/components/HorizontalCell/HorizontalCell.js +3 -5
- package/dist/components/HorizontalCell/HorizontalCell.js.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.js +1 -0
- package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/components/IconButton/IconButton.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +3 -4
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/MiniInfoCell/MiniInfoCell.js +2 -2
- package/dist/components/MiniInfoCell/MiniInfoCell.js.map +1 -1
- package/dist/components/ModalCard/ModalCard.d.ts +1 -1
- package/dist/components/ModalCardBase/ModalCardBase.d.ts +1 -1
- package/dist/components/ModalCardBase/ModalCardBase.js +1 -0
- package/dist/components/ModalCardBase/ModalCardBase.js.map +1 -1
- package/dist/components/ModalPage/ModalPage.d.ts +1 -1
- package/dist/components/ModalRoot/ModalRoot.d.ts +1 -1
- package/dist/components/ModalRoot/ModalRootAdaptive.d.ts +1 -1
- package/dist/components/ModalRoot/ModalRootDesktop.d.ts +1 -1
- package/dist/components/NativeSelect/NativeSelect.d.ts +1 -1
- package/dist/components/NativeSelect/NativeSelect.js +1 -0
- package/dist/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/components/Panel/Panel.d.ts +1 -1
- package/dist/components/Panel/Panel.js +1 -0
- package/dist/components/Panel/Panel.js.map +1 -1
- package/dist/components/PanelHeader/PanelHeader.d.ts +1 -1
- package/dist/components/PanelHeader/PanelHeader.js +1 -0
- package/dist/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/components/PanelHeaderBack/PanelHeaderBack.d.ts +1 -1
- package/dist/components/PopoutRoot/PopoutRoot.d.ts +1 -1
- package/dist/components/Popper/Popper.d.ts +18 -1
- package/dist/components/Popper/Popper.js +15 -22
- package/dist/components/Popper/Popper.js.map +1 -1
- package/dist/components/PopperArrow/PopperArrow.d.ts +8 -0
- package/dist/components/PopperArrow/PopperArrow.js +27 -0
- package/dist/components/PopperArrow/PopperArrow.js.map +1 -0
- package/dist/components/Radio/Radio.d.ts +1 -1
- package/dist/components/Radio/Radio.js +1 -0
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/RangeSlider/UniversalSlider.d.ts +1 -1
- package/dist/components/RangeSlider/UniversalSlider.js +1 -0
- package/dist/components/RangeSlider/UniversalSlider.js.map +1 -1
- package/dist/components/RichCell/RichCell.d.ts +1 -1
- package/dist/components/RichTooltip/RichTooltip.d.ts +7 -2
- package/dist/components/RichTooltip/RichTooltip.js +5 -10
- package/dist/components/RichTooltip/RichTooltip.js.map +1 -1
- package/dist/components/Search/Search.d.ts +1 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Select/Select.js +1 -0
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/SelectMimicry/SelectMimicry.d.ts +1 -1
- package/dist/components/SelectMimicry/SelectMimicry.js +4 -1
- package/dist/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/dist/components/SimpleCell/SimpleCell.js +19 -28
- package/dist/components/SimpleCell/SimpleCell.js.map +1 -1
- package/dist/components/Snackbar/Snackbar.d.ts +5 -1
- package/dist/components/Snackbar/Snackbar.js +8 -11
- package/dist/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/components/SplitCol/SplitCol.d.ts +1 -0
- package/dist/components/SplitCol/SplitCol.js +3 -0
- package/dist/components/SplitCol/SplitCol.js.map +1 -1
- package/dist/components/SplitLayout/SplitLayout.js +4 -7
- package/dist/components/SplitLayout/SplitLayout.js.map +1 -1
- package/dist/components/Tabbar/Tabbar.d.ts +8 -1
- package/dist/components/Tabbar/Tabbar.js +15 -14
- package/dist/components/Tabbar/Tabbar.js.map +1 -1
- package/dist/components/TabbarItem/TabbarItem.js +7 -9
- package/dist/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts +14 -3
- package/dist/components/Tabs/Tabs.js +23 -5
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/TabsItem/TabsItem.d.ts +22 -1
- package/dist/components/TabsItem/TabsItem.js +40 -21
- package/dist/components/TabsItem/TabsItem.js.map +1 -1
- package/dist/components/Tappable/Tappable.d.ts +1 -1
- package/dist/components/TextTooltip/TextTooltip.d.ts +5 -1
- package/dist/components/TextTooltip/TextTooltip.js +5 -7
- package/dist/components/TextTooltip/TextTooltip.js.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts +4 -1
- package/dist/components/Textarea/Textarea.js +5 -4
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +18 -1
- package/dist/components/Tooltip/Tooltip.js +89 -68
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Typography/Headline/Headline.d.ts +3 -3
- package/dist/components/Typography/Headline/Headline.js +10 -2
- package/dist/components/Typography/Headline/Headline.js.map +1 -1
- package/dist/components/View/View.d.ts +2 -18
- package/dist/components/View/View.js +384 -462
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/View/ViewInfinite.d.ts +1 -1
- package/dist/components/WriteBar/WriteBar.d.ts +5 -1
- package/dist/components/WriteBar/WriteBar.js +10 -5
- package/dist/components/WriteBar/WriteBar.js.map +1 -1
- package/dist/components/WriteBarIcon/WriteBarIcon.js +3 -6
- package/dist/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
- package/dist/components.css +143 -127
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/ActionSheet/ActionSheet.css +1 -1
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.css +1 -1
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.d.ts +1 -1
- package/dist/cssm/components/Alert/Alert.css +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.css +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.d.ts +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.js +13 -15
- package/dist/cssm/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/cssm/components/Avatar/Avatar.css +3 -5
- package/dist/cssm/components/Badge/Badge.css +3 -3
- package/dist/cssm/components/Banner/Banner.css +5 -5
- package/dist/cssm/components/BaseGallery/BaseGallery.css +1 -1
- package/dist/cssm/components/Button/Button.css +53 -35
- package/dist/cssm/components/Button/Button.d.ts +1 -1
- package/dist/cssm/components/Button/Button.js +6 -4
- package/dist/cssm/components/Button/Button.js.map +1 -1
- package/dist/cssm/components/Calendar/Calendar.css +1 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.css +1 -1
- package/dist/cssm/components/CalendarDays/CalendarDays.css +1 -1
- package/dist/cssm/components/CalendarHeader/CalendarHeader.css +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.css +1 -1
- package/dist/cssm/components/CalendarTime/CalendarTime.css +1 -1
- package/dist/cssm/components/Card/Card.css +5 -6
- package/dist/cssm/components/CardGrid/CardGrid.css +1 -1
- package/dist/cssm/components/CardGrid/CardGrid.d.ts +1 -1
- package/dist/cssm/components/CardScroll/CardScroll.css +1 -1
- package/dist/cssm/components/CardScroll/CardScroll.js +3 -1
- package/dist/cssm/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/cssm/components/Cell/Cell.css +3 -3
- package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.css +1 -1
- package/dist/cssm/components/Cell/CellDragger/CellDragger.css +1 -1
- package/dist/cssm/components/CellButton/CellButton.css +1 -1
- package/dist/cssm/components/Checkbox/Checkbox.css +1 -1
- package/dist/cssm/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/cssm/components/Chip/Chip.css +1 -1
- package/dist/cssm/components/ChipsInput/ChipsInput.css +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.css +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.d.ts +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js +5 -0
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cssm/components/ConfigProvider/ConfigProviderContext.d.ts +1 -0
- package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js +3 -0
- package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
- package/dist/cssm/components/ContentCard/ContentCard.css +1 -1
- package/dist/cssm/components/Counter/Counter.css +31 -31
- package/dist/cssm/components/CustomScrollView/CustomScrollView.css +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.css +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +473 -579
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.css +3 -3
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +2 -1
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js +71 -35
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.css +3 -3
- package/dist/cssm/components/DateInput/DateInput.css +1 -1
- package/dist/cssm/components/DatePicker/DatePicker.css +1 -1
- package/dist/cssm/components/DatePicker/DatePicker.d.ts +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.css +1 -1
- package/dist/cssm/components/Dropdown/Dropdown.css +1 -1
- package/dist/cssm/components/Dropdown/Dropdown.d.ts +46 -5
- package/dist/cssm/components/Dropdown/Dropdown.js +137 -27
- package/dist/cssm/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/cssm/components/Epic/Epic.css +1 -1
- package/dist/cssm/components/Epic/Epic.d.ts +1 -1
- package/dist/cssm/components/Epic/Epic.js +1 -4
- package/dist/cssm/components/Epic/Epic.js.map +1 -1
- package/dist/cssm/components/FixedLayout/FixedLayout.css +1 -1
- package/dist/cssm/components/FocusTrap/FocusTrap.d.ts +1 -1
- package/dist/cssm/components/FocusTrap/FocusTrap.js +9 -9
- package/dist/cssm/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/cssm/components/FocusVisible/FocusVisible.css +1 -1
- package/dist/cssm/components/Footer/Footer.css +1 -1
- package/dist/cssm/components/FormField/FormField.css +9 -9
- package/dist/cssm/components/FormField/FormField.js +4 -8
- package/dist/cssm/components/FormField/FormField.js.map +1 -1
- package/dist/cssm/components/FormItem/FormItem.css +1 -1
- package/dist/cssm/components/FormLayout/FormLayout.css +1 -1
- package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.css +1 -1
- package/dist/cssm/components/FormStatus/FormStatus.css +1 -1
- package/dist/cssm/components/Gradient/Gradient.css +1 -1
- package/dist/cssm/components/GridAvatar/GridAvatar.css +1 -1
- package/dist/cssm/components/Group/Group.css +1 -1
- package/dist/cssm/components/Group/Group.d.ts +1 -1
- package/dist/cssm/components/Header/Header.css +1 -1
- package/dist/cssm/components/HorizontalCell/HorizontalCell.css +1 -1
- package/dist/cssm/components/HorizontalCell/HorizontalCell.js +3 -5
- package/dist/cssm/components/HorizontalCell/HorizontalCell.js.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.css +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +1 -0
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.css +3 -3
- package/dist/cssm/components/IconButton/IconButton.css +1 -1
- package/dist/cssm/components/IconButton/IconButton.d.ts +1 -1
- package/dist/cssm/components/InfoRow/InfoRow.css +1 -1
- package/dist/cssm/components/InitialsAvatar/InitialsAvatar.css +1 -1
- package/dist/cssm/components/Input/Input.css +1 -1
- package/dist/cssm/components/Input/Input.d.ts +1 -1
- package/dist/cssm/components/Input/Input.js +3 -4
- package/dist/cssm/components/Input/Input.js.map +1 -1
- package/dist/cssm/components/InputLike/InputLike.css +1 -1
- package/dist/cssm/components/InputLike/InputLikeDivider.css +1 -1
- package/dist/cssm/components/Link/Link.css +1 -1
- package/dist/cssm/components/MiniInfoCell/MiniInfoCell.css +1 -1
- package/dist/cssm/components/MiniInfoCell/MiniInfoCell.js +2 -2
- package/dist/cssm/components/MiniInfoCell/MiniInfoCell.js.map +1 -1
- package/dist/cssm/components/ModalCard/ModalCard.css +1 -1
- package/dist/cssm/components/ModalCard/ModalCard.d.ts +1 -1
- package/dist/cssm/components/ModalCardBase/ModalCardBase.css +3 -3
- package/dist/cssm/components/ModalCardBase/ModalCardBase.d.ts +1 -1
- package/dist/cssm/components/ModalCardBase/ModalCardBase.js +1 -0
- package/dist/cssm/components/ModalCardBase/ModalCardBase.js.map +1 -1
- package/dist/cssm/components/ModalDismissButton/ModalDismissButton.css +1 -1
- package/dist/cssm/components/ModalPage/ModalPage.css +1 -1
- package/dist/cssm/components/ModalPage/ModalPage.d.ts +1 -1
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.css +1 -1
- package/dist/cssm/components/ModalRoot/ModalRoot.css +1 -1
- package/dist/cssm/components/ModalRoot/ModalRoot.d.ts +1 -1
- package/dist/cssm/components/ModalRoot/ModalRootAdaptive.d.ts +1 -1
- package/dist/cssm/components/ModalRoot/ModalRootDesktop.d.ts +1 -1
- package/dist/cssm/components/NativeSelect/NativeSelect.d.ts +1 -1
- package/dist/cssm/components/NativeSelect/NativeSelect.js +1 -0
- package/dist/cssm/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/cssm/components/Pagination/Pagination.css +1 -1
- package/dist/cssm/components/Panel/Panel.css +1 -1
- package/dist/cssm/components/Panel/Panel.d.ts +1 -1
- package/dist/cssm/components/Panel/Panel.js +1 -0
- package/dist/cssm/components/Panel/Panel.js.map +1 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.css +1 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.d.ts +1 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.js +1 -0
- package/dist/cssm/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.d.ts +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.css +1 -1
- package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.css +1 -1
- package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.css +1 -1
- package/dist/cssm/components/Placeholder/Placeholder.css +3 -3
- package/dist/cssm/components/PopoutRoot/PopoutRoot.css +1 -1
- package/dist/cssm/components/PopoutRoot/PopoutRoot.d.ts +1 -1
- package/dist/cssm/components/PopoutWrapper/PopoutWrapper.css +1 -1
- package/dist/cssm/components/Popper/Popper.css +1 -1
- package/dist/cssm/components/Popper/Popper.d.ts +18 -1
- package/dist/cssm/components/Popper/Popper.js +15 -22
- package/dist/cssm/components/Popper/Popper.js.map +1 -1
- package/dist/cssm/components/PopperArrow/PopperArrow.css +1 -0
- package/dist/cssm/components/PopperArrow/PopperArrow.d.ts +8 -0
- package/dist/cssm/components/PopperArrow/PopperArrow.js +28 -0
- package/dist/cssm/components/PopperArrow/PopperArrow.js.map +1 -0
- package/dist/cssm/components/Progress/Progress.css +1 -1
- package/dist/cssm/components/PromoBanner/PromoBanner.css +1 -1
- package/dist/cssm/components/PullToRefresh/PullToRefresh.css +3 -3
- package/dist/cssm/components/Radio/Radio.css +1 -1
- package/dist/cssm/components/Radio/Radio.d.ts +1 -1
- package/dist/cssm/components/Radio/Radio.js +1 -0
- package/dist/cssm/components/Radio/Radio.js.map +1 -1
- package/dist/cssm/components/RadioGroup/RadioGroup.css +1 -1
- package/dist/cssm/components/RangeSlider/UniversalSlider.d.ts +1 -1
- package/dist/cssm/components/RangeSlider/UniversalSlider.js +1 -0
- package/dist/cssm/components/RangeSlider/UniversalSlider.js.map +1 -1
- package/dist/cssm/components/Removable/Removable.css +1 -1
- package/dist/cssm/components/RichCell/RichCell.css +3 -3
- package/dist/cssm/components/RichCell/RichCell.d.ts +1 -1
- package/dist/cssm/components/RichTooltip/RichTooltip.css +3 -1
- package/dist/cssm/components/RichTooltip/RichTooltip.d.ts +7 -2
- package/dist/cssm/components/RichTooltip/RichTooltip.js +5 -10
- package/dist/cssm/components/RichTooltip/RichTooltip.js.map +1 -1
- package/dist/cssm/components/Root/Root.css +1 -1
- package/dist/cssm/components/ScreenSpinner/ScreenSpinner.css +1 -1
- package/dist/cssm/components/Search/Search.css +1 -1
- package/dist/cssm/components/Search/Search.d.ts +1 -1
- package/dist/cssm/components/SegmentedControl/SegmentedControl.css +1 -1
- package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css +1 -1
- package/dist/cssm/components/Select/Select.css +1 -1
- package/dist/cssm/components/Select/Select.d.ts +1 -1
- package/dist/cssm/components/Select/Select.js +1 -0
- package/dist/cssm/components/Select/Select.js.map +1 -1
- package/dist/cssm/components/SelectMimicry/SelectMimicry.d.ts +1 -1
- package/dist/cssm/components/SelectMimicry/SelectMimicry.js +4 -1
- package/dist/cssm/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/cssm/components/Separator/Separator.css +1 -1
- package/dist/cssm/components/SimpleCell/SimpleCell.css +1 -1
- package/dist/cssm/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/dist/cssm/components/SimpleCell/SimpleCell.js +19 -28
- package/dist/cssm/components/SimpleCell/SimpleCell.js.map +1 -1
- package/dist/cssm/components/SimpleCheckbox/SimpleCheckbox.css +1 -1
- package/dist/cssm/components/Slider/Slider.css +3 -3
- package/dist/cssm/components/SliderSwitch/SliderSwitch.css +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.css +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.d.ts +5 -1
- package/dist/cssm/components/Snackbar/Snackbar.js +8 -11
- package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/cssm/components/Spacing/Spacing.css +1 -1
- package/dist/cssm/components/Spinner/Spinner.css +1 -1
- package/dist/cssm/components/SplitCol/SplitCol.css +1 -1
- package/dist/cssm/components/SplitCol/SplitCol.d.ts +1 -0
- package/dist/cssm/components/SplitCol/SplitCol.js +3 -0
- package/dist/cssm/components/SplitCol/SplitCol.js.map +1 -1
- package/dist/cssm/components/SplitLayout/SplitLayout.css +1 -1
- package/dist/cssm/components/SplitLayout/SplitLayout.js +4 -7
- package/dist/cssm/components/SplitLayout/SplitLayout.js.map +1 -1
- package/dist/cssm/components/SubnavigationBar/SubnavigationBar.css +1 -1
- package/dist/cssm/components/SubnavigationButton/SubnavigationButton.css +1 -1
- package/dist/cssm/components/Switch/Switch.css +3 -3
- package/dist/cssm/components/Tabbar/Tabbar.css +5 -3
- package/dist/cssm/components/Tabbar/Tabbar.d.ts +8 -1
- package/dist/cssm/components/Tabbar/Tabbar.js +15 -14
- package/dist/cssm/components/Tabbar/Tabbar.js.map +1 -1
- package/dist/cssm/components/TabbarItem/TabbarItem.css +1 -1
- package/dist/cssm/components/TabbarItem/TabbarItem.js +7 -9
- package/dist/cssm/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/cssm/components/Tabs/Tabs.css +1 -1
- package/dist/cssm/components/Tabs/Tabs.d.ts +14 -3
- package/dist/cssm/components/Tabs/Tabs.js +23 -5
- package/dist/cssm/components/Tabs/Tabs.js.map +1 -1
- package/dist/cssm/components/TabsItem/TabsItem.css +5 -1
- package/dist/cssm/components/TabsItem/TabsItem.d.ts +22 -1
- package/dist/cssm/components/TabsItem/TabsItem.js +40 -21
- package/dist/cssm/components/TabsItem/TabsItem.js.map +1 -1
- package/dist/cssm/components/Tappable/Tappable.css +5 -5
- package/dist/cssm/components/Tappable/Tappable.d.ts +1 -1
- package/dist/cssm/components/TextTooltip/TextTooltip.css +1 -1
- package/dist/cssm/components/TextTooltip/TextTooltip.d.ts +5 -1
- package/dist/cssm/components/TextTooltip/TextTooltip.js +5 -7
- package/dist/cssm/components/TextTooltip/TextTooltip.js.map +1 -1
- package/dist/cssm/components/Textarea/Textarea.css +1 -1
- package/dist/cssm/components/Textarea/Textarea.d.ts +4 -1
- package/dist/cssm/components/Textarea/Textarea.js +5 -4
- package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
- package/dist/cssm/components/Tooltip/Tooltip.css +1 -1
- package/dist/cssm/components/Tooltip/Tooltip.d.ts +18 -1
- package/dist/cssm/components/Tooltip/Tooltip.js +89 -68
- package/dist/cssm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cssm/components/Typography/Caption/Caption.css +1 -1
- package/dist/cssm/components/Typography/Footnote/Footnote.css +1 -1
- package/dist/cssm/components/Typography/Headline/Headline.css +1 -1
- package/dist/cssm/components/Typography/Headline/Headline.d.ts +3 -3
- package/dist/cssm/components/Typography/Headline/Headline.js +10 -2
- package/dist/cssm/components/Typography/Headline/Headline.js.map +1 -1
- package/dist/cssm/components/Typography/Paragraph/Paragraph.css +1 -1
- package/dist/cssm/components/Typography/Subhead/Subhead.css +1 -1
- package/dist/cssm/components/Typography/Text/Text.css +1 -1
- package/dist/cssm/components/Typography/Title/Title.css +1 -1
- package/dist/cssm/components/UsersStack/UsersStack.css +5 -5
- package/dist/cssm/components/View/View.css +1 -1
- package/dist/cssm/components/View/View.d.ts +2 -18
- package/dist/cssm/components/View/View.js +384 -462
- package/dist/cssm/components/View/View.js.map +1 -1
- package/dist/cssm/components/View/ViewIOS.css +1 -1
- package/dist/cssm/components/View/ViewInfinite.d.ts +1 -1
- package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.css +1 -1
- package/dist/cssm/components/WriteBar/WriteBar.css +3 -1
- package/dist/cssm/components/WriteBar/WriteBar.d.ts +5 -1
- package/dist/cssm/components/WriteBar/WriteBar.js +10 -5
- package/dist/cssm/components/WriteBar/WriteBar.js.map +1 -1
- package/dist/cssm/components/WriteBarIcon/WriteBarIcon.css +1 -1
- package/dist/cssm/components/WriteBarIcon/WriteBarIcon.js +3 -6
- package/dist/cssm/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
- package/dist/cssm/fonts/fonts.css +1 -1
- package/dist/cssm/hoc/withAdaptivity.d.ts +1 -1
- package/dist/cssm/hoc/withAdaptivity.js.map +1 -1
- package/dist/cssm/hoc/withContext.d.ts +1 -1
- package/dist/cssm/hoc/withContext.js.map +1 -1
- package/dist/cssm/hoc/withPlatform.d.ts +1 -1
- package/dist/cssm/hoc/withPlatform.js.map +1 -1
- package/dist/cssm/hooks/useOrientationChange.js +2 -1
- package/dist/cssm/hooks/useOrientationChange.js.map +1 -1
- package/dist/cssm/lib/calendar.d.ts +2 -2
- package/dist/cssm/styles/animations.css +1 -1
- package/dist/cssm/styles/bright_light.css +1 -1
- package/dist/cssm/styles/common.css +1 -1
- package/dist/cssm/styles/components.css +143 -127
- package/dist/cssm/styles/constants.css +3 -10
- package/dist/cssm/styles/space_gray.css +1 -1
- package/dist/cssm/styles/themes.css +1 -16
- package/dist/cssm/styles/unstable.css +3 -1
- package/dist/cssm/styles/vkcom_dark.css +1 -6
- package/dist/cssm/styles/vkcom_light.css +1 -11
- package/dist/cssm/tokenized/index.d.ts +26 -0
- package/dist/cssm/tokenized/index.js +13 -0
- package/dist/cssm/tokenized/index.js.map +1 -1
- package/dist/default_scheme.css +1 -1
- package/dist/default_scheme.css.map +1 -1
- package/dist/fonts.css +1 -1
- package/dist/fonts.css.map +1 -1
- package/dist/hoc/withAdaptivity.d.ts +1 -1
- package/dist/hoc/withAdaptivity.js.map +1 -1
- package/dist/hoc/withContext.d.ts +1 -1
- package/dist/hoc/withContext.js.map +1 -1
- package/dist/hoc/withPlatform.d.ts +1 -1
- package/dist/hoc/withPlatform.js.map +1 -1
- package/dist/hooks/useOrientationChange.js +2 -1
- package/dist/hooks/useOrientationChange.js.map +1 -1
- package/dist/lib/calendar.d.ts +2 -2
- package/dist/tokenized/index.d.ts +26 -0
- package/dist/tokenized/index.js +13 -0
- package/dist/tokenized/index.js.map +1 -1
- package/dist/unstable.css +3 -1
- package/dist/unstable.css.map +1 -1
- package/dist/vkui.css +144 -143
- package/dist/vkui.css.map +1 -1
- package/package.json +6 -5
- package/src/components/AppRoot/AppRoot.tsx +15 -11
- package/src/components/Badge/Badge.css +0 -5
- package/src/components/Button/Button.css +0 -4
- package/src/components/Button/Button.tsx +4 -2
- package/src/components/Button/Readme.md +30 -59
- package/src/components/CardScroll/CardScroll.tsx +1 -1
- package/src/components/Cell/Cell.css +3 -2
- package/src/components/ChipsInput/ChipsInput.css +2 -0
- package/src/components/ChipsSelect/ChipsSelect.tsx +8 -0
- package/src/components/ConfigProvider/ConfigProviderContext.tsx +2 -0
- package/src/components/Counter/Counter.css +30 -0
- package/src/components/CustomScrollView/CustomScrollView.css +10 -5
- package/src/components/CustomSelect/CustomSelect.tsx +543 -573
- package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx +45 -22
- package/src/components/Dropdown/Dropdown.css +12 -0
- package/src/components/Dropdown/Dropdown.tsx +174 -20
- package/src/components/Dropdown/Readme.md +1 -0
- package/src/components/Epic/Epic.tsx +1 -4
- package/src/components/FixedLayout/Readme.md +103 -109
- package/src/components/FocusTrap/FocusTrap.tsx +10 -10
- package/src/components/FormField/FormField.css +31 -22
- package/src/components/FormField/FormField.tsx +4 -8
- package/src/components/FormField/Readme.md +9 -82
- package/src/components/Group/Group.css +1 -1
- package/src/components/Group/Readme.md +1 -1
- package/src/components/HorizontalCell/HorizontalCell.css +25 -43
- package/src/components/HorizontalCell/HorizontalCell.tsx +3 -9
- package/src/components/HorizontalScroll/HorizontalScroll.css +23 -0
- package/src/components/HorizontalScroll/HorizontalScroll.tsx +2 -0
- package/src/components/IconButton/IconButton.css +46 -25
- package/src/components/Input/Input.css +20 -9
- package/src/components/Input/Input.tsx +6 -5
- package/src/components/Input/Readme.md +128 -24
- package/src/components/MiniInfoCell/MiniInfoCell.css +13 -3
- package/src/components/MiniInfoCell/MiniInfoCell.tsx +3 -3
- package/src/components/ModalCardBase/ModalCardBase.tsx +2 -0
- package/src/components/NativeSelect/NativeSelect.tsx +2 -0
- package/src/components/Panel/Panel.tsx +2 -0
- package/src/components/PanelHeader/PanelHeader.tsx +2 -0
- package/src/components/Popper/Popper.css +0 -35
- package/src/components/Popper/Popper.tsx +33 -25
- package/src/components/PopperArrow/PopperArrow.css +34 -0
- package/src/components/PopperArrow/PopperArrow.tsx +40 -0
- package/src/components/Radio/Radio.tsx +2 -0
- package/src/components/RangeSlider/UniversalSlider.tsx +2 -0
- package/src/components/RichTooltip/RichTooltip.css +44 -4
- package/src/components/RichTooltip/RichTooltip.tsx +9 -11
- package/src/components/ScreenSpinner/ScreenSpinner.css +1 -1
- package/src/components/Select/Select.css +23 -9
- package/src/components/Select/Select.tsx +2 -0
- package/src/components/SelectMimicry/SelectMimicry.tsx +6 -2
- package/src/components/SimpleCell/Readme.md +115 -129
- package/src/components/SimpleCell/SimpleCell.css +30 -68
- package/src/components/SimpleCell/SimpleCell.tsx +23 -25
- package/src/components/Snackbar/Readme.md +95 -123
- package/src/components/Snackbar/Snackbar.css +18 -27
- package/src/components/Snackbar/Snackbar.tsx +17 -11
- package/src/components/SplitCol/SplitCol.css +1 -1
- package/src/components/SplitCol/SplitCol.tsx +2 -0
- package/src/components/SplitLayout/SplitLayout.css +3 -7
- package/src/components/SplitLayout/SplitLayout.tsx +9 -6
- package/src/components/Switch/Switch.css +6 -2
- package/src/components/Tabbar/Tabbar.css +4 -1
- package/src/components/Tabbar/Tabbar.tsx +23 -12
- package/src/components/TabbarItem/TabbarItem.css +7 -5
- package/src/components/TabbarItem/TabbarItem.tsx +13 -7
- package/src/components/Tabs/Readme.md +191 -251
- package/src/components/Tabs/Tabs.css +27 -80
- package/src/components/Tabs/Tabs.tsx +45 -7
- package/src/components/TabsItem/Readme.md +1 -0
- package/src/components/TabsItem/TabsItem.css +191 -106
- package/src/components/TabsItem/TabsItem.tsx +72 -20
- package/src/components/TextTooltip/TextTooltip.css +41 -11
- package/src/components/TextTooltip/TextTooltip.tsx +9 -13
- package/src/components/Textarea/Textarea.css +7 -3
- package/src/components/Textarea/Textarea.tsx +5 -4
- package/src/components/Tooltip/Readme.md +128 -101
- package/src/components/Tooltip/Tooltip.css +29 -40
- package/src/components/Tooltip/Tooltip.tsx +98 -66
- package/src/components/Typography/Headline/Headline.tsx +15 -1
- package/src/components/View/Readme.md +2 -0
- package/src/components/View/View.tsx +451 -514
- package/src/components/WriteBar/WriteBar.css +27 -33
- package/src/components/WriteBar/WriteBar.tsx +16 -5
- package/src/components/WriteBarIcon/WriteBarIcon.css +6 -19
- package/src/components/WriteBarIcon/WriteBarIcon.tsx +6 -6
- package/src/hoc/withAdaptivity.tsx +4 -4
- package/src/hoc/withContext.tsx +1 -1
- package/src/hoc/withPlatform.tsx +1 -1
- package/src/hooks/useOrientationChange.ts +1 -0
- package/src/styles/components.css +1 -0
- package/src/styles/constants.css +8 -0
- package/src/tokenized/index.ts +39 -0
- package/tsconfig.json +1 -1
- package/.cache/ts/src/components/ClickPopper/ClickPopper.d.ts +0 -21
- package/dist/cjs/components/ClickPopper/ClickPopper.js +0 -96
- package/dist/cjs/components/ClickPopper/ClickPopper.js.map +0 -1
- package/dist/components/ClickPopper/ClickPopper.d.ts +0 -21
- package/dist/components/ClickPopper/ClickPopper.js +0 -71
- package/dist/components/ClickPopper/ClickPopper.js.map +0 -1
- package/dist/cssm/components/ClickPopper/ClickPopper.d.ts +0 -21
- package/dist/cssm/components/ClickPopper/ClickPopper.js +0 -71
- package/dist/cssm/components/ClickPopper/ClickPopper.js.map +0 -1
- package/src/components/ClickPopper/ClickPopper.tsx +0 -86
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":["Dropdown","action","hideDelay","showDelay","popperProps","Component","actionSpecificProps","ClickPopper","HoverPopper"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;;;AASA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAKH;AAAA,yBAJnBC,MAImB;AAAA,MAJnBA,MAImB,4BAJV,OAIU;AAAA,MAHnBC,SAGmB,QAHnBA,SAGmB;AAAA,MAFnBC,SAEmB,QAFnBA,SAEmB;AAAA,MADhBC,WACgB;AACnB,MAAIC,SAAJ;AACA,MAAIC,mBAA2C,GAAG,EAAlD;;AAEA,UAAQL,MAAR;AACE,SAAK,OAAL;AACEI,MAAAA,SAAS,GAAGE,wBAAZ;AACA;;AACF,SAAK,OAAL;AACED,MAAAA,mBAAmB,GAAG;AAAEJ,QAAAA,SAAS,EAATA,SAAF;AAAaC,QAAAA,SAAS,EAATA;AAAb,OAAtB;AACAE,MAAAA,SAAS,GAAGG,wBAAZ;AACA;AAPJ;;AAUA,SACE,qCAAC,SAAD;AAAW,IAAA,SAAS,EAAC;AAArB,KAAoCF,mBAApC,EAA6DF,WAA7D,EADF;AAGD,CAtBM","sourcesContent":["import { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { ClickPopper, ClickPopperProps } from \"../ClickPopper/ClickPopper\";\nimport \"./Dropdown.css\";\n\nexport interface DropdownProps\n extends Omit<ClickPopperProps, \"arrow\" | \"arrowClassName\">,\n Omit<HoverPopperProps, \"arrow\" | \"arrowClassName\"> {\n action?: \"click\" | \"hover\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Dropdown\n */\nexport const Dropdown = ({\n action = \"click\",\n hideDelay,\n showDelay,\n ...popperProps\n}: DropdownProps) => {\n let Component;\n let actionSpecificProps: Partial<DropdownProps> = {};\n\n switch (action) {\n case \"click\":\n Component = ClickPopper;\n break;\n case \"hover\":\n actionSpecificProps = { hideDelay, showDelay };\n Component = HoverPopper;\n break;\n }\n\n return (\n <Component vkuiClass=\"Dropdown\" {...actionSpecificProps} {...popperProps} />\n );\n};\n"],"file":"Dropdown.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":["Dropdown","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","style","getRef","onShownChange","restProps","document","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","styles","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","className","undefined"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { PopperCommonProps, Popper } from \"../Popper/Popper\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { usePatchChildrenRef } from \"../../hooks/usePatchChildrenRef\";\nimport \"./Dropdown.css\";\n\nexport interface DropdownProps\n extends Omit<PopperCommonProps, \"arrow\" | \"arrowClassName\"> {\n /**\n * Механика вызова всплывающего окна.\n *\n * - `\"click\"` – показывается/скрывается только при нажатии.\n * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n *\n * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n * > и выпадающего окна.\n */\n action?: \"click\" | \"hover\";\n /**\n * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n */\n shown?: boolean;\n /**\n * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n *\n * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n */\n showDelay?: number;\n /**\n * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n *\n * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n */\n hideDelay?: number;\n /**\n * Содержимое всплывающего окна.\n */\n content?: React.ReactNode;\n /**\n * Целевой элемент. Всплывающее окно появится возле него.\n *\n * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n */\n children?: React.ReactElement;\n /**\n * Вызывается при каждом изменении видимости всплывающего окна.\n */\n onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Dropdown\n *\n * TODO v5.0.0 Переименовать в `Popover` (см. https://github.com/VKCOM/VKUI/issues/2523)\n */\nexport const Dropdown = ({\n action = \"click\",\n shown: shownProp,\n showDelay = 150,\n hideDelay = 150,\n offsetDistance = 8,\n content,\n children,\n style,\n getRef,\n onShownChange,\n ...restProps\n}: DropdownProps) => {\n const { document } = useDOM();\n\n const hoverable = action === \"hover\";\n const hovered = React.useRef(false);\n const [computedShown, setComputedShown] = React.useState(shownProp || false);\n const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(\n null\n );\n\n // Reason: Typescript ругается на CSS Custom Properties в объекте\n // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n const styles = {\n ...style,\n \"--popover-safe-zone-padding\": `${offsetDistance}px`,\n } as React.CSSProperties;\n\n const shown = typeof shownProp === \"boolean\" ? shownProp : computedShown;\n\n const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n const [childRef, child] = usePatchChildrenRef(children);\n\n const setShown = (value: boolean) => {\n if (typeof shownProp !== \"boolean\") {\n setComputedShown(value);\n }\n typeof onShownChange === \"function\" && onShownChange(value);\n };\n\n const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n const handleTargetEnter = () => {\n hovered.current = true;\n hideTimeout.clear();\n showTimeout.set();\n };\n\n const handleTargetClick = () => {\n if (hovered.current && shown) {\n return;\n }\n setShown(!shown);\n };\n\n const handleTargetLeave = () => {\n hovered.current = false;\n showTimeout.clear();\n hideTimeout.set();\n };\n\n const handleContentKeyDownEscape = () => {\n setShown(false);\n };\n\n const handleOutsideClick = (e: MouseEvent) => {\n if (\n dropdownNode &&\n !childRef.current?.contains(e.target as Node) &&\n !dropdownNode.contains(e.target as Node)\n ) {\n setShown(false);\n }\n };\n\n useGlobalEventListener(document, \"click\", handleOutsideClick);\n const targetEnterListener = useEventListener(\"mouseenter\", handleTargetEnter);\n const targetClickEvent = useEventListener(\"click\", handleTargetClick);\n const targetLeaveListener = useEventListener(\"mouseleave\", handleTargetLeave);\n\n React.useEffect(() => {\n if (!childRef.current) {\n return;\n }\n\n targetClickEvent.add(childRef.current);\n\n if (hoverable) {\n targetEnterListener.add(childRef.current);\n targetLeaveListener.add(childRef.current);\n }\n }, [\n childRef,\n hoverable,\n targetClickEvent,\n targetEnterListener,\n targetLeaveListener,\n ]);\n\n return (\n <React.Fragment>\n {child}\n {shown && (\n <Popper\n {...restProps}\n vkuiClass=\"Dropdown\"\n targetRef={childRef}\n getRef={patchedPopperRef}\n offsetDistance={offsetDistance}\n style={styles}\n renderContent={({ className }) => (\n <FocusTrap\n vkuiClass={className}\n onClose={handleContentKeyDownEscape}\n >\n {content}\n </FocusTrap>\n )}\n onMouseOver={hoverable ? hideTimeout.clear : undefined}\n onMouseOut={hoverable ? handleTargetLeave : undefined}\n />\n )}\n </React.Fragment>\n );\n};\n"],"file":"Dropdown.js"}
|
|
@@ -17,10 +17,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
17
17
|
|
|
18
18
|
var React = _interopRequireWildcard(require("react"));
|
|
19
19
|
|
|
20
|
-
var _getClassName = require("../../helpers/getClassName");
|
|
21
|
-
|
|
22
|
-
var _usePlatform = require("../../hooks/usePlatform");
|
|
23
|
-
|
|
24
20
|
var _withAdaptivity = require("../../hoc/withAdaptivity");
|
|
25
21
|
|
|
26
22
|
var _ScrollSaver = require("./ScrollSaver");
|
|
@@ -42,7 +38,6 @@ var EpicComponent = function EpicComponent(_ref) {
|
|
|
42
38
|
children = _ref.children,
|
|
43
39
|
viewWidth = _ref.viewWidth,
|
|
44
40
|
restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
45
|
-
var platform = (0, _usePlatform.usePlatform)();
|
|
46
41
|
var scroll = React.useRef({}).current;
|
|
47
42
|
|
|
48
43
|
if (process.env.NODE_ENV === "development" && !tabbar && viewWidth < _withAdaptivity.ViewWidth.SMALL_TABLET) {
|
|
@@ -53,7 +48,7 @@ var EpicComponent = function EpicComponent(_ref) {
|
|
|
53
48
|
return /*#__PURE__*/React.isValidElement(story) && (0, _getNavId.getNavId)(story.props, warn) === activeStory;
|
|
54
49
|
})) !== null && _ref2 !== void 0 ? _ref2 : null;
|
|
55
50
|
return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
|
|
56
|
-
vkuiClass:
|
|
51
|
+
vkuiClass: "Epic"
|
|
57
52
|
}), (0, _jsxRuntime.createScopedElement)(_ScrollSaver.ScrollSaver, {
|
|
58
53
|
key: activeStory,
|
|
59
54
|
initialScroll: scroll[activeStory] || 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"names":["warn","EpicComponent","activeStory","tabbar","children","viewWidth","restProps","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"names":["warn","EpicComponent","activeStory","tabbar","children","viewWidth","restProps","scroll","React","useRef","current","process","env","NODE_ENV","ViewWidth","SMALL_TABLET","SMALL_TABLET_SIZE","story","Children","toArray","find","isValidElement","props","value","Epic","displayName"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAKA;;;AAUA,IAAMA,IAAI,GAAG,wBAAS,MAAT,CAAb;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAMwB;AAAA;;AAAA,MAL5CC,WAK4C,QAL5CA,WAK4C;AAAA,MAJ5CC,MAI4C,QAJ5CA,MAI4C;AAAA,MAH5CC,QAG4C,QAH5CA,QAG4C;AAAA,MAF5CC,SAE4C,QAF5CA,SAE4C;AAAA,MADzCC,SACyC;AAC5C,MAAMC,MAAM,GAAGC,KAAK,CAACC,MAAN,CAAwC,EAAxC,EAA4CC,OAA3D;;AAEA,MACEC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IACA,CAACV,MADD,IAEAE,SAAS,GAAGS,0BAAUC,YAHxB,EAIE;AACAf,IAAAA,IAAI,qUACsEgB,qCADtE,QAAJ;AAGD;;AACD,MAAMC,KAAK,YACRT,KAAK,CAACU,QAAN,CAAeC,OAAf,CAAuBf,QAAvB,EAAiCgB,IAAjC,CACC,UAACH,KAAD;AAAA,WACE,aAAAT,KAAK,CAACa,cAAN,CAAqBJ,KAArB,KACA,wBAASA,KAAK,CAACK,KAAf,EAAsBtB,IAAtB,MAAgCE,WAFlC;AAAA,GADD,CADQ,yCAK+B,IAL1C;AAOA,SACE,uEAASI,SAAT;AAAoB,IAAA,SAAS,EAAC;AAA9B,MACE,qCAAC,wBAAD;AACE,IAAA,GAAG,EAAEJ,WADP;AAEE,IAAA,aAAa,EAAEK,MAAM,CAACL,WAAD,CAAN,IAAuB,CAFxC;AAGE,IAAA,UAAU,EAAE,oBAACqB,KAAD;AAAA,aAAYhB,MAAM,CAACL,WAAD,CAAN,GAAsBqB,KAAlC;AAAA;AAHd,KAKGN,KALH,CADF,EAQGd,MARH,CADF;AAYD,CArCD;AAuCA;AACA;AACA;;;AACO,IAAMqB,IAAI,GAAG,oCAAevB,aAAf,EAA8B;AAChDI,EAAAA,SAAS,EAAE;AADqC,CAA9B,CAAb;;AAIPmB,IAAI,CAACC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from \"react\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { ScrollSaver } from \"./ScrollSaver\";\nimport { getNavId } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport {\n AdaptivityContextInterface,\n AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport { SMALL_TABLET_SIZE } from \"../AdaptivityProvider/AdaptivityProvider\";\nimport \"./Epic.css\";\n\nexport interface EpicProps\n extends React.HTMLAttributes<HTMLDivElement>,\n AdaptivityProps {\n tabbar?: React.ReactNode;\n activeStory: string;\n}\n\nconst warn = warnOnce(\"Epic\");\n\nconst EpicComponent = ({\n activeStory,\n tabbar,\n children,\n viewWidth,\n ...restProps\n}: EpicProps & AdaptivityContextInterface) => {\n const scroll = React.useRef<{ [key: string]: number }>({}).current;\n\n if (\n process.env.NODE_ENV === \"development\" &&\n !tabbar &&\n viewWidth < ViewWidth.SMALL_TABLET\n ) {\n warn(\n `Не рекомендуется использовать Epic без Tabbar при ширине окна меньше ${SMALL_TABLET_SIZE}px`\n );\n }\n const story =\n (React.Children.toArray(children).find(\n (story) =>\n React.isValidElement(story) &&\n getNavId(story.props, warn) === activeStory\n ) as React.ReactElement | undefined) ?? null;\n\n return (\n <div {...restProps} vkuiClass=\"Epic\">\n <ScrollSaver\n key={activeStory}\n initialScroll={scroll[activeStory] || 0}\n saveScroll={(value) => (scroll[activeStory] = value)}\n >\n {story}\n </ScrollSaver>\n {tabbar}\n </div>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = withAdaptivity(EpicComponent, {\n viewWidth: true,\n});\n\nEpic.displayName = \"Epic\";\n"],"file":"Epic.js"}
|
|
@@ -31,8 +31,6 @@ var _dom = require("../../lib/dom");
|
|
|
31
31
|
|
|
32
32
|
var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
|
|
33
33
|
|
|
34
|
-
var _utils = require("../../lib/utils");
|
|
35
|
-
|
|
36
34
|
var _AppRootContext = require("../AppRoot/AppRootContext");
|
|
37
35
|
|
|
38
36
|
var _excluded = ["Component", "onClose", "restoreFocus", "timeout", "getRootRef", "children"];
|
|
@@ -45,8 +43,7 @@ var FOCUSABLE_ELEMENTS = _accessibility.FOCUSABLE_ELEMENTS_LIST.join();
|
|
|
45
43
|
var FocusTrap = function FocusTrap(_ref) {
|
|
46
44
|
var _ref$Component = _ref.Component,
|
|
47
45
|
Component = _ref$Component === void 0 ? "div" : _ref$Component,
|
|
48
|
-
|
|
49
|
-
onClose = _ref$onClose === void 0 ? _utils.noop : _ref$onClose,
|
|
46
|
+
onClose = _ref.onClose,
|
|
50
47
|
_ref$restoreFocus = _ref.restoreFocus,
|
|
51
48
|
restoreFocus = _ref$restoreFocus === void 0 ? true : _ref$restoreFocus,
|
|
52
49
|
_ref$timeout = _ref.timeout,
|
|
@@ -87,7 +84,7 @@ var FocusTrap = function FocusTrap(_ref) {
|
|
|
87
84
|
|
|
88
85
|
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
|
|
89
86
|
if (!ref.current) {
|
|
90
|
-
return
|
|
87
|
+
return;
|
|
91
88
|
}
|
|
92
89
|
|
|
93
90
|
var nodes = [];
|
|
@@ -102,11 +99,12 @@ var FocusTrap = function FocusTrap(_ref) {
|
|
|
102
99
|
}
|
|
103
100
|
});
|
|
104
101
|
|
|
105
|
-
if (nodes
|
|
106
|
-
|
|
102
|
+
if (nodes.length === 0) {
|
|
103
|
+
// Чтобы фокус был хотя бы на родителе
|
|
104
|
+
nodes.push(ref.current);
|
|
107
105
|
}
|
|
108
106
|
|
|
109
|
-
|
|
107
|
+
setFocusableNodes(nodes);
|
|
110
108
|
}, [children]); // HANDLE TRAP UNMOUNT
|
|
111
109
|
|
|
112
110
|
var focusOnTrapUnmount = (0, _useTimeout.useTimeout)(function () {
|
|
@@ -122,7 +120,7 @@ var FocusTrap = function FocusTrap(_ref) {
|
|
|
122
120
|
};
|
|
123
121
|
}
|
|
124
122
|
|
|
125
|
-
return
|
|
123
|
+
return;
|
|
126
124
|
}, [restoreFocus]);
|
|
127
125
|
|
|
128
126
|
var onDocumentKeydown = function onDocumentKeydown(e) {
|
|
@@ -145,7 +143,7 @@ var FocusTrap = function FocusTrap(_ref) {
|
|
|
145
143
|
}
|
|
146
144
|
}
|
|
147
145
|
|
|
148
|
-
if ((0, _accessibility.pressedKey)(e) === _accessibility.Keys.ESCAPE) {
|
|
146
|
+
if (onClose && (0, _accessibility.pressedKey)(e) === _accessibility.Keys.ESCAPE) {
|
|
149
147
|
onClose();
|
|
150
148
|
}
|
|
151
149
|
|
|
@@ -156,6 +154,7 @@ var FocusTrap = function FocusTrap(_ref) {
|
|
|
156
154
|
capture: true
|
|
157
155
|
});
|
|
158
156
|
return (0, _jsxRuntime.createScopedElement)(Component, (0, _extends2.default)({
|
|
157
|
+
tabIndex: -1,
|
|
159
158
|
ref: ref
|
|
160
159
|
}, restProps), children);
|
|
161
160
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":["FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","FocusTrap","Component","onClose","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":["FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","AppRootContext","keyboardInput","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n FOCUSABLE_ELEMENTS_LIST,\n Keys,\n pressedKey,\n} from \"../../lib/accessibility\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { AppRootContext } from \"../AppRoot/AppRootContext\";\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\n\nexport interface FocusTrapProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent {\n restoreFocus?: boolean;\n timeout?: number;\n onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n Component = \"div\",\n onClose,\n restoreFocus = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps) => {\n const ref = useExternRef<HTMLElement>(getRootRef);\n\n const { document, window } = useDOM();\n\n const [focusableNodes, setFocusableNodes] = React.useState<\n HTMLElement[] | null\n >(null);\n const [restoreFocusTo, setRestoreFocusTo] =\n React.useState<HTMLElement | null>(null);\n\n // HANDLE TRAP MOUNT\n\n const { keyboardInput } = React.useContext(AppRootContext);\n const focusOnTrapMount = useTimeout(() => {\n if (\n keyboardInput &&\n !ref.current?.contains(document!.activeElement) &&\n focusableNodes?.length\n ) {\n focusableNodes[0].focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n focusOnTrapMount.set();\n }, []);\n\n // HANDLE FOCUSABLE NODES\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const nodes: HTMLElement[] = [];\n Array.prototype.forEach.call(\n // eslint-disable-next-line no-restricted-properties\n ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n (focusableEl: Element) => {\n const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n if (display !== \"none\" && visibility !== \"hidden\") {\n nodes.push(focusableEl as HTMLElement);\n }\n }\n );\n\n if (nodes.length === 0) {\n // Чтобы фокус был хотя бы на родителе\n nodes.push(ref.current);\n }\n\n setFocusableNodes(nodes);\n }, [children]);\n\n // HANDLE TRAP UNMOUNT\n\n const focusOnTrapUnmount = useTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n if (restoreFocus && document!.activeElement) {\n setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n return () => {\n focusOnTrapUnmount.set();\n };\n }\n\n return;\n }, [restoreFocus]);\n\n const onDocumentKeydown = (e: KeyboardEvent) => {\n if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n const lastIdx = focusableNodes.length - 1;\n const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n const shouldFocusFirstNode =\n targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n e.preventDefault();\n\n const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== document!.activeElement) {\n node.focus();\n }\n\n return false;\n }\n }\n\n if (onClose && pressedKey(e) === Keys.ESCAPE) {\n onClose();\n }\n\n return true;\n };\n useGlobalEventListener(document, \"keydown\", onDocumentKeydown, {\n capture: true,\n });\n\n return (\n <Component tabIndex={-1} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"file":"FocusTrap.js"}
|
|
@@ -19,14 +19,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
19
19
|
|
|
20
20
|
var React = _interopRequireWildcard(require("react"));
|
|
21
21
|
|
|
22
|
-
var _getClassName = require("../../helpers/getClassName");
|
|
23
|
-
|
|
24
22
|
var _classNames = require("../../lib/classNames");
|
|
25
23
|
|
|
26
|
-
var _usePlatform = require("../../hooks/usePlatform");
|
|
27
|
-
|
|
28
|
-
var _utils = require("../../lib/utils");
|
|
29
|
-
|
|
30
24
|
var _useAdaptivity2 = require("../../hooks/useAdaptivity");
|
|
31
25
|
|
|
32
26
|
var _excluded = ["Component", "children", "getRootRef", "before", "after", "disabled", "mode"];
|
|
@@ -50,7 +44,6 @@ var FormField = function FormField(_ref) {
|
|
|
50
44
|
_ref$mode = _ref.mode,
|
|
51
45
|
mode = _ref$mode === void 0 ? FormFieldMode.default : _ref$mode,
|
|
52
46
|
restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
53
|
-
var platform = (0, _usePlatform.usePlatform)();
|
|
54
47
|
|
|
55
48
|
var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
|
|
56
49
|
sizeY = _useAdaptivity.sizeY;
|
|
@@ -76,11 +69,12 @@ var FormField = function FormField(_ref) {
|
|
|
76
69
|
ref: getRootRef,
|
|
77
70
|
onMouseEnter: handleMouseEnter,
|
|
78
71
|
onMouseLeave: handleMouseLeave,
|
|
79
|
-
vkuiClass: (0, _classNames.classNames)(
|
|
80
|
-
|
|
72
|
+
vkuiClass: (0, _classNames.classNames)("FormField", "FormField--".concat(mode), "FormField--sizeY-".concat(sizeY), // TODO v5.0.0 поправить под новую адаптивность
|
|
73
|
+
disabled && "FormField--disabled", !disabled && hover && "FormField--hover")
|
|
74
|
+
}), before && (0, _jsxRuntime.createScopedElement)("div", {
|
|
81
75
|
role: "presentation",
|
|
82
76
|
vkuiClass: "FormField__before"
|
|
83
|
-
}, before), children,
|
|
77
|
+
}, before), children, after && (0, _jsxRuntime.createScopedElement)("div", {
|
|
84
78
|
role: "presentation",
|
|
85
79
|
vkuiClass: "FormField__after"
|
|
86
80
|
}, after), (0, _jsxRuntime.createScopedElement)("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"names":["FormFieldMode","default","plain","FormField","Component","children","getRootRef","before","after","disabled","mode","restProps","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"names":["FormFieldMode","default","plain","FormField","Component","children","getRootRef","before","after","disabled","mode","restProps","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;AAGO,IAAMA,aAAa,GAAG;AAC3BC,EAAAA,OAAO,EAAE,SADkB;AAE3BC,EAAAA,KAAK,EAAE;AAFoB,CAAtB;;;AAmCP;AACA;AACA;AACO,IAAMC,SAAS,GAAG,SAAZA,SAAY,OASA;AAAA,4BARvBC,SAQuB;AAAA,MARvBA,SAQuB,+BARX,KAQW;AAAA,MAPvBC,QAOuB,QAPvBA,QAOuB;AAAA,MANvBC,UAMuB,QANvBA,UAMuB;AAAA,MALvBC,MAKuB,QALvBA,MAKuB;AAAA,MAJvBC,KAIuB,QAJvBA,KAIuB;AAAA,MAHvBC,QAGuB,QAHvBA,QAGuB;AAAA,uBAFvBC,IAEuB;AAAA,MAFvBA,IAEuB,0BAFhBV,aAAa,CAACC,OAEE;AAAA,MADpBU,SACoB;;AACvB,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,wBAA0BC,KAAK,CAACC,QAAN,CAAe,KAAf,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;AAC1CA,IAAAA,CAAC,CAACC,eAAF;AACAH,IAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,GAHD;;AAKA,MAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACF,CAAD,EAAmB;AAC1CA,IAAAA,CAAC,CAACC,eAAF;AACAH,IAAAA,QAAQ,CAAC,KAAD,CAAR;AACD,GAHD;;AAKA,SACE,qCAAC,SAAD;AACE,IAAA,IAAI,EAAC;AADP,KAEML,SAFN;AAGE,IAAA,GAAG,EAAEL,UAHP;AAIE,IAAA,YAAY,EAAEW,gBAJhB;AAKE,IAAA,YAAY,EAAEG,gBALhB;AAME,IAAA,SAAS,EAAE,4BACT,WADS,uBAEKV,IAFL,8BAGWE,KAHX,GAGoB;AAC7BH,IAAAA,QAAQ,IAAI,qBAJH,EAKT,CAACA,QAAD,IAAaM,KAAb,IAAsB,kBALb;AANb,MAcGR,MAAM,IACL;AAAK,IAAA,IAAI,EAAC,cAAV;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGA,MADH,CAfJ,EAmBGF,QAnBH,EAoBGG,KAAK,IACJ;AAAK,IAAA,IAAI,EAAC,cAAV;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGA,KADH,CArBJ,EAyBE;AAAK,IAAA,IAAI,EAAC,cAAV;AAAyB,IAAA,SAAS,EAAC;AAAnC,IAzBF,CADF;AA6BD,CApDM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./FormField.css\";\n\nexport const FormFieldMode = {\n default: \"default\",\n plain: \"plain\",\n} as const;\n\nexport interface FormFieldProps {\n /**\n * Добавляет иконку слева.\n *\n * Рекомендации:\n *\n * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n */\n before?: React.ReactNode;\n /**\n * Добавляет иконку справа.\n *\n * Рекомендации:\n *\n * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n */\n after?: React.ReactNode;\n mode?: keyof typeof FormFieldMode;\n}\n\ninterface FormFieldOwnProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n FormFieldProps {\n disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n Component = \"div\",\n children,\n getRootRef,\n before,\n after,\n disabled,\n mode = FormFieldMode.default,\n ...restProps\n}: FormFieldOwnProps) => {\n const { sizeY } = useAdaptivity();\n const [hover, setHover] = React.useState(false);\n\n const handleMouseEnter = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(true);\n };\n\n const handleMouseLeave = (e: MouseEvent) => {\n e.stopPropagation();\n setHover(false);\n };\n\n return (\n <Component\n role=\"presentation\"\n {...restProps}\n ref={getRootRef}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n vkuiClass={classNames(\n \"FormField\",\n `FormField--${mode}`,\n `FormField--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность\n disabled && \"FormField--disabled\",\n !disabled && hover && \"FormField--hover\"\n )}\n >\n {before && (\n <div role=\"presentation\" vkuiClass=\"FormField__before\">\n {before}\n </div>\n )}\n {children}\n {after && (\n <div role=\"presentation\" vkuiClass=\"FormField__after\">\n {after}\n </div>\n )}\n <div role=\"presentation\" vkuiClass=\"FormField__border\" />\n </Component>\n );\n};\n"],"file":"FormField.js"}
|
|
@@ -15,10 +15,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
15
15
|
|
|
16
16
|
var _classNames = require("../../lib/classNames");
|
|
17
17
|
|
|
18
|
-
var _getClassName = require("../../helpers/getClassName");
|
|
19
|
-
|
|
20
|
-
var _usePlatform = require("../../hooks/usePlatform");
|
|
21
|
-
|
|
22
18
|
var _utils = require("../../lib/utils");
|
|
23
19
|
|
|
24
20
|
var _Caption = require("../Typography/Caption/Caption");
|
|
@@ -27,6 +23,8 @@ var _Tappable = require("../Tappable/Tappable");
|
|
|
27
23
|
|
|
28
24
|
var _Subhead = require("../Typography/Subhead/Subhead");
|
|
29
25
|
|
|
26
|
+
var _Footnote = require("../Typography/Footnote/Footnote");
|
|
27
|
+
|
|
30
28
|
var _Avatar = require("../Avatar/Avatar");
|
|
31
29
|
|
|
32
30
|
var _excluded = ["size", "children"],
|
|
@@ -58,9 +56,8 @@ var HorizontalCell = function HorizontalCell(_ref2) {
|
|
|
58
56
|
getRootRef = _ref2.getRootRef,
|
|
59
57
|
getRef = _ref2.getRef,
|
|
60
58
|
restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
|
|
61
|
-
var platform = (0, _usePlatform.usePlatform)();
|
|
62
59
|
return (0, _jsxRuntime.createScopedElement)("div", {
|
|
63
|
-
vkuiClass: (0, _classNames.classNames)(
|
|
60
|
+
vkuiClass: (0, _classNames.classNames)("HorizontalCell", "HorizontalCell--".concat(size)),
|
|
64
61
|
ref: getRootRef,
|
|
65
62
|
style: style,
|
|
66
63
|
className: className
|
|
@@ -74,7 +71,7 @@ var HorizontalCell = function HorizontalCell(_ref2) {
|
|
|
74
71
|
}, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(CellTypography, {
|
|
75
72
|
size: size,
|
|
76
73
|
vkuiClass: "HorizontalCell__title"
|
|
77
|
-
}, header), (0, _utils.hasReactNode)(subtitle) && (0, _jsxRuntime.createScopedElement)(
|
|
74
|
+
}, header), (0, _utils.hasReactNode)(subtitle) && (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
|
|
78
75
|
vkuiClass: "HorizontalCell__subtitle"
|
|
79
76
|
}, subtitle))));
|
|
80
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":["CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;AAQA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAII;AAAA,MAHzBC,IAGyB,QAHzBA,IAGyB;AAAA,MAFzBC,QAEyB,QAFzBA,QAEyB;AAAA,MADtBC,SACsB;AACzB,SAAOF,IAAI,KAAK,GAAT,GACL,qCAAC,gBAAD;AAAS,IAAA,KAAK,EAAC;AAAf,KAAuBE,SAAvB,GACGD,QADH,CADK,GAKL,qCAAC,gBAAD,EAAaC,SAAb,EAAyBD,QAAzB,CALF;AAOD,CAZD;;AAyBA;AACA;AACA;AACO,IAAME,cAAc,GAAG,SAAjBA,cAAiB,QAUH;AAAA,MATzBC,SASyB,SATzBA,SASyB;AAAA,MARzBC,MAQyB,SARzBA,MAQyB;AAAA,MAPzBC,KAOyB,SAPzBA,KAOyB;AAAA,MANzBC,QAMyB,SANzBA,QAMyB;AAAA,yBALzBP,IAKyB;AAAA,MALzBA,IAKyB,2BALlB,GAKkB;AAAA,6BAJzBC,QAIyB;AAAA,MAJzBA,QAIyB,+BAJd,qCAAC,cAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAIc;AAAA,MAHzBO,UAGyB,SAHzBA,UAGyB;AAAA,MAFzBC,MAEyB,SAFzBA,MAEyB;AAAA,MADtBP,SACsB;AACzB,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,gBAAX,4BAAgDF,IAAhD,EADb;AAEE,IAAA,GAAG,EAAEQ,UAFP;AAGE,IAAA,KAAK,EAAEF,KAHT;AAIE,IAAA,SAAS,EAAEF;AAJb,KAME,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,sBADZ;AAEE,IAAA,UAAU,EAAEK;AAFd,KAGMP,SAHN,GAKG,yBAAaD,QAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCA,QAAxC,CANJ,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaI,MAAb,KACC,qCAAC,cAAD;AAAgB,IAAA,IAAI,EAAEL,IAAtB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGK,MADH,CAFJ,EAMG,yBAAaE,QAAb,KACC,qCAAC,kBAAD;AAAU,IAAA,SAAS,EAAC;AAApB,KAAgDA,QAAhD,CAPJ,CARF,CANF,CADF;AA4BD,CAvCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { HasComponent, HasRef, HasRootRef } from \"../../types\";\nimport \"./HorizontalCell.css\";\n\ninterface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {\n size: HorizontalCellProps[\"size\"];\n}\n\nconst CellTypography = ({\n size,\n children,\n ...restProps\n}: CellTypographyProps) => {\n return size === \"s\" ? (\n <Caption level=\"2\" {...restProps}>\n {children}\n </Caption>\n ) : (\n <Subhead {...restProps}>{children}</Subhead>\n );\n};\n\nexport interface HorizontalCellProps\n extends React.AnchorHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement>,\n HasComponent {\n size?: \"s\" | \"m\" | \"l\";\n header?: React.ReactNode;\n subtitle?: React.ReactNode;\n disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n className,\n header,\n style,\n subtitle,\n size = \"s\",\n children = <Avatar size={56} />,\n getRootRef,\n getRef,\n ...restProps\n}: HorizontalCellProps) => {\n return (\n <div\n vkuiClass={classNames(\"HorizontalCell\", `HorizontalCell--${size}`)}\n ref={getRootRef}\n style={style}\n className={className}\n >\n <Tappable\n vkuiClass=\"HorizontalCell__body\"\n getRootRef={getRef}\n {...restProps}\n >\n {hasReactNode(children) && (\n <div vkuiClass=\"HorizontalCell__image\">{children}</div>\n )}\n <div vkuiClass=\"HorizontalCell__content\">\n {hasReactNode(header) && (\n <CellTypography size={size} vkuiClass=\"HorizontalCell__title\">\n {header}\n </CellTypography>\n )}\n {hasReactNode(subtitle) && (\n <Footnote vkuiClass=\"HorizontalCell__subtitle\">{subtitle}</Footnote>\n )}\n </div>\n </Tappable>\n </div>\n );\n};\n"],"file":"HorizontalCell.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":["now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScrollComponent","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","hasMouse","getRef","restProps","React","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","HorizontalScroll"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./HorizontalScroll.css\";\n\ninterface ScrollContext {\n scrollElement: HTMLElement | null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToRightBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /**\n * Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n */\n initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends React.HTMLAttributes<HTMLDivElement>,\n AdaptivityProps,\n HasRef<HTMLDivElement> {\n /**\n * Функция для расчета величины прокрутки при клике на левую стрелку.\n */\n getScrollToLeft?: ScrollPositionHandler;\n /**\n * Функция для расчета величины прокрутки при клике на правую стрелку.\n */\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: \"m\" | \"l\";\n showArrows?: boolean | \"always\";\n scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToRightBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n if (!scrollElement || !getScrollPosition) {\n return;\n }\n\n /**\n * максимальное значение сдвига влево\n */\n const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n let startLeft = roundUpElementScrollLeft(scrollElement);\n let endLeft = getScrollPosition(startLeft);\n\n onScrollStart();\n\n if (endLeft >= maxLeft) {\n onScrollToRightBorder();\n endLeft = maxLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentLeft = startLeft + (endLeft - startLeft) * value;\n scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n if (\n roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n elapsed !== 1\n ) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\nconst HorizontalScrollComponent = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = \"l\",\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n hasMouse,\n getRef,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToRightBorder: () => setCanScrollRight(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth:\n scrollElement?.firstElementChild?.scrollWidth || 0,\n scrollAnimationDuration,\n })\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollAnimationDuration, scrollerRef]\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const onscroll = React.useCallback(() => {\n if (\n showArrows &&\n hasMouse &&\n scrollerRef.current &&\n !isCustomScrollingRef.current\n ) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollLeft(scrollElement.scrollLeft > 0);\n setCanScrollRight(\n roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n scrollElement.scrollWidth\n );\n }\n }, [hasMouse, scrollerRef, showArrows]);\n\n const scrollEvent = useEventListener(\"scroll\", onscroll);\n React.useEffect(() => {\n if (scrollerRef.current) {\n scrollEvent.add(scrollerRef.current);\n }\n }, [scrollEvent, scrollerRef]);\n React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n \"HorizontalScroll\",\n showArrows === \"always\" && \"HorizontalScroll--withConstArrows\"\n )}\n >\n {showArrows && hasMouse && canScrollLeft && (\n <HorizontalScrollArrow\n size={arrowSize}\n direction=\"left\"\n vkuiClass=\"HorizontalScroll__arrowLeft\"\n onClick={scrollToLeft}\n />\n )}\n {showArrows && hasMouse && canScrollRight && (\n <HorizontalScrollArrow\n size={arrowSize}\n direction=\"right\"\n vkuiClass=\"HorizontalScroll__arrowRight\"\n onClick={scrollToRight}\n />\n )}\n <div vkuiClass=\"HorizontalScroll__in\" ref={scrollerRef}>\n <div vkuiClass=\"HorizontalScroll__in-wrapper\">{children}</div>\n </div>\n </div>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {\n hasMouse: true,\n});\n"],"file":"HorizontalScroll.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":["now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScrollComponent","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","hasMouse","getRef","restProps","React","useState","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","HorizontalScroll","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { HorizontalScrollArrow } from \"./HorizontalScrollArrow\";\nimport { easeInOutSine } from \"../../lib/fx\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { HasRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./HorizontalScroll.css\";\n\ninterface ScrollContext {\n scrollElement: HTMLElement | null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToRightBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /**\n * Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n */\n initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends React.HTMLAttributes<HTMLDivElement>,\n AdaptivityProps,\n HasRef<HTMLDivElement> {\n /**\n * Функция для расчета величины прокрутки при клике на левую стрелку.\n */\n getScrollToLeft?: ScrollPositionHandler;\n /**\n * Функция для расчета величины прокрутки при клике на правую стрелку.\n */\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: \"m\" | \"l\";\n showArrows?: boolean | \"always\";\n scrollAnimationDuration?: number;\n}\n\n/**\n * timing method\n */\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToRightBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n if (!scrollElement || !getScrollPosition) {\n return;\n }\n\n /**\n * максимальное значение сдвига влево\n */\n const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n let startLeft = roundUpElementScrollLeft(scrollElement);\n let endLeft = getScrollPosition(startLeft);\n\n onScrollStart();\n\n if (endLeft >= maxLeft) {\n onScrollToRightBorder();\n endLeft = maxLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentLeft = startLeft + (endLeft - startLeft) * value;\n scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n if (\n roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&\n elapsed !== 1\n ) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\nconst HorizontalScrollComponent = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = \"l\",\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n hasMouse,\n getRef,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToRightBorder: () => setCanScrollRight(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth:\n scrollElement?.firstElementChild?.scrollWidth || 0,\n scrollAnimationDuration,\n })\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollAnimationDuration, scrollerRef]\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const onscroll = React.useCallback(() => {\n if (\n showArrows &&\n hasMouse &&\n scrollerRef.current &&\n !isCustomScrollingRef.current\n ) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollLeft(scrollElement.scrollLeft > 0);\n setCanScrollRight(\n roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n scrollElement.scrollWidth\n );\n }\n }, [hasMouse, scrollerRef, showArrows]);\n\n const scrollEvent = useEventListener(\"scroll\", onscroll);\n React.useEffect(() => {\n if (scrollerRef.current) {\n scrollEvent.add(scrollerRef.current);\n }\n }, [scrollEvent, scrollerRef]);\n React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n \"HorizontalScroll\",\n showArrows === \"always\" && \"HorizontalScroll--withConstArrows\"\n )}\n >\n {showArrows && hasMouse && canScrollLeft && (\n <HorizontalScrollArrow\n size={arrowSize}\n direction=\"left\"\n vkuiClass=\"HorizontalScroll__arrowLeft\"\n onClick={scrollToLeft}\n />\n )}\n {showArrows && hasMouse && canScrollRight && (\n <HorizontalScrollArrow\n size={arrowSize}\n direction=\"right\"\n vkuiClass=\"HorizontalScroll__arrowRight\"\n onClick={scrollToRight}\n />\n )}\n <div vkuiClass=\"HorizontalScroll__in\" ref={scrollerRef}>\n <div vkuiClass=\"HorizontalScroll__in-wrapper\">{children}</div>\n </div>\n </div>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {\n hasMouse: true,\n});\n\nHorizontalScroll.displayName = \"HorizontalScroll\";\n"],"file":"HorizontalScroll.js"}
|
|
@@ -13,16 +13,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
13
13
|
|
|
14
14
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
15
|
|
|
16
|
-
var _getClassName = require("../../helpers/getClassName");
|
|
17
|
-
|
|
18
16
|
var _classNames = require("../../lib/classNames");
|
|
19
17
|
|
|
20
18
|
var _FormField = require("../FormField/FormField");
|
|
21
19
|
|
|
22
20
|
var _withAdaptivity = require("../../hoc/withAdaptivity");
|
|
23
21
|
|
|
24
|
-
var _usePlatform = require("../../hooks/usePlatform");
|
|
25
|
-
|
|
26
22
|
var _excluded = ["type", "align", "getRef", "className", "getRootRef", "sizeY", "style", "before", "after"];
|
|
27
23
|
|
|
28
24
|
var InputComponent = function InputComponent(_ref) {
|
|
@@ -37,9 +33,9 @@ var InputComponent = function InputComponent(_ref) {
|
|
|
37
33
|
before = _ref.before,
|
|
38
34
|
after = _ref.after,
|
|
39
35
|
restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
40
|
-
var platform = (0, _usePlatform.usePlatform)();
|
|
41
36
|
return (0, _jsxRuntime.createScopedElement)(_FormField.FormField, {
|
|
42
|
-
vkuiClass: (0, _classNames.classNames)(
|
|
37
|
+
vkuiClass: (0, _classNames.classNames)("Input", !!align && "Input--".concat(align), "Input--sizeY-".concat(sizeY), // TODO v5.0.0 поправить под новую адаптивность
|
|
38
|
+
before && "Input--hasBefore", after && "Input--hasAfter"),
|
|
43
39
|
style: style,
|
|
44
40
|
className: className,
|
|
45
41
|
getRootRef: getRootRef,
|
|
@@ -61,4 +57,5 @@ var Input = (0, _withAdaptivity.withAdaptivity)(InputComponent, {
|
|
|
61
57
|
sizeY: true
|
|
62
58
|
});
|
|
63
59
|
exports.Input = Input;
|
|
60
|
+
Input.displayName = "Input";
|
|
64
61
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"names":["InputComponent","type","align","getRef","className","getRootRef","sizeY","style","before","after","restProps","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"names":["InputComponent","type","align","getRef","className","getRootRef","sizeY","style","before","after","restProps","disabled","Input","displayName"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AAEA;;;;AAWA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAWL;AAAA,uBAVhBC,IAUgB;AAAA,MAVhBA,IAUgB,0BAVT,MAUS;AAAA,MAThBC,KASgB,QAThBA,KASgB;AAAA,MARhBC,MAQgB,QARhBA,MAQgB;AAAA,MAPhBC,SAOgB,QAPhBA,SAOgB;AAAA,MANhBC,UAMgB,QANhBA,UAMgB;AAAA,MALhBC,KAKgB,QALhBA,KAKgB;AAAA,MAJhBC,KAIgB,QAJhBA,KAIgB;AAAA,MAHhBC,MAGgB,QAHhBA,MAGgB;AAAA,MAFhBC,KAEgB,QAFhBA,KAEgB;AAAA,MADbC,SACa;AAChB,SACE,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAE,4BACT,OADS,EAET,CAAC,CAACR,KAAF,qBAAqBA,KAArB,CAFS,yBAGOI,KAHP,GAGgB;AACzBE,IAAAA,MAAM,IAAI,kBAJD,EAKTC,KAAK,IAAI,iBALA,CADb;AAQE,IAAA,KAAK,EAAEF,KART;AASE,IAAA,SAAS,EAAEH,SATb;AAUE,IAAA,UAAU,EAAEC,UAVd;AAWE,IAAA,MAAM,EAAEG,MAXV;AAYE,IAAA,KAAK,EAAEC,KAZT;AAaE,IAAA,QAAQ,EAAEC,SAAS,CAACC;AAbtB,KAeE,yEAAWD,SAAX;AAAsB,IAAA,IAAI,EAAET,IAA5B;AAAkC,IAAA,SAAS,EAAC,WAA5C;AAAwD,IAAA,GAAG,EAAEE;AAA7D,KAfF,CADF;AAmBD,CA/BD;AAiCA;AACA;AACA;;;AACO,IAAMS,KAAK,GAAG,oCAAeZ,cAAf,EAA+B;AAClDM,EAAAA,KAAK,EAAE;AAD2C,CAA/B,CAAd;;AAIPM,KAAK,CAACC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport \"./Input.css\";\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n AdaptivityProps,\n FormFieldProps {}\n\nconst InputComponent = ({\n type = \"text\",\n align,\n getRef,\n className,\n getRootRef,\n sizeY,\n style,\n before,\n after,\n ...restProps\n}: InputProps) => {\n return (\n <FormField\n vkuiClass={classNames(\n \"Input\",\n !!align && `Input--${align}`,\n `Input--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность\n before && \"Input--hasBefore\",\n after && \"Input--hasAfter\"\n )}\n style={style}\n className={className}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n >\n <input {...restProps} type={type} vkuiClass=\"Input__el\" ref={getRef} />\n </FormField>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = withAdaptivity(InputComponent, {\n sizeY: true,\n});\n\nInput.displayName = \"Input\";\n"],"file":"Input.js"}
|
|
@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
15
15
|
|
|
16
16
|
var _classNames = require("../../lib/classNames");
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _Paragraph = require("../Typography/Paragraph/Paragraph");
|
|
19
19
|
|
|
20
20
|
var _Tappable = require("../Tappable/Tappable");
|
|
21
21
|
|
|
@@ -46,7 +46,7 @@ var MiniInfoCell = function MiniInfoCell(_ref) {
|
|
|
46
46
|
vkuiClass: (0, _classNames.classNames)("MiniInfoCell", mode !== "base" && "MiniInfoCell--md-".concat(mode), textWrap !== "nowrap" && "MiniInfoCell--wr-".concat(textWrap), "MiniInfoCell--lvl-".concat(textLevel))
|
|
47
47
|
}), (0, _jsxRuntime.createScopedElement)("span", {
|
|
48
48
|
vkuiClass: "MiniInfoCell__icon"
|
|
49
|
-
}, before), (0, _jsxRuntime.createScopedElement)(
|
|
49
|
+
}, before), (0, _jsxRuntime.createScopedElement)(_Paragraph.Paragraph, {
|
|
50
50
|
vkuiClass: "MiniInfoCell__content",
|
|
51
51
|
weight: mode === "more" ? "2" : undefined
|
|
52
52
|
}, children), (0, _utils.hasReactNode)(after) && (0, _jsxRuntime.createScopedElement)("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"names":["MiniInfoCell","before","after","mode","textWrap","textLevel","children","restProps","isClickable","onClick","undefined"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AA6CA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAQH;AAAA,MAPvBC,MAOuB,QAPvBA,MAOuB;AAAA,MANvBC,KAMuB,QANvBA,KAMuB;AAAA,uBALvBC,IAKuB;AAAA,MALvBA,IAKuB,0BALhB,MAKgB;AAAA,2BAJvBC,QAIuB;AAAA,MAJvBA,QAIuB,8BAJZ,QAIY;AAAA,4BAHvBC,SAGuB;AAAA,MAHvBA,SAGuB,+BAHX,WAGW;AAAA,MAFvBC,QAEuB,QAFvBA,QAEuB;AAAA,MADpBC,SACoB;AACvB,MAAMC,WAAW,GAAG,CAAC,CAACD,SAAS,CAACE,OAAhC;AAEA,SACE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,KADZ;AAEE,IAAA,QAAQ,EAAE,CAACD,WAFb;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,QAAH,GAAcE;AAHjC,KAIMH,SAJN;AAKE,IAAA,SAAS,EAAE,4BACT,cADS,EAETJ,IAAI,KAAK,MAAT,+BAAuCA,IAAvC,CAFS,EAGTC,QAAQ,KAAK,QAAb,+BAA6CA,QAA7C,CAHS,8BAIYC,SAJZ;AALb,MAYE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAsCJ,MAAtC,CAZF,EAaE,qCAAC,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"names":["MiniInfoCell","before","after","mode","textWrap","textLevel","children","restProps","isClickable","onClick","undefined"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AA6CA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAQH;AAAA,MAPvBC,MAOuB,QAPvBA,MAOuB;AAAA,MANvBC,KAMuB,QANvBA,KAMuB;AAAA,uBALvBC,IAKuB;AAAA,MALvBA,IAKuB,0BALhB,MAKgB;AAAA,2BAJvBC,QAIuB;AAAA,MAJvBA,QAIuB,8BAJZ,QAIY;AAAA,4BAHvBC,SAGuB;AAAA,MAHvBA,SAGuB,+BAHX,WAGW;AAAA,MAFvBC,QAEuB,QAFvBA,QAEuB;AAAA,MADpBC,SACoB;AACvB,MAAMC,WAAW,GAAG,CAAC,CAACD,SAAS,CAACE,OAAhC;AAEA,SACE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,KADZ;AAEE,IAAA,QAAQ,EAAE,CAACD,WAFb;AAGE,IAAA,IAAI,EAAEA,WAAW,GAAG,QAAH,GAAcE;AAHjC,KAIMH,SAJN;AAKE,IAAA,SAAS,EAAE,4BACT,cADS,EAETJ,IAAI,KAAK,MAAT,+BAAuCA,IAAvC,CAFS,EAGTC,QAAQ,KAAK,QAAb,+BAA6CA,QAA7C,CAHS,8BAIYC,SAJZ;AALb,MAYE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAsCJ,MAAtC,CAZF,EAaE,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAC,uBADZ;AAEE,IAAA,MAAM,EAAEE,IAAI,KAAK,MAAT,GAAkB,GAAlB,GAAwBO;AAFlC,KAIGJ,QAJH,CAbF,EAmBG,yBAAaJ,KAAb,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAuCA,KAAvC,CApBJ,CADF;AAyBD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport \"./MiniInfoCell.css\";\n\nexport interface MiniInfoCellProps\n extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Иконка слева.<br />\n * Рекомендуется использовать иконки размера 20.\n */\n before: React.ReactNode;\n\n /**\n * Содержимое справа.<br />\n * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n */\n after?: React.ReactNode;\n\n /**\n * Тип ячейки:\n *\n * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n */\n mode?: \"base\" | \"add\" | \"more\";\n\n /**\n * Тип отображения текста:\n *\n * - `nowrap` – в одну строку, текст не переносится и обрезается.\n * - `short` – максимально отображается 3 строки, остальное обрезается.\n * - `full` – текст отображается полностью.\n */\n textWrap?: \"nowrap\" | \"short\" | \"full\";\n\n /**\n * Стиль текста:\n *\n * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества\n * - `secondary` – стиль по-умолчанию.\n */\n textLevel?: \"primary\" | \"secondary\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n before,\n after,\n mode = \"base\",\n textWrap = \"nowrap\",\n textLevel = \"secondary\",\n children,\n ...restProps\n}: MiniInfoCellProps) => {\n const isClickable = !!restProps.onClick;\n\n return (\n <Tappable\n Component=\"div\"\n disabled={!isClickable}\n role={isClickable ? \"button\" : undefined}\n {...restProps}\n vkuiClass={classNames(\n \"MiniInfoCell\",\n mode !== \"base\" && `MiniInfoCell--md-${mode}`,\n textWrap !== \"nowrap\" && `MiniInfoCell--wr-${textWrap}`,\n `MiniInfoCell--lvl-${textLevel}`\n )}\n >\n <span vkuiClass=\"MiniInfoCell__icon\">{before}</span>\n <Paragraph\n vkuiClass=\"MiniInfoCell__content\"\n weight={mode === \"more\" ? \"2\" : undefined}\n >\n {children}\n </Paragraph>\n {hasReactNode(after) && (\n <span vkuiClass=\"MiniInfoCell__after\">{after}</span>\n )}\n </Tappable>\n );\n};\n"],"file":"MiniInfoCell.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","actionsLayout","viewWidth","hasMouse","viewHeight","onClose","dismissLabel","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseBtn","ViewWidth","SMALL_TABLET","Platform","VKCOM","canShowCloseBtnIos","IOS"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;AA0CA;AACA;AACA;AACO,IAAMA,aAAa,GAAG,oCAG3B,gBAcM;AAAA,MAbJC,UAaI,QAbJA,UAaI;AAAA,MAZJC,IAYI,QAZJA,IAYI;AAAA,MAXJC,MAWI,QAXJA,MAWI;AAAA,MAVJC,SAUI,QAVJA,SAUI;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,MANJC,SAMI,QANJA,SAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,QAEX;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,SAAS,GAAG,4CAAlB;AACA,MAAMC,wBAAwB,GAAG,gCAAcC,QAA/C;AAEA,MAAMC,eAAe,GACnBV,SAAS,IAAIW,0BAAUC,YAAvB,IAAuCN,QAAQ,KAAKO,mBAASC,KAD/D;AAEA,MAAMC,kBAAkB,GAAGT,QAAQ,KAAKU,aAAb,IAAoB,CAACN,eAAhD;AAEA,SACE,uEACML,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,eAAb,EAA8BC,QAA9B,CADS,EAETC,SAAS,IAAI,wBAFJ,CAFb;AAME,IAAA,GAAG,EAAEd;AANP,MAQE;AACE,IAAA,SAAS,EAAE,4BACT,0BADS,EAETe,wBAAwB,IACtB,kDAHO;AADb,KAOG,yBAAad,IAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,IAAtC,CARJ,EAUG,yBAAaC,MAAb,KACC,qCAAC,YAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC,GAAxB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGA,MADH,CAXJ,EAeG,yBAAaC,SAAb,KACC,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAA+CA,SAA/C,CAhBJ,EAmBGC,QAnBH,EAqBG,yBAAaC,OAAb,KACC;AACE,IAAA,SAAS,EAAE,4BACT,wBADS,EAETC,aAAa,KAAK,UAAlB,IAAgC,2BAFvB;AADb,KAMGD,OANH,CAtBJ,EAgCGY,eAAe,IAAI,qCAAC,sCAAD;AAAoB,IAAA,OAAO,EAAEP;AAA7B,IAhCtB,EAiCGY,kBAAkB,IACjB,qCAAC,oCAAD;AACE,kBAAYX,YADd;AAEE,IAAA,SAAS,EAAC,wBAFZ;AAGE,IAAA,OAAO,EAAED;AAHX,KAKE,qCAAC,oBAAD,OALF,CAlCJ,CARF,CADF;AAsDD,CAhF0B,EAiF3B;AACEH,EAAAA,SAAS,EAAE,IADb;AAEEE,EAAAA,UAAU,EAAE,IAFd;AAGED,EAAAA,QAAQ,EAAE;AAHZ,CAjF2B,CAAtB","sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { ViewWidth, withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { HasRootRef } from \"../../types\";\nimport { PanelHeaderButton } from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { IOS, Platform } from \"../../lib/platform\";\nimport { ModalDismissButton } from \"../ModalDismissButton/ModalDismissButton\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { useKeyboard } from \"../../hooks/useKeyboard\";\nimport { AdaptivityContextInterface } from \"../AdaptivityProvider/AdaptivityContext\";\nimport { useAdaptivityIsDesktop } from \"../../hooks/useAdaptivity\";\nimport \"./ModalCardBase.css\";\n\nexport interface ModalCardBaseProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n /**\n * Иконка.\n *\n * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n */\n icon?: React.ReactNode;\n\n /**\n * Заголовок карточки\n */\n header?: React.ReactNode;\n\n /**\n * Подзаголовок\n */\n subheader?: React.ReactNode;\n\n /**\n * Кнопки-действия.\n *\n * Рекомендуется использовать `<Button size=\"l\" mode=\"primary\" />` или `<Button size=\"l\" mode=\"secondary\" />`\n */\n actions?: React.ReactNode;\n\n /**\n * Тип отображения кнопок: вертикальный или горизонтальный\n */\n actionsLayout?: \"vertical\" | \"horizontal\";\n onClose?: VoidFunction;\n\n /**\n * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n */\n dismissLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = withAdaptivity<\n ModalCardBaseProps & AdaptivityContextInterface\n>(\n ({\n getRootRef,\n icon,\n header,\n subheader,\n children,\n actions,\n actionsLayout,\n viewWidth,\n hasMouse,\n viewHeight,\n onClose,\n dismissLabel = \"Скрыть\",\n ...restProps\n }) => {\n const platform = usePlatform();\n const isDesktop = useAdaptivityIsDesktop();\n const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n const canShowCloseBtn =\n viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;\n const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"ModalCardBase\", platform),\n isDesktop && \"ModalCardBase--desktop\"\n )}\n ref={getRootRef}\n >\n <div\n vkuiClass={classNames(\n \"ModalCardBase__container\",\n isSoftwareKeyboardOpened &&\n \"ModalCardBase__container--softwareKeyboardOpened\"\n )}\n >\n {hasReactNode(icon) && (\n <div vkuiClass=\"ModalCardBase__icon\">{icon}</div>\n )}\n {hasReactNode(header) && (\n <Title level=\"2\" weight=\"2\" vkuiClass=\"ModalCardBase__header\">\n {header}\n </Title>\n )}\n {hasReactNode(subheader) && (\n <Subhead vkuiClass=\"ModalCardBase__subheader\">{subheader}</Subhead>\n )}\n\n {children}\n\n {hasReactNode(actions) && (\n <div\n vkuiClass={classNames(\n \"ModalCardBase__actions\",\n actionsLayout === \"vertical\" && \"ModalCardBase__actions--v\"\n )}\n >\n {actions}\n </div>\n )}\n\n {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}\n {canShowCloseBtnIos && (\n <PanelHeaderButton\n aria-label={dismissLabel}\n vkuiClass=\"ModalCardBase__dismiss\"\n onClick={onClose}\n >\n <Icon24Dismiss />\n </PanelHeaderButton>\n )}\n </div>\n </div>\n );\n },\n {\n viewWidth: true,\n viewHeight: true,\n hasMouse: true,\n }\n);\n"],"file":"ModalCardBase.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","actionsLayout","viewWidth","hasMouse","viewHeight","onClose","dismissLabel","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseBtn","ViewWidth","SMALL_TABLET","Platform","VKCOM","canShowCloseBtnIos","IOS","displayName"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;AA0CA;AACA;AACA;AACO,IAAMA,aAAa,GAAG,oCAG3B,gBAcM;AAAA,MAbJC,UAaI,QAbJA,UAaI;AAAA,MAZJC,IAYI,QAZJA,IAYI;AAAA,MAXJC,MAWI,QAXJA,MAWI;AAAA,MAVJC,SAUI,QAVJA,SAUI;AAAA,MATJC,QASI,QATJA,QASI;AAAA,MARJC,OAQI,QARJA,OAQI;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,MANJC,SAMI,QANJA,SAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,QAEX;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,SAAS,GAAG,4CAAlB;AACA,MAAMC,wBAAwB,GAAG,gCAAcC,QAA/C;AAEA,MAAMC,eAAe,GACnBV,SAAS,IAAIW,0BAAUC,YAAvB,IAAuCN,QAAQ,KAAKO,mBAASC,KAD/D;AAEA,MAAMC,kBAAkB,GAAGT,QAAQ,KAAKU,aAAb,IAAoB,CAACN,eAAhD;AAEA,SACE,uEACML,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,eAAb,EAA8BC,QAA9B,CADS,EAETC,SAAS,IAAI,wBAFJ,CAFb;AAME,IAAA,GAAG,EAAEd;AANP,MAQE;AACE,IAAA,SAAS,EAAE,4BACT,0BADS,EAETe,wBAAwB,IACtB,kDAHO;AADb,KAOG,yBAAad,IAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,IAAtC,CARJ,EAUG,yBAAaC,MAAb,KACC,qCAAC,YAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC,GAAxB;AAA4B,IAAA,SAAS,EAAC;AAAtC,KACGA,MADH,CAXJ,EAeG,yBAAaC,SAAb,KACC,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAA+CA,SAA/C,CAhBJ,EAmBGC,QAnBH,EAqBG,yBAAaC,OAAb,KACC;AACE,IAAA,SAAS,EAAE,4BACT,wBADS,EAETC,aAAa,KAAK,UAAlB,IAAgC,2BAFvB;AADb,KAMGD,OANH,CAtBJ,EAgCGY,eAAe,IAAI,qCAAC,sCAAD;AAAoB,IAAA,OAAO,EAAEP;AAA7B,IAhCtB,EAiCGY,kBAAkB,IACjB,qCAAC,oCAAD;AACE,kBAAYX,YADd;AAEE,IAAA,SAAS,EAAC,wBAFZ;AAGE,IAAA,OAAO,EAAED;AAHX,KAKE,qCAAC,oBAAD,OALF,CAlCJ,CARF,CADF;AAsDD,CAhF0B,EAiF3B;AACEH,EAAAA,SAAS,EAAE,IADb;AAEEE,EAAAA,UAAU,EAAE,IAFd;AAGED,EAAAA,QAAQ,EAAE;AAHZ,CAjF2B,CAAtB;;AAwFPT,aAAa,CAACyB,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from \"react\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { ViewWidth, withAdaptivity } from \"../../hoc/withAdaptivity\";\nimport { HasRootRef } from \"../../types\";\nimport { PanelHeaderButton } from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { IOS, Platform } from \"../../lib/platform\";\nimport { ModalDismissButton } from \"../ModalDismissButton/ModalDismissButton\";\nimport { Icon24Dismiss } from \"@vkontakte/icons\";\nimport { useKeyboard } from \"../../hooks/useKeyboard\";\nimport { AdaptivityContextInterface } from \"../AdaptivityProvider/AdaptivityContext\";\nimport { useAdaptivityIsDesktop } from \"../../hooks/useAdaptivity\";\nimport \"./ModalCardBase.css\";\n\nexport interface ModalCardBaseProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n /**\n * Иконка.\n *\n * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n */\n icon?: React.ReactNode;\n\n /**\n * Заголовок карточки\n */\n header?: React.ReactNode;\n\n /**\n * Подзаголовок\n */\n subheader?: React.ReactNode;\n\n /**\n * Кнопки-действия.\n *\n * Рекомендуется использовать `<Button size=\"l\" mode=\"primary\" />` или `<Button size=\"l\" mode=\"secondary\" />`\n */\n actions?: React.ReactNode;\n\n /**\n * Тип отображения кнопок: вертикальный или горизонтальный\n */\n actionsLayout?: \"vertical\" | \"horizontal\";\n onClose?: VoidFunction;\n\n /**\n * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n */\n dismissLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = withAdaptivity<\n ModalCardBaseProps & AdaptivityContextInterface\n>(\n ({\n getRootRef,\n icon,\n header,\n subheader,\n children,\n actions,\n actionsLayout,\n viewWidth,\n hasMouse,\n viewHeight,\n onClose,\n dismissLabel = \"Скрыть\",\n ...restProps\n }) => {\n const platform = usePlatform();\n const isDesktop = useAdaptivityIsDesktop();\n const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n const canShowCloseBtn =\n viewWidth >= ViewWidth.SMALL_TABLET || platform === Platform.VKCOM;\n const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"ModalCardBase\", platform),\n isDesktop && \"ModalCardBase--desktop\"\n )}\n ref={getRootRef}\n >\n <div\n vkuiClass={classNames(\n \"ModalCardBase__container\",\n isSoftwareKeyboardOpened &&\n \"ModalCardBase__container--softwareKeyboardOpened\"\n )}\n >\n {hasReactNode(icon) && (\n <div vkuiClass=\"ModalCardBase__icon\">{icon}</div>\n )}\n {hasReactNode(header) && (\n <Title level=\"2\" weight=\"2\" vkuiClass=\"ModalCardBase__header\">\n {header}\n </Title>\n )}\n {hasReactNode(subheader) && (\n <Subhead vkuiClass=\"ModalCardBase__subheader\">{subheader}</Subhead>\n )}\n\n {children}\n\n {hasReactNode(actions) && (\n <div\n vkuiClass={classNames(\n \"ModalCardBase__actions\",\n actionsLayout === \"vertical\" && \"ModalCardBase__actions--v\"\n )}\n >\n {actions}\n </div>\n )}\n\n {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}\n {canShowCloseBtnIos && (\n <PanelHeaderButton\n aria-label={dismissLabel}\n vkuiClass=\"ModalCardBase__dismiss\"\n onClick={onClose}\n >\n <Icon24Dismiss />\n </PanelHeaderButton>\n )}\n </div>\n </div>\n );\n },\n {\n viewWidth: true,\n viewHeight: true,\n hasMouse: true,\n }\n);\n\nModalCardBase.displayName = \"ModalCardBase\";\n"],"file":"ModalCardBase.js"}
|