@snack-uikit/notification 0.6.16 → 0.6.17-preview-e40879b4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +22 -13
  2. package/dist/components/NotificationPanel/NotificationPanel.d.ts +10 -7
  3. package/dist/components/NotificationPanel/NotificationPanel.js +7 -4
  4. package/dist/components/NotificationPanel/styles.module.css +12 -0
  5. package/dist/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.d.ts +4 -2
  6. package/dist/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.js +1 -0
  7. package/dist/components/index.d.ts +1 -0
  8. package/dist/components/index.js +1 -0
  9. package/package.json +2 -2
  10. package/src/components/NotificationPanel/NotificationPanel.tsx +62 -59
  11. package/src/components/NotificationPanel/styles.module.scss +12 -0
  12. package/src/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.tsx +4 -2
  13. package/src/components/index.ts +1 -0
  14. package/dist/helperComponents/index.d.ts +0 -1
  15. package/dist/helperComponents/index.js +0 -1
  16. package/src/helperComponents/index.ts +0 -1
  17. /package/dist/{helperComponents → components}/NotificationPanelPopover/index.d.ts +0 -0
  18. /package/dist/{helperComponents → components}/NotificationPanelPopover/index.js +0 -0
  19. /package/dist/{helperComponents → components}/NotificationPanelPopover/styles.module.css +0 -0
  20. /package/src/{helperComponents → components}/NotificationPanelPopover/index.ts +0 -0
  21. /package/src/{helperComponents → components}/NotificationPanelPopover/styles.module.scss +0 -0
package/README.md CHANGED
@@ -98,15 +98,34 @@ const cards = [
98
98
  ### Props
99
99
  | name | type | default value | description |
100
100
  |------|------|---------------|-------------|
101
- | triggerElement* | `ReactNode \| ChildrenFunction` | - | Элемент для открытия панели |
102
101
  | title* | `string` | - | Заголовок панели |
103
102
  | settings | `NotificationPanelSettingsProps` | - | Кнопка настроек и выпадающий список |
104
103
  | chips | `Omit<ChipToggleProps, "data-test-id" \| "size">[]` | - | Чипы для фильтрации |
105
104
  | readAllButton | `Omit<ButtonFunctionProps, "data-test-id"> & { onClick: MouseEventHandler<HTMLElement>; }` | - | Кнопка в "шапке" панели |
106
105
  | footerButton | `{ label: string; onClick: MouseEventHandler<HTMLButtonElement>; }` | - | Кнопка внизу панели |
106
+ | className | `string` | - | CSS-класс |
107
107
  | loading | `boolean` | - | Состояние загрузки |
108
108
  | content | `ReactNode` | - | Контент для отрисовки (e.g NotificationCard \| NotificationPanel.Blank) |
109
109
  | skeletonsAmount | `number` | 2 | Количество скелетонов карточек для отображения при загрузке |
110
+ | scrollEndRef | `RefObject<HTMLDivElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
111
+ | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
112
+ ## NotificationPanel.Blank
113
+ ### Props
114
+ | name | type | default value | description |
115
+ |------|------|---------------|-------------|
116
+ | title* | `ReactNode` | - | Заголовок |
117
+ | description | `ReactNode` | - | Описание |
118
+ | icon | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | Иконка |
119
+ | iconAppearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Цвет обводки для иконки |
120
+ | className | `string` | - | CSS-класс |
121
+ ## NotificationPanelPopover
122
+ Компонент-обёртка для NotificationPanel для использования как выпадающий элемент
123
+ ### Props
124
+ | name | type | default value | description |
125
+ |------|------|---------------|-------------|
126
+ | children* | `ReactNode \| ChildrenFunction` | - | Триггер поповера (подробнее читайте ниже) |
127
+ | content* | `ReactElement<NotificationPanelProps, typeof NotificationPanel>` | - | |
128
+ | contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
110
129
  | className | `string` | - | CSS-класс |
111
130
  | triggerClassName | `string` | - | CSS-класс триггера |
112
131
  | open | `boolean` | - | Управляет состоянием показан/не показан. |
@@ -117,18 +136,8 @@ const cards = [
117
136
  | closeOnEscapeKey | `boolean` | true | Закрывать ли по нажатию на кнопку `Esc` |
118
137
  | triggerClickByKeys | `boolean` | true | Вызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = `click`) |
119
138
  | triggerRef | `ForwardedRef<HTMLElement \| ReferenceType>` | - | Ref ссылка на триггер |
120
- | trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | - | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
121
- | placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Положение поповера относительно своего триггера (children). |
122
- | contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
123
- ## NotificationPanel.Blank
124
- ### Props
125
- | name | type | default value | description |
126
- |------|------|---------------|-------------|
127
- | title* | `ReactNode` | - | Заголовок |
128
- | description | `ReactNode` | - | Описание |
129
- | icon | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | Иконка |
130
- | iconAppearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | - | Цвет обводки для иконки |
131
- | className | `string` | - | CSS-класс |
139
+ | 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 |
140
+ | 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). |
132
141
 
133
142
 
134
143
  [//]: DOCUMENTATION_SECTION_END
package/dist/components/NotificationPanel/NotificationPanel.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { MouseEventHandler, ReactNode } from 'react';
1
+ import { MouseEventHandler, ReactNode, RefObject } from 'react';
2
2
  import { ButtonFunctionProps } from '@snack-uikit/button';
3
3
  import { ChipToggleProps } from '@snack-uikit/chips';
4
- import { NotificationPanelPopoverProps } from '../../helperComponents';
4
+ import { WithSupportProps } from '@snack-uikit/utils';
5
5
  import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
6
6
  export type { NotificationPanelBlankProps };
7
- export type NotificationPanelProps = {
7
+ export type NotificationPanelProps = WithSupportProps<{
8
8
  /** Заголовок панели */
9
9
  title: string;
10
10
  /** Кнопка настроек и выпадающий список */
@@ -15,22 +15,25 @@ export type NotificationPanelProps = {
15
15
  readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
16
16
  onClick: ButtonFunctionProps['onClick'];
17
17
  };
18
- /** Элемент для открытия панели */
19
- triggerElement: NotificationPanelPopoverProps['children'];
20
18
  /** Кнопка внизу панели */
21
19
  footerButton?: {
22
20
  label: string;
23
21
  onClick: MouseEventHandler<HTMLButtonElement>;
24
22
  };
23
+ className?: string;
25
24
  /** Состояние загрузки */
26
25
  loading?: boolean;
27
26
  /** Контент для отрисовки (e.g NotificationCard | NotificationPanel.Blank) */
28
27
  content?: ReactNode;
29
28
  /** Количество скелетонов карточек для отображения при загрузке */
30
29
  skeletonsAmount?: number;
31
- } & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
30
+ /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
31
+ scrollEndRef?: RefObject<HTMLDivElement>;
32
+ /** Ссылка на контейнер, который скроллится */
33
+ scrollContainerRef?: RefObject<HTMLElement>;
34
+ }>;
32
35
  /** Компонент панели для уведомлений */
33
- export declare function NotificationPanel({ title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
36
+ export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollEndRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
34
37
  export declare namespace NotificationPanel {
35
38
  const Blank: typeof NotificationPanelBlank;
36
39
  type BlankProps = NotificationPanelBlankProps;
package/dist/components/NotificationPanel/NotificationPanel.js CHANGED
@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import { createElement as _createElement } from "react";
13
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
13
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
14
+ import cn from 'classnames';
14
15
  import { useMemo } from 'react';
15
16
  import { ButtonFunction } from '@snack-uikit/button';
16
17
  import { ChipToggle } from '@snack-uikit/chips';
@@ -18,16 +19,18 @@ import { Scroll } from '@snack-uikit/scroll';
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';
21
- import { NotificationPanelPopover } from '../../helperComponents';
22
+ import { extractSupportProps } from '@snack-uikit/utils';
22
23
  import { NotificationCardSkeleton } from '../NotificationCard/components';
23
24
  import { NotificationPanelBlank, NotificationPanelSettings, } from './components';
24
25
  import { TEST_IDS } from './constants';
25
26
  import styles from './styles.module.css';
26
27
  /** Компонент панели для уведомлений */
27
28
  export function NotificationPanel(_a) {
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
+ 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"]);
29
30
  const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
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
+ 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, { 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 })] }),
32
+ // !loading &&
33
+ footerButton && (_jsx("button", { className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
31
34
  }
32
35
  (function (NotificationPanel) {
33
36
  NotificationPanel.Blank = NotificationPanelBlank;
package/dist/components/NotificationPanel/styles.module.css CHANGED
@@ -94,4 +94,16 @@
94
94
  .notificationPanelFooterButton:active{
95
95
  color:var(--sys-neutral-text-main, #333333);
96
96
  border-color:var(--sys-neutral-decor-default, #dedede);
97
+ }
98
+
99
+ .wrapper{
100
+ box-sizing:border-box;
101
+ width:100%;
102
+ height:100%;
103
+ }
104
+
105
+ .scrollStub{
106
+ height:calc(var(--dimension-025m, 2px) / 2);
107
+ margin-top:calc(var(--dimension-025m, 2px) / -2);
108
+ background:transparent;
97
109
  }
package/dist/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.d.ts RENAMED
@@ -1,9 +1,11 @@
1
- import { ReactNode } from 'react';
1
+ import { ReactElement } from 'react';
2
2
  import { PopoverPrivateProps } from '@snack-uikit/popover-private';
3
3
  import { WithSupportProps } from '@snack-uikit/utils';
4
+ import { NotificationPanel, NotificationPanelProps } from '../NotificationPanel';
4
5
  export type NotificationPanelPopoverProps = WithSupportProps<{
5
- content: ReactNode;
6
+ content: ReactElement<NotificationPanelProps, typeof NotificationPanel>;
6
7
  /** CSS-класс для элемента содержащего контент */
7
8
  contentClassName?: string;
8
9
  } & Pick<PopoverPrivateProps, 'className' | 'triggerClassName' | 'open' | 'onOpenChange' | 'hoverDelayOpen' | 'hoverDelayClose' | 'offset' | 'children' | 'closeOnEscapeKey' | 'triggerClickByKeys' | 'triggerRef'> & Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement'>>>;
10
+ /** Компонент-обёртка для NotificationPanel для использования как выпадающий элемент */
9
11
  export declare function NotificationPanelPopover({ content, trigger, placement, children, contentClassName, ...otherProps }: NotificationPanelPopoverProps): import("react/jsx-runtime").JSX.Element | null;
package/dist/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.js RENAMED
@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import cn from 'classnames';
14
14
  import { PopoverPrivate } from '@snack-uikit/popover-private';
15
15
  import styles from './styles.module.css';
16
+ /** Компонент-обёртка для NotificationPanel для использования как выпадающий элемент */
16
17
  export function NotificationPanelPopover(_a) {
17
18
  var { content, trigger = 'click', placement = 'bottom-end', children, contentClassName } = _a, otherProps = __rest(_a, ["content", "trigger", "placement", "children", "contentClassName"]);
18
19
  if (!children) {
package/dist/components/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './NotificationCard';
2
2
  export * from './NotificationPanel';
3
+ export * from './NotificationPanelPopover';
package/dist/components/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './NotificationCard';
2
2
  export * from './NotificationPanel';
3
+ export * from './NotificationPanelPopover';
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Notification",
7
- "version": "0.6.16",
7
+ "version": "0.6.17-preview-e40879b4.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -47,5 +47,5 @@
47
47
  "@snack-uikit/utils": "3.2.0",
48
48
  "classnames": "2.3.2"
49
49
  },
50
- "gitHead": "2a64233470f28de9e0b08c1c219bd0e4cbd6ba20"
50
+ "gitHead": "83c6596d673690b97e619f2ff4745be264bf6b50"
51
51
  }
package/src/components/NotificationPanel/NotificationPanel.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import { MouseEventHandler, ReactNode, useMemo } from 'react';
1
+ import cn from 'classnames';
2
+ import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
2
3
 
3
4
  import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
4
5
  import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
@@ -6,8 +7,8 @@ import { Scroll } from '@snack-uikit/scroll';
6
7
  import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
7
8
  import { TruncateString } from '@snack-uikit/truncate-string';
8
9
  import { Typography } from '@snack-uikit/typography';
10
+ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
9
11
 
10
- import { NotificationPanelPopover, NotificationPanelPopoverProps } from '../../helperComponents';
11
12
  import { NotificationCardSkeleton } from '../NotificationCard/components';
12
13
  import {
13
14
  NotificationPanelBlank,
@@ -20,7 +21,7 @@ import styles from './styles.module.scss';
20
21
 
21
22
  export type { NotificationPanelBlankProps };
22
23
 
23
- export type NotificationPanelProps = {
24
+ export type NotificationPanelProps = WithSupportProps<{
24
25
  /** Заголовок панели */
25
26
  title: string;
26
27
  /** Кнопка настроек и выпадающий список */
@@ -31,25 +32,27 @@ export type NotificationPanelProps = {
31
32
  readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
32
33
  onClick: ButtonFunctionProps['onClick'];
33
34
  };
34
- /** Элемент для открытия панели */
35
- triggerElement: NotificationPanelPopoverProps['children'];
36
35
  /** Кнопка внизу панели */
37
36
  footerButton?: {
38
37
  label: string;
39
38
  onClick: MouseEventHandler<HTMLButtonElement>;
40
39
  };
40
+ className?: string;
41
41
  /** Состояние загрузки */
42
42
  loading?: boolean;
43
43
  /** Контент для отрисовки (e.g NotificationCard | NotificationPanel.Blank) */
44
44
  content?: ReactNode;
45
45
  /** Количество скелетонов карточек для отображения при загрузке */
46
46
  skeletonsAmount?: number;
47
- } & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
47
+ /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
48
+ scrollEndRef?: RefObject<HTMLDivElement>;
49
+ /** Ссылка на контейнер, который скроллится */
50
+ scrollContainerRef?: RefObject<HTMLElement>;
51
+ }>;
48
52
 
49
53
  /** Компонент панели для уведомлений */
50
54
  export function NotificationPanel({
51
55
  title,
52
- triggerElement,
53
56
  settings,
54
57
  chips,
55
58
  readAllButton,
@@ -57,69 +60,69 @@ export function NotificationPanel({
57
60
  content,
58
61
  loading,
59
62
  skeletonsAmount = 2,
63
+ scrollEndRef,
64
+ scrollContainerRef,
65
+ className,
60
66
  ...rest
61
67
  }: NotificationPanelProps) {
62
68
  const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
63
69
 
64
70
  return (
65
- <NotificationPanelPopover
66
- {...rest}
67
- content={
68
- <>
69
- <div className={styles.notificationPanelHeader}>
70
- <div className={styles.notificationPanelHeadline}>
71
- <Typography.SansHeadlineS className={styles.notificationPanelTitle}>
72
- <TruncateString text={title} data-test-id={TEST_IDS.title} />
73
- </Typography.SansHeadlineS>
71
+ <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
72
+ <div className={styles.notificationPanelHeader}>
73
+ <div className={styles.notificationPanelHeadline}>
74
+ <Typography.SansHeadlineS className={styles.notificationPanelTitle}>
75
+ <TruncateString text={title} data-test-id={TEST_IDS.title} />
76
+ </Typography.SansHeadlineS>
74
77
 
75
- {settings && <NotificationPanelSettings {...settings} />}
76
- </div>
78
+ {settings && <NotificationPanelSettings {...settings} />}
79
+ </div>
77
80
 
78
- <div className={styles.notificationPanelHeaderFunctions}>
79
- <div className={styles.notificationPanelChips}>
80
- {chips?.map(chip => (
81
- <ChipToggle
82
- {...chip}
83
- key={chip.label}
84
- data-test-id={`${TEST_IDS.chip}-${chip.label}`}
85
- size='xs'
86
- disabled={chip.disabled || loading}
87
- />
88
- ))}
89
- </div>
90
-
91
- {readAllButton && (
92
- <ButtonFunction
93
- {...readAllButton}
94
- disabled={readAllButton.disabled || loading}
95
- data-test-id={TEST_IDS.readAll}
96
- />
97
- )}
98
- </div>
81
+ <div className={styles.notificationPanelHeaderFunctions}>
82
+ <div className={styles.notificationPanelChips}>
83
+ {chips?.map(chip => (
84
+ <ChipToggle
85
+ {...chip}
86
+ key={chip.label}
87
+ data-test-id={`${TEST_IDS.chip}-${chip.label}`}
88
+ size='xs'
89
+ disabled={chip.disabled || loading}
90
+ />
91
+ ))}
99
92
  </div>
100
93
 
101
- <Scroll size='m' className={styles.notificationPanelBody}>
102
- {loading ? (
103
- <SkeletonContextProvider loading={loading || false}>
104
- {skeletons.map(skeleton => (
105
- <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
106
- ))}
107
- </SkeletonContextProvider>
108
- ) : (
109
- content
110
- )}
111
- </Scroll>
112
-
113
- {!loading && footerButton && (
114
- <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
115
- <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
116
- </button>
94
+ {readAllButton && (
95
+ <ButtonFunction
96
+ {...readAllButton}
97
+ disabled={readAllButton.disabled || loading}
98
+ data-test-id={TEST_IDS.readAll}
99
+ />
117
100
  )}
118
- </>
101
+ </div>
102
+ </div>
103
+
104
+ <Scroll size='m' className={styles.notificationPanelBody} ref={scrollContainerRef}>
105
+ {content}
106
+ {loading && (
107
+ <SkeletonContextProvider loading={loading || false}>
108
+ {skeletons.map(skeleton => (
109
+ <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
110
+ ))}
111
+ </SkeletonContextProvider>
112
+ )}
113
+
114
+ <div className={styles.scrollStub} ref={scrollEndRef} />
115
+ </Scroll>
116
+
117
+ {
118
+ // !loading &&
119
+ footerButton && (
120
+ <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
121
+ <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
122
+ </button>
123
+ )
119
124
  }
120
- >
121
- {triggerElement}
122
- </NotificationPanelPopover>
125
+ </div>
123
126
  );
124
127
  }
125
128
 
package/src/components/NotificationPanel/styles.module.scss CHANGED
@@ -107,3 +107,15 @@
107
107
  border-color: $sys-neutral-decor-default;
108
108
  }
109
109
  }
110
+
111
+ .wrapper {
112
+ box-sizing: border-box;
113
+ width: 100%;
114
+ height: 100%;
115
+ }
116
+
117
+ .scrollStub {
118
+ height: calc($dimension-025m / 2);
119
+ margin-top: calc($dimension-025m / -2);
120
+ background: transparent;
121
+ }
package/src/{helperComponents → components}/NotificationPanelPopover/NotificationPanelPopover.tsx RENAMED
@@ -1,14 +1,15 @@
1
1
  import cn from 'classnames';
2
- import { ReactNode } from 'react';
2
+ import { ReactElement } from 'react';
3
3
 
4
4
  import { PopoverPrivate, PopoverPrivateProps } from '@snack-uikit/popover-private';
5
5
  import { WithSupportProps } from '@snack-uikit/utils';
6
6
 
7
+ import { NotificationPanel, NotificationPanelProps } from '../NotificationPanel';
7
8
  import styles from './styles.module.scss';
8
9
 
9
10
  export type NotificationPanelPopoverProps = WithSupportProps<
10
11
  {
11
- content: ReactNode;
12
+ content: ReactElement<NotificationPanelProps, typeof NotificationPanel>;
12
13
  /** CSS-класс для элемента содержащего контент */
13
14
  contentClassName?: string;
14
15
  } & Pick<
@@ -28,6 +29,7 @@ export type NotificationPanelPopoverProps = WithSupportProps<
28
29
  Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement'>>
29
30
  >;
30
31
 
32
+ /** Компонент-обёртка для NotificationPanel для использования как выпадающий элемент */
31
33
  export function NotificationPanelPopover({
32
34
  content,
33
35
  trigger = 'click',
package/src/components/index.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './NotificationCard';
2
2
  export * from './NotificationPanel';
3
+ export * from './NotificationPanelPopover';
package/dist/helperComponents/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './NotificationPanelPopover';
package/dist/helperComponents/index.js DELETED
@@ -1 +0,0 @@
1
- export * from './NotificationPanelPopover';
package/src/helperComponents/index.ts DELETED
@@ -1 +0,0 @@
1
- export * from './NotificationPanelPopover';