@vkontakte/vkui 5.1.0 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +25 -0
- package/README.md +118 -0
- package/dist/cjs/components/AdaptivityProvider/AdaptivityProvider.js +1 -1
- package/dist/cjs/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
- package/dist/cjs/components/AppRoot/AppRoot.js +7 -4
- package/dist/cjs/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.d.ts +1 -1
- package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.d.ts +1 -1
- package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js +5 -4
- package/dist/cjs/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map +1 -1
- package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js +7 -4
- package/dist/cjs/components/Cell/CellCheckbox/CellCheckbox.js.map +1 -1
- package/dist/cjs/components/Checkbox/Checkbox.d.ts +3 -2
- package/dist/cjs/components/Checkbox/Checkbox.js +12 -2
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js +0 -4
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cjs/components/ContentCard/ContentCard.js +2 -1
- package/dist/cjs/components/ContentCard/ContentCard.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js +11 -7
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +2 -3
- package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js +21 -72
- package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/cjs/components/DateInput/DateInput.d.ts +3 -2
- package/dist/cjs/components/DateInput/DateInput.js +3 -3
- package/dist/cjs/components/DateInput/DateInput.js.map +1 -1
- package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts +2 -2
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js +3 -2
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cjs/components/Epic/Epic.js +1 -1
- package/dist/cjs/components/Epic/Epic.js.map +1 -1
- package/dist/cjs/components/FixedLayout/FixedLayout.js +2 -2
- package/dist/cjs/components/FixedLayout/FixedLayout.js.map +1 -1
- package/dist/cjs/components/FormField/FormField.js +6 -10
- package/dist/cjs/components/FormField/FormField.js.map +1 -1
- package/dist/cjs/components/IconButton/IconButton.js +9 -0
- package/dist/cjs/components/IconButton/IconButton.js.map +1 -1
- package/dist/cjs/components/ModalCard/ModalCard.d.ts +1 -1
- package/dist/cjs/components/ModalCard/ModalCard.js +4 -2
- package/dist/cjs/components/ModalCard/ModalCard.js.map +1 -1
- package/dist/cjs/components/ModalCardBase/ModalCardBase.d.ts +5 -1
- package/dist/cjs/components/ModalCardBase/ModalCardBase.js +9 -2
- package/dist/cjs/components/ModalCardBase/ModalCardBase.js.map +1 -1
- package/dist/cjs/components/ModalPage/ModalPage.d.ts +2 -6
- package/dist/cjs/components/ModalPage/ModalPage.js +13 -7
- package/dist/cjs/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/cjs/components/ModalRoot/ModalRoot.js +1 -2
- package/dist/cjs/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/cjs/components/NativeSelect/NativeSelect.d.ts +1 -1
- package/dist/cjs/components/NativeSelect/NativeSelect.js +2 -2
- package/dist/cjs/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/cjs/components/PanelHeader/PanelHeader.js +18 -4
- package/dist/cjs/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js +11 -2
- package/dist/cjs/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/cjs/components/Popover/Popover.js +4 -1
- package/dist/cjs/components/Popover/Popover.js.map +1 -1
- package/dist/cjs/components/Popper/Popper.d.ts +12 -9
- package/dist/cjs/components/Popper/Popper.js +92 -119
- package/dist/cjs/components/Popper/Popper.js.map +1 -1
- package/dist/cjs/components/PopperArrow/PopperArrow.d.ts +15 -5
- package/dist/cjs/components/PopperArrow/PopperArrow.js +44 -17
- package/dist/cjs/components/PopperArrow/PopperArrow.js.map +1 -1
- package/dist/cjs/components/Progress/Progress.js +3 -1
- package/dist/cjs/components/Progress/Progress.js.map +1 -1
- package/dist/cjs/components/Root/Root.js +2 -2
- package/dist/cjs/components/Root/Root.js.map +1 -1
- package/dist/cjs/components/Select/Select.d.ts +1 -5
- package/dist/cjs/components/Select/Select.js +13 -41
- package/dist/cjs/components/Select/Select.js.map +1 -1
- package/dist/cjs/components/SelectMimicry/SelectMimicry.d.ts +1 -1
- package/dist/cjs/components/SelectMimicry/SelectMimicry.js +2 -2
- package/dist/cjs/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/cjs/components/SelectTypography/SelectTypography.d.ts +11 -0
- package/dist/cjs/components/SelectTypography/SelectTypography.js +48 -0
- package/dist/cjs/components/SelectTypography/SelectTypography.js.map +1 -0
- package/dist/cjs/components/Slider/Slider.d.ts +1 -1
- package/dist/cjs/components/Slider/Slider.js +4 -3
- package/dist/cjs/components/Slider/Slider.js.map +1 -1
- package/dist/cjs/components/Spacing/Spacing.js +2 -1
- package/dist/cjs/components/Spacing/Spacing.js.map +1 -1
- package/dist/cjs/components/SplitCol/SplitCol.d.ts +0 -6
- package/dist/cjs/components/SplitCol/SplitCol.js +3 -11
- package/dist/cjs/components/SplitCol/SplitCol.js.map +1 -1
- package/dist/cjs/components/SplitCol/SplitColContext.d.ts +7 -0
- package/dist/cjs/components/SplitCol/SplitColContext.js +18 -0
- package/dist/cjs/components/SplitCol/SplitColContext.js.map +1 -0
- package/dist/cjs/components/Switch/Switch.js +2 -3
- package/dist/cjs/components/Switch/Switch.js.map +1 -1
- package/dist/cjs/components/TabbarItem/TabbarItem.js +9 -0
- package/dist/cjs/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/cjs/components/Tabs/Tabs.js +6 -15
- package/dist/cjs/components/Tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.d.ts +3 -3
- package/dist/cjs/components/Tooltip/Tooltip.js +116 -151
- package/dist/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/components/Touch/Touch.js +4 -4
- package/dist/cjs/components/Touch/Touch.js.map +1 -1
- package/dist/cjs/components/View/View.js +2 -2
- package/dist/cjs/components/View/View.js.map +1 -1
- package/dist/cjs/components/View/ViewInfinite.d.ts +1 -1
- package/dist/cjs/components/View/ViewInfinite.js +2 -2
- package/dist/cjs/components/View/ViewInfinite.js.map +1 -1
- package/dist/cjs/components/WriteBarIcon/WriteBarIcon.js +10 -8
- package/dist/cjs/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
- package/dist/cjs/index.d.ts +37 -30
- package/dist/cjs/index.js +13 -13
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/floating/adapters.d.ts +2 -0
- package/dist/cjs/lib/floating/adapters.js +63 -0
- package/dist/cjs/lib/floating/adapters.js.map +1 -0
- package/dist/cjs/lib/floating/functions.d.ts +10 -0
- package/dist/cjs/lib/floating/functions.js +36 -0
- package/dist/cjs/lib/floating/functions.js.map +1 -0
- package/dist/cjs/lib/floating/index.d.ts +4 -0
- package/dist/cjs/lib/floating/index.js +75 -0
- package/dist/cjs/lib/floating/index.js.map +1 -0
- package/dist/cjs/lib/floating/types.d.ts +4 -0
- package/dist/cjs/lib/floating/types.js +6 -0
- package/dist/cjs/lib/floating/types.js.map +1 -0
- package/dist/cjs/lib/useIsomorphicLayoutEffect.d.ts +1 -1
- package/dist/cjs/lib/warnOnce.d.ts +7 -0
- package/dist/cjs/lib/warnOnce.js +14 -0
- package/dist/cjs/lib/warnOnce.js.map +1 -1
- package/dist/cjs/shared/breakpoints.d.ts +2 -2
- package/dist/cjs/shared/breakpoints.js +12 -13
- package/dist/cjs/shared/breakpoints.js.map +1 -1
- package/dist/components/AdaptivityProvider/AdaptivityProvider.js +1 -1
- package/dist/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
- package/dist/components/AppRoot/AppRoot.js +7 -4
- package/dist/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/components/Avatar/Avatar.d.ts +1 -1
- package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.d.ts +1 -1
- package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js +5 -4
- package/dist/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map +1 -1
- package/dist/components/Cell/CellCheckbox/CellCheckbox.js +7 -4
- package/dist/components/Cell/CellCheckbox/CellCheckbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +3 -2
- package/dist/components/Checkbox/Checkbox.js +12 -2
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.js +0 -4
- package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/components/ContentCard/ContentCard.js +2 -1
- package/dist/components/ContentCard/ContentCard.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +12 -8
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +2 -3
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js +22 -73
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/components/DateInput/DateInput.d.ts +3 -2
- package/dist/components/DateInput/DateInput.js +3 -3
- package/dist/components/DateInput/DateInput.js.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.d.ts +2 -2
- package/dist/components/DateRangeInput/DateRangeInput.js +3 -2
- package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/components/Epic/Epic.js +1 -1
- package/dist/components/Epic/Epic.js.map +1 -1
- package/dist/components/FixedLayout/FixedLayout.js +1 -1
- package/dist/components/FixedLayout/FixedLayout.js.map +1 -1
- package/dist/components/FormField/FormField.js +6 -10
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/IconButton/IconButton.js +9 -0
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/ModalCard/ModalCard.d.ts +1 -1
- package/dist/components/ModalCard/ModalCard.js +4 -2
- package/dist/components/ModalCard/ModalCard.js.map +1 -1
- package/dist/components/ModalCardBase/ModalCardBase.d.ts +5 -1
- package/dist/components/ModalCardBase/ModalCardBase.js +9 -2
- package/dist/components/ModalCardBase/ModalCardBase.js.map +1 -1
- package/dist/components/ModalPage/ModalPage.d.ts +2 -6
- package/dist/components/ModalPage/ModalPage.js +13 -7
- package/dist/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/components/ModalRoot/ModalRoot.js +1 -2
- package/dist/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/components/NativeSelect/NativeSelect.d.ts +1 -1
- package/dist/components/NativeSelect/NativeSelect.js +1 -1
- package/dist/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/components/PanelHeader/PanelHeader.js +18 -4
- package/dist/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/components/PanelHeaderButton/PanelHeaderButton.js +11 -2
- package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/components/Popover/Popover.js +4 -1
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popper/Popper.d.ts +12 -9
- package/dist/components/Popper/Popper.js +93 -120
- package/dist/components/Popper/Popper.js.map +1 -1
- package/dist/components/PopperArrow/PopperArrow.d.ts +15 -5
- package/dist/components/PopperArrow/PopperArrow.js +40 -15
- package/dist/components/PopperArrow/PopperArrow.js.map +1 -1
- package/dist/components/Progress/Progress.js +3 -1
- package/dist/components/Progress/Progress.js.map +1 -1
- package/dist/components/Root/Root.js +1 -1
- package/dist/components/Root/Root.js.map +1 -1
- package/dist/components/Select/Select.d.ts +1 -5
- package/dist/components/Select/Select.js +12 -39
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/SelectMimicry/SelectMimicry.d.ts +1 -1
- package/dist/components/SelectMimicry/SelectMimicry.js +1 -1
- package/dist/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/components/SelectTypography/SelectTypography.d.ts +11 -0
- package/dist/components/SelectTypography/SelectTypography.js +39 -0
- package/dist/components/SelectTypography/SelectTypography.js.map +1 -0
- package/dist/components/Slider/Slider.d.ts +1 -1
- package/dist/components/Slider/Slider.js +4 -3
- package/dist/components/Slider/Slider.js.map +1 -1
- package/dist/components/Spacing/Spacing.js +2 -1
- package/dist/components/Spacing/Spacing.js.map +1 -1
- package/dist/components/SplitCol/SplitCol.d.ts +0 -6
- package/dist/components/SplitCol/SplitCol.js +1 -7
- package/dist/components/SplitCol/SplitCol.js.map +1 -1
- package/dist/components/SplitCol/SplitColContext.d.ts +7 -0
- package/dist/components/SplitCol/SplitColContext.js +9 -0
- package/dist/components/SplitCol/SplitColContext.js.map +1 -0
- package/dist/components/Switch/Switch.js +2 -3
- package/dist/components/Switch/Switch.js.map +1 -1
- package/dist/components/TabbarItem/TabbarItem.js +9 -0
- package/dist/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/components/Tabs/Tabs.js +6 -15
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +3 -3
- package/dist/components/Tooltip/Tooltip.js +116 -151
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Touch/Touch.js +4 -4
- package/dist/components/Touch/Touch.js.map +1 -1
- package/dist/components/View/View.js +1 -1
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/View/ViewInfinite.d.ts +1 -1
- package/dist/components/View/ViewInfinite.js +1 -1
- package/dist/components/View/ViewInfinite.js.map +1 -1
- package/dist/components/WriteBarIcon/WriteBarIcon.js +11 -9
- package/dist/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
- package/dist/components.css +142 -2
- package/dist/components.css.map +1 -1
- package/dist/components.js.tmp +61921 -4
- package/dist/cssm/components/ActionSheet/ActionSheet.module.css +1 -1
- package/dist/cssm/components/ActionSheetItem/ActionSheetItem.module.css +1 -1
- package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.js +1 -1
- package/dist/cssm/components/AdaptivityProvider/AdaptivityProvider.js.map +1 -1
- package/dist/cssm/components/Alert/Alert.module.css +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.js +7 -4
- package/dist/cssm/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.module.css +1 -1
- package/dist/cssm/components/Avatar/Avatar.d.ts +1 -1
- package/dist/cssm/components/Avatar/Avatar.module.css +1 -1
- package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadge.module.css +1 -1
- package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.d.ts +1 -1
- package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js +5 -4
- package/dist/cssm/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.js.map +1 -1
- package/dist/cssm/components/Badge/Badge.module.css +1 -1
- package/dist/cssm/components/Banner/Banner.module.css +1 -1
- package/dist/cssm/components/BaseGallery/BaseGallery.module.css +1 -1
- package/dist/cssm/components/Button/Button.module.css +1 -1
- package/dist/cssm/components/ButtonGroup/ButtonGroup.module.css +1 -1
- package/dist/cssm/components/Calendar/Calendar.module.css +1 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.module.css +1 -1
- package/dist/cssm/components/CalendarDays/CalendarDays.module.css +1 -1
- package/dist/cssm/components/CalendarHeader/CalendarHeader.module.css +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.module.css +1 -1
- package/dist/cssm/components/CalendarTime/CalendarTime.module.css +1 -1
- package/dist/cssm/components/Card/Card.module.css +2 -2
- package/dist/cssm/components/CardGrid/CardGrid.module.css +1 -1
- package/dist/cssm/components/CardScroll/CardScroll.module.css +1 -1
- package/dist/cssm/components/Cell/Cell.module.css +1 -1
- package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.js +7 -4
- package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.js.map +1 -1
- package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.module.css +1 -1
- package/dist/cssm/components/Cell/CellDragger/CellDragger.module.css +1 -1
- package/dist/cssm/components/CellButton/CellButton.module.css +1 -1
- package/dist/cssm/components/Checkbox/Checkbox.d.ts +3 -2
- package/dist/cssm/components/Checkbox/Checkbox.js +12 -2
- package/dist/cssm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cssm/components/Checkbox/Checkbox.module.css +1 -1
- package/dist/cssm/components/Chip/Chip.module.css +1 -1
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.module.css +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js +0 -4
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.module.css +1 -1
- package/dist/cssm/components/ContentCard/ContentCard.js +2 -1
- package/dist/cssm/components/ContentCard/ContentCard.js.map +1 -1
- package/dist/cssm/components/ContentCard/ContentCard.module.css +1 -1
- package/dist/cssm/components/Counter/Counter.module.css +1 -1
- package/dist/cssm/components/CustomScrollView/CustomScrollView.module.css +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +12 -8
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.module.css +1 -1
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +2 -3
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js +22 -73
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.module.css +1 -1
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.module.css +1 -1
- package/dist/cssm/components/DateInput/DateInput.d.ts +3 -2
- package/dist/cssm/components/DateInput/DateInput.js +4 -3
- package/dist/cssm/components/DateInput/DateInput.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.module.css +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.d.ts +2 -2
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js +3 -2
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.module.css +1 -1
- package/dist/cssm/components/Div/Div.module.css +1 -1
- package/dist/cssm/components/Epic/Epic.js +1 -1
- package/dist/cssm/components/Epic/Epic.js.map +1 -1
- package/dist/cssm/components/FixedLayout/FixedLayout.js +1 -1
- package/dist/cssm/components/FixedLayout/FixedLayout.js.map +1 -1
- package/dist/cssm/components/FixedLayout/FixedLayout.module.css +1 -1
- package/dist/cssm/components/FocusVisible/FocusVisible.module.css +1 -1
- package/dist/cssm/components/Footer/Footer.module.css +1 -1
- package/dist/cssm/components/FormField/FormField.js +6 -10
- package/dist/cssm/components/FormField/FormField.js.map +1 -1
- package/dist/cssm/components/FormField/FormField.module.css +1 -1
- package/dist/cssm/components/FormItem/FormItem.module.css +1 -1
- package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.module.css +1 -1
- package/dist/cssm/components/FormStatus/FormStatus.module.css +1 -1
- package/dist/cssm/components/Gradient/Gradient.module.css +1 -1
- package/dist/cssm/components/Group/Group.module.css +1 -1
- package/dist/cssm/components/Header/Header.module.css +1 -1
- package/dist/cssm/components/HorizontalCell/HorizontalCell.module.css +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.module.css +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.module.css +1 -1
- package/dist/cssm/components/IconButton/IconButton.js +9 -0
- package/dist/cssm/components/IconButton/IconButton.js.map +1 -1
- package/dist/cssm/components/IconButton/IconButton.module.css +1 -1
- package/dist/cssm/components/ImageBase/ImageBase.module.css +1 -1
- package/dist/cssm/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css +1 -1
- package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css +1 -1
- package/dist/cssm/components/InfoRow/InfoRow.module.css +1 -1
- package/dist/cssm/components/Input/Input.module.css +1 -1
- package/dist/cssm/components/InputLike/InputLike.module.css +1 -1
- package/dist/cssm/components/InputLike/InputLikeDivider.module.css +1 -1
- package/dist/cssm/components/Link/Link.module.css +1 -1
- package/dist/cssm/components/MiniInfoCell/MiniInfoCell.module.css +1 -1
- package/dist/cssm/components/ModalCard/ModalCard.d.ts +1 -1
- package/dist/cssm/components/ModalCard/ModalCard.js +4 -2
- package/dist/cssm/components/ModalCard/ModalCard.js.map +1 -1
- package/dist/cssm/components/ModalCard/ModalCard.module.css +1 -1
- package/dist/cssm/components/ModalCardBase/ModalCardBase.d.ts +5 -1
- package/dist/cssm/components/ModalCardBase/ModalCardBase.js +9 -2
- package/dist/cssm/components/ModalCardBase/ModalCardBase.js.map +1 -1
- package/dist/cssm/components/ModalCardBase/ModalCardBase.module.css +1 -1
- package/dist/cssm/components/ModalDismissButton/ModalDismissButton.module.css +1 -1
- package/dist/cssm/components/ModalPage/ModalPage.d.ts +2 -6
- package/dist/cssm/components/ModalPage/ModalPage.js +13 -7
- package/dist/cssm/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/cssm/components/ModalPage/ModalPage.module.css +1 -1
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.module.css +1 -1
- package/dist/cssm/components/ModalRoot/ModalRoot.js +1 -2
- package/dist/cssm/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/cssm/components/ModalRoot/ModalRoot.module.css +1 -1
- package/dist/cssm/components/NativeSelect/NativeSelect.d.ts +1 -1
- package/dist/cssm/components/NativeSelect/NativeSelect.js +1 -1
- package/dist/cssm/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/cssm/components/Pagination/Pagination.module.css +1 -1
- package/dist/cssm/components/Panel/Panel.module.css +1 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.js +18 -4
- package/dist/cssm/components/PanelHeader/PanelHeader.js.map +1 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.module.css +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js +11 -2
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.module.css +1 -1
- package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.module.css +1 -1
- package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.module.css +1 -1
- package/dist/cssm/components/Placeholder/Placeholder.module.css +1 -1
- package/dist/cssm/components/PopoutRoot/PopoutRoot.module.css +1 -1
- package/dist/cssm/components/PopoutWrapper/PopoutWrapper.module.css +1 -1
- package/dist/cssm/components/Popover/Popover.js +4 -1
- package/dist/cssm/components/Popover/Popover.js.map +1 -1
- package/dist/cssm/components/Popover/Popover.module.css +1 -1
- package/dist/cssm/components/Popper/Popper.d.ts +12 -9
- package/dist/cssm/components/Popper/Popper.js +93 -120
- package/dist/cssm/components/Popper/Popper.js.map +1 -1
- package/dist/cssm/components/Popper/Popper.module.css +1 -1
- package/dist/cssm/components/PopperArrow/PopperArrow.d.ts +15 -5
- package/dist/cssm/components/PopperArrow/PopperArrow.js +40 -15
- package/dist/cssm/components/PopperArrow/PopperArrow.js.map +1 -1
- package/dist/cssm/components/PopperArrow/PopperArrow.module.css +1 -1
- package/dist/cssm/components/Progress/Progress.js +3 -1
- package/dist/cssm/components/Progress/Progress.js.map +1 -1
- package/dist/cssm/components/Progress/Progress.module.css +1 -1
- package/dist/cssm/components/PromoBanner/PromoBanner.module.css +1 -1
- package/dist/cssm/components/PullToRefresh/PullToRefresh.module.css +1 -1
- package/dist/cssm/components/Radio/Radio.module.css +1 -1
- package/dist/cssm/components/RadioGroup/RadioGroup.module.css +1 -1
- package/dist/cssm/components/Removable/Removable.module.css +1 -1
- package/dist/cssm/components/RichCell/RichCell.module.css +1 -1
- package/dist/cssm/components/RichTooltip/RichTooltip.module.css +1 -1
- package/dist/cssm/components/Root/Root.js +1 -1
- package/dist/cssm/components/Root/Root.js.map +1 -1
- package/dist/cssm/components/Root/Root.module.css +1 -1
- package/dist/cssm/components/ScreenSpinner/ScreenSpinner.module.css +1 -1
- package/dist/cssm/components/Search/Search.module.css +1 -1
- package/dist/cssm/components/SegmentedControl/SegmentedControl.module.css +1 -1
- package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.module.css +1 -1
- package/dist/cssm/components/Select/Select.d.ts +1 -5
- package/dist/cssm/components/Select/Select.js +12 -39
- package/dist/cssm/components/Select/Select.js.map +1 -1
- package/dist/cssm/components/Select/Select.module.css +1 -1
- package/dist/cssm/components/SelectMimicry/SelectMimicry.d.ts +1 -1
- package/dist/cssm/components/SelectMimicry/SelectMimicry.js +1 -1
- package/dist/cssm/components/SelectMimicry/SelectMimicry.js.map +1 -1
- package/dist/cssm/components/SelectTypography/SelectTypography.d.ts +11 -0
- package/dist/cssm/components/SelectTypography/SelectTypography.js +40 -0
- package/dist/cssm/components/SelectTypography/SelectTypography.js.map +1 -0
- package/dist/cssm/components/SelectTypography/SelectTypography.module.css +1 -0
- package/dist/cssm/components/Separator/Separator.module.css +1 -1
- package/dist/cssm/components/SimpleCell/SimpleCell.module.css +1 -1
- package/dist/cssm/components/Slider/Slider.d.ts +1 -1
- package/dist/cssm/components/Slider/Slider.js +4 -3
- package/dist/cssm/components/Slider/Slider.js.map +1 -1
- package/dist/cssm/components/Slider/Slider.module.css +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.module.css +1 -1
- package/dist/cssm/components/Spacing/Spacing.js +2 -1
- package/dist/cssm/components/Spacing/Spacing.js.map +1 -1
- package/dist/cssm/components/Spacing/Spacing.module.css +1 -1
- package/dist/cssm/components/Spinner/Spinner.module.css +1 -1
- package/dist/cssm/components/SplitCol/SplitCol.d.ts +0 -6
- package/dist/cssm/components/SplitCol/SplitCol.js +1 -7
- package/dist/cssm/components/SplitCol/SplitCol.js.map +1 -1
- package/dist/cssm/components/SplitCol/SplitCol.module.css +1 -1
- package/dist/cssm/components/SplitCol/SplitColContext.d.ts +7 -0
- package/dist/cssm/components/SplitCol/SplitColContext.js +9 -0
- package/dist/cssm/components/SplitCol/SplitColContext.js.map +1 -0
- package/dist/cssm/components/SplitLayout/SplitLayout.module.css +1 -1
- package/dist/cssm/components/SubnavigationBar/SubnavigationBar.module.css +1 -1
- package/dist/cssm/components/SubnavigationButton/SubnavigationButton.module.css +1 -1
- package/dist/cssm/components/Switch/Switch.js +2 -3
- package/dist/cssm/components/Switch/Switch.js.map +1 -1
- package/dist/cssm/components/Switch/Switch.module.css +1 -1
- package/dist/cssm/components/Tabbar/Tabbar.module.css +1 -1
- package/dist/cssm/components/TabbarItem/TabbarItem.js +9 -0
- package/dist/cssm/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/cssm/components/TabbarItem/TabbarItem.module.css +1 -1
- package/dist/cssm/components/Tabs/Tabs.js +6 -15
- package/dist/cssm/components/Tabs/Tabs.js.map +1 -1
- package/dist/cssm/components/Tabs/Tabs.module.css +1 -1
- package/dist/cssm/components/TabsItem/TabsItem.module.css +1 -1
- package/dist/cssm/components/Tappable/Tappable.module.css +1 -1
- package/dist/cssm/components/TextTooltip/TextTooltip.module.css +1 -1
- package/dist/cssm/components/Textarea/Textarea.module.css +1 -1
- package/dist/cssm/components/Tooltip/Tooltip.d.ts +3 -3
- package/dist/cssm/components/Tooltip/Tooltip.js +122 -151
- package/dist/cssm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cssm/components/Tooltip/Tooltip.module.css +1 -1
- package/dist/cssm/components/Touch/Touch.js +4 -4
- package/dist/cssm/components/Touch/Touch.js.map +1 -1
- package/dist/cssm/components/Typography/Caption/Caption.module.css +1 -1
- package/dist/cssm/components/Typography/Footnote/Footnote.module.css +1 -1
- package/dist/cssm/components/Typography/Headline/Headline.module.css +1 -1
- package/dist/cssm/components/Typography/Paragraph/Paragraph.module.css +1 -1
- package/dist/cssm/components/Typography/Subhead/Subhead.module.css +1 -1
- package/dist/cssm/components/Typography/Text/Text.module.css +1 -1
- package/dist/cssm/components/Typography/Title/Title.module.css +1 -1
- package/dist/cssm/components/UsersStack/UsersStack.module.css +1 -1
- package/dist/cssm/components/View/View.js +1 -1
- package/dist/cssm/components/View/View.js.map +1 -1
- package/dist/cssm/components/View/View.module.css +1 -1
- package/dist/cssm/components/View/ViewIOS.module.css +1 -1
- package/dist/cssm/components/View/ViewInfinite.d.ts +1 -1
- package/dist/cssm/components/View/ViewInfinite.js +1 -1
- package/dist/cssm/components/View/ViewInfinite.js.map +1 -1
- package/dist/cssm/components/WriteBar/WriteBar.module.css +1 -1
- package/dist/cssm/components/WriteBarIcon/WriteBarIcon.js +11 -9
- package/dist/cssm/components/WriteBarIcon/WriteBarIcon.js.map +1 -1
- package/dist/cssm/components/WriteBarIcon/WriteBarIcon.module.css +1 -1
- package/dist/cssm/index.d.ts +37 -30
- package/dist/cssm/index.js +24 -18
- package/dist/cssm/index.js.map +1 -1
- package/dist/cssm/lib/floating/adapters.d.ts +2 -0
- package/dist/cssm/lib/floating/adapters.js +56 -0
- package/dist/cssm/lib/floating/adapters.js.map +1 -0
- package/dist/cssm/lib/floating/functions.d.ts +10 -0
- package/dist/cssm/lib/floating/functions.js +28 -0
- package/dist/cssm/lib/floating/functions.js.map +1 -0
- package/dist/cssm/lib/floating/index.d.ts +4 -0
- package/dist/cssm/lib/floating/index.js +4 -0
- package/dist/cssm/lib/floating/index.js.map +1 -0
- package/dist/cssm/lib/floating/types.d.ts +4 -0
- package/dist/cssm/lib/floating/types.js +2 -0
- package/dist/cssm/lib/floating/types.js.map +1 -0
- package/dist/cssm/lib/useIsomorphicLayoutEffect.d.ts +1 -1
- package/dist/cssm/lib/warnOnce.d.ts +7 -0
- package/dist/cssm/lib/warnOnce.js +12 -0
- package/dist/cssm/lib/warnOnce.js.map +1 -1
- package/dist/cssm/shared/breakpoints.d.ts +2 -2
- package/dist/cssm/shared/breakpoints.js +12 -13
- package/dist/cssm/shared/breakpoints.js.map +1 -1
- package/dist/cssm/styles/adaptivity.module.css +1 -1
- package/dist/cssm/styles/common.css +1 -1
- package/dist/cssm/styles/themes.css +1 -1
- package/dist/index.d.ts +37 -30
- package/dist/index.js +22 -16
- package/dist/index.js.map +1 -1
- package/dist/lib/floating/adapters.d.ts +2 -0
- package/dist/lib/floating/adapters.js +56 -0
- package/dist/lib/floating/adapters.js.map +1 -0
- package/dist/lib/floating/functions.d.ts +10 -0
- package/dist/lib/floating/functions.js +28 -0
- package/dist/lib/floating/functions.js.map +1 -0
- package/dist/lib/floating/index.d.ts +4 -0
- package/dist/lib/floating/index.js +4 -0
- package/dist/lib/floating/index.js.map +1 -0
- package/dist/lib/floating/types.d.ts +4 -0
- package/dist/lib/floating/types.js +2 -0
- package/dist/lib/floating/types.js.map +1 -0
- package/dist/lib/useIsomorphicLayoutEffect.d.ts +1 -1
- package/dist/lib/warnOnce.d.ts +7 -0
- package/dist/lib/warnOnce.js +12 -0
- package/dist/lib/warnOnce.js.map +1 -1
- package/dist/shared/breakpoints.d.ts +2 -2
- package/dist/shared/breakpoints.js +12 -13
- package/dist/shared/breakpoints.js.map +1 -1
- package/dist/stable.js.tmp +69 -21
- package/dist/vkui.css +143 -3
- package/dist/vkui.css.map +1 -1
- package/dist/vkui.js.tmp +61837 -0
- package/package.json +6 -6
- package/dist/cssm/styles/components.css +0 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Root.js","names":["React","classNames","Platform","useConfigProvider","SplitColContext","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","warn","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitCol';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n activeView: string;\n onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n activeView: string;\n transition: boolean;\n isBack?: boolean;\n prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n children,\n activeView: _activeView,\n onTransition,\n nav,\n className,\n ...restProps\n}: RootProps) => {\n const scroll = React.useContext(ScrollContext);\n const platform = usePlatform();\n const { document } = useDOM();\n const scrolls = React.useRef<Record<string, number>>({}).current;\n const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n const { transitionMotionEnabled = true } = useConfigProvider();\n const { animate } = React.useContext(SplitColContext);\n const disableAnimation = !transitionMotionEnabled || !animate;\n\n const views = React.Children.toArray(children) as React.ReactElement[];\n\n const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n activeView: _activeView,\n transition: false,\n });\n const transitionTo = (panel: string) => {\n if (panel !== activeView) {\n const viewIds = views.map((view) => getNavId(view.props, warn));\n const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n scrolls[activeView] = scroll.getScroll().y;\n _setState({\n activeView: panel,\n prevView: activeView,\n transition: !disableAnimation,\n isBack,\n });\n }\n };\n const finishTransition = React.useCallback(\n () => _setState({ activeView, prevView, isBack, transition: false }),\n [activeView, isBack, prevView],\n );\n\n useIsomorphicLayoutEffect(() => {\n (document!.activeElement as HTMLElement).blur();\n }, [activeView]);\n\n // Нужен переход\n useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n useIsomorphicLayoutEffect(() => {\n if (!transition && prevView) {\n // Закончился переход\n scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n onTransition &&\n onTransition({\n isBack: Boolean(isBack),\n from: prevView,\n to: activeView,\n });\n }\n }, [transition, prevView]);\n\n const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n React.useEffect(() => {\n if (!transition) {\n fallbackTransition.clear();\n return;\n }\n fallbackTransition.set();\n }, [fallbackTransition, transition]);\n\n const onAnimationEnd = (e: React.AnimationEvent) => {\n if (\n [\n 'vkui-root-android-animation-hide-back',\n 'vkui-root-android-animation-show-forward',\n 'vkui-root-ios-animation-hide-back',\n 'vkui-root-ios-animation-show-forward',\n ].includes(e.animationName)\n ) {\n finishTransition();\n }\n };\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['Root'],\n platform === Platform.IOS && styles['Root--ios'],\n transition && styles['Root--transition'],\n className,\n )}\n >\n {views.map((view) => {\n const viewId = getNavId(view.props, warn);\n if (viewId !== activeView && !(transition && viewId === prevView)) {\n return null;\n }\n const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n const compensateScroll =\n transition && (viewId === prevView || (isBack && viewId === activeView));\n return (\n <div\n key={viewId}\n ref={(e) => viewId && (viewNodes[viewId] = e)}\n onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n className={classNames(\n styles['Root__view'],\n transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n )}\n >\n <NavTransitionProvider entering={transition && viewId === activeView}>\n <div\n className={styles['Root__scrollCompensation']}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n }}\n >\n {view}\n </div>\n </NavTransitionProvider>\n </div>\n );\n })}\n </div>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Root.js","names":["React","classNames","Platform","useConfigProvider","SplitColContext","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","warn","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n activeView: string;\n onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n activeView: string;\n transition: boolean;\n isBack?: boolean;\n prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n children,\n activeView: _activeView,\n onTransition,\n nav,\n className,\n ...restProps\n}: RootProps) => {\n const scroll = React.useContext(ScrollContext);\n const platform = usePlatform();\n const { document } = useDOM();\n const scrolls = React.useRef<Record<string, number>>({}).current;\n const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n const { transitionMotionEnabled = true } = useConfigProvider();\n const { animate } = React.useContext(SplitColContext);\n const disableAnimation = !transitionMotionEnabled || !animate;\n\n const views = React.Children.toArray(children) as React.ReactElement[];\n\n const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n activeView: _activeView,\n transition: false,\n });\n const transitionTo = (panel: string) => {\n if (panel !== activeView) {\n const viewIds = views.map((view) => getNavId(view.props, warn));\n const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n scrolls[activeView] = scroll.getScroll().y;\n _setState({\n activeView: panel,\n prevView: activeView,\n transition: !disableAnimation,\n isBack,\n });\n }\n };\n const finishTransition = React.useCallback(\n () => _setState({ activeView, prevView, isBack, transition: false }),\n [activeView, isBack, prevView],\n );\n\n useIsomorphicLayoutEffect(() => {\n (document!.activeElement as HTMLElement).blur();\n }, [activeView]);\n\n // Нужен переход\n useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n useIsomorphicLayoutEffect(() => {\n if (!transition && prevView) {\n // Закончился переход\n scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n onTransition &&\n onTransition({\n isBack: Boolean(isBack),\n from: prevView,\n to: activeView,\n });\n }\n }, [transition, prevView]);\n\n const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n React.useEffect(() => {\n if (!transition) {\n fallbackTransition.clear();\n return;\n }\n fallbackTransition.set();\n }, [fallbackTransition, transition]);\n\n const onAnimationEnd = (e: React.AnimationEvent) => {\n if (\n [\n 'vkui-root-android-animation-hide-back',\n 'vkui-root-android-animation-show-forward',\n 'vkui-root-ios-animation-hide-back',\n 'vkui-root-ios-animation-show-forward',\n ].includes(e.animationName)\n ) {\n finishTransition();\n }\n };\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['Root'],\n platform === Platform.IOS && styles['Root--ios'],\n transition && styles['Root--transition'],\n className,\n )}\n >\n {views.map((view) => {\n const viewId = getNavId(view.props, warn);\n if (viewId !== activeView && !(transition && viewId === prevView)) {\n return null;\n }\n const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n const compensateScroll =\n transition && (viewId === prevView || (isBack && viewId === activeView));\n return (\n <div\n key={viewId}\n ref={(e) => viewId && (viewNodes[viewId] = e)}\n onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n className={classNames(\n styles['Root__view'],\n transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n )}\n >\n <NavTransitionProvider entering={transition && viewId === activeView}>\n <div\n className={styles['Root__scrollCompensation']}\n style={{\n marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n }}\n >\n {view}\n </div>\n </NavTransitionProvider>\n </div>\n );\n })}\n </div>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiRoot{height:100%;position:relative;width:100%}.vkuiRoot--transition{pointer-events:none}.vkuiRoot__view{height:100%;position:relative;width:100%}.vkuiRoot--transition .vkuiRoot__view{left:0;overflow:hidden;position:fixed;top:0}.vkuiRoot__scrollCompensation{height:100%;width:100%}.vkuiRoot__view--show-forward{animation:vkui-root-android-animation-show-forward .3s var(--vkui--animation_easing_platform)}.vkuiRoot__view--hide-back{animation:vkui-root-android-animation-hide-back .3s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after,.vkuiRoot--ios .vkuiRoot__view--show-back:after{background-color:#000;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiRoot--ios .vkuiRoot__view--show-back:after{animation:vkui-root-ios-animation-show-back .6s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after{animation:vkui-root-ios-animation-hide-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--show-forward{animation:vkui-root-ios-animation-show-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--hide-back{animation:vkui-root-ios-animation-hide-back .6s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@keyframes vkui-root-ios-animation-hide-back{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}@keyframes vkui-root-ios-animation-show-forward{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes vkui-root-android-animation-hide-back{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}@keyframes vkui-root-android-animation-show-forward{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
|
|
1
|
+
.vkuiRoot{height:100%;position:relative;width:100%}.vkuiRoot--transition{pointer-events:none}.vkuiRoot__view{height:100%;position:relative;width:100%}.vkuiRoot--transition .vkuiRoot__view{left:0;overflow:hidden;position:fixed;top:0}.vkuiRoot__scrollCompensation{height:100%;width:100%}.vkuiRoot__view--show-forward{animation:vkui-root-android-animation-show-forward .3s cubic-bezier(.4,0,.2,1);animation:vkui-root-android-animation-show-forward .3s var(--vkui--animation_easing_platform)}.vkuiRoot__view--hide-back{animation:vkui-root-android-animation-hide-back .3s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-android-animation-hide-back .3s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after,.vkuiRoot--ios .vkuiRoot__view--show-back:after{background-color:#000;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiRoot--ios .vkuiRoot__view--show-back:after{animation:vkui-root-ios-animation-show-back .6s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-ios-animation-show-back .6s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after{animation:vkui-root-ios-animation-hide-forward .6s cubic-bezier(.4,0,.2,1);animation:vkui-root-ios-animation-hide-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--show-forward{animation:vkui-root-ios-animation-show-forward .6s cubic-bezier(.4,0,.2,1);animation:vkui-root-ios-animation-show-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--hide-back{animation:vkui-root-ios-animation-hide-back .6s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-ios-animation-hide-back .6s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@keyframes vkui-root-ios-animation-hide-back{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}@keyframes vkui-root-ios-animation-show-forward{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes vkui-root-android-animation-hide-back{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}@keyframes vkui-root-android-animation-show-forward{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiScreenSpinner{animation:vkui-screen-spinner-intro .3s ease}.vkuiScreenSpinner--state-cancelable{cursor:pointer}.vkuiScreenSpinner__spinner{opacity:1}.vkuiScreenSpinner--hideSpinner .vkuiScreenSpinner__spinner{opacity:0;transition:opacity .1s ease}.vkuiScreenSpinner__container{background:var(--vkui--color_background_modal);border-radius:var(--vkui--size_border_radius--regular);box-shadow:var(--vkui--elevation4);color:var(--vkui--color_icon_medium);height:88px;position:relative;width:88px}.vkuiScreenSpinner__icon{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%}.vkuiScreenSpinner__icon .vkuiIcon{animation:vkui-screen-spinner-intro .2s ease}.vkuiScreenSpinner--state-done .vkuiScreenSpinner__icon .vkuiIcon path{stroke-dasharray:50;stroke-dashoffset:50;animation:vkui-screen-spinner-iconDone .6s .3s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-screen-spinner-iconDone{0%{stroke-dashoffset:50}to{stroke-dashoffset:0}}@keyframes vkui-screen-spinner-intro{0%{opacity:0}to{opacity:1}}
|
|
1
|
+
.vkuiScreenSpinner{animation:vkui-screen-spinner-intro .3s ease}.vkuiScreenSpinner--state-cancelable{cursor:pointer}.vkuiScreenSpinner__spinner{opacity:1}.vkuiScreenSpinner--hideSpinner .vkuiScreenSpinner__spinner{opacity:0;transition:opacity .1s ease}.vkuiScreenSpinner__container{background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);color:#818c99;color:var(--vkui--color_icon_medium);height:88px;position:relative;width:88px}.vkuiScreenSpinner__icon{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%}.vkuiScreenSpinner__icon .vkuiIcon{animation:vkui-screen-spinner-intro .2s ease}.vkuiScreenSpinner--state-done .vkuiScreenSpinner__icon .vkuiIcon path{stroke-dasharray:50;stroke-dashoffset:50;animation:vkui-screen-spinner-iconDone .6s cubic-bezier(.4,0,.2,1) .3s forwards;animation:vkui-screen-spinner-iconDone .6s .3s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-screen-spinner-iconDone{0%{stroke-dashoffset:50}to{stroke-dashoffset:0}}@keyframes vkui-screen-spinner-intro{0%{opacity:0}to{opacity:1}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:var(--vkui--size_search_height--regular)}@media (
|
|
1
|
+
.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSegmentedControl{background-color:var(--vkui--color_background_secondary);border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (
|
|
1
|
+
.vkuiSegmentedControl{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:#fff;background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSegmentedControlOption{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:inherit;box-sizing:border-box;color:var(--vkui--color_text_primary);cursor:pointer;height:100%;transition:color .1s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSegmentedControlOption .vkuiIcon{color:var(--vkui--color_icon_primary)}.vkuiSegmentedControlOption:not(.vkuiSegmentedControlOption--checked):hover{opacity:.5}.vkuiSegmentedControlOption__content{align-content:center;align-items:center;border-radius:inherit;display:flex;font-size:var(--vkui--font_text--font_size--regular);font-weight:var(--vkui--font_weight_accent2);height:100%;justify-content:center;line-height:var(--vkui--font_text--line_height--regular);width:100%}.vkuiSegmentedControlOption__content--sizeY-compact.vkuiSegmentedControlOption__content{font-size:var(--vkui--font_footnote--font_size--regular);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_footnote--line_height--regular)}@media (
|
|
1
|
+
.vkuiSegmentedControlOption{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:inherit;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);cursor:pointer;height:100%;transition:color .1s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSegmentedControlOption .vkuiIcon{color:#2c2d2e;color:var(--vkui--color_icon_primary)}.vkuiSegmentedControlOption:not(.vkuiSegmentedControlOption--checked):hover{opacity:.5}.vkuiSegmentedControlOption__content{align-content:center;align-items:center;border-radius:inherit;display:flex;font-size:16px;font-size:var(--vkui--font_text--font_size--regular);font-weight:500;font-weight:var(--vkui--font_weight_accent2);height:100%;justify-content:center;line-height:20px;line-height:var(--vkui--font_text--line_height--regular);width:100%}.vkuiSegmentedControlOption__content--sizeY-compact.vkuiSegmentedControlOption__content{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSegmentedControlOption__content--sizeY-none.vkuiSegmentedControlOption__content{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { SelectProps } from '../CustomSelect/CustomSelect';
|
|
3
3
|
export declare type SelectType = 'default' | 'plain' | 'accent';
|
|
4
|
-
/**
|
|
5
|
-
* @see https://vkcom.github.io/VKUI/#/SelectTypography
|
|
6
|
-
*/
|
|
7
|
-
export declare const SelectTypography: ({ selectType, children, className, ...restProps }: React.PropsWithChildren<Pick<SelectProps, 'selectType' | 'className'>>) => JSX.Element;
|
|
8
4
|
/**
|
|
9
5
|
* @see https://vkcom.github.io/VKUI/#/Select
|
|
10
6
|
*/
|
|
@@ -1,45 +1,23 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["
|
|
4
|
-
_excluded2 = ["children", "options", "popupDirection", "renderOption", "className"];
|
|
3
|
+
var _excluded = ["children", "options", "popupDirection", "renderOption", "className"];
|
|
5
4
|
import * as React from 'react';
|
|
6
5
|
import { NativeSelect } from '../NativeSelect/NativeSelect';
|
|
7
6
|
import { CustomSelect } from '../CustomSelect/CustomSelect';
|
|
8
|
-
import { useAdaptivity } from '../../hooks/useAdaptivity';
|
|
9
7
|
import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
|
|
10
|
-
import { usePlatform } from '../../hooks/usePlatform';
|
|
11
8
|
import { classNames } from '@vkontakte/vkjs';
|
|
12
|
-
import { getPlatformClassName } from '../../helpers/getPlatformClassName';
|
|
13
|
-
import { getSizeYClassName } from '../../helpers/getSizeYClassName';
|
|
14
9
|
import "./Select.module.css";
|
|
15
|
-
/**
|
|
16
|
-
* @see https://vkcom.github.io/VKUI/#/SelectTypography
|
|
17
|
-
*/
|
|
18
|
-
export var SelectTypography = function SelectTypography(_ref) {
|
|
19
|
-
var _ref$selectType = _ref.selectType,
|
|
20
|
-
selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
|
|
21
|
-
children = _ref.children,
|
|
22
|
-
className = _ref.className,
|
|
23
|
-
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
24
|
-
var platform = usePlatform();
|
|
25
|
-
var _useAdaptivity = useAdaptivity(),
|
|
26
|
-
sizeY = _useAdaptivity.sizeY;
|
|
27
|
-
return /*#__PURE__*/React.createElement("span", _extends({
|
|
28
|
-
className: classNames("vkuiSelectTypography", getPlatformClassName("vkuiSelectTypography", platform), getSizeYClassName("vkuiSelectTypography", sizeY), styles["SelectTypography--selectType-".concat(selectType)], className)
|
|
29
|
-
}, restProps), children);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
10
|
/**
|
|
33
11
|
* @see https://vkcom.github.io/VKUI/#/Select
|
|
34
12
|
*/
|
|
35
|
-
export var Select = function Select(
|
|
36
|
-
var children =
|
|
37
|
-
|
|
38
|
-
options =
|
|
39
|
-
popupDirection =
|
|
40
|
-
renderOption =
|
|
41
|
-
className =
|
|
42
|
-
props = _objectWithoutProperties(
|
|
13
|
+
export var Select = function Select(_ref) {
|
|
14
|
+
var children = _ref.children,
|
|
15
|
+
_ref$options = _ref.options,
|
|
16
|
+
options = _ref$options === void 0 ? [] : _ref$options,
|
|
17
|
+
popupDirection = _ref.popupDirection,
|
|
18
|
+
renderOption = _ref.renderOption,
|
|
19
|
+
className = _ref.className,
|
|
20
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
43
21
|
var hasPointer = useAdaptivityHasPointer();
|
|
44
22
|
return /*#__PURE__*/React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/React.createElement(CustomSelect, _extends({
|
|
45
23
|
className: classNames("vkuiSelect__custom", className),
|
|
@@ -48,18 +26,13 @@ export var Select = function Select(_ref2) {
|
|
|
48
26
|
renderOption: renderOption
|
|
49
27
|
}, props)), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/React.createElement(NativeSelect, _extends({
|
|
50
28
|
className: classNames("vkuiSelect__native", className)
|
|
51
|
-
}, props), options.map(function (
|
|
52
|
-
var label =
|
|
53
|
-
value =
|
|
29
|
+
}, props), options.map(function (_ref2) {
|
|
30
|
+
var label = _ref2.label,
|
|
31
|
+
value = _ref2.value;
|
|
54
32
|
return /*#__PURE__*/React.createElement("option", {
|
|
55
33
|
value: value,
|
|
56
34
|
key: "".concat(value)
|
|
57
35
|
}, label);
|
|
58
36
|
})));
|
|
59
37
|
};
|
|
60
|
-
var styles = {
|
|
61
|
-
"SelectTypography--selectType-accent": "vkuiSelectTypography--selectType-accent",
|
|
62
|
-
"SelectTypography--selectType-default": "vkuiSelectTypography--selectType-default",
|
|
63
|
-
"SelectTypography--selectType-plain": "vkuiSelectTypography--selectType-plain"
|
|
64
|
-
};
|
|
65
38
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":["React","NativeSelect","CustomSelect","
|
|
1
|
+
{"version":3,"file":"Select.js","names":["React","NativeSelect","CustomSelect","useAdaptivityHasPointer","classNames","Select","children","options","popupDirection","renderOption","className","props","hasPointer","undefined","map","label","value"],"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Select.module.css';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n children,\n options = [],\n popupDirection,\n renderOption,\n className,\n ...props\n}: SelectProps) => {\n const hasPointer = useAdaptivityHasPointer();\n\n return (\n <React.Fragment>\n {(hasPointer === undefined || hasPointer) && (\n <CustomSelect\n className={classNames(styles['Select__custom'], className)}\n options={options}\n popupDirection={popupDirection}\n renderOption={renderOption}\n {...props}\n />\n )}\n {(hasPointer === undefined || !hasPointer) && (\n <NativeSelect className={classNames(styles['Select__native'], className)} {...props}>\n {options.map(({ label, value }) => (\n <option value={value} key={`${value}`}>\n {label}\n </option>\n ))}\n </NativeSelect>\n )}\n </React.Fragment>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,YAAY,QAAqB,8BAA8B;AACxE,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAK7C;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAOA;EAAA,IANjBC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IACZC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,UAAU,GAAGT,uBAAuB,EAAE;EAE5C,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZ,CAACS,UAAU,KAAKC,SAAS,IAAID,UAAU,kBACtC,oBAAC,YAAY;IACX,SAAS,EAAER,UAAU,uBAA2BM,SAAS,CAAE;IAC3D,OAAO,EAAEH,OAAQ;IACjB,cAAc,EAAEC,cAAe;IAC/B,YAAY,EAAEC;EAAa,GACvBE,KAAK,EAEZ,EACA,CAACC,UAAU,KAAKC,SAAS,IAAI,CAACD,UAAU,kBACvC,oBAAC,YAAY;IAAC,SAAS,EAAER,UAAU,uBAA2BM,SAAS;EAAE,GAAKC,KAAK,GAChFJ,OAAO,CAACO,GAAG,CAAC;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;IAAA,oBAC1B;MAAQ,KAAK,EAAEA,KAAM;MAAC,GAAG,YAAKA,KAAK;IAAG,GACnCD,KAAK,CACC;EAAA,CACV,CAAC,CAEL,CACc;AAErB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSelect{box-sizing:border-box;cursor:pointer;font-family:var(--vkui--font_family_base);position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-family:inherit;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiSelect__container{box-sizing:border-box;color:var(--vkui--color_text_primary);flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}@media (
|
|
1
|
+
.vkuiSelect{box-sizing:border-box;cursor:pointer;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-family:inherit;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiSelect__container{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSelect--sizeY-none.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { FormFieldProps } from '../FormField/FormField';
|
|
3
3
|
import { HasAlign, HasRootRef } from '../../types';
|
|
4
|
-
import { SelectType } from '../Select/Select';
|
|
4
|
+
import type { SelectType } from '../Select/Select';
|
|
5
5
|
export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
|
|
6
6
|
multiline?: boolean;
|
|
7
7
|
disabled?: boolean;
|
|
@@ -8,7 +8,7 @@ import { FormField } from '../FormField/FormField';
|
|
|
8
8
|
import { usePlatform } from '../../hooks/usePlatform';
|
|
9
9
|
import { getPlatformClassName } from '../../helpers/getPlatformClassName';
|
|
10
10
|
import { getFormFieldModeFromSelectType } from '../../lib/select';
|
|
11
|
-
import { SelectTypography } from '../
|
|
11
|
+
import { SelectTypography } from '../SelectTypography/SelectTypography';
|
|
12
12
|
import { useAdaptivity } from '../../hooks/useAdaptivity';
|
|
13
13
|
import { getSizeXClassName } from '../../helpers/getSizeXClassName';
|
|
14
14
|
import { getSizeYClassName } from '../../helpers/getSizeYClassName';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMimicry.js","names":["React","classNames","DropdownIcon","FormField","usePlatform","getPlatformClassName","getFormFieldModeFromSelectType","SelectTypography","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","sizeX","sizeY","title","undefined","styles"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { SelectType
|
|
1
|
+
{"version":3,"file":"SelectMimicry.js","names":["React","classNames","DropdownIcon","FormField","usePlatform","getPlatformClassName","getFormFieldModeFromSelectType","SelectTypography","useAdaptivity","getSizeXClassName","getSizeYClassName","SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","before","after","selectType","status","className","restProps","platform","sizeX","sizeY","title","undefined","styles"],"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from '../Select/Select.module.css';\n\nexport interface SelectMimicryProps\n extends React.HTMLAttributes<HTMLElement>,\n HasAlign,\n HasRootRef<HTMLElement>,\n Pick<FormFieldProps, 'before' | 'after' | 'status'> {\n multiline?: boolean;\n disabled?: boolean;\n selectType?: SelectType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectMimicry\n */\nexport const SelectMimicry = ({\n tabIndex = 0,\n placeholder,\n children,\n align,\n getRootRef,\n multiline,\n disabled,\n onClick,\n before,\n after = <DropdownIcon />,\n selectType = 'default',\n status,\n className,\n ...restProps\n}: SelectMimicryProps) => {\n const platform = usePlatform();\n const { sizeX, sizeY } = useAdaptivity();\n const title = children || placeholder;\n\n return (\n <FormField\n {...restProps}\n tabIndex={disabled ? undefined : tabIndex}\n className={classNames(\n styles['Select'],\n getPlatformClassName(styles['Select'], platform),\n getSizeXClassName(styles['Select'], sizeX),\n getSizeYClassName(styles['Select'], sizeY),\n multiline && styles['Select--multiline'],\n align && styles[`Select--align-${align}`],\n before && styles['Select--hasBefore'],\n after && styles['Select--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n onClick={disabled ? undefined : onClick}\n disabled={disabled}\n before={before}\n after={after}\n mode={getFormFieldModeFromSelectType(selectType)}\n status={status}\n >\n <div className={styles['Select__container']}>\n <SelectTypography selectType={selectType} className={styles['Select__title']}>\n {title}\n </SelectTypography>\n </div>\n </FormField>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,8BAA8B,QAAQ,kBAAkB;AAEjE,SAASC,gBAAgB,QAAQ,sCAAsC;AACvE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAapE;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAeA;EAAA,yBAdxBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,kBACNC,KAAK;IAALA,KAAK,wCAAG,oBAAC,YAAY,OAAG;IAAA,uBACxBC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGtB,WAAW,EAAE;EAC9B,qBAAyBI,aAAa,EAAE;IAAhCmB,KAAK,kBAALA,KAAK;IAAEC,KAAK,kBAALA,KAAK;EACpB,IAAMC,KAAK,GAAGf,QAAQ,IAAID,WAAW;EAErC,oBACE,oBAAC,SAAS,eACJY,SAAS;IACb,QAAQ,EAAEP,QAAQ,GAAGY,SAAS,GAAGlB,QAAS;IAC1C,SAAS,EAAEX,UAAU,eAEnBI,oBAAoB,eAAmBqB,QAAQ,CAAC,EAChDjB,iBAAiB,eAAmBkB,KAAK,CAAC,EAC1CjB,iBAAiB,eAAmBkB,KAAK,CAAC,EAC1CX,SAAS,2BAA+B,EACxCF,KAAK,IAAIgB,MAAM,yBAAkBhB,KAAK,EAAG,EACzCK,MAAM,2BAA+B,EACrCC,KAAK,0BAA8B,EACnCG,SAAS,CACT;IACF,UAAU,EAAER,UAAW;IACvB,OAAO,EAAEE,QAAQ,GAAGY,SAAS,GAAGX,OAAQ;IACxC,QAAQ,EAAED,QAAS;IACnB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAEf,8BAA8B,CAACgB,UAAU,CAAE;IACjD,MAAM,EAAEC;EAAO,iBAEf;IAAK,SAAS;EAA8B,gBAC1C,oBAAC,gBAAgB;IAAC,UAAU,EAAED,UAAW;IAAC,SAAS;EAA0B,GAC1EO,KAAK,CACW,CACf,CACI;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { SelectType } from '../Select/Select';
|
|
3
|
+
export interface SelectTypographyProps {
|
|
4
|
+
selectType?: SelectType;
|
|
5
|
+
className?: string;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* @private
|
|
10
|
+
*/
|
|
11
|
+
export declare const SelectTypography: ({ selectType, children, className, ...restProps }: SelectTypographyProps) => JSX.Element;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["selectType", "children", "className"];
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { classNames } from '@vkontakte/vkjs';
|
|
6
|
+
import { usePlatform } from '../../hooks/usePlatform';
|
|
7
|
+
import { useAdaptivity } from '../../hooks/useAdaptivity';
|
|
8
|
+
import "./SelectTypography.module.css";
|
|
9
|
+
var sizeYClassNames = {
|
|
10
|
+
none: "vkuiSelectTypography--sizeY-none",
|
|
11
|
+
compact: "vkuiSelectTypography--sizeY-compact",
|
|
12
|
+
regular: ''
|
|
13
|
+
};
|
|
14
|
+
var platformClassNames = {
|
|
15
|
+
vkcom: "vkuiSelectTypography--vkcom",
|
|
16
|
+
android: "vkuiSelectTypography--android"
|
|
17
|
+
};
|
|
18
|
+
var selectTypeClassNames = {
|
|
19
|
+
default: "vkuiSelectTypography--selectType-default",
|
|
20
|
+
plain: "vkuiSelectTypography--selectType-plain",
|
|
21
|
+
accent: "vkuiSelectTypography--selectType-accent"
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* @private
|
|
25
|
+
*/
|
|
26
|
+
export var SelectTypography = function SelectTypography(_ref) {
|
|
27
|
+
var _ref$selectType = _ref.selectType,
|
|
28
|
+
selectType = _ref$selectType === void 0 ? 'default' : _ref$selectType,
|
|
29
|
+
children = _ref.children,
|
|
30
|
+
className = _ref.className,
|
|
31
|
+
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
32
|
+
var platform = usePlatform();
|
|
33
|
+
var _useAdaptivity = useAdaptivity(),
|
|
34
|
+
_useAdaptivity$sizeY = _useAdaptivity.sizeY,
|
|
35
|
+
sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
|
|
36
|
+
return /*#__PURE__*/React.createElement("span", _extends({
|
|
37
|
+
className: classNames("vkuiSelectTypography", platformClassNames[platform], sizeYClassNames[sizeY], selectTypeClassNames[selectType], className)
|
|
38
|
+
}, restProps), children);
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=SelectTypography.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectTypography.js","names":["React","classNames","usePlatform","useAdaptivity","sizeYClassNames","none","compact","regular","platformClassNames","vkcom","android","selectTypeClassNames","default","plain","accent","SelectTypography","selectType","children","className","restProps","platform","sizeY"],"sources":["../../../../src/components/SelectTypography/SelectTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SelectType } from '../Select/Select';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport styles from './SelectTypography.module.css';\n\nconst sizeYClassNames = {\n none: styles['SelectTypography--sizeY-none'],\n compact: styles['SelectTypography--sizeY-compact'],\n regular: '',\n};\n\nconst platformClassNames: Record<string, string> = {\n vkcom: styles['SelectTypography--vkcom'],\n android: styles['SelectTypography--android'],\n};\n\nconst selectTypeClassNames = {\n default: styles['SelectTypography--selectType-default'],\n plain: styles['SelectTypography--selectType-plain'],\n accent: styles['SelectTypography--selectType-accent'],\n};\n\nexport interface SelectTypographyProps {\n selectType?: SelectType;\n className?: string;\n children?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const SelectTypography = ({\n selectType = 'default',\n children,\n className,\n ...restProps\n}: SelectTypographyProps) => {\n const platform = usePlatform();\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <span\n className={classNames(\n styles['SelectTypography'],\n platformClassNames[platform],\n sizeYClassNames[sizeY],\n selectTypeClassNames[selectType],\n className,\n )}\n {...restProps}\n >\n {children}\n </span>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,aAAa,QAAQ,2BAA2B;AAAC;AAG1D,IAAMC,eAAe,GAAG;EACtBC,IAAI,oCAAwC;EAC5CC,OAAO,uCAA2C;EAClDC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,kBAA0C,GAAG;EACjDC,KAAK,+BAAmC;EACxCC,OAAO;AACT,CAAC;AAED,IAAMC,oBAAoB,GAAG;EAC3BC,OAAO,4CAAgD;EACvDC,KAAK,0CAA8C;EACnDC,MAAM;AACR,CAAC;AAQD;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAKA;EAAA,2BAJ3BC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGlB,WAAW,EAAE;EAC9B,qBAA2BC,aAAa,EAAE;IAAA,sCAAlCkB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE;IACE,SAAS,EAAEpB,UAAU,yBAEnBO,kBAAkB,CAACY,QAAQ,CAAC,EAC5BhB,eAAe,CAACiB,KAAK,CAAC,EACtBV,oBAAoB,CAACK,UAAU,CAAC,EAChCE,SAAS;EACT,GACEC,SAAS,GAEZF,QAAQ,CACJ;AAEX,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.vkuiSelectTypography--selectType-accent{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular);font-weight:600;font-weight:var(--vkui--font_weight_accent1);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular)}:not(.vkuiSelectTypography--selectType-accent).vkuiSelectTypography{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular)}.vkuiSelectTypography--selectType-accent.vkuiSelectTypography--android{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiSelectTypography--sizeY-compact:not(.vkuiSelectTypography--selectType-accent),.vkuiSelectTypography--vkcom:not(.vkuiSelectTypography--selectType-accent){font-size:15px;font-size:var(--vkui--font_text--font_size--compact);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSelectTypography--sizeY-none:not(.vkuiSelectTypography--selectType-accent){font-size:15px;font-size:var(--vkui--font_text--font_size--compact);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:20px;line-height:var(--vkui--font_text--line_height--compact)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSeparator{color:var(--vkui--color_separator_primary)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiSeparator{color:var(--vkui--color_separator_primary2x)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiSeparator{color:var(--vkui--color_separator_primary3x)}}.vkuiSeparator__in{background:currentColor;height:1px;height:var(--vkui_internal--thin_border);transform-origin:center top}.vkuiSeparator--padded .vkuiSeparator__in{margin-left:var(--vkui--size_base_padding_horizontal--regular);margin-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiModalPage--sizeX-regular .vkuiSeparator--padded{padding-left:8px;padding-right:8px}@media (min-width:768px){.vkuiModalPage--sizeX-none .vkuiSeparator--padded{padding-left:8px;padding-right:8px}}
|
|
1
|
+
.vkuiSeparator{color:#d7d8d9;color:var(--vkui--color_separator_primary)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiSeparator{color:#cbcccd;color:var(--vkui--color_separator_primary2x)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiSeparator{color:#bebfc1;color:var(--vkui--color_separator_primary3x)}}.vkuiSeparator__in{background:currentColor;height:1px;height:var(--vkui_internal--thin_border);transform-origin:center top}.vkuiSeparator--padded .vkuiSeparator__in{margin-left:16px;margin-left:var(--vkui--size_base_padding_horizontal--regular);margin-right:16px;margin-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiModalPage--sizeX-regular .vkuiSeparator--padded{padding-left:8px;padding-right:8px}@media (min-width:768px){.vkuiModalPage--sizeX-none .vkuiSeparator--padded{padding-left:8px;padding-right:8px}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSimpleCell{align-items:center;color:var(--vkui--color_text_primary);display:flex;min-height:48px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:var(--vkui--size_base_padding_horizontal--regular);text-decoration:none;white-space:nowrap}.vkuiSimpleCell--mult{white-space:normal}.vkuiSimpleCell--mult .vkuiSimpleCell__children{text-overflow:clip}.vkuiSimpleCell__main{flex-grow:1;max-width:100%;min-width:0;overflow:hidden}.vkuiSimpleCell>.vkuiIcon{color:var(--vkui--color_icon_accent);flex-shrink:0;padding-bottom:10px;padding-right:12px;padding-top:10px}.vkuiSimpleCell>.vkuiIcon--28{padding-right:16px}.vkuiSimpleCell__subhead{color:var(--vkui--color_text_subhead)}.vkuiSimpleCell__text{overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell__extraSubtitle,.vkuiSimpleCell__subtitle{color:var(--vkui--color_text_secondary)}.vkuiSimpleCell .vkuiSimpleCell__content{align-content:flex-start;align-items:center;display:flex;justify-content:space-between;max-width:100%}.vkuiSimpleCell:not(.vkuiSimpleCell--mult) .vkuiSimpleCell__content{justify-content:flex-start}.vkuiSimpleCell__children{color:inherit;display:block;overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell--mult .vkuiSimpleCell__children,.vkuiSimpleCell--mult .vkuiSimpleCell__subtitle{flex:1 1 auto}.vkuiSimpleCell__badge{color:var(--vkui--color_icon_accent);display:inline-block;flex-grow:0;flex-shrink:0}.vkuiSimpleCell__content>:not(:last-child){margin-right:4px}.vkuiSimpleCell__indicator{color:var(--vkui--color_text_secondary);min-width:0;overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.vkuiSimpleCell__after{align-items:center;color:var(--vkui--color_icon_accent);display:flex;flex-shrink:0}.vkuiSimpleCell__after>.vkuiIcon{padding-left:8px}.vkuiSimpleCell__after>.vkuiIcon:last-child{padding-right:2px}.vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-12px}.vkuiSimpleCell__typography{font-family:var(--vkui--font_footnote--font_family--regular);font-size:var(--vkui--font_footnote--font_size--regular);font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:var(--vkui--font_footnote--line_height--regular)}.vkuiSimpleCell--ios .vkuiSimpleCell__indicator,.vkuiSimpleCell--ios .vkuiSimpleCell__main{padding-bottom:11px;padding-top:9px}.vkuiSimpleCell--ios>.vkuiIcon--28{padding-left:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIcon--chevron_24{color:var(--vkui--color_icon_tertiary);padding-left:12px;padding-right:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-9px}.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}@media (
|
|
1
|
+
.vkuiSimpleCell{align-items:center;color:#000;color:var(--vkui--color_text_primary);display:flex;min-height:48px;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);text-decoration:none;white-space:nowrap}.vkuiSimpleCell--mult{white-space:normal}.vkuiSimpleCell--mult .vkuiSimpleCell__children{text-overflow:clip}.vkuiSimpleCell__main{flex-grow:1;max-width:100%;min-width:0;overflow:hidden}.vkuiSimpleCell>.vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent);flex-shrink:0;padding-bottom:10px;padding-right:12px;padding-top:10px}.vkuiSimpleCell>.vkuiIcon--28{padding-right:16px}.vkuiSimpleCell__subhead{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiSimpleCell__text{overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell__extraSubtitle,.vkuiSimpleCell__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSimpleCell .vkuiSimpleCell__content{align-content:flex-start;align-items:center;display:flex;justify-content:space-between;max-width:100%}.vkuiSimpleCell:not(.vkuiSimpleCell--mult) .vkuiSimpleCell__content{justify-content:flex-start}.vkuiSimpleCell__children{color:inherit;display:block;overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell--mult .vkuiSimpleCell__children,.vkuiSimpleCell--mult .vkuiSimpleCell__subtitle{flex:1 1 auto}.vkuiSimpleCell__badge{color:#2688eb;color:var(--vkui--color_icon_accent);display:inline-block;flex-grow:0;flex-shrink:0}.vkuiSimpleCell__content>:not(:last-child){margin-right:4px}.vkuiSimpleCell__indicator{color:#818c99;color:var(--vkui--color_text_secondary);min-width:0;overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.vkuiSimpleCell__after{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;flex-shrink:0}.vkuiSimpleCell__after>.vkuiIcon{padding-left:8px}.vkuiSimpleCell__after>.vkuiIcon:last-child{padding-right:2px}.vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-12px}.vkuiSimpleCell__typography{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_footnote--font_family--regular);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}.vkuiSimpleCell--ios .vkuiSimpleCell__indicator,.vkuiSimpleCell--ios .vkuiSimpleCell__main{padding-bottom:11px;padding-top:9px}.vkuiSimpleCell--ios>.vkuiIcon--28{padding-left:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIcon--chevron_24{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);padding-left:12px;padding-right:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-9px}.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}}.vkuiSimpleCell--android .vkuiSimpleCell__indicator,.vkuiSimpleCell--android .vkuiSimpleCell__main,.vkuiSimpleCell--vkcom .vkuiSimpleCell__indicator,.vkuiSimpleCell--vkcom .vkuiSimpleCell__main{padding-bottom:10px;padding-top:11px}.vkuiSimpleCell--sizeY-compact{min-height:44px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSimpleCell--sizeY-none{min-height:44px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}}.vkuiFormItem>.vkuiSimpleCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}.vkuiSimpleCell__main>:not(:first-child){margin-top:2px}
|
|
@@ -4,4 +4,4 @@ export declare type SliderProps = UniversalSliderProps<number>;
|
|
|
4
4
|
/**
|
|
5
5
|
* @see https://vkcom.github.io/VKUI/#/Slider
|
|
6
6
|
*/
|
|
7
|
-
export declare const Slider: ({ onChange, min, max, defaultValue, ...props }: SliderProps) => JSX.Element;
|
|
7
|
+
export declare const Slider: ({ onChange, min, max, defaultValue, value, ...props }: SliderProps) => JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["onChange", "min", "max", "defaultValue"];
|
|
4
|
+
var _excluded = ["onChange", "min", "max", "defaultValue", "value"];
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { clamp } from '../../helpers/math';
|
|
7
7
|
import { UniversalSlider } from '../RangeSlider/UniversalSlider';
|
|
@@ -16,13 +16,14 @@ export var Slider = function Slider(_ref) {
|
|
|
16
16
|
max = _ref$max === void 0 ? 100 : _ref$max,
|
|
17
17
|
_ref$defaultValue = _ref.defaultValue,
|
|
18
18
|
defaultValue = _ref$defaultValue === void 0 ? min : _ref$defaultValue,
|
|
19
|
+
value = _ref.value,
|
|
19
20
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
20
|
-
var isControlled =
|
|
21
|
+
var isControlled = value !== undefined;
|
|
21
22
|
var _React$useState = React.useState(defaultValue),
|
|
22
23
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
23
24
|
localValue = _React$useState2[0],
|
|
24
25
|
setValue = _React$useState2[1];
|
|
25
|
-
var _value = clamp(
|
|
26
|
+
var _value = clamp(isControlled ? value : localValue, min, max);
|
|
26
27
|
var handleChange = React.useCallback(function (nextValue, event) {
|
|
27
28
|
if (props.disabled || _value === nextValue[1]) {
|
|
28
29
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":["React","clamp","UniversalSlider","Slider","onChange","min","max","defaultValue","
|
|
1
|
+
{"version":3,"file":"Slider.js","names":["React","clamp","UniversalSlider","Slider","onChange","min","max","defaultValue","value","props","isControlled","undefined","useState","localValue","setValue","_value","handleChange","useCallback","nextValue","event","disabled","rangeValue","useMemo"],"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport {\n UniversalSlider,\n UniversalSliderProps,\n UniversalValue,\n} from '../RangeSlider/UniversalSlider';\nimport { TouchEvent } from '../Touch/Touch';\n\nexport type SliderProps = UniversalSliderProps<number>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Slider\n */\nexport const Slider = ({\n onChange,\n min = 0,\n max = 100,\n defaultValue = min,\n value,\n ...props\n}: SliderProps) => {\n const isControlled = value !== undefined;\n\n const [localValue, setValue] = React.useState(defaultValue);\n const _value = clamp(isControlled ? value : localValue, min, max);\n\n const handleChange: UniversalSliderProps<UniversalValue>['onChange'] = React.useCallback(\n (nextValue: UniversalValue, event: TouchEvent) => {\n if (props.disabled || _value === nextValue[1]) {\n return;\n }\n !isControlled && setValue(nextValue[1]);\n onChange && onChange(nextValue[1], event);\n },\n [props.disabled, _value, isControlled, onChange],\n );\n\n const rangeValue: [null, number] = React.useMemo(() => [null, _value], [_value]);\n return (\n <UniversalSlider {...props} value={rangeValue} onChange={handleChange} min={min} max={max} />\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SACEC,eAAe,QAGV,gCAAgC;AAKvC;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAOA;EAAA,IANjBC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,CAAC;IAAA,gBACPC,GAAG;IAAHA,GAAG,yBAAG,GAAG;IAAA,yBACTC,YAAY;IAAZA,YAAY,kCAAGF,GAAG;IAClBG,KAAK,QAALA,KAAK;IACFC,KAAK;EAER,IAAMC,YAAY,GAAGF,KAAK,KAAKG,SAAS;EAExC,sBAA+BX,KAAK,CAACY,QAAQ,CAACL,YAAY,CAAC;IAAA;IAApDM,UAAU;IAAEC,QAAQ;EAC3B,IAAMC,MAAM,GAAGd,KAAK,CAACS,YAAY,GAAGF,KAAK,GAAGK,UAAU,EAAER,GAAG,EAAEC,GAAG,CAAC;EAEjE,IAAMU,YAA8D,GAAGhB,KAAK,CAACiB,WAAW,CACtF,UAACC,SAAyB,EAAEC,KAAiB,EAAK;IAChD,IAAIV,KAAK,CAACW,QAAQ,IAAIL,MAAM,KAAKG,SAAS,CAAC,CAAC,CAAC,EAAE;MAC7C;IACF;IACA,CAACR,YAAY,IAAII,QAAQ,CAACI,SAAS,CAAC,CAAC,CAAC,CAAC;IACvCd,QAAQ,IAAIA,QAAQ,CAACc,SAAS,CAAC,CAAC,CAAC,EAAEC,KAAK,CAAC;EAC3C,CAAC,EACD,CAACV,KAAK,CAACW,QAAQ,EAAEL,MAAM,EAAEL,YAAY,EAAEN,QAAQ,CAAC,CACjD;EAED,IAAMiB,UAA0B,GAAGrB,KAAK,CAACsB,OAAO,CAAC;IAAA,OAAM,CAAC,IAAI,EAAEP,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAChF,oBACE,oBAAC,eAAe,eAAKN,KAAK;IAAE,KAAK,EAAEY,UAAW;IAAC,QAAQ,EAAEL,YAAa;IAAC,GAAG,EAAEX,GAAI;IAAC,GAAG,EAAEC;EAAI,GAAG;AAEjG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSlider{height:28px;padding:0 14px;position:relative}.vkuiSlider:before{background-color:var(--vkui--color_track_background);border-radius:1px;content:"";height:2px;left:0;position:absolute;top:13px;width:100%}.vkuiSlider__in{height:100%;position:relative}.vkuiSlider__dragger{height:0;left:0;position:absolute;top:13px;width:0}.vkuiSlider__dragger:before{background:var(--vkui--color_background_accent);border-radius:1px;content:"";height:2px;left:-14px;position:absolute;top:0;width:calc(100% + 28px)}.vkuiSlider__thumb{background:var(--vkui--color_background_contrast);border:.5px solid var(--vkui--color_separator_primary_alpha);border-radius:14px;box-shadow:var(--vkui--elevation3);height:28px;position:absolute;top:-13px;transition:transform .1s ease;width:28px}.vkuiSlider__thumb--start{left:-14px}.vkuiSlider__thumb--end{right:-14px}.vkuiSlider--disabled{opacity:var(--vkui--opacity_disable_accessibility)}.vkuiSlider--sizeY-compact{height:24px;padding:0 12px}.vkuiSlider--sizeY-compact .vkuiSlider__dragger,.vkuiSlider--sizeY-compact:before{top:11px}.vkuiSlider--sizeY-compact .vkuiSlider__dragger:before{left:-12px;width:calc(100% + 24px)}.vkuiSlider--sizeY-compact .vkuiSlider__thumb{height:24px;top:-11px;width:24px}.vkuiSlider--sizeY-compact .vkuiSlider__thumb--start{left:-12px}.vkuiSlider--sizeY-compact .vkuiSlider__thumb--end{right:-12px}@media (
|
|
1
|
+
.vkuiSlider{height:28px;padding:0 14px;position:relative}.vkuiSlider:before{background-color:#e1e3e6;background-color:var(--vkui--color_track_background);border-radius:1px;content:"";height:2px;left:0;position:absolute;top:13px;width:100%}.vkuiSlider__in{height:100%;position:relative}.vkuiSlider__dragger{height:0;left:0;position:absolute;top:13px;width:0}.vkuiSlider__dragger:before{background:#2688eb;background:var(--vkui--color_background_accent);border-radius:1px;content:"";height:2px;left:-14px;position:absolute;top:0;width:calc(100% + 28px)}.vkuiSlider__thumb{background:#fff;background:var(--vkui--color_background_contrast);border:.5px solid rgba(0,0,0,.12);border:.5px solid var(--vkui--color_separator_primary_alpha);border-radius:14px;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);height:28px;position:absolute;top:-13px;transition:transform .1s ease;width:28px}.vkuiSlider__thumb--start{left:-14px}.vkuiSlider__thumb--end{right:-14px}.vkuiSlider--disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiSlider--sizeY-compact{height:24px;padding:0 12px}.vkuiSlider--sizeY-compact .vkuiSlider__dragger,.vkuiSlider--sizeY-compact:before{top:11px}.vkuiSlider--sizeY-compact .vkuiSlider__dragger:before{left:-12px;width:calc(100% + 24px)}.vkuiSlider--sizeY-compact .vkuiSlider__thumb{height:24px;top:-11px;width:24px}.vkuiSlider--sizeY-compact .vkuiSlider__thumb--start{left:-12px}.vkuiSlider--sizeY-compact .vkuiSlider__thumb--end{right:-12px}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSlider--sizeY-none{height:24px;padding:0 12px}.vkuiSlider--sizeY-none .vkuiSlider__dragger,.vkuiSlider--sizeY-none:before{top:11px}.vkuiSlider--sizeY-none .vkuiSlider__dragger:before{left:-12px;width:calc(100% + 24px)}.vkuiSlider--sizeY-none .vkuiSlider__thumb{height:24px;top:-11px;width:24px}.vkuiSlider--sizeY-none .vkuiSlider__thumb--start{left:-12px}.vkuiSlider--sizeY-none .vkuiSlider__thumb--end{right:-12px}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:var(--vkui--z_index_popout)}.vkuiEpic .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:var(--vkui--color_background_modal);border-radius:var(--vkui--size_border_radius--regular);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px 16px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-left:-4px;margin-right:12px}.vkuiSnackbar__after{margin-left:12px;margin-right:-4px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}
|
|
1
|
+
.vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiEpic--hasTabbar .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s cubic-bezier(.4,0,.2,1);animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px 16px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:#2d2d2e;background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-left:-4px;margin-right:12px}.vkuiSnackbar__after{margin-left:12px;margin-right:-4px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#000;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:#6d7885;color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}
|
|
@@ -15,7 +15,8 @@ export var Spacing = function Spacing(_ref) {
|
|
|
15
15
|
className = _ref.className,
|
|
16
16
|
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
17
17
|
var style = _objectSpread({
|
|
18
|
-
height: size
|
|
18
|
+
height: size,
|
|
19
|
+
padding: "".concat(size / 2, "px 0")
|
|
19
20
|
}, styleProp);
|
|
20
21
|
return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
|
|
21
22
|
"aria-hidden": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spacing.js","names":["React","classNames","Spacing","size","styleProp","style","className","restProps","height"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Высота спэйсинга\n */\n size?: number;\n children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n const style = {\n height: size,\n ...styleProp,\n };\n\n return (\n <div\n {...restProps}\n aria-hidden\n className={classNames(className, styles['Spacing'])}\n style={style}\n />\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAW7C;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,OAA8E;EAAA,qBAAxEC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAASC,SAAS,QAAhBC,KAAK;IAAaC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC3E,IAAMF,
|
|
1
|
+
{"version":3,"file":"Spacing.js","names":["React","classNames","Spacing","size","styleProp","style","className","restProps","height","padding"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Высота спэйсинга\n */\n size?: number;\n children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n const style: React.CSSProperties = {\n height: size,\n padding: `${size / 2}px 0`,\n ...styleProp,\n };\n\n return (\n <div\n {...restProps}\n aria-hidden\n className={classNames(className, styles['Spacing'])}\n style={style}\n />\n );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAW7C;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,OAA8E;EAAA,qBAAxEC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAASC,SAAS,QAAhBC,KAAK;IAAaC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC3E,IAAMF,KAA0B;IAC9BG,MAAM,EAAEL,IAAI;IACZM,OAAO,YAAKN,IAAI,GAAG,CAAC;EAAM,GACvBC,SAAS,CACb;EAED,oBACE,wCACMG,SAAS;IACb,mBAAW;IACX,SAAS,EAAEN,UAAU,CAACK,SAAS,gBAAqB;IACpD,KAAK,EAAED;EAAM,GACb;AAEN,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSpacing{box-sizing:border-box;
|
|
1
|
+
.vkuiSpacing{box-sizing:border-box;position:relative}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiSpinner{align-items:center;color:var(--vkui--color_icon_medium);display:flex;height:100%;justify-content:center;width:100%}.vkuiSpinner__self{animation:vkui-rotator .7s linear infinite;animation:vkui-rotator var(--vkui_internal--duration) linear infinite;transform-origin:center}.vkuiSpinner__self svg{transform:scale(1)}.vkuiButton .vkuiSpinner,.vkuiPanelHeader .vkuiSpinner{color:currentColor}
|
|
1
|
+
.vkuiSpinner{align-items:center;color:#818c99;color:var(--vkui--color_icon_medium);display:flex;height:100%;justify-content:center;width:100%}.vkuiSpinner__self{animation:vkui-rotator .7s linear infinite;animation:vkui-rotator var(--vkui_internal--duration) linear infinite;transform-origin:center}.vkuiSpinner__self svg{transform:scale(1)}.vkuiButton .vkuiSpinner,.vkuiPanelHeader .vkuiSpinner{color:currentColor}
|
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export interface SplitColContextProps {
|
|
3
|
-
colRef: React.RefObject<HTMLDivElement> | null;
|
|
4
|
-
animate: boolean;
|
|
5
|
-
}
|
|
6
|
-
export declare const SplitColContext: React.Context<SplitColContextProps>;
|
|
7
|
-
export declare const useSplitCol: () => SplitColContextProps;
|
|
8
2
|
export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
9
3
|
width?: number | string;
|
|
10
4
|
maxWidth?: number | string;
|
|
@@ -12,6 +12,7 @@ import { ViewWidth } from '../../lib/adaptivity';
|
|
|
12
12
|
import { useObjectMemo } from '../../hooks/useObjectMemo';
|
|
13
13
|
import { useMediaQueries } from '../../hooks/useMediaQueries';
|
|
14
14
|
import { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';
|
|
15
|
+
import { SplitColContext } from './SplitColContext';
|
|
15
16
|
import "./SplitCol.module.css";
|
|
16
17
|
function useTransitionAnimate(animateProp) {
|
|
17
18
|
var _useAdaptivity = useAdaptivity(),
|
|
@@ -43,13 +44,6 @@ function useTransitionAnimate(animateProp) {
|
|
|
43
44
|
}, [animateProp, viewWidth, mediaQueries]);
|
|
44
45
|
return animate;
|
|
45
46
|
}
|
|
46
|
-
export var SplitColContext = /*#__PURE__*/React.createContext({
|
|
47
|
-
colRef: null,
|
|
48
|
-
animate: true
|
|
49
|
-
});
|
|
50
|
-
export var useSplitCol = function useSplitCol() {
|
|
51
|
-
return React.useContext(SplitColContext);
|
|
52
|
-
};
|
|
53
47
|
/**
|
|
54
48
|
* @see https://vkcom.github.io/VKUI/#/SplitCol
|
|
55
49
|
*/
|