@snack-uikit/card 0.18.4-preview-cf198ddd.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/README.md +1 -0
  3. package/dist/cjs/components/Card/Card.d.ts +4 -0
  4. package/dist/cjs/components/Card/Card.js +10 -2
  5. package/dist/esm/components/Card/Card.d.ts +4 -0
  6. package/dist/esm/components/Card/Card.js +2 -2
  7. package/package.json +11 -11
  8. package/src/components/Card/Card.tsx +4 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,34 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 0.19.0 (2025-05-21)
7
+
8
+
9
+ ### Features
10
+
11
+ * **FF-6410:** add input into card ([44dbaee](https://github.com/cloud-ru-tech/snack-uikit/commit/44dbaee4feceba9110ebf0518486948e6db3fd86))
12
+
13
+
14
+
15
+
16
+
17
+ ## 0.18.4 (2025-05-16)
18
+
19
+ ### Only dependencies have been changed
20
+ * [@snack-uikit/button@0.19.11](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
21
+ * [@snack-uikit/icon-predefined@0.7.6](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icon-predefined/CHANGELOG.md)
22
+ * [@snack-uikit/icons@0.26.3](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
23
+ * [@snack-uikit/list@0.29.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
24
+ * [@snack-uikit/promo-tag@0.7.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/promo-tag/CHANGELOG.md)
25
+ * [@snack-uikit/tag@0.14.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/tag/CHANGELOG.md)
26
+ * [@snack-uikit/truncate-string@0.6.19](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
27
+ * [@snack-uikit/typography@0.8.7](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/typography/CHANGELOG.md)
28
+ * [@snack-uikit/utils@3.8.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
29
+
30
+
31
+
32
+
33
+
6
34
  ## 0.18.3 (2025-05-14)
7
35
 
8
36
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -30,6 +30,7 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
30
30
  |------|------|---------------|-------------|
31
31
  | disabled | `boolean` | - | Управление состоянием интерактивности |
32
32
  | checked | `boolean` | - | Управление состоянием выбран/не выбран |
33
+ | name | `string` | - | Имя инпута в dom-дереве |
33
34
  | outline | `boolean` | - | Управление состоянием наличия обводки |
34
35
  | multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
35
36
  | onClick | `(e: MouseEvent<HTMLDivElement \| HTMLAnchorElement, MouseEvent>) => void` | - | Колбек на клик по карточке |
package/dist/cjs/components/Card/Card.d.ts CHANGED
@@ -8,6 +8,8 @@ export type CardProps = WithSupportProps<{
8
8
  disabled?: boolean;
9
9
  /** Управление состоянием выбран/не выбран */
10
10
  checked?: boolean;
11
+ /** Имя инпута в dom-дереве */
12
+ name?: string;
11
13
  /** Управление состоянием наличия обводки */
12
14
  outline?: boolean;
13
15
  /** Отображение галочки для режима массового выделения карточек */
@@ -42,6 +44,8 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
42
44
  disabled?: boolean;
43
45
  /** Управление состоянием выбран/не выбран */
44
46
  checked?: boolean;
47
+ /** Имя инпута в dom-дереве */
48
+ name?: string;
45
49
  /** Управление состоянием наличия обводки */
46
50
  outline?: boolean;
47
51
  /** Отображение галочки для режима массового выделения карточек */
package/dist/cjs/components/Card/Card.js CHANGED
@@ -44,9 +44,10 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
44
44
  image,
45
45
  className,
46
46
  href,
47
- onKeyDown: onKeyDownProp
47
+ onKeyDown: onKeyDownProp,
48
+ name
48
49
  } = _a,
49
- rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown"]);
50
+ rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className", "href", "onKeyDown", "name"]);
50
51
  const localDivRef = (0, react_1.useRef)(null);
51
52
  const localAnchorRef = (0, react_1.useRef)(null);
52
53
  const onKeyDown = (0, react_1.useCallback)(e => {
@@ -111,6 +112,13 @@ exports.Card = (0, react_1.forwardRef)((_a, ref) => {
111
112
  } : promoBadge))]
112
113
  }), checked && multipleSelection && (0, jsx_runtime_1.jsx)(helperComponents_1.Check, {
113
114
  className: styles_module_scss_1.default.check
115
+ }), name && (0, jsx_runtime_1.jsx)("input", {
116
+ name: name,
117
+ type: 'checkbox',
118
+ checked: checked,
119
+ style: {
120
+ display: 'none'
121
+ }
114
122
  })]
115
123
  }))
116
124
  });
package/dist/esm/components/Card/Card.d.ts CHANGED
@@ -8,6 +8,8 @@ export type CardProps = WithSupportProps<{
8
8
  disabled?: boolean;
9
9
  /** Управление состоянием выбран/не выбран */
10
10
  checked?: boolean;
11
+ /** Имя инпута в dom-дереве */
12
+ name?: string;
11
13
  /** Управление состоянием наличия обводки */
12
14
  outline?: boolean;
13
15
  /** Отображение галочки для режима массового выделения карточек */
@@ -42,6 +44,8 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
42
44
  disabled?: boolean;
43
45
  /** Управление состоянием выбран/не выбран */
44
46
  checked?: boolean;
47
+ /** Имя инпута в dom-дереве */
48
+ name?: string;
45
49
  /** Управление состоянием наличия обводки */
46
50
  outline?: boolean;
47
51
  /** Отображение галочки для режима массового выделения карточек */
package/dist/esm/components/Card/Card.js CHANGED
@@ -21,7 +21,7 @@ import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents'
21
21
  import { TRIGGER_CLICK_KEY_CODES } from './constants';
22
22
  import styles from './styles.module.css';
23
23
  export const Card = forwardRef((_a, ref) => {
24
- 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"]);
24
+ 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"]);
25
25
  const localDivRef = useRef(null);
26
26
  const localAnchorRef = useRef(null);
27
27
  const onKeyDown = useCallback((e) => {
@@ -36,5 +36,5 @@ export const Card = forwardRef((_a, ref) => {
36
36
  const supportProps = extractSupportProps(rest);
37
37
  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,
38
38
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
39
- 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 })] })) }));
39
+ 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' } })] })) }));
40
40
  });
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Card",
7
- "version": "0.18.4-preview-cf198ddd.0",
7
+ "version": "0.19.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,17 +36,17 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.19.10",
40
- "@snack-uikit/icon-predefined": "0.7.5",
41
- "@snack-uikit/icons": "0.26.3-preview-cf198ddd.0",
42
- "@snack-uikit/list": "0.29.2-preview-cf198ddd.0",
43
- "@snack-uikit/promo-tag": "0.7.3",
44
- "@snack-uikit/tag": "0.14.1-preview-cf198ddd.0",
45
- "@snack-uikit/truncate-string": "0.6.19-preview-cf198ddd.0",
46
- "@snack-uikit/typography": "0.8.6",
47
- "@snack-uikit/utils": "3.8.1",
39
+ "@snack-uikit/button": "0.19.11",
40
+ "@snack-uikit/icon-predefined": "0.7.6",
41
+ "@snack-uikit/icons": "0.26.3",
42
+ "@snack-uikit/list": "0.29.2",
43
+ "@snack-uikit/promo-tag": "0.7.4",
44
+ "@snack-uikit/tag": "0.14.1",
45
+ "@snack-uikit/truncate-string": "0.6.19",
46
+ "@snack-uikit/typography": "0.8.7",
47
+ "@snack-uikit/utils": "3.8.2",
48
48
  "classnames": "2.5.1",
49
49
  "merge-refs": "1.3.0"
50
50
  },
51
- "gitHead": "0b6232b057fa7ef34a57a217c5fccf6cbf030106"
51
+ "gitHead": "0c8846201ac8f73ec80be3e47418fe073619541a"
52
52
  }
package/src/components/Card/Card.tsx CHANGED
@@ -28,6 +28,8 @@ export type CardProps = WithSupportProps<{
28
28
  disabled?: boolean;
29
29
  /** Управление состоянием выбран/не выбран */
30
30
  checked?: boolean;
31
+ /** Имя инпута в dom-дереве */
32
+ name?: string;
31
33
  /** Управление состоянием наличия обводки */
32
34
  outline?: boolean;
33
35
  /** Отображение галочки для режима массового выделения карточек */
@@ -74,6 +76,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
74
76
  className,
75
77
  href,
76
78
  onKeyDown: onKeyDownProp,
79
+ name,
77
80
  ...rest
78
81
  },
79
82
  ref,
@@ -148,6 +151,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
148
151
  </div>
149
152
 
150
153
  {checked && multipleSelection && <Check className={styles.check} />}
154
+ {name && <input name={name} type='checkbox' checked={checked} style={{ display: 'none' }} />}
151
155
  </div>
152
156
  </CardContext.Provider>
153
157
  );