@snack-uikit/notification 0.10.24 → 0.11.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.11.0 (2025-03-06)
+
+
+### Features
+
+* **SAEVO-161:** Allow custom link component integration. ([40ff813](https://github.com/cloud-ru-tech/snack-uikit/commit/40ff813a7d652e309df6d506c51b56a811c8edaa))
+
+
+
+
+
 ## 0.10.24 (2025-03-05)
 
 ### Only dependencies have been changed

package/README.md

@@ -88,7 +88,7 @@ const cards = [
 | appearance | enum Appearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral | Тип уведомления |
 | label | `string` | - | Лейбл перед заголовком |
 | unread | `boolean` | - | Управление состоянием прочитано/не прочитано |
-| link | `Omit<LinkProps, "data-test-id" \| "appearance" \| "size" \| "textMode">` | - | Ссылка |
+| link | `PickLinkProps<LinkElement, "text" \| "insideText" \| "truncateVariant">` | - | Ссылка |
 | onClick | `MouseEventHandler<HTMLDivElement>` | - | Колбэк клика по карточке |
 | onVisible | `(cardId: string) => void` | - | Колбэк при попадании карточки в область видимости на 80% |
 | primaryButton | `Omit<ButtonTonalProps, "data-test-id" \| "appearance" \| "size">` | - | Кнопка главного действия у карточки |
@@ -133,13 +133,13 @@ const cards = [
 | content* | `ReactElement<NotificationPanelProps, typeof NotificationPanel>` | - |  |
 | contentClassName | `string` | - | CSS-класс для элемента содержащего контент |
 | className | `string` | - | CSS-класс |
+| children | `ReactNode \| ChildrenFunction` | - | Триггер поповера (подробнее читайте ниже) |
 | 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 ссылка на триггер |

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.24",
+  "version": "0.11.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,7 +40,7 @@
     "@snack-uikit/chips": "0.26.1",
     "@snack-uikit/icons": "0.25.1",
     "@snack-uikit/info-block": "0.6.16",
-    "@snack-uikit/link": "0.15.13",
+    "@snack-uikit/link": "0.16.0",
     "@snack-uikit/list": "0.27.0",
     "@snack-uikit/popover-private": "0.14.6",
     "@snack-uikit/scroll": "0.9.4",
@@ -51,5 +51,5 @@
     "@snack-uikit/utils": "3.8.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "d8510c4d566cee9fd0e96ff969fdefb7fb11ac49"
+  "gitHead": "60f203360684328be8e6743048d0259574ded8b4"
 }

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'];