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

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.15 (2025-02-04)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.24.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 ## 0.16.14 (2025-01-23)
 
 ### Only dependencies have been changed

package/README.md

@@ -32,6 +32,7 @@ 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` | - | Вложенный контент |
@@ -41,10 +42,8 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | functionBadge | `ReactNode` | - | Вложенный FunctionBadge |
 | className | `string` | - | CSS-класс для элемента с контентом |
 | href | `string` | - | Ссылка карточки |
-| 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} |
+| 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} |
 | key | `Key` | - |  |
 
 

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

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

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

@@ -19,34 +19,15 @@ 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,
@@ -63,18 +44,28 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
       image,
       className,
       href,
-      onKeyDown,
-      target
+      onKeyDown: onKeyDownProp
     } = _a,
-    rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "target"]);
+    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]);
   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)(CardTag, Object.assign({
-      ref: ref,
+    children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
+      ref: (0, merge_refs_1.default)(ref, localDivRef),
       className: (0, classnames_1.default)(styles_module_scss_1.default.card, className)
     }, supportProps, {
       onClick: onClick,
@@ -82,15 +73,20 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
       "data-checked": checked || undefined,
       "data-outline": outline || undefined,
       "data-pointer": onClick ? true : undefined,
-      disabled: disabled,
-      href: href,
-      target: target,
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex: 0,
       onKeyDown: onKeyDown,
       children: [image, (0, jsx_runtime_1.jsxs)("div", {
         className: styles_module_scss_1.default.composition,
         tabIndex: -1,
-        children: [!disabled && functionBadge && (0, jsx_runtime_1.jsx)(helperComponents_1.FunctionBadgeWrapper, {
+        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, {
           className: styles_module_scss_1.default.functionBadgeWrapper,
           children: functionBadge
         }), (0, jsx_runtime_1.jsx)("div", {
@@ -98,7 +94,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, children && (0, jsx_runtime_1.jsx)(typography_1.Typography, {
+            children: [header || null, children && (0, jsx_runtime_1.jsx)(typography_1.Typography, {
               family: 'sans',
               size: size,
               purpose: 'body',

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

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

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

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

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

@@ -32,9 +32,6 @@
   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;
@@ -140,6 +137,16 @@
   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,28 +33,14 @@ 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,17 +35,10 @@ 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,7 +41,6 @@ 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,4 +14,5 @@ export declare const TEST_IDS: {
     title: string;
     description: string;
     metadata: string;
+    anchor: string;
 };

package/dist/cjs/constants.js

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

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

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

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

@@ -11,22 +11,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { forwardRef, } from 'react';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useRef, } from 'react';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { SIZE } from '../../constants';
+import { SIZE, TEST_IDS } 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, target } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "target"]);
+    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]);
     const supportProps = extractSupportProps(rest);
-    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 })] })) }));
+    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 })] })) }));
 });

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

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

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

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

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

@@ -32,9 +32,6 @@
   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;
@@ -140,6 +137,16 @@
   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,17 +18,5 @@ import styles from './styles.module.css';
 export function FooterAction(_a) {
     var { button, secondaryButton, className } = _a, rest = __rest(_a, ["button", "secondaryButton", "className"]);
     const { disabled } = 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 (_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 })))] })));
+    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 }))] })));
 }

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

@@ -19,11 +19,5 @@ 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();
-    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 }))] })));
+    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 }))] })));
 }

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

@@ -27,7 +27,6 @@ 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,4 +14,5 @@ export declare const TEST_IDS: {
     title: string;
     description: string;
     metadata: string;
+    anchor: string;
 };

package/dist/esm/constants.js

@@ -14,4 +14,5 @@ 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.15-preview-31ae96b0.0",
+  "version": "0.16.15",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,13 +39,14 @@
     "@snack-uikit/button": "0.19.6",
     "@snack-uikit/icon-predefined": "0.7.3",
     "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/list": "0.23.1",
+    "@snack-uikit/list": "0.24.0",
     "@snack-uikit/promo-tag": "0.7.1",
     "@snack-uikit/tag": "0.12.2",
     "@snack-uikit/truncate-string": "0.6.6",
     "@snack-uikit/typography": "0.8.4",
     "@snack-uikit/utils": "3.7.0",
-    "classnames": "2.5.1"
+    "classnames": "2.5.1",
+    "merge-refs": "1.3.0"
   },
-  "gitHead": "88a3023d9740bca7c55a403e7590d9fb21083dad"
+  "gitHead": "cb674e100e5e2b92b7c07d703fcc50789ec87606"
 }

package/src/components/Card/Card.tsx

@@ -1,23 +1,26 @@
 import cn from 'classnames';
+import mergeRefs from 'merge-refs';
 import {
-  ForwardedRef,
   forwardRef,
-  HTMLAttributeAnchorTarget,
+  KeyboardEvent,
   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 } from '../../constants';
+import { SIZE, TEST_IDS } 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<{
@@ -29,6 +32,8 @@ export type CardProps = WithSupportProps<{
   outline?: boolean;
   /** Отображение галочки для режима массового выделения карточек */
   multipleSelection?: boolean;
+  /** Колбек на клик по карточке */
+  onClick?(e: MouseEvent<HTMLDivElement | HTMLAnchorElement>): void;
   /** Размер */
   size?: Size;
   /** PromoBadge */
@@ -47,36 +52,11 @@ export type CardProps = WithSupportProps<{
   className?: string;
   /** Ссылка карточки */
   href?: string;
-  /** Атрибут target для ссылки */
-  target?: HTMLAttributeAnchorTarget;
-  /** Колбек на клик по карточке */
-  onClick?(e: MouseEvent<HTMLAnchorElement | HTMLDivElement>): void;
   /** Колбек нажатия клавиши клавиатуры */
-  onKeyDown?: KeyboardEventHandler<HTMLAnchorElement | HTMLDivElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
 
-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>(
+export const Card = forwardRef<HTMLDivElement, CardProps>(
   (
     {
       onClick,
@@ -93,18 +73,34 @@ export const Card = forwardRef<HTMLAnchorElement | HTMLDivElement, CardProps>(
       image,
       className,
       href,
-      onKeyDown,
-      target,
+      onKeyDown: onKeyDownProp,
       ...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 }}>
-        <CardTag
-          ref={ref}
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div
+          ref={mergeRefs(ref, localDivRef)}
           className={cn(styles.card, className)}
           {...supportProps}
           onClick={onClick}
@@ -112,22 +108,31 @@ export const Card = forwardRef<HTMLAnchorElement | HTMLDivElement, CardProps>(
           data-checked={checked || undefined}
           data-outline={outline || undefined}
           data-pointer={onClick ? true : undefined}
-          disabled={disabled}
-          href={href}
-          target={target}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
           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}
+                {header || null}
 
                 {children && (
                   <Typography family='sans' size={size} purpose='body' className={styles.body} tag='div'>
@@ -143,7 +148,7 @@ export const Card = forwardRef<HTMLAnchorElement | HTMLDivElement, CardProps>(
           </div>
 
           {checked && multipleSelection && <Check className={styles.check} />}
-        </CardTag>
+        </div>
       </CardContext.Provider>
     );
   },

package/src/components/Card/constants.ts

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

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

@@ -45,8 +45,6 @@ $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;
@@ -189,6 +187,18 @@ $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,5 +1,4 @@
 import cn from 'classnames';
-import { MouseEventHandler } from 'react';
 
 import { ButtonFilled, ButtonFilledProps, ButtonTonal, ButtonTonalProps } from '@snack-uikit/button';
 import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -19,32 +18,10 @@ 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} onClick={handleButtonClick} appearance='primary' size='m' disabled={disabled} />
-      {secondaryButton && (
-        <ButtonTonal
-          {...secondaryButton}
-          onClick={handleSecondaryButtonClick}
-          appearance='neutral'
-          size='m'
-          disabled={disabled}
-        />
-      )}
+      <ButtonFilled {...button} appearance='primary' size='m' disabled={disabled} />
+      {secondaryButton && <ButtonTonal {...secondaryButton} appearance='neutral' size='m' disabled={disabled} />}
     </div>
   );
 }

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

@@ -1,5 +1,4 @@
 import cn from 'classnames';
-import { MouseEventHandler } from 'react';
 
 import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
 import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -23,18 +22,9 @@ 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} onClick={handleButtonClick} appearance='primary' size='m' disabled={disabled} />
-      )}
+      {button && <ButtonFilled {...button} appearance='primary' size='m' disabled={disabled} />}
       {volume && <Dimension {...volume} size={size} />}
     </div>
   );

package/src/components/FunctionBadge/FunctionBadge.tsx

@@ -33,8 +33,6 @@ 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,4 +15,5 @@ export const TEST_IDS = {
   title: 'card__header__title',
   description: 'card__header__description',
   metadata: 'card__header__metadata',
+  anchor: 'card__anchor',
 };