@snack-uikit/tag 0.7.5 → 0.8.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.8.0 (2024-02-23)
+
+
+### Features
+
+* **FF-4221:** add tabIndex prop ([e087f40](https://github.com/cloud-ru-tech/snack-uikit/commit/e087f401caefb2731e9e7fa6a03e4599d337cfb1))
+
+
+
+
+
 ## 0.7.5 (2024-02-22)
 
 ### Only dependencies have been changed

package/README.md

@@ -16,6 +16,7 @@
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | neutral | Внешний вид |
 | onDelete | `MouseEventHandler<HTMLButtonElement>` | - | Коллбэк на удаление |
 | className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | tabIndex кнопки удаления |
 ## TagRow
 ### Props
 | name | type | default value | description |

package/dist/components/Tag/Tag.d.ts

@@ -13,6 +13,8 @@ export type TagProps = WithSupportProps<{
     onDelete?: MouseEventHandler<HTMLButtonElement>;
     /** CSS-класс */
     className?: string;
+    /** tabIndex кнопки удаления */
+    tabIndex?: number;
 }>;
-export declare function Tag({ label, size, appearance, onDelete, className, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tag({ label, size, appearance, onDelete, className, tabIndex, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
 export { APPEARANCE };

package/dist/components/Tag/Tag.js

@@ -17,7 +17,7 @@ import { APPEARANCE, SIZE } from '../../constants';
 import { ICON_SIZE } from './constants';
 import styles from './styles.module.css';
 export function Tag(_a) {
-    var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className } = _a, rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className"]);
-    return (_jsxs("span", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, "data-removable": Boolean(onDelete), children: [_jsx("span", { className: styles.label, children: label }), onDelete && (_jsx("button", { type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button', children: size === SIZE.Xs ? (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) : (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) }))] })));
+    var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className, tabIndex } = _a, rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
+    return (_jsxs("span", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, "data-removable": Boolean(onDelete), children: [_jsx("span", { className: styles.label, children: label }), onDelete && (_jsx("button", { type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button', tabIndex: tabIndex, children: size === SIZE.Xs ? (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) : (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) }))] })));
 }
 export { APPEARANCE };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,5 +38,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "6aa9d988eebb76712315def67343b8b2e4cd268c"
+  "gitHead": "ee199e2cdca1d24db821533512263dfe06365159"
 }

package/src/components/Tag/Tag.tsx

@@ -20,6 +20,8 @@ export type TagProps = WithSupportProps<{
   onDelete?: MouseEventHandler<HTMLButtonElement>;
   /** CSS-класс */
   className?: string;
+  /** tabIndex кнопки удаления */
+  tabIndex?: number;
 }>;
 
 export function Tag({
@@ -28,6 +30,7 @@ export function Tag({
   appearance = APPEARANCE.Neutral,
   onDelete,
   className,
+  tabIndex,
   ...rest
 }: TagProps) {
   return (
@@ -40,7 +43,13 @@ export function Tag({
     >
       <span className={styles.label}>{label}</span>
       {onDelete && (
-        <button type='button' className={styles.tagButton} onClick={onDelete} data-test-id='tag-remove-button'>
+        <button
+          type='button'
+          className={styles.tagButton}
+          onClick={onDelete}
+          data-test-id='tag-remove-button'
+          tabIndex={tabIndex}
+        >
           {size === SIZE.Xs ? (
             <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />
           ) : (