@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
|
@@ -6,36 +6,26 @@ import { classNames } from "../../lib/classNames";
|
|
|
6
6
|
import { getClassName } from "../../helpers/getClassName";
|
|
7
7
|
import { Tappable } from "../Tappable/Tappable";
|
|
8
8
|
import { Icon24Chevron } from "@vkontakte/icons";
|
|
9
|
-
import {
|
|
9
|
+
import { IOS } from "../../lib/platform";
|
|
10
10
|
import { usePlatform } from "../../hooks/usePlatform";
|
|
11
11
|
import { hasReactNode } from "../../lib/utils";
|
|
12
12
|
import { useAdaptivity } from "../../hooks/useAdaptivity";
|
|
13
13
|
import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
|
|
14
|
-
import { Title } from "../Typography/Title/Title";
|
|
15
|
-
import { Text } from "../Typography/Text/Text";
|
|
16
|
-
import { Subhead } from "../Typography/Subhead/Subhead";
|
|
17
14
|
import { Headline } from "../Typography/Headline/Headline";
|
|
15
|
+
import { Footnote } from "../Typography/Footnote/Footnote";
|
|
16
|
+
import { Caption } from "../Typography/Caption/Caption";
|
|
18
17
|
|
|
19
18
|
var SimpleCellTypography = function SimpleCellTypography(props) {
|
|
20
19
|
var _useAdaptivity = useAdaptivity(),
|
|
21
20
|
sizeY = _useAdaptivity.sizeY;
|
|
22
21
|
|
|
23
|
-
var platform = usePlatform();
|
|
24
|
-
|
|
25
22
|
if (sizeY === SizeType.COMPACT) {
|
|
26
|
-
return createScopedElement(
|
|
27
|
-
|
|
28
|
-
return createScopedElement(Headline, _extends({
|
|
29
|
-
Component: "span",
|
|
30
|
-
weight: "3"
|
|
31
|
-
}, props));
|
|
32
|
-
} else {
|
|
33
|
-
return createScopedElement(Title, _extends({
|
|
34
|
-
Component: "span",
|
|
35
|
-
level: "3",
|
|
36
|
-
weight: "3"
|
|
23
|
+
return createScopedElement(Caption, _extends({
|
|
24
|
+
level: "2"
|
|
37
25
|
}, props));
|
|
38
26
|
}
|
|
27
|
+
|
|
28
|
+
return createScopedElement(Footnote, props);
|
|
39
29
|
};
|
|
40
30
|
|
|
41
31
|
var SimpleCellComponent = function SimpleCellComponent(_ref) {
|
|
@@ -53,24 +43,24 @@ var SimpleCellComponent = function SimpleCellComponent(_ref) {
|
|
|
53
43
|
var platform = usePlatform();
|
|
54
44
|
var hasAfter = hasReactNode(after) || expandable && platform === IOS;
|
|
55
45
|
return createScopedElement(Tappable, _extends({}, restProps, {
|
|
56
|
-
|
|
57
|
-
vkuiClass: classNames(getClassName("SimpleCell", platform), {
|
|
58
|
-
"SimpleCell--exp": expandable,
|
|
59
|
-
"SimpleCell--mult": multiline
|
|
60
|
-
}, "SimpleCell--sizeY-".concat(sizeY))
|
|
46
|
+
vkuiClass: classNames(getClassName("SimpleCell", platform), expandable && "SimpleCell--exp", multiline && "SimpleCell--mult", "SimpleCell--sizeY-".concat(sizeY))
|
|
61
47
|
}), before, createScopedElement("div", {
|
|
62
48
|
vkuiClass: "SimpleCell__main"
|
|
63
49
|
}, createScopedElement("div", {
|
|
64
50
|
vkuiClass: "SimpleCell__content"
|
|
65
|
-
}, createScopedElement(
|
|
66
|
-
|
|
51
|
+
}, createScopedElement(Headline, {
|
|
52
|
+
Component: "span",
|
|
53
|
+
vkuiClass: "SimpleCell__children",
|
|
54
|
+
weight: "3"
|
|
67
55
|
}, children), hasReactNode(badge) && createScopedElement("span", {
|
|
68
56
|
vkuiClass: "SimpleCell__badge"
|
|
69
|
-
}, badge)), description && createScopedElement(
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
57
|
+
}, badge)), description && createScopedElement("div", {
|
|
58
|
+
vkuiClass: "SimpleCell__content"
|
|
59
|
+
}, createScopedElement(SimpleCellTypography, {
|
|
60
|
+
vkuiClass: "SimpleCell__text SimpleCell__subtitle"
|
|
61
|
+
}, description))), hasReactNode(indicator) && createScopedElement(Headline, {
|
|
73
62
|
Component: "span",
|
|
63
|
+
weight: "3",
|
|
74
64
|
vkuiClass: "SimpleCell__indicator"
|
|
75
65
|
}, indicator), hasAfter && createScopedElement("div", {
|
|
76
66
|
vkuiClass: "SimpleCell__after"
|
|
@@ -84,4 +74,5 @@ var SimpleCellComponent = function SimpleCellComponent(_ref) {
|
|
|
84
74
|
export var SimpleCell = withAdaptivity(SimpleCellComponent, {
|
|
85
75
|
sizeY: true
|
|
86
76
|
});
|
|
77
|
+
SimpleCell.displayName = "SimpleCell";
|
|
87
78
|
//# sourceMappingURL=SimpleCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["classNames","getClassName","Tappable","Icon24Chevron","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/SimpleCell/SimpleCell.tsx"],"names":["classNames","getClassName","Tappable","Icon24Chevron","IOS","usePlatform","hasReactNode","useAdaptivity","withAdaptivity","SizeType","Headline","Footnote","Caption","SimpleCellTypography","props","sizeY","COMPACT","SimpleCellComponent","badge","before","indicator","children","after","description","expandable","multiline","restProps","platform","hasAfter","SimpleCell","displayName"],"mappings":";;;;AAEA,SAASA,UAAT;AACA,SAASC,YAAT;AACA,SAAwBC,QAAxB;AACA,SAASC,aAAT,QAA8B,kBAA9B;AACA,SAASC,GAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,aAAT;AACA,SAASC,cAAT,EAAyBC,QAAzB;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;;AAwCA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAsC;AACjE,uBAAkBP,aAAa,EAA/B;AAAA,MAAQQ,KAAR,kBAAQA,KAAR;;AAEA,MAAIA,KAAK,KAAKN,QAAQ,CAACO,OAAvB,EAAgC;AAC9B,WAAO,oBAAC,OAAD;AAAS,MAAA,KAAK,EAAC;AAAf,OAAuBF,KAAvB,EAAP;AACD;;AAED,SAAO,oBAAC,QAAD,EAAcA,KAAd,CAAP;AACD,CARD;;AAUA,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAsB,OAWL;AAAA,MAVrBC,KAUqB,QAVrBA,KAUqB;AAAA,MATrBC,MASqB,QATrBA,MASqB;AAAA,MARrBC,SAQqB,QARrBA,SAQqB;AAAA,MAPrBC,QAOqB,QAPrBA,QAOqB;AAAA,MANrBC,KAMqB,QANrBA,KAMqB;AAAA,MALrBC,WAKqB,QALrBA,WAKqB;AAAA,MAJrBC,UAIqB,QAJrBA,UAIqB;AAAA,MAHrBC,SAGqB,QAHrBA,SAGqB;AAAA,MAFrBV,KAEqB,QAFrBA,KAEqB;AAAA,MADlBW,SACkB;;AACrB,MAAMC,QAAQ,GAAGtB,WAAW,EAA5B;AACA,MAAMuB,QAAQ,GAAGtB,YAAY,CAACgB,KAAD,CAAZ,IAAwBE,UAAU,IAAIG,QAAQ,KAAKvB,GAApE;AAEA,SACE,oBAAC,QAAD,eACMsB,SADN;AAEE,IAAA,SAAS,EAAE1B,UAAU,CACnBC,YAAY,CAAC,YAAD,EAAe0B,QAAf,CADO,EAEnBH,UAAU,IAAI,iBAFK,EAGnBC,SAAS,IAAI,kBAHM,8BAIEV,KAJF;AAFvB,MASGI,MATH,EAUE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC,sBAFZ;AAGE,IAAA,MAAM,EAAC;AAHT,KAKGE,QALH,CADF,EAQGf,YAAY,CAACY,KAAD,CAAZ,IACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAqCA,KAArC,CATJ,CADF,EAaGK,WAAW,IACV;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,oBAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGA,WADH,CADF,CAdJ,CAVF,EA+BGjB,YAAY,CAACc,SAAD,CAAZ,IACC,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAC,MAApB;AAA2B,IAAA,MAAM,EAAC,GAAlC;AAAsC,IAAA,SAAS,EAAC;AAAhD,KACGA,SADH,CAhCJ,EAoCGQ,QAAQ,IACP;AAAK,IAAA,SAAS,EAAC;AAAf,KACGN,KADH,EAEGE,UAAU,IAAIG,QAAQ,KAAKvB,GAA3B,IAAkC,oBAAC,aAAD,OAFrC,CArCJ,CADF;AA6CD,CA5DD;AA8DA;AACA;AACA;;;AACA,OAAO,IAAMyB,UAAU,GAAGrB,cAAc,CAACS,mBAAD,EAAsB;AAAEF,EAAAA,KAAK,EAAE;AAAT,CAAtB,CAAjC;AAEPc,UAAU,CAACC,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon24Chevron } from \"@vkontakte/icons\";\nimport { IOS } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { withAdaptivity, SizeType } from \"../../hoc/withAdaptivity\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport \"./SimpleCell.css\";\n\nexport interface SimpleCellOwnProps extends HasComponent {\n /**\n * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n */\n before?: React.ReactNode;\n /**\n * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n */\n badge?: React.ReactNode;\n /**\n * Контейнер для текста справа от `children`.\n */\n indicator?: React.ReactNode;\n /**\n * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n */\n after?: React.ReactNode;\n /**\n * Контейнер для текста под `children`.\n */\n description?: React.ReactNode;\n /**\n * Убирает анимацию нажатия\n */\n disabled?: boolean;\n /**\n * В iOS добавляет chevron справа. Передавать `true`, если предполагается переход при клике по ячейке.\n */\n expandable?: boolean;\n multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\ntype SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &\n HasComponent;\n\nconst SimpleCellTypography = (props: SimpleCellTypographyProps) => {\n const { sizeY } = useAdaptivity();\n\n if (sizeY === SizeType.COMPACT) {\n return <Caption level=\"2\" {...props} />;\n }\n\n return <Footnote {...props} />;\n};\n\nconst SimpleCellComponent = ({\n badge,\n before,\n indicator,\n children,\n after,\n description,\n expandable,\n multiline,\n sizeY,\n ...restProps\n}: SimpleCellProps) => {\n const platform = usePlatform();\n const hasAfter = hasReactNode(after) || (expandable && platform === IOS);\n\n return (\n <Tappable\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"SimpleCell\", platform),\n expandable && \"SimpleCell--exp\",\n multiline && \"SimpleCell--mult\",\n `SimpleCell--sizeY-${sizeY}`\n )}\n >\n {before}\n <div vkuiClass=\"SimpleCell__main\">\n <div vkuiClass=\"SimpleCell__content\">\n <Headline\n Component=\"span\"\n vkuiClass=\"SimpleCell__children\"\n weight=\"3\"\n >\n {children}\n </Headline>\n {hasReactNode(badge) && (\n <span vkuiClass=\"SimpleCell__badge\">{badge}</span>\n )}\n </div>\n {description && (\n <div vkuiClass=\"SimpleCell__content\">\n <SimpleCellTypography vkuiClass=\"SimpleCell__text SimpleCell__subtitle\">\n {description}\n </SimpleCellTypography>\n </div>\n )}\n </div>\n {hasReactNode(indicator) && (\n <Headline Component=\"span\" weight=\"3\" vkuiClass=\"SimpleCell__indicator\">\n {indicator}\n </Headline>\n )}\n {hasAfter && (\n <div vkuiClass=\"SimpleCell__after\">\n {after}\n {expandable && platform === IOS && <Icon24Chevron />}\n </div>\n )}\n </Tappable>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = withAdaptivity(SimpleCellComponent, { sizeY: true });\n\nSimpleCell.displayName = \"SimpleCell\";\n"],"file":"SimpleCell.js"}
|
|
@@ -31,8 +31,12 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement>, HasPla
|
|
|
31
31
|
* Обработчик закрытия уведомления
|
|
32
32
|
*/
|
|
33
33
|
onClose: () => void;
|
|
34
|
+
/**
|
|
35
|
+
* Задает стиль снекбара
|
|
36
|
+
*/
|
|
37
|
+
mode?: "default" | "dark";
|
|
34
38
|
}
|
|
35
39
|
/**
|
|
36
40
|
* @see https://vkcom.github.io/VKUI/#/Snackbar
|
|
37
41
|
*/
|
|
38
|
-
export declare const Snackbar: React.
|
|
42
|
+
export declare const Snackbar: React.FC<Pick<SnackbarProps & AdaptivityContextInterface, "platform" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "layout" | "after" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "action" | "duration" | "onClose" | "before" | "onActionClick"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["children", "layout", "action", "before", "after", "viewWidth", "duration", "onActionClick", "onClose"];
|
|
4
|
+
var _excluded = ["children", "layout", "action", "before", "after", "viewWidth", "duration", "onActionClick", "onClose", "mode"];
|
|
5
5
|
import { createScopedElement } from "../../lib/jsxRuntime";
|
|
6
6
|
import * as React from "react";
|
|
7
7
|
import { Touch } from "../Touch/Touch";
|
|
8
8
|
import { classNames } from "../../lib/classNames";
|
|
9
|
-
import {
|
|
10
|
-
import { ANDROID, VKCOM } from "../../lib/platform";
|
|
9
|
+
import { ANDROID, IOS, VKCOM } from "../../lib/platform";
|
|
11
10
|
import { rubber } from "../../lib/touch";
|
|
12
11
|
import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
|
|
13
|
-
import {
|
|
12
|
+
import { Paragraph } from "../Typography/Paragraph/Paragraph";
|
|
14
13
|
import { Button } from "../Button/Button";
|
|
15
14
|
import { AppRootPortal } from "../AppRoot/AppRootPortal";
|
|
16
15
|
import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
|
|
@@ -29,6 +28,8 @@ var SnackbarComponent = function SnackbarComponent(_ref) {
|
|
|
29
28
|
duration = _ref$duration === void 0 ? 4000 : _ref$duration,
|
|
30
29
|
onActionClick = _ref.onActionClick,
|
|
31
30
|
onClose = _ref.onClose,
|
|
31
|
+
_ref$mode = _ref.mode,
|
|
32
|
+
mode = _ref$mode === void 0 ? "default" : _ref$mode,
|
|
32
33
|
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
33
34
|
|
|
34
35
|
var platform = usePlatform();
|
|
@@ -140,12 +141,7 @@ var SnackbarComponent = function SnackbarComponent(_ref) {
|
|
|
140
141
|
}, [closeTimeout]);
|
|
141
142
|
var resolvedLayout = after || isDesktop ? "vertical" : layout;
|
|
142
143
|
return createScopedElement(AppRootPortal, null, createScopedElement("div", _extends({}, restProps, {
|
|
143
|
-
|
|
144
|
-
vkuiClass: classNames(getClassName("Snackbar", platform), "Snackbar--l-".concat(resolvedLayout), {
|
|
145
|
-
"Snackbar--closing": closing,
|
|
146
|
-
"Snackbar--touched": touched,
|
|
147
|
-
"Snackbar--desktop": isDesktop
|
|
148
|
-
})
|
|
144
|
+
vkuiClass: classNames("Snackbar", platform === IOS && "Snackbar--ios", "Snackbar--l-".concat(resolvedLayout), "Snackbar--".concat(mode), closing && "Snackbar--closing", touched && "Snackbar--touched", isDesktop && "Snackbar--desktop")
|
|
149
145
|
}), createScopedElement(Touch, {
|
|
150
146
|
vkuiClass: "Snackbar__in",
|
|
151
147
|
getRootRef: innerElRef,
|
|
@@ -159,12 +155,13 @@ var SnackbarComponent = function SnackbarComponent(_ref) {
|
|
|
159
155
|
vkuiClass: "Snackbar__before"
|
|
160
156
|
}, before), createScopedElement("div", {
|
|
161
157
|
vkuiClass: "Snackbar__content"
|
|
162
|
-
}, createScopedElement(
|
|
158
|
+
}, createScopedElement(Paragraph, {
|
|
163
159
|
vkuiClass: "Snackbar__content-text"
|
|
164
160
|
}, children), action && createScopedElement(Button, {
|
|
165
161
|
align: "left",
|
|
166
162
|
hasHover: false,
|
|
167
163
|
mode: "tertiary",
|
|
164
|
+
appearance: mode === "dark" ? "overlay" : "accent",
|
|
168
165
|
size: "s",
|
|
169
166
|
vkuiClass: "Snackbar__action",
|
|
170
167
|
onClick: handleActionClick
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":["React","Touch","classNames","getClassName","ANDROID","VKCOM","rubber","withAdaptivity","ViewWidth","Text","Button","AppRootPortal","useWaitTransitionFinish","usePlatform","useTimeout","SnackbarComponent","children","layout","action","before","after","viewWidth","duration","onActionClick","onClose","restProps","platform","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","isDesktop","SMALL_TABLET","transitionFinishDurationFallback","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","resolvedLayout","displayName","Snackbar"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasPlatform } from \"../../types\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { rubber } from \"../../lib/touch\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Button } from \"../Button/Button\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n AdaptivityContextInterface,\n AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Snackbar.css\";\n\nexport interface SnackbarProps\n extends React.HTMLAttributes<HTMLElement>,\n HasPlatform,\n AdaptivityProps {\n /**\n * Название кнопки действия в уведомлении\n */\n action?: React.ReactNode;\n\n /**\n * Будет вызвано при клике на кнопку действия\n */\n onActionClick?: (e: React.MouseEvent) => void;\n\n /**\n * Цветная иконка 24x24 пикселя\n */\n before?: React.ReactNode;\n /**\n * Контент в правой части, может быть `<Avatar size={32} />`\n */\n after?: React.ReactNode;\n /**\n * Варианты расположения кнопки\n */\n layout?: \"vertical\" | \"horizontal\";\n /**\n * Время в миллисекундах, через которое плашка скроется\n */\n duration?: number;\n /**\n * Обработчик закрытия уведомления\n */\n onClose: () => void;\n}\n\nconst SnackbarComponent = ({\n children,\n layout = \"horizontal\",\n action,\n before,\n after,\n viewWidth,\n duration = 4000,\n onActionClick,\n onClose,\n ...restProps\n}: SnackbarProps & AdaptivityContextInterface) => {\n const platform = usePlatform();\n\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const [touched, setTouched] = React.useState(false);\n\n const shiftXPercentRef = React.useRef<number>(0);\n const shiftXCurrentRef = React.useRef<number>(0);\n\n const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n const animationFrameRef = React.useRef<ReturnType<\n typeof requestAnimationFrame\n > | null>(null);\n\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n const transitionFinishDurationFallback =\n platform === ANDROID || platform === VKCOM ? 400 : 320;\n\n const close = () => {\n setClosing(true);\n waitTransitionFinish(\n innerElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback\n );\n };\n\n const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n close();\n\n if (action && typeof onActionClick === \"function\") {\n onActionClick(e);\n }\n };\n\n const closeTimeout = useTimeout(close, duration);\n\n const setBodyTransform = (percent: number) => {\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (bodyElRef.current) {\n bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n }\n });\n };\n\n const onTouchStart = closeTimeout.clear;\n\n const onTouchMoveX = (event: TouchEvent) => {\n const { shiftX, originalEvent } = event;\n originalEvent.preventDefault();\n\n if (!touched) {\n setTouched(true);\n }\n\n shiftXPercentRef.current =\n (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n shiftXCurrentRef.current = rubber(\n shiftXPercentRef.current,\n 72,\n 1.2,\n platform === ANDROID || platform === VKCOM\n );\n\n setBodyTransform(shiftXCurrentRef.current);\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n let callback: VoidFunction | undefined;\n\n if (touched) {\n let shiftXCurrent = shiftXCurrentRef.current;\n const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n if (isDesktop && shiftXCurrent <= -50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback\n );\n setBodyTransform(-120);\n } else if (!isDesktop && shiftXCurrent >= 50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback\n );\n setBodyTransform(120);\n } else {\n callback = () => {\n closeTimeout.set();\n setBodyTransform(0);\n };\n }\n } else {\n closeTimeout.set();\n }\n\n setTouched(false);\n callback && requestAnimationFrame(callback);\n };\n\n React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n const resolvedLayout = after || isDesktop ? \"vertical\" : layout;\n\n return (\n <AppRootPortal>\n <div\n {...restProps}\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\n getClassName(\"Snackbar\", platform),\n `Snackbar--l-${resolvedLayout}`,\n {\n \"Snackbar--closing\": closing,\n \"Snackbar--touched\": touched,\n \"Snackbar--desktop\": isDesktop,\n }\n )}\n >\n <Touch\n vkuiClass=\"Snackbar__in\"\n getRootRef={innerElRef}\n onStart={onTouchStart}\n onMoveX={onTouchMoveX}\n onEnd={onTouchEnd}\n >\n <div vkuiClass=\"Snackbar__body\" ref={bodyElRef}>\n {before && <div vkuiClass=\"Snackbar__before\">{before}</div>}\n\n <div vkuiClass=\"Snackbar__content\">\n <Text vkuiClass=\"Snackbar__content-text\">{children}</Text>\n\n {action && (\n <Button\n align=\"left\"\n hasHover={false}\n mode=\"tertiary\"\n size=\"s\"\n vkuiClass=\"Snackbar__action\"\n onClick={handleActionClick}\n >\n {action}\n </Button>\n )}\n </div>\n\n {after && <div vkuiClass=\"Snackbar__after\">{after}</div>}\n </div>\n </Touch>\n </div>\n </AppRootPortal>\n );\n};\n\nSnackbarComponent.displayName = \"Snackbar\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = withAdaptivity(SnackbarComponent, {\n viewWidth: true,\n});\n"],"file":"Snackbar.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":["React","Touch","classNames","ANDROID","IOS","VKCOM","rubber","withAdaptivity","ViewWidth","Paragraph","Button","AppRootPortal","useWaitTransitionFinish","usePlatform","useTimeout","SnackbarComponent","children","layout","action","before","after","viewWidth","duration","onActionClick","onClose","mode","restProps","platform","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","isDesktop","SMALL_TABLET","transitionFinishDurationFallback","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","resolvedLayout","displayName","Snackbar"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasPlatform } from \"../../types\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { rubber } from \"../../lib/touch\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Button } from \"../Button/Button\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n AdaptivityContextInterface,\n AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./Snackbar.css\";\n\nexport interface SnackbarProps\n extends React.HTMLAttributes<HTMLElement>,\n HasPlatform,\n AdaptivityProps {\n /**\n * Название кнопки действия в уведомлении\n */\n action?: React.ReactNode;\n\n /**\n * Будет вызвано при клике на кнопку действия\n */\n onActionClick?: (e: React.MouseEvent) => void;\n\n /**\n * Цветная иконка 24x24 пикселя\n */\n before?: React.ReactNode;\n /**\n * Контент в правой части, может быть `<Avatar size={32} />`\n */\n after?: React.ReactNode;\n /**\n * Варианты расположения кнопки\n */\n layout?: \"vertical\" | \"horizontal\";\n /**\n * Время в миллисекундах, через которое плашка скроется\n */\n duration?: number;\n /**\n * Обработчик закрытия уведомления\n */\n onClose: () => void;\n /**\n * Задает стиль снекбара\n */\n mode?: \"default\" | \"dark\";\n}\n\nconst SnackbarComponent = ({\n children,\n layout = \"horizontal\",\n action,\n before,\n after,\n viewWidth,\n duration = 4000,\n onActionClick,\n onClose,\n mode = \"default\",\n ...restProps\n}: SnackbarProps & AdaptivityContextInterface) => {\n const platform = usePlatform();\n\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const [touched, setTouched] = React.useState(false);\n\n const shiftXPercentRef = React.useRef<number>(0);\n const shiftXCurrentRef = React.useRef<number>(0);\n\n const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n const animationFrameRef = React.useRef<ReturnType<\n typeof requestAnimationFrame\n > | null>(null);\n\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n const transitionFinishDurationFallback =\n platform === ANDROID || platform === VKCOM ? 400 : 320;\n\n const close = () => {\n setClosing(true);\n waitTransitionFinish(\n innerElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback\n );\n };\n\n const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n close();\n\n if (action && typeof onActionClick === \"function\") {\n onActionClick(e);\n }\n };\n\n const closeTimeout = useTimeout(close, duration);\n\n const setBodyTransform = (percent: number) => {\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (bodyElRef.current) {\n bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n }\n });\n };\n\n const onTouchStart = closeTimeout.clear;\n\n const onTouchMoveX = (event: TouchEvent) => {\n const { shiftX, originalEvent } = event;\n originalEvent.preventDefault();\n\n if (!touched) {\n setTouched(true);\n }\n\n shiftXPercentRef.current =\n (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n shiftXCurrentRef.current = rubber(\n shiftXPercentRef.current,\n 72,\n 1.2,\n platform === ANDROID || platform === VKCOM\n );\n\n setBodyTransform(shiftXCurrentRef.current);\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n let callback: VoidFunction | undefined;\n\n if (touched) {\n let shiftXCurrent = shiftXCurrentRef.current;\n const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n if (isDesktop && shiftXCurrent <= -50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback\n );\n setBodyTransform(-120);\n } else if (!isDesktop && shiftXCurrent >= 50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback\n );\n setBodyTransform(120);\n } else {\n callback = () => {\n closeTimeout.set();\n setBodyTransform(0);\n };\n }\n } else {\n closeTimeout.set();\n }\n\n setTouched(false);\n callback && requestAnimationFrame(callback);\n };\n\n React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n const resolvedLayout = after || isDesktop ? \"vertical\" : layout;\n\n return (\n <AppRootPortal>\n <div\n {...restProps}\n vkuiClass={classNames(\n \"Snackbar\",\n platform === IOS && \"Snackbar--ios\",\n `Snackbar--l-${resolvedLayout}`,\n `Snackbar--${mode}`,\n closing && \"Snackbar--closing\",\n touched && \"Snackbar--touched\",\n isDesktop && \"Snackbar--desktop\"\n )}\n >\n <Touch\n vkuiClass=\"Snackbar__in\"\n getRootRef={innerElRef}\n onStart={onTouchStart}\n onMoveX={onTouchMoveX}\n onEnd={onTouchEnd}\n >\n <div vkuiClass=\"Snackbar__body\" ref={bodyElRef}>\n {before && <div vkuiClass=\"Snackbar__before\">{before}</div>}\n\n <div vkuiClass=\"Snackbar__content\">\n <Paragraph vkuiClass=\"Snackbar__content-text\">\n {children}\n </Paragraph>\n\n {action && (\n <Button\n align=\"left\"\n hasHover={false}\n mode=\"tertiary\"\n appearance={mode === \"dark\" ? \"overlay\" : \"accent\"}\n size=\"s\"\n vkuiClass=\"Snackbar__action\"\n onClick={handleActionClick}\n >\n {action}\n </Button>\n )}\n </div>\n\n {after && <div vkuiClass=\"Snackbar__after\">{after}</div>}\n </div>\n </Touch>\n </div>\n </AppRootPortal>\n );\n};\n\nSnackbarComponent.displayName = \"Snackbar\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = withAdaptivity(SnackbarComponent, {\n viewWidth: true,\n});\n"],"file":"Snackbar.js"}
|
|
@@ -5,6 +5,7 @@ export interface SplitColContextProps {
|
|
|
5
5
|
animate: boolean;
|
|
6
6
|
}
|
|
7
7
|
export declare const SplitColContext: React.Context<SplitColContextProps>;
|
|
8
|
+
export declare const useSplitCol: () => SplitColContextProps;
|
|
8
9
|
export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
9
10
|
width?: number | string;
|
|
10
11
|
maxWidth?: number | string;
|
|
@@ -11,6 +11,9 @@ export var SplitColContext = /*#__PURE__*/React.createContext({
|
|
|
11
11
|
colRef: null,
|
|
12
12
|
animate: true
|
|
13
13
|
});
|
|
14
|
+
export var useSplitCol = function useSplitCol() {
|
|
15
|
+
return React.useContext(SplitColContext);
|
|
16
|
+
};
|
|
14
17
|
|
|
15
18
|
/**
|
|
16
19
|
* @see https://vkcom.github.io/VKUI/#/SplitCol
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"names":["React","useScrollLockEffect","classNames","noop","SplitColContext","createContext","colRef","animate","SplitCol","children","width","maxWidth","minWidth","spaced","fixed","style","restProps","baseRef","useRef","fixedInnerRef","contextValue","useMemo","fixedInner","current","top","offsetTop"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,mBAAT;AACA,SAASC,UAAT;AACA,SAASC,IAAT;AAQA,OAAO,IAAMC,eAAe,gBAAGJ,KAAK,CAACK,aAAN,CAA0C;AACvEC,EAAAA,MAAM,EAAE,IAD+D;AAEvEC,EAAAA,OAAO,EAAE;AAF8D,CAA1C,CAAxB;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitCol/SplitCol.tsx"],"names":["React","useScrollLockEffect","classNames","noop","SplitColContext","createContext","colRef","animate","useSplitCol","useContext","SplitCol","children","width","maxWidth","minWidth","spaced","fixed","style","restProps","baseRef","useRef","fixedInnerRef","contextValue","useMemo","fixedInner","current","top","offsetTop"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,mBAAT;AACA,SAASC,UAAT;AACA,SAASC,IAAT;AAQA,OAAO,IAAMC,eAAe,gBAAGJ,KAAK,CAACK,aAAN,CAA0C;AACvEC,EAAAA,MAAM,EAAE,IAD+D;AAEvEC,EAAAA,OAAO,EAAE;AAF8D,CAA1C,CAAxB;AAKP,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc;AAAA,SAAMR,KAAK,CAACS,UAAN,CAAiBL,eAAjB,CAAN;AAAA,CAApB;;AAiBP;AACA;AACA;AACA,OAAO,IAAMM,QAAQ,GAAG,SAAXA,QAAW,OAUH;AAAA,MATnBC,QASmB,QATnBA,QASmB;AAAA,MARnBC,KAQmB,QARnBA,KAQmB;AAAA,MAPnBC,QAOmB,QAPnBA,QAOmB;AAAA,MANnBC,QAMmB,QANnBA,QAMmB;AAAA,MALnBC,MAKmB,QALnBA,MAKmB;AAAA,0BAJnBR,OAImB;AAAA,MAJnBA,OAImB,6BAJT,KAIS;AAAA,MAHnBS,KAGmB,QAHnBA,KAGmB;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;;AACnB,MAAMC,OAAO,GAAGnB,KAAK,CAACoB,MAAN,CAA6B,IAA7B,CAAhB;AAEA,MAAMC,aAAa,GAAGrB,KAAK,CAACoB,MAAN,CAA6B,IAA7B,CAAtB;AAEA,MAAME,YAAY,GAAGtB,KAAK,CAACuB,OAAN,CAAc,YAAM;AACvC,WAAO;AACLjB,MAAAA,MAAM,EAAEa,OADH;AAELZ,MAAAA,OAAO,EAAPA;AAFK,KAAP;AAID,GALoB,EAKlB,CAACY,OAAD,EAAUZ,OAAV,CALkB,CAArB;AAOAN,EAAAA,mBAAmB,CAAC,YAAM;AACxB,QAAMuB,UAAU,GAAGH,aAAa,CAACI,OAAjC;;AACA,QAAI,CAACD,UAAL,EAAiB;AACf,aAAOrB,IAAP;AACD;;AAEDqB,IAAAA,UAAU,CAACP,KAAX,CAAiBS,GAAjB,aAA0BF,UAAU,CAACG,SAArC;AAEA,WAAO,YAAM;AACXH,MAAAA,UAAU,CAACP,KAAX,CAAiBS,GAAjB,GAAuB,EAAvB;AACD,KAFD;AAGD,GAXkB,EAWhB,CAACL,aAAa,CAACI,OAAf,CAXgB,CAAnB;AAaA,SACE,wCACMP,SADN;AAEE,IAAA,KAAK,kCACAD,KADA;AAEHL,MAAAA,KAAK,EAAEA,KAFJ;AAGHC,MAAAA,QAAQ,EAAEA,QAHP;AAIHC,MAAAA,QAAQ,EAAEA;AAJP,MAFP;AAQE,IAAA,GAAG,EAAEK,OARP;AASE,IAAA,SAAS,EAAEjB,UAAU,CACnB,UADmB,EAEnBa,MAAM,IAAI,kBAFS,EAGnBC,KAAK,IAAI,iBAHU;AATvB,MAeE,oBAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAEM;AAAjC,KACGN,KAAK,GACJ;AAAK,IAAA,GAAG,EAAEK,aAAV;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGV,QADH,CADI,GAKJA,QANJ,CAfF,CADF;AA2BD,CA9DM","sourcesContent":["import * as React from \"react\";\nimport { useScrollLockEffect } from \"../AppRoot/ScrollContext\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport \"./SplitCol.css\";\n\nexport interface SplitColContextProps {\n colRef: React.RefObject<HTMLDivElement> | null;\n animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n colRef: null,\n animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n width?: number | string;\n maxWidth?: number | string;\n minWidth?: number | string;\n /**\n * Если false, то переходы между Panel происходят без анимации\n */\n animate?: boolean;\n /**\n * Если true, то добавляются боковые отступы фиксированной величины\n */\n spaced?: boolean;\n fixed?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = ({\n children,\n width,\n maxWidth,\n minWidth,\n spaced,\n animate = false,\n fixed,\n style,\n ...restProps\n}: SplitColProps) => {\n const baseRef = React.useRef<HTMLDivElement>(null);\n\n const fixedInnerRef = React.useRef<HTMLDivElement>(null);\n\n const contextValue = React.useMemo(() => {\n return {\n colRef: baseRef,\n animate,\n };\n }, [baseRef, animate]);\n\n useScrollLockEffect(() => {\n const fixedInner = fixedInnerRef.current;\n if (!fixedInner) {\n return noop;\n }\n\n fixedInner.style.top = `${fixedInner.offsetTop}px`;\n\n return () => {\n fixedInner.style.top = \"\";\n };\n }, [fixedInnerRef.current]);\n\n return (\n <div\n {...restProps}\n style={{\n ...style,\n width: width,\n maxWidth: maxWidth,\n minWidth: minWidth,\n }}\n ref={baseRef}\n vkuiClass={classNames(\n \"SplitCol\",\n spaced && \"SplitCol--spaced\",\n fixed && \"SplitCol--fixed\"\n )}\n >\n <SplitColContext.Provider value={contextValue}>\n {fixed ? (\n <div ref={fixedInnerRef} vkuiClass=\"SplitCol__fixedInner\">\n {children}\n </div>\n ) : (\n children\n )}\n </SplitColContext.Provider>\n </div>\n );\n};\n"],"file":"SplitCol.js"}
|
|
@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["popout", "modal", "header", "children", "getRootRef", "getRef"];
|
|
4
4
|
import { createScopedElement } from "../../lib/jsxRuntime";
|
|
5
|
-
import { getClassName } from "../../helpers/getClassName";
|
|
6
5
|
import { classNames } from "../../lib/classNames";
|
|
6
|
+
import { IOS } from "../../lib/platform";
|
|
7
7
|
import { PopoutRoot } from "../PopoutRoot/PopoutRoot";
|
|
8
8
|
import { usePlatform } from "../../hooks/usePlatform";
|
|
9
9
|
|
|
@@ -21,16 +21,13 @@ export var SplitLayout = function SplitLayout(_ref) {
|
|
|
21
21
|
|
|
22
22
|
var platform = usePlatform();
|
|
23
23
|
return createScopedElement(PopoutRoot, {
|
|
24
|
-
vkuiClass:
|
|
24
|
+
vkuiClass: classNames("SplitLayout", platform === IOS && "SplitLayout--ios"),
|
|
25
25
|
popout: popout,
|
|
26
26
|
modal: modal,
|
|
27
27
|
getRootRef: getRootRef
|
|
28
28
|
}, header, createScopedElement("div", _extends({}, restProps, {
|
|
29
|
-
ref: getRef
|
|
30
|
-
,
|
|
31
|
-
vkuiClass: classNames("SplitLayout__inner", {
|
|
32
|
-
"SplitLayout__inner--header": !!header
|
|
33
|
-
})
|
|
29
|
+
ref: getRef,
|
|
30
|
+
vkuiClass: classNames("SplitLayout__inner", !!header && "SplitLayout__inner--header")
|
|
34
31
|
}), children));
|
|
35
32
|
};
|
|
36
33
|
//# sourceMappingURL=SplitLayout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitLayout/SplitLayout.tsx"],"names":["classNames","IOS","PopoutRoot","usePlatform","SplitLayout","popout","modal","header","children","getRootRef","getRef","restProps","platform"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,GAAT;AAEA,SAASC,UAAT;AACA,SAASC,WAAT;;AAkBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAQH;AAAA,MAPtBC,MAOsB,QAPtBA,MAOsB;AAAA,MANtBC,KAMsB,QANtBA,KAMsB;AAAA,MALtBC,MAKsB,QALtBA,MAKsB;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,UAGsB,QAHtBA,UAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,SACmB;;AACtB,MAAMC,QAAQ,GAAGT,WAAW,EAA5B;AAEA,SACE,oBAAC,UAAD;AACE,IAAA,SAAS,EAAEH,UAAU,CACnB,aADmB,EAEnBY,QAAQ,KAAKX,GAAb,IAAoB,kBAFD,CADvB;AAKE,IAAA,MAAM,EAAEI,MALV;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,UAAU,EAAEG;AAPd,KASGF,MATH,EAUE,wCACMI,SADN;AAEE,IAAA,GAAG,EAAED,MAFP;AAGE,IAAA,SAAS,EAAEV,UAAU,CACnB,oBADmB,EAEnB,CAAC,CAACO,MAAF,IAAY,4BAFO;AAHvB,MAQGC,QARH,CAVF,CADF;AAuBD,CAlCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitLayoutProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /**\n * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n */\n popout?: React.ReactNode;\n /**\n * Свойство для отрисовки `ModalRoot`.\n */\n modal?: React.ReactNode;\n header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n popout,\n modal,\n header,\n children,\n getRootRef,\n getRef,\n ...restProps\n}: SplitLayoutProps) => {\n const platform = usePlatform();\n\n return (\n <PopoutRoot\n vkuiClass={classNames(\n \"SplitLayout\",\n platform === IOS && \"SplitLayout--ios\"\n )}\n popout={popout}\n modal={modal}\n getRootRef={getRootRef}\n >\n {header}\n <div\n {...restProps}\n ref={getRef}\n vkuiClass={classNames(\n \"SplitLayout__inner\",\n !!header && \"SplitLayout__inner--header\"\n )}\n >\n {children}\n </div>\n </PopoutRoot>\n );\n};\n"],"file":"SplitLayout.js"}
|
|
@@ -5,9 +5,16 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
5
5
|
* Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
|
|
6
6
|
*/
|
|
7
7
|
shadow?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated будет удалено в 5.0.0. Используйте `mode`
|
|
10
|
+
*/
|
|
8
11
|
itemsLayout?: "vertical" | "horizontal" | "auto";
|
|
12
|
+
/**
|
|
13
|
+
* Задает расположение элементов (вертикальное/горизонтальное)
|
|
14
|
+
*/
|
|
15
|
+
mode?: "vertical" | "horizontal" | "auto";
|
|
9
16
|
}
|
|
10
17
|
/**
|
|
11
18
|
* @see https://vkcom.github.io/VKUI/#/Tabbar
|
|
12
19
|
*/
|
|
13
|
-
export declare const Tabbar: ({ children, shadow, itemsLayout, ...restProps }: TabbarProps) => JSX.Element;
|
|
20
|
+
export declare const Tabbar: ({ children, shadow, itemsLayout, mode, ...restProps }: TabbarProps) => JSX.Element;
|
|
@@ -1,37 +1,38 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children", "shadow", "itemsLayout"];
|
|
3
|
+
var _excluded = ["children", "shadow", "itemsLayout", "mode"];
|
|
4
4
|
import { createScopedElement } from "../../lib/jsxRuntime";
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
import { classNames } from "../../lib/classNames";
|
|
7
7
|
import { usePlatform } from "../../hooks/usePlatform";
|
|
8
8
|
import { Platform } from "../../lib/platform";
|
|
9
9
|
|
|
10
|
+
var getItemsLayout = function getItemsLayout(itemsLayout, children) {
|
|
11
|
+
switch (itemsLayout) {
|
|
12
|
+
case "horizontal":
|
|
13
|
+
case "vertical":
|
|
14
|
+
return itemsLayout;
|
|
15
|
+
|
|
16
|
+
default:
|
|
17
|
+
return React.Children.count(children) > 2 ? "vertical" : "horizontal";
|
|
18
|
+
}
|
|
19
|
+
};
|
|
10
20
|
/**
|
|
11
21
|
* @see https://vkcom.github.io/VKUI/#/Tabbar
|
|
12
22
|
*/
|
|
23
|
+
|
|
24
|
+
|
|
13
25
|
export var Tabbar = function Tabbar(_ref) {
|
|
14
26
|
var children = _ref.children,
|
|
15
27
|
_ref$shadow = _ref.shadow,
|
|
16
28
|
shadow = _ref$shadow === void 0 ? true : _ref$shadow,
|
|
17
29
|
itemsLayout = _ref.itemsLayout,
|
|
30
|
+
mode = _ref.mode,
|
|
18
31
|
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
19
32
|
|
|
20
33
|
var platform = usePlatform();
|
|
21
|
-
|
|
22
|
-
var getItemsLayout = function getItemsLayout() {
|
|
23
|
-
switch (itemsLayout) {
|
|
24
|
-
case "horizontal":
|
|
25
|
-
case "vertical":
|
|
26
|
-
return itemsLayout;
|
|
27
|
-
|
|
28
|
-
default:
|
|
29
|
-
return React.Children.count(children) > 2 ? "vertical" : "horizontal";
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
|
|
33
34
|
return createScopedElement("div", _extends({
|
|
34
|
-
vkuiClass: classNames("Tabbar", platform === Platform.IOS && "Tabbar--ios", "Tabbar--l-".concat(getItemsLayout()), shadow && "Tabbar--shadow")
|
|
35
|
+
vkuiClass: classNames("Tabbar", platform === Platform.IOS && "Tabbar--ios", "Tabbar--l-".concat(getItemsLayout(itemsLayout !== null && itemsLayout !== void 0 ? itemsLayout : mode, children)), shadow && "Tabbar--shadow")
|
|
35
36
|
}, restProps), createScopedElement("div", {
|
|
36
37
|
vkuiClass: "Tabbar__in"
|
|
37
38
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"names":["React","classNames","usePlatform","Platform","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"names":["React","classNames","usePlatform","Platform","getItemsLayout","itemsLayout","children","Children","count","Tabbar","shadow","mode","restProps","platform","IOS"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,QAAT;;AAkBA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CACrBC,WADqB,EAErBC,QAFqB,EAGlB;AACH,UAAQD,WAAR;AACE,SAAK,YAAL;AACA,SAAK,UAAL;AACE,aAAOA,WAAP;;AACF;AACE,aAAOL,KAAK,CAACO,QAAN,CAAeC,KAAf,CAAqBF,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,CAXD;AAaA;AACA;AACA;;;AACA,OAAO,IAAMG,MAAM,GAAG,SAATA,MAAS,OAMH;AAAA,MALjBH,QAKiB,QALjBA,QAKiB;AAAA,yBAJjBI,MAIiB;AAAA,MAJjBA,MAIiB,4BAJR,IAIQ;AAAA,MAHjBL,WAGiB,QAHjBA,WAGiB;AAAA,MAFjBM,IAEiB,QAFjBA,IAEiB;AAAA,MADdC,SACc;;AACjB,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;AAEA,SACE;AACE,IAAA,SAAS,EAAED,UAAU,CACnB,QADmB,EAEnBY,QAAQ,KAAKV,QAAQ,CAACW,GAAtB,IAA6B,aAFV,sBAGNV,cAAc,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBM,IAAhB,EAAsBL,QAAtB,CAHR,GAInBI,MAAM,IAAI,gBAJS;AADvB,KAOME,SAPN,GASE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6BN,QAA7B,CATF,CADF;AAaD,CAtBM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport \"./Tabbar.css\";\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n */\n shadow?: boolean;\n /**\n * @deprecated будет удалено в 5.0.0. Используйте `mode`\n */\n itemsLayout?: \"vertical\" | \"horizontal\" | \"auto\"; // TODO v5.0.0 удалить, будет использоваться mode\n /**\n * Задает расположение элементов (вертикальное/горизонтальное)\n */\n mode?: \"vertical\" | \"horizontal\" | \"auto\";\n}\n\nconst getItemsLayout = (\n itemsLayout: TabbarProps[\"mode\"],\n children: TabbarProps[\"children\"]\n) => {\n switch (itemsLayout) {\n case \"horizontal\":\n case \"vertical\":\n return itemsLayout;\n default:\n return React.Children.count(children) > 2 ? \"vertical\" : \"horizontal\";\n }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({\n children,\n shadow = true,\n itemsLayout,\n mode,\n ...restProps\n}: TabbarProps) => {\n const platform = usePlatform();\n\n return (\n <div\n vkuiClass={classNames(\n \"Tabbar\",\n platform === Platform.IOS && \"Tabbar--ios\",\n `Tabbar--l-${getItemsLayout(itemsLayout ?? mode, children)}`,\n shadow && \"Tabbar--shadow\"\n )}\n {...restProps}\n >\n <div vkuiClass=\"Tabbar__in\">{children}</div>\n </div>\n );\n};\n"],"file":"Tabbar.js"}
|
|
@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["children", "selected", "label", "indicator", "text", "href", "Component", "disabled"];
|
|
4
4
|
import { createScopedElement } from "../../lib/jsxRuntime";
|
|
5
|
-
import { getClassName } from "../../helpers/getClassName";
|
|
6
5
|
import { Counter } from "../Counter/Counter";
|
|
7
6
|
import { classNames } from "../../lib/classNames";
|
|
8
7
|
import { usePlatform } from "../../hooks/usePlatform";
|
|
9
8
|
import { hasReactNode } from "../../lib/utils";
|
|
10
9
|
import { Tappable } from "../Tappable/Tappable";
|
|
10
|
+
import { Footnote } from "../Typography/Footnote/Footnote";
|
|
11
11
|
import { Platform } from "../../lib/platform";
|
|
12
12
|
import { warnOnce } from "../../lib/warnOnce";
|
|
13
13
|
var warn = warnOnce("TabbarItem");
|
|
@@ -35,12 +35,8 @@ export var TabbarItem = function TabbarItem(_ref) {
|
|
|
35
35
|
|
|
36
36
|
return createScopedElement(Component, _extends({}, restProps, {
|
|
37
37
|
disabled: disabled,
|
|
38
|
-
href: href
|
|
39
|
-
,
|
|
40
|
-
vkuiClass: classNames(getClassName("TabbarItem", platform), {
|
|
41
|
-
"TabbarItem--selected": selected,
|
|
42
|
-
"TabbarItem--text": !!text
|
|
43
|
-
})
|
|
38
|
+
href: href,
|
|
39
|
+
vkuiClass: classNames("TabbarItem", platform === Platform.IOS && "TabbarItem--ios", platform === Platform.ANDROID && "TabbarItem--android", selected && "TabbarItem--selected", !!text && "TabbarItem--text")
|
|
44
40
|
}), createScopedElement(Tappable, {
|
|
45
41
|
role: "presentation",
|
|
46
42
|
Component: "div",
|
|
@@ -58,8 +54,10 @@ export var TabbarItem = function TabbarItem(_ref) {
|
|
|
58
54
|
}, hasReactNode(indicator) && indicator, !indicator && label && createScopedElement(Counter, {
|
|
59
55
|
size: "s",
|
|
60
56
|
mode: "prominent"
|
|
61
|
-
}, label))), text && createScopedElement(
|
|
62
|
-
|
|
57
|
+
}, label))), text && createScopedElement(Footnote, {
|
|
58
|
+
Component: "div",
|
|
59
|
+
vkuiClass: "TabbarItem__text",
|
|
60
|
+
weight: "2"
|
|
63
61
|
}, text)));
|
|
64
62
|
};
|
|
65
63
|
//# sourceMappingURL=TabbarItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["Counter","classNames","usePlatform","hasReactNode","Tappable","Footnote","Platform","warnOnce","warn","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","IOS","ANDROID"],"mappings":";;;;AACA,SAASA,OAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AACA,SAASC,QAAT;AAEA,SAASC,QAAT;AAsBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,YAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAa,OAUH;AAAA,MATrBC,QASqB,QATrBA,QASqB;AAAA,MARrBC,QAQqB,QARrBA,QAQqB;AAAA,MAPrBC,KAOqB,QAPrBA,KAOqB;AAAA,MANrBC,SAMqB,QANrBA,SAMqB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,4BAHrBC,SAGqB;AAAA,MAHrBA,SAGqB,+BAHTD,IAAI,GAAG,GAAH,GAAS,QAGJ;AAAA,MAFrBE,QAEqB,QAFrBA,QAEqB;AAAA,MADlBC,SACkB;;AACrB,MAAMC,QAAQ,GAAGjB,WAAW,EAA5B;;AAEA,MAAIU,KAAK,IAAIQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAtC,EAAqD;AACnDd,IAAAA,IAAI,CACF,yEADE,CAAJ;AAGD;;AAED,SACE,oBAAC,SAAD,eACMU,SADN;AAEE,IAAA,QAAQ,EAAED,QAFZ;AAGE,IAAA,IAAI,EAAEF,IAHR;AAIE,IAAA,SAAS,EAAEd,UAAU,CACnB,YADmB,EAEnBkB,QAAQ,KAAKb,QAAQ,CAACiB,GAAtB,IAA6B,iBAFV,EAGnBJ,QAAQ,KAAKb,QAAQ,CAACkB,OAAtB,IAAiC,qBAHd,EAInBb,QAAQ,IAAI,sBAJO,EAKnB,CAAC,CAACG,IAAF,IAAU,kBALS;AAJvB,MAYE,oBAAC,QAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,QAAQ,EAAEG,QAHZ;AAIE,IAAA,UAAU,EACRE,QAAQ,KAAKb,QAAQ,CAACiB,GAAtB,GACI,8BADJ,GAEI,YAPR;AASE,IAAA,iBAAiB,EAAEJ,QAAQ,KAAKb,QAAQ,CAACiB,GAAtB,GAA4B,CAA5B,GAAgC,GATrD;AAUE,IAAA,QAAQ,EAAE,KAVZ;AAWE,IAAA,SAAS,EAAC;AAXZ,IAZF,EAyBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGb,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGP,YAAY,CAACU,SAAD,CAAZ,IAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IACC,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,GAAd;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACGA,KADH,CAHJ,CAFF,CADF,EAYGE,IAAI,IACH,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAC,KAApB;AAA0B,IAAA,SAAS,EAAC,kBAApC;AAAuD,IAAA,MAAM,EAAC;AAA9D,KACGA,IADH,CAbJ,CAzBF,CADF;AA8CD,CAjEM","sourcesContent":["import * as React from \"react\";\nimport { Counter } from \"../Counter/Counter\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./TabbarItem.css\";\n\nexport interface TabbarItemProps\n extends Omit<React.AllHTMLAttributes<HTMLElement>, \"label\">, // TODO убрать Omit после удаления свойства label\n HasRootRef<HTMLElement>,\n HasComponent {\n selected?: boolean;\n /**\n * Текст рядом с иконкой\n */\n text?: React.ReactNode;\n /**\n * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n */\n indicator?: React.ReactNode;\n /**\n * @deprecated будет удалено в 5.0.0. Используйте `indicator`\n */\n label?: React.ReactNode;\n}\n\nconst warn = warnOnce(\"TabbarItem\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n children,\n selected,\n label,\n indicator,\n text,\n href,\n Component = href ? \"a\" : \"button\",\n disabled,\n ...restProps\n}: TabbarItemProps) => {\n const platform = usePlatform();\n\n if (label && process.env.NODE_ENV === \"development\") {\n warn(\n \"Свойство label устарело и будет удалено в 5.0.0. Используйте indicator.\"\n );\n }\n\n return (\n <Component\n {...restProps}\n disabled={disabled}\n href={href}\n vkuiClass={classNames(\n \"TabbarItem\",\n platform === Platform.IOS && \"TabbarItem--ios\",\n platform === Platform.ANDROID && \"TabbarItem--android\",\n selected && \"TabbarItem--selected\",\n !!text && \"TabbarItem--text\"\n )}\n >\n <Tappable\n role=\"presentation\"\n Component=\"div\"\n disabled={disabled}\n activeMode={\n platform === Platform.IOS\n ? \"TabbarItem__tappable--active\"\n : \"background\"\n }\n activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n hasHover={false}\n vkuiClass=\"TabbarItem__tappable\"\n />\n <div vkuiClass=\"TabbarItem__in\">\n <div vkuiClass=\"TabbarItem__icon\">\n {children}\n <div vkuiClass=\"TabbarItem__label\">\n {hasReactNode(indicator) && indicator}\n {!indicator && label && (\n <Counter size=\"s\" mode=\"prominent\">\n {label}\n </Counter>\n )}\n </div>\n </div>\n {text && (\n <Footnote Component=\"div\" vkuiClass=\"TabbarItem__text\" weight=\"2\">\n {text}\n </Footnote>\n )}\n </div>\n </Component>\n );\n};\n"],"file":"TabbarItem.js"}
|