@snack-uikit/card 0.18.4 → 0.19.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.19.0 (2025-05-21)
+
+
+### Features
+
+* **FF-6410:** add input into card ([44dbaee](https://github.com/cloud-ru-tech/snack-uikit/commit/44dbaee4feceba9110ebf0518486948e6db3fd86))
+
+
+
+
+
 ## 0.18.4 (2025-05-16)
 
 ### Only dependencies have been changed

package/README.md

@@ -30,6 +30,7 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 |------|------|---------------|-------------|
 | disabled | `boolean` | - | Управление состоянием интерактивности |
 | checked | `boolean` | - | Управление состоянием выбран/не выбран |
+| name | `string` | - | Имя инпута в dom-дереве |
 | outline | `boolean` | - | Управление состоянием наличия обводки |
 | multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
 | onClick | `(e: MouseEvent<HTMLDivElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбек на клик по карточке |

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

@@ -8,6 +8,8 @@ export type CardProps = WithSupportProps<{
     disabled?: boolean;
     /** Управление состоянием выбран/не выбран */
     checked?: boolean;
+    /** Имя инпута в dom-дереве */
+    name?: string;
     /** Управление состоянием наличия обводки */
     outline?: boolean;
     /** Отображение галочки для режима массового выделения карточек */
@@ -42,6 +44,8 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
     disabled?: boolean;
     /** Управление состоянием выбран/не выбран */
     checked?: boolean;
+    /** Имя инпута в dom-дереве */
+    name?: string;
     /** Управление состоянием наличия обводки */
     outline?: boolean;
     /** Отображение галочки для режима массового выделения карточек */

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

@@ -44,9 +44,10 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
       image,
       className,
       href,
-      onKeyDown: onKeyDownProp
+      onKeyDown: onKeyDownProp,
+      name
     } = _a,
-    rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown"]);
+    rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "name"]);
   const localDivRef = (0, react_1.useRef)(null);
   const localAnchorRef = (0, react_1.useRef)(null);
   const onKeyDown = (0, react_1.useCallback)(e => {
@@ -111,6 +112,13 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
         } : promoBadge))]
       }), checked && multipleSelection && (0, jsx_runtime_1.jsx)(helperComponents_1.Check, {
         className: styles_module_scss_1.default.check
+      }), name && (0, jsx_runtime_1.jsx)("input", {
+        name: name,
+        type: 'checkbox',
+        checked: checked,
+        style: {
+          display: 'none'
+        }
       })]
     }))
   });

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

@@ -8,6 +8,8 @@ export type CardProps = WithSupportProps<{
     disabled?: boolean;
     /** Управление состоянием выбран/не выбран */
     checked?: boolean;
+    /** Имя инпута в dom-дереве */
+    name?: string;
     /** Управление состоянием наличия обводки */
     outline?: boolean;
     /** Отображение галочки для режима массового выделения карточек */
@@ -42,6 +44,8 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
     disabled?: boolean;
     /** Управление состоянием выбран/не выбран */
     checked?: boolean;
+    /** Имя инпута в dom-дереве */
+    name?: string;
     /** Управление состоянием наличия обводки */
     outline?: boolean;
     /** Отображение галочки для режима массового выделения карточек */

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

@@ -21,7 +21,7 @@ import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents'
 import { TRIGGER_CLICK_KEY_CODES } from './constants';
 import styles from './styles.module.css';
 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"]);
+    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className, href, onKeyDown: onKeyDownProp, name } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "name"]);
     const localDivRef = useRef(null);
     const localAnchorRef = useRef(null);
     const onKeyDown = useCallback((e) => {
@@ -36,5 +36,5 @@ export const Card = forwardRef((_a, ref) => {
     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 })] })) }));
+            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 }), name && _jsx("input", { name: name, type: 'checkbox', checked: checked, style: { display: 'none' } })] })) }));
 });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -48,5 +48,5 @@
     "classnames": "2.5.1",
     "merge-refs": "1.3.0"
   },
-  "gitHead": "0eedd13082bdc63c6f0b1a6c592421e6133f17af"
+  "gitHead": "0c8846201ac8f73ec80be3e47418fe073619541a"
 }

package/src/components/Card/Card.tsx

@@ -28,6 +28,8 @@ export type CardProps = WithSupportProps<{
   disabled?: boolean;
   /** Управление состоянием выбран/не выбран */
   checked?: boolean;
+  /** Имя инпута в dom-дереве */
+  name?: string;
   /** Управление состоянием наличия обводки */
   outline?: boolean;
   /** Отображение галочки для режима массового выделения карточек */
@@ -74,6 +76,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
       className,
       href,
       onKeyDown: onKeyDownProp,
+      name,
       ...rest
     },
     ref,
@@ -148,6 +151,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
           </div>
 
           {checked && multipleSelection && <Check className={styles.check} />}
+          {name && <input name={name} type='checkbox' checked={checked} style={{ display: 'none' }} />}
         </div>
       </CardContext.Provider>
     );