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

package/README.md

@@ -65,7 +65,7 @@
 | content | `ReactNode` | - | Содержимое модального окна |
 | cancelButton | `Omit<ButtonOutlineProps, "data-test-id" \| "size">` | - | Кнопка отмены |
 | additionalButton | `Omit<ButtonSimpleProps, "data-test-id" \| "size">` | - | Вторая кнопка действия |
-| disclaimer | `{ text: string; link?: Pick<LinkProps, "text" \| "href" \| "target">; }` | - | Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку |
+| disclaimer | `{ text: string; link?: PickLinkProps<LinkElement, "text" \| "as">; }` | - | Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку |
 | truncate | `{ title?: number; subtitle?: number; }` | '{ <br>title: 1; <br>subtitle: 2; }' | Максимальное кол-во строк <br> - `title` - в заголовке <br> - `subtitle` - в подзаголовке |
 | size | "s" \| "m" \| "l" | s | Размер |
 | align | enum Align: `"vertical"`, `"default"`, `"center"` | default | Выравнивание, для разных размеров доступны разные значения <br> для size=`s` - все <br> для size=`m` - align=`default \| center` <br> для size=`l` - align=`default` |

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

@@ -1,3 +1,4 @@
+import { ElementType } from 'react';
 import { ModalLProps, ModalMProps, ModalSProps } from './types';
-export type ModalProps = ModalSProps | ModalMProps | ModalLProps;
-export declare function Modal({ open, onClose, size, mode, align, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, truncate, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export type ModalProps<LinkElement extends ElementType = 'a'> = ModalSProps<LinkElement> | ModalMProps<LinkElement> | ModalLProps<LinkElement>;
+export declare function Modal<LinkElement extends ElementType = 'a'>({ open, onClose, size, mode, align, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, truncate, className, ...rest }: ModalProps<LinkElement>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Modal/types.d.ts

@@ -1,10 +1,11 @@
+import { ElementType } from 'react';
 import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
-import { LinkProps } from '@snack-uikit/link';
+import { PickLinkProps } from '@snack-uikit/link';
 import { ALIGN, SIZE } from '../../constants';
 import { ModalBodyProps, ModalHeaderImage, ModalHeaderProps } from '../../helperComponents';
 import { Align } from '../../types';
 import { ModalCustomProps } from '../ModalCustom';
-type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
+type BaseModalProps<LinkElement extends ElementType = 'a'> = Omit<ModalCustomProps, 'children' | 'size'> & {
     /** Заголовок модального окна */
     title: string;
     /** Всплывающая подсказка для заголовка */
@@ -22,7 +23,7 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
     /** Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку */
     disclaimer?: {
         text: string;
-        link?: Pick<LinkProps, 'text' | 'href' | 'target'>;
+        link?: PickLinkProps<LinkElement, 'text' | 'as'>;
     };
     /**
      *  Максимальное кол-во строк
@@ -35,7 +36,7 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
         subtitle?: number;
     };
 };
-export type ModalSProps = BaseModalProps & {
+export type ModalSProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
     /** Размер */
     size?: typeof SIZE.S;
     /**
@@ -46,13 +47,13 @@ export type ModalSProps = BaseModalProps & {
     /** Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt` */
     picture?: ModalHeaderProps['picture'];
 };
-export type ModalMProps = BaseModalProps & {
+export type ModalMProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
     size?: typeof SIZE.M;
     /** <br> для size=`m` - align=`default | center` */
     align?: typeof ALIGN.Default | typeof ALIGN.Center;
     picture?: ModalHeaderImage;
 };
-export type ModalLProps = BaseModalProps & {
+export type ModalLProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
     size?: typeof SIZE.L;
     /** <br> для size=`l` - align=`default` */
     align?: typeof ALIGN.Default;

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

@@ -1,3 +1,4 @@
+import { ElementType } from 'react';
 import { ModalLProps, ModalMProps, ModalSProps } from './types';
-export type ModalProps = ModalSProps | ModalMProps | ModalLProps;
-export declare function Modal({ open, onClose, size, mode, align, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, truncate, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export type ModalProps<LinkElement extends ElementType = 'a'> = ModalSProps<LinkElement> | ModalMProps<LinkElement> | ModalLProps<LinkElement>;
+export declare function Modal<LinkElement extends ElementType = 'a'>({ open, onClose, size, mode, align, title, titleTooltip, subtitle, picture: pictureProp, content, approveButton, cancelButton, additionalButton, disclaimer, truncate, className, ...rest }: ModalProps<LinkElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,11 @@
+import { ElementType } from 'react';
 import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
-import { LinkProps } from '@snack-uikit/link';
+import { PickLinkProps } from '@snack-uikit/link';
 import { ALIGN, SIZE } from '../../constants';
 import { ModalBodyProps, ModalHeaderImage, ModalHeaderProps } from '../../helperComponents';
 import { Align } from '../../types';
 import { ModalCustomProps } from '../ModalCustom';
-type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
+type BaseModalProps<LinkElement extends ElementType = 'a'> = Omit<ModalCustomProps, 'children' | 'size'> & {
     /** Заголовок модального окна */
     title: string;
     /** Всплывающая подсказка для заголовка */
@@ -22,7 +23,7 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
     /** Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку */
     disclaimer?: {
         text: string;
-        link?: Pick<LinkProps, 'text' | 'href' | 'target'>;
+        link?: PickLinkProps<LinkElement, 'text' | 'as'>;
     };
     /**
      *  Максимальное кол-во строк
@@ -35,7 +36,7 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
         subtitle?: number;
     };
 };
-export type ModalSProps = BaseModalProps & {
+export type ModalSProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
     /** Размер */
     size?: typeof SIZE.S;
     /**
@@ -46,13 +47,13 @@ export type ModalSProps = BaseModalProps & {
     /** Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt` */
     picture?: ModalHeaderProps['picture'];
 };
-export type ModalMProps = BaseModalProps & {
+export type ModalMProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
     size?: typeof SIZE.M;
     /** <br> для size=`m` - align=`default | center` */
     align?: typeof ALIGN.Default | typeof ALIGN.Center;
     picture?: ModalHeaderImage;
 };
-export type ModalLProps = BaseModalProps & {
+export type ModalLProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
     size?: typeof SIZE.L;
     /** <br> для size=`l` - align=`default` */
     align?: typeof ALIGN.Default;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Modal",
-  "version": "0.14.19",
+  "version": "0.15.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,7 +39,7 @@
     "@snack-uikit/button": "0.19.8",
     "@snack-uikit/icon-predefined": "0.7.4",
     "@snack-uikit/icons": "0.25.1",
-    "@snack-uikit/link": "0.15.13",
+    "@snack-uikit/link": "0.16.0",
     "@snack-uikit/scroll": "0.9.4",
     "@snack-uikit/tooltip": "0.16.5",
     "@snack-uikit/truncate-string": "0.6.13",
@@ -51,5 +51,5 @@
   "devDependencies": {
     "@types/react-modal": "3.16.0"
   },
-  "gitHead": "245f761e18557fddf0d10e8277e6b2e2740a81a4"
+  "gitHead": "60f203360684328be8e6743048d0259574ded8b4"
 }

package/src/components/Modal/Modal.tsx

@@ -1,3 +1,5 @@
+import { ElementType } from 'react';
+
 import { ButtonFilled, ButtonOutline, ButtonSimple } from '@snack-uikit/button';
 import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
@@ -9,9 +11,12 @@ import { ModalCustom } from '../ModalCustom';
 import styles from './styles.module.scss';
 import { ModalLProps, ModalMProps, ModalSProps } from './types';
 
-export type ModalProps = ModalSProps | ModalMProps | ModalLProps;
+export type ModalProps<LinkElement extends ElementType = 'a'> =
+  | ModalSProps<LinkElement>
+  | ModalMProps<LinkElement>
+  | ModalLProps<LinkElement>;
 
-export function Modal({
+export function Modal<LinkElement extends ElementType = 'a'>({
   open,
   onClose,
   size = SIZE.S,
@@ -29,7 +34,7 @@ export function Modal({
   truncate,
   className,
   ...rest
-}: ModalProps) {
+}: ModalProps<LinkElement>) {
   const aligns = getAlignProps({ align, size });
   const buttonsSize = getButtonsSize({ align, size });
   const picture = getPicture({ size, picture: pictureProp });

package/src/components/Modal/types.ts

@@ -1,12 +1,14 @@
+import { ElementType } from 'react';
+
 import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
-import { LinkProps } from '@snack-uikit/link';
+import { PickLinkProps } from '@snack-uikit/link';
 
 import { ALIGN, SIZE } from '../../constants';
 import { ModalBodyProps, ModalHeaderImage, ModalHeaderProps } from '../../helperComponents';
 import { Align } from '../../types';
 import { ModalCustomProps } from '../ModalCustom';
 
-type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
+type BaseModalProps<LinkElement extends ElementType = 'a'> = Omit<ModalCustomProps, 'children' | 'size'> & {
   /** Заголовок модального окна */
   title: string;
   /** Всплывающая подсказка для заголовка */
@@ -24,7 +26,7 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
   /** Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку */
   disclaimer?: {
     text: string;
-    link?: Pick<LinkProps, 'text' | 'href' | 'target'>;
+    link?: PickLinkProps<LinkElement, 'text' | 'as'>;
   };
   /**
    *  Максимальное кол-во строк
@@ -38,7 +40,7 @@ type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
   };
 };
 
-export type ModalSProps = BaseModalProps & {
+export type ModalSProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
   /** Размер */
   size?: typeof SIZE.S;
   /**
@@ -50,14 +52,14 @@ export type ModalSProps = BaseModalProps & {
   picture?: ModalHeaderProps['picture'];
 };
 
-export type ModalMProps = BaseModalProps & {
+export type ModalMProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
   size?: typeof SIZE.M;
   /** <br> для size=`m` - align=`default | center` */
   align?: typeof ALIGN.Default | typeof ALIGN.Center;
   picture?: ModalHeaderImage;
 };
 
-export type ModalLProps = BaseModalProps & {
+export type ModalLProps<LinkElement extends ElementType> = BaseModalProps<LinkElement> & {
   size?: typeof SIZE.L;
   /** <br> для size=`l` - align=`default` */
   align?: typeof ALIGN.Default;