@snack-uikit/notification 0.10.19-preview-9ca6ecbf.0 → 0.10.19

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.10.19 (2025-03-03)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.25.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+
+
+
+
+
 ## 0.10.18 (2025-02-25)
 
 ### Only dependencies have been changed

package/README.md

@@ -81,24 +81,70 @@ const cards = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| date* | `string` | - | Дата уведомления |
+| content* | `ReactNode` | - | Контент уведомления |
+| title* | `string` | - | Заголовок уведомления |
+| id* | `string` | - | Идентификатор уведомления |
+| appearance | enum Appearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral | Тип уведомления |
+| label | `string` | - | Лейбл перед заголовком |
+| unread | `boolean` | - | Управление состоянием прочитано/не прочитано |
+| link | `Omit<LinkProps, "data-test-id" \| "appearance" \| "size" \| "textMode">` | - | Ссылка |
+| onClick | `MouseEventHandler<HTMLDivElement>` | - | Колбэк клика по карточке |
+| onVisible | `(cardId: string) => void` | - | Колбэк при попадании карточки в область видимости на 80% |
+| primaryButton | `Omit<ButtonTonalProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка главного действия у карточки |
+| secondaryButton | `Omit<ButtonSimpleProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка второстепенного действия у карточки |
+| actions | `Action[]` | - | Дополнительные действия у карточки |
+| className | `string` | - | CSS-класс |
 ## NotificationPanel
 Компонент панели для уведомлений
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| 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 | Количество скелетонов карточек для отображения при загрузке |
+| scrollEndRef | `RefObject<HTMLDivElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 ## NotificationPanel.Blank
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| title | `string` | - | Заголовок |
+| className | `string` | - | CSS-класс |
+| icon | `Pick<IconPredefinedProps, "appearance" \| "icon" \| "decor">` | - | Иконка |
+| description | `ReactNode` | - | Подзаголовок |
 ## NotificationPanel.Divider
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| text* | `string` | - | Текст разделителя |
+| className | `string` | - | CSS-класс |
 ## NotificationPanelPopover
 Компонент-обёртка для NotificationPanel для использования как выпадающий элемент
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| content* | `ReactElement<NotificationPanelProps, typeof NotificationPanel>` | - |  |
+| contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
+| className | `string` | - | CSS-класс |
+| triggerClassName | `string` | - | CSS-класс триггера |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
+| hoverDelayOpen | `number` | - | Задержка открытия по ховеру |
+| hoverDelayClose | `number` | - | Задержка закрытия по ховеру |
+| offset | `number` | 0 | Отступ поповера от его триггер-элемента (в пикселях). |
+| children | `ReactNode \| ChildrenFunction` | - | Триггер поповера (подробнее читайте ниже) |
+| 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"` | click | Условие отображения поповера: <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"` | bottom-end | Положение поповера относительно своего триггера (children). |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,6 +1,6 @@
-import { ElementType, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
-import { PickLinkProps } from '@snack-uikit/link';
+import { LinkProps } from '@snack-uikit/link';
 import { BaseItemProps } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Appearance } from './types';
@@ -8,7 +8,7 @@ type Action = {
     icon?: ReactElement;
     tagLabel?: string;
 } & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
-export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
+export type NotificationCardProps = WithSupportProps<{
     /** Идентификатор уведомления */
     id: string;
     /** Тип уведомления */
@@ -22,7 +22,7 @@ export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithS
     /** Контент уведомления */
     content: ReactNode;
     /** Ссылка */
-    link?: PickLinkProps<LinkElement, 'text' | 'insideText' | 'truncateVariant'>;
+    link?: Omit<LinkProps, 'size' | 'appearance' | 'textMode' | 'data-test-id'>;
     /** Дата уведомления */
     date: string;
     /** Колбэк клика по карточке */
@@ -39,5 +39,5 @@ export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithS
     className?: string;
 }>;
 /** Компонент карточки уведомления */
-export declare function NotificationCard<LinkElement extends ElementType = 'a'>({ id, appearance, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className, ...rest }: NotificationCardProps<LinkElement>): import("react/jsx-runtime").JSX.Element;
+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/NotificationCard.d.ts

@@ -1,6 +1,6 @@
-import { ElementType, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
-import { PickLinkProps } from '@snack-uikit/link';
+import { LinkProps } from '@snack-uikit/link';
 import { BaseItemProps } from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Appearance } from './types';
@@ -8,7 +8,7 @@ type Action = {
     icon?: ReactElement;
     tagLabel?: string;
 } & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
-export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
+export type NotificationCardProps = WithSupportProps<{
     /** Идентификатор уведомления */
     id: string;
     /** Тип уведомления */
@@ -22,7 +22,7 @@ export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithS
     /** Контент уведомления */
     content: ReactNode;
     /** Ссылка */
-    link?: PickLinkProps<LinkElement, 'text' | 'insideText' | 'truncateVariant'>;
+    link?: Omit<LinkProps, 'size' | 'appearance' | 'textMode' | 'data-test-id'>;
     /** Дата уведомления */
     date: string;
     /** Колбэк клика по карточке */
@@ -39,5 +39,5 @@ export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithS
     className?: string;
 }>;
 /** Компонент карточки уведомления */
-export declare function NotificationCard<LinkElement extends ElementType = 'a'>({ id, appearance, label, unread, title, content, link, date, onClick, primaryButton, secondaryButton, actions, onVisible, className, ...rest }: NotificationCardProps<LinkElement>): import("react/jsx-runtime").JSX.Element;
+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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.10.19-preview-9ca6ecbf.0",
+  "version": "0.10.19",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,10 +37,10 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.7",
-    "@snack-uikit/chips": "0.25.3",
+    "@snack-uikit/chips": "0.25.4",
     "@snack-uikit/icons": "0.24.2",
     "@snack-uikit/info-block": "0.6.13",
-    "@snack-uikit/link": "0.15.10-preview-9ca6ecbf.0",
+    "@snack-uikit/link": "0.15.9",
     "@snack-uikit/list": "0.26.0",
     "@snack-uikit/popover-private": "0.14.5",
     "@snack-uikit/scroll": "0.9.3",
@@ -51,5 +51,5 @@
     "@snack-uikit/utils": "3.7.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "5997fdf5027fd7d355a1e0396b3cedcb86795b6d"
+  "gitHead": "b7485df8da9869f0fe2b2e22974a06d9a04e0835"
 }

package/src/components/NotificationCard/NotificationCard.tsx

@@ -1,8 +1,8 @@
 import cn from 'classnames';
-import { ElementType, MouseEventHandler, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { MouseEventHandler, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ButtonSimple, ButtonSimpleProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
-import { Link, LinkProps, PickLinkProps } from '@snack-uikit/link';
+import { Link, LinkProps } from '@snack-uikit/link';
 import { BaseItemProps } from '@snack-uikit/list';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
@@ -19,7 +19,7 @@ type Action = {
   tagLabel?: string;
 } & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
 
-export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
+export type NotificationCardProps = WithSupportProps<{
   /** Идентификатор уведомления */
   id: string;
   /** Тип уведомления */
@@ -33,7 +33,7 @@ export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithS
   /** Контент уведомления */
   content: ReactNode;
   /** Ссылка */
-  link?: PickLinkProps<LinkElement, 'text' | 'insideText' | 'truncateVariant'>;
+  link?: Omit<LinkProps, 'size' | 'appearance' | 'textMode' | 'data-test-id'>;
   /** Дата уведомления */
   date: string;
   /** Колбэк клика по карточке */
@@ -51,7 +51,7 @@ export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithS
 }>;
 
 /** Компонент карточки уведомления */
-export function NotificationCard<LinkElement extends ElementType = 'a'>({
+export function NotificationCard({
   id,
   appearance = APPEARANCE.Neutral,
   label,
@@ -67,7 +67,7 @@ export function NotificationCard<LinkElement extends ElementType = 'a'>({
   onVisible,
   className,
   ...rest
-}: NotificationCardProps<LinkElement>) {
+}: NotificationCardProps) {
   const { icon, linkOnColor, buttonAppearance } = useMemo<{
     icon: ReturnType<typeof getIcon>;
     linkOnColor: LinkProps['appearance'];