@snack-uikit/card 0.16.14 → 0.16.15-preview-31ae96b0.0

package/README.md

@@ -32,7 +32,6 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | checked | `boolean` | - | Управление состоянием выбран/не выбран |
 | outline | `boolean` | - | Управление состоянием наличия обводки |
 | multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
-| onClick | `(e: MouseEvent<HTMLDivElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбек на клик по карточке |
 | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
 | promoBadge | `string \| Pick<PromoTagProps, "text" \| "appearance">` | - | PromoBadge |
 | children | `ReactNode` | - | Вложенный контент |
@@ -42,8 +41,10 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | functionBadge | `ReactNode` | - | Вложенный FunctionBadge |
 | className | `string` | - | CSS-класс для элемента с контентом |
 | href | `string` | - | Ссылка карточки |
-| onKeyDown | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
-| ref | `LegacyRef<HTMLDivElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
+| target | `HTMLAttributeAnchorTarget` | - | Атрибут target для ссылки |
+| onClick | `(e: MouseEvent<HTMLAnchorElement \| HTMLDivElement, MouseEvent>) => void` | - | Колбек на клик по карточке |
+| onKeyDown | `KeyboardEventHandler<HTMLAnchorElement \| HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
+| ref | `LegacyRef<HTMLAnchorElement \| HTMLDivElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 
 

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

@@ -1,4 +1,4 @@
-import { KeyboardEventHandler, MouseEvent, ReactElement, ReactNode } from 'react';
+import { HTMLAttributeAnchorTarget, KeyboardEventHandler, MouseEvent, ReactElement, ReactNode } from 'react';
 import { PromoTagProps } from '@snack-uikit/promo-tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Size } from '../../types';
@@ -12,8 +12,6 @@ export type CardProps = WithSupportProps<{
     outline?: boolean;
     /** Отображение галочки для режима массового выделения карточек */
     multipleSelection?: boolean;
-    /** Колбек на клик по карточке */
-    onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
     /** Размер */
     size?: Size;
     /** PromoBadge */
@@ -32,8 +30,12 @@ export type CardProps = WithSupportProps<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Атрибут target для ссылки */
+    target?: HTMLAttributeAnchorTarget;
+    /** Колбек на клик по карточке */
+    onClick?(e: MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
     /** Колбек нажатия клавиши клавиатуры */
-    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLAnchorElement | HTMLDivElement>;
 }>;
 export declare const Card: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
@@ -46,8 +48,6 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
     outline?: boolean;
     /** Отображение галочки для режима массового выделения карточек */
     multipleSelection?: boolean;
-    /** Колбек на клик по карточке */
-    onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
     /** Размер */
     size?: Size;
     /** PromoBadge */
@@ -66,6 +66,10 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Атрибут target для ссылки */
+    target?: HTMLAttributeAnchorTarget;
+    /** Колбек на клик по карточке */
+    onClick?(e: MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
     /** Колбек нажатия клавиши клавиатуры */
-    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
-} & import("react").RefAttributes<HTMLDivElement>>;
+    onKeyDown?: KeyboardEventHandler<HTMLAnchorElement | HTMLDivElement>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;

package/dist/cjs/components/Card/Card.js

@@ -19,15 +19,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.Card = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
-const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const typography_1 = require("@snack-uikit/typography");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const context_1 = require("../../context");
 const helperComponents_1 = require("../../helperComponents");
-const constants_2 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const CardTag = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      children,
+      href,
+      target,
+      disabled
+    } = _a,
+    props = __rest(_a, ["children", "href", "target", "disabled"]);
+  if (href && !disabled) {
+    return (0, jsx_runtime_1.jsx)("a", Object.assign({}, props, {
+      href: href,
+      target: target,
+      ref: ref,
+      children: children
+    }));
+  }
+  return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, {
+    ref: ref,
+    children: children
+  }));
+});
 exports.Card = (0, react_1.forwardRef)((_a, ref) => {
   var {
       onClick,
@@ -44,28 +63,18 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
       image,
       className,
       href,
-      onKeyDown: onKeyDownProp
+      onKeyDown,
+      target
     } = _a,
-    rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown"]);
-  const localDivRef = (0, react_1.useRef)(null);
-  const localAnchorRef = (0, react_1.useRef)(null);
-  const onKeyDown = (0, react_1.useCallback)(e => {
-    var _a, _b;
-    if (e.target === localDivRef.current) {
-      if (constants_2.TRIGGER_CLICK_KEY_CODES.includes(e.code) || e.key === ' ') {
-        href ? (_a = localAnchorRef.current) === null || _a === void 0 ? void 0 : _a.click() : (_b = localDivRef.current) === null || _b === void 0 ? void 0 : _b.click();
-      }
-      onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
-    }
-  }, [href, onKeyDownProp]);
+    rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "target"]);
   const supportProps = (0, utils_1.extractSupportProps)(rest);
   return (0, jsx_runtime_1.jsx)(context_1.CardContext.Provider, {
     value: {
       size,
       disabled
     },
-    children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
-      ref: (0, merge_refs_1.default)(ref, localDivRef),
+    children: (0, jsx_runtime_1.jsxs)(CardTag, Object.assign({
+      ref: ref,
       className: (0, classnames_1.default)(styles_module_scss_1.default.card, className)
     }, supportProps, {
       onClick: onClick,
@@ -73,20 +82,15 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
       "data-checked": checked || undefined,
       "data-outline": outline || undefined,
       "data-pointer": onClick ? true : undefined,
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      disabled: disabled,
+      href: href,
+      target: target,
       tabIndex: 0,
       onKeyDown: onKeyDown,
       children: [image, (0, jsx_runtime_1.jsxs)("div", {
         className: styles_module_scss_1.default.composition,
         tabIndex: -1,
-        children: [href && (0, jsx_runtime_1.jsx)("a", {
-          ref: localAnchorRef,
-          "data-test-id": constants_1.TEST_IDS.anchor,
-          tabIndex: -1,
-          href: href,
-          className: styles_module_scss_1.default.anchor,
-          "aria-label": supportProps['aria-label']
-        }), !disabled && functionBadge && (0, jsx_runtime_1.jsx)(helperComponents_1.FunctionBadgeWrapper, {
+        children: [!disabled && functionBadge && (0, jsx_runtime_1.jsx)(helperComponents_1.FunctionBadgeWrapper, {
           className: styles_module_scss_1.default.functionBadgeWrapper,
           children: functionBadge
         }), (0, jsx_runtime_1.jsx)("div", {
@@ -94,7 +98,7 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
           children: (0, jsx_runtime_1.jsxs)("div", {
             className: styles_module_scss_1.default.content,
             "data-size": size,
-            children: [header || null, children && (0, jsx_runtime_1.jsx)(typography_1.Typography, {
+            children: [header, children && (0, jsx_runtime_1.jsx)(typography_1.Typography, {
               family: 'sans',
               size: size,
               purpose: 'body',

package/dist/cjs/components/Card/styles.module.css

@@ -32,6 +32,9 @@
   margin:0;
   padding:0;
   text-align:left;
+  text-decoration:none;
+  -webkit-text-decoration-skip-ink:none;
+          text-decoration-skip-ink:none;
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border:0;
   outline-color:transparent;
@@ -137,16 +140,6 @@
   cursor:not-allowed;
 }
 
-.anchor{
-  position:absolute;
-  z-index:1;
-  top:0;
-  right:0;
-  bottom:0;
-  left:0;
-  border-radius:var(--radius-card-container, 20px);
-}
-
 .body{
   display:block;
   flex-grow:1;

package/dist/cjs/components/Footer/components/Action/Action.js

@@ -33,14 +33,28 @@ function FooterAction(_a) {
   const {
     disabled
   } = (0, context_1.useCardContext)();
+  const handleButtonClick = e => {
+    var _a;
+    e.stopPropagation();
+    e.preventDefault();
+    (_a = button === null || button === void 0 ? void 0 : button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, e);
+  };
+  const handleSecondaryButtonClick = e => {
+    var _a;
+    e.stopPropagation();
+    e.preventDefault();
+    (_a = button === null || button === void 0 ? void 0 : button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, e);
+  };
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.action, className)
   }, (0, utils_1.excludeSupportProps)(rest), {
     children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, button, {
+      onClick: handleButtonClick,
       appearance: 'primary',
       size: 'm',
       disabled: disabled
     })), secondaryButton && (0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({}, secondaryButton, {
+      onClick: handleSecondaryButtonClick,
       appearance: 'neutral',
       size: 'm',
       disabled: disabled

package/dist/cjs/components/Footer/components/Promo/Promo.js

@@ -35,10 +35,17 @@ function FooterPromo(_a) {
   const {
     disabled
   } = (0, context_1.useCardContext)();
+  const handleButtonClick = e => {
+    var _a;
+    e.stopPropagation();
+    e.preventDefault();
+    (_a = button === null || button === void 0 ? void 0 : button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, e);
+  };
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.promo, className)
   }, (0, utils_1.excludeSupportProps)(rest), {
     children: [button && (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, button, {
+      onClick: handleButtonClick,
       appearance: 'primary',
       size: 'm',
       disabled: disabled

package/dist/cjs/components/FunctionBadge/FunctionBadge.js

@@ -41,6 +41,7 @@ function FunctionBadge(_ref) {
   }, [isOpen, setVisible]);
   const onClick = (0, react_1.useCallback)(e => {
     e.stopPropagation();
+    e.preventDefault();
     setIsOpen(isOpen => !isOpen);
   }, []);
   return (0, jsx_runtime_1.jsx)("span", {

package/dist/cjs/constants.d.ts

@@ -14,5 +14,4 @@ export declare const TEST_IDS: {
     title: string;
     description: string;
     metadata: string;
-    anchor: string;
 };

package/dist/cjs/constants.js

@@ -19,6 +19,5 @@ exports.TEST_IDS = {
   emblemIcon: 'card__header__emblem-icon',
   title: 'card__header__title',
   description: 'card__header__description',
-  metadata: 'card__header__metadata',
-  anchor: 'card__anchor'
+  metadata: 'card__header__metadata'
 };

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

@@ -1,4 +1,4 @@
-import { KeyboardEventHandler, MouseEvent, ReactElement, ReactNode } from 'react';
+import { HTMLAttributeAnchorTarget, KeyboardEventHandler, MouseEvent, ReactElement, ReactNode } from 'react';
 import { PromoTagProps } from '@snack-uikit/promo-tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { Size } from '../../types';
@@ -12,8 +12,6 @@ export type CardProps = WithSupportProps<{
     outline?: boolean;
     /** Отображение галочки для режима массового выделения карточек */
     multipleSelection?: boolean;
-    /** Колбек на клик по карточке */
-    onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
     /** Размер */
     size?: Size;
     /** PromoBadge */
@@ -32,8 +30,12 @@ export type CardProps = WithSupportProps<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Атрибут target для ссылки */
+    target?: HTMLAttributeAnchorTarget;
+    /** Колбек на клик по карточке */
+    onClick?(e: MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
     /** Колбек нажатия клавиши клавиатуры */
-    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLAnchorElement | HTMLDivElement>;
 }>;
 export declare const Card: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
@@ -46,8 +48,6 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
     outline?: boolean;
     /** Отображение галочки для режима массового выделения карточек */
     multipleSelection?: boolean;
-    /** Колбек на клик по карточке */
-    onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
     /** Размер */
     size?: Size;
     /** PromoBadge */
@@ -66,6 +66,10 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Атрибут target для ссылки */
+    target?: HTMLAttributeAnchorTarget;
+    /** Колбек на клик по карточке */
+    onClick?(e: MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
     /** Колбек нажатия клавиши клавиатуры */
-    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
-} & import("react").RefAttributes<HTMLDivElement>>;
+    onKeyDown?: KeyboardEventHandler<HTMLAnchorElement | HTMLDivElement>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;

package/dist/esm/components/Card/Card.js

@@ -11,30 +11,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import mergeRefs from 'merge-refs';
-import { forwardRef, useCallback, useRef, } from 'react';
+import { forwardRef, } from 'react';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { SIZE, TEST_IDS } from '../../constants';
+import { SIZE } from '../../constants';
 import { CardContext } from '../../context';
 import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents';
-import { TRIGGER_CLICK_KEY_CODES } from './constants';
 import styles from './styles.module.css';
+const CardTag = forwardRef((_a, ref) => {
+    var { children, href, target, disabled } = _a, props = __rest(_a, ["children", "href", "target", "disabled"]);
+    if (href && !disabled) {
+        return (_jsx("a", Object.assign({}, props, { href: href, target: target, ref: ref, children: children })));
+    }
+    return (_jsx("div", Object.assign({}, props, { ref: ref, children: children })));
+});
 export const Card = forwardRef((_a, ref) => {
-    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className, href, onKeyDown: onKeyDownProp } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown"]);
-    const localDivRef = useRef(null);
-    const localAnchorRef = useRef(null);
-    const onKeyDown = useCallback((e) => {
-        var _a, _b;
-        if (e.target === localDivRef.current) {
-            if (TRIGGER_CLICK_KEY_CODES.includes(e.code) || e.key === ' ') {
-                href ? (_a = localAnchorRef.current) === null || _a === void 0 ? void 0 : _a.click() : (_b = localDivRef.current) === null || _b === void 0 ? void 0 : _b.click();
-            }
-            onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
-        }
-    }, [href, onKeyDownProp]);
+    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className, href, onKeyDown, target } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "target"]);
     const supportProps = extractSupportProps(rest);
-    return (_jsx(CardContext.Provider, { value: { size, disabled }, children: _jsxs("div", Object.assign({ ref: mergeRefs(ref, localDivRef), className: cn(styles.card, className) }, supportProps, { onClick: onClick, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-outline": outline || undefined, "data-pointer": onClick ? true : undefined, 
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, onKeyDown: onKeyDown, children: [image, _jsxs("div", { className: styles.composition, tabIndex: -1, children: [href && (_jsx("a", { ref: localAnchorRef, "data-test-id": TEST_IDS.anchor, tabIndex: -1, href: href, className: styles.anchor, "aria-label": supportProps['aria-label'] })), !disabled && functionBadge && (_jsx(FunctionBadgeWrapper, { className: styles.functionBadgeWrapper, children: functionBadge })), _jsx("div", { className: styles.contentWrapper, children: _jsxs("div", { className: styles.content, "data-size": size, children: [header || null, children && (_jsx(Typography, { family: 'sans', size: size, purpose: 'body', className: styles.body, tag: 'div', children: children })), footer && _jsx("div", { className: styles.footer, children: footer })] }) }), promoBadge && _jsx(PromoBadge, Object.assign({}, (typeof promoBadge === 'string' ? { text: promoBadge } : promoBadge)))] }), checked && multipleSelection && _jsx(Check, { className: styles.check })] })) }));
+    return (_jsx(CardContext.Provider, { value: { size, disabled }, children: _jsxs(CardTag, Object.assign({ ref: ref, className: cn(styles.card, className) }, supportProps, { onClick: onClick, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-outline": outline || undefined, "data-pointer": onClick ? true : undefined, disabled: disabled, href: href, target: target, tabIndex: 0, onKeyDown: onKeyDown, children: [image, _jsxs("div", { className: styles.composition, tabIndex: -1, children: [!disabled && functionBadge && (_jsx(FunctionBadgeWrapper, { className: styles.functionBadgeWrapper, children: functionBadge })), _jsx("div", { className: styles.contentWrapper, children: _jsxs("div", { className: styles.content, "data-size": size, children: [header, children && (_jsx(Typography, { family: 'sans', size: size, purpose: 'body', className: styles.body, tag: 'div', children: children })), footer && _jsx("div", { className: styles.footer, children: footer })] }) }), promoBadge && _jsx(PromoBadge, Object.assign({}, (typeof promoBadge === 'string' ? { text: promoBadge } : promoBadge)))] }), checked && multipleSelection && _jsx(Check, { className: styles.check })] })) }));
 });

package/dist/esm/components/Card/styles.module.css

@@ -32,6 +32,9 @@
   margin:0;
   padding:0;
   text-align:left;
+  text-decoration:none;
+  -webkit-text-decoration-skip-ink:none;
+          text-decoration-skip-ink:none;
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border:0;
   outline-color:transparent;
@@ -137,16 +140,6 @@
   cursor:not-allowed;
 }
 
-.anchor{
-  position:absolute;
-  z-index:1;
-  top:0;
-  right:0;
-  bottom:0;
-  left:0;
-  border-radius:var(--radius-card-container, 20px);
-}
-
 .body{
   display:block;
   flex-grow:1;

package/dist/esm/components/Footer/components/Action/Action.js

@@ -18,5 +18,17 @@ import styles from './styles.module.css';
 export function FooterAction(_a) {
     var { button, secondaryButton, className } = _a, rest = __rest(_a, ["button", "secondaryButton", "className"]);
     const { disabled } = useCardContext();
-    return (_jsxs("div", Object.assign({ className: cn(styles.action, className) }, excludeSupportProps(rest), { children: [_jsx(ButtonFilled, Object.assign({}, button, { appearance: 'primary', size: 'm', disabled: disabled })), secondaryButton && _jsx(ButtonTonal, Object.assign({}, secondaryButton, { appearance: 'neutral', size: 'm', disabled: disabled }))] })));
+    const handleButtonClick = e => {
+        var _a;
+        e.stopPropagation();
+        e.preventDefault();
+        (_a = button === null || button === void 0 ? void 0 : button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, e);
+    };
+    const handleSecondaryButtonClick = e => {
+        var _a;
+        e.stopPropagation();
+        e.preventDefault();
+        (_a = button === null || button === void 0 ? void 0 : button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, e);
+    };
+    return (_jsxs("div", Object.assign({ className: cn(styles.action, className) }, excludeSupportProps(rest), { children: [_jsx(ButtonFilled, Object.assign({}, button, { onClick: handleButtonClick, appearance: 'primary', size: 'm', disabled: disabled })), secondaryButton && (_jsx(ButtonTonal, Object.assign({}, secondaryButton, { onClick: handleSecondaryButtonClick, appearance: 'neutral', size: 'm', disabled: disabled })))] })));
 }

package/dist/esm/components/Footer/components/Promo/Promo.js

@@ -19,5 +19,11 @@ import styles from './styles.module.css';
 export function FooterPromo(_a) {
     var { volume, button, className, size } = _a, rest = __rest(_a, ["volume", "button", "className", "size"]);
     const { disabled } = useCardContext();
-    return (_jsxs("div", Object.assign({ className: cn(styles.promo, className) }, excludeSupportProps(rest), { children: [button && _jsx(ButtonFilled, Object.assign({}, button, { appearance: 'primary', size: 'm', disabled: disabled })), volume && _jsx(Dimension, Object.assign({}, volume, { size: size }))] })));
+    const handleButtonClick = e => {
+        var _a;
+        e.stopPropagation();
+        e.preventDefault();
+        (_a = button === null || button === void 0 ? void 0 : button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, e);
+    };
+    return (_jsxs("div", Object.assign({ className: cn(styles.promo, className) }, excludeSupportProps(rest), { children: [button && (_jsx(ButtonFilled, Object.assign({}, button, { onClick: handleButtonClick, appearance: 'primary', size: 'm', disabled: disabled }))), volume && _jsx(Dimension, Object.assign({}, volume, { size: size }))] })));
 }

package/dist/esm/components/FunctionBadge/FunctionBadge.js

@@ -27,6 +27,7 @@ export function FunctionBadge({ icon, options }) {
     }, [isOpen, setVisible]);
     const onClick = useCallback((e) => {
         e.stopPropagation();
+        e.preventDefault();
         setIsOpen(isOpen => !isOpen);
     }, []);
     return (_jsx("span", { className: styles.wrapper, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', open: isOpen, onOpenChange: setIsOpen, widthStrategy: 'gte', scroll: true, "data-test-id": TEST_IDS.droplist, placement: 'bottom-end', triggerElemRef: buttonRef, items: options.map((_a) => {

package/dist/esm/constants.d.ts

@@ -14,5 +14,4 @@ export declare const TEST_IDS: {
     title: string;
     description: string;
     metadata: string;
-    anchor: string;
 };

package/dist/esm/constants.js

@@ -14,5 +14,4 @@ export const TEST_IDS = {
     title: 'card__header__title',
     description: 'card__header__description',
     metadata: 'card__header__metadata',
-    anchor: 'card__anchor',
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.16.14",
+  "version": "0.16.15-preview-31ae96b0.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -45,8 +45,7 @@
     "@snack-uikit/truncate-string": "0.6.6",
     "@snack-uikit/typography": "0.8.4",
     "@snack-uikit/utils": "3.7.0",
-    "classnames": "2.5.1",
-    "merge-refs": "1.3.0"
+    "classnames": "2.5.1"
   },
-  "gitHead": "3528e78aec23804dca44d311947c1dcd4ed3792b"
+  "gitHead": "88a3023d9740bca7c55a403e7590d9fb21083dad"
 }

package/src/components/Card/Card.tsx

@@ -1,26 +1,23 @@
 import cn from 'classnames';
-import mergeRefs from 'merge-refs';
 import {
+  ForwardedRef,
   forwardRef,
-  KeyboardEvent,
+  HTMLAttributeAnchorTarget,
   KeyboardEventHandler,
   MouseEvent,
   ReactElement,
   ReactNode,
-  useCallback,
-  useRef,
 } from 'react';
 
 import { PromoTagProps } from '@snack-uikit/promo-tag';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { SIZE, TEST_IDS } from '../../constants';
+import { SIZE } from '../../constants';
 import { CardContext } from '../../context';
 import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents';
 import { Size } from '../../types';
 import { HeaderProps } from '../Header';
-import { TRIGGER_CLICK_KEY_CODES } from './constants';
 import styles from './styles.module.scss';
 
 export type CardProps = WithSupportProps<{
@@ -32,8 +29,6 @@ export type CardProps = WithSupportProps<{
   outline?: boolean;
   /** Отображение галочки для режима массового выделения карточек */
   multipleSelection?: boolean;
-  /** Колбек на клик по карточке */
-  onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
   /** Размер */
   size?: Size;
   /** PromoBadge */
@@ -52,11 +47,36 @@ export type CardProps = WithSupportProps<{
   className?: string;
   /** Ссылка карточки */
   href?: string;
+  /** Атрибут target для ссылки */
+  target?: HTMLAttributeAnchorTarget;
+  /** Колбек на клик по карточке */
+  onClick?(e: MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
   /** Колбек нажатия клавиши клавиатуры */
-  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLAnchorElement | HTMLDivElement>;
 }>;
 
-export const Card = forwardRef<HTMLDivElement, CardProps>(
+const CardTag = forwardRef<
+  HTMLAnchorElement | HTMLDivElement,
+  CardProps & {
+    tabIndex?: number;
+  }
+>(({ children, href, target, disabled, ...props }, ref) => {
+  if (href && !disabled) {
+    return (
+      <a {...props} href={href} target={target} ref={ref as ForwardedRef<HTMLAnchorElement>}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <div {...props} ref={ref as ForwardedRef<HTMLDivElement>}>
+      {children}
+    </div>
+  );
+});
+
+export const Card = forwardRef<HTMLAnchorElement | HTMLDivElement, CardProps>(
   (
     {
       onClick,
@@ -73,34 +93,18 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       image,
       className,
       href,
-      onKeyDown: onKeyDownProp,
+      onKeyDown,
+      target,
       ...rest
     },
     ref,
   ) => {
-    const localDivRef = useRef<HTMLDivElement>(null);
-    const localAnchorRef = useRef<HTMLAnchorElement>(null);
-
-    const onKeyDown = useCallback(
-      (e: KeyboardEvent<HTMLDivElement>) => {
-        if (e.target === localDivRef.current) {
-          if (TRIGGER_CLICK_KEY_CODES.includes(e.code) || e.key === ' ') {
-            href ? localAnchorRef.current?.click() : localDivRef.current?.click();
-          }
-
-          onKeyDownProp?.(e);
-        }
-      },
-      [href, onKeyDownProp],
-    );
-
     const supportProps = extractSupportProps(rest);
 
     return (
       <CardContext.Provider value={{ size, disabled }}>
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-        <div
-          ref={mergeRefs(ref, localDivRef)}
+        <CardTag
+          ref={ref}
           className={cn(styles.card, className)}
           {...supportProps}
           onClick={onClick}
@@ -108,31 +112,22 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
           data-checked={checked || undefined}
           data-outline={outline || undefined}
           data-pointer={onClick ? true : undefined}
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          disabled={disabled}
+          href={href}
+          target={target}
           tabIndex={0}
           onKeyDown={onKeyDown}
         >
           {image}
 
           <div className={styles.composition} tabIndex={-1}>
-            {href && (
-              <a
-                ref={localAnchorRef}
-                data-test-id={TEST_IDS.anchor}
-                tabIndex={-1}
-                href={href}
-                className={styles.anchor}
-                aria-label={supportProps['aria-label'] as string}
-              />
-            )}
-
             {!disabled && functionBadge && (
               <FunctionBadgeWrapper className={styles.functionBadgeWrapper}>{functionBadge}</FunctionBadgeWrapper>
             )}
 
             <div className={styles.contentWrapper}>
               <div className={styles.content} data-size={size}>
-                {header || null}
+                {header}
 
                 {children && (
                   <Typography family='sans' size={size} purpose='body' className={styles.body} tag='div'>
@@ -148,7 +143,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
           </div>
 
           {checked && multipleSelection && <Check className={styles.check} />}
-        </div>
+        </CardTag>
       </CardContext.Provider>
     );
   },

package/src/components/Card/styles.module.scss

@@ -45,6 +45,8 @@ $sizes: 's', 'm', 'l';
   padding: 0;
 
   text-align: left;
+  text-decoration: none;
+  text-decoration-skip-ink: none;
 
   background-color: styles-tokens-card.$sys-neutral-background1-level;
   border: 0;
@@ -187,18 +189,6 @@ $sizes: 's', 'm', 'l';
   }
 }
 
-.anchor {
-  position: absolute;
-  /* stylelint-disable-next-line declaration-property-value-allowed-list */
-  z-index: 1;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  border-radius: styles-tokens-card.$radius-card-container;
-}
-
 .body {
   display: block;
   flex-grow: 1;

package/src/components/Footer/components/Action/Action.tsx

@@ -1,4 +1,5 @@
 import cn from 'classnames';
+import { MouseEventHandler } from 'react';
 
 import { ButtonFilled, ButtonFilledProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
 import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -18,10 +19,32 @@ export type FooterActionProps = WithSupportProps<{
 export function FooterAction({ button, secondaryButton, className, ...rest }: FooterActionProps) {
   const { disabled } = useCardContext();
 
+  const handleButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    button?.onClick?.(e);
+  };
+
+  const handleSecondaryButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    button?.onClick?.(e);
+  };
+
   return (
     <div className={cn(styles.action, className)} {...excludeSupportProps(rest)}>
-      <ButtonFilled {...button} appearance='primary' size='m' disabled={disabled} />
-      {secondaryButton && <ButtonTonal {...secondaryButton} appearance='neutral' size='m' disabled={disabled} />}
+      <ButtonFilled {...button} onClick={handleButtonClick} appearance='primary' size='m' disabled={disabled} />
+      {secondaryButton && (
+        <ButtonTonal
+          {...secondaryButton}
+          onClick={handleSecondaryButtonClick}
+          appearance='neutral'
+          size='m'
+          disabled={disabled}
+        />
+      )}
     </div>
   );
 }

package/src/components/Footer/components/Promo/Promo.tsx

@@ -1,4 +1,5 @@
 import cn from 'classnames';
+import { MouseEventHandler } from 'react';
 
 import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
 import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -22,9 +23,18 @@ export type FooterPromoProps = WithSupportProps<{
 export function FooterPromo({ volume, button, className, size, ...rest }: FooterPromoProps) {
   const { disabled } = useCardContext();
 
+  const handleButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    button?.onClick?.(e);
+  };
+
   return (
     <div className={cn(styles.promo, className)} {...excludeSupportProps(rest)}>
-      {button && <ButtonFilled {...button} appearance='primary' size='m' disabled={disabled} />}
+      {button && (
+        <ButtonFilled {...button} onClick={handleButtonClick} appearance='primary' size='m' disabled={disabled} />
+      )}
       {volume && <Dimension {...volume} size={size} />}
     </div>
   );

package/src/components/FunctionBadge/FunctionBadge.tsx

@@ -33,6 +33,8 @@ export function FunctionBadge({ icon, options }: FunctionBadgeProps) {
 
   const onClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+    e.preventDefault();
+
     setIsOpen(isOpen => !isOpen);
   }, []);
 

package/src/components/FunctionBadge/styles.module.scss

@@ -49,4 +49,4 @@
 
 li.item {
   width: max-content;
-}
+}

package/src/constants.ts

@@ -15,5 +15,4 @@ export const TEST_IDS = {
   title: 'card__header__title',
   description: 'card__header__description',
   metadata: 'card__header__metadata',
-  anchor: 'card__anchor',
 };

package/dist/cjs/components/Card/constants.d.ts

@@ -1 +0,0 @@
-export declare const TRIGGER_CLICK_KEY_CODES: string[];

package/dist/cjs/components/Card/constants.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TRIGGER_CLICK_KEY_CODES = void 0;
-exports.TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];

package/dist/esm/components/Card/constants.d.ts

@@ -1 +0,0 @@
-export declare const TRIGGER_CLICK_KEY_CODES: string[];

package/dist/esm/components/Card/constants.js

@@ -1 +0,0 @@
-export const TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];

package/src/components/Card/constants.ts

@@ -1 +0,0 @@
-export const TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];