@snack-uikit/link 0.15.9 → 0.15.10-preview-ed010264.0

package/README.md

@@ -29,17 +29,6 @@ import { Link } from '@snack-uikit/link';
 ### Props
 | 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` - по середине |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,20 +1,10 @@
-import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { ComponentPropsWithoutRef } 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<{
+export type BaseProps = WithSupportProps<{
     /** Текст ссылки */
     text?: string;
-    /** CSS-класс */
-    className?: string;
-    /** Ссылка */
-    href?: string;
-    /** HTML-атрибут target */
-    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-    /** HTML-атрибут download */
-    download?: string;
-    /** Колбек обработки клика */
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
     /** Размер
      * @default 's'
      */
@@ -36,5 +26,8 @@ export type LinkProps = WithSupportProps<{
      * */
     truncateVariant?: TruncateStringProps['variant'];
 }>;
+export type LinkProps<T extends React.ElementType = 'a'> = BaseProps & {
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof BaseProps>;
 /** Компонент ссылка */
-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 React.ElementType = 'a'>({ text, className, onClick, textMode, size, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Link.js

@@ -28,29 +28,35 @@ function Link(_a) {
   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({
+    rest = __rest(_a, ["text", "className", "onClick", "textMode", "size", "appearance", "insideText", "truncateVariant", "as"]);
+  const Component = as || 'a';
+  let fallbackProps = rest;
+  if (Component === 'a') {
+    /**
+     * Обратно совместимые изменения с предыдущей версией.
+     */
+    fallbackProps = Object.assign({
+      target: constants_1.TARGET.Blank
+    }, fallbackProps, (0, utils_1.extractSupportProps)(rest));
+    // @ts-expect-error обратно совместимый
+    fallbackProps.rel = fallbackProps.target === constants_1.TARGET.Blank ? 'noopener noreferrer' : undefined;
+  }
+  return (0, jsx_runtime_1.jsx)(Component, 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), {
+  }, 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/esm/components/Link.d.ts

@@ -1,20 +1,10 @@
-import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { ComponentPropsWithoutRef } 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<{
+export type BaseProps = WithSupportProps<{
     /** Текст ссылки */
     text?: string;
-    /** CSS-класс */
-    className?: string;
-    /** Ссылка */
-    href?: string;
-    /** HTML-атрибут target */
-    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-    /** HTML-атрибут download */
-    download?: string;
-    /** Колбек обработки клика */
-    onClick?: MouseEventHandler<HTMLAnchorElement>;
     /** Размер
      * @default 's'
      */
@@ -36,5 +26,8 @@ export type LinkProps = WithSupportProps<{
      * */
     truncateVariant?: TruncateStringProps['variant'];
 }>;
+export type LinkProps<T extends React.ElementType = 'a'> = BaseProps & {
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof BaseProps>;
 /** Компонент ссылка */
-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 React.ElementType = 'a'>({ text, className, onClick, textMode, size, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Link.js

@@ -13,10 +13,20 @@ 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 { text = '', className, onClick, textMode = TEXT_MODE.Default, size = SIZE.S, appearance = APPEARANCE.Primary, insideText = false, truncateVariant, as } = _a, rest = __rest(_a, ["text", "className", "onClick", "textMode", "size", "appearance", "insideText", "truncateVariant", "as"]);
+    const Component = as || 'a';
+    let fallbackProps = rest;
+    if (Component === 'a') {
+        /**
+         * Обратно совместимые изменения с предыдущей версией.
+         */
+        fallbackProps = Object.assign({ target: TARGET.Blank }, fallbackProps, extractSupportProps(rest));
+        // @ts-expect-error обратно совместимый
+        fallbackProps.rel = fallbackProps.target === TARGET.Blank ? 'noopener noreferrer' : undefined;
+    }
+    return (_jsx(Component, Object.assign({ className: cn(styles.link, className), onClick: onClick }, 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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Link",
-  "version": "0.15.9",
+  "version": "0.15.10-preview-ed010264.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,5 +40,5 @@
     "@snack-uikit/utils": "3.7.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "44591f943a79171320e8db3523ec38953ff101d8"
+  "gitHead": "8350a95ba0d09b692dd2c78252fe56187b36adcc"
 }

package/src/components/Link.tsx

@@ -1,26 +1,16 @@
 import cn from 'classnames';
-import { AnchorHTMLAttributes, MouseEventHandler } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 
 import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } 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<{
+export type BaseProps = WithSupportProps<{
   /** Текст ссылки */
   text?: string;
-  /** CSS-класс */
-  className?: string;
-  /** Ссылка */
-  href?: string;
-  /** HTML-атрибут target */
-  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
-  /** HTML-атрибут download */
-  download?: string;
-  /** Колбек обработки клика */
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
   /** Размер
    * @default 's'
    */
@@ -43,36 +33,47 @@ export type LinkProps = WithSupportProps<{
   truncateVariant?: TruncateStringProps['variant'];
 }>;
 
+export type LinkProps<T extends React.ElementType = 'a'> = BaseProps & {
+  as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof BaseProps>;
+
 /** Компонент ссылка */
-export function Link({
+export function Link<T extends React.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 = rest;
+
+  if (Component === 'a') {
+    /**
+     * Обратно совместимые изменения с предыдущей версией.
+     */
+    fallbackProps = Object.assign({ target: TARGET.Blank }, fallbackProps, extractSupportProps(rest));
+    // @ts-expect-error обратно совместимый
+    fallbackProps.rel = fallbackProps.target === TARGET.Blank ? 'noopener noreferrer' : undefined;
+  }
+
   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>
   );
 }