@snack-uikit/notification 0.6.10 → 0.6.11-preview-357970fd.0

package/README.md

@@ -98,28 +98,17 @@ const cards = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| triggerElement* | `ReactNode \| ChildrenFunction` | - | Элемент для открытия панели |
 | title* | `string` | - | Заголовок панели |
 | settings | `NotificationPanelSettingsProps` | - | Кнопка настроек и выпадающий список |
 | chips | `Omit<ChipToggleProps, "data-test-id" \| "size">[]` | - | Чипы для фильтрации |
 | readAllButton | `Omit<ButtonFunctionProps, "data-test-id"> & { onClick: MouseEventHandler<HTMLElement>; }` | - | Кнопка в "шапке" панели |
 | footerButton | `{ label: string; onClick: MouseEventHandler<HTMLButtonElement>; }` | - | Кнопка внизу панели |
+| className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |
 | content | `ReactNode` | - | Контент для отрисовки (e.g NotificationCard \| NotificationPanel.Blank) |
 | skeletonsAmount | `number` | 2 | Количество скелетонов карточек для отображения при загрузке |
-| className | `string` | - | CSS-класс |
-| triggerClassName | `string` | - | CSS-класс триггера |
-| open | `boolean` | - | Управляет состоянием показан/не показан. |
-| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
-| hoverDelayOpen | `number` | - | Задержка открытия по ховеру |
-| hoverDelayClose | `number` | - | Задержка закрытия по ховеру |
-| offset | `number` | 0 | Отступ поповера от его триггер-элемента (в пикселях). |
-| closeOnEscapeKey | `boolean` | true | Закрывать ли по нажатию на кнопку `Esc` |
-| triggerClickByKeys | `boolean` | true | Вызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = `click`) |
-| triggerRef | `ForwardedRef<HTMLElement \| ReferenceType>` | - | Ref ссылка на триггер |
-| 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 |
-| 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). |
-| contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 ## NotificationPanel.Blank
 ### Props
 | name | type | default value | description |

package/dist/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,10 +1,10 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggleProps } from '@snack-uikit/chips';
-import { NotificationPanelPopoverProps } from '../../helperComponents';
+import { WithSupportProps } from '@snack-uikit/utils';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
 export type { NotificationPanelBlankProps };
-export type NotificationPanelProps = {
+export type NotificationPanelProps = WithSupportProps<{
     /** Заголовок панели */
     title: string;
     /** Кнопка настроек и выпадающий список */
@@ -15,22 +15,25 @@ export type NotificationPanelProps = {
     readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
         onClick: ButtonFunctionProps['onClick'];
     };
-    /** Элемент для открытия панели */
-    triggerElement: NotificationPanelPopoverProps['children'];
     /** Кнопка внизу панели */
     footerButton?: {
         label: string;
         onClick: MouseEventHandler<HTMLButtonElement>;
     };
+    className?: string;
     /** Состояние загрузки */
     loading?: boolean;
     /** Контент для отрисовки (e.g NotificationCard | NotificationPanel.Blank) */
     content?: ReactNode;
     /** Количество скелетонов карточек для отображения при загрузке */
     skeletonsAmount?: number;
-} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
+    /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
+    scrollRef?: RefObject<HTMLElement>;
+    /** Ссылка на контейнер, который скроллится */
+    scrollContainerRef?: RefObject<HTMLElement>;
+}>;
 /** Компонент панели для уведомлений */
-export declare function NotificationPanel({ title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationPanel({ title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, scrollRef, scrollContainerRef, className, ...rest }: NotificationPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationPanel {
     const Blank: typeof NotificationPanelBlank;
     type BlankProps = NotificationPanelBlankProps;

package/dist/components/NotificationPanel/NotificationPanel.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
 import { useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChipToggle } from '@snack-uikit/chips';
@@ -18,16 +19,18 @@ import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
-import { NotificationPanelPopover } from '../../helperComponents';
+import { extractSupportProps } from '@snack-uikit/utils';
 import { NotificationCardSkeleton } from '../NotificationCard/components';
 import { NotificationPanelBlank, NotificationPanelSettings, } from './components';
 import { TEST_IDS } from './constants';
 import styles from './styles.module.css';
 /** Компонент панели для уведомлений */
 export function NotificationPanel(_a) {
-    var { title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2 } = _a, rest = __rest(_a, ["title", "triggerElement", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount"]);
+    var { title, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2, scrollRef, scrollContainerRef, className } = _a, rest = __rest(_a, ["title", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount", "scrollRef", "scrollContainerRef", "className"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    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 })));
+    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: scrollRef })] }), 
+            // !loading &&
+            footerButton && (_jsx("button", { className: styles.notificationPanelFooterButton, "data-test-id": TEST_IDS.footerButton, children: _jsx(Typography.SansLabelS, { children: footerButton.label }) }))] })));
 }
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;

package/dist/components/NotificationPanel/styles.module.css

@@ -94,4 +94,10 @@
 .notificationPanelFooterButton:active{
   color:var(--sys-neutral-text-main, #333333);
   border-color:var(--sys-neutral-decor-default, #dedede);
+}
+
+.wrapper{
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.6.10",
+  "version": "0.6.11-preview-357970fd.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,7 +37,7 @@
     "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/link": "0.11.1",
-    "@snack-uikit/list": "0.3.0",
+    "@snack-uikit/list": "0.3.1-preview-357970fd.0",
     "@snack-uikit/popover-private": "0.13.0",
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/skeleton": "0.3.2",
@@ -47,5 +47,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "88a44a8f4c6490f3004f7feac3d50d17ff03f31c"
+  "gitHead": "2a29639b6595426f8870afc293553dd9ee12f188"
 }

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -1,4 +1,5 @@
-import { MouseEventHandler, ReactNode, useMemo } from 'react';
+import cn from 'classnames';
+import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
 
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
@@ -6,8 +7,8 @@ import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { NotificationPanelPopover, NotificationPanelPopoverProps } from '../../helperComponents';
 import { NotificationCardSkeleton } from '../NotificationCard/components';
 import {
   NotificationPanelBlank,
@@ -20,7 +21,7 @@ import styles from './styles.module.scss';
 
 export type { NotificationPanelBlankProps };
 
-export type NotificationPanelProps = {
+export type NotificationPanelProps = WithSupportProps<{
   /** Заголовок панели */
   title: string;
   /** Кнопка настроек и выпадающий список */
@@ -31,25 +32,27 @@ export type NotificationPanelProps = {
   readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
     onClick: ButtonFunctionProps['onClick'];
   };
-  /** Элемент для открытия панели */
-  triggerElement: NotificationPanelPopoverProps['children'];
   /** Кнопка внизу панели */
   footerButton?: {
     label: string;
     onClick: MouseEventHandler<HTMLButtonElement>;
   };
+  className?: string;
   /** Состояние загрузки */
   loading?: boolean;
   /** Контент для отрисовки (e.g NotificationCard | NotificationPanel.Blank) */
   content?: ReactNode;
   /** Количество скелетонов карточек для отображения при загрузке */
   skeletonsAmount?: number;
-} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
+  /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
+  scrollRef?: RefObject<HTMLElement>;
+  /** Ссылка на контейнер, который скроллится */
+  scrollContainerRef?: RefObject<HTMLElement>;
+}>;
 
 /** Компонент панели для уведомлений */
 export function NotificationPanel({
   title,
-  triggerElement,
   settings,
   chips,
   readAllButton,
@@ -57,69 +60,69 @@ export function NotificationPanel({
   content,
   loading,
   skeletonsAmount = 2,
+  scrollRef,
+  scrollContainerRef,
+  className,
   ...rest
 }: NotificationPanelProps) {
   const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
 
   return (
-    <NotificationPanelPopover
-      {...rest}
-      content={
-        <>
-          <div className={styles.notificationPanelHeader}>
-            <div className={styles.notificationPanelHeadline}>
-              <Typography.SansHeadlineS className={styles.notificationPanelTitle}>
-                <TruncateString text={title} data-test-id={TEST_IDS.title} />
-              </Typography.SansHeadlineS>
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      <div className={styles.notificationPanelHeader}>
+        <div className={styles.notificationPanelHeadline}>
+          <Typography.SansHeadlineS className={styles.notificationPanelTitle}>
+            <TruncateString text={title} data-test-id={TEST_IDS.title} />
+          </Typography.SansHeadlineS>
 
-              {settings && <NotificationPanelSettings {...settings} />}
-            </div>
+          {settings && <NotificationPanelSettings {...settings} />}
+        </div>
 
-            <div className={styles.notificationPanelHeaderFunctions}>
-              <div className={styles.notificationPanelChips}>
-                {chips?.map(chip => (
-                  <ChipToggle
-                    {...chip}
-                    key={chip.label}
-                    data-test-id={`${TEST_IDS.chip}-${chip.label}`}
-                    size='xs'
-                    disabled={chip.disabled || loading}
-                  />
-                ))}
-              </div>
-
-              {readAllButton && (
-                <ButtonFunction
-                  {...readAllButton}
-                  disabled={readAllButton.disabled || loading}
-                  data-test-id={TEST_IDS.readAll}
-                />
-              )}
-            </div>
+        <div className={styles.notificationPanelHeaderFunctions}>
+          <div className={styles.notificationPanelChips}>
+            {chips?.map(chip => (
+              <ChipToggle
+                {...chip}
+                key={chip.label}
+                data-test-id={`${TEST_IDS.chip}-${chip.label}`}
+                size='xs'
+                disabled={chip.disabled || loading}
+              />
+            ))}
           </div>
 
-          <Scroll size='m' className={styles.notificationPanelBody}>
-            {loading ? (
-              <SkeletonContextProvider loading={loading || false}>
-                {skeletons.map(skeleton => (
-                  <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
-                ))}
-              </SkeletonContextProvider>
-            ) : (
-              content
-            )}
-          </Scroll>
-
-          {!loading && footerButton && (
-            <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
-              <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
-            </button>
+          {readAllButton && (
+            <ButtonFunction
+              {...readAllButton}
+              disabled={readAllButton.disabled || loading}
+              data-test-id={TEST_IDS.readAll}
+            />
           )}
-        </>
+        </div>
+      </div>
+
+      <Scroll size='m' className={styles.notificationPanelBody} ref={scrollContainerRef}>
+        {content}
+        {loading && (
+          <SkeletonContextProvider loading={loading || false}>
+            {skeletons.map(skeleton => (
+              <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
+            ))}
+          </SkeletonContextProvider>
+        )}
+
+        <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
+      </Scroll>
+
+      {
+        // !loading &&
+        footerButton && (
+          <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
+            <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
+          </button>
+        )
       }
-    >
-      {triggerElement}
-    </NotificationPanelPopover>
+    </div>
   );
 }
 

package/src/components/NotificationPanel/styles.module.scss

@@ -107,3 +107,9 @@
     border-color: $sys-neutral-decor-default;
   }
 }
+
+.wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}