@vkontakte/vkui 4.35.2 → 4.36.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.cache/.eslintcache +1 -1
- package/.cache/.stylelintcache +1 -1
- package/.cache/.tsbuildinfo +21609 -18312
- package/.cache/ts/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.d.ts +3 -0
- package/.cache/ts/src/components/ActionSheetItem/ActionSheetItem.d.ts +5 -1
- package/.cache/ts/src/components/AdaptivityProvider/AdaptivityProvider.d.ts +4 -4
- package/.cache/ts/src/components/ButtonGroup/ButtonGroup.d.ts +6 -2
- package/.cache/ts/src/components/Chip/Chip.d.ts +12 -5
- package/.cache/ts/src/components/ChipsInput/ChipsInput.d.ts +5 -26
- package/.cache/ts/src/components/ChipsInputBase/ChipsInputBase.d.ts +17 -0
- package/.cache/ts/src/components/ChipsSelect/ChipsSelect.d.ts +4 -4
- package/.cache/ts/src/components/CustomSelect/CustomSelect.d.ts +1 -1
- package/.cache/ts/src/components/DateInput/DateInput.d.ts +4 -2
- package/.cache/ts/src/components/DateRangeInput/DateRangeInput.d.ts +4 -2
- package/.cache/ts/src/components/DropdownIcon/DropdownIcon.d.ts +4 -2
- package/.cache/ts/src/components/FormField/FormField.d.ts +2 -1
- package/.cache/ts/src/components/FormLayoutGroup/FormLayoutGroup.d.ts +5 -1
- package/.cache/ts/src/components/FormStatus/FormStatus.d.ts +1 -0
- package/.cache/ts/src/components/Input/Input.d.ts +1 -1
- package/.cache/ts/src/components/List/List.d.ts +2 -1
- package/.cache/ts/src/components/ModalPage/ModalPage.d.ts +13 -1
- package/.cache/ts/src/components/NativeSelect/NativeSelect.d.ts +3 -2
- package/.cache/ts/src/components/Select/Select.d.ts +1 -1
- package/.cache/ts/src/components/SelectMimicry/SelectMimicry.d.ts +2 -2
- package/.cache/ts/src/components/Textarea/Textarea.d.ts +3 -2
- package/.cache/ts/src/{components/ChipsInput → hooks}/useChipsInput.d.ts +4 -3
- package/{dist/cssm/components/ChipsSelect → .cache/ts/src/hooks}/useChipsSelect.d.ts +4 -4
- package/.cache/ts/src/index.d.ts +3 -0
- package/.cache/ts/src/tokenized/index.d.ts +56 -0
- package/README.md +3 -2
- package/dist/cjs/components/ActionSheet/ActionSheet.js +4 -4
- package/dist/cjs/components/ActionSheet/ActionSheet.js.map +1 -1
- package/dist/cjs/components/ActionSheet/ActionSheetDefaultIosCloseItem.js +24 -0
- package/dist/cjs/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map +1 -0
- package/dist/cjs/components/ActionSheet/ActionSheetDropdown.js +10 -8
- package/dist/cjs/components/ActionSheet/ActionSheetDropdown.js.map +1 -1
- package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js +4 -5
- package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
- package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js +15 -39
- package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
- package/dist/cjs/components/AdaptivityProvider/AdaptivityProvider.js +2 -3
- package/dist/cjs/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
- package/dist/cjs/components/Alert/Alert.js +11 -12
- package/dist/cjs/components/Alert/Alert.js.map +1 -1
- package/dist/cjs/components/AppRoot/AppRoot.js +2 -5
- package/dist/cjs/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.js +4 -17
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Banner/Banner.js +41 -47
- package/dist/cjs/components/Banner/Banner.js.map +1 -1
- package/dist/cjs/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/cjs/components/CalendarDay/CalendarDay.js +4 -21
- package/dist/cjs/components/CalendarDay/CalendarDay.js.map +1 -1
- package/dist/cjs/components/CardScroll/CardScroll.js +2 -5
- package/dist/cjs/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/cjs/components/Chip/Chip.js.map +1 -1
- package/dist/cjs/components/ChipsInput/ChipsInput.js +15 -198
- package/dist/cjs/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js +215 -0
- package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js.map +1 -0
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js +44 -27
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js +32 -31
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/DateInput/DateInput.js +4 -2
- package/dist/cjs/components/DateInput/DateInput.js.map +1 -1
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js +4 -2
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cjs/components/DropdownIcon/DropdownIcon.js +16 -7
- package/dist/cjs/components/DropdownIcon/DropdownIcon.js.map +1 -1
- package/dist/cjs/components/FormField/FormField.js +4 -2
- package/dist/cjs/components/FormField/FormField.js.map +1 -1
- package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js +12 -3
- package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
- package/dist/cjs/components/FormStatus/FormStatus.js +4 -6
- package/dist/cjs/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/cjs/components/Header/Header.js +3 -11
- package/dist/cjs/components/Header/Header.js.map +1 -1
- package/dist/cjs/components/IconButton/IconButton.js +4 -3
- package/dist/cjs/components/IconButton/IconButton.js.map +1 -1
- package/dist/cjs/components/Input/Input.js +4 -2
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/List/List.js.map +1 -1
- package/dist/cjs/components/ModalDismissButton/ModalDismissButton.js +1 -6
- package/dist/cjs/components/ModalDismissButton/ModalDismissButton.js.map +1 -1
- package/dist/cjs/components/ModalPage/ModalPage.js +11 -10
- package/dist/cjs/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js +3 -4
- package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/cjs/components/ModalRoot/ModalRoot.js +4 -18
- package/dist/cjs/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/cjs/components/ModalRoot/ModalRootDesktop.js +3 -11
- package/dist/cjs/components/ModalRoot/ModalRootDesktop.js.map +1 -1
- package/dist/cjs/components/NativeSelect/NativeSelect.js +4 -2
- package/dist/cjs/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/cjs/components/Panel/Panel.js +4 -10
- package/dist/cjs/components/Panel/Panel.js.map +1 -1
- package/dist/cjs/components/PanelHeader/PanelHeader.js +2 -11
- package/dist/cjs/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.js +2 -7
- package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.js.map +1 -1
- package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js +2 -7
- package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.js +1 -1
- package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.js.map +1 -1
- package/dist/cjs/components/PanelHeaderContent/PanelHeaderContent.js +5 -4
- package/dist/cjs/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
- package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js +4 -8
- package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
- package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.js +1 -1
- package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.js.map +1 -1
- package/dist/cjs/components/PanelHeaderSubmit/PanelHeaderSubmit.js +1 -1
- package/dist/cjs/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map +1 -1
- package/dist/cjs/components/PromoBanner/PromoBanner.js +1 -6
- package/dist/cjs/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/cjs/components/Search/Search.js +7 -9
- package/dist/cjs/components/Search/Search.js.map +1 -1
- package/dist/cjs/components/SelectMimicry/SelectMimicry.js +4 -2
- package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/cjs/components/SliderSwitch/SliderSwitch.js +2 -5
- package/dist/cjs/components/SliderSwitch/SliderSwitch.js.map +1 -1
- package/dist/cjs/components/SliderSwitch/SliderSwitchButton.js +2 -7
- package/dist/cjs/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
- package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js +1 -6
- package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js.map +1 -1
- package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js +2 -5
- package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
- package/dist/cjs/components/Tappable/Tappable.js +8 -16
- package/dist/cjs/components/Tappable/Tappable.js.map +1 -1
- package/dist/cjs/components/Textarea/Textarea.js +4 -2
- package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
- package/dist/cjs/components/UsersStack/UsersStack.js +71 -34
- package/dist/cjs/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/cjs/components/View/View.js +2 -7
- package/dist/cjs/components/View/View.js.map +1 -1
- package/dist/cjs/components/View/ViewInfinite.js +1 -10
- package/dist/cjs/components/View/ViewInfinite.js.map +1 -1
- package/dist/cjs/{components/ChipsInput → hooks}/useChipsInput.js +0 -0
- package/dist/cjs/hooks/useChipsInput.js.map +1 -0
- package/dist/cjs/{components/ChipsSelect → hooks}/useChipsSelect.js +1 -1
- package/dist/cjs/hooks/useChipsSelect.js.map +1 -0
- package/dist/cjs/index.js +8 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/animate.js +2 -2
- package/dist/cjs/lib/animate.js.map +1 -1
- package/dist/cjs/lib/platform.js +9 -4
- package/dist/cjs/lib/platform.js.map +1 -1
- package/dist/cjs/lib/testing.js +2 -2
- package/dist/cjs/lib/testing.js.map +1 -1
- package/dist/cjs/lib/touch.js +2 -2
- package/dist/cjs/lib/touch.js.map +1 -1
- package/dist/cjs/tokenized/index.js +232 -0
- package/dist/cjs/tokenized/index.js.map +1 -1
- package/dist/components/ActionSheet/ActionSheet.js +4 -4
- package/dist/components/ActionSheet/ActionSheet.js.map +1 -1
- package/dist/components/ActionSheet/ActionSheetDefaultIosCloseItem.d.ts +3 -0
- package/dist/components/ActionSheet/ActionSheetDefaultIosCloseItem.js +10 -0
- package/dist/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map +1 -0
- package/dist/components/ActionSheet/ActionSheetDropdown.js +7 -7
- package/dist/components/ActionSheet/ActionSheetDropdown.js.map +1 -1
- package/dist/components/ActionSheet/ActionSheetDropdownDesktop.js +3 -4
- package/dist/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
- package/dist/components/ActionSheetItem/ActionSheetItem.d.ts +5 -1
- package/dist/components/ActionSheetItem/ActionSheetItem.js +16 -36
- package/dist/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
- package/dist/components/AdaptivityProvider/AdaptivityProvider.d.ts +4 -4
- package/dist/components/AdaptivityProvider/AdaptivityProvider.js +2 -4
- package/dist/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
- package/dist/components/Alert/Alert.js +12 -12
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/AppRoot/AppRoot.js +2 -5
- package/dist/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/components/Avatar/Avatar.js +4 -17
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Banner/Banner.js +41 -48
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.d.ts +6 -2
- package/dist/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/components/CalendarDay/CalendarDay.js +4 -21
- package/dist/components/CalendarDay/CalendarDay.js.map +1 -1
- package/dist/components/CardScroll/CardScroll.js +1 -3
- package/dist/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/components/Chip/Chip.d.ts +12 -5
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/ChipsInput/ChipsInput.d.ts +5 -26
- package/dist/components/ChipsInput/ChipsInput.js +14 -183
- package/dist/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/components/ChipsInputBase/ChipsInputBase.d.ts +17 -0
- package/dist/components/ChipsInputBase/ChipsInputBase.js +188 -0
- package/dist/components/ChipsInputBase/ChipsInputBase.js.map +1 -0
- package/dist/components/ChipsSelect/ChipsSelect.d.ts +4 -4
- package/dist/components/ChipsSelect/ChipsSelect.js +42 -26
- package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +32 -31
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/DateInput/DateInput.d.ts +4 -2
- package/dist/components/DateInput/DateInput.js +4 -2
- package/dist/components/DateInput/DateInput.js.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.d.ts +4 -2
- package/dist/components/DateRangeInput/DateRangeInput.js +4 -2
- package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/components/DropdownIcon/DropdownIcon.d.ts +4 -2
- package/dist/components/DropdownIcon/DropdownIcon.js +15 -7
- package/dist/components/DropdownIcon/DropdownIcon.js.map +1 -1
- package/dist/components/FormField/FormField.d.ts +2 -1
- package/dist/components/FormField/FormField.js +4 -2
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/FormLayoutGroup/FormLayoutGroup.d.ts +5 -1
- package/dist/components/FormLayoutGroup/FormLayoutGroup.js +9 -3
- package/dist/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
- package/dist/components/FormStatus/FormStatus.d.ts +1 -0
- package/dist/components/FormStatus/FormStatus.js +4 -4
- package/dist/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/components/Header/Header.js +3 -10
- package/dist/components/Header/Header.js.map +1 -1
- package/dist/components/IconButton/IconButton.js +4 -3
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +4 -2
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/List/List.d.ts +2 -1
- package/dist/components/List/List.js.map +1 -1
- package/dist/components/ModalDismissButton/ModalDismissButton.js +1 -4
- package/dist/components/ModalDismissButton/ModalDismissButton.js.map +1 -1
- package/dist/components/ModalPage/ModalPage.d.ts +13 -1
- package/dist/components/ModalPage/ModalPage.js +12 -10
- package/dist/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/components/ModalPageHeader/ModalPageHeader.js +3 -3
- package/dist/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/components/ModalRoot/ModalRoot.js +4 -18
- package/dist/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/components/ModalRoot/ModalRootDesktop.js +3 -11
- package/dist/components/ModalRoot/ModalRootDesktop.js.map +1 -1
- package/dist/components/NativeSelect/NativeSelect.d.ts +3 -2
- package/dist/components/NativeSelect/NativeSelect.js +4 -2
- package/dist/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/components/Panel/Panel.js +4 -8
- package/dist/components/Panel/Panel.js.map +1 -1
- package/dist/components/PanelHeader/PanelHeader.js +2 -11
- package/dist/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/components/PanelHeaderBack/PanelHeaderBack.js +2 -6
- package/dist/components/PanelHeaderBack/PanelHeaderBack.js.map +1 -1
- package/dist/components/PanelHeaderButton/PanelHeaderButton.js +2 -7
- package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/components/PanelHeaderClose/PanelHeaderClose.js +2 -2
- package/dist/components/PanelHeaderClose/PanelHeaderClose.js.map +1 -1
- package/dist/components/PanelHeaderContent/PanelHeaderContent.js +5 -5
- package/dist/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
- package/dist/components/PanelHeaderContext/PanelHeaderContext.js +3 -7
- package/dist/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
- package/dist/components/PanelHeaderEdit/PanelHeaderEdit.js +2 -2
- package/dist/components/PanelHeaderEdit/PanelHeaderEdit.js.map +1 -1
- package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js +2 -2
- package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map +1 -1
- package/dist/components/PromoBanner/PromoBanner.js +1 -4
- package/dist/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/components/Search/Search.js +6 -8
- package/dist/components/Search/Search.js.map +1 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/SelectMimicry/SelectMimicry.d.ts +2 -2
- package/dist/components/SelectMimicry/SelectMimicry.js +4 -2
- package/dist/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/dist/components/SliderSwitch/SliderSwitch.js +1 -4
- package/dist/components/SliderSwitch/SliderSwitch.js.map +1 -1
- package/dist/components/SliderSwitch/SliderSwitchButton.js +1 -5
- package/dist/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
- package/dist/components/SubnavigationBar/SubnavigationBar.js +1 -4
- package/dist/components/SubnavigationBar/SubnavigationBar.js.map +1 -1
- package/dist/components/SubnavigationButton/SubnavigationButton.js +2 -5
- package/dist/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
- package/dist/components/Tappable/Tappable.js +3 -10
- package/dist/components/Tappable/Tappable.js.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts +3 -2
- package/dist/components/Textarea/Textarea.js +4 -2
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/UsersStack/UsersStack.js +69 -28
- package/dist/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/components/View/View.js +2 -7
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/View/ViewInfinite.js +1 -10
- package/dist/components/View/ViewInfinite.js.map +1 -1
- package/dist/components.css +93 -15
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/ActionSheet/ActionSheet.css +3 -1
- package/dist/cssm/components/ActionSheet/ActionSheet.js +4 -4
- package/dist/cssm/components/ActionSheet/ActionSheet.js.map +1 -1
- package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.d.ts +3 -0
- package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.js +10 -0
- package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map +1 -0
- package/dist/cssm/components/ActionSheet/ActionSheetDropdown.js +7 -7
- package/dist/cssm/components/ActionSheet/ActionSheetDropdown.js.map +1 -1
- package/dist/cssm/components/ActionSheet/ActionSheetDropdownDesktop.js +3 -4
- package/dist/cssm/components/ActionSheet/ActionSheetDropdownDesktop.js.map +1 -1
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.css +7 -1
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.d.ts +5 -1
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js +16 -36
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
- package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.d.ts +4 -4
- package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.js +2 -4
- package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
- package/dist/cssm/components/Alert/Alert.css +7 -1
- package/dist/cssm/components/Alert/Alert.js +12 -12
- package/dist/cssm/components/Alert/Alert.js.map +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.css +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.js +2 -5
- package/dist/cssm/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/cssm/components/Avatar/Avatar.js +4 -17
- package/dist/cssm/components/Avatar/Avatar.js.map +1 -1
- package/dist/cssm/components/Banner/Banner.js +41 -48
- package/dist/cssm/components/Banner/Banner.js.map +1 -1
- package/dist/cssm/components/ButtonGroup/ButtonGroup.d.ts +6 -2
- package/dist/cssm/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.js +4 -21
- package/dist/cssm/components/CalendarDay/CalendarDay.js.map +1 -1
- package/dist/cssm/components/CardScroll/CardScroll.js +1 -3
- package/dist/cssm/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.css +1 -1
- package/dist/cssm/components/Cell/CellDragger/CellDragger.css +1 -1
- package/dist/cssm/components/Chip/Chip.css +1 -1
- package/dist/cssm/components/Chip/Chip.d.ts +12 -5
- package/dist/cssm/components/Chip/Chip.js.map +1 -1
- package/dist/cssm/components/ChipsInput/ChipsInput.css +1 -1
- package/dist/cssm/components/ChipsInput/ChipsInput.d.ts +5 -26
- package/dist/cssm/components/ChipsInput/ChipsInput.js +14 -183
- package/dist/cssm/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.css +1 -0
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.d.ts +17 -0
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js +189 -0
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js.map +1 -0
- package/dist/cssm/components/ChipsSelect/ChipsSelect.css +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.d.ts +4 -4
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js +42 -26
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +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 +32 -31
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.css +1 -1
- package/dist/cssm/components/DateInput/DateInput.d.ts +4 -2
- package/dist/cssm/components/DateInput/DateInput.js +4 -2
- package/dist/cssm/components/DateInput/DateInput.js.map +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.css +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.d.ts +4 -2
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js +4 -2
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cssm/components/DropdownIcon/DropdownIcon.d.ts +4 -2
- package/dist/cssm/components/DropdownIcon/DropdownIcon.js +15 -8
- package/dist/cssm/components/DropdownIcon/DropdownIcon.js.map +1 -1
- package/dist/cssm/components/FormField/FormField.css +4 -4
- package/dist/cssm/components/FormField/FormField.d.ts +2 -1
- package/dist/cssm/components/FormField/FormField.js +4 -2
- package/dist/cssm/components/FormField/FormField.js.map +1 -1
- package/dist/cssm/components/FormItem/FormItem.css +1 -1
- package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.css +1 -1
- package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.d.ts +5 -1
- package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js +9 -3
- package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js.map +1 -1
- package/dist/cssm/components/FormStatus/FormStatus.css +3 -1
- package/dist/cssm/components/FormStatus/FormStatus.d.ts +1 -0
- package/dist/cssm/components/FormStatus/FormStatus.js +4 -4
- package/dist/cssm/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/cssm/components/Header/Header.css +1 -1
- package/dist/cssm/components/Header/Header.js +3 -10
- package/dist/cssm/components/Header/Header.js.map +1 -1
- package/dist/cssm/components/IconButton/IconButton.js +4 -3
- package/dist/cssm/components/IconButton/IconButton.js.map +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 +4 -2
- package/dist/cssm/components/Input/Input.js.map +1 -1
- package/dist/cssm/components/Link/Link.css +1 -1
- package/dist/cssm/components/List/List.d.ts +2 -1
- package/dist/cssm/components/List/List.js +1 -1
- package/dist/cssm/components/List/List.js.map +1 -1
- package/dist/cssm/components/ModalDismissButton/ModalDismissButton.css +1 -1
- package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js +1 -4
- package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js.map +1 -1
- package/dist/cssm/components/ModalPage/ModalPage.css +5 -1
- package/dist/cssm/components/ModalPage/ModalPage.d.ts +13 -1
- package/dist/cssm/components/ModalPage/ModalPage.js +12 -10
- package/dist/cssm/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.css +1 -1
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js +3 -3
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/cssm/components/ModalRoot/ModalRoot.js +4 -18
- package/dist/cssm/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/cssm/components/ModalRoot/ModalRootDesktop.js +3 -11
- package/dist/cssm/components/ModalRoot/ModalRootDesktop.js.map +1 -1
- package/dist/cssm/components/NativeSelect/NativeSelect.d.ts +3 -2
- package/dist/cssm/components/NativeSelect/NativeSelect.js +4 -2
- package/dist/cssm/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/cssm/components/Panel/Panel.css +19 -1
- package/dist/cssm/components/Panel/Panel.js +4 -8
- package/dist/cssm/components/Panel/Panel.js.map +1 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.css +9 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.js +2 -11
- package/dist/cssm/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js +2 -6
- package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js.map +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.css +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js +2 -7
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/cssm/components/PanelHeaderClose/PanelHeaderClose.js +2 -2
- package/dist/cssm/components/PanelHeaderClose/PanelHeaderClose.js.map +1 -1
- package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.css +5 -1
- package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js +5 -5
- package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
- package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.css +1 -1
- package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js +3 -7
- package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js.map +1 -1
- package/dist/cssm/components/PanelHeaderEdit/PanelHeaderEdit.js +2 -2
- package/dist/cssm/components/PanelHeaderEdit/PanelHeaderEdit.js.map +1 -1
- package/dist/cssm/components/PanelHeaderSubmit/PanelHeaderSubmit.js +2 -2
- package/dist/cssm/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map +1 -1
- package/dist/cssm/components/PromoBanner/PromoBanner.css +3 -1
- package/dist/cssm/components/PromoBanner/PromoBanner.js +1 -4
- package/dist/cssm/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/cssm/components/Search/Search.css +27 -1
- package/dist/cssm/components/Search/Search.js +6 -8
- package/dist/cssm/components/Search/Search.js.map +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/SelectMimicry/SelectMimicry.d.ts +2 -2
- package/dist/cssm/components/SelectMimicry/SelectMimicry.js +4 -2
- package/dist/cssm/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/cssm/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/dist/cssm/components/SliderSwitch/SliderSwitch.js +1 -4
- package/dist/cssm/components/SliderSwitch/SliderSwitch.js.map +1 -1
- package/dist/cssm/components/SliderSwitch/SliderSwitchButton.js +1 -5
- package/dist/cssm/components/SliderSwitch/SliderSwitchButton.js.map +1 -1
- package/dist/cssm/components/Spacing/Spacing.css +1 -1
- package/dist/cssm/components/SubnavigationBar/SubnavigationBar.css +1 -1
- package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js +1 -4
- package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js.map +1 -1
- package/dist/cssm/components/SubnavigationButton/SubnavigationButton.css +1 -1
- package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js +2 -5
- package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
- package/dist/cssm/components/TabsItem/TabsItem.css +1 -1
- package/dist/cssm/components/Tappable/Tappable.js +3 -10
- package/dist/cssm/components/Tappable/Tappable.js.map +1 -1
- package/dist/cssm/components/Textarea/Textarea.css +1 -1
- package/dist/cssm/components/Textarea/Textarea.d.ts +3 -2
- package/dist/cssm/components/Textarea/Textarea.js +4 -2
- package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
- package/dist/cssm/components/Typography/Headline/Headline.css +1 -1
- package/dist/cssm/components/Typography/Text/Text.css +1 -1
- package/dist/cssm/components/UsersStack/UsersStack.css +1 -1
- package/dist/cssm/components/UsersStack/UsersStack.js +69 -28
- package/dist/cssm/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/cssm/components/View/View.js +2 -7
- package/dist/cssm/components/View/View.js.map +1 -1
- package/dist/cssm/components/View/ViewInfinite.js +1 -10
- package/dist/cssm/components/View/ViewInfinite.js.map +1 -1
- package/dist/cssm/{components/ChipsInput → hooks}/useChipsInput.d.ts +4 -3
- package/dist/{components/ChipsInput → cssm/hooks}/useChipsInput.js +0 -0
- package/dist/cssm/hooks/useChipsInput.js.map +1 -0
- package/{.cache/ts/src/components/ChipsSelect → dist/cssm/hooks}/useChipsSelect.d.ts +4 -4
- package/dist/{components/ChipsSelect → cssm/hooks}/useChipsSelect.js +1 -1
- package/dist/cssm/hooks/useChipsSelect.js.map +1 -0
- package/dist/cssm/index.d.ts +3 -0
- package/dist/cssm/index.js +1 -0
- package/dist/cssm/index.js.map +1 -1
- package/dist/cssm/lib/animate.js +1 -1
- package/dist/cssm/lib/animate.js.map +1 -1
- package/dist/cssm/lib/platform.js +8 -3
- package/dist/cssm/lib/platform.js.map +1 -1
- package/dist/cssm/lib/testing.js +1 -1
- package/dist/cssm/lib/testing.js.map +1 -1
- package/dist/cssm/lib/touch.js +1 -1
- package/dist/cssm/lib/touch.js.map +1 -1
- package/dist/cssm/styles/components.css +93 -15
- package/dist/cssm/styles/themes.css +1 -1
- package/dist/cssm/styles/unstable.css +1 -1
- package/dist/cssm/tokenized/index.d.ts +56 -0
- package/dist/cssm/tokenized/index.js +29 -0
- package/dist/cssm/tokenized/index.js.map +1 -1
- package/dist/{components/ChipsInput → hooks}/useChipsInput.d.ts +4 -3
- package/dist/{cssm/components/ChipsInput → hooks}/useChipsInput.js +0 -0
- package/dist/hooks/useChipsInput.js.map +1 -0
- package/dist/{components/ChipsSelect → hooks}/useChipsSelect.d.ts +4 -4
- package/dist/{cssm/components/ChipsSelect → hooks}/useChipsSelect.js +1 -1
- package/dist/hooks/useChipsSelect.js.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/animate.js +1 -1
- package/dist/lib/animate.js.map +1 -1
- package/dist/lib/platform.js +8 -3
- package/dist/lib/platform.js.map +1 -1
- package/dist/lib/testing.js +1 -1
- package/dist/lib/testing.js.map +1 -1
- package/dist/lib/touch.js +1 -1
- package/dist/lib/touch.js.map +1 -1
- package/dist/tokenized/index.d.ts +56 -0
- package/dist/tokenized/index.js +29 -0
- package/dist/tokenized/index.js.map +1 -1
- package/dist/unstable.css +1 -1
- package/dist/unstable.css.map +1 -1
- package/dist/vkui.css +94 -16
- package/dist/vkui.css.map +1 -1
- package/package.json +9 -9
- package/src/components/ActionSheet/ActionSheet.css +31 -59
- package/src/components/ActionSheet/ActionSheet.tsx +4 -7
- package/src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx +12 -0
- package/src/components/ActionSheet/ActionSheetDropdown.tsx +9 -6
- package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx +4 -4
- package/src/components/ActionSheet/Readme.md +6 -30
- package/src/components/ActionSheetItem/ActionSheetItem.css +67 -120
- package/src/components/ActionSheetItem/ActionSheetItem.tsx +42 -71
- package/src/components/AdaptivityProvider/AdaptivityProvider.tsx +5 -5
- package/src/components/Alert/Alert.css +79 -79
- package/src/components/Alert/Alert.tsx +14 -14
- package/src/components/Alert/Readme.md +83 -104
- package/src/components/AppRoot/AppRoot.css +2 -1
- package/src/components/AppRoot/AppRoot.tsx +1 -4
- package/src/components/Avatar/Avatar.tsx +15 -17
- package/src/components/Avatar/Readme.md +3 -3
- package/src/components/Banner/Banner.tsx +58 -63
- package/src/components/ButtonGroup/ButtonGroup.tsx +6 -3
- package/src/components/ButtonGroup/Readme.md +13 -11
- package/src/components/Calendar/Readme.md +3 -0
- package/src/components/CalendarDay/CalendarDay.tsx +21 -20
- package/src/components/CalendarRange/Readme.md +3 -0
- package/src/components/CardScroll/CardScroll.tsx +1 -2
- package/src/components/Cell/CellCheckbox/CellCheckbox.css +2 -2
- package/src/components/Cell/CellDragger/CellDragger.css +1 -1
- package/src/components/Chip/Chip.css +1 -0
- package/src/components/Chip/Chip.tsx +14 -2
- package/src/components/ChipsInput/ChipsInput.css +0 -71
- package/src/components/ChipsInput/ChipsInput.tsx +20 -220
- package/src/components/ChipsInputBase/ChipsInputBase.css +73 -0
- package/src/components/ChipsInputBase/ChipsInputBase.tsx +206 -0
- package/src/components/ChipsSelect/ChipsSelect.css +8 -0
- package/src/components/ChipsSelect/ChipsSelect.tsx +47 -39
- package/src/components/CustomSelect/CustomSelect.css +1 -0
- package/src/components/CustomSelect/CustomSelect.tsx +2 -3
- package/src/components/CustomSelect/Readme.md +8 -2
- package/src/components/DateInput/DateInput.css +1 -1
- package/src/components/DateInput/DateInput.tsx +6 -3
- package/src/components/DateInput/Readme.md +13 -0
- package/src/components/DateRangeInput/DateRangeInput.css +1 -1
- package/src/components/DateRangeInput/DateRangeInput.tsx +6 -3
- package/src/components/DateRangeInput/Readme.md +13 -0
- package/src/components/DropdownIcon/DropdownIcon.tsx +22 -8
- package/src/components/Epic/Readme.md +10 -5
- package/src/components/FormField/FormField.css +58 -6
- package/src/components/FormField/FormField.tsx +3 -0
- package/src/components/FormItem/FormItem.css +5 -3
- package/src/components/FormLayoutGroup/FormLayoutGroup.css +35 -0
- package/src/components/FormLayoutGroup/FormLayoutGroup.tsx +13 -2
- package/src/components/FormLayoutGroup/Readme.md +58 -48
- package/src/components/FormStatus/FormStatus.css +8 -5
- package/src/components/FormStatus/FormStatus.tsx +4 -8
- package/src/components/FormStatus/Readme.md +4 -0
- package/src/components/Gallery/Readme.md +64 -18
- package/src/components/Header/Header.css +8 -12
- package/src/components/Header/Header.tsx +9 -8
- package/src/components/HorizontalCell/Readme.md +1 -1
- package/src/components/IconButton/IconButton.tsx +2 -2
- package/src/components/Input/Input.css +1 -1
- package/src/components/Input/Input.tsx +2 -0
- package/src/components/Link/Link.css +2 -1
- package/src/components/List/List.tsx +3 -4
- package/src/components/ModalDismissButton/ModalDismissButton.css +6 -6
- package/src/components/ModalDismissButton/ModalDismissButton.tsx +1 -5
- package/src/components/ModalDismissButton/Readme.md +1 -1
- package/src/components/ModalPage/ModalPage.css +69 -63
- package/src/components/ModalPage/ModalPage.tsx +24 -11
- package/src/components/ModalPageHeader/ModalPageHeader.css +9 -12
- package/src/components/ModalPageHeader/ModalPageHeader.tsx +3 -2
- package/src/components/ModalRoot/ModalRoot.tsx +24 -24
- package/src/components/ModalRoot/ModalRootDesktop.tsx +12 -14
- package/src/components/ModalRoot/Readme.md +8 -3
- package/src/components/NativeSelect/NativeSelect.tsx +5 -2
- package/src/components/Panel/Panel.css +52 -24
- package/src/components/Panel/Panel.tsx +7 -9
- package/src/components/PanelHeader/PanelHeader.css +28 -21
- package/src/components/PanelHeader/PanelHeader.tsx +11 -12
- package/src/components/PanelHeaderBack/PanelHeaderBack.tsx +6 -5
- package/src/components/PanelHeaderButton/PanelHeaderButton.css +8 -15
- package/src/components/PanelHeaderButton/PanelHeaderButton.tsx +6 -6
- package/src/components/PanelHeaderClose/PanelHeaderClose.tsx +2 -6
- package/src/components/PanelHeaderContent/PanelHeaderContent.css +17 -23
- package/src/components/PanelHeaderContent/PanelHeaderContent.tsx +11 -5
- package/src/components/PanelHeaderContext/PanelHeaderContext.css +9 -25
- package/src/components/PanelHeaderContext/PanelHeaderContext.tsx +11 -7
- package/src/components/PanelHeaderContext/Readme.md +85 -101
- package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx +2 -2
- package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx +2 -6
- package/src/components/PromoBanner/PromoBanner.css +10 -22
- package/src/components/PromoBanner/PromoBanner.tsx +1 -5
- package/src/components/RichTooltip/Readme.md +2 -2
- package/src/components/Search/Search.css +134 -48
- package/src/components/Search/Search.tsx +13 -8
- package/src/components/Select/Select.css +2 -2
- package/src/components/SelectMimicry/Readme.md +3 -3
- package/src/components/SelectMimicry/SelectMimicry.tsx +3 -1
- package/src/components/SliderSwitch/SliderSwitch.tsx +5 -5
- package/src/components/SliderSwitch/SliderSwitchButton.tsx +7 -7
- package/src/components/Snackbar/Readme.md +12 -3
- package/src/components/Spacing/Readme.md +20 -20
- package/src/components/Spacing/Spacing.css +5 -1
- package/src/components/SplitLayout/Readme.md +1 -1
- package/src/components/SubnavigationBar/SubnavigationBar.css +7 -19
- package/src/components/SubnavigationBar/SubnavigationBar.tsx +1 -8
- package/src/components/SubnavigationButton/SubnavigationButton.css +13 -0
- package/src/components/SubnavigationButton/SubnavigationButton.tsx +1 -4
- package/src/components/TabbarItem/Readme.md +6 -1
- package/src/components/Tabs/Readme.md +10 -2
- package/src/components/TabsItem/TabsItem.css +1 -1
- package/src/components/Tappable/Tappable.tsx +9 -11
- package/src/components/Textarea/Textarea.css +1 -1
- package/src/components/Textarea/Textarea.tsx +5 -2
- package/src/components/Tooltip/Readme.md +2 -2
- package/src/components/Touch/Readme.md +4 -4
- package/src/components/Typography/Headline/Headline.css +10 -0
- package/src/components/Typography/Text/Text.css +10 -0
- package/src/components/UsersStack/UsersStack.css +42 -0
- package/src/components/UsersStack/UsersStack.tsx +71 -15
- package/src/components/View/Readme.md +5 -5
- package/src/components/View/View.tsx +2 -9
- package/src/components/View/ViewInfinite.tsx +14 -14
- package/src/{components/ChipsInput → hooks}/useChipsInput.ts +5 -8
- package/src/{components/ChipsSelect → hooks}/useChipsSelect.ts +4 -4
- package/src/index.ts +3 -0
- package/src/lib/animate.ts +1 -1
- package/src/lib/platform.ts +12 -6
- package/src/lib/testing.ts +1 -1
- package/src/lib/touch.ts +1 -1
- package/src/styles/components.css +1 -0
- package/src/tokenized/index.ts +85 -0
- package/.cache/ts/src/components/UsersStack/masks.d.ts +0 -1
- package/dist/cjs/components/ChipsInput/useChipsInput.js.map +0 -1
- package/dist/cjs/components/ChipsSelect/useChipsSelect.js.map +0 -1
- package/dist/cjs/components/UsersStack/masks.js +0 -29
- package/dist/cjs/components/UsersStack/masks.js.map +0 -1
- package/dist/components/ChipsInput/useChipsInput.js.map +0 -1
- package/dist/components/ChipsSelect/useChipsSelect.js.map +0 -1
- package/dist/components/UsersStack/masks.d.ts +0 -1
- package/dist/components/UsersStack/masks.js +0 -20
- package/dist/components/UsersStack/masks.js.map +0 -1
- package/dist/cssm/components/ChipsInput/useChipsInput.js.map +0 -1
- package/dist/cssm/components/ChipsSelect/useChipsSelect.js.map +0 -1
- package/dist/cssm/components/DropdownIcon/DropdownIcon.css +0 -1
- package/dist/cssm/components/UsersStack/masks.d.ts +0 -1
- package/dist/cssm/components/UsersStack/masks.js +0 -20
- package/dist/cssm/components/UsersStack/masks.js.map +0 -1
- package/src/components/DropdownIcon/DropdownIcon.css +0 -3
- package/src/components/UsersStack/masks.tsx +0 -69
|
@@ -1 +1,7 @@
|
|
|
1
|
-
.vkuiAlert{
|
|
1
|
+
.vkuiAlert{-webkit-animation:vkui-animation-android-alert-intro .2s cubic-bezier(.4,0,.2,1);animation:vkui-animation-android-alert-intro .2s cubic-bezier(.4,0,.2,1);-webkit-animation:vkui-animation-android-alert-intro .2s var(--android-easing);animation:vkui-animation-android-alert-intro .2s var(--android-easing);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular,12px);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4,0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16));color:#000;color:var(--text_primary,var(--vkui--color_text_primary));margin:auto 24px;max-width:416px;min-width:280px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiAlert--desktop{width:100%}.vkuiAlert--closing{opacity:0;-webkit-transform:scale(.95);transform:scale(.95);transition:opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .2s cubic-bezier(.4,0,.2,1);transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .2s cubic-bezier(.4,0,.2,1);transition:opacity .2s var(--android-easing),-webkit-transform .2s var(--android-easing);transition:transform .2s var(--android-easing),opacity .2s var(--android-easing);transition:transform .2s var(--android-easing),opacity .2s var(--android-easing),-webkit-transform .2s var(--android-easing)}.vkuiAlert:before{background-color:#fff;background-color:var(
|
|
2
|
+
--modal_card_background,var(--vkui--color_background_modal)
|
|
3
|
+
);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.vkuiAlert__content{padding:24px 24px 20px;position:relative;z-index:2}.vkuiAlert__action{background:transparent;white-space:nowrap}.vkuiAlert__actions{display:flex;max-width:100%;padding:0 16px 16px;position:relative;z-index:2}.vkuiAlert__header{margin-bottom:8px}.vkuiAlert__text{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiAlert--h .vkuiAlert__actions{justify-content:flex-end}.vkuiAlert--h .vkuiAlert__button{margin-left:8px}.vkuiAlert--v .vkuiAlert__actions{align-items:flex-end;flex-direction:column}.vkuiAlert--v .vkuiAlert__button{margin-bottom:4px;margin-top:4px}.vkuiAlert--v .vkuiAlert__button:first-child{margin-top:0}.vkuiAlert--v .vkuiAlert__button:last-child{margin-bottom:0}.vkuiAlert--ios{-webkit-animation:vkui-animation-ios-alert-intro .3s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-alert-intro .3s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-alert-intro .3s var(--ios-easing);animation:vkui-animation-ios-alert-intro .3s var(--ios-easing);box-shadow:none;min-width:270px;overflow:hidden;width:270px}.vkuiAlert--ios.vkuiAlert--closing{opacity:0;-webkit-transform:none;transform:none;transition:opacity .3s cubic-bezier(.36,.66,.04,1);transition:opacity .3s var(--ios-easing)}.vkuiAlert--ios .vkuiAlert__content{padding:19px 16px 20px;text-align:center}.vkuiAlert--ios .vkuiAlert__header:not(:last-child){margin-bottom:7px}.vkuiAlert--ios .vkuiAlert__text{color:inherit}.vkuiAlert--ios .vkuiAlert__content:after{background:rgba(0,0,0,.12);background:var(
|
|
4
|
+
--action_sheet_separator,var(--vkui--color_separator_primary_alpha)
|
|
5
|
+
);bottom:0;content:"";height:1px;left:0;position:absolute;right:0;-webkit-transform-origin:center bottom;transform-origin:center bottom}.vkuiAlert--ios .vkuiAlert__actions{padding:initial}.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__actions{align-items:normal;flex-direction:column}.vkuiAlert--ios .vkuiAlert__action{border:0;border-radius:0;color:#2688eb;color:var(--accent,var(--vkui--color_text_accent));display:block;font-size:17px;height:44px;line-height:44px;margin:0;overflow:hidden;padding:0 6px;position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis}.vkuiAlert--ios .vkuiAlert__action:active{z-index:1}.vkuiAlert--ios .vkuiAlert__action:after{background:rgba(0,0,0,.12);background:var(
|
|
6
|
+
--action_sheet_separator,var(--vkui--color_separator_primary_alpha)
|
|
7
|
+
);content:"";position:absolute}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after{height:100%;right:0;top:0;-webkit-transform-origin:right center;transform-origin:right center;width:1px}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:last-child:after{content:none}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action{flex-basis:0;flex-grow:1;flex-shrink:1}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:first-child{border-bottom-left-radius:12px}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:last-child{border-bottom-right-radius:12px}.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after{bottom:0;height:1px;left:0;-webkit-transform-origin:center bottom;transform-origin:center bottom;width:100%}.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:last-child:after{content:none}.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:last-child{border-radius:0 0 12px 12px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiAlert--ios .vkuiAlert__content:after,.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after{-webkit-transform:scaleY(.5);transform:scaleY(.5)}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after{-webkit-transform:scaleX(.5);transform:scaleX(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiAlert--ios .vkuiAlert__content:after,.vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after{-webkit-transform:scaleY(.33);transform:scaleY(.33)}.vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after{-webkit-transform:scaleX(.33);transform:scaleX(.33)}}.vkuiAlert--ios .vkuiAlert__action--cancel{font-weight:600}.vkuiAlert--ios .vkuiAlert__action--destructive{color:#e64646;color:var(--destructive,var(--vkui--color_text_negative))}.vkuiAlert--vkcom{box-shadow:0 0 2px rgba(0,0,0,.12),0 0 96px rgba(0,0,0,.16);width:400px}.vkuiAlert--vkcom .vkuiAlert__content{padding:24px}.vkuiAlert--vkcom .vkuiAlert__actions{padding:0 24px 16px}.vkuiAlert--vkcom .vkuiAlert__button{order:2}.vkuiAlert--vkcom .vkuiAlert__button--cancel{order:1}@-webkit-keyframes vkui-animation-ios-alert-intro{0%{opacity:0;-webkit-transform:scale(1.05);transform:scale(1.05)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes vkui-animation-ios-alert-intro{0%{opacity:0;-webkit-transform:scale(1.05);transform:scale(1.05)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes vkui-animation-android-alert-intro{0%{opacity:0;-webkit-transform:scale(.95);transform:scale(.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes vkui-animation-android-alert-intro{0%{opacity:0;-webkit-transform:scale(.95);transform:scale(.95)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
|
|
@@ -7,9 +7,8 @@ import { createScopedElement } from "../../lib/jsxRuntime";
|
|
|
7
7
|
import * as React from "react";
|
|
8
8
|
import { Tappable } from "../Tappable/Tappable";
|
|
9
9
|
import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
|
|
10
|
-
import { getClassName } from "../../helpers/getClassName";
|
|
11
10
|
import { classNames } from "../../lib/classNames";
|
|
12
|
-
import {
|
|
11
|
+
import { VKCOM, IOS } from "../../lib/platform";
|
|
13
12
|
import { ViewWidth } from "../../hoc/withAdaptivity";
|
|
14
13
|
import { Button } from "../Button/Button";
|
|
15
14
|
import { hasReactNode, stopPropagation } from "../../lib/utils";
|
|
@@ -94,14 +93,14 @@ var AlertAction = function AlertAction(_ref) {
|
|
|
94
93
|
}, restProps), action.title);
|
|
95
94
|
}
|
|
96
95
|
|
|
97
|
-
var mode =
|
|
96
|
+
var mode = "tertiary"; // TODO v5.0.0 поправить под новую адаптивность
|
|
98
97
|
|
|
99
|
-
if (
|
|
100
|
-
mode = "
|
|
98
|
+
if (viewWidth === ViewWidth.DESKTOP && action.mode === "destructive") {
|
|
99
|
+
mode = "destructive";
|
|
100
|
+
}
|
|
101
101
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}
|
|
102
|
+
if (platform === VKCOM) {
|
|
103
|
+
mode = action.mode === "cancel" ? "secondary" : "primary";
|
|
105
104
|
}
|
|
106
105
|
|
|
107
106
|
return createScopedElement(Button, {
|
|
@@ -149,9 +148,10 @@ export var Alert = function Alert(_ref2) {
|
|
|
149
148
|
|
|
150
149
|
var elementRef = React.useRef(null);
|
|
151
150
|
var resolvedActionsLayout = platform === VKCOM ? "horizontal" : actionsLayout;
|
|
152
|
-
var canShowCloseButton = platform
|
|
153
|
-
var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
|
|
154
|
-
|
|
151
|
+
var canShowCloseButton = platform !== IOS && viewWidth >= ViewWidth.SMALL_TABLET;
|
|
152
|
+
var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET; // TODO v5.0.0 поправить под новую адаптивность
|
|
153
|
+
|
|
154
|
+
var timeout = platform === IOS ? 300 : 200;
|
|
155
155
|
var close = React.useCallback(function () {
|
|
156
156
|
setClosing(true);
|
|
157
157
|
waitTransitionFinish(elementRef.current, function (e) {
|
|
@@ -187,7 +187,7 @@ export var Alert = function Alert(_ref2) {
|
|
|
187
187
|
onClick: stopPropagation,
|
|
188
188
|
onClose: close,
|
|
189
189
|
timeout: timeout,
|
|
190
|
-
vkuiClass: classNames(
|
|
190
|
+
vkuiClass: classNames("Alert", platform === IOS && "Alert--ios", platform === VKCOM && "Alert--vkcom", resolvedActionsLayout === "vertical" ? "Alert--v" : "Alert--h", closing && "Alert--closing", isDesktop && "Alert--desktop"),
|
|
191
191
|
role: "alertdialog",
|
|
192
192
|
"aria-modal": true,
|
|
193
193
|
"aria-labelledby": "vkui--alert--title",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["React","Tappable","PopoutWrapper","getClassName","classNames","ANDROID","VKCOM","IOS","ViewWidth","Button","hasReactNode","stopPropagation","Title","Caption","Text","ModalDismissButton","FocusTrap","useScrollLock","useWaitTransitionFinish","usePlatform","useAdaptivity","AlertHeader","props","platform","AlertText","AlertAction","action","onItemClick","restProps","viewWidth","handleItemClick","useCallback","Component","href","mode","target","title","DESKTOP","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","canShowCloseButton","SMALL_TABLET","isDesktop","timeout","close","current","e","propertyName","item","autoclose","map","i"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ANDROID, VKCOM, IOS } from \"../../lib/platform\";\nimport { ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport { hasReactNode, stopPropagation } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { ModalDismissButton } from \"../ModalDismissButton/ModalDismissButton\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { useScrollLock } from \"../AppRoot/ScrollContext\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Alert.css\";\n\nexport type AlertActionInterface = AlertAction &\n React.AnchorHTMLAttributes<HTMLElement>;\n\nexport interface AlertAction extends Pick<ButtonProps, \"Component\" | \"href\"> {\n title: string;\n action?: VoidFunction;\n autoclose?: boolean;\n mode: \"cancel\" | \"destructive\" | \"default\";\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n actionsLayout?: \"vertical\" | \"horizontal\";\n actions?: AlertAction[];\n header?: React.ReactNode;\n text?: React.ReactNode;\n onClose?: VoidFunction;\n\n /**\n * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n */\n dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography {\n id: string;\n children?: React.ReactNode;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n const platform = usePlatform();\n\n switch (platform) {\n case IOS:\n return (\n <Title vkuiClass=\"Alert__header\" weight=\"1\" level=\"3\" {...props} />\n );\n default:\n return (\n <Title vkuiClass=\"Alert__header\" weight=\"2\" level=\"2\" {...props} />\n );\n }\n};\n\nconst AlertText = (props: AlertTypography) => {\n const platform = usePlatform();\n\n switch (platform) {\n case VKCOM:\n return <Caption vkuiClass=\"Alert__text\" {...props} />;\n case IOS:\n return <Caption vkuiClass=\"Alert__text\" level=\"2\" {...props} />;\n default:\n return (\n <Text Component=\"span\" vkuiClass=\"Alert__text\" weight=\"3\" {...props} />\n );\n }\n};\n\ninterface AlertActionProps {\n action: AlertActionInterface;\n onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({\n action,\n onItemClick,\n ...restProps\n}: AlertActionProps) => {\n const platform = usePlatform();\n const { viewWidth } = useAdaptivity();\n const handleItemClick = React.useCallback(\n () => onItemClick(action),\n [onItemClick, action]\n );\n\n if (platform === IOS) {\n const { Component = \"button\" } = action;\n return (\n <Tappable\n Component={action.href ? \"a\" : Component}\n vkuiClass={classNames(\"Alert__action\", `Alert__action--${action.mode}`)}\n onClick={handleItemClick}\n href={action.href}\n target={action.target}\n {...restProps}\n >\n {action.title}\n </Tappable>\n );\n }\n\n let mode: ButtonProps[\"mode\"] =\n action.mode === \"cancel\" ? \"secondary\" : \"primary\";\n\n if (platform === ANDROID) {\n mode = \"tertiary\";\n\n if (viewWidth === ViewWidth.DESKTOP && action.mode === \"destructive\") {\n mode = \"destructive\";\n }\n }\n\n return (\n <Button\n vkuiClass={classNames(\"Alert__button\", `Alert__button--${action.mode}`)}\n mode={mode}\n size=\"m\"\n onClick={handleItemClick}\n Component={action.Component}\n href={action.href}\n target={action.target}\n >\n {action.title}\n </Button>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n actions = [],\n actionsLayout = \"horizontal\",\n children,\n className,\n style,\n text,\n header,\n onClose,\n dismissLabel = \"Закрыть предупреждение\",\n ...restProps\n}: AlertProps) => {\n const platform = usePlatform();\n const { viewWidth } = useAdaptivity();\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n\n const elementRef = React.useRef<HTMLDivElement>(null);\n\n const resolvedActionsLayout: AlertProps[\"actionsLayout\"] =\n platform === VKCOM ? \"horizontal\" : actionsLayout;\n const canShowCloseButton =\n platform === VKCOM ||\n (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n\n const timeout = platform === ANDROID || platform === VKCOM ? 200 : 300;\n\n const close = React.useCallback(() => {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e || e.propertyName === \"opacity\") {\n onClose && onClose();\n }\n },\n timeout\n );\n }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n const onItemClick: ItemClickHandler = React.useCallback(\n (item: AlertActionInterface) => {\n const { action, autoclose } = item;\n\n if (autoclose) {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e || e.propertyName === \"opacity\") {\n onClose && onClose();\n action && action();\n }\n },\n timeout\n );\n } else {\n action && action();\n }\n },\n [elementRef, waitTransitionFinish, onClose, timeout]\n );\n\n useScrollLock();\n\n return (\n <PopoutWrapper\n className={className}\n closing={closing}\n style={style}\n onClick={close}\n >\n <FocusTrap\n {...restProps}\n getRootRef={elementRef}\n onClick={stopPropagation}\n onClose={close}\n timeout={timeout}\n vkuiClass={classNames(\n getClassName(\"Alert\", platform),\n resolvedActionsLayout === \"vertical\" ? \"Alert--v\" : \"Alert--h\",\n closing && \"Alert--closing\",\n isDesktop && \"Alert--desktop\"\n )}\n role=\"alertdialog\"\n aria-modal\n aria-labelledby=\"vkui--alert--title\"\n aria-describedby=\"vkui--alert--desc\"\n >\n <div vkuiClass=\"Alert__content\">\n {hasReactNode(header) && (\n <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>\n )}\n {hasReactNode(text) && (\n <AlertText id=\"vkui--alert--desc\">{text}</AlertText>\n )}\n {children}\n </div>\n <div vkuiClass=\"Alert__actions\">\n {actions.map((action, i) => (\n <AlertAction key={i} action={action} onItemClick={onItemClick} />\n ))}\n </div>\n {canShowCloseButton && (\n <ModalDismissButton onClick={close} aria-label={dismissLabel} />\n )}\n </FocusTrap>\n </PopoutWrapper>\n );\n};\n"],"file":"Alert.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["React","Tappable","PopoutWrapper","classNames","VKCOM","IOS","ViewWidth","Button","hasReactNode","stopPropagation","Title","Caption","Text","ModalDismissButton","FocusTrap","useScrollLock","useWaitTransitionFinish","usePlatform","useAdaptivity","AlertHeader","props","platform","AlertText","AlertAction","action","onItemClick","restProps","viewWidth","handleItemClick","useCallback","Component","href","mode","target","title","DESKTOP","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","waitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","canShowCloseButton","SMALL_TABLET","isDesktop","timeout","close","current","e","propertyName","item","autoclose","map","i"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { classNames } from \"../../lib/classNames\";\nimport { VKCOM, IOS } from \"../../lib/platform\";\nimport { ViewWidth } from \"../../hoc/withAdaptivity\";\nimport { Button, ButtonProps } from \"../Button/Button\";\nimport { hasReactNode, stopPropagation } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { ModalDismissButton } from \"../ModalDismissButton/ModalDismissButton\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport { useScrollLock } from \"../AppRoot/ScrollContext\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Alert.css\";\n\nexport type AlertActionInterface = AlertAction &\n React.AnchorHTMLAttributes<HTMLElement>;\n\nexport interface AlertAction extends Pick<ButtonProps, \"Component\" | \"href\"> {\n title: string;\n action?: VoidFunction;\n autoclose?: boolean;\n mode: \"cancel\" | \"destructive\" | \"default\";\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n actionsLayout?: \"vertical\" | \"horizontal\";\n actions?: AlertAction[];\n header?: React.ReactNode;\n text?: React.ReactNode;\n onClose?: VoidFunction;\n\n /**\n * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n */\n dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography {\n id: string;\n children?: React.ReactNode;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n const platform = usePlatform();\n\n switch (platform) {\n case IOS:\n return (\n <Title vkuiClass=\"Alert__header\" weight=\"1\" level=\"3\" {...props} />\n );\n default:\n return (\n <Title vkuiClass=\"Alert__header\" weight=\"2\" level=\"2\" {...props} />\n );\n }\n};\n\nconst AlertText = (props: AlertTypography) => {\n const platform = usePlatform();\n\n switch (platform) {\n case VKCOM:\n return <Caption vkuiClass=\"Alert__text\" {...props} />;\n case IOS:\n return <Caption vkuiClass=\"Alert__text\" level=\"2\" {...props} />;\n default:\n return (\n <Text Component=\"span\" vkuiClass=\"Alert__text\" weight=\"3\" {...props} />\n );\n }\n};\n\ninterface AlertActionProps {\n action: AlertActionInterface;\n onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({\n action,\n onItemClick,\n ...restProps\n}: AlertActionProps) => {\n const platform = usePlatform();\n const { viewWidth } = useAdaptivity();\n const handleItemClick = React.useCallback(\n () => onItemClick(action),\n [onItemClick, action]\n );\n\n if (platform === IOS) {\n const { Component = \"button\" } = action;\n return (\n <Tappable\n Component={action.href ? \"a\" : Component}\n vkuiClass={classNames(\"Alert__action\", `Alert__action--${action.mode}`)}\n onClick={handleItemClick}\n href={action.href}\n target={action.target}\n {...restProps}\n >\n {action.title}\n </Tappable>\n );\n }\n\n let mode: ButtonProps[\"mode\"] = \"tertiary\";\n\n // TODO v5.0.0 поправить под новую адаптивность\n if (viewWidth === ViewWidth.DESKTOP && action.mode === \"destructive\") {\n mode = \"destructive\";\n }\n\n if (platform === VKCOM) {\n mode = action.mode === \"cancel\" ? \"secondary\" : \"primary\";\n }\n\n return (\n <Button\n vkuiClass={classNames(\"Alert__button\", `Alert__button--${action.mode}`)}\n mode={mode}\n size=\"m\"\n onClick={handleItemClick}\n Component={action.Component}\n href={action.href}\n target={action.target}\n >\n {action.title}\n </Button>\n );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n actions = [],\n actionsLayout = \"horizontal\",\n children,\n className,\n style,\n text,\n header,\n onClose,\n dismissLabel = \"Закрыть предупреждение\",\n ...restProps\n}: AlertProps) => {\n const platform = usePlatform();\n const { viewWidth } = useAdaptivity();\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n\n const elementRef = React.useRef<HTMLDivElement>(null);\n\n const resolvedActionsLayout: AlertProps[\"actionsLayout\"] =\n platform === VKCOM ? \"horizontal\" : actionsLayout;\n const canShowCloseButton =\n platform !== IOS && viewWidth >= ViewWidth.SMALL_TABLET;\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET; // TODO v5.0.0 поправить под новую адаптивность\n\n const timeout = platform === IOS ? 300 : 200;\n\n const close = React.useCallback(() => {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e || e.propertyName === \"opacity\") {\n onClose && onClose();\n }\n },\n timeout\n );\n }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n const onItemClick: ItemClickHandler = React.useCallback(\n (item: AlertActionInterface) => {\n const { action, autoclose } = item;\n\n if (autoclose) {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e || e.propertyName === \"opacity\") {\n onClose && onClose();\n action && action();\n }\n },\n timeout\n );\n } else {\n action && action();\n }\n },\n [elementRef, waitTransitionFinish, onClose, timeout]\n );\n\n useScrollLock();\n\n return (\n <PopoutWrapper\n className={className}\n closing={closing}\n style={style}\n onClick={close}\n >\n <FocusTrap\n {...restProps}\n getRootRef={elementRef}\n onClick={stopPropagation}\n onClose={close}\n timeout={timeout}\n vkuiClass={classNames(\n \"Alert\",\n platform === IOS && \"Alert--ios\",\n platform === VKCOM && \"Alert--vkcom\",\n resolvedActionsLayout === \"vertical\" ? \"Alert--v\" : \"Alert--h\",\n closing && \"Alert--closing\",\n isDesktop && \"Alert--desktop\"\n )}\n role=\"alertdialog\"\n aria-modal\n aria-labelledby=\"vkui--alert--title\"\n aria-describedby=\"vkui--alert--desc\"\n >\n <div vkuiClass=\"Alert__content\">\n {hasReactNode(header) && (\n <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>\n )}\n {hasReactNode(text) && (\n <AlertText id=\"vkui--alert--desc\">{text}</AlertText>\n )}\n {children}\n </div>\n <div vkuiClass=\"Alert__actions\">\n {actions.map((action, i) => (\n <AlertAction key={i} action={action} onItemClick={onItemClick} />\n ))}\n </div>\n {canShowCloseButton && (\n <ModalDismissButton onClick={close} aria-label={dismissLabel} />\n )}\n </FocusTrap>\n </PopoutWrapper>\n );\n};\n"],"file":"Alert.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkui__root--embedded{overflow-x:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.vkuiAppRoot{height:100%}.vkui__root--embedded .vkuiAppRoot{overflow:auto}.vkui--sizeX-regular{background:#ebedf0;background:var(--background_page)}.vkuiAppRoot--no-mouse{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
|
|
1
|
+
.vkui__root--embedded{overflow-x:hidden;-webkit-transform:translateZ(0);transform:translateZ(0)}.vkuiAppRoot{height:100%}.vkui__root--embedded .vkuiAppRoot{overflow:auto}.vkui--sizeX-regular{background:#ebedf0;background:var(--background_page,var(--vkui--color_background))}.vkuiAppRoot--no-mouse{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
|
|
@@ -195,11 +195,8 @@ export var AppRoot = withAdaptivity(function (_ref) {
|
|
|
195
195
|
globalClasses: !noLegacyClasses
|
|
196
196
|
}, children)));
|
|
197
197
|
return mode === "partial" ? content : createScopedElement("div", _extends({
|
|
198
|
-
ref: rootRef
|
|
199
|
-
,
|
|
200
|
-
vkuiClass: classNames("AppRoot", {
|
|
201
|
-
"AppRoot--no-mouse": !hasMouse
|
|
202
|
-
})
|
|
198
|
+
ref: rootRef,
|
|
199
|
+
vkuiClass: classNames("AppRoot", !hasMouse && "AppRoot--no-mouse")
|
|
203
200
|
}, props), content);
|
|
204
201
|
}, {
|
|
205
202
|
sizeX: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"names":["React","useDOM","classNames","AppRootContext","withAdaptivity","SizeType","useIsomorphicLayoutEffect","classScopingMode","IconSettingsProvider","ElementScrollController","GlobalScrollController","noop","warnOnce","useKeyboardInputTracker","useInsets","ConfigProviderContext","isRefObject","warn","AppRoot","children","_mode","mode","_embedded","embedded","sizeX","hasMouse","noLegacyClasses","scroll","portalRoot","portalRootProp","disablePortal","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","insets","useContext","appearance","noConflict","process","env","NODE_ENV","portal","current","createElement","classList","add","body","appendChild","parentElement","removeChild","parent","classes","concat","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","REGULAR","container","ScrollController","useMemo","content","appRoot","keyboardInput","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport {\n withAdaptivity,\n SizeType,\n AdaptivityProps,\n} from \"../../hoc/withAdaptivity\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { classScopingMode } from \"../../lib/classScopingMode\";\nimport { IconSettingsProvider } from \"@vkontakte/icons\";\nimport {\n ElementScrollController,\n GlobalScrollController,\n} from \"./ScrollContext\";\nimport { noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useKeyboardInputTracker } from \"../../hooks/useKeyboardInputTracker\";\nimport { useInsets } from \"../../hooks/useInsets\";\nimport { Insets } from \"@vkontakte/vk-bridge\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\nimport { isRefObject } from \"../../lib/isRefObject\";\nimport \"./AppRoot.css\";\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Pick<AdaptivityProps, \"sizeX\" | \"hasMouse\"> {\n /** @deprecated Use mode=\"embedded\" */\n embedded?: boolean;\n /** Режим встраивания */\n mode?: \"partial\" | \"embedded\" | \"full\";\n window?: Window;\n /** Убирает классы без префикса (.Button) */\n noLegacyClasses?: boolean;\n scroll?: \"global\" | \"contain\";\n /** Элемент используемый в качестве root для порталов\n * При передаче своего элемента необходимо задать ему class=\"vkui__portal-root\" и добавить в DOM\n */\n // TODO: v5.0.0 изменить тип на HTMLElement\n portalRoot?: HTMLDivElement | React.RefObject<HTMLDivElement> | null;\n /** Disable portal for components */\n disablePortal?: boolean;\n}\n\nconst warn = warnOnce(\"AppRoot\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = withAdaptivity<AppRootProps>(\n ({\n children,\n mode: _mode,\n embedded: _embedded,\n sizeX,\n hasMouse,\n noLegacyClasses = false,\n scroll = \"global\",\n portalRoot: portalRootProp = null,\n disablePortal,\n ...props\n }) => {\n // normalize mode\n const mode = _mode || (_embedded ? \"embedded\" : \"full\");\n const isKeyboardInputActive = useKeyboardInputTracker();\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement | null>(\n null\n );\n const { document } = useDOM();\n const insets = useInsets();\n const { appearance } = React.useContext(ConfigProviderContext);\n\n classScopingMode.noConflict = noLegacyClasses;\n\n if (process.env.NODE_ENV === \"development\") {\n if (scroll !== \"global\" && mode !== \"embedded\") {\n warn(\n `Свойство scroll=\"${scroll}\" поддерживается только в режиме embedded`,\n \"error\"\n );\n }\n if (_mode && _embedded) {\n warn(`Свойство mode=\"${mode}\" приоритетнее, чем \"embedded\"`);\n }\n }\n\n // setup portal\n useIsomorphicLayoutEffect(() => {\n let portal: HTMLDivElement | null = null;\n if (portalRootProp) {\n if (isRefObject(portalRootProp)) {\n portal = portalRootProp.current;\n } else {\n portal = portalRootProp;\n }\n }\n if (!portal) {\n portal = document!.createElement(\"div\");\n portal.classList.add(\"vkui__portal-root\");\n document!.body.appendChild(portal);\n }\n setPortalRoot(portal);\n return () => {\n portal?.parentElement?.removeChild(portal);\n };\n }, [portalRootProp]);\n\n // setup root classes\n useIsomorphicLayoutEffect(() => {\n if (mode === \"partial\") {\n return noop;\n }\n\n const parent = rootRef.current?.parentElement;\n const classes = [\"vkui__root\"].concat(\n mode === \"embedded\" ? \"vkui__root--embedded\" : []\n );\n parent?.classList.add(...classes);\n\n return () => {\n parent?.classList.remove(...classes);\n };\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n if (mode === \"full\") {\n document!.documentElement.classList.add(\"vkui\");\n\n return () => {\n document!.documentElement.classList.remove(\"vkui\");\n };\n }\n\n return undefined;\n }, [document, mode]);\n\n // setup insets\n useIsomorphicLayoutEffect(() => {\n if (mode === \"partial\" || !rootRef.current?.parentElement) {\n return noop;\n }\n\n const parent = rootRef.current.parentElement;\n\n for (const key in insets) {\n if (\n insets.hasOwnProperty(key) &&\n typeof insets[key as keyof Insets] === \"number\"\n ) {\n const inset = insets[key as keyof Insets];\n parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);\n portalRoot &&\n portalRoot.style.setProperty(\n `--safe-area-inset-${key}`,\n `${inset}px`\n );\n }\n }\n\n return () => {\n for (const key in insets) {\n if (insets.hasOwnProperty(key)) {\n parent.style.removeProperty(`--safe-area-inset-${key}`);\n portalRoot &&\n portalRoot.style.removeProperty(`--safe-area-inset-${key}`);\n }\n }\n };\n }, [insets, portalRoot]);\n\n // adaptivity handler\n useIsomorphicLayoutEffect(() => {\n if (mode === \"partial\" || sizeX !== SizeType.REGULAR) {\n return noop;\n }\n const container =\n mode === \"embedded\" ? rootRef.current?.parentElement : document!.body;\n container?.classList.add(\"vkui--sizeX-regular\");\n return () => container?.classList.remove(\"vkui--sizeX-regular\");\n }, [sizeX]);\n\n useIsomorphicLayoutEffect(() => {\n if (mode !== \"full\" || appearance === undefined) {\n return noop;\n }\n document!.documentElement.style.setProperty(\"color-scheme\", appearance);\n\n return () =>\n document!.documentElement.style.removeProperty(\"color-scheme\");\n }, [appearance]);\n\n const ScrollController = React.useMemo(\n () =>\n scroll === \"contain\" ? ElementScrollController : GlobalScrollController,\n [scroll]\n );\n\n const content = (\n <AppRootContext.Provider\n value={{\n appRoot: rootRef,\n portalRoot,\n embedded: mode === \"embedded\",\n keyboardInput: isKeyboardInputActive,\n mode,\n disablePortal,\n }}\n >\n <ScrollController elRef={rootRef}>\n <IconSettingsProvider\n classPrefix=\"vkui\"\n globalClasses={!noLegacyClasses}\n >\n {children}\n </IconSettingsProvider>\n </ScrollController>\n </AppRootContext.Provider>\n );\n\n return mode === \"partial\" ? (\n content\n ) : (\n <div\n ref={rootRef}\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\"AppRoot\", {\n \"AppRoot--no-mouse\": !hasMouse,\n })}\n {...props}\n >\n {content}\n </div>\n );\n },\n {\n sizeX: true,\n hasMouse: true,\n }\n);\n\nAppRoot.displayName = \"AppRoot\";\n"],"file":"AppRoot.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"names":["React","useDOM","classNames","AppRootContext","withAdaptivity","SizeType","useIsomorphicLayoutEffect","classScopingMode","IconSettingsProvider","ElementScrollController","GlobalScrollController","noop","warnOnce","useKeyboardInputTracker","useInsets","ConfigProviderContext","isRefObject","warn","AppRoot","children","_mode","mode","_embedded","embedded","sizeX","hasMouse","noLegacyClasses","scroll","portalRoot","portalRootProp","disablePortal","props","isKeyboardInputActive","rootRef","useRef","useState","setPortalRoot","document","insets","useContext","appearance","noConflict","process","env","NODE_ENV","portal","current","createElement","classList","add","body","appendChild","parentElement","removeChild","parent","classes","concat","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","REGULAR","container","ScrollController","useMemo","content","appRoot","keyboardInput","displayName"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { AppRootContext } from \"./AppRootContext\";\nimport {\n withAdaptivity,\n SizeType,\n AdaptivityProps,\n} from \"../../hoc/withAdaptivity\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { classScopingMode } from \"../../lib/classScopingMode\";\nimport { IconSettingsProvider } from \"@vkontakte/icons\";\nimport {\n ElementScrollController,\n GlobalScrollController,\n} from \"./ScrollContext\";\nimport { noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useKeyboardInputTracker } from \"../../hooks/useKeyboardInputTracker\";\nimport { useInsets } from \"../../hooks/useInsets\";\nimport { Insets } from \"@vkontakte/vk-bridge\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\nimport { isRefObject } from \"../../lib/isRefObject\";\nimport \"./AppRoot.css\";\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Pick<AdaptivityProps, \"sizeX\" | \"hasMouse\"> {\n /** @deprecated Use mode=\"embedded\" */\n embedded?: boolean;\n /** Режим встраивания */\n mode?: \"partial\" | \"embedded\" | \"full\";\n window?: Window;\n /** Убирает классы без префикса (.Button) */\n noLegacyClasses?: boolean;\n scroll?: \"global\" | \"contain\";\n /** Элемент используемый в качестве root для порталов\n * При передаче своего элемента необходимо задать ему class=\"vkui__portal-root\" и добавить в DOM\n */\n // TODO: v5.0.0 изменить тип на HTMLElement\n portalRoot?: HTMLDivElement | React.RefObject<HTMLDivElement> | null;\n /** Disable portal for components */\n disablePortal?: boolean;\n}\n\nconst warn = warnOnce(\"AppRoot\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = withAdaptivity<AppRootProps>(\n ({\n children,\n mode: _mode,\n embedded: _embedded,\n sizeX,\n hasMouse,\n noLegacyClasses = false,\n scroll = \"global\",\n portalRoot: portalRootProp = null,\n disablePortal,\n ...props\n }) => {\n // normalize mode\n const mode = _mode || (_embedded ? \"embedded\" : \"full\");\n const isKeyboardInputActive = useKeyboardInputTracker();\n const rootRef = React.useRef<HTMLDivElement | null>(null);\n const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement | null>(\n null\n );\n const { document } = useDOM();\n const insets = useInsets();\n const { appearance } = React.useContext(ConfigProviderContext);\n\n classScopingMode.noConflict = noLegacyClasses;\n\n if (process.env.NODE_ENV === \"development\") {\n if (scroll !== \"global\" && mode !== \"embedded\") {\n warn(\n `Свойство scroll=\"${scroll}\" поддерживается только в режиме embedded`,\n \"error\"\n );\n }\n if (_mode && _embedded) {\n warn(`Свойство mode=\"${mode}\" приоритетнее, чем \"embedded\"`);\n }\n }\n\n // setup portal\n useIsomorphicLayoutEffect(() => {\n let portal: HTMLDivElement | null = null;\n if (portalRootProp) {\n if (isRefObject(portalRootProp)) {\n portal = portalRootProp.current;\n } else {\n portal = portalRootProp;\n }\n }\n if (!portal) {\n portal = document!.createElement(\"div\");\n portal.classList.add(\"vkui__portal-root\");\n document!.body.appendChild(portal);\n }\n setPortalRoot(portal);\n return () => {\n portal?.parentElement?.removeChild(portal);\n };\n }, [portalRootProp]);\n\n // setup root classes\n useIsomorphicLayoutEffect(() => {\n if (mode === \"partial\") {\n return noop;\n }\n\n const parent = rootRef.current?.parentElement;\n const classes = [\"vkui__root\"].concat(\n mode === \"embedded\" ? \"vkui__root--embedded\" : []\n );\n parent?.classList.add(...classes);\n\n return () => {\n parent?.classList.remove(...classes);\n };\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n if (mode === \"full\") {\n document!.documentElement.classList.add(\"vkui\");\n\n return () => {\n document!.documentElement.classList.remove(\"vkui\");\n };\n }\n\n return undefined;\n }, [document, mode]);\n\n // setup insets\n useIsomorphicLayoutEffect(() => {\n if (mode === \"partial\" || !rootRef.current?.parentElement) {\n return noop;\n }\n\n const parent = rootRef.current.parentElement;\n\n for (const key in insets) {\n if (\n insets.hasOwnProperty(key) &&\n typeof insets[key as keyof Insets] === \"number\"\n ) {\n const inset = insets[key as keyof Insets];\n parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);\n portalRoot &&\n portalRoot.style.setProperty(\n `--safe-area-inset-${key}`,\n `${inset}px`\n );\n }\n }\n\n return () => {\n for (const key in insets) {\n if (insets.hasOwnProperty(key)) {\n parent.style.removeProperty(`--safe-area-inset-${key}`);\n portalRoot &&\n portalRoot.style.removeProperty(`--safe-area-inset-${key}`);\n }\n }\n };\n }, [insets, portalRoot]);\n\n // adaptivity handler\n useIsomorphicLayoutEffect(() => {\n if (mode === \"partial\" || sizeX !== SizeType.REGULAR) {\n return noop;\n }\n const container =\n mode === \"embedded\" ? rootRef.current?.parentElement : document!.body;\n container?.classList.add(\"vkui--sizeX-regular\");\n return () => container?.classList.remove(\"vkui--sizeX-regular\");\n }, [sizeX]);\n\n useIsomorphicLayoutEffect(() => {\n if (mode !== \"full\" || appearance === undefined) {\n return noop;\n }\n document!.documentElement.style.setProperty(\"color-scheme\", appearance);\n\n return () =>\n document!.documentElement.style.removeProperty(\"color-scheme\");\n }, [appearance]);\n\n const ScrollController = React.useMemo(\n () =>\n scroll === \"contain\" ? ElementScrollController : GlobalScrollController,\n [scroll]\n );\n\n const content = (\n <AppRootContext.Provider\n value={{\n appRoot: rootRef,\n portalRoot,\n embedded: mode === \"embedded\",\n keyboardInput: isKeyboardInputActive,\n mode,\n disablePortal,\n }}\n >\n <ScrollController elRef={rootRef}>\n <IconSettingsProvider\n classPrefix=\"vkui\"\n globalClasses={!noLegacyClasses}\n >\n {children}\n </IconSettingsProvider>\n </ScrollController>\n </AppRootContext.Provider>\n );\n\n return mode === \"partial\" ? (\n content\n ) : (\n <div\n ref={rootRef}\n vkuiClass={classNames(\"AppRoot\", !hasMouse && \"AppRoot--no-mouse\")}\n {...props}\n >\n {content}\n </div>\n );\n },\n {\n sizeX: true,\n hasMouse: true,\n }\n);\n\nAppRoot.displayName = \"AppRoot\";\n"],"file":"AppRoot.js"}
|
|
@@ -89,11 +89,7 @@ export var Avatar = function Avatar(_ref) {
|
|
|
89
89
|
|
|
90
90
|
var hasSrc = src || srcSet;
|
|
91
91
|
return createScopedElement("div", _extends({}, restProps, {
|
|
92
|
-
|
|
93
|
-
vkuiClass: classNames("Avatar", "Avatar--type-".concat(mode), "Avatar--sz-".concat(size), {
|
|
94
|
-
"Avatar--shadow": shadow,
|
|
95
|
-
"Avatar--failed": failedImage
|
|
96
|
-
}),
|
|
92
|
+
vkuiClass: classNames("Avatar", "Avatar--type-".concat(mode), "Avatar--sz-".concat(size), shadow && "Avatar--shadow", failedImage && "Avatar--failed"),
|
|
97
93
|
className: className,
|
|
98
94
|
ref: getRootRef,
|
|
99
95
|
role: hasSrc ? "img" : "presentation",
|
|
@@ -123,23 +119,14 @@ export var Avatar = function Avatar(_ref) {
|
|
|
123
119
|
}), children && createScopedElement("div", {
|
|
124
120
|
vkuiClass: "Avatar__children"
|
|
125
121
|
}, children), overlayIcon && createScopedElement(Tappable, {
|
|
126
|
-
Component: "button"
|
|
127
|
-
,
|
|
128
|
-
vkuiClass: classNames("Avatar__overlay", {
|
|
129
|
-
"Avatar__overlay--visible": overlayAction === "always",
|
|
130
|
-
"Avatar__overlay--light": overlayMode === "light",
|
|
131
|
-
"Avatar__overlay--dark": overlayMode === "dark"
|
|
132
|
-
}),
|
|
122
|
+
Component: "button",
|
|
123
|
+
vkuiClass: classNames("Avatar__overlay", overlayAction === "always" && "Avatar__overlay--visible", overlayMode === "light" && "Avatar__overlay--light", overlayMode === "dark" && "Avatar__overlay--dark"),
|
|
133
124
|
hoverMode: "Avatar__overlay--visible",
|
|
134
125
|
focusVisibleMode: "Avatar__overlay--focus-visible",
|
|
135
126
|
hasActive: false,
|
|
136
127
|
onClick: onClick
|
|
137
128
|
}, overlayIcon), badge && createScopedElement("div", {
|
|
138
|
-
|
|
139
|
-
vkuiClass: classNames("Avatar__badge", {
|
|
140
|
-
"Avatar__badge--large": size >= 96,
|
|
141
|
-
"Avatar__badge--shadow": badge !== "online" && badge !== "online-mobile"
|
|
142
|
-
})
|
|
129
|
+
vkuiClass: classNames("Avatar__badge", size >= 96 && "Avatar__badge--large", badge !== "online" && badge !== "online-mobile" && "Avatar__badge--shadow")
|
|
143
130
|
}, badge === "online" ? createScopedElement("div", {
|
|
144
131
|
vkuiClass: "Avatar__badge-online"
|
|
145
132
|
}, createScopedElement(Icon12Circle, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":["React","Icon12Circle","Icon12OnlineMobile","classNames","useAdaptivity","Tappable","AVATAR_DEFAULT_SIZE","AVATAR_DEFAULT_SHADOW","Avatar","alt","crossOrigin","decoding","height","loading","referrerPolicy","sizes","src","srcSet","useMap","width","getRef","size","shadow","mode","className","children","getRootRef","style","ariaLabel","badge","overlayIcon","overlayMode","passedOverlayAction","overlayAction","onClick","restProps","hasMouse","useState","failedImage","setFailedImage","onImageError","onImageLoad","borderRadius","hasSrc","undefined"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Icon12Circle, Icon12OnlineMobile } from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport \"./Avatar.css\";\n\nexport interface AvatarProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /**\n * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24\n */\n size?: number;\n mode?: \"default\" | \"image\" | \"app\";\n shadow?: boolean;\n badge?: \"online\" | \"online-mobile\" | JSX.Element;\n overlayIcon?: JSX.Element;\n overlayMode?: \"dark\" | \"light\";\n /**\n * Поведение показа overlay: \"hover\" - при наведении, \"always\" - всегда\n */\n overlayAction?: \"hover\" | \"always\";\n}\n\nexport const AVATAR_DEFAULT_SIZE = 48;\nexport const AVATAR_DEFAULT_SHADOW = true;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n alt,\n crossOrigin,\n decoding,\n height,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n width,\n getRef,\n size = AVATAR_DEFAULT_SIZE,\n shadow = AVATAR_DEFAULT_SHADOW,\n mode = \"default\",\n className,\n children,\n getRootRef,\n style,\n \"aria-label\": ariaLabel,\n badge,\n overlayIcon,\n overlayMode = \"light\",\n overlayAction: passedOverlayAction,\n onClick,\n ...restProps\n}: AvatarProps) => {\n const { hasMouse } = useAdaptivity();\n const [failedImage, setFailedImage] = React.useState(false);\n\n const overlayAction = passedOverlayAction ?? (hasMouse ? \"hover\" : \"always\");\n\n const onImageError = () => {\n setFailedImage(true);\n };\n\n const onImageLoad = () => {\n setFailedImage(false);\n };\n\n let borderRadius: string | number = \"50%\";\n\n switch (mode) {\n case \"image\":\n size < 64 && (borderRadius = 4);\n size >= 64 && size < 96 && (borderRadius = 6);\n size >= 96 && (borderRadius = 8);\n break;\n case \"app\":\n size <= 40 && (borderRadius = 8);\n size > 40 && size < 56 && (borderRadius = 10);\n size >= 56 && size < 64 && (borderRadius = 12);\n size >= 64 && size < 84 && (borderRadius = 16);\n size >= 84 && (borderRadius = 18);\n break;\n default:\n break;\n }\n\n const hasSrc = src || srcSet;\n\n return (\n <div\n {...restProps}\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\n \"Avatar\",\n `Avatar--type-${mode}`,\n `Avatar--sz-${size}`,\n {\n \"Avatar--shadow\": shadow,\n \"Avatar--failed\": failedImage,\n }\n )}\n className={className}\n ref={getRootRef}\n role={hasSrc ? \"img\" : \"presentation\"}\n aria-label={alt || ariaLabel}\n onClick={!overlayIcon ? onClick : undefined}\n style={{ ...style, width: size, height: size, borderRadius }}\n >\n {hasSrc && (\n <img\n crossOrigin={crossOrigin}\n decoding={decoding}\n height={height}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n ref={getRef}\n onError={onImageError}\n onLoad={onImageLoad}\n vkuiClass=\"Avatar__img\"\n alt=\"\"\n />\n )}\n {children && <div vkuiClass=\"Avatar__children\">{children}</div>}\n {overlayIcon && (\n <Tappable\n Component=\"button\"\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\"Avatar__overlay\", {\n \"Avatar__overlay--visible\": overlayAction === \"always\",\n \"Avatar__overlay--light\": overlayMode === \"light\",\n \"Avatar__overlay--dark\": overlayMode === \"dark\",\n })}\n hoverMode=\"Avatar__overlay--visible\"\n focusVisibleMode=\"Avatar__overlay--focus-visible\"\n hasActive={false}\n onClick={onClick}\n >\n {overlayIcon}\n </Tappable>\n )}\n {badge && (\n <div\n // eslint-disable-next-line vkui/no-object-expression-in-arguments\n vkuiClass={classNames(\"Avatar__badge\", {\n \"Avatar__badge--large\": size >= 96,\n \"Avatar__badge--shadow\":\n badge !== \"online\" && badge !== \"online-mobile\",\n })}\n >\n {badge === \"online\" ? (\n <div vkuiClass=\"Avatar__badge-online\">\n <Icon12Circle\n width={size >= 72 ? 15 : 12}\n height={size >= 72 ? 15 : 12}\n />\n </div>\n ) : badge === \"online-mobile\" ? (\n <div vkuiClass=\"Avatar__badge-online-mobile\">\n <Icon12OnlineMobile\n width={size >= 72 ? 9 : 8}\n height={size >= 72 ? 15 : 12}\n />\n </div>\n ) : (\n badge\n )}\n </div>\n )}\n </div>\n );\n};\n"],"file":"Avatar.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":["React","Icon12Circle","Icon12OnlineMobile","classNames","useAdaptivity","Tappable","AVATAR_DEFAULT_SIZE","AVATAR_DEFAULT_SHADOW","Avatar","alt","crossOrigin","decoding","height","loading","referrerPolicy","sizes","src","srcSet","useMap","width","getRef","size","shadow","mode","className","children","getRootRef","style","ariaLabel","badge","overlayIcon","overlayMode","passedOverlayAction","overlayAction","onClick","restProps","hasMouse","useState","failedImage","setFailedImage","onImageError","onImageLoad","borderRadius","hasSrc","undefined"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Icon12Circle, Icon12OnlineMobile } from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport \"./Avatar.css\";\n\nexport interface AvatarProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /**\n * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24\n */\n size?: number;\n mode?: \"default\" | \"image\" | \"app\";\n shadow?: boolean;\n badge?: \"online\" | \"online-mobile\" | JSX.Element;\n overlayIcon?: JSX.Element;\n overlayMode?: \"dark\" | \"light\";\n /**\n * Поведение показа overlay: \"hover\" - при наведении, \"always\" - всегда\n */\n overlayAction?: \"hover\" | \"always\";\n}\n\nexport const AVATAR_DEFAULT_SIZE = 48;\nexport const AVATAR_DEFAULT_SHADOW = true;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Avatar\n */\nexport const Avatar = ({\n alt,\n crossOrigin,\n decoding,\n height,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n width,\n getRef,\n size = AVATAR_DEFAULT_SIZE,\n shadow = AVATAR_DEFAULT_SHADOW,\n mode = \"default\",\n className,\n children,\n getRootRef,\n style,\n \"aria-label\": ariaLabel,\n badge,\n overlayIcon,\n overlayMode = \"light\",\n overlayAction: passedOverlayAction,\n onClick,\n ...restProps\n}: AvatarProps) => {\n const { hasMouse } = useAdaptivity();\n const [failedImage, setFailedImage] = React.useState(false);\n\n const overlayAction = passedOverlayAction ?? (hasMouse ? \"hover\" : \"always\");\n\n const onImageError = () => {\n setFailedImage(true);\n };\n\n const onImageLoad = () => {\n setFailedImage(false);\n };\n\n let borderRadius: string | number = \"50%\";\n\n switch (mode) {\n case \"image\":\n size < 64 && (borderRadius = 4);\n size >= 64 && size < 96 && (borderRadius = 6);\n size >= 96 && (borderRadius = 8);\n break;\n case \"app\":\n size <= 40 && (borderRadius = 8);\n size > 40 && size < 56 && (borderRadius = 10);\n size >= 56 && size < 64 && (borderRadius = 12);\n size >= 64 && size < 84 && (borderRadius = 16);\n size >= 84 && (borderRadius = 18);\n break;\n default:\n break;\n }\n\n const hasSrc = src || srcSet;\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n \"Avatar\",\n `Avatar--type-${mode}`,\n `Avatar--sz-${size}`,\n shadow && \"Avatar--shadow\",\n failedImage && \"Avatar--failed\"\n )}\n className={className}\n ref={getRootRef}\n role={hasSrc ? \"img\" : \"presentation\"}\n aria-label={alt || ariaLabel}\n onClick={!overlayIcon ? onClick : undefined}\n style={{ ...style, width: size, height: size, borderRadius }}\n >\n {hasSrc && (\n <img\n crossOrigin={crossOrigin}\n decoding={decoding}\n height={height}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n ref={getRef}\n onError={onImageError}\n onLoad={onImageLoad}\n vkuiClass=\"Avatar__img\"\n alt=\"\"\n />\n )}\n {children && <div vkuiClass=\"Avatar__children\">{children}</div>}\n {overlayIcon && (\n <Tappable\n Component=\"button\"\n vkuiClass={classNames(\n \"Avatar__overlay\",\n overlayAction === \"always\" && \"Avatar__overlay--visible\",\n overlayMode === \"light\" && \"Avatar__overlay--light\",\n overlayMode === \"dark\" && \"Avatar__overlay--dark\"\n )}\n hoverMode=\"Avatar__overlay--visible\"\n focusVisibleMode=\"Avatar__overlay--focus-visible\"\n hasActive={false}\n onClick={onClick}\n >\n {overlayIcon}\n </Tappable>\n )}\n {badge && (\n <div\n vkuiClass={classNames(\n \"Avatar__badge\",\n size >= 96 && \"Avatar__badge--large\",\n badge !== \"online\" &&\n badge !== \"online-mobile\" &&\n \"Avatar__badge--shadow\"\n )}\n >\n {badge === \"online\" ? (\n <div vkuiClass=\"Avatar__badge-online\">\n <Icon12Circle\n width={size >= 72 ? 15 : 12}\n height={size >= 72 ? 15 : 12}\n />\n </div>\n ) : badge === \"online-mobile\" ? (\n <div vkuiClass=\"Avatar__badge-online-mobile\">\n <Icon12OnlineMobile\n width={size >= 72 ? 9 : 8}\n height={size >= 72 ? 15 : 12}\n />\n </div>\n ) : (\n badge\n )}\n </div>\n )}\n </div>\n );\n};\n"],"file":"Avatar.js"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["size"]
|
|
4
|
-
_excluded2 = ["mode", "imageTheme", "size", "before", "asideMode", "header", "subheader", "text", "children", "background", "actions", "onDismiss", "dismissLabel"];
|
|
3
|
+
var _excluded = ["mode", "imageTheme", "size", "before", "asideMode", "header", "subheader", "text", "children", "background", "actions", "onDismiss", "dismissLabel"];
|
|
5
4
|
import { createScopedElement } from "../../lib/jsxRuntime";
|
|
6
5
|
import * as React from "react";
|
|
7
6
|
import { classNames } from "../../lib/classNames";
|
|
@@ -17,62 +16,45 @@ import { Text } from "../Typography/Text/Text";
|
|
|
17
16
|
import { Title } from "../Typography/Title/Title";
|
|
18
17
|
import "./Banner.css";
|
|
19
18
|
|
|
20
|
-
var BannerHeader = function BannerHeader(_ref) {
|
|
21
|
-
var size = _ref.size,
|
|
22
|
-
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
-
|
|
24
|
-
return size === "m" ? createScopedElement(Title, _extends({
|
|
25
|
-
level: "2",
|
|
26
|
-
weight: "2"
|
|
27
|
-
}, restProps)) : createScopedElement(Headline, _extends({
|
|
28
|
-
weight: "2"
|
|
29
|
-
}, restProps));
|
|
30
|
-
};
|
|
31
19
|
/**
|
|
32
20
|
* @see https://vkcom.github.io/VKUI/#/Banner
|
|
33
21
|
*/
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
dismissLabel = _ref2$dismissLabel === void 0 ? "Скрыть" : _ref2$dismissLabel,
|
|
54
|
-
restProps = _objectWithoutProperties(_ref2, _excluded2);
|
|
22
|
+
export var Banner = function Banner(_ref) {
|
|
23
|
+
var _ref$mode = _ref.mode,
|
|
24
|
+
mode = _ref$mode === void 0 ? "tint" : _ref$mode,
|
|
25
|
+
_ref$imageTheme = _ref.imageTheme,
|
|
26
|
+
imageTheme = _ref$imageTheme === void 0 ? "dark" : _ref$imageTheme,
|
|
27
|
+
_ref$size = _ref.size,
|
|
28
|
+
size = _ref$size === void 0 ? "s" : _ref$size,
|
|
29
|
+
before = _ref.before,
|
|
30
|
+
asideMode = _ref.asideMode,
|
|
31
|
+
header = _ref.header,
|
|
32
|
+
subheader = _ref.subheader,
|
|
33
|
+
text = _ref.text,
|
|
34
|
+
children = _ref.children,
|
|
35
|
+
background = _ref.background,
|
|
36
|
+
actions = _ref.actions,
|
|
37
|
+
onDismiss = _ref.onDismiss,
|
|
38
|
+
_ref$dismissLabel = _ref.dismissLabel,
|
|
39
|
+
dismissLabel = _ref$dismissLabel === void 0 ? "Скрыть" : _ref$dismissLabel,
|
|
40
|
+
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
55
41
|
|
|
56
42
|
var platform = usePlatform();
|
|
43
|
+
var HeaderTypography = size === "m" ? Title : Headline;
|
|
57
44
|
var SubheaderTypography = size === "m" ? Text : Subhead;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}), createScopedElement(Tappable, {
|
|
61
|
-
vkuiClass: "Banner__in",
|
|
62
|
-
activeMode: platform === IOS ? "opacity" : "background",
|
|
63
|
-
disabled: asideMode !== "expand",
|
|
64
|
-
role: asideMode === "expand" ? "button" : undefined
|
|
65
|
-
}, mode === "image" && background && createScopedElement("div", {
|
|
45
|
+
var IconDismissIOS = mode === "image" ? Icon24DismissDark : Icon24DismissSubstract;
|
|
46
|
+
var content = createScopedElement(React.Fragment, null, mode === "image" && background && createScopedElement("div", {
|
|
66
47
|
"aria-hidden": "true",
|
|
67
48
|
vkuiClass: "Banner__bg"
|
|
68
49
|
}, background), before && createScopedElement("div", {
|
|
69
50
|
vkuiClass: "Banner__before"
|
|
70
51
|
}, before), createScopedElement("div", {
|
|
71
52
|
vkuiClass: "Banner__content"
|
|
72
|
-
}, hasReactNode(header) && createScopedElement(
|
|
73
|
-
size: size,
|
|
53
|
+
}, hasReactNode(header) && createScopedElement(HeaderTypography, {
|
|
74
54
|
Component: "span",
|
|
75
|
-
vkuiClass: "Banner__header"
|
|
55
|
+
vkuiClass: "Banner__header",
|
|
56
|
+
weight: "2",
|
|
57
|
+
level: size === "m" ? "2" : "1"
|
|
76
58
|
}, header), hasReactNode(subheader) && createScopedElement(SubheaderTypography, {
|
|
77
59
|
Component: "span",
|
|
78
60
|
vkuiClass: "Banner__subheader"
|
|
@@ -80,14 +62,25 @@ export var Banner = function Banner(_ref2) {
|
|
|
80
62
|
vkuiClass: "Banner__text"
|
|
81
63
|
}, text), hasReactNode(actions) && React.Children.count(actions) > 0 && createScopedElement("div", {
|
|
82
64
|
vkuiClass: "Banner__actions"
|
|
83
|
-
}, actions))
|
|
65
|
+
}, actions)));
|
|
66
|
+
return createScopedElement("section", _extends({}, restProps, {
|
|
67
|
+
vkuiClass: classNames("Banner", platform === IOS && "Banner--ios", "Banner--md-".concat(mode), "Banner--sz-".concat(size), mode === "image" && imageTheme === "dark" && "Banner--inverted")
|
|
68
|
+
}), asideMode === "expand" ? createScopedElement(Tappable, {
|
|
69
|
+
vkuiClass: "Banner__in",
|
|
70
|
+
activeMode: platform === IOS ? "opacity" : "background",
|
|
71
|
+
role: "button"
|
|
72
|
+
}, content, createScopedElement("div", {
|
|
73
|
+
vkuiClass: "Banner__aside"
|
|
74
|
+
}, createScopedElement(Icon24Chevron, null))) : createScopedElement("div", {
|
|
75
|
+
vkuiClass: "Banner__in"
|
|
76
|
+
}, content, asideMode === "dismiss" && createScopedElement("div", {
|
|
84
77
|
vkuiClass: "Banner__aside"
|
|
85
|
-
},
|
|
78
|
+
}, createScopedElement(IconButton, {
|
|
86
79
|
"aria-label": dismissLabel,
|
|
87
80
|
vkuiClass: "Banner__dismiss",
|
|
88
81
|
onClick: onDismiss,
|
|
89
82
|
hoverMode: "opacity",
|
|
90
83
|
hasActive: false
|
|
91
|
-
}, platform === IOS ?
|
|
84
|
+
}, platform === IOS ? createScopedElement(IconDismissIOS, null) : createScopedElement(Icon24Cancel, null)))));
|
|
92
85
|
};
|
|
93
86
|
//# sourceMappingURL=Banner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["React","classNames","usePlatform","IOS","hasReactNode","Icon24Chevron","Icon24DismissSubstract","Icon24DismissDark","Icon24Cancel","Tappable","IconButton","Headline","Subhead","Text","Title","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["React","classNames","usePlatform","IOS","hasReactNode","Icon24Chevron","Icon24DismissSubstract","Icon24DismissDark","Icon24Cancel","Tappable","IconButton","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","Children","count"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS } from \"../../lib/platform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport {\n Icon24Chevron,\n Icon24DismissSubstract,\n Icon24DismissDark,\n Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { Title } from \"../Typography/Title/Title\";\nimport \"./Banner.css\";\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Тип баннера.\n */\n mode?: \"tint\" | \"image\";\n size?: \"s\" | \"m\";\n /**\n * Тип действия в правой части баннера.\n *\n * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n */\n asideMode?: \"dismiss\" | \"expand\";\n /**\n * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n */\n dismissLabel?: string;\n /**\n * Содержимое, отображаемое в левой части баннера.\n */\n before?: React.ReactNode;\n /**\n * Заголовок. <br />\n * При использовании этого свойства рекомендуется не указывать `text`.\n */\n header?: React.ReactNode;\n /**\n * Подзаголовок. <br />\n * При использовании этого свойства рекомендуется не указывать `text`.\n */\n subheader?: React.ReactNode;\n /**\n * Текст баннера. <br />\n * Это свойство следует использовать без указания `header` и `subheader`.\n */\n text?: React.ReactNode;\n /**\n * При использовании `mode=\"image\"`.\n *\n * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n */\n imageTheme?: \"light\" | \"dark\";\n /**\n * При использовании `mode=\"image\"`.\n *\n * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n */\n background?: React.ReactNode;\n /**\n * Кнопки, отображаемые в баннере.\n *\n * - В режиме `tint` или в `image` со светлым фоном рекомендуется использовать только `<Button mode=\"primary\" />` или `<Button mode=\"tertiary\" hasHover={false} />`.\n * - В режиме `image` с тёмным фоном – `<Button mode=\"overlay_primary\" />`.\n */\n actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n mode = \"tint\",\n imageTheme = \"dark\",\n size = \"s\",\n before,\n asideMode,\n header,\n subheader,\n text,\n children,\n background,\n actions,\n onDismiss,\n dismissLabel = \"Скрыть\",\n ...restProps\n}: BannerProps) => {\n const platform = usePlatform();\n\n const HeaderTypography = size === \"m\" ? Title : Headline;\n const SubheaderTypography = size === \"m\" ? Text : Subhead;\n\n const IconDismissIOS =\n mode === \"image\" ? Icon24DismissDark : Icon24DismissSubstract;\n\n const content = (\n <React.Fragment>\n {mode === \"image\" && background && (\n <div aria-hidden=\"true\" vkuiClass=\"Banner__bg\">\n {background}\n </div>\n )}\n\n {before && <div vkuiClass=\"Banner__before\">{before}</div>}\n\n <div vkuiClass=\"Banner__content\">\n {hasReactNode(header) && (\n <HeaderTypography\n Component=\"span\"\n vkuiClass=\"Banner__header\"\n weight=\"2\"\n level={size === \"m\" ? \"2\" : \"1\"}\n >\n {header}\n </HeaderTypography>\n )}\n {hasReactNode(subheader) && (\n <SubheaderTypography Component=\"span\" vkuiClass=\"Banner__subheader\">\n {subheader}\n </SubheaderTypography>\n )}\n {hasReactNode(text) && <Text vkuiClass=\"Banner__text\">{text}</Text>}\n {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n <div vkuiClass=\"Banner__actions\">{actions}</div>\n )}\n </div>\n </React.Fragment>\n );\n\n return (\n <section\n {...restProps}\n vkuiClass={classNames(\n \"Banner\",\n platform === IOS && \"Banner--ios\",\n `Banner--md-${mode}`,\n `Banner--sz-${size}`,\n mode === \"image\" && imageTheme === \"dark\" && \"Banner--inverted\"\n )}\n >\n {asideMode === \"expand\" ? (\n <Tappable\n vkuiClass=\"Banner__in\"\n activeMode={platform === IOS ? \"opacity\" : \"background\"}\n role=\"button\"\n >\n {content}\n\n <div vkuiClass=\"Banner__aside\">\n <Icon24Chevron />\n </div>\n </Tappable>\n ) : (\n <div vkuiClass=\"Banner__in\">\n {content}\n\n {asideMode === \"dismiss\" && (\n <div vkuiClass=\"Banner__aside\">\n <IconButton\n aria-label={dismissLabel}\n vkuiClass=\"Banner__dismiss\"\n onClick={onDismiss}\n hoverMode=\"opacity\"\n hasActive={false}\n >\n {platform === IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n </IconButton>\n </div>\n )}\n </div>\n )}\n </section>\n );\n};\n"],"file":"Banner.js"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import type { HasRootRef,
|
|
2
|
+
import type { HasRootRef, AlignType } from "../../types";
|
|
3
3
|
import "./ButtonGroup.css";
|
|
4
|
-
export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement
|
|
4
|
+
export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
|
|
5
5
|
/**
|
|
6
6
|
* Задает расположение элементов внутри группы, вертикальное или горизонтальное.
|
|
7
7
|
*/
|
|
@@ -16,6 +16,10 @@ export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>,
|
|
|
16
16
|
* Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.
|
|
17
17
|
*/
|
|
18
18
|
stretched?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Горизонтальное выравнивание элементов внутри группы. Работает только с mode="vertical".
|
|
21
|
+
*/
|
|
22
|
+
align?: AlignType;
|
|
19
23
|
}
|
|
20
24
|
/**
|
|
21
25
|
* @see https://vkcom.github.io/VKUI/#/ButtonGroup
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["classNames","ButtonGroup","mode","gap","stretched","align","getRootRef","children","restProps"],"mappings":";;;;AACA,SAASA,UAAT;AAEA;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["classNames","ButtonGroup","mode","gap","stretched","align","getRootRef","children","restProps"],"mappings":";;;;AACA,SAASA,UAAT;AAEA;;AAyBA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAQH;AAAA,uBAPtBC,IAOsB;AAAA,MAPtBA,IAOsB,0BAPf,YAOe;AAAA,sBANtBC,GAMsB;AAAA,MANtBA,GAMsB,yBANhB,GAMgB;AAAA,4BALtBC,SAKsB;AAAA,MALtBA,SAKsB,+BALV,KAKU;AAAA,wBAJtBC,KAIsB;AAAA,MAJtBA,KAIsB,2BAJd,MAIc;AAAA,MAHtBC,UAGsB,QAHtBA,UAGsB;AAAA,MAFtBC,QAEsB,QAFtBA,QAEsB;AAAA,MADnBC,SACmB;;AACtB,SACE;AACE,IAAA,SAAS,EAAER,UAAU,CACnB,aADmB,8BAEEE,IAFF,GAGnBC,GAAG,KAAK,MAAR,+BAAsCA,GAAtC,CAHmB,EAInBC,SAAS,IAAI,wBAJM,+BAKGC,KALH,EADvB;AAQE,IAAA,IAAI,EAAC,OARP;AASE,IAAA,GAAG,EAAEC;AATP,KAUME,SAVN,GAYGD,QAZH,CADF;AAgBD,CAzBM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport type { HasRootRef, AlignType } from \"../../types\";\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n /**\n * Задает расположение элементов внутри группы, вертикальное или горизонтальное.\n */\n mode?: \"vertical\" | \"horizontal\";\n /**\n * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.\n */\n gap?: \"none\" | \"space\" | \"s\" | \"m\";\n /**\n * Растягивает компонент на всю ширину контейнера.\n *\n * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.\n */\n stretched?: boolean;\n /**\n * Горизонтальное выравнивание элементов внутри группы. Работает только с mode=\"vertical\".\n */\n align?: AlignType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ButtonGroup\n */\nexport const ButtonGroup = ({\n mode = \"horizontal\",\n gap = \"m\",\n stretched = false,\n align = \"left\" /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,\n getRootRef,\n children,\n ...restProps\n}: ButtonGroupProps) => {\n return (\n <div\n vkuiClass={classNames(\n \"ButtonGroup\",\n `ButtonGroup--mode-${mode}`,\n gap !== \"none\" && `ButtonGroup--gap-${gap}`,\n stretched && \"ButtonGroup--stretched\",\n `ButtonGroup--align-${align}`\n )}\n role=\"group\"\n ref={getRootRef}\n {...restProps}\n >\n {children}\n </div>\n );\n};\n"],"file":"ButtonGroup.js"}
|