@snack-uikit/link 0.15.13 → 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.13 (2025-03-05)
 
 ### Only dependencies have been changed

package/README.md

@@ -12,14 +12,21 @@
 
 ```tsx
 import { Link } from '@snack-uikit/link';
+import { Link as ReactRouterLink } from 'react-router-dom';
 
 <Link
-  onSurface='accent'
   href='https://cloud.ru/'
   text='Link text'
-  external={true}
-  onColor='primary'
+  size='m'
+  appearance='neutral'
+  onClick={e => {
+    e.stopPropagation();
+  }}
 />;
+
+// Polymorphic components
+
+<Link as={ReactRouterLink} text='Link text' size='m' appearance='neutral' to='..' />;
 ```
 
 [//]: DOCUMENTATION_SECTION_START
@@ -30,16 +37,12 @@ import { Link } from '@snack-uikit/link';
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | text | `string` | - | Текст ссылки |
-| className | `string` | - | CSS-класс |
-| href | `string` | # | Ссылка |
-| target | `HTMLAttributeAnchorTarget` | _blank | HTML-атрибут target |
-| download | `string` | - | HTML-атрибут download |
-| onClick | `MouseEventHandler<HTMLAnchorElement>` | - | Колбек обработки клика |
 | size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
 | appearance | enum Appearance: `"invert-neutral"`, `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | primary | Стилизует ссылку для размещения на цветном фоне |
 | textMode | enum TextMode: `"default"`, `"accent"`, `"on-accent"` | default | Тип поверхности, на которой размещена ссылка |
 | insideText | `boolean` | - | Находится ли ссылка внутри текста (и можно ли её переносить) |
 | truncateVariant | "end" \| "middle" | - | Вариант обрезания строки: <br> - `end` - с конца; <br> - `middle` - по середине |
+| as | `ComponentType \| ElementType` | 'a' | Полиморфный компонент.  Оформить переданный компонент или html элемент в стиль ссылки.  Список атрибутов, которые переданный компонент должен принять: <br/> - `className` <br/> - `data-size` <br/> - `data-text-mode` <br/> - `data-appearance` <br/> - `data-inside-text` |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,40 +1,4 @@
-import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
-import { TruncateStringProps } from '@snack-uikit/truncate-string';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance, Size, TextMode } from './types';
-export type LinkProps = WithSupportProps<{
-    /** Текст ссылки */
-    text?: string;
-    /** CSS-класс */
-    className?: string;
-    /** Ссылка */
-    href?: string;
-    /** HTML-атрибут target */
-    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-    /** HTML-атрибут download */
-    download?: string;
-    /** Колбек обработки клика */
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
-    /** Размер
-     * @default 's'
-     */
-    size?: Size;
-    /** Стилизует ссылку для размещения на цветном фоне
-     * @default 'primary'
-     */
-    appearance?: Appearance;
-    /** Тип поверхности, на которой размещена ссылка
-     * @default 'default'
-     */
-    textMode?: TextMode;
-    /** Находится ли ссылка внутри текста (и можно ли её переносить) */
-    insideText?: boolean;
-    /**
-     * Вариант обрезания строки:
-     * <br> - `end` - с конца;
-     * <br> - `middle` - по середине
-     * */
-    truncateVariant?: TruncateStringProps['variant'];
-}>;
+import { ElementType } from 'react';
+import { LinkProps } from './types';
 /** Компонент ссылка */
-export declare function Link({ text, className, href, target, download, onClick, textMode, size, appearance, insideText, truncateVariant, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Link.js

@@ -25,32 +25,41 @@ const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 /** Компонент ссылка */
 function Link(_a) {
+  var _b, _c;
   var {
       text = '',
       className,
-      href = '#',
-      target = '_blank',
-      download,
-      onClick,
       textMode = constants_1.TEXT_MODE.Default,
       size = constants_1.SIZE.S,
       appearance = constants_1.APPEARANCE.Primary,
       insideText = false,
-      truncateVariant
+      truncateVariant,
+      as
     } = _a,
-    rest = __rest(_a, ["text", "className", "href", "target", "download", "onClick", "textMode", "size", "appearance", "insideText", "truncateVariant"]);
-  return (0, jsx_runtime_1.jsx)("a", Object.assign({
-    className: (0, classnames_1.default)(styles_module_scss_1.default.link, className),
-    href: href,
-    target: target,
-    download: download,
-    onClick: onClick
-  }, (0, utils_1.extractSupportProps)(rest), {
+    rest = __rest(_a, ["text", "className", "textMode", "size", "appearance", "insideText", "truncateVariant", "as"]);
+  const Component = as || 'a';
+  let fallbackProps;
+  if (Component === 'a') {
+    /**
+     * Обратно совместимые изменения с предыдущей версией.
+     */
+    fallbackProps = Object.assign({
+      target: (_b = rest === null || rest === void 0 ? void 0 : rest.target) !== null && _b !== void 0 ? _b : constants_1.TARGET.Blank,
+      href: (_c = rest.href) !== null && _c !== void 0 ? _c : '#',
+      download: rest.download,
+      onClick: rest.onClick
+    }, (0, utils_1.extractSupportProps)(rest));
+    fallbackProps.rel = fallbackProps.target === constants_1.TARGET.Blank ? 'noopener noreferrer' : undefined;
+  } else {
+    fallbackProps = rest;
+  }
+  return (0, jsx_runtime_1.jsx)(Component, Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.link, className)
+  }, fallbackProps, {
     "data-size": size,
     "data-text-mode": textMode,
     "data-appearance": appearance,
     "data-inside-text": insideText || undefined,
-    rel: target === '_blank' ? 'noopener noreferrer' : undefined,
     children: insideText ? text : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
       text: text,
       maxLines: 1,

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

@@ -1 +1,2 @@
 export * from './Link';
+export type { PickLinkProps, LinkProps } from './types';

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

@@ -1,5 +1,52 @@
-import { ValueOf } from '@snack-uikit/utils';
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
 export type TextMode = ValueOf<typeof TEXT_MODE>;
+export type BaseProps = WithSupportProps<{
+    /** Текст ссылки */
+    text?: string;
+    /** Размер
+     * @default 's'
+     */
+    size?: Size;
+    /** Стилизует ссылку для размещения на цветном фоне
+     * @default 'primary'
+     */
+    appearance?: Appearance;
+    /** Тип поверхности, на которой размещена ссылка
+     * @default 'default'
+     */
+    textMode?: TextMode;
+    /** Находится ли ссылка внутри текста (и можно ли её переносить) */
+    insideText?: boolean;
+    /**
+     * Вариант обрезания строки:
+     * <br> - `end` - с конца;
+     * <br> - `middle` - по середине
+     * */
+    truncateVariant?: TruncateStringProps['variant'];
+}>;
+export type LinkProps<T extends ElementType = 'a'> = BaseProps & {
+    /**
+     *
+     * Полиморфный компонент.
+     *
+     * Оформить переданный компонент или html элемент в стиль ссылки.
+     *
+     * Список атрибутов, которые переданный компонент должен принять:
+     * <br/> - `className`
+     * <br/> - `data-size`
+     * <br/> - `data-text-mode`
+     * <br/> - `data-appearance`
+     * <br/> - `data-inside-text`
+     *
+     * @type ComponentType | ElementType
+     * @default 'a'
+     *
+     * */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<ElementType extends T ? 'a' : T>, keyof BaseProps>;
+export type PickLinkProps<T extends ElementType, SelectedKeys extends keyof LinkProps<T>> = Pick<LinkProps<T>, SelectedKeys> & Omit<ComponentPropsWithoutRef<ElementType extends T ? 'a' : T>, keyof BaseProps>;

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

@@ -1,40 +1,4 @@
-import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
-import { TruncateStringProps } from '@snack-uikit/truncate-string';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance, Size, TextMode } from './types';
-export type LinkProps = WithSupportProps<{
-    /** Текст ссылки */
-    text?: string;
-    /** CSS-класс */
-    className?: string;
-    /** Ссылка */
-    href?: string;
-    /** HTML-атрибут target */
-    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-    /** HTML-атрибут download */
-    download?: string;
-    /** Колбек обработки клика */
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
-    /** Размер
-     * @default 's'
-     */
-    size?: Size;
-    /** Стилизует ссылку для размещения на цветном фоне
-     * @default 'primary'
-     */
-    appearance?: Appearance;
-    /** Тип поверхности, на которой размещена ссылка
-     * @default 'default'
-     */
-    textMode?: TextMode;
-    /** Находится ли ссылка внутри текста (и можно ли её переносить) */
-    insideText?: boolean;
-    /**
-     * Вариант обрезания строки:
-     * <br> - `end` - с конца;
-     * <br> - `middle` - по середине
-     * */
-    truncateVariant?: TruncateStringProps['variant'];
-}>;
+import { ElementType } from 'react';
+import { LinkProps } from './types';
 /** Компонент ссылка */
-export declare function Link({ text, className, href, target, download, onClick, textMode, size, appearance, insideText, truncateVariant, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link<T extends ElementType = 'a'>({ text, className, textMode, size, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Link.js

@@ -13,10 +13,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
+import { APPEARANCE, SIZE, TARGET, TEXT_MODE } from './constants';
 import styles from './styles.module.css';
 /** Компонент ссылка */
 export function Link(_a) {
-    var { text = '', className, href = '#', target = '_blank', download, onClick, textMode = TEXT_MODE.Default, size = SIZE.S, appearance = APPEARANCE.Primary, insideText = false, truncateVariant } = _a, rest = __rest(_a, ["text", "className", "href", "target", "download", "onClick", "textMode", "size", "appearance", "insideText", "truncateVariant"]);
-    return (_jsx("a", Object.assign({ className: cn(styles.link, className), href: href, target: target, download: download, onClick: onClick }, extractSupportProps(rest), { "data-size": size, "data-text-mode": textMode, "data-appearance": appearance, "data-inside-text": insideText || undefined, rel: target === '_blank' ? 'noopener noreferrer' : undefined, children: insideText ? text : _jsx(TruncateString, { text: text, maxLines: 1, variant: truncateVariant }) })));
+    var _b, _c;
+    var { text = '', className, textMode = TEXT_MODE.Default, size = SIZE.S, appearance = APPEARANCE.Primary, insideText = false, truncateVariant, as } = _a, rest = __rest(_a, ["text", "className", "textMode", "size", "appearance", "insideText", "truncateVariant", "as"]);
+    const Component = as || 'a';
+    let fallbackProps;
+    if (Component === 'a') {
+        /**
+         * Обратно совместимые изменения с предыдущей версией.
+         */
+        fallbackProps = Object.assign({ target: (_b = rest === null || rest === void 0 ? void 0 : rest.target) !== null && _b !== void 0 ? _b : TARGET.Blank, href: (_c = rest.href) !== null && _c !== void 0 ? _c : '#', download: rest.download, onClick: rest.onClick }, extractSupportProps(rest));
+        fallbackProps.rel = fallbackProps.target === TARGET.Blank ? 'noopener noreferrer' : undefined;
+    }
+    else {
+        fallbackProps = rest;
+    }
+    return (_jsx(Component, Object.assign({ className: cn(styles.link, className) }, fallbackProps, { "data-size": size, "data-text-mode": textMode, "data-appearance": appearance, "data-inside-text": insideText || undefined, children: insideText ? text : _jsx(TruncateString, { text: text, maxLines: 1, variant: truncateVariant }) })));
 }

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

@@ -1 +1,2 @@
 export * from './Link';
+export type { PickLinkProps, LinkProps } from './types';

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

@@ -1,5 +1,52 @@
-import { ValueOf } from '@snack-uikit/utils';
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
 export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
 export type TextMode = ValueOf<typeof TEXT_MODE>;
+export type BaseProps = WithSupportProps<{
+    /** Текст ссылки */
+    text?: string;
+    /** Размер
+     * @default 's'
+     */
+    size?: Size;
+    /** Стилизует ссылку для размещения на цветном фоне
+     * @default 'primary'
+     */
+    appearance?: Appearance;
+    /** Тип поверхности, на которой размещена ссылка
+     * @default 'default'
+     */
+    textMode?: TextMode;
+    /** Находится ли ссылка внутри текста (и можно ли её переносить) */
+    insideText?: boolean;
+    /**
+     * Вариант обрезания строки:
+     * <br> - `end` - с конца;
+     * <br> - `middle` - по середине
+     * */
+    truncateVariant?: TruncateStringProps['variant'];
+}>;
+export type LinkProps<T extends ElementType = 'a'> = BaseProps & {
+    /**
+     *
+     * Полиморфный компонент.
+     *
+     * Оформить переданный компонент или html элемент в стиль ссылки.
+     *
+     * Список атрибутов, которые переданный компонент должен принять:
+     * <br/> - `className`
+     * <br/> - `data-size`
+     * <br/> - `data-text-mode`
+     * <br/> - `data-appearance`
+     * <br/> - `data-inside-text`
+     *
+     * @type ComponentType | ElementType
+     * @default 'a'
+     *
+     * */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<ElementType extends T ? 'a' : T>, keyof BaseProps>;
+export type PickLinkProps<T extends ElementType, SelectedKeys extends keyof LinkProps<T>> = Pick<LinkProps<T>, SelectedKeys> & Omit<ComponentPropsWithoutRef<ElementType extends T ? 'a' : T>, keyof BaseProps>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Link",
-  "version": "0.15.13",
+  "version": "0.16.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,5 +40,5 @@
     "@snack-uikit/utils": "3.8.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "245f761e18557fddf0d10e8277e6b2e2740a81a4"
+  "gitHead": "60f203360684328be8e6743048d0259574ded8b4"
 }

package/src/components/Link.tsx

@@ -1,78 +1,52 @@
 import cn from 'classnames';
-import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { ElementType } from 'react';
 
-import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps } from '@snack-uikit/utils';
 
-import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
+import { APPEARANCE, SIZE, TARGET, TEXT_MODE } from './constants';
 import styles from './styles.module.scss';
-import { Appearance, Size, TextMode } from './types';
-
-export type LinkProps = WithSupportProps<{
-  /** Текст ссылки */
-  text?: string;
-  /** CSS-класс */
-  className?: string;
-  /** Ссылка */
-  href?: string;
-  /** HTML-атрибут target */
-  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-  /** HTML-атрибут download */
-  download?: string;
-  /** Колбек обработки клика */
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
-  /** Размер
-   * @default 's'
-   */
-  size?: Size;
-  /** Стилизует ссылку для размещения на цветном фоне
-   * @default 'primary'
-   */
-  appearance?: Appearance;
-  /** Тип поверхности, на которой размещена ссылка
-   * @default 'default'
-   */
-  textMode?: TextMode;
-  /** Находится ли ссылка внутри текста (и можно ли её переносить) */
-  insideText?: boolean;
-  /**
-   * Вариант обрезания строки:
-   * <br> - `end` - с конца;
-   * <br> - `middle` - по середине
-   * */
-  truncateVariant?: TruncateStringProps['variant'];
-}>;
+import { LinkProps } from './types';
 
 /** Компонент ссылка */
-export function Link({
+export function Link<T extends ElementType = 'a'>({
   text = '',
   className,
-  href = '#',
-  target = '_blank',
-  download,
-  onClick,
   textMode = TEXT_MODE.Default,
   size = SIZE.S,
   appearance = APPEARANCE.Primary,
   insideText = false,
   truncateVariant,
+  as,
   ...rest
-}: LinkProps) {
+}: LinkProps<T>) {
+  const Component = as || 'a';
+
+  let fallbackProps;
+
+  if (Component === 'a') {
+    /**
+     * Обратно совместимые изменения с предыдущей версией.
+     */
+    fallbackProps = Object.assign(
+      { target: rest?.target ?? TARGET.Blank, href: rest.href ?? '#', download: rest.download, onClick: rest.onClick },
+      extractSupportProps(rest),
+    );
+    fallbackProps.rel = fallbackProps.target === TARGET.Blank ? 'noopener noreferrer' : undefined;
+  } else {
+    fallbackProps = rest;
+  }
+
   return (
-    <a
+    <Component
       className={cn(styles.link, className)}
-      href={href}
-      target={target}
-      download={download}
-      onClick={onClick}
-      {...extractSupportProps(rest)}
+      {...fallbackProps}
       data-size={size}
       data-text-mode={textMode}
       data-appearance={appearance}
       data-inside-text={insideText || undefined}
-      rel={target === '_blank' ? 'noopener noreferrer' : undefined}
     >
       {insideText ? text : <TruncateString text={text} maxLines={1} variant={truncateVariant} />}
-    </a>
+    </Component>
   );
 }

package/src/components/index.ts

@@ -1 +1,2 @@
 export * from './Link';
+export type { PickLinkProps, LinkProps } from './types';

package/src/components/types.ts

@@ -1,4 +1,7 @@
-import { ValueOf } from '@snack-uikit/utils';
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
 import { APPEARANCE, SIZE, TEXT_MODE } from './constants';
 
@@ -7,3 +10,55 @@ export type Appearance = ValueOf<typeof APPEARANCE>;
 export type Size = ValueOf<typeof SIZE>;
 
 export type TextMode = ValueOf<typeof TEXT_MODE>;
+
+export type BaseProps = WithSupportProps<{
+  /** Текст ссылки */
+  text?: string;
+  /** Размер
+   * @default 's'
+   */
+  size?: Size;
+  /** Стилизует ссылку для размещения на цветном фоне
+   * @default 'primary'
+   */
+  appearance?: Appearance;
+  /** Тип поверхности, на которой размещена ссылка
+   * @default 'default'
+   */
+  textMode?: TextMode;
+  /** Находится ли ссылка внутри текста (и можно ли её переносить) */
+  insideText?: boolean;
+  /**
+   * Вариант обрезания строки:
+   * <br> - `end` - с конца;
+   * <br> - `middle` - по середине
+   * */
+  truncateVariant?: TruncateStringProps['variant'];
+}>;
+
+export type LinkProps<T extends ElementType = 'a'> = BaseProps & {
+  /**
+   *
+   * Полиморфный компонент.
+   *
+   * Оформить переданный компонент или html элемент в стиль ссылки.
+   *
+   * Список атрибутов, которые переданный компонент должен принять:
+   * <br/> - `className`
+   * <br/> - `data-size`
+   * <br/> - `data-text-mode`
+   * <br/> - `data-appearance`
+   * <br/> - `data-inside-text`
+   *
+   * @type ComponentType | ElementType
+   * @default 'a'
+   *
+   * */
+  as?: T;
+} & Omit<ComponentPropsWithoutRef<ElementType extends T ? 'a' : T>, keyof BaseProps>;
+
+export type PickLinkProps<T extends ElementType, SelectedKeys extends keyof LinkProps<T>> = Pick<
+  LinkProps<T>,
+  SelectedKeys
+> &
+  Omit<ComponentPropsWithoutRef<ElementType extends T ? 'a' : T>, keyof BaseProps>;