@vkontakte/vkui 4.27.1 → 4.28.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 +11910 -4711
- package/.cache/ts/src/components/Button/Button.d.ts +1 -1
- package/.cache/ts/src/components/ButtonGroup/ButtonGroup.d.ts +20 -0
- package/.cache/ts/src/components/Calendar/Calendar.d.ts +21 -0
- package/.cache/ts/src/components/CalendarDay/CalendarDay.d.ts +22 -0
- package/.cache/ts/src/components/CalendarDays/CalendarDays.d.ts +22 -0
- package/.cache/ts/src/components/CalendarHeader/CalendarHeader.d.ts +16 -0
- package/.cache/ts/src/components/CalendarRange/CalendarRange.d.ts +16 -0
- package/.cache/ts/src/components/CalendarTime/CalendarTime.d.ts +11 -0
- package/.cache/ts/src/components/ChipsSelect/ChipsSelect.d.ts +1 -2
- package/.cache/ts/src/components/ConfigProvider/ConfigProvider.d.ts +4 -0
- package/.cache/ts/src/components/ConfigProvider/ConfigProviderContext.d.ts +0 -7
- package/.cache/ts/src/components/CustomScrollView/CustomScrollView.d.ts +1 -1
- package/.cache/ts/src/components/CustomSelect/CustomSelect.d.ts +10 -1
- package/.cache/ts/src/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +4 -1
- package/.cache/ts/src/components/DateInput/DateInput.d.ts +12 -0
- package/.cache/ts/src/components/DateRangeInput/DateRangeInput.d.ts +18 -0
- package/.cache/ts/src/components/Div/Div.d.ts +1 -2
- package/.cache/ts/src/components/IconButton/IconButton.d.ts +1 -1
- package/.cache/ts/src/components/InputLike/InputLike.d.ts +10 -0
- package/.cache/ts/src/components/InputLike/InputLikeDivider.d.ts +3 -0
- package/.cache/ts/src/components/LocaleProviderContext/LocaleProviderContext.d.ts +2 -0
- package/.cache/ts/src/components/Pagination/Pagination.d.ts +42 -0
- package/.cache/ts/src/components/PanelHeaderBack/PanelHeaderBack.d.ts +1 -1
- package/.cache/ts/src/components/RichCell/RichCell.d.ts +3 -2
- package/.cache/ts/src/components/Select/Select.d.ts +1 -1
- package/.cache/ts/src/components/SelectMimicry/SelectMimicry.d.ts +5 -1
- package/.cache/ts/src/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/.cache/ts/src/components/SimpleCheckbox/SimpleCheckbox.d.ts +0 -1
- package/.cache/ts/src/components/Tappable/Tappable.d.ts +3 -1
- package/.cache/ts/src/components/Typography/Caption/Caption.d.ts +8 -4
- package/.cache/ts/src/components/Typography/Subhead/Subhead.d.ts +6 -1
- package/.cache/ts/src/components/Typography/Title/Title.d.ts +3 -1
- package/.cache/ts/src/components/View/ViewInfinite.d.ts +2 -2
- package/.cache/ts/src/helpers/typography.d.ts +1 -0
- package/.cache/ts/src/hooks/useBooleanState.d.ts +6 -0
- package/.cache/ts/src/hooks/useCalendar.d.ts +18 -0
- package/.cache/ts/src/hooks/useDateInput.d.ts +30 -0
- package/.cache/ts/src/hooks/useKeyboardInputTracker.d.ts +2 -0
- package/.cache/ts/src/hooks/useOrientationChange.d.ts +7 -0
- package/.cache/ts/src/hooks/usePagination.d.ts +34 -0
- package/.cache/ts/src/index.d.ts +12 -2
- package/.cache/ts/src/lib/calendar.d.ts +14 -0
- package/.cache/ts/src/lib/utils.d.ts +2 -1
- package/.cache/ts/src/tokenized/index.d.ts +14 -0
- package/.cache/ts/src/unstable/index.d.ts +6 -6
- package/CONTRIBUTING.md +3 -2
- package/CSS_GUIDE.md +145 -0
- package/dist/cjs/components/ActionSheet/ActionSheet.js +4 -7
- package/dist/cjs/components/ActionSheet/ActionSheet.js.map +1 -1
- package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js +3 -6
- package/dist/cjs/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
- package/dist/cjs/components/Alert/Alert.js +5 -8
- package/dist/cjs/components/Alert/Alert.js.map +1 -1
- package/dist/cjs/components/Banner/Banner.js +1 -3
- package/dist/cjs/components/Banner/Banner.js.map +1 -1
- package/dist/cjs/components/Button/Button.d.ts +1 -1
- package/dist/cjs/components/Button/Button.js +7 -11
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/ButtonGroup/ButtonGroup.d.ts +20 -0
- package/dist/cjs/components/ButtonGroup/ButtonGroup.js +38 -0
- package/dist/cjs/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/dist/cjs/components/Calendar/Calendar.d.ts +21 -0
- package/dist/cjs/components/Calendar/Calendar.js +160 -0
- package/dist/cjs/components/Calendar/Calendar.js.map +1 -0
- package/dist/cjs/components/CalendarDay/CalendarDay.d.ts +22 -0
- package/dist/cjs/components/CalendarDay/CalendarDay.js +109 -0
- package/dist/cjs/components/CalendarDay/CalendarDay.js.map +1 -0
- package/dist/cjs/components/CalendarDays/CalendarDays.d.ts +22 -0
- package/dist/cjs/components/CalendarDays/CalendarDays.js +118 -0
- package/dist/cjs/components/CalendarDays/CalendarDays.js.map +1 -0
- package/dist/cjs/components/CalendarHeader/CalendarHeader.d.ts +16 -0
- package/dist/cjs/components/CalendarHeader/CalendarHeader.js +143 -0
- package/dist/cjs/components/CalendarHeader/CalendarHeader.js.map +1 -0
- package/dist/cjs/components/CalendarRange/CalendarRange.d.ts +16 -0
- package/dist/cjs/components/CalendarRange/CalendarRange.js +219 -0
- package/dist/cjs/components/CalendarRange/CalendarRange.js.map +1 -0
- package/dist/cjs/components/CalendarTime/CalendarTime.d.ts +11 -0
- package/dist/cjs/components/CalendarTime/CalendarTime.js +92 -0
- package/dist/cjs/components/CalendarTime/CalendarTime.js.map +1 -0
- package/dist/cjs/components/Checkbox/Checkbox.js +2 -5
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/Chip/Chip.js +2 -4
- package/dist/cjs/components/Chip/Chip.js.map +1 -1
- package/dist/cjs/components/ChipsSelect/ChipsSelect.d.ts +1 -2
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js +7 -11
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cjs/components/ConfigProvider/ConfigProvider.d.ts +4 -0
- package/dist/cjs/components/ConfigProvider/ConfigProvider.js +40 -21
- package/dist/cjs/components/ConfigProvider/ConfigProvider.js.map +1 -1
- package/dist/cjs/components/ConfigProvider/ConfigProviderContext.d.ts +0 -7
- package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js +3 -5
- package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
- package/dist/cjs/components/ContentCard/ContentCard.js +5 -7
- package/dist/cjs/components/ContentCard/ContentCard.js.map +1 -1
- package/dist/cjs/components/Counter/Counter.js +3 -3
- package/dist/cjs/components/Counter/Counter.js.map +1 -1
- package/dist/cjs/components/CustomScrollView/CustomScrollView.d.ts +1 -1
- package/dist/cjs/components/CustomScrollView/CustomScrollView.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.d.ts +10 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js +47 -17
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +4 -1
- package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js +14 -5
- package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/cjs/components/CustomSelectOption/CustomSelectOption.js +3 -5
- package/dist/cjs/components/CustomSelectOption/CustomSelectOption.js.map +1 -1
- package/dist/cjs/components/DateInput/DateInput.d.ts +12 -0
- package/dist/cjs/components/DateInput/DateInput.js +290 -0
- package/dist/cjs/components/DateInput/DateInput.js.map +1 -0
- package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts +18 -0
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js +310 -0
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js.map +1 -0
- package/dist/cjs/components/Div/Div.d.ts +1 -2
- package/dist/cjs/components/Div/Div.js +2 -5
- package/dist/cjs/components/Div/Div.js.map +1 -1
- package/dist/cjs/components/Footer/Footer.js +2 -4
- package/dist/cjs/components/Footer/Footer.js.map +1 -1
- package/dist/cjs/components/FormItem/FormItem.js +2 -5
- package/dist/cjs/components/FormItem/FormItem.js.map +1 -1
- package/dist/cjs/components/FormStatus/FormStatus.js +3 -8
- package/dist/cjs/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/cjs/components/Group/Group.js +3 -5
- package/dist/cjs/components/Group/Group.js.map +1 -1
- package/dist/cjs/components/Header/Header.js +10 -23
- package/dist/cjs/components/Header/Header.js.map +1 -1
- package/dist/cjs/components/HorizontalCell/HorizontalCell.js +5 -10
- package/dist/cjs/components/HorizontalCell/HorizontalCell.js.map +1 -1
- package/dist/cjs/components/IconButton/IconButton.d.ts +1 -1
- package/dist/cjs/components/InfoRow/InfoRow.js +1 -2
- package/dist/cjs/components/InfoRow/InfoRow.js.map +1 -1
- package/dist/cjs/components/InputLike/InputLike.d.ts +10 -0
- package/dist/cjs/components/InputLike/InputLike.js +71 -0
- package/dist/cjs/components/InputLike/InputLike.js.map +1 -0
- package/dist/cjs/components/InputLike/InputLikeDivider.d.ts +3 -0
- package/dist/cjs/components/InputLike/InputLikeDivider.js +27 -0
- package/dist/cjs/components/InputLike/InputLikeDivider.js.map +1 -0
- package/dist/cjs/components/LocaleProviderContext/LocaleProviderContext.d.ts +2 -0
- package/dist/cjs/components/LocaleProviderContext/LocaleProviderContext.js +14 -0
- package/dist/cjs/components/LocaleProviderContext/LocaleProviderContext.js.map +1 -0
- package/dist/cjs/components/ModalPage/ModalPage.js +5 -5
- package/dist/cjs/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/cjs/components/Pagination/Pagination.d.ts +42 -0
- package/dist/cjs/components/Pagination/Pagination.js +152 -0
- package/dist/cjs/components/Pagination/Pagination.js.map +1 -0
- package/dist/cjs/components/PanelHeaderBack/PanelHeaderBack.d.ts +1 -1
- package/dist/cjs/components/PanelHeaderContent/PanelHeaderContent.js +2 -4
- package/dist/cjs/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
- package/dist/cjs/components/PromoBanner/PromoBanner.js +3 -7
- package/dist/cjs/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/cjs/components/Radio/Radio.js +2 -5
- package/dist/cjs/components/Radio/Radio.js.map +1 -1
- package/dist/cjs/components/Removable/Removable.js +8 -4
- package/dist/cjs/components/Removable/Removable.js.map +1 -1
- package/dist/cjs/components/RichCell/RichCell.d.ts +3 -2
- package/dist/cjs/components/RichCell/RichCell.js +0 -1
- package/dist/cjs/components/RichCell/RichCell.js.map +1 -1
- package/dist/cjs/components/Select/Select.d.ts +1 -1
- package/dist/cjs/components/SelectMimicry/SelectMimicry.d.ts +5 -1
- package/dist/cjs/components/SelectMimicry/SelectMimicry.js +11 -5
- package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/cjs/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/dist/cjs/components/SimpleCell/SimpleCell.js +0 -1
- package/dist/cjs/components/SimpleCell/SimpleCell.js.map +1 -1
- package/dist/cjs/components/SimpleCheckbox/SimpleCheckbox.d.ts +0 -1
- package/dist/cjs/components/SimpleCheckbox/SimpleCheckbox.js +2 -5
- package/dist/cjs/components/SimpleCheckbox/SimpleCheckbox.js.map +1 -1
- package/dist/cjs/components/Spacing/Spacing.js +2 -2
- package/dist/cjs/components/Spacing/Spacing.js.map +1 -1
- package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js +4 -7
- package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
- package/dist/cjs/components/Tappable/Tappable.d.ts +3 -1
- package/dist/cjs/components/Tappable/Tappable.js +11 -11
- package/dist/cjs/components/Tappable/Tappable.js.map +1 -1
- package/dist/cjs/components/TextTooltip/TextTooltip.js +1 -2
- package/dist/cjs/components/TextTooltip/TextTooltip.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +1 -2
- package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/components/Typography/Caption/Caption.d.ts +8 -4
- package/dist/cjs/components/Typography/Caption/Caption.js +12 -14
- package/dist/cjs/components/Typography/Caption/Caption.js.map +1 -1
- package/dist/cjs/components/Typography/Subhead/Subhead.d.ts +6 -1
- package/dist/cjs/components/Typography/Subhead/Subhead.js +15 -8
- package/dist/cjs/components/Typography/Subhead/Subhead.js.map +1 -1
- package/dist/cjs/components/Typography/Title/Title.d.ts +3 -1
- package/dist/cjs/components/Typography/Title/Title.js +4 -2
- package/dist/cjs/components/Typography/Title/Title.js.map +1 -1
- package/dist/cjs/components/UsersStack/UsersStack.js +3 -5
- package/dist/cjs/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/cjs/components/View/ViewInfinite.d.ts +2 -2
- package/dist/cjs/components/View/ViewInfinite.js +12 -15
- package/dist/cjs/components/View/ViewInfinite.js.map +1 -1
- package/dist/cjs/helpers/typography.d.ts +1 -0
- package/dist/cjs/helpers/typography.js +25 -0
- package/dist/cjs/helpers/typography.js.map +1 -0
- package/dist/cjs/hooks/useBooleanState.d.ts +6 -0
- package/dist/cjs/hooks/useBooleanState.js +42 -0
- package/dist/cjs/hooks/useBooleanState.js.map +1 -0
- package/dist/cjs/hooks/useCalendar.d.ts +18 -0
- package/dist/cjs/hooks/useCalendar.js +78 -0
- package/dist/cjs/hooks/useCalendar.js.map +1 -0
- package/dist/cjs/hooks/useDateInput.d.ts +30 -0
- package/dist/cjs/hooks/useDateInput.js +180 -0
- package/dist/cjs/hooks/useDateInput.js.map +1 -0
- package/dist/cjs/hooks/useKeyboardInputTracker.d.ts +2 -0
- package/dist/cjs/hooks/useKeyboardInputTracker.js +15 -4
- package/dist/cjs/hooks/useKeyboardInputTracker.js.map +1 -1
- package/dist/cjs/hooks/useOrientationChange.d.ts +7 -0
- package/dist/cjs/hooks/useOrientationChange.js +56 -0
- package/dist/cjs/hooks/useOrientationChange.js.map +1 -0
- package/dist/cjs/hooks/usePagination.d.ts +34 -0
- package/dist/cjs/hooks/usePagination.js +81 -0
- package/dist/cjs/hooks/usePagination.js.map +1 -0
- package/dist/cjs/index.d.ts +12 -2
- package/dist/cjs/index.js +68 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/calendar.d.ts +14 -0
- package/dist/cjs/lib/calendar.js +142 -0
- package/dist/cjs/lib/calendar.js.map +1 -0
- package/dist/cjs/lib/utils.d.ts +2 -1
- package/dist/cjs/lib/utils.js +7 -0
- package/dist/cjs/lib/utils.js.map +1 -1
- package/dist/cjs/tokenized/index.d.ts +14 -0
- package/dist/cjs/tokenized/index.js +56 -0
- package/dist/cjs/tokenized/index.js.map +1 -1
- package/dist/cjs/unstable/index.d.ts +6 -6
- package/dist/cjs/unstable/index.js +6 -8
- package/dist/cjs/unstable/index.js.map +1 -1
- package/dist/components/ActionSheet/ActionSheet.js +2 -5
- package/dist/components/ActionSheet/ActionSheet.js.map +1 -1
- package/dist/components/ActionSheetItem/ActionSheetItem.js +2 -5
- package/dist/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
- package/dist/components/Alert/Alert.js +3 -6
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/Banner/Banner.js +1 -3
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.js +6 -10
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.d.ts +20 -0
- package/dist/components/ButtonGroup/ButtonGroup.js +23 -0
- package/dist/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/dist/components/Calendar/Calendar.d.ts +21 -0
- package/dist/components/Calendar/Calendar.js +133 -0
- package/dist/components/Calendar/Calendar.js.map +1 -0
- package/dist/components/CalendarDay/CalendarDay.d.ts +22 -0
- package/dist/components/CalendarDay/CalendarDay.js +91 -0
- package/dist/components/CalendarDay/CalendarDay.js.map +1 -0
- package/dist/components/CalendarDays/CalendarDays.d.ts +22 -0
- package/dist/components/CalendarDays/CalendarDays.js +94 -0
- package/dist/components/CalendarDays/CalendarDays.js.map +1 -0
- package/dist/components/CalendarHeader/CalendarHeader.d.ts +16 -0
- package/dist/components/CalendarHeader/CalendarHeader.js +118 -0
- package/dist/components/CalendarHeader/CalendarHeader.js.map +1 -0
- package/dist/components/CalendarRange/CalendarRange.d.ts +16 -0
- package/dist/components/CalendarRange/CalendarRange.js +196 -0
- package/dist/components/CalendarRange/CalendarRange.js.map +1 -0
- package/dist/components/CalendarTime/CalendarTime.d.ts +11 -0
- package/dist/components/CalendarTime/CalendarTime.js +73 -0
- package/dist/components/CalendarTime/CalendarTime.js.map +1 -0
- package/dist/components/Checkbox/Checkbox.js +1 -4
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Chip/Chip.js +1 -3
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.d.ts +1 -2
- package/dist/components/ChipsSelect/ChipsSelect.js +4 -7
- package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/components/ConfigProvider/ConfigProvider.d.ts +4 -0
- package/dist/components/ConfigProvider/ConfigProvider.js +36 -20
- package/dist/components/ConfigProvider/ConfigProvider.js.map +1 -1
- package/dist/components/ConfigProvider/ConfigProviderContext.d.ts +0 -7
- package/dist/components/ConfigProvider/ConfigProviderContext.js +2 -3
- package/dist/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
- package/dist/components/ContentCard/ContentCard.js +3 -5
- package/dist/components/ContentCard/ContentCard.js.map +1 -1
- package/dist/components/Counter/Counter.js +2 -2
- package/dist/components/Counter/Counter.js.map +1 -1
- package/dist/components/CustomScrollView/CustomScrollView.d.ts +1 -1
- package/dist/components/CustomScrollView/CustomScrollView.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts +10 -1
- package/dist/components/CustomSelect/CustomSelect.js +44 -15
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +4 -1
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js +14 -5
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/components/CustomSelectOption/CustomSelectOption.js +2 -4
- package/dist/components/CustomSelectOption/CustomSelectOption.js.map +1 -1
- package/dist/components/DateInput/DateInput.d.ts +12 -0
- package/dist/components/DateInput/DateInput.js +261 -0
- package/dist/components/DateInput/DateInput.js.map +1 -0
- package/dist/components/DateRangeInput/DateRangeInput.d.ts +18 -0
- package/dist/components/DateRangeInput/DateRangeInput.js +281 -0
- package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -0
- package/dist/components/Div/Div.d.ts +1 -2
- package/dist/components/Div/Div.js +1 -3
- package/dist/components/Div/Div.js.map +1 -1
- package/dist/components/Footer/Footer.js +1 -3
- package/dist/components/Footer/Footer.js.map +1 -1
- package/dist/components/FormItem/FormItem.js +1 -4
- package/dist/components/FormItem/FormItem.js.map +1 -1
- package/dist/components/FormStatus/FormStatus.js +2 -7
- package/dist/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/components/Group/Group.js +2 -4
- package/dist/components/Group/Group.js.map +1 -1
- package/dist/components/Header/Header.js +7 -20
- package/dist/components/Header/Header.js.map +1 -1
- package/dist/components/HorizontalCell/HorizontalCell.js +3 -8
- package/dist/components/HorizontalCell/HorizontalCell.js.map +1 -1
- package/dist/components/IconButton/IconButton.d.ts +1 -1
- package/dist/components/InfoRow/InfoRow.js +1 -2
- package/dist/components/InfoRow/InfoRow.js.map +1 -1
- package/dist/components/InputLike/InputLike.d.ts +10 -0
- package/dist/components/InputLike/InputLike.js +52 -0
- package/dist/components/InputLike/InputLike.js.map +1 -0
- package/dist/components/InputLike/InputLikeDivider.d.ts +3 -0
- package/dist/components/InputLike/InputLikeDivider.js +13 -0
- package/dist/components/InputLike/InputLikeDivider.js.map +1 -0
- package/dist/components/LocaleProviderContext/LocaleProviderContext.d.ts +2 -0
- package/dist/components/LocaleProviderContext/LocaleProviderContext.js +3 -0
- package/dist/components/LocaleProviderContext/LocaleProviderContext.js.map +1 -0
- package/dist/components/ModalPage/ModalPage.js +4 -5
- package/dist/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/components/Pagination/Pagination.d.ts +42 -0
- package/dist/components/Pagination/Pagination.js +129 -0
- package/dist/components/Pagination/Pagination.js.map +1 -0
- package/dist/components/PanelHeaderBack/PanelHeaderBack.d.ts +1 -1
- package/dist/components/PanelHeaderContent/PanelHeaderContent.js +1 -3
- package/dist/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
- package/dist/components/PromoBanner/PromoBanner.js +1 -5
- package/dist/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/components/Radio/Radio.js +1 -4
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/Removable/Removable.js +8 -4
- package/dist/components/Removable/Removable.js.map +1 -1
- package/dist/components/RichCell/RichCell.d.ts +3 -2
- package/dist/components/RichCell/RichCell.js +0 -1
- package/dist/components/RichCell/RichCell.js.map +1 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/SelectMimicry/SelectMimicry.d.ts +5 -1
- package/dist/components/SelectMimicry/SelectMimicry.js +10 -5
- package/dist/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/dist/components/SimpleCell/SimpleCell.js +0 -1
- package/dist/components/SimpleCell/SimpleCell.js.map +1 -1
- package/dist/components/SimpleCheckbox/SimpleCheckbox.d.ts +0 -1
- package/dist/components/SimpleCheckbox/SimpleCheckbox.js +1 -3
- package/dist/components/SimpleCheckbox/SimpleCheckbox.js.map +1 -1
- package/dist/components/Spacing/Spacing.js +2 -2
- package/dist/components/Spacing/Spacing.js.map +1 -1
- package/dist/components/SubnavigationButton/SubnavigationButton.js +3 -6
- package/dist/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
- package/dist/components/Tappable/Tappable.d.ts +3 -1
- package/dist/components/Tappable/Tappable.js +10 -11
- package/dist/components/Tappable/Tappable.js.map +1 -1
- package/dist/components/TextTooltip/TextTooltip.js +1 -2
- package/dist/components/TextTooltip/TextTooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +1 -2
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Typography/Caption/Caption.d.ts +8 -4
- package/dist/components/Typography/Caption/Caption.js +10 -14
- package/dist/components/Typography/Caption/Caption.js.map +1 -1
- package/dist/components/Typography/Subhead/Subhead.d.ts +6 -1
- package/dist/components/Typography/Subhead/Subhead.js +13 -7
- package/dist/components/Typography/Subhead/Subhead.js.map +1 -1
- package/dist/components/Typography/Title/Title.d.ts +3 -1
- package/dist/components/Typography/Title/Title.js +3 -2
- package/dist/components/Typography/Title/Title.js.map +1 -1
- package/dist/components/UsersStack/UsersStack.js +2 -4
- package/dist/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/components/View/ViewInfinite.d.ts +2 -2
- package/dist/components/View/ViewInfinite.js +10 -11
- package/dist/components/View/ViewInfinite.js.map +1 -1
- package/dist/components.css +5 -5
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/ActionSheet/ActionSheet.js +2 -5
- package/dist/cssm/components/ActionSheet/ActionSheet.js.map +1 -1
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js +2 -5
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js.map +1 -1
- package/dist/cssm/components/Alert/Alert.js +3 -6
- package/dist/cssm/components/Alert/Alert.js.map +1 -1
- package/dist/cssm/components/Banner/Banner.js +1 -3
- package/dist/cssm/components/Banner/Banner.js.map +1 -1
- package/dist/cssm/components/Button/Button.css +1 -1
- package/dist/cssm/components/Button/Button.d.ts +1 -1
- package/dist/cssm/components/Button/Button.js +6 -10
- package/dist/cssm/components/Button/Button.js.map +1 -1
- package/dist/cssm/components/ButtonGroup/ButtonGroup.css +1 -0
- package/dist/cssm/components/ButtonGroup/ButtonGroup.d.ts +20 -0
- package/dist/cssm/components/ButtonGroup/ButtonGroup.js +24 -0
- package/dist/cssm/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/dist/cssm/components/Calendar/Calendar.css +1 -0
- package/dist/cssm/components/Calendar/Calendar.d.ts +21 -0
- package/dist/cssm/components/Calendar/Calendar.js +134 -0
- package/dist/cssm/components/Calendar/Calendar.js.map +1 -0
- package/dist/cssm/components/CalendarDay/CalendarDay.css +1 -0
- package/dist/cssm/components/CalendarDay/CalendarDay.d.ts +22 -0
- package/dist/cssm/components/CalendarDay/CalendarDay.js +92 -0
- package/dist/cssm/components/CalendarDay/CalendarDay.js.map +1 -0
- package/dist/cssm/components/CalendarDays/CalendarDays.css +1 -0
- package/dist/cssm/components/CalendarDays/CalendarDays.d.ts +22 -0
- package/dist/cssm/components/CalendarDays/CalendarDays.js +95 -0
- package/dist/cssm/components/CalendarDays/CalendarDays.js.map +1 -0
- package/dist/cssm/components/CalendarHeader/CalendarHeader.css +1 -0
- package/dist/cssm/components/CalendarHeader/CalendarHeader.d.ts +16 -0
- package/dist/cssm/components/CalendarHeader/CalendarHeader.js +119 -0
- package/dist/cssm/components/CalendarHeader/CalendarHeader.js.map +1 -0
- package/dist/cssm/components/CalendarRange/CalendarRange.css +1 -0
- package/dist/cssm/components/CalendarRange/CalendarRange.d.ts +16 -0
- package/dist/cssm/components/CalendarRange/CalendarRange.js +197 -0
- package/dist/cssm/components/CalendarRange/CalendarRange.js.map +1 -0
- package/dist/cssm/components/CalendarTime/CalendarTime.css +1 -0
- package/dist/cssm/components/CalendarTime/CalendarTime.d.ts +11 -0
- package/dist/cssm/components/CalendarTime/CalendarTime.js +74 -0
- package/dist/cssm/components/CalendarTime/CalendarTime.js.map +1 -0
- package/dist/cssm/components/Checkbox/Checkbox.js +1 -4
- package/dist/cssm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cssm/components/Chip/Chip.js +1 -3
- package/dist/cssm/components/Chip/Chip.js.map +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.d.ts +1 -2
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js +4 -7
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cssm/components/ConfigProvider/ConfigProvider.d.ts +4 -0
- package/dist/cssm/components/ConfigProvider/ConfigProvider.js +36 -20
- package/dist/cssm/components/ConfigProvider/ConfigProvider.js.map +1 -1
- package/dist/cssm/components/ConfigProvider/ConfigProviderContext.d.ts +0 -7
- package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js +2 -3
- package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
- package/dist/cssm/components/ContentCard/ContentCard.js +3 -5
- package/dist/cssm/components/ContentCard/ContentCard.js.map +1 -1
- package/dist/cssm/components/Counter/Counter.js +2 -2
- package/dist/cssm/components/Counter/Counter.js.map +1 -1
- package/dist/cssm/components/CustomScrollView/CustomScrollView.d.ts +1 -1
- package/dist/cssm/components/CustomScrollView/CustomScrollView.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.css +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +10 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +44 -15
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.css +1 -1
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +4 -1
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js +14 -5
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.js +2 -4
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.css +1 -0
- package/dist/cssm/components/DateInput/DateInput.d.ts +12 -0
- package/dist/cssm/components/DateInput/DateInput.js +262 -0
- package/dist/cssm/components/DateInput/DateInput.js.map +1 -0
- package/dist/cssm/components/DateRangeInput/DateRangeInput.css +1 -0
- package/dist/cssm/components/DateRangeInput/DateRangeInput.d.ts +18 -0
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js +282 -0
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -0
- package/dist/cssm/components/Div/Div.css +1 -1
- package/dist/cssm/components/Div/Div.d.ts +1 -2
- package/dist/cssm/components/Div/Div.js +1 -3
- package/dist/cssm/components/Div/Div.js.map +1 -1
- package/dist/cssm/components/Footer/Footer.js +1 -3
- package/dist/cssm/components/Footer/Footer.js.map +1 -1
- package/dist/cssm/components/FormField/FormField.css +1 -1
- package/dist/cssm/components/FormItem/FormItem.js +1 -4
- package/dist/cssm/components/FormItem/FormItem.js.map +1 -1
- package/dist/cssm/components/FormStatus/FormStatus.js +2 -7
- package/dist/cssm/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/cssm/components/Group/Group.js +2 -4
- package/dist/cssm/components/Group/Group.js.map +1 -1
- package/dist/cssm/components/Header/Header.js +7 -20
- package/dist/cssm/components/Header/Header.js.map +1 -1
- package/dist/cssm/components/HorizontalCell/HorizontalCell.js +3 -8
- package/dist/cssm/components/HorizontalCell/HorizontalCell.js.map +1 -1
- package/dist/cssm/components/IconButton/IconButton.d.ts +1 -1
- package/dist/cssm/components/InfoRow/InfoRow.js +1 -2
- package/dist/cssm/components/InfoRow/InfoRow.js.map +1 -1
- package/dist/cssm/components/InputLike/InputLike.css +1 -0
- package/dist/cssm/components/InputLike/InputLike.d.ts +10 -0
- package/dist/cssm/components/InputLike/InputLike.js +53 -0
- package/dist/cssm/components/InputLike/InputLike.js.map +1 -0
- package/dist/cssm/components/InputLike/InputLikeDivider.css +1 -0
- package/dist/cssm/components/InputLike/InputLikeDivider.d.ts +3 -0
- package/dist/cssm/components/InputLike/InputLikeDivider.js +14 -0
- package/dist/cssm/components/InputLike/InputLikeDivider.js.map +1 -0
- package/dist/cssm/components/LocaleProviderContext/LocaleProviderContext.d.ts +2 -0
- package/dist/cssm/components/LocaleProviderContext/LocaleProviderContext.js +3 -0
- package/dist/cssm/components/LocaleProviderContext/LocaleProviderContext.js.map +1 -0
- package/dist/cssm/components/ModalPage/ModalPage.js +4 -5
- package/dist/cssm/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/cssm/components/Pagination/Pagination.css +1 -0
- package/dist/cssm/components/Pagination/Pagination.d.ts +42 -0
- package/dist/cssm/components/Pagination/Pagination.js +130 -0
- package/dist/cssm/components/Pagination/Pagination.js.map +1 -0
- package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.d.ts +1 -1
- package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js +1 -3
- package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js.map +1 -1
- package/dist/cssm/components/PromoBanner/PromoBanner.js +1 -5
- package/dist/cssm/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/cssm/components/Radio/Radio.js +1 -4
- package/dist/cssm/components/Radio/Radio.js.map +1 -1
- package/dist/cssm/components/Removable/Removable.js +8 -4
- package/dist/cssm/components/Removable/Removable.js.map +1 -1
- package/dist/cssm/components/RichCell/RichCell.d.ts +3 -2
- package/dist/cssm/components/RichCell/RichCell.js +0 -1
- package/dist/cssm/components/RichCell/RichCell.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.css +1 -0
- package/dist/cssm/components/SelectMimicry/SelectMimicry.d.ts +5 -1
- package/dist/cssm/components/SelectMimicry/SelectMimicry.js +11 -5
- package/dist/cssm/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/cssm/components/SimpleCell/SimpleCell.d.ts +1 -1
- package/dist/cssm/components/SimpleCell/SimpleCell.js +0 -1
- package/dist/cssm/components/SimpleCell/SimpleCell.js.map +1 -1
- package/dist/cssm/components/SimpleCheckbox/SimpleCheckbox.d.ts +0 -1
- package/dist/cssm/components/SimpleCheckbox/SimpleCheckbox.js +1 -3
- package/dist/cssm/components/SimpleCheckbox/SimpleCheckbox.js.map +1 -1
- package/dist/cssm/components/Spacing/Spacing.js +2 -2
- package/dist/cssm/components/Spacing/Spacing.js.map +1 -1
- package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js +3 -6
- package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js.map +1 -1
- package/dist/cssm/components/Tappable/Tappable.d.ts +3 -1
- package/dist/cssm/components/Tappable/Tappable.js +10 -11
- package/dist/cssm/components/Tappable/Tappable.js.map +1 -1
- package/dist/cssm/components/TextTooltip/TextTooltip.js +1 -2
- package/dist/cssm/components/TextTooltip/TextTooltip.js.map +1 -1
- package/dist/cssm/components/Tooltip/Tooltip.js +1 -2
- package/dist/cssm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cssm/components/Typography/Caption/Caption.css +1 -1
- package/dist/cssm/components/Typography/Caption/Caption.d.ts +8 -4
- package/dist/cssm/components/Typography/Caption/Caption.js +10 -14
- package/dist/cssm/components/Typography/Caption/Caption.js.map +1 -1
- package/dist/cssm/components/Typography/Subhead/Subhead.css +1 -1
- package/dist/cssm/components/Typography/Subhead/Subhead.d.ts +6 -1
- package/dist/cssm/components/Typography/Subhead/Subhead.js +13 -7
- package/dist/cssm/components/Typography/Subhead/Subhead.js.map +1 -1
- package/dist/cssm/components/Typography/Title/Title.d.ts +3 -1
- package/dist/cssm/components/Typography/Title/Title.js +3 -2
- package/dist/cssm/components/Typography/Title/Title.js.map +1 -1
- package/dist/cssm/components/UsersStack/UsersStack.js +2 -4
- package/dist/cssm/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/cssm/components/View/ViewInfinite.d.ts +2 -2
- package/dist/cssm/components/View/ViewInfinite.js +10 -11
- package/dist/cssm/components/View/ViewInfinite.js.map +1 -1
- package/dist/cssm/helpers/typography.d.ts +1 -0
- package/dist/cssm/helpers/typography.js +18 -0
- package/dist/cssm/helpers/typography.js.map +1 -0
- package/dist/cssm/hooks/useBooleanState.d.ts +6 -0
- package/dist/cssm/hooks/useBooleanState.js +27 -0
- package/dist/cssm/hooks/useBooleanState.js.map +1 -0
- package/dist/cssm/hooks/useCalendar.d.ts +18 -0
- package/dist/cssm/hooks/useCalendar.js +64 -0
- package/dist/cssm/hooks/useCalendar.js.map +1 -0
- package/dist/cssm/hooks/useDateInput.d.ts +30 -0
- package/dist/cssm/hooks/useDateInput.js +163 -0
- package/dist/cssm/hooks/useDateInput.js.map +1 -0
- package/dist/cssm/hooks/useKeyboardInputTracker.d.ts +2 -0
- package/dist/cssm/hooks/useKeyboardInputTracker.js +11 -4
- package/dist/cssm/hooks/useKeyboardInputTracker.js.map +1 -1
- package/dist/cssm/hooks/useOrientationChange.d.ts +7 -0
- package/dist/cssm/hooks/useOrientationChange.js +42 -0
- package/dist/cssm/hooks/useOrientationChange.js.map +1 -0
- package/dist/cssm/hooks/usePagination.d.ts +34 -0
- package/dist/cssm/hooks/usePagination.js +67 -0
- package/dist/cssm/hooks/usePagination.js.map +1 -0
- package/dist/cssm/index.d.ts +12 -2
- package/dist/cssm/index.js +11 -3
- package/dist/cssm/index.js.map +1 -1
- package/dist/cssm/lib/calendar.d.ts +14 -0
- package/dist/cssm/lib/calendar.js +111 -0
- package/dist/cssm/lib/calendar.js.map +1 -0
- package/dist/cssm/lib/utils.d.ts +2 -1
- package/dist/cssm/lib/utils.js +3 -0
- package/dist/cssm/lib/utils.js.map +1 -1
- package/dist/cssm/styles/components.css +5 -5
- package/dist/cssm/styles/themes.css +1 -1
- package/dist/cssm/tokenized/index.d.ts +14 -0
- package/dist/cssm/tokenized/index.js +7 -0
- package/dist/cssm/tokenized/index.js.map +1 -1
- package/dist/cssm/unstable/index.d.ts +6 -6
- package/dist/cssm/unstable/index.js +3 -3
- package/dist/cssm/unstable/index.js.map +1 -1
- package/dist/helpers/typography.d.ts +1 -0
- package/dist/helpers/typography.js +18 -0
- package/dist/helpers/typography.js.map +1 -0
- package/dist/hooks/useBooleanState.d.ts +6 -0
- package/dist/hooks/useBooleanState.js +27 -0
- package/dist/hooks/useBooleanState.js.map +1 -0
- package/dist/hooks/useCalendar.d.ts +18 -0
- package/dist/hooks/useCalendar.js +64 -0
- package/dist/hooks/useCalendar.js.map +1 -0
- package/dist/hooks/useDateInput.d.ts +30 -0
- package/dist/hooks/useDateInput.js +163 -0
- package/dist/hooks/useDateInput.js.map +1 -0
- package/dist/hooks/useKeyboardInputTracker.d.ts +2 -0
- package/dist/hooks/useKeyboardInputTracker.js +11 -4
- package/dist/hooks/useKeyboardInputTracker.js.map +1 -1
- package/dist/hooks/useOrientationChange.d.ts +7 -0
- package/dist/hooks/useOrientationChange.js +42 -0
- package/dist/hooks/useOrientationChange.js.map +1 -0
- package/dist/hooks/usePagination.d.ts +34 -0
- package/dist/hooks/usePagination.js +67 -0
- package/dist/hooks/usePagination.js.map +1 -0
- package/dist/index.d.ts +12 -2
- package/dist/index.js +11 -3
- package/dist/index.js.map +1 -1
- package/dist/lib/calendar.d.ts +14 -0
- package/dist/lib/calendar.js +111 -0
- package/dist/lib/calendar.js.map +1 -0
- package/dist/lib/utils.d.ts +2 -1
- package/dist/lib/utils.js +3 -0
- package/dist/lib/utils.js.map +1 -1
- package/dist/tokenized/index.d.ts +14 -0
- package/dist/tokenized/index.js +7 -0
- package/dist/tokenized/index.js.map +1 -1
- package/dist/unstable/index.d.ts +6 -6
- package/dist/unstable/index.js +3 -3
- package/dist/unstable/index.js.map +1 -1
- package/dist/vkui.css +6 -6
- package/dist/vkui.css.map +1 -1
- package/package.json +14 -11
- package/src/components/ActionSheet/ActionSheet.tsx +3 -6
- package/src/components/ActionSheetItem/ActionSheetItem.tsx +3 -11
- package/src/components/Alert/Alert.tsx +3 -7
- package/src/components/Alert/Readme.md +4 -4
- package/src/components/AppRoot/Readme.md +2 -2
- package/src/components/Banner/Banner.tsx +1 -1
- package/src/components/Button/Button.css +26 -1
- package/src/components/Button/Button.tsx +6 -9
- package/src/components/ButtonGroup/ButtonGroup.css +52 -0
- package/src/components/ButtonGroup/ButtonGroup.tsx +48 -0
- package/src/components/ButtonGroup/Readme.md +311 -0
- package/src/components/Calendar/Calendar.css +31 -0
- package/src/components/Calendar/Calendar.tsx +184 -0
- package/src/components/Calendar/Readme.md +124 -0
- package/src/components/CalendarDay/CalendarDay.css +85 -0
- package/src/components/CalendarDay/CalendarDay.tsx +114 -0
- package/src/components/CalendarDays/CalendarDays.css +31 -0
- package/src/components/CalendarDays/CalendarDays.tsx +131 -0
- package/src/components/CalendarHeader/CalendarHeader.css +50 -0
- package/src/components/CalendarHeader/CalendarHeader.tsx +167 -0
- package/src/components/CalendarRange/CalendarRange.css +27 -0
- package/src/components/CalendarRange/CalendarRange.tsx +278 -0
- package/src/components/CalendarRange/Readme.md +85 -0
- package/src/components/CalendarTime/CalendarTime.css +18 -0
- package/src/components/CalendarTime/CalendarTime.tsx +88 -0
- package/src/components/Checkbox/Checkbox.tsx +2 -9
- package/src/components/Chip/Chip.tsx +2 -8
- package/src/components/ChipsSelect/ChipsSelect.tsx +6 -7
- package/src/components/ConfigProvider/ConfigProvider.tsx +36 -18
- package/src/components/ConfigProvider/ConfigProviderContext.tsx +9 -13
- package/src/components/ContentCard/ContentCard.tsx +3 -10
- package/src/components/Counter/Counter.tsx +2 -2
- package/src/components/CustomScrollView/CustomScrollView.tsx +1 -1
- package/src/components/CustomSelect/CustomSelect.css +0 -15
- package/src/components/CustomSelect/CustomSelect.tsx +46 -7
- package/src/components/CustomSelectDropdown/CustomSelectDropdown.css +13 -1
- package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx +12 -3
- package/src/components/CustomSelectOption/CustomSelectOption.tsx +3 -7
- package/src/components/CustomSelectOption/Readme.md +1 -1
- package/src/components/DateInput/DateInput.css +20 -0
- package/src/components/DateInput/DateInput.tsx +317 -0
- package/src/components/DateInput/Readme.md +116 -0
- package/src/components/DateRangeInput/DateRangeInput.css +16 -0
- package/src/components/DateRangeInput/DateRangeInput.tsx +350 -0
- package/src/components/DateRangeInput/Readme.md +96 -0
- package/src/components/Div/Div.css +1 -8
- package/src/components/Div/Div.tsx +2 -5
- package/src/components/Footer/Footer.tsx +2 -8
- package/src/components/Footer/Readme.md +1 -1
- package/src/components/FormField/FormField.css +33 -0
- package/src/components/FormItem/FormItem.tsx +3 -9
- package/src/components/FormStatus/FormStatus.tsx +3 -9
- package/src/components/Gallery/Readme.md +1 -1
- package/src/components/Group/Group.tsx +2 -4
- package/src/components/Header/Header.tsx +8 -11
- package/src/components/HorizontalCell/HorizontalCell.tsx +4 -12
- package/src/components/InfoRow/InfoRow.tsx +1 -1
- package/src/components/InputLike/InputLike.css +25 -0
- package/src/components/InputLike/InputLike.tsx +72 -0
- package/src/components/InputLike/InputLikeDivider.css +4 -0
- package/src/components/InputLike/InputLikeDivider.tsx +12 -0
- package/src/components/LocaleProviderContext/LocaleProviderContext.tsx +5 -0
- package/src/components/ModalPage/ModalPage.tsx +10 -4
- package/src/components/Pagination/Pagination.css +62 -0
- package/src/components/Pagination/Pagination.tsx +196 -0
- package/src/components/Pagination/Readme.md +110 -0
- package/src/components/PanelHeaderContent/PanelHeaderContent.tsx +2 -8
- package/src/components/PopoutWrapper/Readme.md +1 -1
- package/src/components/Popper/Readme.md +1 -1
- package/src/components/PromoBanner/PromoBanner.tsx +3 -5
- package/src/components/Radio/Radio.tsx +2 -9
- package/src/components/Removable/Removable.tsx +9 -7
- package/src/components/RichCell/Readme.md +4 -4
- package/src/components/RichCell/RichCell.tsx +3 -6
- package/src/components/RichTooltip/Readme.md +1 -1
- package/src/components/Select/Select.css +5 -0
- package/src/components/SelectMimicry/SelectMimicry.css +10 -0
- package/src/components/SelectMimicry/SelectMimicry.tsx +13 -3
- package/src/components/SimpleCell/SimpleCell.tsx +1 -5
- package/src/components/SimpleCheckbox/SimpleCheckbox.tsx +0 -3
- package/src/components/Spacing/Spacing.tsx +2 -2
- package/src/components/SubnavigationButton/SubnavigationButton.tsx +3 -9
- package/src/components/Tabbar/Readme.md +1 -1
- package/src/components/Tappable/Tappable.tsx +12 -3
- package/src/components/TextTooltip/Readme.md +1 -1
- package/src/components/TextTooltip/TextTooltip.tsx +2 -6
- package/src/components/Tooltip/Tooltip.tsx +2 -6
- package/src/components/Typography/Caption/Caption.css +61 -19
- package/src/components/Typography/Caption/Caption.tsx +24 -15
- package/src/components/Typography/Caption/Readme.md +26 -48
- package/src/components/Typography/Subhead/Readme.md +18 -24
- package/src/components/Typography/Subhead/Subhead.css +22 -7
- package/src/components/Typography/Subhead/Subhead.tsx +25 -7
- package/src/components/Typography/Title/Title.tsx +6 -3
- package/src/components/UsersStack/Readme.md +1 -1
- package/src/components/UsersStack/UsersStack.tsx +3 -4
- package/src/components/View/Readme.md +1 -1
- package/src/components/View/ViewInfinite.tsx +3 -4
- package/src/helpers/typography.ts +24 -0
- package/src/hooks/useBooleanState.ts +19 -0
- package/src/hooks/useCalendar.ts +78 -0
- package/src/hooks/useDateInput.ts +213 -0
- package/src/hooks/useKeyboardInputTracker.ts +25 -8
- package/src/hooks/useOrientationChange.ts +39 -0
- package/src/hooks/usePagination.ts +96 -0
- package/src/index.ts +12 -2
- package/src/lib/calendar.ts +123 -0
- package/src/lib/utils.ts +4 -1
- package/src/styles/components.css +14 -0
- package/src/tokenized/index.ts +21 -0
- package/src/unstable/index.ts +6 -6
- package/postcss.config.js +0 -54
|
@@ -11,7 +11,7 @@ import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
|
|
|
11
11
|
import { ActionSheetDropdown } from "./ActionSheetDropdown";
|
|
12
12
|
import { hasReactNode, noop } from "../../lib/utils";
|
|
13
13
|
import { ActionSheetContext } from "./ActionSheetContext";
|
|
14
|
-
import Caption from "../Typography/Caption/Caption";
|
|
14
|
+
import { Caption } from "../Typography/Caption/Caption";
|
|
15
15
|
import { usePlatform } from "../../hooks/usePlatform";
|
|
16
16
|
import { useTimeout } from "../../hooks/useTimeout";
|
|
17
17
|
import { useAdaptivity } from "../../hooks/useAdaptivity";
|
|
@@ -108,12 +108,9 @@ export var ActionSheet = function ActionSheet(_ref) {
|
|
|
108
108
|
}), (hasReactNode(header) || hasReactNode(text)) && createScopedElement("header", {
|
|
109
109
|
vkuiClass: "ActionSheet__header"
|
|
110
110
|
}, hasReactNode(header) && createScopedElement(Caption, {
|
|
111
|
-
|
|
112
|
-
weight: platform === IOS ? "semibold" : "medium",
|
|
111
|
+
weight: platform === IOS ? "1" : "2",
|
|
113
112
|
vkuiClass: "ActionSheet__title"
|
|
114
113
|
}, header), hasReactNode(text) && createScopedElement(Caption, {
|
|
115
|
-
level: "1",
|
|
116
|
-
weight: "regular",
|
|
117
114
|
vkuiClass: "ActionSheet__text"
|
|
118
115
|
}, text)), children, platform === IOS && !isDesktop && iosCloseItem));
|
|
119
116
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":["React","PopoutWrapper","ViewWidth","ViewHeight","IOS","ActionSheetDropdownDesktop","ActionSheetDropdown","hasReactNode","noop","ActionSheetContext","Caption","usePlatform","useTimeout","useAdaptivity","useObjectMemo","warnOnce","warn","ActionSheet","children","className","header","text","style","iosCloseItem","restProps","platform","useState","closing","setClosing","onClose","_action","useRef","afterClose","current","process","env","NODE_ENV","viewWidth","viewHeight","hasMouse","isDesktop","SMALL_TABLET","MEDIUM","timeout","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoclose","event","persist","contextValue","DropdownComponent","actionSheet","undefined","defaultProps","popupDirection"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,aAAT;AACA,SAASC,SAAT,EAAoBC,UAApB;AACA,SAASC,GAAT;AACA,SAASC,0BAAT;AACA,SAASC,mBAAT;AACA,SAASC,YAAT,EAAuBC,IAAvB;AACA,SAASC,kBAAT;AACA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":["React","PopoutWrapper","ViewWidth","ViewHeight","IOS","ActionSheetDropdownDesktop","ActionSheetDropdown","hasReactNode","noop","ActionSheetContext","Caption","usePlatform","useTimeout","useAdaptivity","useObjectMemo","warnOnce","warn","ActionSheet","children","className","header","text","style","iosCloseItem","restProps","platform","useState","closing","setClosing","onClose","_action","useRef","afterClose","current","process","env","NODE_ENV","viewWidth","viewHeight","hasMouse","isDesktop","SMALL_TABLET","MEDIUM","timeout","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoclose","event","persist","contextValue","DropdownComponent","actionSheet","undefined","defaultProps","popupDirection"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { ViewWidth, ViewHeight } from \"../../hoc/withAdaptivity\";\nimport { IOS } from \"../../lib/platform\";\nimport { ActionSheetDropdownDesktop } from \"./ActionSheetDropdownDesktop\";\nimport { ActionSheetDropdown } from \"./ActionSheetDropdown\";\nimport { hasReactNode, noop } from \"../../lib/utils\";\nimport { ActionSheetContext, ItemClickHandler } from \"./ActionSheetContext\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useObjectMemo } from \"../../hooks/useObjectMemo\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { SharedDropdownProps, PopupDirection, ToggleRef } from \"./types\";\nimport \"./ActionSheet.css\";\n\nexport interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {\n header?: React.ReactNode;\n text?: React.ReactNode;\n /**\n * Закрыть попап по клику снаружи. В v5 будет обязательным.\n */\n onClose?: VoidFunction;\n /**\n * Элемент, рядом с которым вылезает попап на десктопе.\n * Лучше передавать RefObject c current.\n * В v5 будет обязательным.\n */\n toggleRef?: ToggleRef;\n /**\n * Направление на десктопе\n */\n popupDirection?: PopupDirection;\n /**\n * Только iOS. В v5 будет обязательным.\n */\n iosCloseItem?: React.ReactNode;\n}\n\nconst warn = warnOnce(\"ActionSheet\");\n\nexport const ActionSheet: React.FC<ActionSheetProps> = ({\n children,\n className,\n header,\n text,\n style,\n iosCloseItem,\n ...restProps\n}) => {\n const platform = usePlatform();\n const [closing, setClosing] = React.useState(false);\n const onClose = () => setClosing(true);\n const _action = React.useRef(noop);\n\n const afterClose = () => {\n restProps.onClose?.();\n _action.current();\n _action.current = noop;\n };\n\n if (process.env.NODE_ENV === \"development\" && !restProps.onClose) {\n warn(\"can't close on outer click without onClose\");\n }\n\n const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n const isDesktop =\n viewWidth >= ViewWidth.SMALL_TABLET &&\n (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n let timeout = platform === IOS ? 300 : 200;\n\n if (isDesktop) {\n timeout = 0;\n }\n\n const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n React.useEffect(() => {\n if (closing) {\n fallbackTransitionFinish.set();\n } else {\n fallbackTransitionFinish.clear();\n }\n }, [closing, fallbackTransitionFinish]);\n\n const onItemClick = React.useCallback<ItemClickHandler>(\n (action, immediateAction, autoclose) => (event) => {\n event.persist();\n immediateAction && immediateAction(event);\n if (autoclose) {\n _action.current = () => action && action(event);\n setClosing(true);\n } else {\n action && action(event);\n }\n },\n []\n );\n const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n const DropdownComponent = isDesktop\n ? ActionSheetDropdownDesktop\n : ActionSheetDropdown;\n\n const actionSheet = (\n <ActionSheetContext.Provider value={contextValue}>\n <DropdownComponent\n closing={closing}\n timeout={timeout}\n {...(restProps as Omit<SharedDropdownProps, \"closing\">)}\n onClose={onClose}\n className={isDesktop ? className : undefined}\n style={isDesktop ? style : undefined}\n >\n {(hasReactNode(header) || hasReactNode(text)) && (\n <header vkuiClass=\"ActionSheet__header\">\n {hasReactNode(header) && (\n <Caption\n weight={platform === IOS ? \"1\" : \"2\"}\n vkuiClass=\"ActionSheet__title\"\n >\n {header}\n </Caption>\n )}\n {hasReactNode(text) && (\n <Caption vkuiClass=\"ActionSheet__text\">{text}</Caption>\n )}\n </header>\n )}\n {children}\n {platform === IOS && !isDesktop && iosCloseItem}\n </DropdownComponent>\n </ActionSheetContext.Provider>\n );\n\n if (isDesktop) {\n return actionSheet;\n }\n\n return (\n <PopoutWrapper\n closing={closing}\n alignY=\"bottom\"\n className={className}\n style={style}\n onClick={onClose}\n hasMask\n fixed\n >\n {actionSheet}\n </PopoutWrapper>\n );\n};\n\nActionSheet.defaultProps = {\n popupDirection: \"bottom\",\n};\n"],"file":"ActionSheet.js"}
|
|
@@ -14,7 +14,7 @@ import Text from "../Typography/Text/Text";
|
|
|
14
14
|
import { ANDROID, VKCOM } from "../../lib/platform";
|
|
15
15
|
import { Icon16Done, Icon24Done } from "@vkontakte/icons";
|
|
16
16
|
import { ActionSheetContext } from "../ActionSheet/ActionSheetContext";
|
|
17
|
-
import Caption from "../Typography/Caption/Caption";
|
|
17
|
+
import { Caption } from "../Typography/Caption/Caption";
|
|
18
18
|
import Headline from "../Typography/Headline/Headline";
|
|
19
19
|
import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
|
|
20
20
|
import "./ActionSheetItem.css";
|
|
@@ -88,11 +88,8 @@ var ActionSheetItemComponent = function ActionSheetItemComponent(_ref) {
|
|
|
88
88
|
level: isCompact || hasReactNode(before) ? "3" : "2",
|
|
89
89
|
vkuiClass: "ActionSheetItem__meta"
|
|
90
90
|
}, meta)))), hasReactNode(subtitle) && (sizeY === SizeType.COMPACT ? createScopedElement(Caption, {
|
|
91
|
-
|
|
92
|
-
vkuiClass: "ActionSheetItem__subtitle",
|
|
93
|
-
level: "1"
|
|
91
|
+
vkuiClass: "ActionSheetItem__subtitle"
|
|
94
92
|
}, subtitle) : createScopedElement(Subhead, {
|
|
95
|
-
weight: "regular",
|
|
96
93
|
vkuiClass: "ActionSheetItem__subtitle"
|
|
97
94
|
}, subtitle))), selectable && createScopedElement("div", {
|
|
98
95
|
vkuiClass: "ActionSheetItem__after"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"names":["React","classNames","getClassName","Tappable","usePlatform","hasReactNode","noop","Subhead","Title","Text","ANDROID","VKCOM","Icon16Done","Icon24Done","ActionSheetContext","Caption","Headline","withAdaptivity","SizeType","ActionSheetItemComponent","children","autoclose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","sizeY","onImmediateClick","restProps","platform","useContext","onItemClick","isDesktop","Component","href","isCompact","Boolean","COMPACT","disabled","ActionSheetItem"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode, noop } from \"../../lib/utils\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport Title from \"../Typography/Title/Title\";\nimport Text from \"../Typography/Text/Text\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { Icon16Done, Icon24Done } from \"@vkontakte/icons\";\nimport {\n ActionSheetContext,\n ActionSheetContextType,\n} from \"../ActionSheet/ActionSheetContext\";\nimport Caption from \"../Typography/Caption/Caption\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport {\n withAdaptivity,\n AdaptivityProps,\n SizeType,\n} from \"../../hoc/withAdaptivity\";\nimport \"./ActionSheetItem.css\";\n\nexport interface ActionSheetItemProps\n extends React.HTMLAttributes<HTMLElement>,\n React.AnchorHTMLAttributes<HTMLElement>,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"name\" | \"checked\" | \"value\"\n >,\n AdaptivityProps {\n mode?: \"default\" | \"destructive\" | \"cancel\";\n before?: React.ReactNode;\n meta?: React.ReactNode;\n subtitle?: React.ReactNode;\n autoclose?: boolean;\n selectable?: boolean;\n disabled?: boolean;\n /**\n * Если autoclose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n */\n onClick?: React.MouseEventHandler<HTMLElement>;\n onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n}\n\nconst ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({\n children,\n autoclose,\n mode = \"default\",\n meta,\n subtitle,\n before,\n selectable,\n value,\n name,\n checked,\n defaultChecked,\n onChange,\n onClick,\n sizeY,\n onImmediateClick,\n ...restProps\n}: ActionSheetItemProps) => {\n const platform = usePlatform();\n const { onItemClick = () => noop, isDesktop } =\n React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n\n let Component: React.ElementType = restProps.href ? \"a\" : \"div\";\n\n if (selectable) {\n Component = \"label\";\n }\n\n const isCompact = hasReactNode(subtitle) || hasReactNode(meta) || selectable;\n\n return (\n <Tappable\n {...restProps}\n onClick={\n selectable\n ? onClick\n : onItemClick(onClick, onImmediateClick, Boolean(autoclose))\n }\n activeMode=\"ActionSheetItem--active\"\n vkuiClass={classNames(\n getClassName(\"ActionSheetItem\", platform),\n `ActionSheetItem--${mode}`,\n `ActionSheetItem--sizeY-${sizeY}`,\n {\n \"ActionSheetItem--compact\": isCompact,\n \"ActionSheetItem--desktop\": isDesktop,\n \"ActionSheetItem--withSubtitle\": hasReactNode(subtitle),\n }\n )}\n Component={Component}\n >\n {hasReactNode(before) && (\n <div vkuiClass=\"ActionSheetItem__before\">{before}</div>\n )}\n <div vkuiClass=\"ActionSheetItem__container\">\n <div vkuiClass=\"ActionSheetItem__content\">\n {sizeY === SizeType.COMPACT ? (\n <React.Fragment>\n <Text\n weight={mode === \"cancel\" ? \"medium\" : \"regular\"}\n vkuiClass=\"ActionSheetItem__children\"\n >\n {children}\n </Text>\n {hasReactNode(meta) && (\n <Text weight=\"regular\" vkuiClass=\"ActionSheetItem__meta\">\n {meta}\n </Text>\n )}\n </React.Fragment>\n ) : (\n <React.Fragment>\n {platform === ANDROID ? (\n <Headline weight={mode === \"cancel\" ? \"medium\" : \"regular\"}>\n {children}\n </Headline>\n ) : (\n <Title\n weight={mode === \"cancel\" ? \"2\" : \"3\"}\n level={isCompact || hasReactNode(before) ? \"3\" : \"2\"}\n vkuiClass=\"ActionSheetItem__children\"\n >\n {children}\n </Title>\n )}\n {hasReactNode(meta) &&\n (platform === ANDROID ? (\n <Headline weight={mode === \"cancel\" ? \"medium\" : \"regular\"}>\n {children}\n </Headline>\n ) : (\n <Title\n weight=\"3\"\n level={isCompact || hasReactNode(before) ? \"3\" : \"2\"}\n vkuiClass=\"ActionSheetItem__meta\"\n >\n {meta}\n </Title>\n ))}\n </React.Fragment>\n )}\n </div>\n {hasReactNode(subtitle) &&\n (sizeY === SizeType.COMPACT ? (\n <Caption\n weight=\"regular\"\n vkuiClass=\"ActionSheetItem__subtitle\"\n level=\"1\"\n >\n {subtitle}\n </Caption>\n ) : (\n <Subhead weight=\"regular\" vkuiClass=\"ActionSheetItem__subtitle\">\n {subtitle}\n </Subhead>\n ))}\n </div>\n {selectable && (\n <div vkuiClass=\"ActionSheetItem__after\">\n <input\n type=\"radio\"\n vkuiClass=\"ActionSheetItem__radio\"\n name={name}\n value={value}\n onChange={onChange}\n onClick={onItemClick(noop, noop, Boolean(autoclose))}\n defaultChecked={defaultChecked}\n checked={checked}\n disabled={restProps.disabled}\n />\n <div vkuiClass=\"ActionSheetItem__marker\">\n {platform === VKCOM ? <Icon24Done /> : <Icon16Done />}\n </div>\n </div>\n )}\n </Tappable>\n );\n};\n\nexport const ActionSheetItem = withAdaptivity(ActionSheetItemComponent, {\n sizeY: true,\n});\n"],"file":"ActionSheetItem.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"names":["React","classNames","getClassName","Tappable","usePlatform","hasReactNode","noop","Subhead","Title","Text","ANDROID","VKCOM","Icon16Done","Icon24Done","ActionSheetContext","Caption","Headline","withAdaptivity","SizeType","ActionSheetItemComponent","children","autoclose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","sizeY","onImmediateClick","restProps","platform","useContext","onItemClick","isDesktop","Component","href","isCompact","Boolean","COMPACT","disabled","ActionSheetItem"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode, noop } from \"../../lib/utils\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport Title from \"../Typography/Title/Title\";\nimport Text from \"../Typography/Text/Text\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { Icon16Done, Icon24Done } from \"@vkontakte/icons\";\nimport {\n ActionSheetContext,\n ActionSheetContextType,\n} from \"../ActionSheet/ActionSheetContext\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport {\n withAdaptivity,\n AdaptivityProps,\n SizeType,\n} from \"../../hoc/withAdaptivity\";\nimport \"./ActionSheetItem.css\";\n\nexport interface ActionSheetItemProps\n extends React.HTMLAttributes<HTMLElement>,\n React.AnchorHTMLAttributes<HTMLElement>,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"name\" | \"checked\" | \"value\"\n >,\n AdaptivityProps {\n mode?: \"default\" | \"destructive\" | \"cancel\";\n before?: React.ReactNode;\n meta?: React.ReactNode;\n subtitle?: React.ReactNode;\n autoclose?: boolean;\n selectable?: boolean;\n disabled?: boolean;\n /**\n * Если autoclose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n */\n onClick?: React.MouseEventHandler<HTMLElement>;\n onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n}\n\nconst ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({\n children,\n autoclose,\n mode = \"default\",\n meta,\n subtitle,\n before,\n selectable,\n value,\n name,\n checked,\n defaultChecked,\n onChange,\n onClick,\n sizeY,\n onImmediateClick,\n ...restProps\n}: ActionSheetItemProps) => {\n const platform = usePlatform();\n const { onItemClick = () => noop, isDesktop } =\n React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n\n let Component: React.ElementType = restProps.href ? \"a\" : \"div\";\n\n if (selectable) {\n Component = \"label\";\n }\n\n const isCompact = hasReactNode(subtitle) || hasReactNode(meta) || selectable;\n\n return (\n <Tappable\n {...restProps}\n onClick={\n selectable\n ? onClick\n : onItemClick(onClick, onImmediateClick, Boolean(autoclose))\n }\n activeMode=\"ActionSheetItem--active\"\n vkuiClass={classNames(\n getClassName(\"ActionSheetItem\", platform),\n `ActionSheetItem--${mode}`,\n `ActionSheetItem--sizeY-${sizeY}`,\n {\n \"ActionSheetItem--compact\": isCompact,\n \"ActionSheetItem--desktop\": isDesktop,\n \"ActionSheetItem--withSubtitle\": hasReactNode(subtitle),\n }\n )}\n Component={Component}\n >\n {hasReactNode(before) && (\n <div vkuiClass=\"ActionSheetItem__before\">{before}</div>\n )}\n <div vkuiClass=\"ActionSheetItem__container\">\n <div vkuiClass=\"ActionSheetItem__content\">\n {sizeY === SizeType.COMPACT ? (\n <React.Fragment>\n <Text\n weight={mode === \"cancel\" ? \"medium\" : \"regular\"}\n vkuiClass=\"ActionSheetItem__children\"\n >\n {children}\n </Text>\n {hasReactNode(meta) && (\n <Text weight=\"regular\" vkuiClass=\"ActionSheetItem__meta\">\n {meta}\n </Text>\n )}\n </React.Fragment>\n ) : (\n <React.Fragment>\n {platform === ANDROID ? (\n <Headline weight={mode === \"cancel\" ? \"medium\" : \"regular\"}>\n {children}\n </Headline>\n ) : (\n <Title\n weight={mode === \"cancel\" ? \"2\" : \"3\"}\n level={isCompact || hasReactNode(before) ? \"3\" : \"2\"}\n vkuiClass=\"ActionSheetItem__children\"\n >\n {children}\n </Title>\n )}\n {hasReactNode(meta) &&\n (platform === ANDROID ? (\n <Headline weight={mode === \"cancel\" ? \"medium\" : \"regular\"}>\n {children}\n </Headline>\n ) : (\n <Title\n weight=\"3\"\n level={isCompact || hasReactNode(before) ? \"3\" : \"2\"}\n vkuiClass=\"ActionSheetItem__meta\"\n >\n {meta}\n </Title>\n ))}\n </React.Fragment>\n )}\n </div>\n {hasReactNode(subtitle) &&\n (sizeY === SizeType.COMPACT ? (\n <Caption vkuiClass=\"ActionSheetItem__subtitle\">{subtitle}</Caption>\n ) : (\n <Subhead vkuiClass=\"ActionSheetItem__subtitle\">{subtitle}</Subhead>\n ))}\n </div>\n {selectable && (\n <div vkuiClass=\"ActionSheetItem__after\">\n <input\n type=\"radio\"\n vkuiClass=\"ActionSheetItem__radio\"\n name={name}\n value={value}\n onChange={onChange}\n onClick={onItemClick(noop, noop, Boolean(autoclose))}\n defaultChecked={defaultChecked}\n checked={checked}\n disabled={restProps.disabled}\n />\n <div vkuiClass=\"ActionSheetItem__marker\">\n {platform === VKCOM ? <Icon24Done /> : <Icon16Done />}\n </div>\n </div>\n )}\n </Tappable>\n );\n};\n\nexport const ActionSheetItem = withAdaptivity(ActionSheetItemComponent, {\n sizeY: true,\n});\n"],"file":"ActionSheetItem.js"}
|
|
@@ -21,7 +21,7 @@ import Button from "../Button/Button";
|
|
|
21
21
|
import { hasReactNode } from "../../lib/utils";
|
|
22
22
|
import Headline from "../Typography/Headline/Headline";
|
|
23
23
|
import Title from "../Typography/Title/Title";
|
|
24
|
-
import Caption from "../Typography/Caption/Caption";
|
|
24
|
+
import { Caption } from "../Typography/Caption/Caption";
|
|
25
25
|
import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
|
|
26
26
|
import { FocusTrap } from "../FocusTrap/FocusTrap";
|
|
27
27
|
import "./Alert.css";
|
|
@@ -182,16 +182,13 @@ var AlertComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
182
182
|
switch (this.props.platform) {
|
|
183
183
|
case VKCOM:
|
|
184
184
|
return createScopedElement(Caption, {
|
|
185
|
-
vkuiClass: "Alert__text"
|
|
186
|
-
level: "1",
|
|
187
|
-
weight: "regular"
|
|
185
|
+
vkuiClass: "Alert__text"
|
|
188
186
|
}, text);
|
|
189
187
|
|
|
190
188
|
case IOS:
|
|
191
189
|
return createScopedElement(Caption, {
|
|
192
190
|
vkuiClass: "Alert__text",
|
|
193
|
-
level: "2"
|
|
194
|
-
weight: "regular"
|
|
191
|
+
level: "2"
|
|
195
192
|
}, text);
|
|
196
193
|
|
|
197
194
|
case ANDROID:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["React","Tappable","PopoutWrapper","getClassName","classNames","transitionEvent","ANDROID","VKCOM","IOS","withPlatform","withAdaptivity","ViewWidth","Button","hasReactNode","Headline","Title","Caption","ModalDismissButton","FocusTrap","AlertComponent","props","undefined","item","action","autoclose","setState","closing","waitTransitionFinish","e","propertyName","onClose","stopPropagation","i","platform","Component","href","mode","onItemClick","target","title","viewWidth","DESKTOP","element","createRef","state","eventHandler","supported","current","removeEventListener","name","addEventListener","transitionFinishTimeout","clearTimeout","setTimeout","bind","timeout","header","text","actions","actionsLayout","children","className","style","restProps","resolvedActionsLayout","canShowCloseButton","SMALL_TABLET","isDesktop","renderHeader","renderText","map","renderAction","Alert"],"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 { transitionEvent } from \"../../lib/supportEvents\";\nimport { ANDROID, VKCOM, IOS } from \"../../lib/platform\";\nimport { HasPlatform } from \"../../types\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport Button, { ButtonProps } from \"../Button/Button\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport Title from \"../Typography/Title/Title\";\nimport Caption from \"../Typography/Caption/Caption\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport {\n AdaptivityContextInterface,\n AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\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\n extends React.HTMLAttributes<HTMLElement>,\n HasPlatform,\n AdaptivityProps {\n actionsLayout?: \"vertical\" | \"horizontal\";\n actions?: AlertAction[];\n header?: React.ReactNode;\n text?: React.ReactNode;\n onClose?: VoidFunction;\n}\n\nexport type TAlertProps = AlertProps & AdaptivityContextInterface;\n\nexport interface AlertState {\n closing: boolean;\n}\n\ntype TransitionEndHandler = (e?: TransitionEvent) => void;\n\ntype ItemClickHander = (item: AlertActionInterface) => () => void;\n\nclass AlertComponent extends React.Component<TAlertProps, AlertState> {\n constructor(props: TAlertProps) {\n super(props);\n this.element = React.createRef();\n this.state = {\n closing: false,\n };\n }\n\n element: React.RefObject<HTMLDivElement>;\n\n private transitionFinishTimeout: number | undefined = undefined;\n\n static defaultProps: Partial<TAlertProps> = {\n actionsLayout: \"horizontal\",\n actions: [],\n };\n\n private get timeout(): number {\n return this.props.platform === ANDROID || this.props.platform === VKCOM\n ? 200\n : 300;\n }\n\n onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {\n const { action, autoclose } = item;\n\n if (autoclose) {\n this.setState({ closing: true });\n this.waitTransitionFinish((e?: TransitionEvent) => {\n if (!e || e.propertyName === \"opacity\") {\n autoclose && this.props.onClose?.();\n action && action();\n }\n });\n } else {\n action && action();\n }\n };\n\n onClose: VoidFunction = () => {\n this.setState({ closing: true });\n this.waitTransitionFinish((e?: TransitionEvent) => {\n if (!e || e.propertyName === \"opacity\") {\n this.props.onClose?.();\n }\n });\n };\n\n stopPropagation: React.MouseEventHandler = (e: React.SyntheticEvent) => {\n e.stopPropagation();\n };\n\n waitTransitionFinish(eventHandler: TransitionEndHandler) {\n if (transitionEvent.supported && this.element.current) {\n this.element.current.removeEventListener(\n transitionEvent.name as string,\n eventHandler as () => void\n );\n this.element.current.addEventListener(\n transitionEvent.name as string,\n eventHandler as () => void\n );\n } else {\n if (this.transitionFinishTimeout) {\n clearTimeout(this.transitionFinishTimeout);\n }\n this.transitionFinishTimeout = setTimeout(\n eventHandler.bind(this),\n this.timeout\n );\n }\n }\n\n renderHeader(header: React.ReactNode) {\n switch (this.props.platform) {\n case VKCOM:\n return (\n <Headline vkuiClass=\"Alert__header\" weight=\"medium\">\n {header}\n </Headline>\n );\n case IOS:\n return (\n <Title vkuiClass=\"Alert__header\" weight=\"1\" level=\"3\">\n {header}\n </Title>\n );\n case ANDROID:\n return (\n <Title vkuiClass=\"Alert__header\" weight=\"2\" level=\"2\">\n {header}\n </Title>\n );\n default:\n return undefined;\n }\n }\n\n renderText(text: React.ReactNode) {\n switch (this.props.platform) {\n case VKCOM:\n return (\n <Caption vkuiClass=\"Alert__text\" level=\"1\" weight=\"regular\">\n {text}\n </Caption>\n );\n case IOS:\n return (\n <Caption vkuiClass=\"Alert__text\" level=\"2\" weight=\"regular\">\n {text}\n </Caption>\n );\n case ANDROID:\n return (\n <Headline vkuiClass=\"Alert__text\" weight=\"regular\">\n {text}\n </Headline>\n );\n default:\n return undefined;\n }\n }\n\n renderAction = (action: AlertActionInterface, i: number) => {\n const { platform } = this.props;\n\n if (platform === IOS) {\n const { Component = \"button\" } = action;\n return (\n <Tappable\n Component={action.href ? \"a\" : Component}\n vkuiClass={classNames(\n \"Alert__action\",\n `Alert__action--${action.mode}`\n )}\n onClick={this.onItemClick(action)}\n href={action.href}\n key={`alert-action-${i}`}\n target={action.target}\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 (\n this.props.viewWidth === ViewWidth.DESKTOP &&\n action.mode === \"destructive\"\n ) {\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={this.onItemClick(action)}\n Component={action.Component}\n href={action.href}\n key={`alert-action-${i}`}\n target={action.target}\n >\n {action.title}\n </Button>\n );\n };\n\n render() {\n const {\n actions,\n actionsLayout,\n children,\n className,\n style,\n platform,\n viewWidth,\n text,\n header,\n ...restProps\n } = this.props;\n const { closing } = this.state;\n\n const resolvedActionsLayout: TAlertProps[\"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 return (\n <PopoutWrapper\n className={className}\n closing={closing}\n style={style}\n onClick={this.onClose}\n >\n <FocusTrap\n {...restProps}\n getRootRef={this.element}\n onClick={this.stopPropagation}\n onClose={this.onClose}\n timeout={this.timeout}\n vkuiClass={classNames(getClassName(\"Alert\", platform), {\n \"Alert--v\": resolvedActionsLayout === \"vertical\",\n \"Alert--h\": resolvedActionsLayout === \"horizontal\",\n \"Alert--closing\": closing,\n \"Alert--desktop\": isDesktop,\n })}\n >\n {canShowCloseButton && <ModalDismissButton onClick={this.onClose} />}\n <div vkuiClass=\"Alert__content\">\n {hasReactNode(header) && this.renderHeader(header)}\n {hasReactNode(text) && this.renderText(text)}\n {children}\n </div>\n <footer vkuiClass=\"Alert__actions\">\n {actions?.map(this.renderAction)}\n </footer>\n </FocusTrap>\n </PopoutWrapper>\n );\n }\n}\n\nexport const Alert = withPlatform(\n withAdaptivity(AlertComponent, {\n viewWidth: true,\n })\n);\n"],"file":"Alert.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["React","Tappable","PopoutWrapper","getClassName","classNames","transitionEvent","ANDROID","VKCOM","IOS","withPlatform","withAdaptivity","ViewWidth","Button","hasReactNode","Headline","Title","Caption","ModalDismissButton","FocusTrap","AlertComponent","props","undefined","item","action","autoclose","setState","closing","waitTransitionFinish","e","propertyName","onClose","stopPropagation","i","platform","Component","href","mode","onItemClick","target","title","viewWidth","DESKTOP","element","createRef","state","eventHandler","supported","current","removeEventListener","name","addEventListener","transitionFinishTimeout","clearTimeout","setTimeout","bind","timeout","header","text","actions","actionsLayout","children","className","style","restProps","resolvedActionsLayout","canShowCloseButton","SMALL_TABLET","isDesktop","renderHeader","renderText","map","renderAction","Alert"],"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 { transitionEvent } from \"../../lib/supportEvents\";\nimport { ANDROID, VKCOM, IOS } from \"../../lib/platform\";\nimport { HasPlatform } from \"../../types\";\nimport { withPlatform } from \"../../hoc/withPlatform\";\nimport { withAdaptivity, ViewWidth } from \"../../hoc/withAdaptivity\";\nimport Button, { ButtonProps } from \"../Button/Button\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport Title from \"../Typography/Title/Title\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport ModalDismissButton from \"../ModalDismissButton/ModalDismissButton\";\nimport { FocusTrap } from \"../FocusTrap/FocusTrap\";\nimport {\n AdaptivityContextInterface,\n AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\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\n extends React.HTMLAttributes<HTMLElement>,\n HasPlatform,\n AdaptivityProps {\n actionsLayout?: \"vertical\" | \"horizontal\";\n actions?: AlertAction[];\n header?: React.ReactNode;\n text?: React.ReactNode;\n onClose?: VoidFunction;\n}\n\nexport type TAlertProps = AlertProps & AdaptivityContextInterface;\n\nexport interface AlertState {\n closing: boolean;\n}\n\ntype TransitionEndHandler = (e?: TransitionEvent) => void;\n\ntype ItemClickHander = (item: AlertActionInterface) => () => void;\n\nclass AlertComponent extends React.Component<TAlertProps, AlertState> {\n constructor(props: TAlertProps) {\n super(props);\n this.element = React.createRef();\n this.state = {\n closing: false,\n };\n }\n\n element: React.RefObject<HTMLDivElement>;\n\n private transitionFinishTimeout: number | undefined = undefined;\n\n static defaultProps: Partial<TAlertProps> = {\n actionsLayout: \"horizontal\",\n actions: [],\n };\n\n private get timeout(): number {\n return this.props.platform === ANDROID || this.props.platform === VKCOM\n ? 200\n : 300;\n }\n\n onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {\n const { action, autoclose } = item;\n\n if (autoclose) {\n this.setState({ closing: true });\n this.waitTransitionFinish((e?: TransitionEvent) => {\n if (!e || e.propertyName === \"opacity\") {\n autoclose && this.props.onClose?.();\n action && action();\n }\n });\n } else {\n action && action();\n }\n };\n\n onClose: VoidFunction = () => {\n this.setState({ closing: true });\n this.waitTransitionFinish((e?: TransitionEvent) => {\n if (!e || e.propertyName === \"opacity\") {\n this.props.onClose?.();\n }\n });\n };\n\n stopPropagation: React.MouseEventHandler = (e: React.SyntheticEvent) => {\n e.stopPropagation();\n };\n\n waitTransitionFinish(eventHandler: TransitionEndHandler) {\n if (transitionEvent.supported && this.element.current) {\n this.element.current.removeEventListener(\n transitionEvent.name as string,\n eventHandler as () => void\n );\n this.element.current.addEventListener(\n transitionEvent.name as string,\n eventHandler as () => void\n );\n } else {\n if (this.transitionFinishTimeout) {\n clearTimeout(this.transitionFinishTimeout);\n }\n this.transitionFinishTimeout = setTimeout(\n eventHandler.bind(this),\n this.timeout\n );\n }\n }\n\n renderHeader(header: React.ReactNode) {\n switch (this.props.platform) {\n case VKCOM:\n return (\n <Headline vkuiClass=\"Alert__header\" weight=\"medium\">\n {header}\n </Headline>\n );\n case IOS:\n return (\n <Title vkuiClass=\"Alert__header\" weight=\"1\" level=\"3\">\n {header}\n </Title>\n );\n case ANDROID:\n return (\n <Title vkuiClass=\"Alert__header\" weight=\"2\" level=\"2\">\n {header}\n </Title>\n );\n default:\n return undefined;\n }\n }\n\n renderText(text: React.ReactNode) {\n switch (this.props.platform) {\n case VKCOM:\n return <Caption vkuiClass=\"Alert__text\">{text}</Caption>;\n case IOS:\n return (\n <Caption vkuiClass=\"Alert__text\" level=\"2\">\n {text}\n </Caption>\n );\n case ANDROID:\n return (\n <Headline vkuiClass=\"Alert__text\" weight=\"regular\">\n {text}\n </Headline>\n );\n default:\n return undefined;\n }\n }\n\n renderAction = (action: AlertActionInterface, i: number) => {\n const { platform } = this.props;\n\n if (platform === IOS) {\n const { Component = \"button\" } = action;\n return (\n <Tappable\n Component={action.href ? \"a\" : Component}\n vkuiClass={classNames(\n \"Alert__action\",\n `Alert__action--${action.mode}`\n )}\n onClick={this.onItemClick(action)}\n href={action.href}\n key={`alert-action-${i}`}\n target={action.target}\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 (\n this.props.viewWidth === ViewWidth.DESKTOP &&\n action.mode === \"destructive\"\n ) {\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={this.onItemClick(action)}\n Component={action.Component}\n href={action.href}\n key={`alert-action-${i}`}\n target={action.target}\n >\n {action.title}\n </Button>\n );\n };\n\n render() {\n const {\n actions,\n actionsLayout,\n children,\n className,\n style,\n platform,\n viewWidth,\n text,\n header,\n ...restProps\n } = this.props;\n const { closing } = this.state;\n\n const resolvedActionsLayout: TAlertProps[\"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 return (\n <PopoutWrapper\n className={className}\n closing={closing}\n style={style}\n onClick={this.onClose}\n >\n <FocusTrap\n {...restProps}\n getRootRef={this.element}\n onClick={this.stopPropagation}\n onClose={this.onClose}\n timeout={this.timeout}\n vkuiClass={classNames(getClassName(\"Alert\", platform), {\n \"Alert--v\": resolvedActionsLayout === \"vertical\",\n \"Alert--h\": resolvedActionsLayout === \"horizontal\",\n \"Alert--closing\": closing,\n \"Alert--desktop\": isDesktop,\n })}\n >\n {canShowCloseButton && <ModalDismissButton onClick={this.onClose} />}\n <div vkuiClass=\"Alert__content\">\n {hasReactNode(header) && this.renderHeader(header)}\n {hasReactNode(text) && this.renderText(text)}\n {children}\n </div>\n <footer vkuiClass=\"Alert__actions\">\n {actions?.map(this.renderAction)}\n </footer>\n </FocusTrap>\n </PopoutWrapper>\n );\n }\n}\n\nexport const Alert = withPlatform(\n withAdaptivity(AlertComponent, {\n viewWidth: true,\n })\n);\n"],"file":"Alert.js"}
|
|
@@ -37,9 +37,7 @@ var BannerSubheader = function BannerSubheader(_ref2) {
|
|
|
37
37
|
|
|
38
38
|
return size === "m" ? createScopedElement(Text, _extends({
|
|
39
39
|
weight: "regular"
|
|
40
|
-
}, restProps)) : createScopedElement(Subhead,
|
|
41
|
-
weight: "regular"
|
|
42
|
-
}, restProps));
|
|
40
|
+
}, restProps)) : createScopedElement(Subhead, restProps);
|
|
43
41
|
};
|
|
44
42
|
|
|
45
43
|
var Banner = function Banner(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["React","getClassName","classNames","usePlatform","ANDROID","IOS","VKCOM","hasReactNode","Icon24Chevron","Icon24DismissSubstract","Icon24DismissDark","Icon24Cancel","Tappable","IconButton","Headline","Subhead","Text","Title","BannerHeader","size","restProps","BannerSubheader","Banner","props","platform","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","undefined","Children","count","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { ANDROID, IOS, VKCOM } 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\ntype BannerTypographyProps = Pick<BannerProps, \"size\"> & HasComponent;\n\nconst BannerHeader: React.FC<BannerTypographyProps> = ({\n size,\n ...restProps\n}) => {\n return size === \"m\" ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Headline weight=\"medium\" {...restProps} />\n );\n};\n\nconst BannerSubheader: React.FC<BannerTypographyProps> = ({\n size,\n ...restProps\n}) => {\n return size === \"m\" ? (\n <Text weight=\"regular\" {...restProps} />\n ) : (\n <Subhead weight=\"regular\" {...restProps} />\n );\n};\n\nconst Banner: React.FC<BannerProps> = (props: BannerProps) => {\n const platform = usePlatform();\n const {\n mode,\n imageTheme,\n size,\n before,\n asideMode,\n header,\n subheader,\n text,\n children,\n background,\n actions,\n onDismiss,\n dismissLabel,\n ...restProps\n } = props;\n\n return (\n <section\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"Banner\", platform),\n `Banner--md-${mode}`,\n `Banner--sz-${size}`,\n {\n \"Banner--inverted\": mode === \"image\" && imageTheme === \"dark\",\n }\n )}\n >\n <Tappable\n vkuiClass=\"Banner__in\"\n activeMode={platform === IOS ? \"opacity\" : \"background\"}\n disabled={asideMode !== \"expand\"}\n role={asideMode === \"expand\" ? \"button\" : undefined}\n >\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 <BannerHeader\n size={size}\n Component=\"span\"\n vkuiClass=\"Banner__header\"\n >\n {header}\n </BannerHeader>\n )}\n {hasReactNode(subheader) && (\n <BannerSubheader\n Component=\"span\"\n size={size}\n vkuiClass=\"Banner__subheader\"\n >\n {subheader}\n </BannerSubheader>\n )}\n {hasReactNode(text) && (\n <Text weight=\"regular\" vkuiClass=\"Banner__text\">\n {text}\n </Text>\n )}\n {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n <div vkuiClass=\"Banner__actions\">{actions}</div>\n )}\n </div>\n\n {!!asideMode && (\n <div vkuiClass=\"Banner__aside\">\n {asideMode === \"expand\" && <Icon24Chevron />}\n\n {asideMode === \"dismiss\" && (\n <IconButton\n aria-label={dismissLabel}\n vkuiClass=\"Banner__dismiss\"\n onClick={onDismiss}\n hoverMode=\"opacity\"\n hasActive={false}\n >\n {(platform === ANDROID || platform === VKCOM) && (\n <Icon24Cancel />\n )}\n {platform === IOS &&\n (mode === \"image\" ? (\n <Icon24DismissDark />\n ) : (\n <Icon24DismissSubstract />\n ))}\n </IconButton>\n )}\n </div>\n )}\n </Tappable>\n </section>\n );\n};\n\nBanner.defaultProps = {\n dismissLabel: \"Скрыть\",\n mode: \"tint\",\n size: \"s\",\n imageTheme: \"dark\",\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default Banner;\n"],"file":"Banner.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["React","getClassName","classNames","usePlatform","ANDROID","IOS","VKCOM","hasReactNode","Icon24Chevron","Icon24DismissSubstract","Icon24DismissDark","Icon24Cancel","Tappable","IconButton","Headline","Subhead","Text","Title","BannerHeader","size","restProps","BannerSubheader","Banner","props","platform","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","undefined","Children","count","defaultProps"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,OAAT,EAAkBC,GAAlB,EAAuBC,KAAvB;AACA,SAASC,YAAT;AACA,SACEC,aADF,EAEEC,sBAFF,EAGEC,iBAHF,EAIEC,YAJF,QAKO,kBALP;AAMA,OAAOC,QAAP;AACA,OAAOC,UAAP;AACA,OAAOC,QAAP;AACA,OAAOC,OAAP;AACA,OAAOC,IAAP;AACA,OAAOC,KAAP;AACA;;AAkEA,IAAMC,YAA6C,GAAG,SAAhDA,YAAgD,OAGhD;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADDC,SACC;;AACJ,SAAOD,IAAI,KAAK,GAAT,GACL,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC;AAAxB,KAAgCC,SAAhC,EADK,GAGL,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAC;AAAjB,KAA8BA,SAA9B,EAHF;AAKD,CATD;;AAWA,IAAMC,eAAgD,GAAG,SAAnDA,eAAmD,QAGnD;AAAA,MAFJF,IAEI,SAFJA,IAEI;AAAA,MADDC,SACC;;AACJ,SAAOD,IAAI,KAAK,GAAT,GACL,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC;AAAb,KAA2BC,SAA3B,EADK,GAGL,oBAAC,OAAD,EAAaA,SAAb,CAHF;AAKD,CATD;;AAWA,IAAME,MAA6B,GAAG,SAAhCA,MAAgC,CAACC,KAAD,EAAwB;AAC5D,MAAMC,QAAQ,GAAGrB,WAAW,EAA5B;;AACA,MACEsB,IADF,GAeIF,KAfJ,CACEE,IADF;AAAA,MAEEC,UAFF,GAeIH,KAfJ,CAEEG,UAFF;AAAA,MAGEP,IAHF,GAeII,KAfJ,CAGEJ,IAHF;AAAA,MAIEQ,MAJF,GAeIJ,KAfJ,CAIEI,MAJF;AAAA,MAKEC,SALF,GAeIL,KAfJ,CAKEK,SALF;AAAA,MAMEC,MANF,GAeIN,KAfJ,CAMEM,MANF;AAAA,MAOEC,SAPF,GAeIP,KAfJ,CAOEO,SAPF;AAAA,MAQEC,IARF,GAeIR,KAfJ,CAQEQ,IARF;AAAA,MASEC,QATF,GAeIT,KAfJ,CASES,QATF;AAAA,MAUEC,UAVF,GAeIV,KAfJ,CAUEU,UAVF;AAAA,MAWEC,OAXF,GAeIX,KAfJ,CAWEW,OAXF;AAAA,MAYEC,SAZF,GAeIZ,KAfJ,CAYEY,SAZF;AAAA,MAaEC,YAbF,GAeIb,KAfJ,CAaEa,YAbF;AAAA,MAcKhB,SAdL,4BAeIG,KAfJ;;AAiBA,SACE,4CACMH,SADN;AAEE,IAAA,SAAS,EAAElB,UAAU,CACnBD,YAAY,CAAC,QAAD,EAAWuB,QAAX,CADO,uBAELC,IAFK,wBAGLN,IAHK,GAInB;AACE,0BAAoBM,IAAI,KAAK,OAAT,IAAoBC,UAAU,KAAK;AADzD,KAJmB;AAFvB,MAWE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,YADZ;AAEE,IAAA,UAAU,EAAEF,QAAQ,KAAKnB,GAAb,GAAmB,SAAnB,GAA+B,YAF7C;AAGE,IAAA,QAAQ,EAAEuB,SAAS,KAAK,QAH1B;AAIE,IAAA,IAAI,EAAEA,SAAS,KAAK,QAAd,GAAyB,QAAzB,GAAoCS;AAJ5C,KAMGZ,IAAI,KAAK,OAAT,IAAoBQ,UAApB,IACC;AAAK,mBAAY,MAAjB;AAAwB,IAAA,SAAS,EAAC;AAAlC,KACGA,UADH,CAPJ,EAYGN,MAAM,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiCA,MAAjC,CAZb,EAcE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGpB,YAAY,CAACsB,MAAD,CAAZ,IACC,oBAAC,YAAD;AACE,IAAA,IAAI,EAAEV,IADR;AAEE,IAAA,SAAS,EAAC,MAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGU,MALH,CAFJ,EAUGtB,YAAY,CAACuB,SAAD,CAAZ,IACC,oBAAC,eAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,IAAI,EAAEX,IAFR;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGW,SALH,CAXJ,EAmBGvB,YAAY,CAACwB,IAAD,CAAZ,IACC,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAC,SAAb;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACGA,IADH,CApBJ,EAwBGxB,YAAY,CAAC2B,OAAD,CAAZ,IAAyBlC,KAAK,CAACsC,QAAN,CAAeC,KAAf,CAAqBL,OAArB,IAAgC,CAAzD,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,OAAlC,CAzBJ,CAdF,EA2CG,CAAC,CAACN,SAAF,IACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,SAAS,KAAK,QAAd,IAA0B,oBAAC,aAAD,OAD7B,EAGGA,SAAS,KAAK,SAAd,IACC,oBAAC,UAAD;AACE,kBAAYQ,YADd;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,IAAA,OAAO,EAAED,SAHX;AAIE,IAAA,SAAS,EAAC,SAJZ;AAKE,IAAA,SAAS,EAAE;AALb,KAOG,CAACX,QAAQ,KAAKpB,OAAb,IAAwBoB,QAAQ,KAAKlB,KAAtC,KACC,oBAAC,YAAD,OARJ,EAUGkB,QAAQ,KAAKnB,GAAb,KACEoB,IAAI,KAAK,OAAT,GACC,oBAAC,iBAAD,OADD,GAGC,oBAAC,sBAAD,OAJH,CAVH,CAJJ,CA5CJ,CAXF,CADF;AAmFD,CAtGD;;AAwGAH,MAAM,CAACkB,YAAP,GAAsB;AACpBJ,EAAAA,YAAY,EAAE,QADM;AAEpBX,EAAAA,IAAI,EAAE,MAFc;AAGpBN,EAAAA,IAAI,EAAE,GAHc;AAIpBO,EAAAA,UAAU,EAAE;AAJQ,CAAtB,C,CAOA;;AACA,eAAeJ,MAAf","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { ANDROID, IOS, VKCOM } 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\ntype BannerTypographyProps = Pick<BannerProps, \"size\"> & HasComponent;\n\nconst BannerHeader: React.FC<BannerTypographyProps> = ({\n size,\n ...restProps\n}) => {\n return size === \"m\" ? (\n <Title level=\"2\" weight=\"2\" {...restProps} />\n ) : (\n <Headline weight=\"medium\" {...restProps} />\n );\n};\n\nconst BannerSubheader: React.FC<BannerTypographyProps> = ({\n size,\n ...restProps\n}) => {\n return size === \"m\" ? (\n <Text weight=\"regular\" {...restProps} />\n ) : (\n <Subhead {...restProps} />\n );\n};\n\nconst Banner: React.FC<BannerProps> = (props: BannerProps) => {\n const platform = usePlatform();\n const {\n mode,\n imageTheme,\n size,\n before,\n asideMode,\n header,\n subheader,\n text,\n children,\n background,\n actions,\n onDismiss,\n dismissLabel,\n ...restProps\n } = props;\n\n return (\n <section\n {...restProps}\n vkuiClass={classNames(\n getClassName(\"Banner\", platform),\n `Banner--md-${mode}`,\n `Banner--sz-${size}`,\n {\n \"Banner--inverted\": mode === \"image\" && imageTheme === \"dark\",\n }\n )}\n >\n <Tappable\n vkuiClass=\"Banner__in\"\n activeMode={platform === IOS ? \"opacity\" : \"background\"}\n disabled={asideMode !== \"expand\"}\n role={asideMode === \"expand\" ? \"button\" : undefined}\n >\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 <BannerHeader\n size={size}\n Component=\"span\"\n vkuiClass=\"Banner__header\"\n >\n {header}\n </BannerHeader>\n )}\n {hasReactNode(subheader) && (\n <BannerSubheader\n Component=\"span\"\n size={size}\n vkuiClass=\"Banner__subheader\"\n >\n {subheader}\n </BannerSubheader>\n )}\n {hasReactNode(text) && (\n <Text weight=\"regular\" vkuiClass=\"Banner__text\">\n {text}\n </Text>\n )}\n {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n <div vkuiClass=\"Banner__actions\">{actions}</div>\n )}\n </div>\n\n {!!asideMode && (\n <div vkuiClass=\"Banner__aside\">\n {asideMode === \"expand\" && <Icon24Chevron />}\n\n {asideMode === \"dismiss\" && (\n <IconButton\n aria-label={dismissLabel}\n vkuiClass=\"Banner__dismiss\"\n onClick={onDismiss}\n hoverMode=\"opacity\"\n hasActive={false}\n >\n {(platform === ANDROID || platform === VKCOM) && (\n <Icon24Cancel />\n )}\n {platform === IOS &&\n (mode === \"image\" ? (\n <Icon24DismissDark />\n ) : (\n <Icon24DismissSubstract />\n ))}\n </IconButton>\n )}\n </div>\n )}\n </Tappable>\n </section>\n );\n};\n\nBanner.defaultProps = {\n dismissLabel: \"Скрыть\",\n mode: \"tint\",\n size: \"s\",\n imageTheme: \"dark\",\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default Banner;\n"],"file":"Banner.js"}
|
|
@@ -14,4 +14,4 @@
|
|
|
14
14
|
rgba(255, 255, 255, 0.2)
|
|
15
15
|
)}.vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--hover,.vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--hover,.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--hover{background-color:rgba(255,255,255,.24);background-color:var(--vkui--color_background_contrast_secondary_alpha--hover)}.vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--active,.vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--active,.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--active{background-color:rgba(255,255,255,.28);background-color:var(--vkui--color_background_contrast_secondary_alpha--active)}.vkuiButton--lvl-primary.vkuiButton--clr-overlay{color:#2c2d2e;color:var(--media_overlay_button_foreground,
|
|
16
16
|
var(--vkui--color_text_primary_invariably)
|
|
17
|
-
)}.vkuiButton--lvl-primary.vkuiButton--clr-overlay.vkuiButton--hover{color:#000102;color:var(--vkui--color_text_primary_invariably--hover)}.vkuiButton--lvl-primary.vkuiButton--clr-overlay.vkuiButton--active{color:#000105;color:var(--vkui--color_text_primary_invariably--active)}.vkuiButton--lvl-secondary.vkuiButton--clr-overlay,.vkuiButton--lvl-tertiary.vkuiButton--clr-overlay,.vkuiButton--lvl-outline.vkuiButton--clr-overlay{color:#fff;color:var(--white, var(--vkui--color_text_contrast))}.vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--hover,.vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--hover,.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--hover{color:#f5f5f7;color:var(--vkui--color_text_contrast--hover)}.vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--active,.vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--active,.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--active{color:#ebecef;color:var(--vkui--color_text_contrast--active)}.vkuiButton--lvl-outline.vkuiButton--clr-overlay{box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--white, var(--vkui--color_stroke_contrast))}.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--hover{box-shadow:inset 0 0 0 1px #f5f5f7;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--hover)}.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--active{box-shadow:inset 0 0 0 1px #ebecef;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--active)}.vkuiButton__before:not(:last-child){margin-left:-4px}.vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:6px}.vkuiButton__after:not(:first-child){margin-left:6px}.vkuiButton--sz-l .vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:8px}.vkuiButton--sz-l .vkuiButton__after:not(:first-child){margin-left:8px}.vkuiButton--sz-l .vkuiButton__in{justify-content:center;padding-left:20px;padding-right:20px}.vkuiButton:not(.vkuiButton--sz-s) .vkuiButton__content{-webkit-transform:translateY(-1px);transform:translateY(-1px)}.vkuiButton--sz-m{min-height:32px;min-height:var(--vkui--size_button_medium_height--compact)}.vkuiButton--sz-l{min-height:36px;min-height:var(--vkui--size_button_large_height--compact)}.vkuiButton--sizeY-regular{min-height:30px;min-height:var(--vkui--size_button_small_height--regular)}.vkuiButton--sizeY-regular.vkuiButton--sz-m{min-height:36px;min-height:var(--vkui--size_button_medium_height--regular)}.vkuiButton--sizeY-regular.vkuiButton--sz-l{min-height:44px;min-height:var(--vkui--size_button_large_height--regular)}.vkuiBanner__actions>.vkuiButton{margin-top:12px;margin-right:16px;margin-bottom:6px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary{margin:4px 16px 2px -16px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary:first-child{margin-top:4px}.vkuiBanner__actions>.vkuiButton:not(.vkuiButton--lvl-tertiary)+.vkuiButton:not(.vkuiButton--lvl-tertiary){margin-top:0}.vkuiBanner__actions>.vkuiButton:not(.vkuiButton--lvl-tertiary)+.vkuiButton--lvl-tertiary{margin-top:2px;margin-left:-16px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary+.vkuiButton--lvl-tertiary{margin-top:2px}.vkuiModalCardBase__actions .vkuiButton{flex:1;margin-left:6px;margin-right:6px}.vkuiModalCardBase__actions--v .vkuiButton{margin-left:0;margin-right:0}.vkuiModalCardBase__actions--v .vkuiButton+.vkuiButton{margin-top:12px}.vkuiRichCell__actions
|
|
17
|
+
)}.vkuiButton--lvl-primary.vkuiButton--clr-overlay.vkuiButton--hover{color:#000102;color:var(--vkui--color_text_primary_invariably--hover)}.vkuiButton--lvl-primary.vkuiButton--clr-overlay.vkuiButton--active{color:#000105;color:var(--vkui--color_text_primary_invariably--active)}.vkuiButton--lvl-secondary.vkuiButton--clr-overlay,.vkuiButton--lvl-tertiary.vkuiButton--clr-overlay,.vkuiButton--lvl-outline.vkuiButton--clr-overlay{color:#fff;color:var(--white, var(--vkui--color_text_contrast))}.vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--hover,.vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--hover,.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--hover{color:#f5f5f7;color:var(--vkui--color_text_contrast--hover)}.vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--active,.vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--active,.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--active{color:#ebecef;color:var(--vkui--color_text_contrast--active)}.vkuiButton--lvl-outline.vkuiButton--clr-overlay{box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--white, var(--vkui--color_stroke_contrast))}.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--hover{box-shadow:inset 0 0 0 1px #f5f5f7;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--hover)}.vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--active{box-shadow:inset 0 0 0 1px #ebecef;box-shadow:inset 0 0 0 1px var(--vkui--color_stroke_contrast--active)}.vkuiButton__before:not(:last-child){margin-left:-4px}.vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:6px}.vkuiButton__after:not(:first-child){margin-left:6px}.vkuiButton--sz-l .vkuiButton__before:not(:last-child)+.vkuiButton__content{margin-left:8px}.vkuiButton--sz-l .vkuiButton__after:not(:first-child){margin-left:8px}.vkuiButton--sz-l .vkuiButton__in{justify-content:center;padding-left:20px;padding-right:20px}.vkuiButton:not(.vkuiButton--sz-s) .vkuiButton__content{-webkit-transform:translateY(-1px);transform:translateY(-1px)}.vkuiButton--sz-m{min-height:32px;min-height:var(--vkui--size_button_medium_height--compact)}.vkuiButton--sz-l{min-height:36px;min-height:var(--vkui--size_button_large_height--compact)}.vkuiButton--sizeY-regular{min-height:30px;min-height:var(--vkui--size_button_small_height--regular)}.vkuiButton--sizeY-regular.vkuiButton--sz-m{min-height:36px;min-height:var(--vkui--size_button_medium_height--regular)}.vkuiButton--sizeY-regular.vkuiButton--sz-l{min-height:44px;min-height:var(--vkui--size_button_large_height--regular)}.vkuiBanner__actions>.vkuiButton{margin-top:12px;margin-right:16px;margin-bottom:6px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary{margin:4px 16px 2px -16px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary:first-child{margin-top:4px}.vkuiBanner__actions>.vkuiButton:not(.vkuiButton--lvl-tertiary)+.vkuiButton:not(.vkuiButton--lvl-tertiary){margin-top:0}.vkuiBanner__actions>.vkuiButton:not(.vkuiButton--lvl-tertiary)+.vkuiButton--lvl-tertiary{margin-top:2px;margin-left:-16px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary+.vkuiButton--lvl-tertiary{margin-top:2px}.vkuiModalCardBase__actions .vkuiButton{flex:1;margin-left:6px;margin-right:6px}.vkuiModalCardBase__actions--v .vkuiButton{margin-left:0;margin-right:0}.vkuiModalCardBase__actions--v .vkuiButton+.vkuiButton{margin-top:12px}.vkuiRichCell__actions>.vkuiButton+.vkuiButton{margin-left:8px}
|
|
@@ -16,5 +16,5 @@ export interface VKUIButtonProps extends HasAlign {
|
|
|
16
16
|
}
|
|
17
17
|
export interface ButtonProps extends Omit<TappableProps, "size">, VKUIButtonProps {
|
|
18
18
|
}
|
|
19
|
-
declare const _default: React.FC<Pick<ButtonProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "loading" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "after" | "multiple" | "appearance" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onMove" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode" | "before" | "stretched"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
|
|
19
|
+
declare const _default: React.FC<Pick<ButtonProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "loading" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "after" | "multiple" | "appearance" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onMove" | "onLeave" | "onEnter" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode" | "before" | "stretched"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
|
|
20
20
|
export default _default;
|
|
@@ -11,7 +11,7 @@ import Tappable from "../Tappable/Tappable";
|
|
|
11
11
|
import Title from "../Typography/Title/Title";
|
|
12
12
|
import Text from "../Typography/Text/Text";
|
|
13
13
|
import Subhead from "../Typography/Subhead/Subhead";
|
|
14
|
-
import Caption from "../Typography/Caption/Caption";
|
|
14
|
+
import { Caption } from "../Typography/Caption/Caption";
|
|
15
15
|
import { usePlatform } from "../../hooks/usePlatform";
|
|
16
16
|
import { SizeType, withAdaptivity } from "../../hoc/withAdaptivity";
|
|
17
17
|
import { IOS, VKCOM, ANDROID } from "../../lib/platform";
|
|
@@ -49,7 +49,7 @@ var ButtonTypography = function ButtonTypography(props) {
|
|
|
49
49
|
case "m":
|
|
50
50
|
if (isCompact) {
|
|
51
51
|
return createScopedElement(Subhead, _extends({
|
|
52
|
-
weight: platform === VKCOM ? "
|
|
52
|
+
weight: platform === VKCOM ? "3" : "2"
|
|
53
53
|
}, restProps));
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -61,26 +61,22 @@ var ButtonTypography = function ButtonTypography(props) {
|
|
|
61
61
|
default:
|
|
62
62
|
if (platform === IOS) {
|
|
63
63
|
return createScopedElement(Subhead, _extends({
|
|
64
|
-
weight: "
|
|
64
|
+
weight: "2"
|
|
65
65
|
}, restProps));
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
if (platform === VKCOM) {
|
|
69
|
-
return createScopedElement(Caption,
|
|
70
|
-
level: "1",
|
|
71
|
-
weight: "regular"
|
|
72
|
-
}, restProps));
|
|
69
|
+
return createScopedElement(Caption, restProps);
|
|
73
70
|
}
|
|
74
71
|
|
|
75
72
|
if (isCompact) {
|
|
76
73
|
return createScopedElement(Caption, _extends({
|
|
77
|
-
|
|
78
|
-
weight: "medium"
|
|
74
|
+
weight: "2"
|
|
79
75
|
}, restProps));
|
|
80
76
|
}
|
|
81
77
|
|
|
82
78
|
return createScopedElement(Subhead, _extends({
|
|
83
|
-
weight: "
|
|
79
|
+
weight: "2"
|
|
84
80
|
}, restProps));
|
|
85
81
|
}
|
|
86
82
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"names":["React","classNames","ConfigProviderContext","Tappable","Title","Text","Subhead","Caption","usePlatform","SizeType","withAdaptivity","IOS","VKCOM","ANDROID","Spinner","Headline","ButtonTypography","props","size","sizeY","platform","restProps","isCompact","COMPACT","resolveButtonAppearance","appearance","mode","resolvedAppearance","resolvedMode","undefined","Button","stretched","align","children","before","after","getRootRef","Component","loading","onClick","hasIcons","Boolean","hasNewTokens","useContext","href","defaultProps","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport Title from \"../Typography/Title/Title\";\nimport Text from \"../Typography/Text/Text\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport Caption from \"../Typography/Caption/Caption\";\nimport { HasAlign, HasComponent } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n AdaptivityProps,\n SizeType,\n withAdaptivity,\n} from \"../../hoc/withAdaptivity\";\nimport { PlatformType, IOS, VKCOM, ANDROID } from \"../../lib/platform\";\nimport Spinner from \"../Spinner/Spinner\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport \"./Button.css\";\n\nexport interface VKUIButtonProps extends HasAlign {\n /**\n Значения `commerce`, `destructive`, `overlay_...` будут упразднены в 5.0.0\n */\n mode?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"commerce\"\n | \"destructive\"\n | \"overlay_primary\"\n | \"overlay_secondary\"\n | \"overlay_outline\";\n appearance?: \"accent\" | \"positive\" | \"negative\" | \"neutral\" | \"overlay\";\n size?: \"s\" | \"m\" | \"l\";\n stretched?: boolean;\n before?: React.ReactNode;\n after?: React.ReactNode;\n loading?: boolean;\n}\n\nexport interface ButtonProps\n extends Omit<TappableProps, \"size\">,\n VKUIButtonProps {}\n\ninterface ButtonTypographyProps extends HasComponent {\n size: ButtonProps[\"size\"];\n platform: PlatformType | undefined;\n sizeY: AdaptivityProps[\"sizeY\"];\n children?: ButtonProps[\"children\"];\n}\n\nconst ButtonTypography: React.FC<ButtonTypographyProps> = (\n props: ButtonTypographyProps\n) => {\n const { size, sizeY, platform, ...restProps } = props;\n const isCompact = sizeY === SizeType.COMPACT;\n\n switch (size) {\n case \"l\":\n if (isCompact) {\n return <Text weight=\"medium\" {...restProps} />;\n }\n if (platform === ANDROID) {\n return <Headline weight=\"medium\" {...restProps} />;\n }\n return <Title level=\"3\" weight=\"2\" {...restProps} />;\n case \"m\":\n if (isCompact) {\n return (\n <Subhead\n weight={platform === VKCOM ? \"regular\" : \"medium\"}\n {...restProps}\n />\n );\n }\n\n return <Text weight=\"medium\" {...restProps} />;\n case \"s\":\n default:\n if (platform === IOS) {\n return <Subhead weight=\"medium\" {...restProps} />;\n }\n\n if (platform === VKCOM) {\n return <Caption level=\"1\" weight=\"regular\" {...restProps} />;\n }\n\n if (isCompact) {\n return <Caption level=\"1\" weight=\"medium\" {...restProps} />;\n }\n\n return <Subhead weight=\"medium\" {...restProps} />;\n }\n};\n\ninterface ResolvedButtonAppearance {\n resolvedAppearance: ButtonProps[\"appearance\"];\n resolvedMode: ButtonProps[\"mode\"];\n}\n\nfunction resolveButtonAppearance(\n appearance: ButtonProps[\"appearance\"],\n mode: ButtonProps[\"mode\"]\n): ResolvedButtonAppearance {\n let resolvedAppearance: ButtonProps[\"appearance\"] = appearance;\n let resolvedMode: ButtonProps[\"mode\"] = mode;\n\n if (appearance === undefined) {\n switch (mode) {\n case \"tertiary\":\n case \"secondary\":\n case \"primary\":\n case \"outline\":\n resolvedAppearance = \"accent\";\n break;\n case \"commerce\":\n resolvedMode = \"primary\";\n resolvedAppearance = \"positive\";\n break;\n case \"destructive\":\n resolvedMode = \"primary\";\n resolvedAppearance = \"negative\";\n break;\n case \"overlay_primary\":\n resolvedMode = \"primary\";\n resolvedAppearance = \"overlay\";\n break;\n case \"overlay_secondary\":\n resolvedMode = \"secondary\";\n resolvedAppearance = \"overlay\";\n break;\n case \"overlay_outline\":\n resolvedMode = \"outline\";\n resolvedAppearance = \"overlay\";\n break;\n }\n }\n\n return {\n resolvedAppearance,\n resolvedMode,\n };\n}\n\nconst Button: React.FC<ButtonProps> = (props: ButtonProps) => {\n const platform = usePlatform();\n const {\n size,\n mode,\n appearance,\n stretched,\n align,\n children,\n before,\n after,\n getRootRef,\n sizeY,\n Component = \"button\",\n loading,\n onClick,\n ...restProps\n } = props;\n const hasIcons = Boolean(before || after);\n const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(\n appearance,\n mode\n );\n const hasNewTokens = React.useContext(ConfigProviderContext).hasNewTokens;\n\n return (\n <Tappable\n {...restProps}\n Component={restProps.href ? \"a\" : Component}\n onClick={loading ? undefined : onClick}\n focusVisibleMode=\"outside\"\n vkuiClass={classNames(\n \"Button\",\n `Button--sz-${size}`,\n `Button--lvl-${resolvedMode}`,\n `Button--clr-${resolvedAppearance}`,\n `Button--aln-${align}`,\n `Button--sizeY-${sizeY}`,\n {\n [\"Button--stretched\"]: stretched,\n [\"Button--with-icon\"]: hasIcons,\n [\"Button--singleIcon\"]: Boolean(\n (!children && !after && before) || (!children && after && !before)\n ),\n }\n )}\n getRootRef={getRootRef}\n hoverMode={hasNewTokens ? \"Button--hover\" : \"background\"}\n activeMode={hasNewTokens ? \"Button--active\" : \"opacity\"}\n >\n {loading && <Spinner size=\"small\" vkuiClass=\"Button__spinner\" />}\n <span vkuiClass=\"Button__in\">\n {before && <span vkuiClass=\"Button__before\">{before}</span>}\n {children && (\n <ButtonTypography\n size={size}\n sizeY={sizeY}\n platform={platform}\n vkuiClass=\"Button__content\"\n Component=\"span\"\n >\n {children}\n </ButtonTypography>\n )}\n {after && <span vkuiClass=\"Button__after\">{after}</span>}\n </span>\n </Tappable>\n );\n};\n\nButton.defaultProps = {\n mode: \"primary\",\n align: \"center\",\n size: \"s\",\n stretched: false,\n stopPropagation: true,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(Button, {\n sizeY: true,\n});\n"],"file":"Button.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"names":["React","classNames","ConfigProviderContext","Tappable","Title","Text","Subhead","Caption","usePlatform","SizeType","withAdaptivity","IOS","VKCOM","ANDROID","Spinner","Headline","ButtonTypography","props","size","sizeY","platform","restProps","isCompact","COMPACT","resolveButtonAppearance","appearance","mode","resolvedAppearance","resolvedMode","undefined","Button","stretched","align","children","before","after","getRootRef","Component","loading","onClick","hasIcons","Boolean","hasNewTokens","useContext","href","defaultProps","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ConfigProviderContext } from \"../ConfigProvider/ConfigProviderContext\";\nimport Tappable, { TappableProps } from \"../Tappable/Tappable\";\nimport Title from \"../Typography/Title/Title\";\nimport Text from \"../Typography/Text/Text\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { HasAlign, HasComponent } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n AdaptivityProps,\n SizeType,\n withAdaptivity,\n} from \"../../hoc/withAdaptivity\";\nimport { PlatformType, IOS, VKCOM, ANDROID } from \"../../lib/platform\";\nimport Spinner from \"../Spinner/Spinner\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport \"./Button.css\";\n\nexport interface VKUIButtonProps extends HasAlign {\n /**\n Значения `commerce`, `destructive`, `overlay_...` будут упразднены в 5.0.0\n */\n mode?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"commerce\"\n | \"destructive\"\n | \"overlay_primary\"\n | \"overlay_secondary\"\n | \"overlay_outline\";\n appearance?: \"accent\" | \"positive\" | \"negative\" | \"neutral\" | \"overlay\";\n size?: \"s\" | \"m\" | \"l\";\n stretched?: boolean;\n before?: React.ReactNode;\n after?: React.ReactNode;\n loading?: boolean;\n}\n\nexport interface ButtonProps\n extends Omit<TappableProps, \"size\">,\n VKUIButtonProps {}\n\ninterface ButtonTypographyProps extends HasComponent {\n size: ButtonProps[\"size\"];\n platform: PlatformType | undefined;\n sizeY: AdaptivityProps[\"sizeY\"];\n children?: ButtonProps[\"children\"];\n}\n\nconst ButtonTypography: React.FC<ButtonTypographyProps> = (\n props: ButtonTypographyProps\n) => {\n const { size, sizeY, platform, ...restProps } = props;\n const isCompact = sizeY === SizeType.COMPACT;\n\n switch (size) {\n case \"l\":\n if (isCompact) {\n return <Text weight=\"medium\" {...restProps} />;\n }\n if (platform === ANDROID) {\n return <Headline weight=\"medium\" {...restProps} />;\n }\n return <Title level=\"3\" weight=\"2\" {...restProps} />;\n case \"m\":\n if (isCompact) {\n return (\n <Subhead weight={platform === VKCOM ? \"3\" : \"2\"} {...restProps} />\n );\n }\n\n return <Text weight=\"medium\" {...restProps} />;\n case \"s\":\n default:\n if (platform === IOS) {\n return <Subhead weight=\"2\" {...restProps} />;\n }\n\n if (platform === VKCOM) {\n return <Caption {...restProps} />;\n }\n\n if (isCompact) {\n return <Caption weight=\"2\" {...restProps} />;\n }\n\n return <Subhead weight=\"2\" {...restProps} />;\n }\n};\n\ninterface ResolvedButtonAppearance {\n resolvedAppearance: ButtonProps[\"appearance\"];\n resolvedMode: ButtonProps[\"mode\"];\n}\n\nfunction resolveButtonAppearance(\n appearance: ButtonProps[\"appearance\"],\n mode: ButtonProps[\"mode\"]\n): ResolvedButtonAppearance {\n let resolvedAppearance: ButtonProps[\"appearance\"] = appearance;\n let resolvedMode: ButtonProps[\"mode\"] = mode;\n\n if (appearance === undefined) {\n switch (mode) {\n case \"tertiary\":\n case \"secondary\":\n case \"primary\":\n case \"outline\":\n resolvedAppearance = \"accent\";\n break;\n case \"commerce\":\n resolvedMode = \"primary\";\n resolvedAppearance = \"positive\";\n break;\n case \"destructive\":\n resolvedMode = \"primary\";\n resolvedAppearance = \"negative\";\n break;\n case \"overlay_primary\":\n resolvedMode = \"primary\";\n resolvedAppearance = \"overlay\";\n break;\n case \"overlay_secondary\":\n resolvedMode = \"secondary\";\n resolvedAppearance = \"overlay\";\n break;\n case \"overlay_outline\":\n resolvedMode = \"outline\";\n resolvedAppearance = \"overlay\";\n break;\n }\n }\n\n return {\n resolvedAppearance,\n resolvedMode,\n };\n}\n\nconst Button: React.FC<ButtonProps> = (props: ButtonProps) => {\n const platform = usePlatform();\n const {\n size,\n mode,\n appearance,\n stretched,\n align,\n children,\n before,\n after,\n getRootRef,\n sizeY,\n Component = \"button\",\n loading,\n onClick,\n ...restProps\n } = props;\n const hasIcons = Boolean(before || after);\n const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(\n appearance,\n mode\n );\n const hasNewTokens = React.useContext(ConfigProviderContext).hasNewTokens;\n\n return (\n <Tappable\n {...restProps}\n Component={restProps.href ? \"a\" : Component}\n onClick={loading ? undefined : onClick}\n focusVisibleMode=\"outside\"\n vkuiClass={classNames(\n \"Button\",\n `Button--sz-${size}`,\n `Button--lvl-${resolvedMode}`,\n `Button--clr-${resolvedAppearance}`,\n `Button--aln-${align}`,\n `Button--sizeY-${sizeY}`,\n {\n [\"Button--stretched\"]: stretched,\n [\"Button--with-icon\"]: hasIcons,\n [\"Button--singleIcon\"]: Boolean(\n (!children && !after && before) || (!children && after && !before)\n ),\n }\n )}\n getRootRef={getRootRef}\n hoverMode={hasNewTokens ? \"Button--hover\" : \"background\"}\n activeMode={hasNewTokens ? \"Button--active\" : \"opacity\"}\n >\n {loading && <Spinner size=\"small\" vkuiClass=\"Button__spinner\" />}\n <span vkuiClass=\"Button__in\">\n {before && <span vkuiClass=\"Button__before\">{before}</span>}\n {children && (\n <ButtonTypography\n size={size}\n sizeY={sizeY}\n platform={platform}\n vkuiClass=\"Button__content\"\n Component=\"span\"\n >\n {children}\n </ButtonTypography>\n )}\n {after && <span vkuiClass=\"Button__after\">{after}</span>}\n </span>\n </Tappable>\n );\n};\n\nButton.defaultProps = {\n mode: \"primary\",\n align: \"center\",\n size: \"s\",\n stretched: false,\n stopPropagation: true,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(Button, {\n sizeY: true,\n});\n"],"file":"Button.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.vkuiButtonGroup{display:inline-flex;align-items:flex-start}.vkuiButtonGroup--stretched{display:flex;width:100%}.vkuiButtonGroup--mode-vertical{flex-direction:column}.vkuiButtonGroup--mode-horizontal{flex-direction:row}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-space>:not(:first-child){margin-top:1px;margin-top:var(--vkui--size_button_group_gap_space--regular)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-s>:not(:first-child){margin-top:8px;margin-top:var(--vkui--size_button_group_gap_small--regular)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-m>:not(:first-child){margin-top:12px;margin-top:var(--vkui--size_button_group_gap_medium--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-space>:not(:last-child){margin-right:1px;margin-right:var(--vkui--size_button_group_gap_space--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-s>:not(:last-child){margin-right:8px;margin-right:var(--vkui--size_button_group_gap_small--regular)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-m>:not(:last-child){margin-right:12px;margin-right:var(--vkui--size_button_group_gap_medium--regular)}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { HasRootRef } from "../../types";
|
|
3
|
+
import "./ButtonGroup.css";
|
|
4
|
+
export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
|
|
5
|
+
/**
|
|
6
|
+
* Задает расположение элементов внутри группы, вертикальное или горизонтальное.
|
|
7
|
+
*/
|
|
8
|
+
mode?: "vertical" | "horizontal";
|
|
9
|
+
/**
|
|
10
|
+
* Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.
|
|
11
|
+
*/
|
|
12
|
+
gap?: "none" | "space" | "s" | "m";
|
|
13
|
+
/**
|
|
14
|
+
* Растягивает компонент на всю ширину контейнера.
|
|
15
|
+
*
|
|
16
|
+
* Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.
|
|
17
|
+
*/
|
|
18
|
+
stretched?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export declare const ButtonGroup: React.FC<ButtonGroupProps>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["mode", "gap", "stretched", "getRootRef", "children"];
|
|
4
|
+
import { createScopedElement } from "../../lib/jsxRuntime";
|
|
5
|
+
import { classNames } from "../../lib/classNames";
|
|
6
|
+
import "./ButtonGroup.css";
|
|
7
|
+
export var ButtonGroup = function ButtonGroup(_ref) {
|
|
8
|
+
var _ref$mode = _ref.mode,
|
|
9
|
+
mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
|
|
10
|
+
_ref$gap = _ref.gap,
|
|
11
|
+
gap = _ref$gap === void 0 ? "m" : _ref$gap,
|
|
12
|
+
_ref$stretched = _ref.stretched,
|
|
13
|
+
stretched = _ref$stretched === void 0 ? false : _ref$stretched,
|
|
14
|
+
getRootRef = _ref.getRootRef,
|
|
15
|
+
children = _ref.children,
|
|
16
|
+
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
17
|
+
|
|
18
|
+
return createScopedElement("div", _extends({
|
|
19
|
+
vkuiClass: classNames("ButtonGroup", "ButtonGroup--mode-".concat(mode), gap !== "none" && "ButtonGroup--gap-".concat(gap), stretched && "ButtonGroup--stretched"),
|
|
20
|
+
role: "group",
|
|
21
|
+
ref: getRootRef
|
|
22
|
+
}, restProps), children);
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=ButtonGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["classNames","ButtonGroup","mode","gap","stretched","getRootRef","children","restProps"],"mappings":";;;;AACA,SAASA,UAAT;AAEA;AAqBA,OAAO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,OAOjD;AAAA,uBANJC,IAMI;AAAA,MANJA,IAMI,0BANG,YAMH;AAAA,sBALJC,GAKI;AAAA,MALJA,GAKI,yBALE,GAKF;AAAA,4BAJJC,SAII;AAAA,MAJJA,SAII,+BAJQ,KAIR;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,SACC;;AACJ,SACE;AACE,IAAA,SAAS,EAAEP,UAAU,CACnB,aADmB,8BAEEE,IAFF,GAGnBC,GAAG,KAAK,MAAR,+BAAsCA,GAAtC,CAHmB,EAInBC,SAAS,IAAI,wBAJM,CADvB;AAOE,IAAA,IAAI,EAAC,OAPP;AAQE,IAAA,GAAG,EAAEC;AARP,KASME,SATN,GAWGD,QAXH,CADF;AAeD,CAvBM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport type { HasRootRef } 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\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n mode = \"horizontal\",\n gap = \"m\",\n stretched = false,\n getRootRef,\n children,\n ...restProps\n}) => {\n return (\n <div\n vkuiClass={classNames(\n \"ButtonGroup\",\n `ButtonGroup--mode-${mode}`,\n gap !== \"none\" && `ButtonGroup--gap-${gap}`,\n stretched && \"ButtonGroup--stretched\"\n )}\n role=\"group\"\n ref={getRootRef}\n {...restProps}\n >\n {children}\n </div>\n );\n};\n"],"file":"ButtonGroup.js"}
|