@snack-uikit/notification 0.7.59 → 0.7.60-preview-ba12ca94.0

package/dist/cjs/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettingsDroplist.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationPanelSettingsDroplist = NotificationPanelSettingsDroplist;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const button_1 = require("@snack-uikit/button");
+const list_1 = require("@snack-uikit/list");
+const tag_1 = require("@snack-uikit/tag");
+const constants_1 = require("../../constants");
+function NotificationPanelSettingsDroplist(_ref) {
+  let {
+    actions,
+    button
+  } = _ref;
+  const [isDroplistOpen, setDroplistOpen] = (0, react_1.useState)(false);
+  return (0, jsx_runtime_1.jsx)(list_1.Droplist, {
+    trigger: 'clickAndFocusVisible',
+    open: isDroplistOpen,
+    onOpenChange: setDroplistOpen,
+    scroll: true,
+    placement: 'bottom-end',
+    "data-test-id": constants_1.TEST_IDS.settings.droplist,
+    items: actions.map(_ref2 => {
+      let {
+        icon,
+        content,
+        tagLabel,
+        disabled,
+        onClick
+      } = _ref2;
+      return {
+        onClick: e => {
+          setDroplistOpen(false);
+          onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        },
+        disabled,
+        content,
+        beforeContent: icon,
+        afterContent: tagLabel ? (0, jsx_runtime_1.jsx)(tag_1.Tag, {
+          label: tagLabel
+        }) : undefined,
+        'data-test-id': constants_1.TEST_IDS.settings.droplistAction
+      };
+    }),
+    children: (0, jsx_runtime_1.jsx)(button_1.ButtonSimple, Object.assign({}, button))
+  });
+}

package/dist/cjs/components/NotificationPanel/components/NotificationPanelSettings/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./NotificationPanelSettings"), exports);

package/dist/cjs/components/NotificationPanel/components/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./NotificationPanelSettings"), exports);
+__exportStar(require("./NotificationPanelBlank"), exports);

package/dist/cjs/components/NotificationPanel/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_IDS = void 0;
+exports.TEST_IDS = {
+  title: 'notification-panel__title',
+  chip: 'notification-panel__chip',
+  settings: {
+    droplist: 'notification-panel__settings__droplist',
+    droplistTrigger: 'notification-panel__settings__droplist-trigger',
+    droplistAction: 'notification-panel__settings__droplist-action'
+  },
+  readAll: 'notification-panel__readAll',
+  footerButton: 'notification-panel__footerButton',
+  skeleton: 'notification-panel__skeleton'
+};

package/dist/cjs/components/NotificationPanel/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./NotificationPanel"), exports);

package/dist/cjs/components/NotificationPanelPopover/NotificationPanelPopover.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationPanelPopover = NotificationPanelPopover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const popover_private_1 = require("@snack-uikit/popover-private");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Компонент-обёртка для NotificationPanel для использования как выпадающий элемент */
+function NotificationPanelPopover(_a) {
+  var {
+      content,
+      trigger = 'click',
+      placement = 'bottom-end',
+      children,
+      contentClassName
+    } = _a,
+    otherProps = __rest(_a, ["content", "trigger", "placement", "children", "contentClassName"]);
+  if (!children) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsx)(popover_private_1.PopoverPrivate, Object.assign({
+    fallbackPlacements: [],
+    placement: placement,
+    popoverContent: (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.notificationPanelPopoverWrap,
+      children: (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classnames_1.default)(styles_module_scss_1.default.notificationPanelPopover, contentClassName),
+        children: content
+      })
+    }),
+    trigger: trigger,
+    hasArrow: false,
+    heightStrategy: 'lte'
+  }, otherProps, {
+    children: children
+  }));
+}

package/dist/cjs/components/NotificationPanelPopover/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./NotificationPanelPopover"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./NotificationCard"), exports);
+__exportStar(require("./NotificationPanel"), exports);
+__exportStar(require("./NotificationPanelPopover"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/esm/components/NotificationCard/NotificationCard.d.ts

@@ -0,0 +1,43 @@
+import { MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
+import { LinkProps } from '@snack-uikit/link';
+import { BaseItemProps } from '@snack-uikit/list';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Appearance } from './types';
+type Action = {
+    icon?: ReactElement;
+    tagLabel?: string;
+} & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
+export type NotificationCardProps = WithSupportProps<{
+    /** Идентификатор уведомления */
+    id: string;
+    /** Тип уведомления */
+    appearance?: Appearance;
+    /** Лейбл перед заголовком */
+    label?: string;
+    /** Управление состоянием прочитано/не прочитано */
+    unread?: boolean;
+    /** Заголовок уведомления */
+    title: string;
+    /** Контент уведомления */
+    content: ReactNode;
+    /** Ссылка */
+    link?: Omit<LinkProps, 'size' | 'appearance' | 'textMode' | 'data-test-id'>;
+    /** Дата уведомления */
+    date: string;
+    /** Колбэк клика по карточке */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** Колбэк при попадании карточки в область видимости на 80% */
+    onVisible?(cardId: string): void;
+    /** Кнопка главного действия у карточки */
+    primaryButton?: Omit<ButtonTonalProps, 'size' | 'appearance' | 'data-test-id'>;
+    /** Кнопка второстепенного действия у карточки */
+    secondaryButton?: Omit<ButtonSimpleProps, 'size' | 'appearance' | 'data-test-id'>;
+    /** Дополнительные действия у карточки */
+    actions?: Action[];
+    /** CSS-класс */
+    className?: string;
+}>;
+/** Компонент карточки уведомления */
+export declare function NotificationCard({ id, appearance, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className, ...rest }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/NotificationCard/components/NotificationCardFunction.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from 'react';
+import { NotificationCardProps } from '../NotificationCard';
+export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & {
+    open: boolean;
+    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+};
+export declare function NotificationCardFunction({ actions, open, setDroplistOpen }: NotificationCardFunctionProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/NotificationCard/components/NotificationCardSkeleton.d.ts

@@ -0,0 +1 @@
+export declare function NotificationCardSkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/NotificationCard/components/index.js

@@ -0,0 +1,2 @@
+export * from './NotificationCardFunction';
+export * from './NotificationCardSkeleton';

package/dist/esm/components/NotificationCard/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const APPEARANCE: {
+    readonly Neutral: "neutral";
+    readonly Error: "error";
+    readonly ErrorCritical: "errorCritical";
+    readonly Warning: "warning";
+    readonly Success: "success";
+};
+export declare const TEST_IDS: {
+    label: string;
+    title: string;
+    content: string;
+    link: string;
+    date: string;
+    actions: {
+        wrapper: string;
+        droplist: string;
+        droplistTrigger: string;
+        droplistAction: string;
+    };
+    primaryButton: string;
+    secondaryButton: string;
+};

package/dist/esm/components/NotificationCard/helpers.d.ts

@@ -0,0 +1,2 @@
+import { Appearance } from './types';
+export declare function getIcon(appearance: Appearance): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/NotificationCard/index.js

@@ -0,0 +1 @@
+export * from './NotificationCard';

package/dist/esm/components/NotificationCard/styles.module.css

@@ -0,0 +1,135 @@
+.notificationCardFunction{
+  padding-top:var(--space-notification-panel-card-function-badge-padding-top, 12px);
+  padding-right:var(--space-notification-panel-card-function-badge-padding-right, 20px);
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  right:0;
+  display:flex;
+  opacity:0;
+}
+
+.notificationCardTitleText{
+  box-sizing:border-box;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.notificationCardTitleIcon{
+  width:var(--size-notification-panel-card-icon-type, 20px);
+  height:var(--size-notification-panel-card-icon-type, 20px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+
+.notificationCard{
+  padding-left:var(--space-notification-panel-card-padding-horizontal, 24px);
+  padding-right:var(--space-notification-panel-card-padding-horizontal, 24px);
+  padding-top:var(--space-notification-panel-card-padding-vertical, 16px);
+  padding-bottom:var(--space-notification-panel-card-padding-vertical, 16px);
+  gap:var(--space-notification-panel-card-gap, 8px);
+  border-bottom-width:var(--border-width-notification-panel-card, 1px);
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  max-width:100%;
+  border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-bottom-style:solid;
+}
+.notificationCard::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  width:100%;
+  height:calc(100% + var(--border-width-notification-panel-card, 1px));
+  opacity:var(--opacity-a004, 0.04);
+}
+.notificationCard:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  border-bottom-color:transparent;
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+.notificationCard[data-droplist-open]::before, .notificationCard:hover::before, .notificationCard:focus-visible::before, .notificationCard:focus-within:not(:focus)::before{
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}
+.notificationCard[data-droplist-open] .notificationCardFunction, .notificationCard:hover .notificationCardFunction, .notificationCard:focus-visible .notificationCardFunction, .notificationCard:focus-within:not(:focus) .notificationCardFunction{
+  pointer-events:auto;
+  opacity:1;
+}
+.notificationCard[data-clickable]{
+  cursor:pointer;
+}
+.notificationCard[data-unread]::before{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+}
+.notificationCard[data-unread][data-droplist-open]::before, .notificationCard[data-unread]:hover::before, .notificationCard[data-unread]:focus-visible::before, .notificationCard[data-unread]:focus-within:not(:focus)::before{
+  opacity:var(--opacity-a004, 0.04);
+}
+.notificationCard[data-appearance=neutral] .notificationCardTitleIcon{
+  color:var(--sys-neutral-accent-default, #787b8a);
+}
+.notificationCard[data-appearance=error] .notificationCardTitleIcon, .notificationCard[data-appearance=errorCritical] .notificationCardTitleIcon{
+  color:var(--sys-red-accent-default, #cb3f3e);
+}
+.notificationCard[data-appearance=errorCritical][data-unread]::before, .notificationCard[data-appearance=errorCritical][data-droplist-open]::before, .notificationCard[data-appearance=errorCritical]:hover::before, .notificationCard[data-appearance=errorCritical]:focus-visible::before, .notificationCard[data-appearance=errorCritical]:focus-within:not(:focus)::before{
+  background-color:var(--sys-red-accent-default, #cb3f3e);
+}
+.notificationCard[data-appearance=errorCritical] .notificationCardTitleText{
+  color:var(--sys-red-accent-default, #cb3f3e);
+}
+.notificationCard[data-appearance=warning] .notificationCardTitleIcon{
+  color:var(--sys-yellow-accent-default, #e2b134);
+}
+.notificationCard[data-appearance=success] .notificationCardTitleIcon{
+  color:var(--sys-green-accent-default, #57b762);
+}
+.notificationCard[data-skeleton]::before{
+  display:none;
+}
+
+.notificationCardLabel{
+  display:grid;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.notificationCardTitle{
+  gap:var(--space-notification-panel-card-title-layout-gap, 4px);
+  display:flex;
+}
+.notificationCardTitle[data-center]{
+  align-items:center;
+}
+
+.notificationCardContent{
+  box-sizing:border-box;
+  color:var(--sys-neutral-text-support, #6d707f);
+  white-space:pre-line;
+}
+
+.notificationCardFooter{
+  display:flex;
+  align-items:flex-end;
+  justify-content:space-between;
+  box-sizing:border-box;
+}
+
+.notificationCardDate{
+  flex:1 0 auto;
+  box-sizing:border-box;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  text-align:right;
+}
+
+.notificationCardButtons{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+}

package/dist/esm/components/NotificationCard/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;

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

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

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

@@ -0,0 +1,4 @@
+import { InfoBlockProps } from '@snack-uikit/info-block';
+export type NotificationPanelBlankProps = Omit<InfoBlockProps, 'footer' | 'align' | 'size'>;
+/** Компонента для "заглушки" вместо карточек в панели */
+export declare function NotificationPanelBlank({ icon, className, ...props }: NotificationPanelBlankProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/NotificationPanel/components/NotificationPanelBlank/index.js

@@ -0,0 +1 @@
+export * from './NotificationPanelBlank';

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

@@ -0,0 +1,3 @@
+.notificationPanelBlank{
+  padding:var(--space-notification-panel-body-info-padding, 24px);
+}

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

@@ -0,0 +1,8 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+export type NotificationPanelDividerProps = WithSupportProps<{
+    /** Текст разделителя */
+    text: string;
+    className?: string;
+}>;
+/** Разделитель для группировки или разделения карточек в списке */
+export declare function NotificationPanelDivider({ text, className, ...rest }: NotificationPanelDividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/NotificationPanel/components/NotificationPanelDivider/index.js

@@ -0,0 +1 @@
+export * from './NotificationPanelDivider';

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

@@ -0,0 +1,10 @@
+.notificationPanelDivider{
+  height:var(--size-notification-panel-readed-divider, 32px);
+  border-bottom-width:var(--border-width-notification-panel-container, 1px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  border-bottom-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-bottom-style:solid;
+}

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

@@ -0,0 +1,9 @@
+import { ButtonSimpleProps } from '@snack-uikit/button';
+import { Action } from './NotificationPanelSettingsDroplist';
+export type NotificationPanelSettingsProps = {
+    /** Дополнительные действия панели */
+    actions?: Action[];
+    /** Кнопка дополнительного действия панели */
+    button: Omit<ButtonSimpleProps, 'label' | 'type' | 'size' | 'data-test-id'>;
+};
+export declare function NotificationPanelSettings({ actions, button }: NotificationPanelSettingsProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettingsDroplist.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { ButtonSimpleProps } from '@snack-uikit/button';
+import { BaseItemProps } from '@snack-uikit/list';
+export type Action = {
+    icon?: ReactElement;
+    tagLabel?: string;
+} & Pick<BaseItemProps, 'content' | 'disabled' | 'onClick'>;
+type NotificationPanelSettingsDroplistProps = {
+    actions: Action[];
+    button: ButtonSimpleProps;
+};
+export declare function NotificationPanelSettingsDroplist({ actions, button }: NotificationPanelSettingsDroplistProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/NotificationPanel/components/NotificationPanelSettings/index.js

@@ -0,0 +1 @@
+export * from './NotificationPanelSettings';

package/dist/esm/components/NotificationPanel/components/index.js

@@ -0,0 +1,2 @@
+export * from './NotificationPanelSettings';
+export * from './NotificationPanelBlank';

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

@@ -0,0 +1,12 @@
+export declare const TEST_IDS: {
+    title: string;
+    chip: string;
+    settings: {
+        droplist: string;
+        droplistTrigger: string;
+        droplistAction: string;
+    };
+    readAll: string;
+    footerButton: string;
+    skeleton: string;
+};

package/dist/esm/components/NotificationPanel/index.js

@@ -0,0 +1 @@
+export * from './NotificationPanel';