@stack-spot/portal-components 2.0.0 → 2.0.2
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/CHANGELOG.md +14 -0
- package/dist/components/Notifications/NotificationComponent.d.ts.map +1 -1
- package/dist/components/Notifications/NotificationComponent.js +30 -5
- package/dist/components/Notifications/NotificationComponent.js.map +1 -1
- package/dist/components/Notifications/NotificationItem.d.ts +2 -1
- package/dist/components/Notifications/NotificationItem.d.ts.map +1 -1
- package/dist/components/Notifications/NotificationItem.js +5 -5
- package/dist/components/Notifications/NotificationItem.js.map +1 -1
- package/dist/components/SelectionList.d.ts.map +1 -1
- package/dist/components/SelectionList.js +6 -2
- package/dist/components/SelectionList.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Notifications/NotificationComponent.tsx +39 -9
- package/src/components/Notifications/NotificationItem.tsx +22 -16
- package/src/components/SelectionList.tsx +9 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.0.2](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.0.1...portal-components@v2.0.2) (2024-07-04)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* accessibility adjustments on notifications ([894b6b6](https://github.com/stack-spot/portal-commons/commit/894b6b6357b5f0e3bc08f13123c991d25dc131e9))
|
|
9
|
+
|
|
10
|
+
## [2.0.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.0.0...portal-components@v2.0.1) (2024-07-02)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* 547 page selector ([bb82b81](https://github.com/stack-spot/portal-commons/commit/bb82b810d8b3a02997199f8bd8973b180dc681e3))
|
|
16
|
+
|
|
3
17
|
## [2.0.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.6.0...portal-components@v2.0.0) (2024-06-28)
|
|
4
18
|
|
|
5
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAqC,MAAM,OAAO,CAAA;AAEvE,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK1D,OAAO,EAAoB,uBAAuB,EAAE,qBAAqB,EAAc,MAAM,SAAS,CAAA;AAEtG,UAAU,KAAK;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAkID,UAAU,KAAK;IACb,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;IACnG,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC9D,oBAAoB,EAAE,YAAY,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,6NAK/B,KAAK,4CAsHP,CAAA"}
|
|
@@ -4,7 +4,7 @@ import { Bell, TimesMini } from '@citric/icons';
|
|
|
4
4
|
import { IconButton } from '@citric/ui';
|
|
5
5
|
import { listToClass, theme } from '@stack-spot/portal-theme';
|
|
6
6
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
7
|
-
import { useState } from 'react';
|
|
7
|
+
import { useLayoutEffect, useRef, useState } from 'react';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
9
|
import { AsyncContent } from '../AsyncContent.js';
|
|
10
10
|
import { InfiniteScroll } from '../InfiniteScroll.js';
|
|
@@ -22,8 +22,8 @@ const NotificationsComponent = styled(Flex) `
|
|
|
22
22
|
width: 400px;
|
|
23
23
|
|
|
24
24
|
&.visible {
|
|
25
|
-
min-height: 400px;
|
|
26
25
|
visibility: visible;
|
|
26
|
+
min-height: 400px;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.content {
|
|
@@ -91,15 +91,40 @@ const NotificationsFilter = ({ type, onChangeFilterType }) => {
|
|
|
91
91
|
export const NotificationComponent = ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary = false, }) => {
|
|
92
92
|
const t = useTranslate(dictionary);
|
|
93
93
|
const [visible, setVisible] = useState(false);
|
|
94
|
+
const seeAllButtonRef = useRef(null);
|
|
94
95
|
const updateType = (updatedType) => {
|
|
95
96
|
onUpdateType(updatedType);
|
|
96
97
|
};
|
|
98
|
+
useLayoutEffect(() => {
|
|
99
|
+
const handleKeyDown = (event) => {
|
|
100
|
+
if (event.key === 'Escape') {
|
|
101
|
+
const focusedElement = document.activeElement;
|
|
102
|
+
const notificationItems = document.querySelectorAll('[id^="notificationItem-"]');
|
|
103
|
+
let isFocusedOnNotificationItem = false;
|
|
104
|
+
notificationItems.forEach((item) => {
|
|
105
|
+
if (item.contains(focusedElement)) {
|
|
106
|
+
isFocusedOnNotificationItem = true;
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
if (isFocusedOnNotificationItem) {
|
|
110
|
+
seeAllButtonRef?.current?.focus();
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
setVisible(false);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
118
|
+
return () => {
|
|
119
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
120
|
+
};
|
|
121
|
+
}, []);
|
|
97
122
|
return (_jsxs(Flex, { sx: { position: 'relative' }, children: [_jsx(IconButton, { "aria-label": t.openNotifications, onClick: () => {
|
|
98
123
|
onClickViewNotifications();
|
|
99
|
-
setVisible(
|
|
100
|
-
}, sx: { border: 'none', bg: 'transparent' }, children: _jsx(IconBox, { size: "md", className: "notificationsTour", children: _jsx(Bell, {}) }) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, "aria-label": t.hasUnread, children: _jsx(StatusCircle, { status: 'danger' }) }), visible && _jsx(Overlay, {}), _jsx(NotificationsComponent, { className: listToClass(['
|
|
124
|
+
setVisible(!visible);
|
|
125
|
+
}, sx: { border: 'none', bg: 'transparent' }, "aria-expanded": visible, children: _jsx(IconBox, { size: "md", className: "notificationsTour", children: _jsx(Bell, {}) }) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, "aria-label": t.hasUnread, children: _jsx(StatusCircle, { status: 'danger' }) }), visible && _jsx(Overlay, { onClick: () => setVisible(false) }), _jsx(NotificationsComponent, { className: listToClass(['notification-component', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { w: "100%", children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconButton, { onClick: () => setVisible(false), "aria-label": t.close, children: _jsx(IconBox, { size: "xs", children: _jsx(TimesMini, {}) }) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(ScrollView, { id: "scrollableNotifications", direction: "vertical", style: { maxHeight: 'calc(100vh - 300px)' }, children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, scrollableTarget: "scrollableNotifications", children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", flexDirection: "column", children: notifications?.map((item, index) => (_jsx(NotificationItem, { notification: item, id: `notificationItem-${index}`, isSummary: isSummary, onClickMarkReadUnread: (read, type) => onMarkAsReadUnread(item.id, read, type) }, item.id))) }) }) }) })
|
|
101
126
|
:
|
|
102
|
-
_jsx(_Fragment, { children: placeholderComponent }) })] }), _jsx(Flex, { w: "100%", pt: 3, children: _jsx(Button, { size: "sm", sx: { width: '100%' }, colorScheme: "inverse", appearance: "text", onClick: () => {
|
|
127
|
+
_jsx(_Fragment, { children: placeholderComponent }) })] }), _jsx(Flex, { w: "100%", pt: 3, children: _jsx(Button, { ref: seeAllButtonRef, size: "sm", sx: { width: '100%' }, colorScheme: "inverse", appearance: "text", onClick: () => {
|
|
103
128
|
setVisible(false);
|
|
104
129
|
onClickViewAll();
|
|
105
130
|
}, children: _jsx(Text, { appearance: "microtext1", children: t.seeAll }) }) })] }) })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAc,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAkD,UAAU,EAAE,MAAM,SAAS,CAAA;AAMtG,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAwB;;;;;;;;;;;;;;;;wBAgB3C,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;+BACf,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY;wBACtC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;kBAC5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;;;;;;;;;;;;;wBActC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;CAE7C,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;sBAMJ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;CAGrD,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;CAK5B,CAAA;AAaD;;;;GAIG;AACH,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE;IACxE,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACtE,OAAO,CAAC,KAAC,MAAM,IACb,UAAU,EAAC,MAAM,EACjB,IAAI,EAAC,QAAQ,gBACD,SAAS,kBACP,IAAI,KAAK,QAAQ,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAC3C,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,YAElE,KAAC,IAAI,IAAC,WAAW,EAAC,SAAS,EAAC,UAAU,EAAC,YAAY,YAChD,KAAK,GACD,GACA,CACR,CAAA;AACH,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAA4B,EAAE,EAAE;IACrF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,OAAO,CAAC,MAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,EAAC,GAAG,aAC1D,KAAC,MAAM,oBACS,CAAC,IAAI,EACnB,UAAU,EAAC,MAAM,EACjB,IAAI,EAAC,QAAQ,gBACD,CAAC,CAAC,SAAS,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,EACnC,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,YAEtD,KAAC,IAAI,IAAC,WAAW,EAAC,SAAS,EAAC,UAAU,EAAC,YAAY,YAChD,CAAC,CAAC,GAAG,GACD,GACA,EACT,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,EAClD,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,CAAC,MAAM,GACvE,EACF,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,EAClD,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,gBAAgB,CAAC,IAAI,GACvE,EACF,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,EAClD,SAAS,EAAE,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,CAAC,MAAM,GAC7E,EACF,KAAC,wBAAwB,IACvB,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,EAClD,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,gBAAgB,CAAC,GAAG,GACpE,IACG,CAAC,CAAA;AACV,CAAC,CAAA;AAkBD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,qBAAqB,EAAE,kBAAkB,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAC1E,IAAI,EAAE,YAAY,EAClB,wBAAwB,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAClF,oBAAoB,EAAE,SAAS,GAAG,KAAK,GACjC,EAAE,EAAE;IACV,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAEvD,MAAM,UAAU,GAAG,CAAC,WAAqC,EAAE,EAAE;QAC3D,YAAY,CAAC,WAAW,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAA;gBAC7C,MAAM,iBAAiB,GAAG,QAAQ,CAAC,gBAAgB,CAAC,2BAA2B,CAAC,CAAA;gBAChF,IAAI,2BAA2B,GAAG,KAAK,CAAA;gBAEvC,iBAAiB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;oBACjC,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC;wBAClC,2BAA2B,GAAG,IAAI,CAAA;oBACpC,CAAC;gBACH,CAAC,CAAC,CAAA;gBAEF,IAAI,2BAA2B,EAAE,CAAC;oBAChC,eAAe,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;gBACnC,CAAC;qBAAM,CAAC;oBACN,UAAU,CAAC,KAAK,CAAC,CAAA;gBACnB,CAAC;YACH,CAAC;QACH,CAAC,CAAA;QAED,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QAEnD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACxD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CAAC,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aACxC,KAAC,UAAU,kBAAa,CAAC,CAAC,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE;oBACzD,wBAAwB,EAAE,CAAA;oBAC1B,UAAU,CAAC,CAAC,OAAO,CAAC,CAAA;gBACtB,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,mBAAiB,OAAO,YAClE,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAChB,SAAS,EAAC,mBAAmB,YAC7B,KAAC,IAAI,KAAG,GACA,GACC,EACZ,qBAAqB,IAAI,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAc,CAAC,CAAC,SAAS,YAChG,KAAC,YAAY,IAAC,MAAM,EAAE,QAAQ,GAAI,GAC9B,EAEL,OAAO,IAAI,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,GAAI,EAEzD,KAAC,sBAAsB,IACrB,SAAS,EAAE,WAAW,CAAC,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,aAC1E,IAAI,iBACA,CAAC,OAAO,YAErB,MAAC,IAAI,IAAC,SAAS,EAAC,SAAS,EAAC,CAAC,EAAE,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,aACnF,MAAC,IAAI,IAAC,CAAC,EAAC,MAAM,aACZ,MAAC,IAAI,IAAC,cAAc,EAAC,eAAe,EAAC,CAAC,EAAC,MAAM,aAC3C,KAAC,IAAI,IAAC,UAAU,EAAC,IAAI,YAClB,CAAC,CAAC,aAAa,GACX,EACP,KAAC,UAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,gBAAc,CAAC,CAAC,KAAK,YAC/D,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,YAChB,KAAC,SAAS,KAAG,GACL,GACC,IACR,EAEP,KAAC,mBAAmB,IAAC,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,UAAU,GAAI,EAEnE,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,YACvE,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,cACjC,KAAC,UAAU,IAAC,EAAE,EAAC,yBAAyB,EAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,qBAAqB,EAAE,YACvG,KAAC,cAAc,IACb,UAAU,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC,EACtC,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,WAAW,EACpB,gBAAgB,EAAC,yBAAyB,YAE1C,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,EAAC,GAAG,EAAC,aAAa,EAAC,QAAQ,YACpD,aAAa,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,KAAC,gBAAgB,IAAe,YAAY,EAAE,IAAI,EAAE,EAAE,EAAE,oBAAoB,KAAK,EAAE,EACjF,SAAS,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAD/E,IAAI,CAAC,EAAE,CAC4E,CAC3G,CAAC,GACG,GACQ,GACN,GACH;wCACV,CAAC;4CACD,4BACG,oBAAoB,GACpB,GAEQ,IACV,EAEP,KAAC,IAAI,IAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE,CAAC,YAClB,KAAC,MAAM,IACL,GAAG,EAAE,eAAe,EACpB,IAAI,EAAC,IAAI,EACT,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,WAAW,EAAC,SAAS,EAAC,UAAU,EAAC,MAAM,EAC9D,OAAO,EAAE,GAAG,EAAE;oCACZ,UAAU,CAAC,KAAK,CAAC,CAAA;oCACjB,cAAc,EAAE,CAAA;gCAClB,CAAC,YACD,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAC1B,CAAC,CAAC,MAAM,GACJ,GACA,GACJ,IACF,GAGgB,IACnB,CAAC,CAAA;AACX,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,aAAa,EAAE,eAAe;QAC9B,GAAG,EAAE,KAAK;QACV,SAAS,EAAE,0BAA0B;QACrC,YAAY,EAAE,6BAA6B;QAC3C,UAAU,EAAE,2BAA2B;QACvC,YAAY,EAAE,6BAA6B;QAC3C,SAAS,EAAE,0BAA0B;QACrC,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,QAAQ;QAChB,GAAG,EAAE,KAAK;QACV,MAAM,EAAE,uBAAuB;QAC/B,iBAAiB,EAAE,oBAAoB;QACvC,SAAS,EAAE,0BAA0B;QACrC,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,aAAa,EAAE,cAAc;QAC7B,GAAG,EAAE,OAAO;QACZ,SAAS,EAAE,gCAAgC;QAC3C,YAAY,EAAE,gCAAgC;QAC9C,UAAU,EAAE,uCAAuC;QACnD,YAAY,EAAE,wCAAwC;QACtD,SAAS,EAAE,wCAAwC;QACnD,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,OAAO;QACf,GAAG,EAAE,OAAO;QACZ,MAAM,EAAE,2BAA2B;QACnC,iBAAiB,EAAE,yBAAyB;QAC5C,SAAS,EAAE,gCAAgC;QAC3C,KAAK,EAAE,QAAQ;KAChB;CACmB,CAAA"}
|
|
@@ -2,6 +2,7 @@ import { StackspotNotification } from './types.js';
|
|
|
2
2
|
interface Props {
|
|
3
3
|
notification: StackspotNotification;
|
|
4
4
|
isSummary: boolean;
|
|
5
|
+
id?: string;
|
|
5
6
|
}
|
|
6
7
|
interface NotificationItemProps extends Props {
|
|
7
8
|
onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void;
|
|
@@ -11,6 +12,6 @@ interface NotificationItemProps extends Props {
|
|
|
11
12
|
*
|
|
12
13
|
* @param props the component's props {@link NotificationItemProps}.
|
|
13
14
|
*/
|
|
14
|
-
export declare const NotificationItem: ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const NotificationItem: ({ notification, isSummary, onClickMarkReadUnread, id }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
export {};
|
|
16
17
|
//# sourceMappingURL=NotificationItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AA0GD,UAAU,qBAAsB,SAAQ,KAAK;IAC3C,qBAAqB,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;CAC/E;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,2DAA4D,qBAAqB,4CA8B7G,CAAA"}
|
|
@@ -61,18 +61,18 @@ const NotificationContent = ({ notification, isSummary }) => {
|
|
|
61
61
|
const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }) => {
|
|
62
62
|
const t = useTranslate(dictionary);
|
|
63
63
|
const Link = useAnchorTag();
|
|
64
|
-
return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: () => onClickMarkReadUnread('callToAction'),
|
|
64
|
+
return (_jsx(Flex, { mt: "5", children: _jsx(Button, { size: "sm", colorScheme: "inverse", onClick: () => onClickMarkReadUnread('callToAction'), as: Link, href: call_to_action, "aria-label": t.takeMeThere, children: _jsx(Text, { colorScheme: "inverse.contrastText", children: t.takeMeThere }) }) }));
|
|
65
65
|
};
|
|
66
66
|
/**
|
|
67
67
|
* NotificationItem component that renders a notification item.
|
|
68
68
|
*
|
|
69
69
|
* @param props the component's props {@link NotificationItemProps}.
|
|
70
70
|
*/
|
|
71
|
-
export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }) => {
|
|
71
|
+
export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread, id }) => {
|
|
72
72
|
const t = useTranslate(dictionary);
|
|
73
|
-
return (_jsxs(Box, { sx: { position: 'relative' }, children: [_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], notification.committed), children: [_jsx(NotificationHeader, { notification: notification, isSummary: isSummary, onClickMarkReadUnread: onClickMarkReadUnread }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { call_to_action: notification.call_to_action, onClickMarkReadUnread: (type) => onClickMarkReadUnread(notification.committed, type) })] }), _jsx(Box, { sx: { position: 'absolute', top: '8px', right: '8px' }, children: _jsx(Tooltip, { text: notification.committed ? t.markAsUnread : t.markAsRead, position: "left", id: `tooltip-${notification.title}`, role: "tooltip", sx: style.tooltip, children: _jsx(IconButton, { "aria-describedby": `tooltip-${notification.title}`, sx: { opacity: notification.committed ? 0.5 : 1 },
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
return (_jsxs(Box, { sx: { position: 'relative' }, id: id, children: [_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], notification.committed), children: [_jsx(NotificationHeader, { notification: notification, isSummary: isSummary, onClickMarkReadUnread: onClickMarkReadUnread }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { call_to_action: notification.call_to_action, onClickMarkReadUnread: (type) => onClickMarkReadUnread(notification.committed, type) })] }), _jsx(Box, { sx: { position: 'absolute', top: '8px', right: '8px' }, children: _jsx(Tooltip, { text: notification.committed ? t.markAsUnread : t.markAsRead, position: "left", id: `tooltip-${notification.title}`, role: "tooltip", sx: style.tooltip, children: _jsx(IconButton, { "aria-describedby": `tooltip-${notification.title}`, "aria-live": "polite", "aria-label": notification.committed ? t.markAsUnread : t.markAsRead, sx: { opacity: notification.committed ? 0.5 : 1 }, onClick: () => {
|
|
74
|
+
onClickMarkReadUnread(notification.committed, 'icon');
|
|
75
|
+
}, children: _jsx(IconBox, { size: "xs", children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) }) }) }) })] }));
|
|
76
76
|
};
|
|
77
77
|
const dictionary = {
|
|
78
78
|
en: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAiD,IAAI,EAAE,MAAM,cAAc,CAAA;AAC9G,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGpD,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,CAAC,KAAa,EAAE,MAAe,EAAE,EAAE,CAAC,CAAC;QACzC,UAAU,EAAE,aAAa,KAAK,EAAE;QAChC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAC1B,CAAC;CACgD,CAAA;AAEpD,MAAM,aAAa,GAAkD;IACnE,GAAG,EAAE,aAAa;IAClB,MAAM,EAAE,aAAa;IACrB,IAAI,EAAE,YAAY;CACnB,CAAA;
|
|
1
|
+
{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;CACtE;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA2HD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,wFAEvB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;CACtE;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA2HD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,wFAEvB,kBAAkB,4CAyFpB,CAAA"}
|
|
@@ -119,6 +119,10 @@ export const SelectionList = ({ id, items, className, style, visible = true, max
|
|
|
119
119
|
onHide?.();
|
|
120
120
|
}, []);
|
|
121
121
|
useEffect(() => {
|
|
122
|
+
function removeListeners() {
|
|
123
|
+
detachKeyboardListeners();
|
|
124
|
+
document.removeEventListener('click', hide);
|
|
125
|
+
}
|
|
122
126
|
if (visible) {
|
|
123
127
|
setCurrent({ items });
|
|
124
128
|
attachKeyboardListeners();
|
|
@@ -126,9 +130,9 @@ export const SelectionList = ({ id, items, className, style, visible = true, max
|
|
|
126
130
|
setTimeout(() => document.addEventListener('click', hide), 50);
|
|
127
131
|
}
|
|
128
132
|
else {
|
|
129
|
-
|
|
130
|
-
document.removeEventListener('click', hide);
|
|
133
|
+
removeListeners();
|
|
131
134
|
}
|
|
135
|
+
return () => removeListeners();
|
|
132
136
|
}, [visible]);
|
|
133
137
|
return (_jsx(SelectionBox, { id: id, ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), "$scroll": scroll, "aria-hidden": !visible, children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
|
|
134
138
|
? (_jsxs(Flex, { mt: 5, mb: 1, alignItems: "center", children: [_jsx(IconButton, { onClick: (ev) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAmB,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAyGvD,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,qBAAqB,GAAG,sBAAsB,qBAAqB,GAAG,IAAI,GAAG,CAAA;AA8CnF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA2C;;gBAE1D,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;gBAE5C,qBAAqB,mBAAmB,qBAAqB,GAAG,IAAI;;;;;;;;;kBASlE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;wBAElB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;wBACxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;oBAe5B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;+BAWb,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;kBAOrC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,UAAU;;kBAE9B,qBAAqB;;CAEtC,CAAA;AAED,SAAS,YAAY,CAAC,EACpB,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,GAAG,KAAC,KAAK,KAAG,EAC7E,SAAS,
|
|
1
|
+
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import { Bell, TimesMini } from '@citric/icons'
|
|
|
3
3
|
import { IconButton } from '@citric/ui'
|
|
4
4
|
import { listToClass, theme } from '@stack-spot/portal-theme'
|
|
5
5
|
import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
|
|
6
|
-
import { ReactElement, useState } from 'react'
|
|
6
|
+
import { ReactElement, useLayoutEffect, useRef, useState } from 'react'
|
|
7
7
|
import styled from 'styled-components'
|
|
8
8
|
import { AsyncContent, ErrorProps } from '../AsyncContent'
|
|
9
9
|
import { InfiniteScroll } from '../InfiniteScroll'
|
|
@@ -26,8 +26,8 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
|
|
|
26
26
|
width: 400px;
|
|
27
27
|
|
|
28
28
|
&.visible {
|
|
29
|
-
min-height: 400px;
|
|
30
29
|
visibility: visible;
|
|
30
|
+
min-height: 400px;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
.content {
|
|
@@ -174,16 +174,45 @@ export const NotificationComponent = ({
|
|
|
174
174
|
}: Props) => {
|
|
175
175
|
const t = useTranslate(dictionary)
|
|
176
176
|
const [visible, setVisible] = useState(false)
|
|
177
|
+
const seeAllButtonRef = useRef<HTMLButtonElement>(null)
|
|
177
178
|
|
|
178
179
|
const updateType = (updatedType?: NotificationTypeFilters) => {
|
|
179
180
|
onUpdateType(updatedType)
|
|
180
181
|
}
|
|
181
182
|
|
|
183
|
+
useLayoutEffect(() => {
|
|
184
|
+
const handleKeyDown = (event: KeyboardEvent) => {
|
|
185
|
+
if (event.key === 'Escape') {
|
|
186
|
+
const focusedElement = document.activeElement
|
|
187
|
+
const notificationItems = document.querySelectorAll('[id^="notificationItem-"]')
|
|
188
|
+
let isFocusedOnNotificationItem = false
|
|
189
|
+
|
|
190
|
+
notificationItems.forEach((item) => {
|
|
191
|
+
if (item.contains(focusedElement)) {
|
|
192
|
+
isFocusedOnNotificationItem = true
|
|
193
|
+
}
|
|
194
|
+
})
|
|
195
|
+
|
|
196
|
+
if (isFocusedOnNotificationItem) {
|
|
197
|
+
seeAllButtonRef?.current?.focus()
|
|
198
|
+
} else {
|
|
199
|
+
setVisible(false)
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
document.addEventListener('keydown', handleKeyDown)
|
|
205
|
+
|
|
206
|
+
return () => {
|
|
207
|
+
document.removeEventListener('keydown', handleKeyDown)
|
|
208
|
+
}
|
|
209
|
+
}, [])
|
|
210
|
+
|
|
182
211
|
return (<Flex sx={{ position: 'relative' }}>
|
|
183
212
|
<IconButton aria-label={t.openNotifications} onClick={() => {
|
|
184
213
|
onClickViewNotifications()
|
|
185
|
-
setVisible(
|
|
186
|
-
}} sx={{ border: 'none', bg: 'transparent' }}>
|
|
214
|
+
setVisible(!visible)
|
|
215
|
+
}} sx={{ border: 'none', bg: 'transparent' }} aria-expanded={visible}>
|
|
187
216
|
<IconBox size="md"
|
|
188
217
|
className="notificationsTour" >
|
|
189
218
|
<Bell />
|
|
@@ -193,10 +222,10 @@ export const NotificationComponent = ({
|
|
|
193
222
|
<StatusCircle status={'danger'} />
|
|
194
223
|
</Box>}
|
|
195
224
|
|
|
196
|
-
{visible && <Overlay />}
|
|
225
|
+
{visible && <Overlay onClick={() => setVisible(false)} />}
|
|
197
226
|
|
|
198
227
|
<NotificationsComponent
|
|
199
|
-
className={listToClass(['
|
|
228
|
+
className={listToClass(['notification-component', visible ? 'visible' : undefined])}
|
|
200
229
|
$scroll={true}
|
|
201
230
|
aria-hidden={!visible}
|
|
202
231
|
>
|
|
@@ -225,8 +254,8 @@ export const NotificationComponent = ({
|
|
|
225
254
|
scrollableTarget="scrollableNotifications"
|
|
226
255
|
>
|
|
227
256
|
<Flex sx={{ gap: '4px' }} mr="3" flexDirection="column">
|
|
228
|
-
{notifications?.map((item) => (
|
|
229
|
-
<NotificationItem key={item.id} notification={item}
|
|
257
|
+
{notifications?.map((item, index) => (
|
|
258
|
+
<NotificationItem key={item.id} notification={item} id={`notificationItem-${index}`}
|
|
230
259
|
isSummary={isSummary} onClickMarkReadUnread={(read, type) => onMarkAsReadUnread(item.id, read, type)} />
|
|
231
260
|
))}
|
|
232
261
|
</Flex>
|
|
@@ -243,6 +272,7 @@ export const NotificationComponent = ({
|
|
|
243
272
|
|
|
244
273
|
<Flex w="100%" pt={3}>
|
|
245
274
|
<Button
|
|
275
|
+
ref={seeAllButtonRef}
|
|
246
276
|
size="sm"
|
|
247
277
|
sx={{ width: '100%' }} colorScheme="inverse" appearance="text"
|
|
248
278
|
onClick={() => {
|
|
@@ -257,7 +287,7 @@ export const NotificationComponent = ({
|
|
|
257
287
|
</Flex>
|
|
258
288
|
|
|
259
289
|
|
|
260
|
-
</NotificationsComponent
|
|
290
|
+
</NotificationsComponent>
|
|
261
291
|
</Flex >)
|
|
262
292
|
}
|
|
263
293
|
|
|
@@ -24,6 +24,7 @@ const statusToColor: Record<string, OneOfColorSchemesWithVariants> = {
|
|
|
24
24
|
interface Props {
|
|
25
25
|
notification: StackspotNotification,
|
|
26
26
|
isSummary: boolean,
|
|
27
|
+
id?: string,
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
const style: Styles = {
|
|
@@ -114,12 +115,17 @@ const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }: Notificat
|
|
|
114
115
|
|
|
115
116
|
return (
|
|
116
117
|
<Flex mt="5">
|
|
117
|
-
<Button
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
118
|
+
<Button
|
|
119
|
+
size="sm"
|
|
120
|
+
colorScheme="inverse"
|
|
121
|
+
onClick={() => onClickMarkReadUnread('callToAction')}
|
|
122
|
+
as={Link}
|
|
123
|
+
href={call_to_action}
|
|
124
|
+
aria-label={t.takeMeThere}
|
|
125
|
+
>
|
|
126
|
+
<Text colorScheme="inverse.contrastText">
|
|
127
|
+
{t.takeMeThere}
|
|
128
|
+
</Text>
|
|
123
129
|
</Button>
|
|
124
130
|
</Flex>
|
|
125
131
|
)
|
|
@@ -134,10 +140,10 @@ interface NotificationItemProps extends Props {
|
|
|
134
140
|
*
|
|
135
141
|
* @param props the component's props {@link NotificationItemProps}.
|
|
136
142
|
*/
|
|
137
|
-
export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => {
|
|
143
|
+
export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread, id }: NotificationItemProps) => {
|
|
138
144
|
const t = useTranslate(dictionary)
|
|
139
145
|
return (
|
|
140
|
-
<Box sx={{ position: 'relative' }}>
|
|
146
|
+
<Box sx={{ position: 'relative' }} id={id}>
|
|
141
147
|
<Flex bg="light.400" p="3 3 3 5" r="xs"
|
|
142
148
|
flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
|
|
143
149
|
<NotificationHeader notification={notification} isSummary={isSummary} onClickMarkReadUnread={onClickMarkReadUnread}/>
|
|
@@ -149,14 +155,14 @@ export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnrea
|
|
|
149
155
|
<Tooltip text={notification.committed ? t.markAsUnread : t.markAsRead} position="left"
|
|
150
156
|
id={`tooltip-${notification.title}`} role="tooltip"
|
|
151
157
|
sx={style.tooltip}>
|
|
152
|
-
<IconButton aria-describedby={`tooltip-${notification.title}`}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
>
|
|
158
|
+
<IconButton aria-describedby={`tooltip-${notification.title}`}
|
|
159
|
+
aria-live="polite"
|
|
160
|
+
aria-label={notification.committed ? t.markAsUnread : t.markAsRead}
|
|
161
|
+
sx={{ opacity: notification.committed ? 0.5 : 1 }}
|
|
162
|
+
onClick={() => {
|
|
163
|
+
onClickMarkReadUnread(notification.committed, 'icon')
|
|
164
|
+
}}>
|
|
165
|
+
<IconBox size="xs">
|
|
160
166
|
{notification.committed ? <Envelope /> : <EnvelopeOpen />}
|
|
161
167
|
</IconBox>
|
|
162
168
|
</IconButton>
|
|
@@ -215,7 +215,7 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
|
215
215
|
|
|
216
216
|
function renderAction({
|
|
217
217
|
label, href, onClick, icon, iconRight, active, target, iconActive = <Check />,
|
|
218
|
-
className='', lang, hrefLang,
|
|
218
|
+
className = '', lang, hrefLang,
|
|
219
219
|
}: ListAction, { onClose, Link }: RenderOptions) {
|
|
220
220
|
function handleClick(event: React.MouseEvent) {
|
|
221
221
|
onClick?.(event)
|
|
@@ -237,7 +237,7 @@ function renderAction({
|
|
|
237
237
|
)
|
|
238
238
|
}
|
|
239
239
|
|
|
240
|
-
function renderCollapsible({ label, icon, iconRight, className='', children }:
|
|
240
|
+
function renderCollapsible({ label, icon, iconRight, className = '', children }:
|
|
241
241
|
ListCollapsible, { setCurrent, controllerId, Link }: RenderOptions) {
|
|
242
242
|
function handleClick(ev: React.MouseEvent) {
|
|
243
243
|
// accessibility: this will tell the screen reader the section was expanded before this link is removed from the DOM.
|
|
@@ -314,15 +314,18 @@ export const SelectionList = ({
|
|
|
314
314
|
}, [])
|
|
315
315
|
|
|
316
316
|
useEffect(() => {
|
|
317
|
+
function removeListeners() {
|
|
318
|
+
detachKeyboardListeners()
|
|
319
|
+
document.removeEventListener('click', hide)
|
|
320
|
+
}
|
|
317
321
|
if (visible) {
|
|
318
322
|
setCurrent({ items })
|
|
319
323
|
attachKeyboardListeners()
|
|
320
324
|
if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
|
|
325
|
+
} else {
|
|
326
|
+
removeListeners()
|
|
321
327
|
}
|
|
322
|
-
|
|
323
|
-
detachKeyboardListeners()
|
|
324
|
-
document.removeEventListener('click', hide)
|
|
325
|
-
}
|
|
328
|
+
return () => removeListeners()
|
|
326
329
|
}, [visible])
|
|
327
330
|
|
|
328
331
|
return (
|