@hitachivantara/uikit-react-lab 4.0.2 → 4.0.4
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/dist/ColorPicker/ColorPicker.js +25 -78
- package/dist/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/ColorPicker/Fields/Fields.js +15 -47
- package/dist/ColorPicker/Fields/Fields.js.map +1 -1
- package/dist/ColorPicker/Fields/index.js +0 -2
- package/dist/ColorPicker/Fields/index.js.map +1 -1
- package/dist/ColorPicker/Fields/styles.js +0 -2
- package/dist/ColorPicker/Fields/styles.js.map +1 -1
- package/dist/ColorPicker/Picker/Picker.js +5 -23
- package/dist/ColorPicker/Picker/Picker.js.map +1 -1
- package/dist/ColorPicker/Picker/index.js +0 -2
- package/dist/ColorPicker/Picker/index.js.map +1 -1
- package/dist/ColorPicker/Picker/styles.js +0 -2
- package/dist/ColorPicker/Picker/styles.js.map +1 -1
- package/dist/ColorPicker/PresetColors/PresetColors.js +2 -24
- package/dist/ColorPicker/PresetColors/PresetColors.js.map +1 -1
- package/dist/ColorPicker/PresetColors/index.js +0 -2
- package/dist/ColorPicker/PresetColors/index.js.map +1 -1
- package/dist/ColorPicker/PresetColors/styles.js +0 -2
- package/dist/ColorPicker/PresetColors/styles.js.map +1 -1
- package/dist/ColorPicker/index.js +0 -2
- package/dist/ColorPicker/index.js.map +1 -1
- package/dist/ColorPicker/styles.js +0 -2
- package/dist/ColorPicker/styles.js.map +1 -1
- package/dist/Drawer/Drawer.js +10 -50
- package/dist/Drawer/Drawer.js.map +1 -1
- package/dist/Drawer/index.js +0 -2
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Drawer/styles.js +0 -3
- package/dist/Drawer/styles.js.map +1 -1
- package/dist/ImageCarousel/ImageCarousel.js +46 -149
- package/dist/ImageCarousel/ImageCarousel.js.map +1 -1
- package/dist/ImageCarousel/index.js +0 -2
- package/dist/ImageCarousel/index.js.map +1 -1
- package/dist/ImageCarousel/styles.js +0 -5
- package/dist/ImageCarousel/styles.js.map +1 -1
- package/dist/InlineEditor/InlineEditor.js +25 -82
- package/dist/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/InlineEditor/index.js +0 -2
- package/dist/InlineEditor/index.js.map +1 -1
- package/dist/InlineEditor/styles.js +0 -14
- package/dist/InlineEditor/styles.js.map +1 -1
- package/dist/NavigationAnchors/NavigationAnchors.js +44 -116
- package/dist/NavigationAnchors/NavigationAnchors.js.map +1 -1
- package/dist/NavigationAnchors/NavigationOption.js +0 -10
- package/dist/NavigationAnchors/NavigationOption.js.map +1 -1
- package/dist/NavigationAnchors/index.js +0 -2
- package/dist/NavigationAnchors/index.js.map +1 -1
- package/dist/NavigationAnchors/styles.js +0 -2
- package/dist/NavigationAnchors/styles.js.map +1 -1
- package/dist/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js +5 -26
- package/dist/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js.map +1 -1
- package/dist/NotificationPanel/EmptyStatePanel/index.js +0 -2
- package/dist/NotificationPanel/EmptyStatePanel/index.js.map +1 -1
- package/dist/NotificationPanel/EmptyStatePanel/styles.js +0 -2
- package/dist/NotificationPanel/EmptyStatePanel/styles.js.map +1 -1
- package/dist/NotificationPanel/Notification/Notification.js +12 -57
- package/dist/NotificationPanel/Notification/Notification.js.map +1 -1
- package/dist/NotificationPanel/Notification/index.js +0 -2
- package/dist/NotificationPanel/Notification/index.js.map +1 -1
- package/dist/NotificationPanel/Notification/styles.js +0 -14
- package/dist/NotificationPanel/Notification/styles.js.map +1 -1
- package/dist/NotificationPanel/NotificationPanel.js +23 -92
- package/dist/NotificationPanel/NotificationPanel.js.map +1 -1
- package/dist/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js +4 -35
- package/dist/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js.map +1 -1
- package/dist/NotificationPanel/NotificationsIndicator/index.js +0 -2
- package/dist/NotificationPanel/NotificationsIndicator/index.js.map +1 -1
- package/dist/NotificationPanel/NotificationsIndicator/styles.js +0 -2
- package/dist/NotificationPanel/NotificationsIndicator/styles.js.map +1 -1
- package/dist/NotificationPanel/index.js +0 -2
- package/dist/NotificationPanel/index.js.map +1 -1
- package/dist/NotificationPanel/styles.js +0 -2
- package/dist/NotificationPanel/styles.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +15 -44
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js +9 -41
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/Step/index.js +0 -2
- package/dist/StepNavigation/DefaultNavigation/Step/index.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js +0 -2
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/index.js +0 -2
- package/dist/StepNavigation/DefaultNavigation/index.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/styles.js +0 -2
- package/dist/StepNavigation/DefaultNavigation/styles.js.map +1 -1
- package/dist/StepNavigation/DefaultNavigation/utils.js +0 -3
- package/dist/StepNavigation/DefaultNavigation/utils.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +6 -47
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js +0 -2
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js +14 -44
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/index.js +0 -2
- package/dist/StepNavigation/SimpleNavigation/index.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/styles.js +0 -2
- package/dist/StepNavigation/SimpleNavigation/styles.js.map +1 -1
- package/dist/StepNavigation/SimpleNavigation/utils.js +0 -6
- package/dist/StepNavigation/SimpleNavigation/utils.js.map +1 -1
- package/dist/StepNavigation/StepNavigation.js +39 -106
- package/dist/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/StepNavigation/index.js +0 -2
- package/dist/StepNavigation/index.js.map +1 -1
- package/dist/StepNavigation/styles.js +0 -2
- package/dist/StepNavigation/styles.js.map +1 -1
- package/dist/StepNavigation/utils.js.map +1 -1
- package/dist/TimeAgo/TimeAgo.js +13 -44
- package/dist/TimeAgo/TimeAgo.js.map +1 -1
- package/dist/TimeAgo/formatUtils.js +15 -35
- package/dist/TimeAgo/formatUtils.js.map +1 -1
- package/dist/TimeAgo/index.js +0 -3
- package/dist/TimeAgo/index.js.map +1 -1
- package/dist/TimeAgo/styles.js.map +1 -1
- package/dist/TimeAgo/useTimeAgo.js +7 -16
- package/dist/TimeAgo/useTimeAgo.js.map +1 -1
- package/dist/TimeAgo/useTimeout.js +0 -2
- package/dist/TimeAgo/useTimeout.js.map +1 -1
- package/dist/Wizard/Wizard.d.ts +5 -5
- package/dist/Wizard/Wizard.js +33 -85
- package/dist/Wizard/Wizard.js.map +1 -1
- package/dist/Wizard/WizardActions/WizardActions.d.ts +2 -2
- package/dist/Wizard/WizardActions/WizardActions.js +31 -86
- package/dist/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/Wizard/WizardActions/index.js +0 -2
- package/dist/Wizard/WizardActions/index.js.map +1 -1
- package/dist/Wizard/WizardActions/styles.js +0 -2
- package/dist/Wizard/WizardActions/styles.js.map +1 -1
- package/dist/Wizard/WizardContainer/WizardContainer.js +5 -35
- package/dist/Wizard/WizardContainer/WizardContainer.js.map +1 -1
- package/dist/Wizard/WizardContainer/index.js +0 -2
- package/dist/Wizard/WizardContainer/index.js.map +1 -1
- package/dist/Wizard/WizardContainer/styles.js +0 -2
- package/dist/Wizard/WizardContainer/styles.js.map +1 -1
- package/dist/Wizard/WizardContent/LoadingContainer.js +2 -25
- package/dist/Wizard/WizardContent/LoadingContainer.js.map +1 -1
- package/dist/Wizard/WizardContent/WizardContent.d.ts +1 -1
- package/dist/Wizard/WizardContent/WizardContent.js +12 -55
- package/dist/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/Wizard/WizardContent/index.js +0 -2
- package/dist/Wizard/WizardContent/index.js.map +1 -1
- package/dist/Wizard/WizardContent/styles.js +0 -2
- package/dist/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/Wizard/WizardContext/WizardContext.d.ts +12 -0
- package/dist/Wizard/WizardContext/WizardContext.js +0 -4
- package/dist/Wizard/WizardContext/WizardContext.js.map +1 -1
- package/dist/Wizard/WizardContext/WizardContextProvider.d.ts +28 -0
- package/dist/Wizard/WizardContext/WizardContextProvider.js +41 -0
- package/dist/Wizard/WizardContext/WizardContextProvider.js.map +1 -0
- package/dist/Wizard/WizardContext/index.d.ts +5 -0
- package/dist/Wizard/WizardContext/index.js +7 -2
- package/dist/Wizard/WizardContext/index.js.map +1 -1
- package/dist/Wizard/WizardTitle/WizardTitle.d.ts +7 -9
- package/dist/Wizard/WizardTitle/WizardTitle.js +18 -59
- package/dist/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/Wizard/WizardTitle/index.js +0 -2
- package/dist/Wizard/WizardTitle/index.js.map +1 -1
- package/dist/Wizard/WizardTitle/styles.js +0 -2
- package/dist/Wizard/WizardTitle/styles.js.map +1 -1
- package/dist/Wizard/index.d.ts +15 -0
- package/dist/Wizard/index.js +7 -7
- package/dist/Wizard/index.js.map +1 -1
- package/dist/Wizard/styles.js +0 -2
- package/dist/Wizard/styles.js.map +1 -1
- package/dist/index.js +12 -23
- package/dist/index.js.map +1 -1
- package/dist/legacy/ColorPicker/ColorPicker.js +26 -51
- package/dist/legacy/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/legacy/ColorPicker/Fields/Fields.js +17 -27
- package/dist/legacy/ColorPicker/Fields/Fields.js.map +1 -1
- package/dist/legacy/ColorPicker/Fields/index.js.map +1 -1
- package/dist/legacy/ColorPicker/Fields/styles.js.map +1 -1
- package/dist/legacy/ColorPicker/Picker/Picker.js +7 -7
- package/dist/legacy/ColorPicker/Picker/Picker.js.map +1 -1
- package/dist/legacy/ColorPicker/Picker/index.js.map +1 -1
- package/dist/legacy/ColorPicker/Picker/styles.js.map +1 -1
- package/dist/legacy/ColorPicker/PresetColors/PresetColors.js +2 -7
- package/dist/legacy/ColorPicker/PresetColors/PresetColors.js.map +1 -1
- package/dist/legacy/ColorPicker/PresetColors/index.js.map +1 -1
- package/dist/legacy/ColorPicker/PresetColors/styles.js.map +1 -1
- package/dist/legacy/ColorPicker/index.js.map +1 -1
- package/dist/legacy/ColorPicker/styles.js +0 -1
- package/dist/legacy/ColorPicker/styles.js.map +1 -1
- package/dist/legacy/Drawer/Drawer.js +11 -30
- package/dist/legacy/Drawer/Drawer.js.map +1 -1
- package/dist/legacy/Drawer/index.js.map +1 -1
- package/dist/legacy/Drawer/styles.js +0 -2
- package/dist/legacy/Drawer/styles.js.map +1 -1
- package/dist/legacy/ImageCarousel/ImageCarousel.js +46 -120
- package/dist/legacy/ImageCarousel/ImageCarousel.js.map +1 -1
- package/dist/legacy/ImageCarousel/index.js.map +1 -1
- package/dist/legacy/ImageCarousel/styles.js +0 -3
- package/dist/legacy/ImageCarousel/styles.js.map +1 -1
- package/dist/legacy/InlineEditor/InlineEditor.js +26 -55
- package/dist/legacy/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/legacy/InlineEditor/index.js.map +1 -1
- package/dist/legacy/InlineEditor/styles.js +0 -5
- package/dist/legacy/InlineEditor/styles.js.map +1 -1
- package/dist/legacy/NavigationAnchors/NavigationAnchors.js +44 -82
- package/dist/legacy/NavigationAnchors/NavigationAnchors.js.map +1 -1
- package/dist/legacy/NavigationAnchors/NavigationOption.js +0 -5
- package/dist/legacy/NavigationAnchors/NavigationOption.js.map +1 -1
- package/dist/legacy/NavigationAnchors/index.js.map +1 -1
- package/dist/legacy/NavigationAnchors/styles.js +0 -1
- package/dist/legacy/NavigationAnchors/styles.js.map +1 -1
- package/dist/legacy/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js +5 -16
- package/dist/legacy/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js.map +1 -1
- package/dist/legacy/NotificationPanel/EmptyStatePanel/index.js.map +1 -1
- package/dist/legacy/NotificationPanel/EmptyStatePanel/styles.js +0 -1
- package/dist/legacy/NotificationPanel/EmptyStatePanel/styles.js.map +1 -1
- package/dist/legacy/NotificationPanel/Notification/Notification.js +12 -44
- package/dist/legacy/NotificationPanel/Notification/Notification.js.map +1 -1
- package/dist/legacy/NotificationPanel/Notification/index.js.map +1 -1
- package/dist/legacy/NotificationPanel/Notification/styles.js +0 -5
- package/dist/legacy/NotificationPanel/Notification/styles.js.map +1 -1
- package/dist/legacy/NotificationPanel/NotificationPanel.js +23 -61
- package/dist/legacy/NotificationPanel/NotificationPanel.js.map +1 -1
- package/dist/legacy/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js +4 -17
- package/dist/legacy/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js.map +1 -1
- package/dist/legacy/NotificationPanel/NotificationsIndicator/index.js.map +1 -1
- package/dist/legacy/NotificationPanel/NotificationsIndicator/styles.js +0 -1
- package/dist/legacy/NotificationPanel/NotificationsIndicator/styles.js.map +1 -1
- package/dist/legacy/NotificationPanel/index.js.map +1 -1
- package/dist/legacy/NotificationPanel/styles.js +0 -1
- package/dist/legacy/NotificationPanel/styles.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js +16 -27
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js +10 -29
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js +0 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js +0 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js.map +1 -1
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js +0 -2
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js +7 -21
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js +15 -26
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js +0 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js.map +1 -1
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js +0 -6
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js.map +1 -1
- package/dist/legacy/StepNavigation/StepNavigation.js +40 -78
- package/dist/legacy/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/legacy/StepNavigation/index.js.map +1 -1
- package/dist/legacy/StepNavigation/styles.js +0 -1
- package/dist/legacy/StepNavigation/styles.js.map +1 -1
- package/dist/legacy/StepNavigation/utils.js.map +1 -1
- package/dist/legacy/TimeAgo/TimeAgo.js +14 -27
- package/dist/legacy/TimeAgo/TimeAgo.js.map +1 -1
- package/dist/legacy/TimeAgo/formatUtils.js +16 -18
- package/dist/legacy/TimeAgo/formatUtils.js.map +1 -1
- package/dist/legacy/TimeAgo/index.js.map +1 -1
- package/dist/legacy/TimeAgo/styles.js.map +1 -1
- package/dist/legacy/TimeAgo/useTimeAgo.js +8 -11
- package/dist/legacy/TimeAgo/useTimeAgo.js.map +1 -1
- package/dist/legacy/TimeAgo/useTimeout.js.map +1 -1
- package/dist/legacy/Wizard/Wizard.d.ts +5 -5
- package/dist/legacy/Wizard/Wizard.js +33 -59
- package/dist/legacy/Wizard/Wizard.js.map +1 -1
- package/dist/legacy/Wizard/WizardActions/WizardActions.d.ts +2 -2
- package/dist/legacy/Wizard/WizardActions/WizardActions.js +33 -62
- package/dist/legacy/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/legacy/Wizard/WizardActions/index.js.map +1 -1
- package/dist/legacy/Wizard/WizardActions/styles.js +0 -1
- package/dist/legacy/Wizard/WizardActions/styles.js.map +1 -1
- package/dist/legacy/Wizard/WizardContainer/WizardContainer.js +5 -17
- package/dist/legacy/Wizard/WizardContainer/WizardContainer.js.map +1 -1
- package/dist/legacy/Wizard/WizardContainer/index.js.map +1 -1
- package/dist/legacy/Wizard/WizardContainer/styles.js +0 -1
- package/dist/legacy/Wizard/WizardContainer/styles.js.map +1 -1
- package/dist/legacy/Wizard/WizardContent/LoadingContainer.js +2 -8
- package/dist/legacy/Wizard/WizardContent/LoadingContainer.js.map +1 -1
- package/dist/legacy/Wizard/WizardContent/WizardContent.d.ts +1 -1
- package/dist/legacy/Wizard/WizardContent/WizardContent.js +11 -27
- package/dist/legacy/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/legacy/Wizard/WizardContent/index.js.map +1 -1
- package/dist/legacy/Wizard/WizardContent/styles.js +0 -1
- package/dist/legacy/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/legacy/Wizard/WizardContext/WizardContext.d.ts +12 -0
- package/dist/legacy/Wizard/WizardContext/WizardContext.js +0 -2
- package/dist/legacy/Wizard/WizardContext/WizardContext.js.map +1 -1
- package/dist/legacy/Wizard/WizardContext/WizardContextProvider.d.ts +28 -0
- package/dist/legacy/Wizard/WizardContext/WizardContextProvider.js +33 -0
- package/dist/legacy/Wizard/WizardContext/WizardContextProvider.js.map +1 -0
- package/dist/legacy/Wizard/WizardContext/index.d.ts +5 -0
- package/dist/legacy/Wizard/WizardContext/index.js +1 -0
- package/dist/legacy/Wizard/WizardContext/index.js.map +1 -1
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.d.ts +7 -9
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.js +17 -42
- package/dist/legacy/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/legacy/Wizard/WizardTitle/index.js.map +1 -1
- package/dist/legacy/Wizard/WizardTitle/styles.js +0 -1
- package/dist/legacy/Wizard/WizardTitle/styles.js.map +1 -1
- package/dist/legacy/Wizard/index.d.ts +15 -0
- package/dist/legacy/Wizard/index.js +1 -0
- package/dist/legacy/Wizard/index.js.map +1 -1
- package/dist/legacy/Wizard/styles.js +0 -1
- package/dist/legacy/Wizard/styles.js.map +1 -1
- package/dist/legacy/index.js +1 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/ColorPicker/ColorPicker.js +1 -25
- package/dist/modern/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/modern/ColorPicker/Fields/Fields.js +3 -10
- package/dist/modern/ColorPicker/Fields/Fields.js.map +1 -1
- package/dist/modern/ColorPicker/Fields/index.js.map +1 -1
- package/dist/modern/ColorPicker/Fields/styles.js.map +1 -1
- package/dist/modern/ColorPicker/Picker/Picker.js +3 -3
- package/dist/modern/ColorPicker/Picker/Picker.js.map +1 -1
- package/dist/modern/ColorPicker/Picker/index.js.map +1 -1
- package/dist/modern/ColorPicker/Picker/styles.js.map +1 -1
- package/dist/modern/ColorPicker/PresetColors/PresetColors.js +0 -5
- package/dist/modern/ColorPicker/PresetColors/PresetColors.js.map +1 -1
- package/dist/modern/ColorPicker/PresetColors/index.js.map +1 -1
- package/dist/modern/ColorPicker/PresetColors/styles.js.map +1 -1
- package/dist/modern/ColorPicker/index.js.map +1 -1
- package/dist/modern/ColorPicker/styles.js +0 -1
- package/dist/modern/ColorPicker/styles.js.map +1 -1
- package/dist/modern/Drawer/Drawer.js +11 -30
- package/dist/modern/Drawer/Drawer.js.map +1 -1
- package/dist/modern/Drawer/index.js.map +1 -1
- package/dist/modern/Drawer/styles.js +0 -2
- package/dist/modern/Drawer/styles.js.map +1 -1
- package/dist/modern/ImageCarousel/ImageCarousel.js +18 -83
- package/dist/modern/ImageCarousel/ImageCarousel.js.map +1 -1
- package/dist/modern/ImageCarousel/index.js.map +1 -1
- package/dist/modern/ImageCarousel/styles.js +0 -1
- package/dist/modern/ImageCarousel/styles.js.map +1 -1
- package/dist/modern/InlineEditor/InlineEditor.js +16 -43
- package/dist/modern/InlineEditor/InlineEditor.js.map +1 -1
- package/dist/modern/InlineEditor/index.js.map +1 -1
- package/dist/modern/InlineEditor/styles.js +0 -5
- package/dist/modern/InlineEditor/styles.js.map +1 -1
- package/dist/modern/NavigationAnchors/NavigationAnchors.js +40 -74
- package/dist/modern/NavigationAnchors/NavigationAnchors.js.map +1 -1
- package/dist/modern/NavigationAnchors/NavigationOption.js +0 -6
- package/dist/modern/NavigationAnchors/NavigationOption.js.map +1 -1
- package/dist/modern/NavigationAnchors/index.js.map +1 -1
- package/dist/modern/NavigationAnchors/styles.js +0 -1
- package/dist/modern/NavigationAnchors/styles.js.map +1 -1
- package/dist/modern/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js +0 -11
- package/dist/modern/NotificationPanel/EmptyStatePanel/EmptyStatePanel.js.map +1 -1
- package/dist/modern/NotificationPanel/EmptyStatePanel/index.js.map +1 -1
- package/dist/modern/NotificationPanel/EmptyStatePanel/styles.js +0 -1
- package/dist/modern/NotificationPanel/EmptyStatePanel/styles.js.map +1 -1
- package/dist/modern/NotificationPanel/Notification/Notification.js +2 -33
- package/dist/modern/NotificationPanel/Notification/Notification.js.map +1 -1
- package/dist/modern/NotificationPanel/Notification/index.js.map +1 -1
- package/dist/modern/NotificationPanel/Notification/styles.js +0 -5
- package/dist/modern/NotificationPanel/Notification/styles.js.map +1 -1
- package/dist/modern/NotificationPanel/NotificationPanel.js +16 -50
- package/dist/modern/NotificationPanel/NotificationPanel.js.map +1 -1
- package/dist/modern/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js +6 -19
- package/dist/modern/NotificationPanel/NotificationsIndicator/NotificationsIndicator.js.map +1 -1
- package/dist/modern/NotificationPanel/NotificationsIndicator/index.js.map +1 -1
- package/dist/modern/NotificationPanel/NotificationsIndicator/styles.js +0 -1
- package/dist/modern/NotificationPanel/NotificationsIndicator/styles.js.map +1 -1
- package/dist/modern/NotificationPanel/index.js.map +1 -1
- package/dist/modern/NotificationPanel/styles.js +0 -1
- package/dist/modern/NotificationPanel/styles.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js +14 -23
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js +1 -20
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js +0 -1
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/index.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js +0 -1
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js.map +1 -1
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js +0 -2
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js +1 -15
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js +14 -23
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/index.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js +0 -1
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js.map +1 -1
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js +0 -6
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js.map +1 -1
- package/dist/modern/StepNavigation/StepNavigation.js +25 -62
- package/dist/modern/StepNavigation/StepNavigation.js.map +1 -1
- package/dist/modern/StepNavigation/index.js.map +1 -1
- package/dist/modern/StepNavigation/styles.js +0 -1
- package/dist/modern/StepNavigation/styles.js.map +1 -1
- package/dist/modern/StepNavigation/utils.js.map +1 -1
- package/dist/modern/TimeAgo/TimeAgo.js +11 -24
- package/dist/modern/TimeAgo/TimeAgo.js.map +1 -1
- package/dist/modern/TimeAgo/formatUtils.js +16 -18
- package/dist/modern/TimeAgo/formatUtils.js.map +1 -1
- package/dist/modern/TimeAgo/index.js.map +1 -1
- package/dist/modern/TimeAgo/styles.js.map +1 -1
- package/dist/modern/TimeAgo/useTimeAgo.js +1 -3
- package/dist/modern/TimeAgo/useTimeAgo.js.map +1 -1
- package/dist/modern/TimeAgo/useTimeout.js.map +1 -1
- package/dist/modern/Wizard/Wizard.d.ts +5 -5
- package/dist/modern/Wizard/Wizard.js +24 -49
- package/dist/modern/Wizard/Wizard.js.map +1 -1
- package/dist/modern/Wizard/WizardActions/WizardActions.d.ts +2 -2
- package/dist/modern/Wizard/WizardActions/WizardActions.js +6 -30
- package/dist/modern/Wizard/WizardActions/WizardActions.js.map +1 -1
- package/dist/modern/Wizard/WizardActions/index.js.map +1 -1
- package/dist/modern/Wizard/WizardActions/styles.js +0 -1
- package/dist/modern/Wizard/WizardActions/styles.js.map +1 -1
- package/dist/modern/Wizard/WizardContainer/WizardContainer.js +7 -19
- package/dist/modern/Wizard/WizardContainer/WizardContainer.js.map +1 -1
- package/dist/modern/Wizard/WizardContainer/index.js.map +1 -1
- package/dist/modern/Wizard/WizardContainer/styles.js +0 -1
- package/dist/modern/Wizard/WizardContainer/styles.js.map +1 -1
- package/dist/modern/Wizard/WizardContent/LoadingContainer.js +4 -10
- package/dist/modern/Wizard/WizardContent/LoadingContainer.js.map +1 -1
- package/dist/modern/Wizard/WizardContent/WizardContent.d.ts +1 -1
- package/dist/modern/Wizard/WizardContent/WizardContent.js +1 -15
- package/dist/modern/Wizard/WizardContent/WizardContent.js.map +1 -1
- package/dist/modern/Wizard/WizardContent/index.js.map +1 -1
- package/dist/modern/Wizard/WizardContent/styles.js +0 -1
- package/dist/modern/Wizard/WizardContent/styles.js.map +1 -1
- package/dist/modern/Wizard/WizardContext/WizardContext.d.ts +12 -0
- package/dist/modern/Wizard/WizardContext/WizardContext.js +0 -2
- package/dist/modern/Wizard/WizardContext/WizardContext.js.map +1 -1
- package/dist/modern/Wizard/WizardContext/WizardContextProvider.d.ts +28 -0
- package/dist/modern/Wizard/WizardContext/WizardContextProvider.js +34 -0
- package/dist/modern/Wizard/WizardContext/WizardContextProvider.js.map +1 -0
- package/dist/modern/Wizard/WizardContext/index.d.ts +5 -0
- package/dist/modern/Wizard/WizardContext/index.js +1 -0
- package/dist/modern/Wizard/WizardContext/index.js.map +1 -1
- package/dist/modern/Wizard/WizardTitle/WizardTitle.d.ts +7 -9
- package/dist/modern/Wizard/WizardTitle/WizardTitle.js +3 -24
- package/dist/modern/Wizard/WizardTitle/WizardTitle.js.map +1 -1
- package/dist/modern/Wizard/WizardTitle/index.js.map +1 -1
- package/dist/modern/Wizard/WizardTitle/styles.js +0 -1
- package/dist/modern/Wizard/WizardTitle/styles.js.map +1 -1
- package/dist/modern/Wizard/index.d.ts +15 -0
- package/dist/modern/Wizard/index.js +1 -0
- package/dist/modern/Wizard/index.js.map +1 -1
- package/dist/modern/Wizard/styles.js +0 -1
- package/dist/modern/Wizard/styles.js.map +1 -1
- package/dist/modern/index.js +1 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -9,18 +9,14 @@ import styles from "./styles";
|
|
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
11
|
dayjs.extend(relativeTime);
|
|
12
|
-
|
|
13
12
|
const hideTooltip = evt => evt.target.scrollHeight <= evt.target.clientHeight;
|
|
14
|
-
|
|
15
13
|
const wrapperTooltip = (Component, label) => {
|
|
16
|
-
const ComponentFunction = () => Component;
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
const ComponentFunction = () => Component;
|
|
15
|
+
// override thr withTooltip styles as we want to use the styles of the component
|
|
19
16
|
return withTooltip(ComponentFunction, label, "top", hideTooltip, {
|
|
20
17
|
style: {}
|
|
21
18
|
});
|
|
22
19
|
};
|
|
23
|
-
|
|
24
20
|
const Notification = ({
|
|
25
21
|
classes,
|
|
26
22
|
className,
|
|
@@ -38,17 +34,13 @@ const Notification = ({
|
|
|
38
34
|
if (!isRead) {
|
|
39
35
|
return dayjs(date).fromNow();
|
|
40
36
|
}
|
|
41
|
-
|
|
42
37
|
const d = dayjs(date);
|
|
43
38
|
let format = "D MMMM YYYY, h:mm A";
|
|
44
|
-
|
|
45
39
|
if (d.isSame(Date.now(), "week")) {
|
|
46
40
|
format = "ddd, h:mm A";
|
|
47
41
|
}
|
|
48
|
-
|
|
49
42
|
return d.format(format);
|
|
50
43
|
};
|
|
51
|
-
|
|
52
44
|
const NotificationWithTooltip = wrapperTooltip( /*#__PURE__*/_jsx("div", {
|
|
53
45
|
className: classes.messageContainer,
|
|
54
46
|
children: /*#__PURE__*/_jsx(HvTypography, {
|
|
@@ -84,7 +76,6 @@ const Notification = ({
|
|
|
84
76
|
})]
|
|
85
77
|
});
|
|
86
78
|
};
|
|
87
|
-
|
|
88
79
|
process.env.NODE_ENV !== "production" ? Notification.propTypes = {
|
|
89
80
|
/**
|
|
90
81
|
* A Jss Object used to override or extend the component styles.
|
|
@@ -94,113 +85,91 @@ process.env.NODE_ENV !== "production" ? Notification.propTypes = {
|
|
|
94
85
|
* Styles applied to the component root of the accordion.
|
|
95
86
|
*/
|
|
96
87
|
root: PropTypes.string,
|
|
97
|
-
|
|
98
88
|
/**
|
|
99
89
|
* Styles applied to the notification wrapper.
|
|
100
90
|
*/
|
|
101
91
|
notificationWrapper: PropTypes.string,
|
|
102
|
-
|
|
103
92
|
/**
|
|
104
93
|
* Styles applied to the notification wrapper when the actions dropdown is open.
|
|
105
94
|
*/
|
|
106
95
|
notificationWrapperDropdown: PropTypes.string,
|
|
107
|
-
|
|
108
96
|
/**
|
|
109
97
|
* Styles applied to the notification icon container.
|
|
110
98
|
*/
|
|
111
99
|
iconContainer: PropTypes.string,
|
|
112
|
-
|
|
113
100
|
/**
|
|
114
101
|
* Styles applied to the notification message container.
|
|
115
102
|
*/
|
|
116
103
|
messageContainer: PropTypes.string,
|
|
117
|
-
|
|
118
104
|
/**
|
|
119
105
|
* Styles applied to the notification time container.
|
|
120
106
|
*/
|
|
121
107
|
timeContainer: PropTypes.string,
|
|
122
|
-
|
|
123
108
|
/**
|
|
124
109
|
* Styles applied to the notification bullet.
|
|
125
110
|
*/
|
|
126
111
|
bullet: PropTypes.string,
|
|
127
|
-
|
|
128
112
|
/**
|
|
129
113
|
* Styles applied to the content when it is hidden.
|
|
130
114
|
*/
|
|
131
115
|
hide: PropTypes.string,
|
|
132
|
-
|
|
133
116
|
/**
|
|
134
117
|
* Styles applied to the notification time indicator.
|
|
135
118
|
*/
|
|
136
119
|
time: PropTypes.string,
|
|
137
|
-
|
|
138
120
|
/**
|
|
139
121
|
* Styles applied to the notification is read.
|
|
140
122
|
*/
|
|
141
123
|
read: PropTypes.string,
|
|
142
|
-
|
|
143
124
|
/**
|
|
144
125
|
* Styles applied when the notification dropdown is open.
|
|
145
126
|
*/
|
|
146
127
|
notificationDropdownOpen: PropTypes.string,
|
|
147
|
-
|
|
148
128
|
/**
|
|
149
129
|
* Styles applied to the notification message actions dropdown.
|
|
150
130
|
*/
|
|
151
131
|
notificationActionWrapper: PropTypes.string,
|
|
152
|
-
|
|
153
132
|
/**
|
|
154
133
|
* Styles applied to the notification when clickable
|
|
155
134
|
*/
|
|
156
135
|
clickable: PropTypes.string
|
|
157
136
|
}).isRequired,
|
|
158
|
-
|
|
159
137
|
/**
|
|
160
138
|
* Class names to be applied to the accordion.
|
|
161
139
|
*/
|
|
162
140
|
className: PropTypes.string,
|
|
163
|
-
|
|
164
141
|
/**
|
|
165
142
|
* Notification id
|
|
166
143
|
*/
|
|
167
144
|
notificationId: PropTypes.string,
|
|
168
|
-
|
|
169
145
|
/**
|
|
170
146
|
* Title of the notification
|
|
171
147
|
*/
|
|
172
148
|
title: PropTypes.string.isRequired,
|
|
173
|
-
|
|
174
149
|
/**
|
|
175
150
|
* 'true' if the notification has been read or 'false' if it has not been read
|
|
176
151
|
*/
|
|
177
152
|
isRead: PropTypes.bool.isRequired,
|
|
178
|
-
|
|
179
153
|
/**
|
|
180
154
|
* date the notification was created
|
|
181
155
|
*/
|
|
182
156
|
date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
|
|
183
|
-
|
|
184
157
|
/**
|
|
185
158
|
* renderable icon that denotes the status of the notification
|
|
186
159
|
*/
|
|
187
160
|
icon: PropTypes.element,
|
|
188
|
-
|
|
189
161
|
/**
|
|
190
162
|
* Click action applied to the notification
|
|
191
163
|
*/
|
|
192
164
|
onClick: PropTypes.func,
|
|
193
|
-
|
|
194
165
|
/**
|
|
195
166
|
* On Key Press action applied to the notification
|
|
196
167
|
*/
|
|
197
168
|
onKeyPress: PropTypes.func,
|
|
198
|
-
|
|
199
169
|
/**
|
|
200
170
|
* Actions to be executed by the notification, available in the dropdown menu
|
|
201
171
|
*/
|
|
202
172
|
rightContainer: PropTypes.node,
|
|
203
|
-
|
|
204
173
|
/**
|
|
205
174
|
* Denotes index of clicked notification
|
|
206
175
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","clickable","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n const ComponentFunction = () => Component;\n // override thr withTooltip styles as we want to use the styles of the component\n return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n classes,\n className,\n notificationId,\n title,\n isRead,\n icon,\n date,\n onClick,\n onKeyPress,\n rightContainer,\n isHighlighted,\n}) => {\n const getTime = () => {\n if (!isRead) {\n return dayjs(date).fromNow();\n }\n\n const d = dayjs(date);\n let format = \"D MMMM YYYY, h:mm A\";\n\n if (d.isSame(Date.now(), \"week\")) {\n format = \"ddd, h:mm A\";\n }\n\n return d.format(format);\n };\n\n const NotificationWithTooltip = wrapperTooltip(\n <div className={classes.messageContainer}>\n <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n </div>,\n title\n );\n\n return (\n <div\n onClick={(event) => onClick?.(event, notificationId)}\n onKeyPress={(event) => onKeyPress?.(event, notificationId)}\n className={clsx(className, classes.root, {\n [classes.notificationWrapperDropdown]: isHighlighted,\n [classes.read]: isRead,\n })}\n role=\"button\"\n tabIndex={0}\n >\n <div\n className={clsx(classes.notificationWrapper, {\n [classes.notificationDropdownOpen]: isHighlighted,\n [classes.clickable]: !!onClick,\n })}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div>\n <NotificationWithTooltip />\n <div className={classes.timeContainer}>\n <div\n className={clsx(classes.bullet, {\n [classes.hide]: isRead,\n })}\n />\n <div className={classes.time}>{getTime()}</div>\n </div>\n </div>\n </div>\n <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n </div>\n );\n};\n\nNotification.propTypes = {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root of the accordion.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the notification wrapper.\n */\n notificationWrapper: PropTypes.string,\n\n /**\n * Styles applied to the notification wrapper when the actions dropdown is open.\n */\n notificationWrapperDropdown: PropTypes.string,\n\n /**\n * Styles applied to the notification icon container.\n */\n iconContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification message container.\n */\n messageContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification time container.\n */\n timeContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification bullet.\n */\n bullet: PropTypes.string,\n\n /**\n * Styles applied to the content when it is hidden.\n */\n hide: PropTypes.string,\n\n /**\n * Styles applied to the notification time indicator.\n */\n time: PropTypes.string,\n /**\n * Styles applied to the notification is read.\n */\n read: PropTypes.string,\n /**\n * Styles applied when the notification dropdown is open.\n */\n notificationDropdownOpen: PropTypes.string,\n\n /**\n * Styles applied to the notification message actions dropdown.\n */\n notificationActionWrapper: PropTypes.string,\n /**\n * Styles applied to the notification when clickable\n */\n clickable: PropTypes.string,\n }).isRequired,\n\n /**\n * Class names to be applied to the accordion.\n */\n className: PropTypes.string,\n /**\n * Notification id\n */\n notificationId: PropTypes.string,\n /**\n * Title of the notification\n */\n title: PropTypes.string.isRequired,\n /**\n * 'true' if the notification has been read or 'false' if it has not been read\n */\n isRead: PropTypes.bool.isRequired,\n /**\n * date the notification was created\n */\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n /**\n * renderable icon that denotes the status of the notification\n */\n icon: PropTypes.element,\n /**\n * Click action applied to the notification\n */\n onClick: PropTypes.func,\n /**\n * On Key Press action applied to the notification\n */\n onKeyPress: PropTypes.func,\n /**\n * Actions to be executed by the notification, available in the dropdown menu\n */\n rightContainer: PropTypes.node,\n /**\n * Denotes index of clicked notification\n */\n isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Notification.js","names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","clickable","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@mui/styles\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n const ComponentFunction = () => Component;\n // override thr withTooltip styles as we want to use the styles of the component\n return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n classes,\n className,\n notificationId,\n title,\n isRead,\n icon,\n date,\n onClick,\n onKeyPress,\n rightContainer,\n isHighlighted,\n}) => {\n const getTime = () => {\n if (!isRead) {\n return dayjs(date).fromNow();\n }\n\n const d = dayjs(date);\n let format = \"D MMMM YYYY, h:mm A\";\n\n if (d.isSame(Date.now(), \"week\")) {\n format = \"ddd, h:mm A\";\n }\n\n return d.format(format);\n };\n\n const NotificationWithTooltip = wrapperTooltip(\n <div className={classes.messageContainer}>\n <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n </div>,\n title\n );\n\n return (\n <div\n onClick={(event) => onClick?.(event, notificationId)}\n onKeyPress={(event) => onKeyPress?.(event, notificationId)}\n className={clsx(className, classes.root, {\n [classes.notificationWrapperDropdown]: isHighlighted,\n [classes.read]: isRead,\n })}\n role=\"button\"\n tabIndex={0}\n >\n <div\n className={clsx(classes.notificationWrapper, {\n [classes.notificationDropdownOpen]: isHighlighted,\n [classes.clickable]: !!onClick,\n })}\n >\n <div className={classes.iconContainer}>{icon}</div>\n <div>\n <NotificationWithTooltip />\n <div className={classes.timeContainer}>\n <div\n className={clsx(classes.bullet, {\n [classes.hide]: isRead,\n })}\n />\n <div className={classes.time}>{getTime()}</div>\n </div>\n </div>\n </div>\n <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n </div>\n );\n};\n\nNotification.propTypes = {\n /**\n * A Jss Object used to override or extend the component styles.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root of the accordion.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the notification wrapper.\n */\n notificationWrapper: PropTypes.string,\n\n /**\n * Styles applied to the notification wrapper when the actions dropdown is open.\n */\n notificationWrapperDropdown: PropTypes.string,\n\n /**\n * Styles applied to the notification icon container.\n */\n iconContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification message container.\n */\n messageContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification time container.\n */\n timeContainer: PropTypes.string,\n\n /**\n * Styles applied to the notification bullet.\n */\n bullet: PropTypes.string,\n\n /**\n * Styles applied to the content when it is hidden.\n */\n hide: PropTypes.string,\n\n /**\n * Styles applied to the notification time indicator.\n */\n time: PropTypes.string,\n /**\n * Styles applied to the notification is read.\n */\n read: PropTypes.string,\n /**\n * Styles applied when the notification dropdown is open.\n */\n notificationDropdownOpen: PropTypes.string,\n\n /**\n * Styles applied to the notification message actions dropdown.\n */\n notificationActionWrapper: PropTypes.string,\n /**\n * Styles applied to the notification when clickable\n */\n clickable: PropTypes.string,\n }).isRequired,\n\n /**\n * Class names to be applied to the accordion.\n */\n className: PropTypes.string,\n /**\n * Notification id\n */\n notificationId: PropTypes.string,\n /**\n * Title of the notification\n */\n title: PropTypes.string.isRequired,\n /**\n * 'true' if the notification has been read or 'false' if it has not been read\n */\n isRead: PropTypes.bool.isRequired,\n /**\n * date the notification was created\n */\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n /**\n * renderable icon that denotes the status of the notification\n */\n icon: PropTypes.element,\n /**\n * Click action applied to the notification\n */\n onClick: PropTypes.func,\n /**\n * On Key Press action applied to the notification\n */\n onKeyPress: PropTypes.func,\n /**\n * Actions to be executed by the notification, available in the dropdown menu\n */\n rightContainer: PropTypes.node,\n /**\n * Denotes index of clicked notification\n */\n isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/NotificationPanel/Notification/index.js"],"sourcesContent":["export { default } from \"./Notification\";\n"],"mappings":"AAAA,SAASA,
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/NotificationPanel/Notification/index.js"],"sourcesContent":["export { default } from \"./Notification\";\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,gBAAgB"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
|
|
3
2
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
|
|
5
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
-
|
|
7
4
|
const outlineStyles = {
|
|
8
5
|
outlineColor: "#52A8EC",
|
|
9
6
|
outlineStyle: "solid",
|
|
@@ -11,7 +8,6 @@ const outlineStyles = {
|
|
|
11
8
|
outlineOffset: "-1px",
|
|
12
9
|
boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
|
|
13
10
|
};
|
|
14
|
-
|
|
15
11
|
const styles = theme => ({
|
|
16
12
|
root: {
|
|
17
13
|
display: "flex",
|
|
@@ -120,6 +116,5 @@ const styles = theme => ({
|
|
|
120
116
|
}
|
|
121
117
|
}
|
|
122
118
|
});
|
|
123
|
-
|
|
124
119
|
export default styles;
|
|
125
120
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","clickable","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"sourcesContent":["const outlineStyles = {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n root: {\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n margin: \"3px 3px 6px 3px\",\n \"&:hover\": {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo2,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"&$read\": {\n ...outlineStyles,\n },\n\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n notificationWrapper: {\n display: \"flex\",\n minHeight: \"72px\",\n marginRight: theme.hv.spacing.xs,\n color: theme.hv.palette.accent.acce1,\n padding: \"17px\",\n paddingRight: 0,\n\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n boxShadow: \"none\",\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&$clickable\": {\n cursor: \"pointer\",\n },\n },\n\n iconContainer: {\n width: \"32px\",\n minWidth: \"32px\",\n marginRight: `${theme.hv.spacing.sm}px`,\n },\n\n messageContainer: {\n width: \"196px\",\n maxWidth: \"196px\",\n display: \"-webkit-box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n wordBreak: \"break-all\",\n },\n\n title: {\n ...theme.hv.typography.highlightText,\n marginBottom: \"5px\",\n },\n timeContainer: {\n ...theme.hv.typography.vizText,\n display: \"flex\",\n alignItems: \"center\",\n },\n bullet: {\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n marginRight: \"4px\",\n backgroundColor: theme.hv.palette.accent.acce1,\n\n \"&$hide\": {\n display: \"none\",\n },\n },\n hide: {},\n read: {},\n clickable: {},\n notificationWrapperDropdown: {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n },\n },\n\n notificationDropdownOpen: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n\n notificationActionWrapper: {\n \"& > div\": {\n marginTop: 17,\n },\n },\n});\n\nexport default styles;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","clickable","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"sourcesContent":["const outlineStyles = {\n outlineColor: \"#52A8EC\",\n outlineStyle: \"solid\",\n outlineWidth: \"0px\",\n outlineOffset: \"-1px\",\n boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n root: {\n display: \"flex\",\n backgroundColor: theme.hv.palette.atmosphere.atmo1,\n margin: \"3px 3px 6px 3px\",\n \"&:hover\": {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo2,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n \"&:hover\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n \"&.focus-visible\": {\n ...outlineStyles,\n },\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"&$read\": {\n ...outlineStyles,\n },\n\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n },\n notificationWrapper: {\n display: \"flex\",\n minHeight: \"72px\",\n marginRight: theme.hv.spacing.xs,\n color: theme.hv.palette.accent.acce1,\n padding: \"17px\",\n paddingRight: 0,\n\n \"&:focus\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n boxShadow: \"none\",\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&.focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n },\n\n \"&$clickable\": {\n cursor: \"pointer\",\n },\n },\n\n iconContainer: {\n width: \"32px\",\n minWidth: \"32px\",\n marginRight: `${theme.hv.spacing.sm}px`,\n },\n\n messageContainer: {\n width: \"196px\",\n maxWidth: \"196px\",\n display: \"-webkit-box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n wordBreak: \"break-all\",\n },\n\n title: {\n ...theme.hv.typography.highlightText,\n marginBottom: \"5px\",\n },\n timeContainer: {\n ...theme.hv.typography.vizText,\n display: \"flex\",\n alignItems: \"center\",\n },\n bullet: {\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n marginRight: \"4px\",\n backgroundColor: theme.hv.palette.accent.acce1,\n\n \"&$hide\": {\n display: \"none\",\n },\n },\n hide: {},\n read: {},\n clickable: {},\n notificationWrapperDropdown: {\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n \"& $notificationActionWrapper\": {\n display: \"block\",\n },\n \"&$read\": {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n },\n },\n\n notificationDropdownOpen: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n\n notificationActionWrapper: {\n \"& > div\": {\n marginTop: 17,\n },\n },\n});\n\nexport default styles;\n"],"mappings":"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"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
const _excluded = ["id", "className", "classes", "open", "footer", "notifications", "hasNewNotifications", "emptyStatePanelTitle", "emptyStatePanelMessage", "emptyStatePanelIcon", "labels", "newNotificationsButtonAction", "locale"];
|
|
4
|
-
|
|
5
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
-
|
|
7
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
|
-
|
|
9
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
10
6
|
import React, { useState } from "react";
|
|
11
7
|
import PropTypes from "prop-types";
|
|
12
8
|
import clsx from "clsx";
|
|
@@ -29,34 +25,32 @@ const DEFAULT_LABELS = {
|
|
|
29
25
|
buttonLabel: "Update"
|
|
30
26
|
}
|
|
31
27
|
};
|
|
28
|
+
|
|
32
29
|
/**
|
|
33
30
|
* Notification Panel displays all of read and unread notifications. Still in development
|
|
34
31
|
*/
|
|
35
|
-
|
|
36
32
|
const HvNotificationPanel = _ref => {
|
|
37
33
|
let {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
34
|
+
id,
|
|
35
|
+
className,
|
|
36
|
+
classes,
|
|
37
|
+
open,
|
|
38
|
+
footer,
|
|
39
|
+
notifications,
|
|
40
|
+
hasNewNotifications = false,
|
|
41
|
+
emptyStatePanelTitle = "No notifications",
|
|
42
|
+
emptyStatePanelMessage = "You currently have no notifications.",
|
|
43
|
+
emptyStatePanelIcon,
|
|
44
|
+
labels: labelsProp,
|
|
45
|
+
newNotificationsButtonAction,
|
|
46
|
+
locale: localeProp
|
|
47
|
+
} = _ref,
|
|
48
|
+
others = _objectWithoutProperties(_ref, _excluded);
|
|
54
49
|
const localeFromProvider = useLocale();
|
|
55
50
|
const locale = localeProp || localeFromProvider;
|
|
56
51
|
const [highlighted, setHighlighted] = useState(undefined);
|
|
57
52
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
58
53
|
const labels = useLabels(DEFAULT_LABELS, labelsProp);
|
|
59
|
-
|
|
60
54
|
const generateNotificationsActions = (notificationId, onToggle, actions) => {
|
|
61
55
|
const expand = notificationId === highlighted;
|
|
62
56
|
const dList = [...actions.values];
|
|
@@ -64,25 +58,21 @@ const HvNotificationPanel = _ref => {
|
|
|
64
58
|
expanded: expand,
|
|
65
59
|
onClick: (event, item) => {
|
|
66
60
|
var _item$callback;
|
|
67
|
-
|
|
68
61
|
setHighlighted(undefined);
|
|
69
62
|
item === null || item === void 0 ? void 0 : (_item$callback = item.callback) === null || _item$callback === void 0 ? void 0 : _item$callback.call(item, event, notificationId);
|
|
70
63
|
},
|
|
71
64
|
dataList: dList,
|
|
72
65
|
onToggle: (event, s) => {
|
|
73
66
|
onToggle === null || onToggle === void 0 ? void 0 : onToggle(event, s);
|
|
74
|
-
|
|
75
67
|
if (s) {
|
|
76
68
|
setHighlighted(notificationId);
|
|
77
69
|
} else {
|
|
78
70
|
setHighlighted(undefined);
|
|
79
71
|
}
|
|
80
|
-
|
|
81
72
|
setIsExpanded(!isExpanded);
|
|
82
73
|
}
|
|
83
74
|
}, actions.dropDownMenuProps));
|
|
84
75
|
};
|
|
85
|
-
|
|
86
76
|
const notificationElementGenerator = notificationsToRender => {
|
|
87
77
|
return notificationsToRender.map(notification => {
|
|
88
78
|
const notificationIsHighlighted = highlighted === notification.id;
|
|
@@ -100,11 +90,8 @@ const HvNotificationPanel = _ref => {
|
|
|
100
90
|
}, notification.id);
|
|
101
91
|
});
|
|
102
92
|
};
|
|
103
|
-
|
|
104
93
|
const hasNotifications = notifications.length > 0;
|
|
105
|
-
|
|
106
94
|
const renderNotifications = notificationsToRender => notificationElementGenerator(notificationsToRender);
|
|
107
|
-
|
|
108
95
|
return /*#__PURE__*/_jsxs(HvPanel, _objectSpread(_objectSpread({
|
|
109
96
|
id: id,
|
|
110
97
|
className: clsx(className, classes.root, open === false && classes.closed, open && classes.open)
|
|
@@ -131,25 +118,21 @@ const HvNotificationPanel = _ref => {
|
|
|
131
118
|
})]
|
|
132
119
|
}));
|
|
133
120
|
};
|
|
134
|
-
|
|
135
121
|
process.env.NODE_ENV !== "production" ? HvNotificationPanel.propTypes = {
|
|
136
122
|
/**
|
|
137
123
|
* Id to be applied to the root node of the panel.
|
|
138
124
|
*/
|
|
139
125
|
id: PropTypes.string,
|
|
140
|
-
|
|
141
126
|
/**
|
|
142
127
|
* Class names to be applied to the root element.
|
|
143
128
|
*/
|
|
144
129
|
className: PropTypes.string,
|
|
145
|
-
|
|
146
130
|
/**
|
|
147
131
|
* 'true' if panel is open or 'false' if the panel is not open
|
|
148
132
|
*
|
|
149
133
|
* @deprecated This logic should be external, i.e. using the HvAppSwitcherPanel inside a Drawer component.
|
|
150
134
|
*/
|
|
151
135
|
open: deprecatedPropType(PropTypes.bool),
|
|
152
|
-
|
|
153
136
|
/**
|
|
154
137
|
* A Jss Object used to override or extend the styles applied.
|
|
155
138
|
*/
|
|
@@ -158,43 +141,35 @@ process.env.NODE_ENV !== "production" ? HvNotificationPanel.propTypes = {
|
|
|
158
141
|
* styles object applied to the root
|
|
159
142
|
*/
|
|
160
143
|
root: PropTypes.string,
|
|
161
|
-
|
|
162
144
|
/**
|
|
163
145
|
* styles object applied to the root when closed
|
|
164
146
|
*/
|
|
165
147
|
closed: PropTypes.string,
|
|
166
|
-
|
|
167
148
|
/**
|
|
168
149
|
* styles object applied to the root when open
|
|
169
150
|
*/
|
|
170
151
|
open: PropTypes.string,
|
|
171
|
-
|
|
172
152
|
/**
|
|
173
153
|
* styles object applied to the panel
|
|
174
154
|
*/
|
|
175
155
|
panel: PropTypes.string,
|
|
176
|
-
|
|
177
156
|
/**
|
|
178
157
|
* styles object applied to the action bar
|
|
179
158
|
*/
|
|
180
159
|
actionBar: PropTypes.string,
|
|
181
|
-
|
|
182
160
|
/**
|
|
183
161
|
* styles object applied to the root of the action bar
|
|
184
162
|
*/
|
|
185
163
|
actionBarRoot: PropTypes.string,
|
|
186
|
-
|
|
187
164
|
/**
|
|
188
165
|
* styles object applied to the new notification indicator
|
|
189
166
|
*/
|
|
190
167
|
notificationsIndicator: PropTypes.string,
|
|
191
|
-
|
|
192
168
|
/**
|
|
193
169
|
* styles object applied to the empty state panel
|
|
194
170
|
*/
|
|
195
171
|
emptyState: PropTypes.string
|
|
196
172
|
}).isRequired,
|
|
197
|
-
|
|
198
173
|
/**
|
|
199
174
|
* The properties of the notifications to be rendered in the Panel.
|
|
200
175
|
*/
|
|
@@ -214,32 +189,26 @@ process.env.NODE_ENV !== "production" ? HvNotificationPanel.propTypes = {
|
|
|
214
189
|
dropDownMenuProps: PropTypes.instanceOf(Object)
|
|
215
190
|
})
|
|
216
191
|
})),
|
|
217
|
-
|
|
218
192
|
/**
|
|
219
193
|
* Whether to render the new notifications indicator
|
|
220
194
|
*/
|
|
221
195
|
hasNewNotifications: PropTypes.bool,
|
|
222
|
-
|
|
223
196
|
/**
|
|
224
197
|
* Action buttons to render in footer
|
|
225
198
|
*/
|
|
226
199
|
footer: PropTypes.node,
|
|
227
|
-
|
|
228
200
|
/**
|
|
229
201
|
* Title of the EmptyStatePanel
|
|
230
202
|
*/
|
|
231
203
|
emptyStatePanelTitle: PropTypes.string,
|
|
232
|
-
|
|
233
204
|
/**
|
|
234
205
|
* Message of the EmptyStatePanel
|
|
235
206
|
*/
|
|
236
207
|
emptyStatePanelMessage: PropTypes.string,
|
|
237
|
-
|
|
238
208
|
/**
|
|
239
209
|
* Empty Panel custom Icon
|
|
240
210
|
*/
|
|
241
211
|
emptyStatePanelIcon: PropTypes.node,
|
|
242
|
-
|
|
243
212
|
/**
|
|
244
213
|
* Labels to apply to the Panel
|
|
245
214
|
*/
|
|
@@ -251,7 +220,6 @@ process.env.NODE_ENV !== "production" ? HvNotificationPanel.propTypes = {
|
|
|
251
220
|
olderNotifications: PropTypes.string,
|
|
252
221
|
newNotifications: PropTypes.string
|
|
253
222
|
},
|
|
254
|
-
|
|
255
223
|
/**
|
|
256
224
|
* Labels to apply to the element of the New Notifications Indicator
|
|
257
225
|
*/
|
|
@@ -260,12 +228,10 @@ process.env.NODE_ENV !== "production" ? HvNotificationPanel.propTypes = {
|
|
|
260
228
|
buttonLabel: PropTypes.string
|
|
261
229
|
}
|
|
262
230
|
}),
|
|
263
|
-
|
|
264
231
|
/**
|
|
265
232
|
* Function to be supplied to the notification update button
|
|
266
233
|
*/
|
|
267
234
|
newNotificationsButtonAction: PropTypes.func,
|
|
268
|
-
|
|
269
235
|
/**
|
|
270
236
|
* The locale to be used on the notification date, if undefined it will use the one from the HvProvider
|
|
271
237
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationPanel.js","names":["React","useState","PropTypes","clsx","deprecatedPropType","withStyles","HvPanel","HvActionBar","HvDropDownMenu","setId","useLabels","useLocale","styles","Notification","EmptyStatePanel","NotificationsIndicator","DEFAULT_LABELS","notificationGroupHeader","newNotifications","olderNotifications","notificationIndicator","label","buttonLabel","HvNotificationPanel","id","className","classes","open","footer","notifications","hasNewNotifications","emptyStatePanelTitle","emptyStatePanelMessage","emptyStatePanelIcon","labels","labelsProp","newNotificationsButtonAction","locale","localeProp","others","localeFromProvider","highlighted","setHighlighted","undefined","isExpanded","setIsExpanded","generateNotificationsActions","notificationId","onToggle","actions","expand","dList","values","event","item","callback","s","dropDownMenuProps","notificationElementGenerator","notificationsToRender","map","notification","notificationIsHighlighted","title","isRead","icon","date","onClick","onKeyPress","hasNotifications","length","renderNotifications","root","closed","panel","emptyState","actionBarRoot","actionBar","propTypes","string","bool","shape","notificationsIndicator","isRequired","arrayOf","oneOfType","number","object","element","func","action","instanceOf","Object","node","name"],"sources":["../../../src/NotificationPanel/NotificationPanel.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { deprecatedPropType } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\n\nimport {\n HvPanel,\n HvActionBar,\n HvDropDownMenu,\n setId,\n useLabels,\n useLocale,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport styles from \"./styles\";\n\nimport Notification from \"./Notification\";\nimport EmptyStatePanel from \"./EmptyStatePanel\";\nimport NotificationsIndicator from \"./NotificationsIndicator\";\n\nconst DEFAULT_LABELS = {\n notificationGroupHeader: {\n newNotifications: \"New\",\n olderNotifications: \"Earlier\",\n },\n notificationIndicator: {\n label: \"You have new notifications\",\n buttonLabel: \"Update\",\n },\n};\n\n/**\n * Notification Panel displays all of read and unread notifications. Still in development\n */\nconst HvNotificationPanel = ({\n id,\n className,\n classes,\n open,\n footer,\n notifications,\n hasNewNotifications = false,\n emptyStatePanelTitle = \"No notifications\",\n emptyStatePanelMessage = \"You currently have no notifications.\",\n emptyStatePanelIcon,\n labels: labelsProp,\n newNotificationsButtonAction,\n locale: localeProp,\n ...others\n}) => {\n const localeFromProvider = useLocale();\n\n const locale = localeProp || localeFromProvider;\n\n const [highlighted, setHighlighted] = useState(undefined);\n const [isExpanded, setIsExpanded] = useState(false);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const generateNotificationsActions = (notificationId, onToggle, actions) => {\n const expand = notificationId === highlighted;\n const dList = [...actions.values];\n return (\n <HvDropDownMenu\n expanded={expand}\n onClick={(event, item) => {\n setHighlighted(undefined);\n item?.callback?.(event, notificationId);\n }}\n dataList={dList}\n onToggle={(event, s) => {\n onToggle?.(event, s);\n if (s) {\n setHighlighted(notificationId);\n } else {\n setHighlighted(undefined);\n }\n setIsExpanded(!isExpanded);\n }}\n {...actions.dropDownMenuProps}\n />\n );\n };\n\n const notificationElementGenerator = (notificationsToRender) => {\n return notificationsToRender.map((notification) => {\n const notificationIsHighlighted = highlighted === notification.id;\n return (\n <Notification\n key={notification.id}\n notificationId={notification.id}\n title={notification.title}\n isRead={notification.isRead}\n icon={notification.icon}\n date={notification.date}\n onClick={notification.onClick}\n onKeyPress={notification.onKeyPress}\n rightContainer={generateNotificationsActions(\n notification.id,\n notification.onToggle,\n notification.actions\n )}\n isHighlighted={notificationIsHighlighted}\n locale={locale}\n />\n );\n });\n };\n\n const hasNotifications = notifications.length > 0;\n\n const renderNotifications = (notificationsToRender) =>\n notificationElementGenerator(notificationsToRender);\n\n return (\n <HvPanel\n id={id}\n className={clsx(className, classes.root, {\n [classes.closed]: open === false,\n [classes.open]: open,\n })}\n {...others}\n >\n {hasNewNotifications && (\n <NotificationsIndicator\n labels={labels.notificationIndicator}\n onClick={newNotificationsButtonAction}\n />\n )}\n {hasNotifications ? (\n <div className={classes.panel}>\n {notifications.length > 0 && renderNotifications(notifications)}\n </div>\n ) : (\n <EmptyStatePanel\n id={setId(id, \"empty-state\")}\n title={emptyStatePanelTitle}\n message={emptyStatePanelMessage}\n icon={emptyStatePanelIcon}\n className={classes.emptyState}\n />\n )}\n {footer && (\n <HvActionBar\n id={setId(id, \"action-bar\")}\n classes={{\n root: classes.actionBarRoot,\n }}\n className={classes.actionBar}\n >\n {footer}\n </HvActionBar>\n )}\n </HvPanel>\n );\n};\n\nHvNotificationPanel.propTypes = {\n /**\n * Id to be applied to the root node of the panel.\n */\n id: PropTypes.string,\n /**\n * Class names to be applied to the root element.\n */\n className: PropTypes.string,\n /**\n * 'true' if panel is open or 'false' if the panel is not open\n *\n * @deprecated This logic should be external, i.e. using the HvAppSwitcherPanel inside a Drawer component.\n */\n open: deprecatedPropType(PropTypes.bool),\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * styles object applied to the root\n */\n root: PropTypes.string,\n /**\n * styles object applied to the root when closed\n */\n closed: PropTypes.string,\n /**\n * styles object applied to the root when open\n */\n open: PropTypes.string,\n /**\n * styles object applied to the panel\n */\n panel: PropTypes.string,\n /**\n * styles object applied to the action bar\n */\n actionBar: PropTypes.string,\n /**\n * styles object applied to the root of the action bar\n */\n actionBarRoot: PropTypes.string,\n /**\n * styles object applied to the new notification indicator\n */\n notificationsIndicator: PropTypes.string,\n /**\n * styles object applied to the empty state panel\n */\n emptyState: PropTypes.string,\n }).isRequired,\n /**\n * The properties of the notifications to be rendered in the Panel.\n */\n notifications: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n isRead: PropTypes.bool.isRequired,\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n icon: PropTypes.element,\n onClick: PropTypes.func,\n onKeyPress: PropTypes.func,\n onToggle: PropTypes.func,\n actions: PropTypes.shape({\n label: PropTypes.bool,\n action: PropTypes.string,\n callback: PropTypes.func,\n dropDownMenuProps: PropTypes.instanceOf(Object),\n }),\n })\n ),\n /**\n * Whether to render the new notifications indicator\n */\n hasNewNotifications: PropTypes.bool,\n /**\n * Action buttons to render in footer\n */\n footer: PropTypes.node,\n /**\n * Title of the EmptyStatePanel\n */\n emptyStatePanelTitle: PropTypes.string,\n /**\n * Message of the EmptyStatePanel\n */\n emptyStatePanelMessage: PropTypes.string,\n /**\n * Empty Panel custom Icon\n */\n emptyStatePanelIcon: PropTypes.node,\n /**\n * Labels to apply to the Panel\n */\n labels: PropTypes.shape({\n /**\n * Labels to apply to the groups separating newer and older notifications\n */\n notificationGroupHeader: {\n olderNotifications: PropTypes.string,\n newNotifications: PropTypes.string,\n },\n /**\n * Labels to apply to the element of the New Notifications Indicator\n */\n notificationIndicator: {\n label: PropTypes.string,\n buttonLabel: PropTypes.string,\n },\n }),\n /**\n * Function to be supplied to the notification update button\n */\n newNotificationsButtonAction: PropTypes.func,\n /**\n * The locale to be used on the notification date, if undefined it will use the one from the HvProvider\n */\n locale: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanel\" })(HvNotificationPanel);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NotificationPanel.js","names":["React","useState","PropTypes","clsx","deprecatedPropType","withStyles","HvPanel","HvActionBar","HvDropDownMenu","setId","useLabels","useLocale","styles","Notification","EmptyStatePanel","NotificationsIndicator","DEFAULT_LABELS","notificationGroupHeader","newNotifications","olderNotifications","notificationIndicator","label","buttonLabel","HvNotificationPanel","id","className","classes","open","footer","notifications","hasNewNotifications","emptyStatePanelTitle","emptyStatePanelMessage","emptyStatePanelIcon","labels","labelsProp","newNotificationsButtonAction","locale","localeProp","others","localeFromProvider","highlighted","setHighlighted","undefined","isExpanded","setIsExpanded","generateNotificationsActions","notificationId","onToggle","actions","expand","dList","values","event","item","callback","s","dropDownMenuProps","notificationElementGenerator","notificationsToRender","map","notification","notificationIsHighlighted","title","isRead","icon","date","onClick","onKeyPress","hasNotifications","length","renderNotifications","root","closed","panel","emptyState","actionBarRoot","actionBar","propTypes","string","bool","shape","notificationsIndicator","isRequired","arrayOf","oneOfType","number","object","element","func","action","instanceOf","Object","node","name"],"sources":["../../../src/NotificationPanel/NotificationPanel.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { deprecatedPropType } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\n\nimport {\n HvPanel,\n HvActionBar,\n HvDropDownMenu,\n setId,\n useLabels,\n useLocale,\n} from \"@hitachivantara/uikit-react-core\";\n\nimport styles from \"./styles\";\n\nimport Notification from \"./Notification\";\nimport EmptyStatePanel from \"./EmptyStatePanel\";\nimport NotificationsIndicator from \"./NotificationsIndicator\";\n\nconst DEFAULT_LABELS = {\n notificationGroupHeader: {\n newNotifications: \"New\",\n olderNotifications: \"Earlier\",\n },\n notificationIndicator: {\n label: \"You have new notifications\",\n buttonLabel: \"Update\",\n },\n};\n\n/**\n * Notification Panel displays all of read and unread notifications. Still in development\n */\nconst HvNotificationPanel = ({\n id,\n className,\n classes,\n open,\n footer,\n notifications,\n hasNewNotifications = false,\n emptyStatePanelTitle = \"No notifications\",\n emptyStatePanelMessage = \"You currently have no notifications.\",\n emptyStatePanelIcon,\n labels: labelsProp,\n newNotificationsButtonAction,\n locale: localeProp,\n ...others\n}) => {\n const localeFromProvider = useLocale();\n\n const locale = localeProp || localeFromProvider;\n\n const [highlighted, setHighlighted] = useState(undefined);\n const [isExpanded, setIsExpanded] = useState(false);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const generateNotificationsActions = (notificationId, onToggle, actions) => {\n const expand = notificationId === highlighted;\n const dList = [...actions.values];\n return (\n <HvDropDownMenu\n expanded={expand}\n onClick={(event, item) => {\n setHighlighted(undefined);\n item?.callback?.(event, notificationId);\n }}\n dataList={dList}\n onToggle={(event, s) => {\n onToggle?.(event, s);\n if (s) {\n setHighlighted(notificationId);\n } else {\n setHighlighted(undefined);\n }\n setIsExpanded(!isExpanded);\n }}\n {...actions.dropDownMenuProps}\n />\n );\n };\n\n const notificationElementGenerator = (notificationsToRender) => {\n return notificationsToRender.map((notification) => {\n const notificationIsHighlighted = highlighted === notification.id;\n return (\n <Notification\n key={notification.id}\n notificationId={notification.id}\n title={notification.title}\n isRead={notification.isRead}\n icon={notification.icon}\n date={notification.date}\n onClick={notification.onClick}\n onKeyPress={notification.onKeyPress}\n rightContainer={generateNotificationsActions(\n notification.id,\n notification.onToggle,\n notification.actions\n )}\n isHighlighted={notificationIsHighlighted}\n locale={locale}\n />\n );\n });\n };\n\n const hasNotifications = notifications.length > 0;\n\n const renderNotifications = (notificationsToRender) =>\n notificationElementGenerator(notificationsToRender);\n\n return (\n <HvPanel\n id={id}\n className={clsx(className, classes.root, {\n [classes.closed]: open === false,\n [classes.open]: open,\n })}\n {...others}\n >\n {hasNewNotifications && (\n <NotificationsIndicator\n labels={labels.notificationIndicator}\n onClick={newNotificationsButtonAction}\n />\n )}\n {hasNotifications ? (\n <div className={classes.panel}>\n {notifications.length > 0 && renderNotifications(notifications)}\n </div>\n ) : (\n <EmptyStatePanel\n id={setId(id, \"empty-state\")}\n title={emptyStatePanelTitle}\n message={emptyStatePanelMessage}\n icon={emptyStatePanelIcon}\n className={classes.emptyState}\n />\n )}\n {footer && (\n <HvActionBar\n id={setId(id, \"action-bar\")}\n classes={{\n root: classes.actionBarRoot,\n }}\n className={classes.actionBar}\n >\n {footer}\n </HvActionBar>\n )}\n </HvPanel>\n );\n};\n\nHvNotificationPanel.propTypes = {\n /**\n * Id to be applied to the root node of the panel.\n */\n id: PropTypes.string,\n /**\n * Class names to be applied to the root element.\n */\n className: PropTypes.string,\n /**\n * 'true' if panel is open or 'false' if the panel is not open\n *\n * @deprecated This logic should be external, i.e. using the HvAppSwitcherPanel inside a Drawer component.\n */\n open: deprecatedPropType(PropTypes.bool),\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * styles object applied to the root\n */\n root: PropTypes.string,\n /**\n * styles object applied to the root when closed\n */\n closed: PropTypes.string,\n /**\n * styles object applied to the root when open\n */\n open: PropTypes.string,\n /**\n * styles object applied to the panel\n */\n panel: PropTypes.string,\n /**\n * styles object applied to the action bar\n */\n actionBar: PropTypes.string,\n /**\n * styles object applied to the root of the action bar\n */\n actionBarRoot: PropTypes.string,\n /**\n * styles object applied to the new notification indicator\n */\n notificationsIndicator: PropTypes.string,\n /**\n * styles object applied to the empty state panel\n */\n emptyState: PropTypes.string,\n }).isRequired,\n /**\n * The properties of the notifications to be rendered in the Panel.\n */\n notifications: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n isRead: PropTypes.bool.isRequired,\n date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n icon: PropTypes.element,\n onClick: PropTypes.func,\n onKeyPress: PropTypes.func,\n onToggle: PropTypes.func,\n actions: PropTypes.shape({\n label: PropTypes.bool,\n action: PropTypes.string,\n callback: PropTypes.func,\n dropDownMenuProps: PropTypes.instanceOf(Object),\n }),\n })\n ),\n /**\n * Whether to render the new notifications indicator\n */\n hasNewNotifications: PropTypes.bool,\n /**\n * Action buttons to render in footer\n */\n footer: PropTypes.node,\n /**\n * Title of the EmptyStatePanel\n */\n emptyStatePanelTitle: PropTypes.string,\n /**\n * Message of the EmptyStatePanel\n */\n emptyStatePanelMessage: PropTypes.string,\n /**\n * Empty Panel custom Icon\n */\n emptyStatePanelIcon: PropTypes.node,\n /**\n * Labels to apply to the Panel\n */\n labels: PropTypes.shape({\n /**\n * Labels to apply to the groups separating newer and older notifications\n */\n notificationGroupHeader: {\n olderNotifications: PropTypes.string,\n newNotifications: PropTypes.string,\n },\n /**\n * Labels to apply to the element of the New Notifications Indicator\n */\n notificationIndicator: {\n label: PropTypes.string,\n buttonLabel: PropTypes.string,\n },\n }),\n /**\n * Function to be supplied to the notification update button\n */\n newNotificationsButtonAction: PropTypes.func,\n /**\n * The locale to be used on the notification date, if undefined it will use the one from the HvProvider\n */\n locale: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanel\" })(HvNotificationPanel);\n"],"mappings":"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"}
|