@snack-uikit/tag 0.8.3-preview-cb79db34.0 → 0.9.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.9.1 (2024-04-23)
+
+### Only dependencies have been changed
+* [@snack-uikit/dropdown@0.2.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/dropdown/CHANGELOG.md)
+* [@snack-uikit/scroll@0.5.3](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
+* [@snack-uikit/utils@3.3.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+# 0.9.0 (2024-04-22)
+
+
+### Features
+
+* **FF-4649:** long text tags handling ([4fa20e0](https://github.com/cloud-ru-tech/snack-uikit/commit/4fa20e00aaf57483d34ab7fdbca5f6b333025c7e))
+
+
+
+
+
 ## 0.8.2 (2024-03-26)
 
 ### Only dependencies have been changed

package/dist/components/Tag/Tag.js

@@ -18,6 +18,6 @@ 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, 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 })) }))] })));
+    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", { title: label, 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/dist/components/Tag/styles.module.css

@@ -2,6 +2,7 @@
   display:inline-flex;
   align-items:center;
   box-sizing:border-box;
+  max-width:100%;
 }
 .tag .tagButton{
   cursor:pointer;
@@ -83,7 +84,10 @@
   background-color:var(--sys-neutral-decor-default, #dfe2ec);
 }
 .tag[data-appearance=neutral] .label{
+  overflow:hidden;
   color:var(--sys-neutral-text-support, #656771);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=neutral] .tagButton{
   color:var(--sys-neutral-text-light, #868892);
@@ -101,7 +105,10 @@
   background-color:var(--sys-primary-decor-default, #ebdefd);
 }
 .tag[data-appearance=primary] .label{
+  overflow:hidden;
   color:var(--sys-primary-text-support, #5b4796);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=primary] .tagButton{
   color:var(--sys-primary-text-light, #997adc);
@@ -119,7 +126,10 @@
   background-color:var(--sys-red-decor-default, #fdd6cd);
 }
 .tag[data-appearance=red] .label{
+  overflow:hidden;
   color:var(--sys-red-text-support, #ab423e);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=red] .tagButton{
   color:var(--sys-red-text-light, #ea6658);
@@ -137,7 +147,10 @@
   background-color:var(--sys-orange-decor-default, #fed8b8);
 }
 .tag[data-appearance=orange] .label{
+  overflow:hidden;
   color:var(--sys-orange-text-support, #c06735);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=orange] .tagButton{
   color:var(--sys-orange-text-light, #ea873a);
@@ -155,7 +168,10 @@
   background-color:var(--sys-yellow-decor-default, #f0dfb1);
 }
 .tag[data-appearance=yellow] .label{
+  overflow:hidden;
   color:var(--sys-yellow-text-support, #a57b0e);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=yellow] .tagButton{
   color:var(--sys-yellow-text-light, #ddb035);
@@ -173,7 +189,10 @@
   background-color:var(--sys-green-decor-default, #d2ead0);
 }
 .tag[data-appearance=green] .label{
+  overflow:hidden;
   color:var(--sys-green-text-support, #568a56);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=green] .tagButton{
   color:var(--sys-green-text-light, #67ba6e);
@@ -191,7 +210,10 @@
   background-color:var(--sys-blue-decor-default, #d6e2f4);
 }
 .tag[data-appearance=blue] .label{
+  overflow:hidden;
   color:var(--sys-blue-text-support, #4975a9);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=blue] .tagButton{
   color:var(--sys-blue-text-light, #729edd);
@@ -209,7 +231,10 @@
   background-color:var(--sys-violet-decor-default, #efd9ef);
 }
 .tag[data-appearance=violet] .label{
+  overflow:hidden;
   color:var(--sys-violet-text-support, #8c5d93);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=violet] .tagButton{
   color:var(--sys-violet-text-light, #c886c9);
@@ -227,7 +252,10 @@
   background-color:var(--sys-pink-decor-default, #f5d9e1);
 }
 .tag[data-appearance=pink] .label{
+  overflow:hidden;
   color:var(--sys-pink-text-support, #aa597d);
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .tag[data-appearance=pink] .tagButton{
   color:var(--sys-pink-text-light, #e68baa);

package/dist/helperComponents/TagList/TagList.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tag } from '../../components';
 import { SIZE } from '../../constants';
+import styles from './styles.module.css';
 function renderTag(size, handleRemoveItem, setRef) {
     return function TagRowItem(item, index) {
-        return (_jsx("div", { ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index), children: _jsx(Tag, { label: item.label, appearance: item.appearance, size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }) }, item.label));
+        return (_jsx("div", { ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index), className: styles.tagWrapper, children: _jsx(Tag, { label: item.label, appearance: item.appearance, size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }) }, item.label));
     };
 }
 export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef }) {

package/dist/helperComponents/TagList/styles.module.css

@@ -0,0 +1,3 @@
+.tagWrapper{
+  max-width:100%;
+}

package/dist/helperComponents/TagRowTruncated/TagRowTruncated.js

@@ -54,6 +54,7 @@ function TagRowTruncatedInner(_a) {
         const moreButtonWidth = ((_a = hiddenMoreButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
         let currentRowWidth = 0;
         let currentRowCount = 1;
+        let currentRowVisibleTagAmount = 0;
         tagsMapRef.current.forEach((tagElement, tagRowItem) => {
             const tagWidth = (tagElement === null || tagElement === void 0 ? void 0 : tagElement.offsetWidth) || 0;
             const sumRowWidth = currentRowWidth + tagWidth + gapWidth;
@@ -64,19 +65,23 @@ function TagRowTruncatedInner(_a) {
             if (currentRowCount === rowLimit) {
                 if (sumRowWidth + moreButtonWidth > maxWidth) {
                     currentRowCount++;
+                    currentRowVisibleTagAmount = 0;
                     newHiddenTags.push(tagRowItem);
                     return;
                 }
                 currentRowWidth = sumRowWidth;
                 newVisibleTags.push(tagRowItem);
+                currentRowVisibleTagAmount++;
                 return;
             }
             if (sumRowWidth > maxWidth) {
-                currentRowWidth = tagWidth + gapWidth;
+                currentRowWidth = currentRowVisibleTagAmount ? tagWidth + gapWidth : 0;
                 currentRowCount++;
+                currentRowVisibleTagAmount = 0;
                 newVisibleTags.push(tagRowItem);
                 return;
             }
+            currentRowVisibleTagAmount++;
             currentRowWidth = sumRowWidth;
             newVisibleTags.push(tagRowItem);
         });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.8.3-preview-cb79db34.0",
+  "version": "0.9.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/dropdown": "0.2.2-preview-cb79db34.0",
+    "@snack-uikit/dropdown": "0.2.2",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/scroll": "0.5.3-preview-cb79db34.0",
-    "@snack-uikit/utils": "3.2.1-preview-cb79db34.0",
+    "@snack-uikit/scroll": "0.5.3",
+    "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "ec06c40c0ed64aa42d8842734a8c532f5c4603e6"
+  "gitHead": "bf1e1f3cfabccc1ee288c18722e33009bd001798"
 }

package/src/components/Tag/Tag.tsx

@@ -41,7 +41,9 @@ export function Tag({
       data-appearance={appearance}
       data-removable={Boolean(onDelete)}
     >
-      <span className={styles.label}>{label}</span>
+      <span title={label} className={styles.label}>
+        {label}
+      </span>
       {onDelete && (
         <button
           type='button'

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

@@ -94,6 +94,7 @@ $appearances: (
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
+  max-width: 100%;
 
   .tagButton {
     cursor: pointer;
@@ -146,7 +147,10 @@ $appearances: (
       background-color: simple-var($appearance, 'container');
 
       .label {
+        overflow: hidden;
         color: simple-var($appearance, 'label');
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .tagButton {

package/src/helperComponents/TagList/TagList.tsx

@@ -3,6 +3,7 @@ import { Ref } from 'react';
 import { Tag } from '../../components';
 import { SIZE } from '../../constants';
 import { Size, TagRowItemInner } from '../../types';
+import styles from './styles.module.scss';
 
 type SetTagRef = (item: TagRowItemInner, index: number) => Ref<HTMLDivElement>;
 
@@ -18,7 +19,7 @@ type OnDeleteHandler = () => void;
 function renderTag(size: Size, handleRemoveItem?: (item: TagRowItemInner) => OnDeleteHandler, setRef?: SetTagRef) {
   return function TagRowItem(item: TagRowItemInner, index: number) {
     return (
-      <div key={item.label} ref={setRef?.(item, index)}>
+      <div key={item.label} ref={setRef?.(item, index)} className={styles.tagWrapper}>
         <Tag label={item.label} appearance={item.appearance} size={size} onDelete={handleRemoveItem?.(item)} />
       </div>
     );

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

@@ -0,0 +1,3 @@
+.tagWrapper {
+  max-width: 100%;
+}

package/src/helperComponents/TagRowTruncated/TagRowTruncated.tsx

@@ -70,6 +70,7 @@ function TagRowTruncatedInner({
 
     let currentRowWidth = 0;
     let currentRowCount = 1;
+    let currentRowVisibleTagAmount = 0;
 
     tagsMapRef.current.forEach((tagElement, tagRowItem) => {
       const tagWidth = tagElement?.offsetWidth || 0;
@@ -83,22 +84,26 @@ function TagRowTruncatedInner({
       if (currentRowCount === rowLimit) {
         if (sumRowWidth + moreButtonWidth > maxWidth) {
           currentRowCount++;
+          currentRowVisibleTagAmount = 0;
           newHiddenTags.push(tagRowItem);
           return;
         }
 
         currentRowWidth = sumRowWidth;
         newVisibleTags.push(tagRowItem);
+        currentRowVisibleTagAmount++;
         return;
       }
 
       if (sumRowWidth > maxWidth) {
-        currentRowWidth = tagWidth + gapWidth;
+        currentRowWidth = currentRowVisibleTagAmount ? tagWidth + gapWidth : 0;
         currentRowCount++;
+        currentRowVisibleTagAmount = 0;
         newVisibleTags.push(tagRowItem);
         return;
       }
 
+      currentRowVisibleTagAmount++;
       currentRowWidth = sumRowWidth;
       newVisibleTags.push(tagRowItem);
     });