@snack-uikit/notification 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/NotificationCard/NotificationCard.js +1 -1
- package/dist/components/NotificationCard/components/NotificationCardFunction.js +1 -1
- package/dist/components/NotificationCard/components/NotificationCardSkeleton.js +1 -1
- package/dist/components/NotificationPanel/NotificationPanel.js +1 -1
- package/dist/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.js +1 -1
- package/dist/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettingsDroplist.js +1 -1
- package/dist/helperComponents/NotificationPanelPopover/NotificationPanelPopover.js +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.5.1 (2023-12-14)
|
|
7
|
+
|
|
8
|
+
### Only dependencies have been changed
|
|
9
|
+
* [@snack-uikit/chips@0.10.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/chips/CHANGELOG.md)
|
|
10
|
+
* [@snack-uikit/droplist@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
|
|
11
|
+
* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
|
|
12
|
+
* [@snack-uikit/link@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/link/CHANGELOG.md)
|
|
13
|
+
* [@snack-uikit/popover-private@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/popover-private/CHANGELOG.md)
|
|
14
|
+
* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
6
20
|
# 0.5.0 (2023-12-14)
|
|
7
21
|
|
|
8
22
|
|
|
@@ -55,5 +55,5 @@ export function NotificationCard(_a) {
|
|
|
55
55
|
e.stopPropagation();
|
|
56
56
|
(_a = link === null || link === void 0 ? void 0 : link.onClick) === null || _a === void 0 ? void 0 : _a.call(link, e);
|
|
57
57
|
};
|
|
58
|
-
return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className)
|
|
58
|
+
return (_jsxs("div", Object.assign({ ref: cardRef, role: 'button', onClick: onClick, tabIndex: 0 }, extractSupportProps(rest), { "data-appearance": appearance, "data-unread": unread || undefined, "data-clickable": Boolean(onClick) || undefined, "data-droplist-open": isDroplistOpen || undefined, className: cn(styles.notificationCard, className), children: [(actions === null || actions === void 0 ? void 0 : actions.length) && (_jsx(NotificationCardFunction, { actions: actions, open: isDroplistOpen, setDroplistOpen: setDroplistOpen })), label && (_jsx(Typography.LightLabelS, { tag: 'div', className: styles.notificationCardLabel, children: _jsx(TruncateString, { maxLines: 1, text: label, "data-test-id": TEST_IDS.label }) })), _jsxs("div", { className: styles.notificationCardTitle, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: icon }), _jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationCardTitleText, children: _jsx(TruncateString, { maxLines: 2, text: title, "data-test-id": TEST_IDS.title }) })] }), content && (_jsx(Typography.SansBodyS, { tag: 'div', className: styles.notificationCardContent, "data-test-id": TEST_IDS.content, children: content })), showFooter && (_jsxs("div", { className: styles.notificationCardFooter, children: [link && (_jsx(Link, Object.assign({}, link, { onClick: handleLinkClick, onColor: linkOnColor, onSurface: 'decor', size: 's', "data-test-id": TEST_IDS.link }))), date && (_jsx(Typography.LightLabelS, { className: styles.notificationCardDate, "data-test-id": TEST_IDS.date, children: date }))] }))] })));
|
|
59
59
|
}
|
|
@@ -9,5 +9,5 @@ export function NotificationCardFunction({ actions, open, setDroplistOpen }) {
|
|
|
9
9
|
const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, } = Droplist.useKeyboardNavigation({
|
|
10
10
|
setDroplistOpen,
|
|
11
11
|
});
|
|
12
|
-
return (_jsx("div",
|
|
12
|
+
return (_jsx("div", { className: styles.notificationCardFunction, "data-test-id": TEST_IDS.actions.wrapper, children: _jsx(Droplist, { open: open, onOpenChange: setDroplistOpen, placement: 'bottom-end', firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerRef: triggerElementRef, useScroll: true, triggerElement: _jsx(ButtonFunction, { size: 's', icon: _jsx(KebabSVG, {}), onKeyDown: handleTriggerKeyDown, "data-test-id": TEST_IDS.actions.droplistTrigger }), "data-test-id": TEST_IDS.actions.droplist, children: actions.map(action => (_createElement(Droplist.ItemSingle, Object.assign({}, action, { key: action.option, onClick: e => handleDroplistItemClick(e, action.onClick), "data-test-id": TEST_IDS.actions.droplistAction, onKeyDown: handleDroplistItemKeyDown })))) }) }));
|
|
13
13
|
}
|
|
@@ -4,5 +4,5 @@ import { TEST_IDS } from '../../NotificationPanel/constants';
|
|
|
4
4
|
import styles from '../styles.module.css';
|
|
5
5
|
const BORDER_RADIUS = 24;
|
|
6
6
|
export function NotificationCardSkeleton() {
|
|
7
|
-
return (_jsxs("div",
|
|
7
|
+
return (_jsxs("div", { className: styles.notificationCard, "data-test-id": TEST_IDS.skeleton, "data-skeleton": true, children: [_jsx(Skeleton, { width: 140, height: 11, borderRadius: BORDER_RADIUS }), _jsxs("div", { className: styles.notificationCardTitle, "data-center": true, children: [_jsx("div", { className: styles.notificationCardTitleIcon, children: _jsx(Skeleton, { width: 16, height: 16, borderRadius: BORDER_RADIUS }) }), _jsx(Skeleton, { width: 140, height: 14, borderRadius: BORDER_RADIUS })] }), _jsx("div", { className: styles.notificationCardContent, children: _jsx(SkeletonText, { lines: 3, borderRadius: BORDER_RADIUS }) }), _jsxs("div", { className: styles.notificationCardFooter, children: [_jsx(Skeleton, { width: 140, borderRadius: BORDER_RADIUS, height: 12 }), _jsx(Skeleton, { width: 140, borderRadius: BORDER_RADIUS, height: 11 })] })] }));
|
|
8
8
|
}
|
|
@@ -27,7 +27,7 @@ import styles from './styles.module.css';
|
|
|
27
27
|
export function NotificationPanel(_a) {
|
|
28
28
|
var { title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2 } = _a, rest = __rest(_a, ["title", "triggerElement", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount"]);
|
|
29
29
|
const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
|
|
30
|
-
return (_jsx(NotificationPanelPopover, Object.assign({}, rest, { content: _jsxs(_Fragment, { children: [_jsxs("div",
|
|
30
|
+
return (_jsx(NotificationPanelPopover, Object.assign({}, rest, { content: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.notificationPanelHeader, children: [_jsxs("div", { className: styles.notificationPanelHeadline, children: [_jsx(Typography.SansHeadlineS, { className: styles.notificationPanelTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), settings && _jsx(NotificationPanelSettings, Object.assign({}, settings))] }), _jsxs("div", { className: styles.notificationPanelHeaderFunctions, children: [_jsx("div", { className: styles.notificationPanelChips, children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (_createElement(ChipToggle, Object.assign({}, chip, { key: chip.label, "data-test-id": `${TEST_IDS.chip}-${chip.label}`, size: 'xs', disabled: chip.disabled || loading })))) }), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsx(Scroll, { size: 'm', className: styles.notificationPanelBody, children: loading ? (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })) : (content) }), !loading && footerButton && (_jsx("button", { className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] }), children: triggerElement })));
|
|
31
31
|
}
|
|
32
32
|
(function (NotificationPanel) {
|
|
33
33
|
NotificationPanel.Blank = NotificationPanelBlank;
|
|
@@ -19,5 +19,5 @@ import styles from './styles.module.css';
|
|
|
19
19
|
/** Компонента для "заглушки" вместо карточек в панели */
|
|
20
20
|
export function NotificationPanelBlank(_a) {
|
|
21
21
|
var { icon, iconAppearance = 'neutral', title, description, className } = _a, rest = __rest(_a, ["icon", "iconAppearance", "title", "description", "className"]);
|
|
22
|
-
return (_jsxs("div", Object.assign({ className: cn(styles.notificationPanelBlank, className) }, extractSupportProps(rest), { children: [icon && _jsx(IconPredefined, { icon: icon, appearance: iconAppearance, size: 'l', "data-test-id": TEST_IDS.blank.icon }), _jsxs("div",
|
|
22
|
+
return (_jsxs("div", Object.assign({ className: cn(styles.notificationPanelBlank, className) }, extractSupportProps(rest), { children: [icon && _jsx(IconPredefined, { icon: icon, appearance: iconAppearance, size: 'l', "data-test-id": TEST_IDS.blank.icon }), _jsxs("div", { className: styles.notificationPanelBlankContent, children: [_jsx(Typography.SansTitleS, { tag: 'div', className: styles.notificationPanelBlankTitle, "data-test-id": TEST_IDS.blank.title, children: title }), _jsx(Typography.SansBodyM, { tag: 'div', className: styles.notificationPanelBlankDescription, "data-test-id": TEST_IDS.blank.description, children: description })] })] })));
|
|
23
23
|
}
|
|
@@ -9,5 +9,5 @@ export function NotificationPanelSettingsDroplist({ actions, button }) {
|
|
|
9
9
|
const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, } = Droplist.useKeyboardNavigation({
|
|
10
10
|
setDroplistOpen,
|
|
11
11
|
});
|
|
12
|
-
return (_jsx(Droplist,
|
|
12
|
+
return (_jsx(Droplist, { open: isDroplistOpen, onOpenChange: setDroplistOpen, firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, useScroll: true, triggerRef: triggerElementRef, triggerElement: _jsx(ButtonSimple, Object.assign({}, button, { onKeyDown: handleTriggerKeyDown })), placement: 'bottom-end', "data-test-id": TEST_IDS.settings.droplist, children: actions.map(action => (_createElement(Droplist.ItemSingle, Object.assign({}, action, { key: action.option, onClick: e => handleDroplistItemClick(e, action.onClick), onKeyDown: handleDroplistItemKeyDown, "data-test-id": TEST_IDS.settings.droplistAction })))) }));
|
|
13
13
|
}
|
|
@@ -18,5 +18,5 @@ export function NotificationPanelPopover(_a) {
|
|
|
18
18
|
if (!children) {
|
|
19
19
|
return null;
|
|
20
20
|
}
|
|
21
|
-
return (_jsx(PopoverPrivate, Object.assign({ fallbackPlacements: [], placement: placement, popoverContent: _jsx("div",
|
|
21
|
+
return (_jsx(PopoverPrivate, Object.assign({ fallbackPlacements: [], placement: placement, popoverContent: _jsx("div", { className: styles.notificationPanelPopoverWrap, children: _jsx("div", { className: cn(styles.notificationPanelPopover, contentClassName), children: content }) }), trigger: trigger, hasArrow: false, heightStrategy: 'lte' }, otherProps, { children: children })));
|
|
22
22
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Notification",
|
|
7
|
-
"version": "0.5.
|
|
7
|
+
"version": "0.5.1",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -33,18 +33,18 @@
|
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@snack-uikit/button": "0.15.0",
|
|
36
|
-
"@snack-uikit/chips": "0.10.
|
|
37
|
-
"@snack-uikit/droplist": "0.12.
|
|
36
|
+
"@snack-uikit/chips": "0.10.1",
|
|
37
|
+
"@snack-uikit/droplist": "0.12.1",
|
|
38
38
|
"@snack-uikit/icon-predefined": "0.4.0",
|
|
39
|
-
"@snack-uikit/icons": "0.19.
|
|
40
|
-
"@snack-uikit/link": "0.9.
|
|
41
|
-
"@snack-uikit/popover-private": "0.12.
|
|
39
|
+
"@snack-uikit/icons": "0.19.1",
|
|
40
|
+
"@snack-uikit/link": "0.9.1",
|
|
41
|
+
"@snack-uikit/popover-private": "0.12.1",
|
|
42
42
|
"@snack-uikit/scroll": "0.5.0",
|
|
43
43
|
"@snack-uikit/skeleton": "0.3.2",
|
|
44
|
-
"@snack-uikit/truncate-string": "0.4.
|
|
44
|
+
"@snack-uikit/truncate-string": "0.4.1",
|
|
45
45
|
"@snack-uikit/typography": "0.6.0",
|
|
46
46
|
"@snack-uikit/utils": "3.2.0",
|
|
47
47
|
"classnames": "2.3.2"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
|
|
50
50
|
}
|