@snack-uikit/card 0.14.0 → 0.14.2-preview-d1a63029.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.14.1 (2024-10-31)
+
+
+### Bug Fixes
+
+* **PDS-438:** stylelint update ([9d40d4e](https://github.com/cloud-ru-tech/snack-uikit/commit/9d40d4eb445eeaaca5a2dc1f6421d496f86aeac3))
+
+
+
+
+
 # 0.14.0 (2024-10-28)
 
 

package/README.md

@@ -42,6 +42,7 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | functionBadge | `ReactNode` | - | Вложенный FunctionBadge |
 | className | `string` | - | CSS-класс для элемента с контентом |
 | href | `string` | - | Ссылка карточки |
+| onKeyDown | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -1,4 +1,4 @@
-import { 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';
@@ -32,5 +32,7 @@ export type CardProps = WithSupportProps<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
-export declare function Card({ onClick, disabled, checked, outline, multipleSelection, size, children, header, footer, functionBadge, promoBadge, image, className, href, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ onClick, disabled, checked, outline, multipleSelection, size, children, header, footer, functionBadge, promoBadge, image, className, href, onKeyDown: onKeyDownProp, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -42,9 +42,10 @@ function Card(_a) {
       promoBadge,
       image,
       className,
-      href
+      href,
+      onKeyDown: onKeyDownProp
     } = _a,
-    rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href"]);
+    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 => {
@@ -53,8 +54,9 @@ function Card(_a) {
       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]);
+  }, [href, onKeyDownProp]);
   const supportProps = (0, utils_1.extractSupportProps)(rest);
   return (0, jsx_runtime_1.jsx)(context_1.CardContext.Provider, {
     value: {

package/dist/cjs/helperComponents/FunctionBadgeWrapper/styles.module.css

@@ -2,7 +2,6 @@
   padding-top:var(--space-card-padding-function-badge, 8px);
   padding-right:var(--space-card-padding-function-badge, 8px);
   position:absolute;
-  z-index:1;
   top:0;
   right:0;
   box-sizing:border-box;

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

@@ -1,4 +1,4 @@
-import { 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';
@@ -32,5 +32,7 @@ export type CardProps = WithSupportProps<{
     className?: string;
     /** Ссылка карточки */
     href?: string;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
-export declare function Card({ onClick, disabled, checked, outline, multipleSelection, size, children, header, footer, functionBadge, promoBadge, image, className, href, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ onClick, disabled, checked, outline, multipleSelection, size, children, header, footer, functionBadge, promoBadge, image, className, href, onKeyDown: onKeyDownProp, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -20,7 +20,7 @@ import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents'
 import { TRIGGER_CLICK_KEY_CODES } from './constants';
 import styles from './styles.module.css';
 export function Card(_a) {
-    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className, href } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href"]);
+    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) => {
@@ -29,8 +29,9 @@ export function Card(_a) {
             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]);
+    }, [href, onKeyDownProp]);
     const supportProps = extractSupportProps(rest);
     return (_jsx(CardContext.Provider, { value: { size, disabled }, children: _jsxs("div", Object.assign({ 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

package/dist/esm/helperComponents/FunctionBadgeWrapper/styles.module.css

@@ -2,7 +2,6 @@
   padding-top:var(--space-card-padding-function-badge, 8px);
   padding-right:var(--space-card-padding-function-badge, 8px);
   position:absolute;
-  z-index:1;
   top:0;
   right:0;
   box-sizing:border-box;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.14.0",
+  "version": "0.14.2-preview-d1a63029.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,16 +36,16 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.0",
+    "@snack-uikit/button": "0.19.1",
     "@snack-uikit/icon-predefined": "0.7.0",
     "@snack-uikit/icons": "0.24.0",
-    "@snack-uikit/list": "0.20.0",
+    "@snack-uikit/list": "0.21.1-preview-d1a63029.0",
     "@snack-uikit/promo-tag": "0.6.0",
-    "@snack-uikit/tag": "0.11.0",
+    "@snack-uikit/tag": "0.11.1",
     "@snack-uikit/truncate-string": "0.6.0",
     "@snack-uikit/typography": "0.8.0",
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
+  "gitHead": "167f0c505b9958dc320111f7ee9e8ed2ebc58796"
 }

package/src/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, useCallback, useRef } from 'react';
+import { KeyboardEvent, KeyboardEventHandler, MouseEvent, ReactElement, ReactNode, useCallback, useRef } from 'react';
 
 import { PromoTagProps } from '@snack-uikit/promo-tag';
 import { Typography } from '@snack-uikit/typography';
@@ -42,6 +42,8 @@ export type CardProps = WithSupportProps<{
   className?: string;
   /** Ссылка карточки */
   href?: string;
+  /** Колбек нажатия клавиши клавиатуры */
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
 
 export function Card({
@@ -59,6 +61,7 @@ export function Card({
   image,
   className,
   href,
+  onKeyDown: onKeyDownProp,
   ...rest
 }: CardProps) {
   const localDivRef = useRef<HTMLDivElement>(null);
@@ -70,9 +73,11 @@ export function Card({
         if (TRIGGER_CLICK_KEY_CODES.includes(e.code) || e.key === ' ') {
           href ? localAnchorRef.current?.click() : localDivRef.current?.click();
         }
+
+        onKeyDownProp?.(e);
       }
     },
-    [href],
+    [href, onKeyDownProp],
   );
 
   const supportProps = extractSupportProps(rest);

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

@@ -5,6 +5,7 @@ $sizes: 's', 'm', 'l';
 
 .functionBadgeWrapper {
   position: absolute;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
   z-index: 1;
   top: 0;
   right: 0;
@@ -32,6 +33,7 @@ $sizes: 's', 'm', 'l';
   @include styles-tokens-card.composite-var(styles-tokens-card.$card-container);
 
   position: relative;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
   z-index: 0;
 
   overflow: hidden;
@@ -180,6 +182,7 @@ $sizes: 's', 'm', 'l';
 
 .anchor {
   position: absolute;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
   z-index: 1;
   top: 0;
   right: 0;

package/src/helperComponents/FunctionBadgeWrapper/styles.module.scss

@@ -4,10 +4,8 @@
   @include styles-tokens-card.composite-var(styles-tokens-card.$card-function-badge);
 
   position: absolute;
-  z-index: 1;
   top: 0;
   right: 0;
-  
   box-sizing: border-box;
 }