@pega/cosmos-react-core 2.0.0-dev.11.0 → 2.0.0-dev.14.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/README.md +3 -3
- package/lib/components/Actions/Actions.js +1 -1
- package/lib/components/Actions/Actions.js.map +1 -1
- package/lib/components/AppShell/AppHeader.d.ts.map +1 -1
- package/lib/components/AppShell/AppHeader.js +1 -6
- package/lib/components/AppShell/AppHeader.js.map +1 -1
- package/lib/components/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +14 -32
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts +3 -2
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +36 -24
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/AppShell/AppShellList.js +10 -13
- package/lib/components/AppShell/AppShellList.js.map +1 -1
- package/lib/components/AppShell/Drawer.js +3 -6
- package/lib/components/AppShell/Drawer.js.map +1 -1
- package/lib/components/AppShell/Operator.js +1 -3
- package/lib/components/AppShell/Operator.js.map +1 -1
- package/lib/components/AppShell/SkipNavigation.js +2 -2
- package/lib/components/AppShell/SkipNavigation.js.map +1 -1
- package/lib/components/Avatar/Avatar.js +3 -4
- package/lib/components/Avatar/Avatar.js.map +1 -1
- package/lib/components/Backdrop/Backdrop.d.ts +1 -1
- package/lib/components/Backdrop/Backdrop.d.ts.map +1 -1
- package/lib/components/Backdrop/Backdrop.js +6 -5
- package/lib/components/Backdrop/Backdrop.js.map +1 -1
- package/lib/components/Badges/Selection.js +7 -8
- package/lib/components/Badges/Selection.js.map +1 -1
- package/lib/components/Banner/Banner.js +2 -6
- package/lib/components/Banner/Banner.js.map +1 -1
- package/lib/components/Boolean/BooleanDisplay.js +1 -2
- package/lib/components/Boolean/BooleanDisplay.js.map +1 -1
- package/lib/components/Breadcrumbs/Breadcrumbs.js +2 -5
- package/lib/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/lib/components/Button/Button.d.ts +5 -0
- package/lib/components/Button/Button.d.ts.map +1 -1
- package/lib/components/Button/Button.js +16 -9
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Card/Card.d.ts.map +1 -1
- package/lib/components/Card/Card.js +2 -1
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/Card/CardContent.d.ts.map +1 -1
- package/lib/components/Card/CardContent.js +4 -3
- package/lib/components/Card/CardContent.js.map +1 -1
- package/lib/components/Card/CardFooter.d.ts.map +1 -1
- package/lib/components/Card/CardFooter.js +3 -2
- package/lib/components/Card/CardFooter.js.map +1 -1
- package/lib/components/Card/CardHeader.d.ts.map +1 -1
- package/lib/components/Card/CardHeader.js +5 -5
- package/lib/components/Card/CardHeader.js.map +1 -1
- package/lib/components/Card/CollapsibleCard.js +2 -6
- package/lib/components/Card/CollapsibleCard.js.map +1 -1
- package/lib/components/ColorPicker/ColorPicker.js +6 -9
- package/lib/components/ColorPicker/ColorPicker.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.d.ts +1 -1
- package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +14 -20
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +11 -19
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js +3 -3
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map +1 -1
- package/lib/components/Configuration/Configuration.js +8 -10
- package/lib/components/Configuration/Configuration.js.map +1 -1
- package/lib/components/Currency/CurrencyInput.js +2 -2
- package/lib/components/Currency/CurrencyInput.js.map +1 -1
- package/lib/components/DateTime/Input/DateInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateInput.js +18 -23
- package/lib/components/DateTime/Input/DateInput.js.map +1 -1
- package/lib/components/DateTime/Input/DateRangeInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateRangeInput.js +10 -16
- package/lib/components/DateTime/Input/DateRangeInput.js.map +1 -1
- package/lib/components/DateTime/Input/DateTimeInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateTimeInput.js +27 -37
- package/lib/components/DateTime/Input/DateTimeInput.js.map +1 -1
- package/lib/components/DateTime/Input/DayOfWeekInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DayOfWeekInput.js +6 -4
- package/lib/components/DateTime/Input/DayOfWeekInput.js.map +1 -1
- package/lib/components/DateTime/Input/Duration/DurationInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/Duration/DurationInput.js +2 -2
- package/lib/components/DateTime/Input/Duration/DurationInput.js.map +1 -1
- package/lib/components/DateTime/Input/Duration/NumberUnit.js +3 -4
- package/lib/components/DateTime/Input/Duration/NumberUnit.js.map +1 -1
- package/lib/components/DateTime/Input/Duration/Time.js +7 -10
- package/lib/components/DateTime/Input/Duration/Time.js.map +1 -1
- package/lib/components/DateTime/Input/MonthInput.js +9 -13
- package/lib/components/DateTime/Input/MonthInput.js.map +1 -1
- package/lib/components/DateTime/Input/PartInput.js +2 -3
- package/lib/components/DateTime/Input/PartInput.js.map +1 -1
- package/lib/components/DateTime/Input/TimeInput.js +16 -23
- package/lib/components/DateTime/Input/TimeInput.js.map +1 -1
- package/lib/components/DateTime/Input/WeekInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/WeekInput.js +16 -20
- package/lib/components/DateTime/Input/WeekInput.js.map +1 -1
- package/lib/components/DateTime/Input/useAutoFocusNextInput.js +4 -7
- package/lib/components/DateTime/Input/useAutoFocusNextInput.js.map +1 -1
- package/lib/components/DateTime/Input/usePickerButton.js +4 -4
- package/lib/components/DateTime/Input/usePickerButton.js.map +1 -1
- package/lib/components/DateTime/Input/utils.d.ts +2 -0
- package/lib/components/DateTime/Input/utils.d.ts.map +1 -1
- package/lib/components/DateTime/Input/utils.js +38 -10
- package/lib/components/DateTime/Input/utils.js.map +1 -1
- package/lib/components/DateTime/Picker/Calendar.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/Calendar.js +24 -30
- package/lib/components/DateTime/Picker/Calendar.js.map +1 -1
- package/lib/components/DateTime/Picker/Calendar.styles.d.ts +2 -2
- package/lib/components/DateTime/Picker/Calendar.styles.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/Calendar.styles.js +2 -2
- package/lib/components/DateTime/Picker/Calendar.styles.js.map +1 -1
- package/lib/components/DateTime/Picker/DatePicker.js +5 -10
- package/lib/components/DateTime/Picker/DatePicker.js.map +1 -1
- package/lib/components/DateTime/Picker/DateRangePicker.js +5 -10
- package/lib/components/DateTime/Picker/DateRangePicker.js.map +1 -1
- package/lib/components/DateTime/Picker/TimePicker.js +5 -6
- package/lib/components/DateTime/Picker/TimePicker.js.map +1 -1
- package/lib/components/DateTime/Picker/Weeks.js +7 -9
- package/lib/components/DateTime/Picker/Weeks.js.map +1 -1
- package/lib/components/Drawer/Drawer.js +5 -5
- package/lib/components/Drawer/Drawer.js.map +1 -1
- package/lib/components/EmojiPicker/EmojiDisplay.d.ts.map +1 -1
- package/lib/components/EmojiPicker/EmojiDisplay.js +1 -1
- package/lib/components/EmojiPicker/EmojiDisplay.js.map +1 -1
- package/lib/components/EmojiPicker/EmojiPicker.js +2 -3
- package/lib/components/EmojiPicker/EmojiPicker.js.map +1 -1
- package/lib/components/EmptyState/EmptyState.d.ts +14 -0
- package/lib/components/EmptyState/EmptyState.d.ts.map +1 -0
- package/lib/components/{NoItems/NoItems.js → EmptyState/EmptyState.js} +6 -7
- package/lib/components/EmptyState/EmptyState.js.map +1 -0
- package/lib/components/EmptyState/index.d.ts +4 -0
- package/lib/components/EmptyState/index.d.ts.map +1 -0
- package/lib/components/EmptyState/index.js +3 -0
- package/lib/components/EmptyState/index.js.map +1 -0
- package/lib/components/ErrorState/ErrorState.d.ts +2 -0
- package/lib/components/ErrorState/ErrorState.d.ts.map +1 -1
- package/lib/components/ErrorState/ErrorState.js +3 -3
- package/lib/components/ErrorState/ErrorState.js.map +1 -1
- package/lib/components/ExpandCollapse/ExpandCollapse.js +4 -4
- package/lib/components/ExpandCollapse/ExpandCollapse.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.js +2 -5
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js +1 -2
- package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
- package/lib/components/FieldValueList/FieldValueList.js +2 -4
- package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
- package/lib/components/File/FileDisplay.d.ts +4 -1
- package/lib/components/File/FileDisplay.d.ts.map +1 -1
- package/lib/components/File/FileDisplay.js.map +1 -1
- package/lib/components/File/FileInput.d.ts +1 -1
- package/lib/components/File/FileInput.d.ts.map +1 -1
- package/lib/components/File/FileInput.js +7 -12
- package/lib/components/File/FileInput.js.map +1 -1
- package/lib/components/File/FileItem.js +2 -3
- package/lib/components/File/FileItem.js.map +1 -1
- package/lib/components/File/FileUploadItem.js +3 -3
- package/lib/components/File/FileUploadItem.js.map +1 -1
- package/lib/components/File/FileVisual.js +2 -4
- package/lib/components/File/FileVisual.js.map +1 -1
- package/lib/components/File/utils.js +1 -2
- package/lib/components/File/utils.js.map +1 -1
- package/lib/components/Flex/Flex.d.ts +2 -2
- package/lib/components/Flex/Flex.d.ts.map +1 -1
- package/lib/components/Flex/Flex.js.map +1 -1
- package/lib/components/Form/Form.js +1 -3
- package/lib/components/Form/Form.js.map +1 -1
- package/lib/components/FormControl/FormControl.d.ts +1 -1
- package/lib/components/FormControl/FormControl.d.ts.map +1 -1
- package/lib/components/FormField/FormField.js +5 -10
- package/lib/components/FormField/FormField.js.map +1 -1
- package/lib/components/Grid/Grid.d.ts +1 -1
- package/lib/components/Grid/Grid.d.ts.map +1 -1
- package/lib/components/Grid/Grid.js +5 -8
- package/lib/components/Grid/Grid.js.map +1 -1
- package/lib/components/Icon/Icon.js +2 -4
- package/lib/components/Icon/Icon.js.map +1 -1
- package/lib/components/Icon/icons/compass-solid.icon.js +1 -2
- package/lib/components/Icon/icons/compass-solid.icon.js.map +1 -1
- package/lib/components/Icon/icons/dataviz-table-with-bars.icon.js +1 -4
- package/lib/components/Icon/icons/dataviz-table-with-bars.icon.js.map +1 -1
- package/lib/components/Icon/icons/dataviz-table-with-cross.icon.js +1 -2
- package/lib/components/Icon/icons/dataviz-table-with-cross.icon.js.map +1 -1
- package/lib/components/Icon/icons/dataviz-waterfall.icon.js +1 -5
- package/lib/components/Icon/icons/dataviz-waterfall.icon.js.map +1 -1
- package/lib/components/Icon/icons/filetype-text.icon.js +1 -4
- package/lib/components/Icon/icons/filetype-text.icon.js.map +1 -1
- package/lib/components/Icon/icons/folder-dollar.icon.js +1 -2
- package/lib/components/Icon/icons/folder-dollar.icon.js.map +1 -1
- package/lib/components/Icon/icons/freeze-column.icon.js +1 -2
- package/lib/components/Icon/icons/freeze-column.icon.js.map +1 -1
- package/lib/components/Icon/icons/galaxy.icon.js +1 -3
- package/lib/components/Icon/icons/galaxy.icon.js.map +1 -1
- package/lib/components/Icon/icons/grad-solid.icon.js +1 -2
- package/lib/components/Icon/icons/grad-solid.icon.js.map +1 -1
- package/lib/components/Icon/icons/grad.icon.js +1 -5
- package/lib/components/Icon/icons/grad.icon.js.map +1 -1
- package/lib/components/Icon/icons/list-number.icon.js +1 -6
- package/lib/components/Icon/icons/list-number.icon.js.map +1 -1
- package/lib/components/Icon/icons/list.icon.js +1 -6
- package/lib/components/Icon/icons/list.icon.js.map +1 -1
- package/lib/components/Icon/icons/pin.icon.js +1 -2
- package/lib/components/Icon/icons/pin.icon.js.map +1 -1
- package/lib/components/Icon/icons/search-solid.icon.js +1 -2
- package/lib/components/Icon/icons/search-solid.icon.js.map +1 -1
- package/lib/components/Icon/icons/tracer.icon.js +1 -2
- package/lib/components/Icon/icons/tracer.icon.js.map +1 -1
- package/lib/components/Icon/icons/tribox-solid.icon.js +1 -3
- package/lib/components/Icon/icons/tribox-solid.icon.js.map +1 -1
- package/lib/components/Icon/icons/tribox.icon.js +1 -3
- package/lib/components/Icon/icons/tribox.icon.js.map +1 -1
- package/lib/components/Input/Input.js +2 -2
- package/lib/components/Input/Input.js.map +1 -1
- package/lib/components/Input/Input.styles.js +2 -2
- package/lib/components/Input/Input.styles.js.map +1 -1
- package/lib/components/Link/Link.js +5 -8
- package/lib/components/Link/Link.js.map +1 -1
- package/lib/components/Location/CurrentLocationButton.js +4 -6
- package/lib/components/Location/CurrentLocationButton.js.map +1 -1
- package/lib/components/Location/LocationDisplay.js +2 -3
- package/lib/components/Location/LocationDisplay.js.map +1 -1
- package/lib/components/Location/LocationInput.js +8 -9
- package/lib/components/Location/LocationInput.js.map +1 -1
- package/lib/components/Location/LocationView.js +8 -13
- package/lib/components/Location/LocationView.js.map +1 -1
- package/lib/components/Location/utils.js +11 -15
- package/lib/components/Location/utils.js.map +1 -1
- package/lib/components/Menu/FlyoutMenuList.d.ts.map +1 -1
- package/lib/components/Menu/FlyoutMenuList.js +11 -14
- package/lib/components/Menu/FlyoutMenuList.js.map +1 -1
- package/lib/components/Menu/Menu.js +18 -20
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/Menu.styles.d.ts +10 -0
- package/lib/components/Menu/Menu.styles.d.ts.map +1 -1
- package/lib/components/Menu/Menu.styles.js +198 -3
- package/lib/components/Menu/Menu.styles.js.map +1 -1
- package/lib/components/Menu/Menu.types.d.ts +17 -8
- package/lib/components/Menu/Menu.types.d.ts.map +1 -1
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/MenuGroup.d.ts +6 -0
- package/lib/components/Menu/MenuGroup.d.ts.map +1 -0
- package/lib/components/Menu/MenuGroup.js +17 -0
- package/lib/components/Menu/MenuGroup.js.map +1 -0
- package/lib/components/Menu/MenuItem.d.ts +0 -3
- package/lib/components/Menu/MenuItem.d.ts.map +1 -1
- package/lib/components/Menu/MenuItem.js +35 -151
- package/lib/components/Menu/MenuItem.js.map +1 -1
- package/lib/components/Menu/MenuList.d.ts.map +1 -1
- package/lib/components/Menu/MenuList.js +19 -23
- package/lib/components/Menu/MenuList.js.map +1 -1
- package/lib/components/Menu/MenuListHeader.d.ts +0 -1
- package/lib/components/Menu/MenuListHeader.d.ts.map +1 -1
- package/lib/components/Menu/MenuListHeader.js +5 -55
- package/lib/components/Menu/MenuListHeader.js.map +1 -1
- package/lib/components/Menu/NavItemsList.d.ts.map +1 -1
- package/lib/components/Menu/NavItemsList.js +2 -3
- package/lib/components/Menu/NavItemsList.js.map +1 -1
- package/lib/components/Menu/helpers.d.ts +13 -12
- package/lib/components/Menu/helpers.d.ts.map +1 -1
- package/lib/components/Menu/helpers.js +40 -36
- package/lib/components/Menu/helpers.js.map +1 -1
- package/lib/components/Menu/index.d.ts +2 -3
- package/lib/components/Menu/index.d.ts.map +1 -1
- package/lib/components/Menu/index.js +1 -2
- package/lib/components/Menu/index.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +6 -10
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/Modal/MinimizedModal.js +10 -13
- package/lib/components/Modal/MinimizedModal.js.map +1 -1
- package/lib/components/Modal/Modal.d.ts +1 -6
- package/lib/components/Modal/Modal.d.ts.map +1 -1
- package/lib/components/Modal/Modal.js +40 -137
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/components/Modal/Modal.styles.d.ts +9 -0
- package/lib/components/Modal/Modal.styles.d.ts.map +1 -0
- package/lib/components/Modal/Modal.styles.js +133 -0
- package/lib/components/Modal/Modal.styles.js.map +1 -0
- package/lib/components/Modal/Modal.types.d.ts +19 -4
- package/lib/components/Modal/Modal.types.d.ts.map +1 -1
- package/lib/components/Modal/Modal.types.js.map +1 -1
- package/lib/components/Modal/ModalManager.js +12 -21
- package/lib/components/Modal/ModalManager.js.map +1 -1
- package/lib/components/MultiStep/MultiStep.js +3 -6
- package/lib/components/MultiStep/MultiStep.js.map +1 -1
- package/lib/components/MultiStep/MultiStep.styles.js +1 -1
- package/lib/components/MultiStep/MultiStep.styles.js.map +1 -1
- package/lib/components/Number/NumberInput.js +13 -19
- package/lib/components/Number/NumberInput.js.map +1 -1
- package/lib/components/Number/NumberInput.styles.d.ts +2 -2
- package/lib/components/Number/NumberInput.styles.d.ts.map +1 -1
- package/lib/components/Number/utils.js +2 -3
- package/lib/components/Number/utils.js.map +1 -1
- package/lib/components/PageTemplates/CategorySubPage.d.ts +1 -1
- package/lib/components/PageTemplates/CategorySubPage.d.ts.map +1 -1
- package/lib/components/PageTemplates/CategorySubPage.js +6 -16
- package/lib/components/PageTemplates/CategorySubPage.js.map +1 -1
- package/lib/components/PageTemplates/DashboardPage.js +3 -8
- package/lib/components/PageTemplates/DashboardPage.js.map +1 -1
- package/lib/components/PageTemplates/PageTemplates.d.ts +2 -0
- package/lib/components/PageTemplates/PageTemplates.d.ts.map +1 -1
- package/lib/components/PageTemplates/PageTemplates.js +22 -32
- package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
- package/lib/components/Pagination/Pagination.js +2 -4
- package/lib/components/Pagination/Pagination.js.map +1 -1
- package/lib/components/Phone/PhoneDisplay.js +1 -2
- package/lib/components/Phone/PhoneDisplay.js.map +1 -1
- package/lib/components/Phone/PhoneInput.d.ts.map +1 -1
- package/lib/components/Phone/PhoneInput.js +12 -10
- package/lib/components/Phone/PhoneInput.js.map +1 -1
- package/lib/components/Phone/utils.js +2 -3
- package/lib/components/Phone/utils.js.map +1 -1
- package/lib/components/Popover/Popover.js +4 -7
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Progress/Bar.js +1 -1
- package/lib/components/Progress/Bar.js.map +1 -1
- package/lib/components/Progress/Ellipsis.js +1 -3
- package/lib/components/Progress/Ellipsis.js.map +1 -1
- package/lib/components/Progress/Progress.js +2 -3
- package/lib/components/Progress/Progress.js.map +1 -1
- package/lib/components/Progress/Ring.js +2 -3
- package/lib/components/Progress/Ring.js.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.js +6 -7
- package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js +7 -6
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
- package/lib/components/Rating/Rating.js +2 -6
- package/lib/components/Rating/Rating.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.js +10 -12
- package/lib/components/SearchInput/SearchInput.js.map +1 -1
- package/lib/components/Select/Select.js +2 -2
- package/lib/components/Select/Select.js.map +1 -1
- package/lib/components/Sentiment/Sentiment.js +1 -2
- package/lib/components/Sentiment/Sentiment.js.map +1 -1
- package/lib/components/Slider/Slider.js +7 -13
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/components/Slider/Slider.styles.d.ts +1 -1
- package/lib/components/Slider/Slider.styles.js +1 -1
- package/lib/components/Slider/Slider.styles.js.map +1 -1
- package/lib/components/Slider/SliderTicks.js +1 -2
- package/lib/components/Slider/SliderTicks.js.map +1 -1
- package/lib/components/Slider/utils.d.ts +0 -10
- package/lib/components/Slider/utils.d.ts.map +1 -1
- package/lib/components/Slider/utils.js +3 -15
- package/lib/components/Slider/utils.js.map +1 -1
- package/lib/components/SummaryItem/SummaryItem.js +1 -4
- package/lib/components/SummaryItem/SummaryItem.js.map +1 -1
- package/lib/components/SummaryList/SummaryList.d.ts +8 -2
- package/lib/components/SummaryList/SummaryList.d.ts.map +1 -1
- package/lib/components/SummaryList/SummaryList.js +9 -10
- package/lib/components/SummaryList/SummaryList.js.map +1 -1
- package/lib/components/SummaryList/ViewAll.d.ts +1 -1
- package/lib/components/SummaryList/ViewAll.d.ts.map +1 -1
- package/lib/components/SummaryList/ViewAll.js +7 -10
- package/lib/components/SummaryList/ViewAll.js.map +1 -1
- package/lib/components/Switch/Switch.d.ts.map +1 -1
- package/lib/components/Switch/Switch.js +39 -30
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Table/Table.js +3 -7
- package/lib/components/Table/Table.js.map +1 -1
- package/lib/components/Tabs/Tab.js +3 -6
- package/lib/components/Tabs/Tab.js.map +1 -1
- package/lib/components/Tabs/TabPanel.d.ts +10 -2
- package/lib/components/Tabs/TabPanel.d.ts.map +1 -1
- package/lib/components/Tabs/TabPanel.js +21 -8
- package/lib/components/Tabs/TabPanel.js.map +1 -1
- package/lib/components/Tabs/Tabs.js +7 -8
- package/lib/components/Tabs/Tabs.js.map +1 -1
- package/lib/components/Text/Text.d.ts +1 -1
- package/lib/components/Text/Text.d.ts.map +1 -1
- package/lib/components/Text/Text.js +1 -1
- package/lib/components/Text/Text.js.map +1 -1
- package/lib/components/TextArea/TextArea.js +3 -3
- package/lib/components/TextArea/TextArea.js.map +1 -1
- package/lib/components/Toaster/Toaster.js +6 -10
- package/lib/components/Toaster/Toaster.js.map +1 -1
- package/lib/components/Tree/StandardTree.d.ts.map +1 -1
- package/lib/components/Tree/StandardTree.js +10 -17
- package/lib/components/Tree/StandardTree.js.map +1 -1
- package/lib/components/Tree/StandardTree.styles.d.ts +1 -1
- package/lib/components/Tree/StandardTree.styles.d.ts.map +1 -1
- package/lib/components/Tree/StandardTree.styles.js +16 -11
- package/lib/components/Tree/StandardTree.styles.js.map +1 -1
- package/lib/components/Tree/Tree.d.ts +6 -0
- package/lib/components/Tree/Tree.d.ts.map +1 -1
- package/lib/components/Tree/Tree.js +3 -3
- package/lib/components/Tree/Tree.js.map +1 -1
- package/lib/components/Tree/helpers.js +4 -7
- package/lib/components/Tree/helpers.js.map +1 -1
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/index.d.ts.map +1 -1
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useActiveDescendant.d.ts.map +1 -1
- package/lib/hooks/useActiveDescendant.js +28 -32
- package/lib/hooks/useActiveDescendant.js.map +1 -1
- package/lib/hooks/useBreakpoint.js +2 -4
- package/lib/hooks/useBreakpoint.js.map +1 -1
- package/lib/hooks/useFocusWithin.js +9 -9
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +57 -1
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/hooks/useLongPress.d.ts +16 -0
- package/lib/hooks/useLongPress.d.ts.map +1 -0
- package/lib/hooks/useLongPress.js +57 -0
- package/lib/hooks/useLongPress.js.map +1 -0
- package/lib/hooks/useOuterEvent.js +1 -1
- package/lib/hooks/useOuterEvent.js.map +1 -1
- package/lib/hooks/useOverride.js +1 -1
- package/lib/hooks/useOverride.js.map +1 -1
- package/lib/hooks/useScrollStick.js +14 -3
- package/lib/hooks/useScrollStick.js.map +1 -1
- package/lib/i18n/default.json +59 -3
- package/lib/i18n/i18n.d.ts +114 -2
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/i18n/index.d.ts +1 -0
- package/lib/i18n/index.d.ts.map +1 -1
- package/lib/i18n/index.js.map +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib/styles/GlobalStyle.d.ts.map +1 -1
- package/lib/styles/GlobalStyle.js +2 -26
- package/lib/styles/GlobalStyle.js.map +1 -1
- package/lib/theme/ThemeMachine.js +7 -1
- package/lib/theme/ThemeMachine.js.map +1 -1
- package/lib/theme/index.d.ts +1 -0
- package/lib/theme/index.d.ts.map +1 -1
- package/lib/theme/index.js +1 -0
- package/lib/theme/index.js.map +1 -1
- package/lib/theme/theme.d.ts +75 -45
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +50 -30
- package/lib/theme/themeOverrides.schema.json +15 -3
- package/lib/theme/themes/buildTheme.json +2 -39
- package/lib/theme/themes/legacyBuildTheme.json +50 -0
- package/lib/types/types.d.ts +4 -1
- package/lib/types/types.d.ts.map +1 -1
- package/lib/types/types.js.map +1 -1
- package/lib/utils/utils.d.ts +24 -0
- package/lib/utils/utils.d.ts.map +1 -1
- package/lib/utils/utils.js +36 -1
- package/lib/utils/utils.js.map +1 -1
- package/package.json +10 -10
- package/lib/components/DateTime/Input/useButtonAriaLabel.d.ts +0 -3
- package/lib/components/DateTime/Input/useButtonAriaLabel.d.ts.map +0 -1
- package/lib/components/DateTime/Input/useButtonAriaLabel.js +0 -33
- package/lib/components/DateTime/Input/useButtonAriaLabel.js.map +0 -1
- package/lib/components/NoItems/NoItems.d.ts +0 -14
- package/lib/components/NoItems/NoItems.d.ts.map +0 -1
- package/lib/components/NoItems/NoItems.js.map +0 -1
- package/lib/components/NoItems/index.d.ts +0 -4
- package/lib/components/NoItems/index.d.ts.map +0 -1
- package/lib/components/NoItems/index.js +0 -3
- package/lib/components/NoItems/index.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useActiveDescendant.js","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, DependencyList, useCallback, useRef } from 'react';\n\nimport { createUID } from '../utils';\n\nexport interface UseActiveDescendantConfig {\n /** DOM element which controls and has active descendants */\n focusEl: HTMLElement | null;\n /** Root scope for descendant options */\n scope: HTMLElement | null;\n /** Custom selector for specific descendant scope in root descendant scope */\n scopeSelector?: string;\n /** Custom selector for descendant options */\n selector?: string;\n /** One-time override for the focused descendant, triggers re-evaluation.\n * Include `clearFocusDescendantEl` for cleanup.\n */\n focusDescendantEl?: HTMLElement | null;\n /** Callback to clear focusDescendantEl after use. */\n clearFocusDescendant?: () => void;\n /** One-time override for focused element on NEXT re-evaluation of active descendants.\n * Include `clearFocusReturn` for cleanup.\n */\n focusReturnEl?: HTMLElement | null;\n /** Callback to clear focusReturnEl after use. */\n clearFocusReturn?: () => void;\n /**\n * Descendant ID used for continuous override of current active descendant,\n * used for external focus control / keyDown bindings (see RTE).\n * NOTE: setting currentDescendantId once effectively disables the keybindings of this hook.\n * If you only need to set the current element once, use focusReturnEl & clearFocusReturn.\n */\n currentDescendantId?: string;\n /** Explicit onClick handler called on keydown 'enter' event */\n onClick?: (currentDescendantEl: HTMLElement) => void;\n /** Prevent scrolling to the active descendant on the initial render.\n * Include `preventInitialScroll` for cleanup.\n */\n preventInitialScroll?: boolean;\n /** Callback to clear preventInitialScroll after use. */\n clearPreventScroll?: () => void;\n /** Boolean to prevent descendant evaluation.\n * @default false\n */\n pauseDescendantEvaluation?: boolean;\n}\n\ntype CurrentDescendant = HTMLElement | undefined;\ntype Descendants = HTMLElement[] | null;\n\nconst useActiveDescendant = (\n {\n focusEl,\n scope,\n scopeSelector,\n selector,\n focusDescendantEl,\n clearFocusDescendant,\n focusReturnEl,\n clearFocusReturn,\n currentDescendantId,\n onClick,\n preventInitialScroll,\n pauseDescendantEvaluation = false,\n clearPreventScroll\n }: UseActiveDescendantConfig,\n dependencyArray: DependencyList = []\n): {\n activeDescendant: CurrentDescendant;\n descendants: Descendants;\n} => {\n const [resetId, setResetId] = useState(0);\n const previousActiveId = useRef('');\n const [focusDescendantElIndex, setFocusDescendantElIndex] = useState<number | null>(null);\n const [currentIndex, setCurrentIndex] = useState<number | null>(null);\n const [descendants, setDescendants] = useState<Descendants>();\n\n const clearThenSetDescendants = useCallback(\n (setVal: NodeListOf<Element> | null) => {\n descendants?.forEach(node => {\n node.setAttribute('data-current', 'false');\n });\n\n setDescendants(\n setVal\n ? Array.from(setVal).filter((item): item is HTMLElement => item instanceof HTMLElement)\n : null\n );\n },\n [descendants]\n );\n\n // ## Update descendants\n useEffect(() => {\n if (!pauseDescendantEvaluation) {\n // 0 second timeout added because descendantScope needs to be up to date before running query after dependencyArray change\n setTimeout(() => {\n let hasScope = scope;\n\n if (hasScope && hasScope instanceof HTMLElement) {\n if (scopeSelector) {\n hasScope = hasScope.querySelector(scopeSelector);\n }\n\n if (!hasScope) {\n clearThenSetDescendants(null);\n return;\n }\n\n if (selector) {\n clearThenSetDescendants(hasScope.querySelectorAll(selector));\n } else {\n clearThenSetDescendants(\n hasScope.querySelectorAll(\n 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])'\n )\n );\n }\n } else {\n clearThenSetDescendants(null);\n }\n }, 0);\n }\n }, [pauseDescendantEvaluation, scope, scopeSelector, selector, focusEl, ...dependencyArray]);\n\n // ## Set IDs and aria-owns\n useEffect(() => {\n const ownedIds: string[] = [];\n setCurrentIndex(0);\n\n if (descendants && descendants.length) {\n descendants.forEach(node => {\n node.id = node.id || createUID();\n ownedIds.push(node.id);\n });\n }\n\n focusEl?.setAttribute('aria-owns', ownedIds.join(' '));\n\n return () => {\n focusEl?.removeAttribute('aria-owns');\n };\n }, [focusEl, descendants]);\n\n // ## Bind focus el keyDown\n useEffect(() => {\n const onKeyDown = (e: KeyboardEvent) => {\n if (descendants && descendants.length) {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n // Focus next or first\n clearFocusReturn?.();\n clearPreventScroll?.();\n if (currentIndex !== null && currentIndex + 1 < descendants.length) {\n setCurrentIndex(currentIndex + 1);\n } else {\n setCurrentIndex(0);\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n // Focus previous or last\n clearFocusReturn?.();\n clearPreventScroll?.();\n if (currentIndex !== null && currentIndex - 1 > -1) {\n setCurrentIndex(currentIndex - 1);\n } else {\n setCurrentIndex(descendants.length - 1);\n }\n break;\n case 'Enter':\n // Click focused item\n if (descendants && descendants.length) {\n if (currentIndex !== null) {\n if (onClick) {\n onClick(descendants[currentIndex]);\n break;\n }\n\n const nodeName = descendants[currentIndex].nodeName.toLowerCase();\n if (nodeName === 'input' || nodeName === 'button' || nodeName === 'a') {\n descendants[currentIndex].click();\n } else {\n descendants[currentIndex].querySelector<HTMLElement>('button, a, input')?.click();\n }\n }\n }\n break;\n default:\n break;\n }\n }\n };\n\n // Do not rebind once / if `currentDescendantId` control is defined\n if (focusEl && descendants?.length && !currentDescendantId) {\n focusEl.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n focusEl?.removeEventListener('keydown', onKeyDown);\n };\n }, [focusEl, currentIndex, descendants]);\n\n // ## Handle independent control update\n useEffect(() => {\n if (descendants && currentDescendantId) {\n descendants.forEach((node, index) => {\n if (node.id === currentDescendantId) {\n setCurrentIndex(index);\n }\n });\n }\n }, [currentDescendantId, descendants]);\n\n // ## Set and scroll to current descendant\n useEffect(() => {\n const nextIndex = focusDescendantElIndex || currentIndex;\n const focusReturnId = focusReturnEl?.id;\n let focusReturnIndex;\n const focusDescendantElId = focusDescendantEl?.id;\n let focusDescendantIndex;\n let foundFocusDescendantEl = false;\n\n if (descendants && descendants.length) {\n // clear previous & catch focusReturn / focusDescendantEl index\n descendants.forEach((node, index) => {\n if (focusDescendantElIndex === null && node.id === focusDescendantElId) {\n focusDescendantIndex = index;\n foundFocusDescendantEl = true;\n setFocusDescendantElIndex(index);\n }\n if (node.id === focusReturnId) {\n focusReturnIndex = index;\n }\n node.setAttribute('data-current', 'false');\n });\n\n // early return for focusReturn / focusDescendantEl\n if (focusReturnIndex && focusReturnIndex !== currentIndex) {\n setCurrentIndex(focusReturnIndex);\n clearFocusReturn?.();\n return;\n }\n if (foundFocusDescendantEl && focusDescendantIndex !== undefined) {\n // hard reset to continue focusDescendantEl process even if it is the active descendant\n setResetId(Math.random());\n setCurrentIndex(focusDescendantIndex);\n return;\n }\n\n // set new\n if (nextIndex !== null && descendants[nextIndex]) {\n const itemEl = descendants[nextIndex!];\n itemEl.setAttribute('data-current', 'true');\n focusEl?.setAttribute('aria-activedescendant', itemEl.id);\n\n // scroll to element\n if (itemEl.id !== previousActiveId.current && !preventInitialScroll) {\n const scrollTo: (this: Element, arg: boolean) => void =\n Element.prototype.scrollIntoViewIfNeeded ?? Element.prototype.scrollIntoView;\n\n scrollTo?.call(itemEl, false);\n }\n\n // focusDescendantEl cleanup\n if (focusDescendantElIndex !== null) {\n setFocusDescendantElIndex(null);\n clearFocusDescendant?.();\n }\n\n previousActiveId.current = itemEl.id;\n }\n }\n\n return () => {\n focusEl?.removeAttribute('aria-activedescendant');\n };\n }, [descendants, currentIndex, focusDescendantEl, focusEl, resetId]);\n\n return {\n activeDescendant: currentIndex !== null && descendants ? descendants[currentIndex] : undefined,\n descendants: descendants || null\n };\n};\n\nexport default useActiveDescendant;\n"]}
|
|
1
|
+
{"version":3,"file":"useActiveDescendant.js","sourceRoot":"","sources":["../../src/hooks/useActiveDescendant.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, DependencyList, useCallback, useRef } from 'react';\n\nimport { createUID } from '../utils';\n\nexport interface UseActiveDescendantConfig {\n /** DOM element which controls and has active descendants */\n focusEl: HTMLElement | null;\n /** Root scope for descendant options */\n scope: HTMLElement | null;\n /** Custom selector for specific descendant scope in root descendant scope */\n scopeSelector?: string;\n /** Custom selector for descendant options */\n selector?: string;\n /** One-time override for the focused descendant, triggers re-evaluation.\n * Include `clearFocusDescendantEl` for cleanup.\n */\n focusDescendantEl?: HTMLElement | null;\n /** Callback to clear focusDescendantEl after use. */\n clearFocusDescendant?: () => void;\n /** One-time override for focused element on NEXT re-evaluation of active descendants.\n * Include `clearFocusReturn` for cleanup.\n */\n focusReturnEl?: HTMLElement | null;\n /** Callback to clear focusReturnEl after use. */\n clearFocusReturn?: () => void;\n /**\n * Descendant ID used for continuous override of current active descendant,\n * used for external focus control / keyDown bindings (see RTE).\n * NOTE: setting currentDescendantId once effectively disables the keybindings of this hook.\n * If you only need to set the current element once, use focusReturnEl & clearFocusReturn.\n */\n currentDescendantId?: string;\n /** Explicit onClick handler called on keydown 'enter' event */\n onClick?: (currentDescendantEl: HTMLElement) => void;\n /** Prevent scrolling to the active descendant on the initial render.\n * Include `preventInitialScroll` for cleanup.\n */\n preventInitialScroll?: boolean;\n /** Callback to clear preventInitialScroll after use. */\n clearPreventScroll?: () => void;\n /** Boolean to prevent descendant evaluation.\n * @default false\n */\n pauseDescendantEvaluation?: boolean;\n}\n\ntype CurrentDescendant = HTMLElement | undefined;\ntype Descendants = HTMLElement[] | null;\n\nconst useActiveDescendant = (\n {\n focusEl,\n scope,\n scopeSelector,\n selector,\n focusDescendantEl,\n clearFocusDescendant,\n focusReturnEl,\n clearFocusReturn,\n currentDescendantId,\n onClick,\n preventInitialScroll,\n pauseDescendantEvaluation = false,\n clearPreventScroll\n }: UseActiveDescendantConfig,\n dependencyArray: DependencyList = []\n): {\n activeDescendant: CurrentDescendant;\n descendants: Descendants;\n} => {\n const [resetId, setResetId] = useState(0);\n const previousActiveId = useRef('');\n const [focusDescendantElIndex, setFocusDescendantElIndex] = useState<number | null>(null);\n const [currentIndex, setCurrentIndex] = useState<number | null>(null);\n const [descendants, setDescendants] = useState<Descendants>();\n\n const clearThenSetDescendants = useCallback(\n (setVal: NodeListOf<Element> | null) => {\n descendants?.forEach(node => {\n node.setAttribute('data-current', 'false');\n });\n\n setDescendants(\n setVal\n ? Array.from(setVal).filter((item): item is HTMLElement => item instanceof HTMLElement)\n : null\n );\n },\n [descendants]\n );\n\n // ## Update descendants\n useEffect(() => {\n if (!pauseDescendantEvaluation) {\n // 0 second timeout added because descendantScope needs to be up to date before running query after dependencyArray change\n setTimeout(() => {\n let hasScope = scope;\n\n if (hasScope && hasScope instanceof HTMLElement) {\n if (scopeSelector) {\n hasScope = hasScope.querySelector(scopeSelector);\n }\n\n if (!hasScope) {\n clearThenSetDescendants(null);\n return;\n }\n\n if (selector) {\n clearThenSetDescendants(hasScope.querySelectorAll(selector));\n } else {\n clearThenSetDescendants(\n hasScope.querySelectorAll(\n 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])'\n )\n );\n }\n } else {\n clearThenSetDescendants(null);\n }\n }, 0);\n }\n }, [pauseDescendantEvaluation, scope, scopeSelector, selector, focusEl, ...dependencyArray]);\n\n // ## Set IDs and aria-owns\n useEffect(() => {\n const ownedIds: string[] = [];\n setCurrentIndex(0);\n\n if (descendants && descendants.length) {\n descendants.forEach(node => {\n node.id = node.id || createUID();\n ownedIds.push(node.id);\n });\n }\n\n focusEl?.setAttribute('aria-owns', ownedIds.join(' '));\n\n return () => {\n focusEl?.removeAttribute('aria-owns');\n };\n }, [focusEl, descendants]);\n\n // ## Bind focus el keyDown\n useEffect(() => {\n const onKeyDown = (e: KeyboardEvent) => {\n if (descendants && descendants.length) {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n // Focus next or first\n clearFocusReturn?.();\n clearPreventScroll?.();\n if (currentIndex !== null && currentIndex + 1 < descendants.length) {\n setCurrentIndex(currentIndex + 1);\n } else {\n setCurrentIndex(0);\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n // Focus previous or last\n clearFocusReturn?.();\n clearPreventScroll?.();\n if (currentIndex !== null && currentIndex - 1 > -1) {\n setCurrentIndex(currentIndex - 1);\n } else {\n setCurrentIndex(descendants.length - 1);\n }\n break;\n case 'Enter':\n // Click focused item\n if (descendants && descendants.length && currentIndex !== null) {\n if (onClick) {\n onClick(descendants[currentIndex]);\n break;\n }\n\n const nodeName = descendants[currentIndex].nodeName.toLowerCase();\n if (nodeName === 'input' || nodeName === 'button' || nodeName === 'a') {\n descendants[currentIndex].click();\n } else {\n descendants[currentIndex].querySelector<HTMLElement>('button, a, input')?.click();\n }\n }\n break;\n default:\n break;\n }\n }\n };\n\n // Do not rebind once / if `currentDescendantId` control is defined\n if (focusEl && descendants?.length && !currentDescendantId) {\n focusEl.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n focusEl?.removeEventListener('keydown', onKeyDown);\n };\n }, [focusEl, currentIndex, descendants]);\n\n // ## Handle independent control update\n useEffect(() => {\n if (descendants && currentDescendantId) {\n descendants.forEach((node, index) => {\n if (node.id === currentDescendantId) {\n setCurrentIndex(index);\n }\n });\n }\n }, [currentDescendantId, descendants]);\n\n // ## Set and scroll to current descendant\n useEffect(() => {\n const nextIndex = focusDescendantElIndex || currentIndex;\n const focusReturnId = focusReturnEl?.id;\n let focusReturnIndex;\n const focusDescendantElId = focusDescendantEl?.id;\n let focusDescendantIndex;\n let foundFocusDescendantEl = false;\n\n if (descendants && descendants.length) {\n // clear previous & catch focusReturn / focusDescendantEl index\n descendants.forEach((node, index) => {\n if (focusDescendantElIndex === null && node.id === focusDescendantElId) {\n focusDescendantIndex = index;\n foundFocusDescendantEl = true;\n setFocusDescendantElIndex(index);\n }\n if (node.id === focusReturnId) {\n focusReturnIndex = index;\n }\n node.setAttribute('data-current', 'false');\n });\n\n // early return for focusReturn / focusDescendantEl\n if (focusReturnIndex && focusReturnIndex !== currentIndex) {\n setCurrentIndex(focusReturnIndex);\n clearFocusReturn?.();\n return;\n }\n if (foundFocusDescendantEl && focusDescendantIndex !== undefined) {\n // hard reset to continue focusDescendantEl process even if it is the active descendant\n setResetId(Math.random());\n setCurrentIndex(focusDescendantIndex);\n return;\n }\n\n // set new\n if (nextIndex !== null && descendants[nextIndex]) {\n const itemEl = descendants[nextIndex!];\n itemEl.setAttribute('data-current', 'true');\n focusEl?.setAttribute('aria-activedescendant', itemEl.id);\n\n // scroll to element\n if (itemEl.id !== previousActiveId.current && !preventInitialScroll) {\n const scrollTo: (this: Element, arg: boolean) => void =\n Element.prototype.scrollIntoViewIfNeeded ?? Element.prototype.scrollIntoView;\n\n scrollTo?.call(itemEl, false);\n }\n\n // focusDescendantEl cleanup\n if (focusDescendantElIndex !== null) {\n setFocusDescendantElIndex(null);\n clearFocusDescendant?.();\n }\n\n previousActiveId.current = itemEl.id;\n }\n }\n\n return () => {\n focusEl?.removeAttribute('aria-activedescendant');\n };\n }, [descendants, currentIndex, focusDescendantEl, focusEl, resetId]);\n\n return {\n activeDescendant: currentIndex !== null && descendants ? descendants[currentIndex] : undefined,\n descendants: descendants || null\n };\n};\n\nexport default useActiveDescendant;\n"]}
|
|
@@ -10,7 +10,6 @@ import useTheme from './useTheme';
|
|
|
10
10
|
const useBreakpoint = (breakpoint, options = {
|
|
11
11
|
defaultValue: false
|
|
12
12
|
}) => {
|
|
13
|
-
var _a;
|
|
14
13
|
const { base: { breakpoints } } = useTheme();
|
|
15
14
|
const breakpointVal = breakpoints[breakpoint];
|
|
16
15
|
const [matches, setMatches] = useState(windowIsAvailable
|
|
@@ -24,8 +23,7 @@ const useBreakpoint = (breakpoint, options = {
|
|
|
24
23
|
if (options.breakpointRef && options.breakpointRef.current) {
|
|
25
24
|
const observer = new ResizeObserver(entries => {
|
|
26
25
|
const matchesBreakpoint = entries.some(({ target, contentRect }) => {
|
|
27
|
-
|
|
28
|
-
if (target !== ((_a = options.breakpointRef) === null || _a === void 0 ? void 0 : _a.current))
|
|
26
|
+
if (target !== options.breakpointRef?.current)
|
|
29
27
|
return;
|
|
30
28
|
return contentRect.width >= parseFloat(breakpointVal) * 16;
|
|
31
29
|
});
|
|
@@ -61,7 +59,7 @@ const useBreakpoint = (breakpoint, options = {
|
|
|
61
59
|
}
|
|
62
60
|
};
|
|
63
61
|
}
|
|
64
|
-
}, [
|
|
62
|
+
}, [options.breakpointRef?.current]);
|
|
65
63
|
return matches;
|
|
66
64
|
};
|
|
67
65
|
export default useBreakpoint;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CACpB,UAA4C,EAC5C,UAAsF;IACpF,YAAY,EAAE,KAAK;CACpB,EACD,EAAE
|
|
1
|
+
{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useLayoutEffect, useCallback, RefObject } from 'react';\n\nimport { windowIsAvailable, debounce } from '../utils';\n\nimport useTheme from './useTheme';\n\n/**\n * @example const breakpointActive = useBreakpoint(breakpoint);\n * @param breakpoint The string indicator for the breakpoint that should be checked for validity.\n * @param options\n * @returns breakpointActive:: A boolean indicating if the given breakpoint is active or not. If false, the breakpoint is too big for the screen size.\n */\nconst useBreakpoint = (\n breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl',\n options: { defaultValue?: boolean; breakpointRef?: RefObject<Element> | undefined } = {\n defaultValue: false\n }\n) => {\n const {\n base: { breakpoints }\n } = useTheme();\n const breakpointVal = breakpoints[breakpoint];\n const [matches, setMatches] = useState(\n windowIsAvailable\n ? window.matchMedia(`(min-width: ${breakpointVal})`).matches\n : !!options.defaultValue\n );\n\n const onResize = useCallback((e: MediaQueryListEvent) => {\n setMatches(e.matches);\n }, []);\n\n useLayoutEffect(() => {\n // Breakpoint handling for contained elements\n if (options.breakpointRef && options.breakpointRef.current) {\n const observer = new ResizeObserver(entries => {\n const matchesBreakpoint = entries.some(({ target, contentRect }) => {\n if (target !== options.breakpointRef?.current) return;\n\n return contentRect.width >= parseFloat(breakpointVal) * 16;\n });\n\n setMatches(matchesBreakpoint);\n });\n\n observer.observe(options.breakpointRef.current);\n\n return () => {\n observer.disconnect();\n };\n }\n // Breakpoint handling for viewport\n if (windowIsAvailable) {\n const mediaMatch = window.matchMedia(`(min-width: ${breakpointVal})`);\n const mediaMatchAvailable = 'addEventListener' in mediaMatch;\n const resizeHandler = debounce(() => {\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }, 100);\n\n // Need to check useMatchMedia in order to support Enzyme testing\n if (mediaMatchAvailable) {\n mediaMatch.addEventListener('change', onResize);\n setMatches(mediaMatch.matches);\n } else {\n window.addEventListener('resize', resizeHandler);\n setMatches(window.innerWidth >= parseInt(breakpointVal, 10));\n }\n\n return () => {\n // Need to check useMatchMedia in order to support Enzyme testing\n if (mediaMatchAvailable) mediaMatch.removeEventListener('change', onResize);\n else {\n window.removeEventListener('resize', resizeHandler);\n }\n };\n }\n }, [options.breakpointRef?.current]);\n\n return matches;\n};\n\nexport default useBreakpoint;\n"]}
|
|
@@ -16,7 +16,7 @@ const useFocusWithin = (els, onFocusChange) => {
|
|
|
16
16
|
return;
|
|
17
17
|
const elements = normalizeElements(elsRef.current);
|
|
18
18
|
// changing focus to another relevant child doesn't count
|
|
19
|
-
const focusedEl = elements.find(el => el
|
|
19
|
+
const focusedEl = elements.find(el => el?.contains(e.relatedTarget));
|
|
20
20
|
if (focusedEl) {
|
|
21
21
|
// ... just update the currently focused item
|
|
22
22
|
focusedElRef.current = focusedEl;
|
|
@@ -24,10 +24,10 @@ const useFocusWithin = (els, onFocusChange) => {
|
|
|
24
24
|
}
|
|
25
25
|
const timerId = setTimeout(() => {
|
|
26
26
|
if (!elements.some(el => {
|
|
27
|
-
return el
|
|
27
|
+
return el?.contains(document.activeElement);
|
|
28
28
|
})) {
|
|
29
29
|
setFocus(false);
|
|
30
|
-
onFocusChange
|
|
30
|
+
onFocusChange?.(false, focusedElRef.current);
|
|
31
31
|
focusedElRef.current = null;
|
|
32
32
|
}
|
|
33
33
|
});
|
|
@@ -40,27 +40,27 @@ const useFocusWithin = (els, onFocusChange) => {
|
|
|
40
40
|
if (!hasFocus) {
|
|
41
41
|
setFocus(true);
|
|
42
42
|
const targetEl = e.currentTarget;
|
|
43
|
-
onFocusChange
|
|
43
|
+
onFocusChange?.(true, targetEl);
|
|
44
44
|
focusedElRef.current = targetEl;
|
|
45
45
|
}
|
|
46
46
|
}, [hasFocus, onFocusChange]);
|
|
47
47
|
useOuterEvent('mouseup', els, useCallback(() => {
|
|
48
48
|
if (hasFocus) {
|
|
49
49
|
setFocus(false);
|
|
50
|
-
onFocusChange
|
|
50
|
+
onFocusChange?.(false, focusedElRef.current);
|
|
51
51
|
focusedElRef.current = null;
|
|
52
52
|
}
|
|
53
53
|
}, [onFocusChange, hasFocus]));
|
|
54
54
|
useEffect(() => {
|
|
55
55
|
const elements = normalizeElements(els);
|
|
56
56
|
elements.forEach((el) => {
|
|
57
|
-
el
|
|
58
|
-
el
|
|
57
|
+
el?.addEventListener('focusin', onFocus);
|
|
58
|
+
el?.addEventListener('focusout', onBlur);
|
|
59
59
|
});
|
|
60
60
|
return () => {
|
|
61
61
|
elements.forEach((el) => {
|
|
62
|
-
el
|
|
63
|
-
el
|
|
62
|
+
el?.removeEventListener('focusin', onFocus);
|
|
63
|
+
el?.removeEventListener('focusout', onBlur);
|
|
64
64
|
});
|
|
65
65
|
};
|
|
66
66
|
}, [els, onFocus, onBlur]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,cAAc,GAAG,CACrB,GAAuC,EACvC,aAA+D,EACtD,EAAE;IACX,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,YAAY,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IAE5C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC;IAErB,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,CAAQ,EAAE,EAAE;QACX,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACnD,yDAAyD;QACzD,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"useFocusWithin.js","sourceRoot":"","sources":["../../src/hooks/useFocusWithin.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, RefObject, useCallback, useRef } from 'react';\n\nimport { normalizeElements } from '../utils';\n\nimport useOuterEvent from './useOuterEvent';\n\n/** Hook for properly handling focus state of children components.\n * @example const hasFocus = useFocusWithin([containerRef, ...], (isFocused, element) => { doSomething; });\n * @param onFocusChange Callback function that is invoked with the current focus state and the current element when any child elements takes focus or all of them lose focus.\n * @returns * hasFocus:: A boolean indicating if the ref element has focus or not.\n */\nconst useFocusWithin = <T extends Element = Element>(\n els: (T | null | RefObject<T | null>)[],\n onFocusChange?: (isFocused: boolean, element: T | null) => void\n): boolean => {\n const [hasFocus, setFocus] = useState(false);\n const focusedElRef = useRef<T | null>(null);\n\n const elsRef = useRef(els);\n elsRef.current = els;\n\n const onBlur = useCallback(\n (e: Event) => {\n if (!hasFocus) return;\n\n const elements = normalizeElements(elsRef.current);\n // changing focus to another relevant child doesn't count\n const focusedEl = elements.find(el => el?.contains((e as FocusEvent).relatedTarget as Node));\n if (focusedEl) {\n // ... just update the currently focused item\n focusedElRef.current = focusedEl;\n return;\n }\n const timerId = setTimeout(() => {\n if (\n !elements.some(el => {\n return el?.contains(document.activeElement);\n })\n ) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n });\n\n return () => {\n if (timerId) clearTimeout(timerId);\n };\n },\n [hasFocus, onFocusChange]\n );\n\n const onFocus = useCallback(\n (e: Event) => {\n if (!hasFocus) {\n setFocus(true);\n const targetEl = (e as FocusEvent).currentTarget as T;\n onFocusChange?.(true, targetEl);\n focusedElRef.current = targetEl;\n }\n },\n [hasFocus, onFocusChange]\n );\n\n useOuterEvent(\n 'mouseup',\n els,\n useCallback(() => {\n if (hasFocus) {\n setFocus(false);\n onFocusChange?.(false, focusedElRef.current);\n focusedElRef.current = null;\n }\n }, [onFocusChange, hasFocus])\n );\n\n useEffect(() => {\n const elements = normalizeElements(els);\n\n elements.forEach((el: T | null) => {\n el?.addEventListener('focusin', onFocus);\n el?.addEventListener('focusout', onBlur);\n });\n return () => {\n elements.forEach((el: T | null) => {\n el?.removeEventListener('focusin', onFocus);\n el?.removeEventListener('focusout', onBlur);\n });\n };\n }, [els, onFocus, onBlur]);\n\n return hasFocus;\n};\n\nexport default useFocusWithin;\n"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -167,7 +167,6 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
167
167
|
allow_location_permissions_text: string;
|
|
168
168
|
use_input_value: string;
|
|
169
169
|
selected_date_a11y: string;
|
|
170
|
-
selected_week_a11y: string;
|
|
171
170
|
open_calendar_button_a11y: string;
|
|
172
171
|
close_calendar_button_a11y: string;
|
|
173
172
|
open_time_button_a11y: string;
|
|
@@ -188,9 +187,11 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
188
187
|
file_upload_text_multiple: string;
|
|
189
188
|
add: string;
|
|
190
189
|
cancel: string;
|
|
190
|
+
try_again: string;
|
|
191
191
|
update: string;
|
|
192
192
|
submit: string;
|
|
193
193
|
edit: string;
|
|
194
|
+
edit_noun: string;
|
|
194
195
|
edited: string;
|
|
195
196
|
preview: string;
|
|
196
197
|
delete: string;
|
|
@@ -199,6 +200,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
199
200
|
close_noun: string;
|
|
200
201
|
activate: string;
|
|
201
202
|
uploading: string;
|
|
203
|
+
loading: string;
|
|
202
204
|
view_all: string;
|
|
203
205
|
view_all_noun: string;
|
|
204
206
|
view_less: string;
|
|
@@ -227,6 +229,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
227
229
|
attachment: string;
|
|
228
230
|
attach: string;
|
|
229
231
|
count_results: string;
|
|
232
|
+
count_matches: string;
|
|
230
233
|
empty_search: string;
|
|
231
234
|
new_messages: string;
|
|
232
235
|
earlier_transcripts: string;
|
|
@@ -296,6 +299,11 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
296
299
|
task_manager_add_task: string;
|
|
297
300
|
task_manager_wrap_up: string;
|
|
298
301
|
task_manager_tasks: string;
|
|
302
|
+
add_tasks: string;
|
|
303
|
+
selected_tasks: string;
|
|
304
|
+
no_selected_tasks: string;
|
|
305
|
+
task_picker_close: string;
|
|
306
|
+
task_manager_overflow_menu: string;
|
|
299
307
|
go: string;
|
|
300
308
|
on: string;
|
|
301
309
|
go_label_a11y: string;
|
|
@@ -308,6 +316,9 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
308
316
|
task_manager_launch_task: string;
|
|
309
317
|
task_manager_search_results_empty_text: string;
|
|
310
318
|
task_manager_picker_add_label: string;
|
|
319
|
+
task_manager_delete_task: string;
|
|
320
|
+
search_tasks: string;
|
|
321
|
+
feed_new_post: string;
|
|
311
322
|
feed_cancel_conversation: string;
|
|
312
323
|
feed_context: string;
|
|
313
324
|
feed_liked_by: string;
|
|
@@ -331,6 +342,51 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
331
342
|
tags: string;
|
|
332
343
|
navigation: string;
|
|
333
344
|
dev_mode: string;
|
|
345
|
+
call_panel_heading: string;
|
|
346
|
+
call_panel_make_new_call: string;
|
|
347
|
+
call_panel_agent_status: string;
|
|
348
|
+
call_panel_pause_call_menu_item: string;
|
|
349
|
+
call_panel_resume_call_menu_item: string;
|
|
350
|
+
call_panel_mute_mic_menu_item: string;
|
|
351
|
+
call_panel_unmute_mic_menu_item: string;
|
|
352
|
+
call_panel_call_on_hold: string;
|
|
353
|
+
call_panel_consult_call_menu_item: string;
|
|
354
|
+
call_panel_transfer_call_menu_item: string;
|
|
355
|
+
call_panel_send_dtmf_menu_item: string;
|
|
356
|
+
call_panel_conference_call_menu_item: string;
|
|
357
|
+
call_panel_hangup_call_menu_item: string;
|
|
358
|
+
call_panel_contacts_add_to_favorites: string;
|
|
359
|
+
call_panel_contacts_remove_from_favorites: string;
|
|
360
|
+
call_panel_contacts_call_button_label: string;
|
|
361
|
+
call_panel_contacts_list_heading: string;
|
|
362
|
+
call_panel_contacts_favorites_heading: string;
|
|
363
|
+
call_panel_contacts_dial_pad_heading: string;
|
|
364
|
+
call_panel_new_call_heading: string;
|
|
365
|
+
call_panel_consult_with_heading: string;
|
|
366
|
+
call_panel_conference_heading: string;
|
|
367
|
+
call_panel_transfer_button_label: string;
|
|
368
|
+
call_panel_transfer_call_heading: string;
|
|
369
|
+
call_panel_transfer_reason_label: string;
|
|
370
|
+
call_panel_transfer_to_label: string;
|
|
371
|
+
call_panel_transfer_comments_label: string;
|
|
372
|
+
call_panel_transfer_call_option_label: string;
|
|
373
|
+
call_panel_transfer_call_only_option: string;
|
|
374
|
+
call_panel_transfer_call_and_interaction_option: string;
|
|
375
|
+
call_panel_merge_call_menu_item: string;
|
|
376
|
+
call_panel_send_dtmf_heading: string;
|
|
377
|
+
call_panel_send_dtmf_input_label: string;
|
|
378
|
+
dial_pad_keyboard: string;
|
|
379
|
+
dial_pad_phone_number_input_label: string;
|
|
380
|
+
dial_pad_call_button_label: string;
|
|
381
|
+
stakeholder: string;
|
|
382
|
+
stakeholders: string;
|
|
383
|
+
add_noun: string;
|
|
384
|
+
remove: string;
|
|
385
|
+
remove_noun: string;
|
|
386
|
+
role: string;
|
|
387
|
+
parallel: string;
|
|
388
|
+
stage: string;
|
|
389
|
+
alternateStage: string;
|
|
334
390
|
}>>;
|
|
335
391
|
export default useI18n;
|
|
336
392
|
//# sourceMappingURL=useI18n.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
interface Options {
|
|
2
|
+
key?: string;
|
|
3
|
+
delay?: number;
|
|
4
|
+
shouldPreventDefault?: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare const useLongPress: <T>(onLongPress: () => void, onClick?: (() => void) | undefined, { key, shouldPreventDefault, delay }?: Options) => {
|
|
7
|
+
onMouseDown: (e: import("react").MouseEvent<T, MouseEvent>) => void;
|
|
8
|
+
onTouchStart: (e: import("react").TouchEvent<T>) => void;
|
|
9
|
+
onKeyDown: (e: import("react").KeyboardEvent<T>) => void;
|
|
10
|
+
onMouseUp: () => void;
|
|
11
|
+
onKeyUp: (e: import("react").KeyboardEvent<T>) => void;
|
|
12
|
+
onMouseLeave: () => void;
|
|
13
|
+
onTouchEnd: () => void;
|
|
14
|
+
};
|
|
15
|
+
export default useLongPress;
|
|
16
|
+
//# sourceMappingURL=useLongPress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLongPress.d.ts","sourceRoot":"","sources":["../../src/hooks/useLongPress.ts"],"names":[],"mappings":"AAcA,UAAU,OAAO;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,QAAA,MAAM,YAAY,mBACH,MAAM,IAAI,mBACP,IAAI,sDACyC,OAAO;;;;;;;;CAmDrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { useCallback, useRef, useState } from 'react';
|
|
2
|
+
const isTouchEvent = (e) => {
|
|
3
|
+
return 'touches' in e;
|
|
4
|
+
};
|
|
5
|
+
const preventDefault = (e) => {
|
|
6
|
+
if (!isTouchEvent(e))
|
|
7
|
+
return;
|
|
8
|
+
if (e.touches.length < 2 && e.preventDefault) {
|
|
9
|
+
e.preventDefault();
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
const useLongPress = (onLongPress, onClick, { key = 'Enter', shouldPreventDefault = true, delay = 500 } = {}) => {
|
|
13
|
+
const [longPressTriggered, setLongPressTriggered] = useState(false);
|
|
14
|
+
const timeout = useRef();
|
|
15
|
+
const target = useRef();
|
|
16
|
+
const start = useCallback((event) => {
|
|
17
|
+
if (shouldPreventDefault && event.target) {
|
|
18
|
+
event.target.addEventListener('touchend', preventDefault, {
|
|
19
|
+
passive: false
|
|
20
|
+
});
|
|
21
|
+
target.current = event.target;
|
|
22
|
+
}
|
|
23
|
+
timeout.current = setTimeout(() => {
|
|
24
|
+
onLongPress();
|
|
25
|
+
setLongPressTriggered(true);
|
|
26
|
+
}, delay);
|
|
27
|
+
}, [onLongPress, delay, shouldPreventDefault]);
|
|
28
|
+
const clear = useCallback((shouldTriggerClick = true) => {
|
|
29
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
30
|
+
timeout.current && clearTimeout(timeout.current);
|
|
31
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
32
|
+
shouldTriggerClick && !longPressTriggered && onClick?.();
|
|
33
|
+
setLongPressTriggered(false);
|
|
34
|
+
if (shouldPreventDefault && target.current) {
|
|
35
|
+
target.current.removeEventListener('touchend', preventDefault);
|
|
36
|
+
}
|
|
37
|
+
}, [shouldPreventDefault, onClick, longPressTriggered]);
|
|
38
|
+
return {
|
|
39
|
+
onMouseDown: (e) => start(e),
|
|
40
|
+
onTouchStart: (e) => start(e),
|
|
41
|
+
onKeyDown: (e) => {
|
|
42
|
+
if (e.repeat || e.key !== key)
|
|
43
|
+
return;
|
|
44
|
+
start(e);
|
|
45
|
+
},
|
|
46
|
+
onMouseUp: () => clear(),
|
|
47
|
+
onKeyUp: (e) => {
|
|
48
|
+
if (e.repeat || e.key !== key)
|
|
49
|
+
return;
|
|
50
|
+
clear();
|
|
51
|
+
},
|
|
52
|
+
onMouseLeave: () => clear(false),
|
|
53
|
+
onTouchEnd: () => clear()
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
export default useLongPress;
|
|
57
|
+
//# sourceMappingURL=useLongPress.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLongPress.js","sourceRoot":"","sources":["../../src/hooks/useLongPress.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nconst isTouchEvent = (e: Event): e is TouchEvent => {\n return 'touches' in e;\n};\n\nconst preventDefault = (e: Event) => {\n if (!isTouchEvent(e)) return;\n\n if (e.touches.length < 2 && e.preventDefault) {\n e.preventDefault();\n }\n};\n\ninterface Options {\n key?: string;\n delay?: number;\n shouldPreventDefault?: boolean;\n}\n\nconst useLongPress = <T>(\n onLongPress: () => void,\n onClick?: () => void,\n { key = 'Enter', shouldPreventDefault = true, delay = 500 }: Options = {}\n) => {\n const [longPressTriggered, setLongPressTriggered] = useState(false);\n const timeout = useRef<ReturnType<typeof setTimeout>>();\n const target = useRef<EventTarget>();\n\n const start = useCallback(\n (event: React.MouseEvent<T> | React.KeyboardEvent<T> | React.TouchEvent<T>) => {\n if (shouldPreventDefault && event.target) {\n event.target.addEventListener('touchend', preventDefault, {\n passive: false\n });\n target.current = event.target;\n }\n timeout.current = setTimeout(() => {\n onLongPress();\n setLongPressTriggered(true);\n }, delay);\n },\n [onLongPress, delay, shouldPreventDefault]\n );\n\n const clear = useCallback(\n (shouldTriggerClick = true) => {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n timeout.current && clearTimeout(timeout.current);\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n shouldTriggerClick && !longPressTriggered && onClick?.();\n setLongPressTriggered(false);\n if (shouldPreventDefault && target.current) {\n target.current.removeEventListener('touchend', preventDefault);\n }\n },\n [shouldPreventDefault, onClick, longPressTriggered]\n );\n\n return {\n onMouseDown: (e: React.MouseEvent<T>) => start(e),\n onTouchStart: (e: React.TouchEvent<T>) => start(e),\n onKeyDown: (e: React.KeyboardEvent<T>) => {\n if (e.repeat || e.key !== key) return;\n start(e);\n },\n onMouseUp: () => clear(),\n onKeyUp: (e: React.KeyboardEvent<T>) => {\n if (e.repeat || e.key !== key) return;\n clear();\n },\n onMouseLeave: () => clear(false),\n onTouchEnd: () => clear()\n };\n};\n\nexport default useLongPress;\n"]}
|
|
@@ -31,7 +31,7 @@ const useOuterEvent = (eventName, nodes, handler) => {
|
|
|
31
31
|
parentIdx += 1;
|
|
32
32
|
}
|
|
33
33
|
if (nodes.every(n => {
|
|
34
|
-
const node = n instanceof Node ? n : n
|
|
34
|
+
const node = n instanceof Node ? n : n?.current;
|
|
35
35
|
if (!node)
|
|
36
36
|
return true;
|
|
37
37
|
return node !== target && !node.contains(target);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOuterEvent.js","sourceRoot":"","sources":["../../src/hooks/useOuterEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkC,EAClC,KAA+C,EAC/C,OAAqD,EAC/C,EAAE;IACR,MAAM,OAAO,GAAmB,WAAW,CACzC,KAAK,CAAC,EAAE;QACN,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QAEvB,IAAI,CAAC,CAAC,MAAM,YAAY,IAAI,CAAC;YAAE,OAAO;QAEtC,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YAE/B,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;gBAAE,OAAO;YAE9B,IAAI,MAAM,YAAY,gBAAgB,IAAI,MAAM,YAAY,QAAQ,EAAE;gBACpE,IAAI,CAAC,CAAC,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAAE,OAAO;gBAEhE,QAAQ,GAAG,SAAS,CAAC;aACtB;iBAAM,IAAI,KAAK,YAAY,gBAAgB,EAAE;gBAC5C,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,IAAI,MAAM,CAAC,UAAU,KAAK,KAAK;oBAAE,OAAO;gBAExE,QAAQ,GAAG,SAAS,CAAC;aACtB;YAED,SAAS,IAAI,CAAC,CAAC;SAChB;QAED,IACE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACd,MAAM,IAAI,GAAG,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useOuterEvent.js","sourceRoot":"","sources":["../../src/hooks/useOuterEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CACpB,SAAkC,EAClC,KAA+C,EAC/C,OAAqD,EAC/C,EAAE;IACR,MAAM,OAAO,GAAmB,WAAW,CACzC,KAAK,CAAC,EAAE;QACN,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QAEvB,IAAI,CAAC,CAAC,MAAM,YAAY,IAAI,CAAC;YAAE,OAAO;QAEtC,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YAE/B,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;gBAAE,OAAO;YAE9B,IAAI,MAAM,YAAY,gBAAgB,IAAI,MAAM,YAAY,QAAQ,EAAE;gBACpE,IAAI,CAAC,CAAC,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAAE,OAAO;gBAEhE,QAAQ,GAAG,SAAS,CAAC;aACtB;iBAAM,IAAI,KAAK,YAAY,gBAAgB,EAAE;gBAC5C,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,IAAI,MAAM,CAAC,UAAU,KAAK,KAAK;oBAAE,OAAO;gBAExE,QAAQ,GAAG,SAAS,CAAC;aACtB;YAED,SAAS,IAAI,CAAC,CAAC;SAChB;QAED,IACE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;YACd,MAAM,IAAI,GAAG,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;YAEhD,IAAI,CAAC,IAAI;gBAAE,OAAO,IAAI,CAAC;YACvB,OAAO,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnD,CAAC,CAAC,EACF;YACA,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EACD,CAAC,GAAG,KAAK,EAAE,OAAO,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAEtE,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;QACvE,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACzF,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useEffect, useCallback, RefObject } from 'react';\n\n/**\n * @example useOuterEvent(eventName, [nodes], handler = () => { doSomething; });\n * @param eventName The type of event to trigger the handler function on. Reference [DocumentEventMap](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.documenteventmap.html) for a list of valid events.\n * @param nodes An array of Nodes or Refs to Nodes to attach the eventName to.\n * @param handler The function that is called when the given event occurs.\n */\nconst useOuterEvent = <EventName extends keyof DocumentEventMap>(\n eventName: EventName | EventName[],\n nodes: (Node | null | RefObject<Node | null>)[],\n handler: (event: DocumentEventMap[EventName]) => void\n): void => {\n const onEvent: typeof handler = useCallback(\n event => {\n const path = event.composedPath();\n const target = path[0];\n\n if (!(target instanceof Node)) return;\n\n let childIdx = 0;\n let parentIdx = 1;\n while (path[childIdx] !== document) {\n const child = path[childIdx];\n const parent = path[parentIdx];\n\n if (!child || !parent) return;\n\n if (parent instanceof DocumentFragment || parent instanceof Document) {\n if (!(child instanceof Node) || !parent.contains(child)) return;\n\n childIdx = parentIdx;\n } else if (child instanceof DocumentFragment) {\n if (!(parent instanceof Element) || parent.shadowRoot !== child) return;\n\n childIdx = parentIdx;\n }\n\n parentIdx += 1;\n }\n\n if (\n nodes.every(n => {\n const node = n instanceof Node ? n : n?.current;\n\n if (!node) return true;\n return node !== target && !node.contains(target);\n })\n ) {\n handler(event);\n }\n },\n [...nodes, handler]\n );\n\n useEffect(() => {\n const eventNames = Array.isArray(eventName) ? eventName : [eventName];\n\n eventNames.forEach(event => document.addEventListener(event, onEvent));\n return () => eventNames.forEach(event => document.removeEventListener(event, onEvent));\n }, [eventName, onEvent]);\n};\n\nexport default useOuterEvent;\n"]}
|
package/lib/hooks/useOverride.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import useConfiguration from './useConfiguration';
|
|
2
|
-
export default (comp) =>
|
|
2
|
+
export default (comp) => useConfiguration().overrideMap?.[comp];
|
|
3
3
|
//# sourceMappingURL=useOverride.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverride.js","sourceRoot":"","sources":["../../src/hooks/useOverride.ts"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAIlD,eAAe,CAA8B,IAAO,EAAkB,EAAE,
|
|
1
|
+
{"version":3,"file":"useOverride.js","sourceRoot":"","sources":["../../src/hooks/useOverride.ts"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAIlD,eAAe,CAA8B,IAAO,EAAkB,EAAE,CACtE,gBAAgB,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC","sourcesContent":["import { ConfigurationProps } from '../components/Configuration';\n\nimport useConfiguration from './useConfiguration';\n\ntype OverrideMap = NonNullable<ConfigurationProps['overrideMap']>;\n\nexport default <C extends keyof OverrideMap>(comp: C): OverrideMap[C] =>\n useConfiguration().overrideMap?.[comp];\n"]}
|
|
@@ -16,6 +16,18 @@ const onBeforeunload = () => {
|
|
|
16
16
|
};
|
|
17
17
|
class Stickers {
|
|
18
18
|
constructor({ elements, scrollContainer = window, offset = 0 }) {
|
|
19
|
+
Object.defineProperty(this, "scrollContainer", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
configurable: true,
|
|
22
|
+
writable: true,
|
|
23
|
+
value: void 0
|
|
24
|
+
});
|
|
25
|
+
Object.defineProperty(this, "offset", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
configurable: true,
|
|
28
|
+
writable: true,
|
|
29
|
+
value: void 0
|
|
30
|
+
});
|
|
19
31
|
_Stickers_scrollDebounce.set(this, void 0);
|
|
20
32
|
_Stickers_resizeDebounce.set(this, void 0);
|
|
21
33
|
_Stickers_isWindowScroll.set(this, void 0);
|
|
@@ -226,12 +238,11 @@ _Stickers_scrollDebounce = new WeakMap(), _Stickers_resizeDebounce = new WeakMap
|
|
|
226
238
|
const useScrollStick = (options) => {
|
|
227
239
|
const instance = useRef();
|
|
228
240
|
useLayoutEffect(() => {
|
|
229
|
-
if (options
|
|
241
|
+
if (options?.elements) {
|
|
230
242
|
instance.current = new Stickers(options);
|
|
231
243
|
}
|
|
232
244
|
return () => {
|
|
233
|
-
|
|
234
|
-
(_a = instance.current) === null || _a === void 0 ? void 0 : _a.cleanup();
|
|
245
|
+
instance.current?.cleanup();
|
|
235
246
|
instance.current = undefined;
|
|
236
247
|
};
|
|
237
248
|
}, [options]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollStick.js","sourceRoot":"","sources":["../../src/hooks/useScrollStick.ts"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useLayoutEffect } from 'react';\n\nexport interface ScrollStickOptions {\n elements: string | HTMLElement[];\n scrollContainer?: Stickers['scrollContainer'];\n offset?: number;\n}\n\ninterface Sticker {\n element: HTMLElement;\n top: number;\n bottom: number;\n height: number;\n isStuck: boolean;\n priorStickHeight: number;\n}\n\ntype ElementsOption = string | HTMLElement[];\n\nconst onBeforeunload = () => {\n window.scrollTo(0, 0);\n};\n\nclass Stickers {\n scrollContainer: HTMLElement | Window;\n offset: number;\n #scrollDebounce: number;\n #resizeDebounce: number;\n #isWindowScroll: boolean;\n #scrollIntervalStart: number;\n #scrollIntervalChange: number;\n #scrollDirection: number;\n #priorScrollY: number;\n #resizeTimeout: number;\n #scrollEndTimeout: number;\n #isScrolling: boolean;\n #vpHeightSnapshot: number;\n #sfHeightSnapshot: number;\n #stickers: Sticker[];\n #scrollHandler: () => void;\n #resizeHandler: () => void;\n\n constructor({ elements, scrollContainer = window, offset = 0 }: ScrollStickOptions) {\n this.scrollContainer = scrollContainer;\n this.offset = offset;\n\n this.#scrollDebounce = 100;\n this.#resizeDebounce = 300;\n this.#resizeTimeout = NaN;\n this.#scrollEndTimeout = NaN;\n this.#priorScrollY = NaN;\n this.#isScrolling = false;\n this.#vpHeightSnapshot = NaN;\n this.#sfHeightSnapshot = NaN;\n this.#scrollHandler = () => {};\n this.#resizeHandler = () => {};\n\n this.#isWindowScroll = this.scrollContainer === window;\n\n // Only gets reset after scroll stop timeout fires\n this.#scrollIntervalStart = this.getScrollY();\n\n // Used to determine scroll change within debounced scroll handler\n this.#scrollIntervalChange = 0;\n\n // Used to determine scroll direction by +1(page down) -1(page up)\n this.#scrollDirection = 0;\n\n this.#stickers = this.setStickers(elements);\n this.snapshotItemRects();\n this.addHandlers();\n }\n\n setStickers(elements: ElementsOption) {\n this.#stickers = (\n typeof elements === 'string'\n ? Array.from(document.querySelectorAll<HTMLElement>(elements))\n : elements\n ).map(element => ({\n element,\n isStuck: false,\n top: NaN,\n bottom: NaN,\n height: NaN,\n priorStickHeight: NaN\n }));\n\n return this.#stickers;\n }\n\n addHandlers() {\n this.rmHandlers();\n this.#scrollHandler = this.onScroll.bind(this);\n this.#resizeHandler = this.onResize.bind(this);\n this.scrollContainer.addEventListener('scroll', this.#scrollHandler);\n window.addEventListener('resize', this.#resizeHandler);\n // Not sure we need this. Maybe when DOM was persisted...\n window.addEventListener('beforeunload', onBeforeunload);\n }\n\n rmHandlers() {\n this.scrollContainer.removeEventListener('scroll', this.#scrollHandler);\n window.removeEventListener('resize', this.#resizeHandler);\n window.removeEventListener('beforeunload', onBeforeunload);\n }\n\n snapshotItemRects() {\n this.#stickers.forEach(sticker => {\n const rect = sticker.element.getBoundingClientRect();\n sticker.top = rect.top;\n sticker.bottom = rect.bottom;\n sticker.height = rect.height;\n });\n }\n\n onScroll() {\n clearTimeout(this.#scrollEndTimeout);\n\n const currentScrollY = this.getScrollY();\n\n this.#priorScrollY = !Number.isNaN(this.#priorScrollY)\n ? this.#priorScrollY\n : this.#scrollIntervalStart;\n\n // Diff between priorScrollY and new currentScrollY to determine direction\n this.#scrollDirection = currentScrollY - this.#priorScrollY > 0 ? 1 : -1;\n\n // How much scroll changed + or - within the debounce interval\n this.#scrollIntervalChange = currentScrollY - this.#scrollIntervalStart;\n\n // Update old to new for next scroll event\n this.#priorScrollY = currentScrollY;\n\n // When scrolling has stopped\n this.#scrollEndTimeout = window.setTimeout(() => {\n // Reset for next scroll starting point\n this.#scrollIntervalStart = this.#priorScrollY;\n\n // Reset until next scroll\n this.#vpHeightSnapshot = NaN;\n this.#sfHeightSnapshot = NaN;\n\n this.#isScrolling = false;\n }, this.#scrollDebounce);\n\n // Additional scroll calls always have to test for stick state change\n if (this.#isScrolling) {\n this.testForStick();\n return;\n }\n\n // Only reaches here on first call and we note as in a scrolling state\n this.#isScrolling = true;\n\n // grab the current rect points for stickers to test against while scrolling\n this.snapshotItemRects();\n\n /**\n * Get once and cache until scroll settles\n * Unlikely to change and avoids additional reflows on scroll\n */\n this.#vpHeightSnapshot = this.getViewportHeight();\n this.#sfHeightSnapshot = this.getScrollFrameHeight();\n\n this.testForStick();\n }\n\n onResize() {\n clearTimeout(this.#resizeTimeout);\n this.#resizeTimeout = window.setTimeout(() => {\n this.snapshotItemRects();\n this.#stickers.forEach(sticker => {\n if (sticker.isStuck) this.addStick(sticker);\n });\n }, this.#resizeDebounce);\n }\n\n getScrollY() {\n return this.#isWindowScroll\n ? (this.scrollContainer as Window).scrollY\n : (this.scrollContainer as HTMLElement).scrollTop;\n }\n\n getViewportHeight() {\n // If we have a height snapshot use it since this has likely been called on scroll\n if (!Number.isNaN(this.#vpHeightSnapshot)) {\n return this.#vpHeightSnapshot;\n }\n\n return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n }\n\n getScrollFrameHeight() {\n // If we have a height snapshot use it since this has likely been called on scroll\n if (!Number.isNaN(this.#sfHeightSnapshot)) {\n return this.#sfHeightSnapshot;\n }\n\n const viewportHeight = this.getViewportHeight();\n let sfh = viewportHeight;\n\n if (!this.#isWindowScroll) {\n sfh = viewportHeight - (this.scrollContainer as HTMLElement).getBoundingClientRect().top;\n }\n\n return sfh;\n }\n\n testBottomInView(sticker: Sticker) {\n const vph = this.getViewportHeight();\n const sfh = this.getScrollFrameHeight();\n const sic = this.#scrollIntervalChange;\n\n return sfh + sic + (vph - sfh) >= sticker.bottom + this.offset;\n }\n\n testForStick() {\n // Don't do anything if scrolling up\n if (this.#scrollDirection === -1) return;\n\n this.#stickers.forEach(sticker => {\n const bottomIsInView = this.testBottomInView(sticker);\n const hasHeightChange =\n !Number.isNaN(sticker.priorStickHeight) && sticker.height !== sticker.priorStickHeight;\n\n if (bottomIsInView) {\n if (!sticker.isStuck || hasHeightChange) {\n window.requestAnimationFrame(() => this.addStick(sticker));\n }\n } else if (sticker.isStuck && hasHeightChange) {\n const marginTop = this.getScrollY() + sticker.top - this.offset;\n\n window.requestAnimationFrame(() => {\n this.removeStick(sticker);\n sticker.element.style.marginTop = `${marginTop}px`;\n });\n }\n });\n\n return this;\n }\n\n addStick(sticker: Sticker) {\n sticker.element.style.position = 'sticky';\n sticker.element.style.marginTop = '';\n sticker.element.style.top = `${this.getStickTop(sticker)}px`;\n sticker.priorStickHeight = sticker.height;\n sticker.isStuck = true;\n return this;\n }\n\n removeStick(sticker: Sticker) {\n sticker.element.style.position = '';\n sticker.element.style.marginTop = '';\n sticker.element.style.top = '';\n sticker.isStuck = false;\n return this;\n }\n\n getStickTop(sticker: Sticker) {\n const spHeight = this.getScrollFrameHeight();\n let offset = this.offset;\n\n if (sticker.height + this.offset > spHeight) {\n offset = spHeight - sticker.height - offset;\n }\n\n return offset;\n }\n\n cleanup() {\n this.rmHandlers();\n this.#stickers.forEach(this.removeStick);\n }\n}\n\n/**\n * @example useScrollStick({ elements: [myColumnElements] | '.my-columns', offset: 20 });\n * @param options An object to set the sticky elements, the scroll container and an stuck offset in pixels.\n * @returns void.\n */\nconst useScrollStick = (options?: ScrollStickOptions): void => {\n const instance = useRef<Stickers>();\n\n useLayoutEffect(() => {\n if (options?.elements) {\n instance.current = new Stickers(options);\n }\n\n return () => {\n instance.current?.cleanup();\n instance.current = undefined;\n };\n }, [options]);\n};\n\nexport default useScrollStick;\n"]}
|
|
1
|
+
{"version":3,"file":"useScrollStick.js","sourceRoot":"","sources":["../../src/hooks/useScrollStick.ts"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useLayoutEffect } from 'react';\n\nexport interface ScrollStickOptions {\n elements: string | HTMLElement[];\n scrollContainer?: Stickers['scrollContainer'];\n offset?: number;\n}\n\ninterface Sticker {\n element: HTMLElement;\n top: number;\n bottom: number;\n height: number;\n isStuck: boolean;\n priorStickHeight: number;\n}\n\ntype ElementsOption = string | HTMLElement[];\n\nconst onBeforeunload = () => {\n window.scrollTo(0, 0);\n};\n\nclass Stickers {\n scrollContainer: HTMLElement | Window;\n offset: number;\n #scrollDebounce: number;\n #resizeDebounce: number;\n #isWindowScroll: boolean;\n #scrollIntervalStart: number;\n #scrollIntervalChange: number;\n #scrollDirection: number;\n #priorScrollY: number;\n #resizeTimeout: number;\n #scrollEndTimeout: number;\n #isScrolling: boolean;\n #vpHeightSnapshot: number;\n #sfHeightSnapshot: number;\n #stickers: Sticker[];\n #scrollHandler: () => void;\n #resizeHandler: () => void;\n\n constructor({ elements, scrollContainer = window, offset = 0 }: ScrollStickOptions) {\n this.scrollContainer = scrollContainer;\n this.offset = offset;\n\n this.#scrollDebounce = 100;\n this.#resizeDebounce = 300;\n this.#resizeTimeout = NaN;\n this.#scrollEndTimeout = NaN;\n this.#priorScrollY = NaN;\n this.#isScrolling = false;\n this.#vpHeightSnapshot = NaN;\n this.#sfHeightSnapshot = NaN;\n this.#scrollHandler = () => {};\n this.#resizeHandler = () => {};\n\n this.#isWindowScroll = this.scrollContainer === window;\n\n // Only gets reset after scroll stop timeout fires\n this.#scrollIntervalStart = this.getScrollY();\n\n // Used to determine scroll change within debounced scroll handler\n this.#scrollIntervalChange = 0;\n\n // Used to determine scroll direction by +1(page down) -1(page up)\n this.#scrollDirection = 0;\n\n this.#stickers = this.setStickers(elements);\n this.snapshotItemRects();\n this.addHandlers();\n }\n\n setStickers(elements: ElementsOption) {\n this.#stickers = (\n typeof elements === 'string'\n ? Array.from(document.querySelectorAll<HTMLElement>(elements))\n : elements\n ).map(element => ({\n element,\n isStuck: false,\n top: NaN,\n bottom: NaN,\n height: NaN,\n priorStickHeight: NaN\n }));\n\n return this.#stickers;\n }\n\n addHandlers() {\n this.rmHandlers();\n this.#scrollHandler = this.onScroll.bind(this);\n this.#resizeHandler = this.onResize.bind(this);\n this.scrollContainer.addEventListener('scroll', this.#scrollHandler);\n window.addEventListener('resize', this.#resizeHandler);\n // Not sure we need this. Maybe when DOM was persisted...\n window.addEventListener('beforeunload', onBeforeunload);\n }\n\n rmHandlers() {\n this.scrollContainer.removeEventListener('scroll', this.#scrollHandler);\n window.removeEventListener('resize', this.#resizeHandler);\n window.removeEventListener('beforeunload', onBeforeunload);\n }\n\n snapshotItemRects() {\n this.#stickers.forEach(sticker => {\n const rect = sticker.element.getBoundingClientRect();\n sticker.top = rect.top;\n sticker.bottom = rect.bottom;\n sticker.height = rect.height;\n });\n }\n\n onScroll() {\n clearTimeout(this.#scrollEndTimeout);\n\n const currentScrollY = this.getScrollY();\n\n this.#priorScrollY = !Number.isNaN(this.#priorScrollY)\n ? this.#priorScrollY\n : this.#scrollIntervalStart;\n\n // Diff between priorScrollY and new currentScrollY to determine direction\n this.#scrollDirection = currentScrollY - this.#priorScrollY > 0 ? 1 : -1;\n\n // How much scroll changed + or - within the debounce interval\n this.#scrollIntervalChange = currentScrollY - this.#scrollIntervalStart;\n\n // Update old to new for next scroll event\n this.#priorScrollY = currentScrollY;\n\n // When scrolling has stopped\n this.#scrollEndTimeout = window.setTimeout(() => {\n // Reset for next scroll starting point\n this.#scrollIntervalStart = this.#priorScrollY;\n\n // Reset until next scroll\n this.#vpHeightSnapshot = NaN;\n this.#sfHeightSnapshot = NaN;\n\n this.#isScrolling = false;\n }, this.#scrollDebounce);\n\n // Additional scroll calls always have to test for stick state change\n if (this.#isScrolling) {\n this.testForStick();\n return;\n }\n\n // Only reaches here on first call and we note as in a scrolling state\n this.#isScrolling = true;\n\n // grab the current rect points for stickers to test against while scrolling\n this.snapshotItemRects();\n\n /**\n * Get once and cache until scroll settles\n * Unlikely to change and avoids additional reflows on scroll\n */\n this.#vpHeightSnapshot = this.getViewportHeight();\n this.#sfHeightSnapshot = this.getScrollFrameHeight();\n\n this.testForStick();\n }\n\n onResize() {\n clearTimeout(this.#resizeTimeout);\n this.#resizeTimeout = window.setTimeout(() => {\n this.snapshotItemRects();\n this.#stickers.forEach(sticker => {\n if (sticker.isStuck) this.addStick(sticker);\n });\n }, this.#resizeDebounce);\n }\n\n getScrollY() {\n return this.#isWindowScroll\n ? (this.scrollContainer as Window).scrollY\n : (this.scrollContainer as HTMLElement).scrollTop;\n }\n\n getViewportHeight() {\n // If we have a height snapshot use it since this has likely been called on scroll\n if (!Number.isNaN(this.#vpHeightSnapshot)) {\n return this.#vpHeightSnapshot;\n }\n\n return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n }\n\n getScrollFrameHeight() {\n // If we have a height snapshot use it since this has likely been called on scroll\n if (!Number.isNaN(this.#sfHeightSnapshot)) {\n return this.#sfHeightSnapshot;\n }\n\n const viewportHeight = this.getViewportHeight();\n let sfh = viewportHeight;\n\n if (!this.#isWindowScroll) {\n sfh = viewportHeight - (this.scrollContainer as HTMLElement).getBoundingClientRect().top;\n }\n\n return sfh;\n }\n\n testBottomInView(sticker: Sticker) {\n const vph = this.getViewportHeight();\n const sfh = this.getScrollFrameHeight();\n const sic = this.#scrollIntervalChange;\n\n return sfh + sic + (vph - sfh) >= sticker.bottom + this.offset;\n }\n\n testForStick() {\n // Don't do anything if scrolling up\n if (this.#scrollDirection === -1) return;\n\n this.#stickers.forEach(sticker => {\n const bottomIsInView = this.testBottomInView(sticker);\n const hasHeightChange =\n !Number.isNaN(sticker.priorStickHeight) && sticker.height !== sticker.priorStickHeight;\n\n if (bottomIsInView) {\n if (!sticker.isStuck || hasHeightChange) {\n window.requestAnimationFrame(() => this.addStick(sticker));\n }\n } else if (sticker.isStuck && hasHeightChange) {\n const marginTop = this.getScrollY() + sticker.top - this.offset;\n\n window.requestAnimationFrame(() => {\n this.removeStick(sticker);\n sticker.element.style.marginTop = `${marginTop}px`;\n });\n }\n });\n\n return this;\n }\n\n addStick(sticker: Sticker) {\n sticker.element.style.position = 'sticky';\n sticker.element.style.marginTop = '';\n sticker.element.style.top = `${this.getStickTop(sticker)}px`;\n sticker.priorStickHeight = sticker.height;\n sticker.isStuck = true;\n return this;\n }\n\n removeStick(sticker: Sticker) {\n sticker.element.style.position = '';\n sticker.element.style.marginTop = '';\n sticker.element.style.top = '';\n sticker.isStuck = false;\n return this;\n }\n\n getStickTop(sticker: Sticker) {\n const spHeight = this.getScrollFrameHeight();\n let offset = this.offset;\n\n if (sticker.height + this.offset > spHeight) {\n offset = spHeight - sticker.height - offset;\n }\n\n return offset;\n }\n\n cleanup() {\n this.rmHandlers();\n this.#stickers.forEach(this.removeStick);\n }\n}\n\n/**\n * @example useScrollStick({ elements: [myColumnElements] | '.my-columns', offset: 20 });\n * @param options An object to set the sticky elements, the scroll container and an stuck offset in pixels.\n * @returns void.\n */\nconst useScrollStick = (options?: ScrollStickOptions): void => {\n const instance = useRef<Stickers>();\n\n useLayoutEffect(() => {\n if (options?.elements) {\n instance.current = new Stickers(options);\n }\n\n return () => {\n instance.current?.cleanup();\n instance.current = undefined;\n };\n }, [options]);\n};\n\nexport default useScrollStick;\n"]}
|