@snack-uikit/notification 0.13.17-preview-4eb2b89e.0 → 0.13.17

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +59 -14
  3. package/dist/cjs/components/NotificationPanel/NotificationPanel.d.ts +4 -4
  4. package/dist/cjs/components/NotificationPanel/NotificationPanel.js +13 -13
  5. package/dist/cjs/components/NotificationPanel/constants.d.ts +1 -1
  6. package/dist/cjs/components/NotificationPanel/constants.js +1 -1
  7. package/dist/esm/components/NotificationPanel/NotificationPanel.d.ts +4 -4
  8. package/dist/esm/components/NotificationPanel/NotificationPanel.js +4 -3
  9. package/dist/esm/components/NotificationPanel/constants.d.ts +1 -1
  10. package/dist/esm/components/NotificationPanel/constants.js +1 -1
  11. package/package.json +6 -6
  12. package/src/components/NotificationPanel/NotificationPanel.tsx +14 -16
  13. package/src/components/NotificationPanel/constants.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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
+ ## <small>0.13.17 (2025-10-28)</small>
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/chips@0.28.6](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
10
+ * [@snack-uikit/link@0.17.12](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/link/CHANGELOG.md)
11
+ * [@snack-uikit/list@0.32.6](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
12
+ * [@snack-uikit/truncate-string@0.7.3](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
13
+
14
+
15
+
16
+
17
+
6
18
  ## <small>0.13.16 (2025-09-22)</small>
7
19
 
8
20
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -47,20 +47,18 @@ const cards = [
47
47
  label: 'Mark all as read',
48
48
  onClick() {},
49
49
  }}
50
- segments={{
51
- items: [
52
- {
53
- value: 'all',
54
- label: 'all',
55
- },
56
- {
57
- value: 'unread',
58
- label: 'unread',
59
- },
60
- ],
61
- value: 'all',
62
- onChange: (value) => { /* */ },
63
- }}
50
+ chips={[
51
+ {
52
+ label: 'all',
53
+ checked: true,
54
+ onChange() { /* */ },
55
+ },
56
+ {
57
+ label: 'unread',
58
+ checked: false,
59
+ onChange() { /* */ },
60
+ },
61
+ ]}
64
62
  content={
65
63
  !cards.length ? (
66
64
  <NotificationPanel.Blank
@@ -83,24 +81,71 @@ const cards = [
83
81
  ### Props
84
82
  | name | type | default value | description |
85
83
  |------|------|---------------|-------------|
84
+ | date* | `string` | - | Дата уведомления |
85
+ | content* | `ReactNode` | - | Контент уведомления |
86
+ | title* | `string` | - | Заголовок уведомления |
87
+ | id* | `string` | - | Идентификатор уведомления |
88
+ | appearance | enum Appearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral | Тип уведомления |
89
+ | label | `string` | - | Лейбл перед заголовком |
90
+ | unread | `boolean` | - | Управление состоянием прочитано/не прочитано |
91
+ | link | `PickLinkProps<LinkElement, "text" \| "insideText" \| "truncateVariant">` | - | Ссылка |
92
+ | onClick | `MouseEventHandler<HTMLDivElement>` | - | Колбэк клика по карточке |
93
+ | onVisible | `(cardId: string) => void` | - | Колбэк при попадании карточки в область видимости на 80% |
94
+ | primaryButton | `Omit<ButtonTonalProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка главного действия у карточки |
95
+ | secondaryButton | `Omit<ButtonSimpleProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка второстепенного действия у карточки |
96
+ | actions | `Action[]` | - | Дополнительные действия у карточки |
97
+ | className | `string` | - | CSS-класс |
86
98
  ## NotificationPanel
87
99
  Компонент панели для уведомлений
88
100
  ### Props
89
101
  | name | type | default value | description |
90
102
  |------|------|---------------|-------------|
103
+ | title* | `string` | - | Заголовок панели |
104
+ | settings | `NotificationPanelSettingsProps` | - | Кнопка настроек и выпадающий список |
105
+ | chips | `Omit<ChipToggleProps, "data-test-id" \| "size">[]` | - | Чипы для фильтрации |
106
+ | readAllButton | `Omit<ButtonFunctionProps, "data-test-id"> & { onClick: MouseEventHandler<HTMLElement>; }` | - | Кнопка в "шапке" панели |
107
+ | footerButton | `{ label: string; onClick: MouseEventHandler<HTMLButtonElement>; }` | - | Кнопка внизу панели |
108
+ | className | `string` | - | CSS-класс |
109
+ | loading | `boolean` | - | Состояние загрузки |
110
+ | content | `ReactNode` | - | Контент для отрисовки (e.g NotificationCard \| NotificationPanel.Blank) |
111
+ | skeletonsAmount | `number` | 2 | Количество скелетонов карточек для отображения при загрузке |
112
+ | scrollEndRef | `RefObject<HTMLDivElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
113
+ | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
91
114
  ## NotificationPanel.Blank
92
115
  ### Props
93
116
  | name | type | default value | description |
94
117
  |------|------|---------------|-------------|
118
+ | title | `string` | - | Заголовок |
119
+ | className | `string` | - | CSS-класс |
120
+ | icon | `Pick<IconPredefinedProps, "appearance" \| "icon" \| "decor">` | - | Иконка |
121
+ | description | `ReactNode` | - | Подзаголовок |
95
122
  ## NotificationPanel.Divider
96
123
  ### Props
97
124
  | name | type | default value | description |
98
125
  |------|------|---------------|-------------|
126
+ | text* | `string` | - | Текст разделителя |
127
+ | className | `string` | - | CSS-класс |
99
128
  ## NotificationPanelPopover
100
129
  Компонент-обёртка для NotificationPanel для использования как выпадающий элемент
101
130
  ### Props
102
131
  | name | type | default value | description |
103
132
  |------|------|---------------|-------------|
133
+ | content* | `ReactElement<NotificationPanelProps, typeof NotificationPanel>` | - | |
134
+ | contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
135
+ | className | `string` | - | CSS-класс |
136
+ | children | `ReactNode \| ChildrenFunction` | - | Триггер поповера (подробнее читайте ниже) |
137
+ | triggerClassName | `string` | - | CSS-класс триггера |
138
+ | open | `boolean` | - | Управляет состоянием показан/не показан. |
139
+ | onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
140
+ | hoverDelayOpen | `number` | - | Задержка открытия по ховеру |
141
+ | hoverDelayClose | `number` | - | Задержка закрытия по ховеру |
142
+ | offset | `number` | 0 | Отступ поповера от его триггер-элемента (в пикселях). |
143
+ | closeOnEscapeKey | `boolean` | true | Закрывать ли по нажатию на кнопку `Esc` |
144
+ | triggerClickByKeys | `boolean` | true | Вызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = `click`) |
145
+ | triggerRef | `ForwardedRef<HTMLElement \| ReferenceType>` | - | Ref ссылка на триггер |
146
+ | closeOnPopstate | `boolean` | - | Закрывать ли поповер при пекреходе по истории браузера |
147
+ | trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | click | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
148
+ | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | bottom-end | Положение поповера относительно своего триггера (children). |
104
149
 
105
150
 
106
151
  [//]: DOCUMENTATION_SECTION_END
package/dist/cjs/components/NotificationPanel/NotificationPanel.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { MouseEventHandler, ReactNode, RefObject } from 'react';
2
2
  import { ButtonFunctionProps } from '@snack-uikit/button';
3
- import { SegmentedControlProps } from '@snack-uikit/segmented-control';
3
+ import { ChipToggleProps } from '@snack-uikit/chips';
4
4
  import { WithSupportProps } from '@snack-uikit/utils';
5
5
  import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
6
6
  import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
@@ -10,8 +10,8 @@ export type NotificationPanelProps = WithSupportProps<{
10
10
  title: string;
11
11
  /** Кнопка настроек и выпадающий список */
12
12
  settings?: NotificationPanelSettingsProps;
13
- /** Сегменты для фильтрации */
14
- segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
13
+ /** Чипы для фильтрации */
14
+ chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
15
15
  /** Кнопка в "шапке" панели */
16
16
  readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
17
17
  onClick: ButtonFunctionProps['onClick'];
@@ -34,7 +34,7 @@ export type NotificationPanelProps = WithSupportProps<{
34
34
  scrollContainerRef?: RefObject<HTMLElement>;
35
35
  }>;
36
36
  /** Компонент панели для уведомлений */
37
- export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
37
+ export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
38
38
  export declare namespace NotificationPanel {
39
39
  const Blank: typeof NotificationPanelBlank;
40
40
  type BlankProps = NotificationPanelBlankProps;
package/dist/cjs/components/NotificationPanel/NotificationPanel.js CHANGED
@@ -17,12 +17,13 @@ Object.defineProperty(exports, "__esModule", {
17
17
  value: true
18
18
  });
19
19
  exports.NotificationPanel = NotificationPanel;
20
+ const react_1 = require("react");
20
21
  const jsx_runtime_1 = require("react/jsx-runtime");
21
22
  const classnames_1 = __importDefault(require("classnames"));
22
- const react_1 = require("react");
23
+ const react_2 = require("react");
23
24
  const button_1 = require("@snack-uikit/button");
25
+ const chips_1 = require("@snack-uikit/chips");
24
26
  const scroll_1 = require("@snack-uikit/scroll");
25
- const segmented_control_1 = require("@snack-uikit/segmented-control");
26
27
  const skeleton_1 = require("@snack-uikit/skeleton");
27
28
  const truncate_string_1 = require("@snack-uikit/truncate-string");
28
29
  const typography_1 = require("@snack-uikit/typography");
@@ -37,7 +38,7 @@ function NotificationPanel(_a) {
37
38
  var {
38
39
  title,
39
40
  settings,
40
- segments,
41
+ chips,
41
42
  readAllButton,
42
43
  footerButton,
43
44
  content,
@@ -47,8 +48,8 @@ function NotificationPanel(_a) {
47
48
  scrollContainerRef,
48
49
  className
49
50
  } = _a,
50
- rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
51
- const skeletons = (0, react_1.useMemo)(() => Array.from({
51
+ rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
52
+ const skeletons = (0, react_2.useMemo)(() => Array.from({
52
53
  length: skeletonsAmount
53
54
  }, (_, i) => i), [skeletonsAmount]);
54
55
  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
@@ -67,15 +68,14 @@ function NotificationPanel(_a) {
67
68
  }), settings && (0, jsx_runtime_1.jsx)(components_2.NotificationPanelSettings, Object.assign({}, settings))]
68
69
  }), (0, jsx_runtime_1.jsxs)("div", {
69
70
  className: styles_module_scss_1.default.notificationPanelHeaderFunctions,
70
- children: [segments && (0, jsx_runtime_1.jsx)("div", {
71
+ children: [(0, jsx_runtime_1.jsx)("div", {
71
72
  className: styles_module_scss_1.default.notificationPanelChips,
72
- children: (0, jsx_runtime_1.jsx)(segmented_control_1.SegmentedControl, Object.assign({}, segments, {
73
- size: 's',
74
- items: segments.items.map(item => Object.assign(Object.assign({}, item), {
75
- disabled: item.disabled || loading
76
- })),
77
- "data-test-id": constants_1.TEST_IDS.segment
78
- }))
73
+ children: chips === null || chips === void 0 ? void 0 : chips.map(chip => (0, react_1.createElement)(chips_1.ChipToggle, Object.assign({}, chip, {
74
+ key: chip.label,
75
+ "data-test-id": `${constants_1.TEST_IDS.chip}-${chip.label}`,
76
+ size: 'xs',
77
+ disabled: chip.disabled || loading
78
+ })))
79
79
  }), readAllButton && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({}, readAllButton, {
80
80
  size: 'xs',
81
81
  disabled: readAllButton.disabled || loading,
package/dist/cjs/components/NotificationPanel/constants.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const TEST_IDS: {
2
2
  title: string;
3
- segment: string;
3
+ chip: string;
4
4
  settings: {
5
5
  droplist: string;
6
6
  droplistTrigger: string;
package/dist/cjs/components/NotificationPanel/constants.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.TEST_IDS = void 0;
7
7
  exports.TEST_IDS = {
8
8
  title: 'notification-panel__title',
9
- segment: 'notification-panel__segment',
9
+ chip: 'notification-panel__chip',
10
10
  settings: {
11
11
  droplist: 'notification-panel__settings__droplist',
12
12
  droplistTrigger: 'notification-panel__settings__droplist-trigger',
package/dist/esm/components/NotificationPanel/NotificationPanel.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { MouseEventHandler, ReactNode, RefObject } from 'react';
2
2
  import { ButtonFunctionProps } from '@snack-uikit/button';
3
- import { SegmentedControlProps } from '@snack-uikit/segmented-control';
3
+ import { ChipToggleProps } from '@snack-uikit/chips';
4
4
  import { WithSupportProps } from '@snack-uikit/utils';
5
5
  import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
6
6
  import { NotificationPanelDivider, NotificationPanelDividerProps } from './components/NotificationPanelDivider';
@@ -10,8 +10,8 @@ export type NotificationPanelProps = WithSupportProps<{
10
10
  title: string;
11
11
  /** Кнопка настроек и выпадающий список */
12
12
  settings?: NotificationPanelSettingsProps;
13
- /** Сегменты для фильтрации */
14
- segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
13
+ /** Чипы для фильтрации */
14
+ chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
15
15
  /** Кнопка в "шапке" панели */
16
16
  readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
17
17
  onClick: ButtonFunctionProps['onClick'];
@@ -34,7 +34,7 @@ export type NotificationPanelProps = WithSupportProps<{
34
34
  scrollContainerRef?: RefObject<HTMLElement>;
35
35
  }>;
36
36
  /** Компонент панели для уведомлений */
37
- export declare function NotificationPanel({ title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
37
+ export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
38
38
  export declare namespace NotificationPanel {
39
39
  const Blank: typeof NotificationPanelBlank;
40
40
  type BlankProps = NotificationPanelBlankProps;
package/dist/esm/components/NotificationPanel/NotificationPanel.js CHANGED
@@ -9,12 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
+ import { createElement as _createElement } from "react";
12
13
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
14
  import cn from 'classnames';
14
15
  import { useMemo } from 'react';
15
16
  import { ButtonFunction } from '@snack-uikit/button';
17
+ import { ChipToggle } from '@snack-uikit/chips';
16
18
  import { Scroll } from '@snack-uikit/scroll';
17
- import { SegmentedControl } from '@snack-uikit/segmented-control';
18
19
  import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
19
20
  import { TruncateString } from '@snack-uikit/truncate-string';
20
21
  import { Typography } from '@snack-uikit/typography';
@@ -26,9 +27,9 @@ import { TEST_IDS } from './constants';
26
27
  import styles from './styles.module.css';
27
28
  /** Компонент панели для уведомлений */
28
29
  export function NotificationPanel(_a) {
29
- var { title, settings, segments, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "segments", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
30
+ var { title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollEndRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollEndRef", "scrollContainerRef", "className"]);
30
31
  const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
31
- return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { 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: [segments && (_jsx("div", { className: styles.notificationPanelChips, children: _jsx(SegmentedControl, Object.assign({}, segments, { size: 's', items: segments.items.map(item => (Object.assign(Object.assign({}, item), { disabled: item.disabled || loading }))), "data-test-id": TEST_IDS.segment })) })), readAllButton && (_jsx(ButtonFunction, Object.assign({}, readAllButton, { size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
32
+ return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { 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, { size: 'xs', disabled: readAllButton.disabled || loading, "data-test-id": TEST_IDS.readAll })))] })] }), _jsxs(Scroll, { size: 'm', className: styles.notificationPanelBody, ref: scrollContainerRef, children: [content, loading && (_jsx(SkeletonContextProvider, { loading: loading || false, children: skeletons.map(skeleton => (_jsx(WithSkeleton, { skeleton: _jsx(NotificationCardSkeleton, {}) }, skeleton))) })), _jsx("div", { className: styles.scrollStub, ref: scrollEndRef })] }), footerButton && (_jsx("button", { type: 'button', onClick: footerButton.onClick, className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
32
33
  }
33
34
  (function (NotificationPanel) {
34
35
  NotificationPanel.Blank = NotificationPanelBlank;
package/dist/esm/components/NotificationPanel/constants.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const TEST_IDS: {
2
2
  title: string;
3
- segment: string;
3
+ chip: string;
4
4
  settings: {
5
5
  droplist: string;
6
6
  droplistTrigger: string;
package/dist/esm/components/NotificationPanel/constants.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export const TEST_IDS = {
2
2
  title: 'notification-panel__title',
3
- segment: 'notification-panel__segment',
3
+ chip: 'notification-panel__chip',
4
4
  settings: {
5
5
  droplist: 'notification-panel__settings__droplist',
6
6
  droplistTrigger: 'notification-panel__settings__droplist-trigger',
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Notification",
7
- "version": "0.13.17-preview-4eb2b89e.0",
7
+ "version": "0.13.17",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,19 +37,19 @@
37
37
  "scripts": {},
38
38
  "dependencies": {
39
39
  "@snack-uikit/button": "0.19.16",
40
+ "@snack-uikit/chips": "0.28.6",
40
41
  "@snack-uikit/icons": "0.27.3",
41
42
  "@snack-uikit/info-block": "0.6.33",
42
- "@snack-uikit/link": "0.17.11",
43
- "@snack-uikit/list": "0.32.5",
43
+ "@snack-uikit/link": "0.17.12",
44
+ "@snack-uikit/list": "0.32.6",
44
45
  "@snack-uikit/popover-private": "0.15.3",
45
46
  "@snack-uikit/scroll": "0.10.5",
46
- "@snack-uikit/segmented-control": "0.6.11-preview-4eb2b89e.0",
47
47
  "@snack-uikit/skeleton": "0.6.9",
48
48
  "@snack-uikit/tag": "0.15.10",
49
- "@snack-uikit/truncate-string": "0.7.2",
49
+ "@snack-uikit/truncate-string": "0.7.3",
50
50
  "@snack-uikit/typography": "0.8.11",
51
51
  "@snack-uikit/utils": "4.0.0",
52
52
  "classnames": "2.5.1"
53
53
  },
54
- "gitHead": "d46627c950a04cca650210be851e436e9994ca6a"
54
+ "gitHead": "4b590b25862e58fae2addec0ca0ddbb56d6d39f5"
55
55
  }
package/src/components/NotificationPanel/NotificationPanel.tsx CHANGED
@@ -2,8 +2,8 @@ import cn from 'classnames';
2
2
  import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
3
3
 
4
4
  import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
5
+ import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
5
6
  import { Scroll } from '@snack-uikit/scroll';
6
- import { SegmentedControl, SegmentedControlProps } from '@snack-uikit/segmented-control';
7
7
  import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
8
8
  import { TruncateString } from '@snack-uikit/truncate-string';
9
9
  import { Typography } from '@snack-uikit/typography';
@@ -27,8 +27,8 @@ export type NotificationPanelProps = WithSupportProps<{
27
27
  title: string;
28
28
  /** Кнопка настроек и выпадающий список */
29
29
  settings?: NotificationPanelSettingsProps;
30
- /** Сегменты для фильтрации */
31
- segments?: Omit<SegmentedControlProps, 'size' | 'data-test-id'>;
30
+ /** Чипы для фильтрации */
31
+ chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
32
32
  /** Кнопка в "шапке" панели */
33
33
  readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
34
34
  onClick: ButtonFunctionProps['onClick'];
@@ -55,7 +55,7 @@ export type NotificationPanelProps = WithSupportProps<{
55
55
  export function NotificationPanel({
56
56
  title,
57
57
  settings,
58
- segments,
58
+ chips,
59
59
  readAllButton,
60
60
  footerButton,
61
61
  content,
@@ -80,19 +80,17 @@ export function NotificationPanel({
80
80
  </div>
81
81
 
82
82
  <div className={styles.notificationPanelHeaderFunctions}>
83
- {segments && (
84
- <div className={styles.notificationPanelChips}>
85
- <SegmentedControl
86
- {...segments}
87
- size='s'
88
- items={segments.items.map(item => ({
89
- ...item,
90
- disabled: item.disabled || loading,
91
- }))}
92
- data-test-id={TEST_IDS.segment}
83
+ <div className={styles.notificationPanelChips}>
84
+ {chips?.map(chip => (
85
+ <ChipToggle
86
+ {...chip}
87
+ key={chip.label}
88
+ data-test-id={`${TEST_IDS.chip}-${chip.label}`}
89
+ size='xs'
90
+ disabled={chip.disabled || loading}
93
91
  />
94
- </div>
95
- )}
92
+ ))}
93
+ </div>
96
94
 
97
95
  {readAllButton && (
98
96
  <ButtonFunction
package/src/components/NotificationPanel/constants.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export const TEST_IDS = {
2
2
  title: 'notification-panel__title',
3
- segment: 'notification-panel__segment',
3
+ chip: 'notification-panel__chip',
4
4
  settings: {
5
5
  droplist: 'notification-panel__settings__droplist',
6
6
  droplistTrigger: 'notification-panel__settings__droplist-trigger',