@snack-uikit/alert 0.15.16 → 0.16.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.16.0 (2025-03-06)
+
+
+### Features
+
+* **SAEVO-161:** Allow custom link component integration. ([40ff813](https://github.com/cloud-ru-tech/snack-uikit/commit/40ff813a7d652e309df6d506c51b56a811c8edaa))
+
+
+
+
+
 ## 0.15.16 (2025-03-05)
 
 ### Only dependencies have been changed

package/README.md

@@ -58,7 +58,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | icon | `boolean` | true | Отображать иконку |
 | title | `string` | - | Заголовок |
 | truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
-| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance">` | - | Cсылка |
+| link | `PickLinkProps<LinkElement, "text" \| "appearance" \| "as">` | - | Cсылка |
 | onClose | `() => void` | - | Колбек закрытия |
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"`, `"info"` | neutral | Внешний вид |
 | outline | `boolean` | - | Внешний бордер |
@@ -74,7 +74,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | icon | `boolean` | true | Отображать иконку |
 | title | `string` | - | Заголовок |
 | truncate | `{ title?: number; }` | '{ <br>title: 1 }' | Максимальное кол-во строк <br> - `title` - в заголовке |
-| link | `Pick<LinkProps, "text" \| "target" \| "onClick" \| "href" \| "appearance">` | - | Cсылка |
+| link | `PickLinkProps<LinkElement, "text" \| "appearance" \| "as">` | - | Cсылка |
 | action | `AlertButtonProps` | - | Кнопка дополнительного действия |
 | onClose | `() => void` | - | Колбек закрытия |
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"`, `"info"` | neutral | Внешний вид |

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

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
-import { LinkProps } from '@snack-uikit/link';
+import { ElementType, ReactNode } from 'react';
+import { PickLinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { AlertButtonProps } from '../../helperComponents';
 import { Appearance, Size } from '../../types';
-export type AlertProps = WithSupportProps<{
+export type AlertProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Отображать иконку */
     icon?: boolean;
     /** Заголовок */
@@ -19,7 +19,7 @@ export type AlertProps = WithSupportProps<{
     /** Описание */
     description: ReactNode;
     /** Cсылка */
-    link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
+    link?: PickLinkProps<LinkElement, 'text' | 'appearance' | 'as'>;
     /** Колбек закрытия */
     onClose?: () => void;
     /** Внешний вид */
@@ -39,4 +39,4 @@ export type AlertProps = WithSupportProps<{
 /**
  * Компонент для отображения уведомления.
  */
-export declare function Alert({ icon, title, truncate, link, description, onClose, appearance, className, actions, outline, size, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert<LinkElement extends ElementType = 'a'>({ icon, title, truncate, link, description, onClose, appearance, className, actions, outline, size, ...rest }: AlertProps<LinkElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
-import { LinkProps } from '@snack-uikit/link';
+import { ElementType, ReactNode } from 'react';
+import { PickLinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { AlertButtonProps } from '../../helperComponents';
 import { Appearance } from '../../types';
-export type AlertTopProps = WithSupportProps<{
+export type AlertTopProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Отображать иконку */
     icon?: boolean;
     /** Заголовок */
@@ -19,7 +19,7 @@ export type AlertTopProps = WithSupportProps<{
     /** Описание */
     description: ReactNode;
     /** Cсылка */
-    link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
+    link?: PickLinkProps<LinkElement, 'text' | 'appearance' | 'as'>;
     /** Кнопка дополнительного действия */
     action?: AlertButtonProps;
     /** Колбек закрытия */
@@ -32,4 +32,4 @@ export type AlertTopProps = WithSupportProps<{
 /**
  * Компонент для отображения уведомления вверху экрана.
  */
-export declare function AlertTop({ icon, title, description, link, onClose, truncate, appearance, action, className, ...rest }: AlertTopProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertTop<LinkElement extends ElementType = 'a'>({ icon, title, description, link, onClose, truncate, appearance, action, className, ...rest }: AlertTopProps<LinkElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
-import { LinkProps } from '@snack-uikit/link';
+import { ElementType, ReactNode } from 'react';
+import { PickLinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { AlertButtonProps } from '../../helperComponents';
 import { Appearance, Size } from '../../types';
-export type AlertProps = WithSupportProps<{
+export type AlertProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Отображать иконку */
     icon?: boolean;
     /** Заголовок */
@@ -19,7 +19,7 @@ export type AlertProps = WithSupportProps<{
     /** Описание */
     description: ReactNode;
     /** Cсылка */
-    link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
+    link?: PickLinkProps<LinkElement, 'text' | 'appearance' | 'as'>;
     /** Колбек закрытия */
     onClose?: () => void;
     /** Внешний вид */
@@ -39,4 +39,4 @@ export type AlertProps = WithSupportProps<{
 /**
  * Компонент для отображения уведомления.
  */
-export declare function Alert({ icon, title, truncate, link, description, onClose, appearance, className, actions, outline, size, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert<LinkElement extends ElementType = 'a'>({ icon, title, truncate, link, description, onClose, appearance, className, actions, outline, size, ...rest }: AlertProps<LinkElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
-import { LinkProps } from '@snack-uikit/link';
+import { ElementType, ReactNode } from 'react';
+import { PickLinkProps } from '@snack-uikit/link';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { AlertButtonProps } from '../../helperComponents';
 import { Appearance } from '../../types';
-export type AlertTopProps = WithSupportProps<{
+export type AlertTopProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
     /** Отображать иконку */
     icon?: boolean;
     /** Заголовок */
@@ -19,7 +19,7 @@ export type AlertTopProps = WithSupportProps<{
     /** Описание */
     description: ReactNode;
     /** Cсылка */
-    link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
+    link?: PickLinkProps<LinkElement, 'text' | 'appearance' | 'as'>;
     /** Кнопка дополнительного действия */
     action?: AlertButtonProps;
     /** Колбек закрытия */
@@ -32,4 +32,4 @@ export type AlertTopProps = WithSupportProps<{
 /**
  * Компонент для отображения уведомления вверху экрана.
  */
-export declare function AlertTop({ icon, title, description, link, onClose, truncate, appearance, action, className, ...rest }: AlertTopProps): import("react/jsx-runtime").JSX.Element;
+export declare function AlertTop<LinkElement extends ElementType = 'a'>({ icon, title, description, link, onClose, truncate, appearance, action, className, ...rest }: AlertTopProps<LinkElement>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.15.16",
+  "version": "0.16.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,11 +37,11 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.25.1",
-    "@snack-uikit/link": "0.15.13",
+    "@snack-uikit/link": "0.16.0",
     "@snack-uikit/loaders": "0.9.2",
     "@snack-uikit/truncate-string": "0.6.13",
     "@snack-uikit/utils": "3.8.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "245f761e18557fddf0d10e8277e6b2e2740a81a4"
+  "gitHead": "60f203360684328be8e6743048d0259574ded8b4"
 }

package/src/components/Alert/Alert.tsx

@@ -1,8 +1,8 @@
 import cn from 'classnames';
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 
 import { CrossSVG } from '@snack-uikit/icons';
-import { Link, LinkProps } from '@snack-uikit/link';
+import { Link, PickLinkProps } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
@@ -12,7 +12,7 @@ import { Appearance, Size } from '../../types';
 import { getIcon } from '../../utils';
 import styles from './styles.module.scss';
 
-export type AlertProps = WithSupportProps<{
+export type AlertProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
   /** Отображать иконку */
   icon?: boolean;
   /** Заголовок */
@@ -28,7 +28,7 @@ export type AlertProps = WithSupportProps<{
   /** Описание */
   description: ReactNode;
   /** Cсылка */
-  link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
+  link?: PickLinkProps<LinkElement, 'text' | 'appearance' | 'as'>;
   /** Колбек закрытия */
   onClose?: () => void;
   /** Внешний вид */
@@ -49,7 +49,7 @@ export type AlertProps = WithSupportProps<{
 /**
  * Компонент для отображения уведомления.
  */
-export function Alert({
+export function Alert<LinkElement extends ElementType = 'a'>({
   icon = true,
   title,
   truncate,
@@ -62,7 +62,7 @@ export function Alert({
   outline,
   size = 'm',
   ...rest
-}: AlertProps) {
+}: AlertProps<LinkElement>) {
   return (
     <div
       className={cn(

package/src/components/AlertTop/AlertTop.tsx

@@ -1,8 +1,8 @@
 import cn from 'classnames';
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 
 import { CrossSVG } from '@snack-uikit/icons';
-import { Link, LinkProps } from '@snack-uikit/link';
+import { Link, PickLinkProps } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
@@ -13,7 +13,7 @@ import { getIcon } from '../../utils';
 import { APPEARANCE_TO_COLOR_MAP_INVERT } from './constants';
 import styles from './styles.module.scss';
 
-export type AlertTopProps = WithSupportProps<{
+export type AlertTopProps<LinkElement extends ElementType = 'a'> = WithSupportProps<{
   /** Отображать иконку */
   icon?: boolean;
   /** Заголовок */
@@ -29,7 +29,7 @@ export type AlertTopProps = WithSupportProps<{
   /** Описание */
   description: ReactNode;
   /** Cсылка */
-  link?: Pick<LinkProps, 'text' | 'target' | 'onClick' | 'href' | 'appearance'>;
+  link?: PickLinkProps<LinkElement, 'text' | 'appearance' | 'as'>;
   /** Кнопка дополнительного действия */
   action?: AlertButtonProps;
   /** Колбек закрытия */
@@ -43,7 +43,7 @@ export type AlertTopProps = WithSupportProps<{
 /**
  * Компонент для отображения уведомления вверху экрана.
  */
-export function AlertTop({
+export function AlertTop<LinkElement extends ElementType = 'a'>({
   icon = true,
   title,
   description,
@@ -54,7 +54,7 @@ export function AlertTop({
   action,
   className,
   ...rest
-}: AlertTopProps) {
+}: AlertTopProps<LinkElement>) {
   return (
     <div
       className={cn(styles.alertTop, className)}
@@ -71,7 +71,6 @@ export function AlertTop({
             {getIcon(appearance, 24)}
           </div>
         )}
-
         <div className={styles.contentLayout}>
           <div className={styles.textLayout}>
             {title && (