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

package/README.md

@@ -81,70 +81,24 @@ 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 { MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { ElementType, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
-import { LinkProps } from '@snack-uikit/link';
+import { PickLinkProps } 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 = WithSupportProps<{
+export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Идентификатор уведомления */
     id: string;
     /** Тип уведомления */
@@ -22,7 +22,7 @@ export type NotificationCardProps = WithSupportProps<{
     /** Контент уведомления */
     content: ReactNode;
     /** Ссылка */
-    link?: Omit<LinkProps, 'size' | 'appearance' | 'textMode' | 'data-test-id'>;
+    link?: PickLinkProps<LinkElement, 'text' | 'insideText' | 'truncateVariant'>;
     /** Дата уведомления */
     date: string;
     /** Колбэк клика по карточке */
@@ -39,5 +39,5 @@ export type NotificationCardProps = WithSupportProps<{
     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 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 {};

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

@@ -1,6 +1,6 @@
-import { MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { ElementType, MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
-import { LinkProps } from '@snack-uikit/link';
+import { PickLinkProps } 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 = WithSupportProps<{
+export type NotificationCardProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Идентификатор уведомления */
     id: string;
     /** Тип уведомления */
@@ -22,7 +22,7 @@ export type NotificationCardProps = WithSupportProps<{
     /** Контент уведомления */
     content: ReactNode;
     /** Ссылка */
-    link?: Omit<LinkProps, 'size' | 'appearance' | 'textMode' | 'data-test-id'>;
+    link?: PickLinkProps<LinkElement, 'text' | 'insideText' | 'truncateVariant'>;
     /** Дата уведомления */
     date: string;
     /** Колбэк клика по карточке */
@@ -39,5 +39,5 @@ export type NotificationCardProps = WithSupportProps<{
     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 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 {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Notification",
-  "version": "0.10.18",
+  "version": "0.10.19-preview-9ca6ecbf.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,7 +40,7 @@
     "@snack-uikit/chips": "0.25.3",
     "@snack-uikit/icons": "0.24.2",
     "@snack-uikit/info-block": "0.6.13",
-    "@snack-uikit/link": "0.15.9",
+    "@snack-uikit/link": "0.15.10-preview-9ca6ecbf.0",
     "@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": "ad5274413320bf7880ba3c2d1124610281d0de81"
+  "gitHead": "5997fdf5027fd7d355a1e0396b3cedcb86795b6d"
 }

package/src/components/NotificationCard/NotificationCard.tsx

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