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

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.11 (2024-02-08)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.11.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/list@0.3.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 ## 0.6.10 (2024-02-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -98,17 +98,28 @@ 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 | Количество скелетонов карточек для отображения при загрузке |
-| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
-| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| 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-класс для элемента содержащего контент |
 ## NotificationPanel.Blank
 ### Props
 | name | type | default value | description |

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

@@ -1,10 +1,10 @@
-import { MouseEventHandler, ReactNode, RefObject } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggleProps } from '@snack-uikit/chips';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { NotificationPanelPopoverProps } from '../../helperComponents';
 import { NotificationPanelBlank, NotificationPanelBlankProps, NotificationPanelSettingsProps } from './components';
 export type { NotificationPanelBlankProps };
-export type NotificationPanelProps = WithSupportProps<{
+export type NotificationPanelProps = {
     /** Заголовок панели */
     title: string;
     /** Кнопка настроек и выпадающий список */
@@ -15,25 +15,22 @@ export type NotificationPanelProps = WithSupportProps<{
     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;
-    /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
-    scrollRef?: RefObject<HTMLElement>;
-    /** Ссылка на контейнер, который скроллится */
-    scrollContainerRef?: RefObject<HTMLElement>;
-}>;
+} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
 /** Компонент панели для уведомлений */
-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 function NotificationPanel({ title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount, ...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,8 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChipToggle } from '@snack-uikit/chips';
@@ -19,18 +18,16 @@ 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 } from '@snack-uikit/utils';
+import { NotificationPanelPopover } from '../../helperComponents';
 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, 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"]);
+    var { title, triggerElement, settings, chips, readAllButton, footerButton, content, loading, skeletonsAmount = 2 } = _a, rest = __rest(_a, ["title", "triggerElement", "settings", "chips", "readAllButton", "footerButton", "content", "loading", "skeletonsAmount"]);
     const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
-    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 }) }))] })));
+    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 })));
 }
 (function (NotificationPanel) {
     NotificationPanel.Blank = NotificationPanelBlank;

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

@@ -94,10 +94,4 @@
 .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.11-preview-357970fd.0",
+  "version": "0.6.11",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,11 +33,11 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.16.0",
-    "@snack-uikit/chips": "0.11.1",
+    "@snack-uikit/chips": "0.11.2",
     "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/link": "0.11.1",
-    "@snack-uikit/list": "0.3.1-preview-357970fd.0",
+    "@snack-uikit/list": "0.3.1",
     "@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": "2a29639b6595426f8870afc293553dd9ee12f188"
+  "gitHead": "eb20092ecd05743f00831dfa51a3f5db2416be8f"
 }

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -1,5 +1,4 @@
-import cn from 'classnames';
-import { MouseEventHandler, ReactNode, RefObject, useMemo } from 'react';
+import { MouseEventHandler, ReactNode, useMemo } from 'react';
 
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
 import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
@@ -7,8 +6,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,
@@ -21,7 +20,7 @@ import styles from './styles.module.scss';
 
 export type { NotificationPanelBlankProps };
 
-export type NotificationPanelProps = WithSupportProps<{
+export type NotificationPanelProps = {
   /** Заголовок панели */
   title: string;
   /** Кнопка настроек и выпадающий список */
@@ -32,27 +31,25 @@ export type NotificationPanelProps = WithSupportProps<{
   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;
-  /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
-  scrollRef?: RefObject<HTMLElement>;
-  /** Ссылка на контейнер, который скроллится */
-  scrollContainerRef?: RefObject<HTMLElement>;
-}>;
+} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
 
 /** Компонент панели для уведомлений */
 export function NotificationPanel({
   title,
+  triggerElement,
   settings,
   chips,
   readAllButton,
@@ -60,69 +57,69 @@ export function NotificationPanel({
   content,
   loading,
   skeletonsAmount = 2,
-  scrollRef,
-  scrollContainerRef,
-  className,
   ...rest
 }: NotificationPanelProps) {
   const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
 
   return (
-    <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>
+    <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>
 
-          {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>
+            <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} ref={scrollContainerRef}>
-        {content}
-        {loading && (
-          <SkeletonContextProvider loading={loading || false}>
-            {skeletons.map(skeleton => (
-              <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
-            ))}
-          </SkeletonContextProvider>
-        )}
+              {readAllButton && (
+                <ButtonFunction
+                  {...readAllButton}
+                  disabled={readAllButton.disabled || loading}
+                  data-test-id={TEST_IDS.readAll}
+                />
+              )}
+            </div>
+          </div>
 
-        <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
-      </Scroll>
+          <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>
-        )
+          {!loading && footerButton && (
+            <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
+              <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
+            </button>
+          )}
+        </>
       }
-    </div>
+    >
+      {triggerElement}
+    </NotificationPanelPopover>
   );
 }
 

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

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