@snack-uikit/tag 0.15.19 → 0.15.20

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.15.20 (2026-05-28)
+
+
+### Bug Fixes
+
+* **FF-8536:** fix first long tag is now visible ([263f6b9](https://github.com/cloud-ru-tech/snack-uikit/commit/263f6b9dbfcb001ec2a79e82a11bdd9c0f080b50))
+
+
+
+
+
 ## 0.15.19 (2026-05-18)
 
 ### Only dependencies have been changed

package/dist/cjs/helperComponents/TagList/TagList.d.ts

@@ -1,11 +1,13 @@
-import { Ref } from 'react';
+import { type CSSProperties, type Ref } from 'react';
 import { Size, TagRowItemInner } from '../../types';
 type SetTagRef = (item: TagRowItemInner, index: number) => Ref<HTMLDivElement>;
+type GetTagStyle = (item: TagRowItemInner, index: number) => CSSProperties | undefined;
 type TagListProps = {
     items: TagRowItemInner[];
     size?: Size;
     onItemRemove?(item: string): void;
     setTagRef?: SetTagRef;
+    getTagStyle?: GetTagStyle;
 };
-export declare function TagList({ items, size, onItemRemove, setTagRef }: TagListProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagList({ items, size, onItemRemove, setTagRef, getTagStyle }: TagListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/TagList/TagList.js

@@ -13,12 +13,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const components_1 = require("../../components");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function renderTag(size, handleRemoveItem, setRef) {
+function renderTag(size, handleRemoveItem, setRef, getStyle) {
   return function TagRowItem(item, index) {
     var _a;
     return (0, jsx_runtime_1.jsx)("div", {
       ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index),
       className: styles_module_scss_1.default.tagWrapper,
+      style: getStyle === null || getStyle === void 0 ? void 0 : getStyle(item, index),
       children: (0, jsx_runtime_1.jsx)(components_1.Tag, Object.assign({
         size: size,
         onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item)
@@ -31,10 +32,11 @@ function TagList(_ref) {
     items,
     size = constants_1.SIZE.Xs,
     onItemRemove,
-    setTagRef
+    setTagRef,
+    getTagStyle
   } = _ref;
   const handleRemoveItem = onItemRemove ? item => () => onItemRemove(item.label) : undefined;
   return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
-    children: items.map(renderTag(size, handleRemoveItem, setTagRef))
+    children: items.map(renderTag(size, handleRemoveItem, setTagRef, getTagStyle))
   });
 }

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

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

package/dist/cjs/helperComponents/TagRowTruncated/TagRowTruncated.js

@@ -27,6 +27,7 @@ const TagMore_1 = require("../TagMore");
 const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_2 = require("./utils");
+const FIRST_TRUNCATED_TAG_WIDTH = 256;
 function TagRowTruncatedInner(_a) {
   var {
       items,
@@ -39,10 +40,10 @@ function TagRowTruncatedInner(_a) {
     rest = __rest(_a, ["items", "rowLimit", "size", "moreButtonLabel", "className", "onItemRemove"]);
   const [visibleTags, setVisibleTags] = (0, react_1.useState)([]);
   const [hiddenTags, setHiddenTags] = (0, react_1.useState)([]);
+  const [firstVisibleTagMaxWidth, setFirstVisibleTagMaxWidth] = (0, react_1.useState)();
   const hiddenRowElementRef = (0, react_1.useRef)(null);
-  const hiddenMoreButtonRef = (0, react_1.useRef)(null);
-  const hiddenMoreButtonWrapperRef = (0, react_1.useRef)(null);
   const [firstTagElement, setFirstTagElement] = (0, react_1.useState)(null);
+  const [hiddenMoreButtonElement, setHiddenMoreButtonElement] = (0, react_1.useState)(null);
   const tagsMapRef = (0, react_1.useRef)(new Map());
   const {
     width: maxWidth
@@ -50,6 +51,9 @@ function TagRowTruncatedInner(_a) {
   const {
     width: firstVisibleTagWidth
   } = (0, hooks_1.useResizeObserver)(firstTagElement);
+  const {
+    width: moreButtonWidth
+  } = (0, hooks_1.useResizeObserver)(hiddenMoreButtonElement);
   function setTagElement(tag, index) {
     return tagElement => {
       if (index === 0 && tagElement) {
@@ -64,17 +68,21 @@ function TagRowTruncatedInner(_a) {
   }
   const gapWidth = (0, utils_2.getGapWidth)(hiddenRowElementRef);
   (0, react_1.useEffect)(() => {
-    var _a;
     if (maxWidth < 1) {
       return;
     }
     const newVisibleTags = [];
     const newHiddenTags = [];
-    const moreButtonWidth = ((_a = hiddenMoreButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+    let newFirstVisibleTagMaxWidth;
     let currentRowWidth = 0;
     let currentRowCount = 1;
     let currentRowVisibleTagAmount = 0;
+    let isFirstTagTruncated = false;
     tagsMapRef.current.forEach((tagElement, tagRowItem) => {
+      if (isFirstTagTruncated) {
+        newHiddenTags.push(tagRowItem);
+        return;
+      }
       const tagWidth = (tagElement === null || tagElement === void 0 ? void 0 : tagElement.offsetWidth) || 0;
       const sumRowWidth = currentRowWidth + tagWidth + gapWidth;
       if (currentRowCount > rowLimit) {
@@ -83,6 +91,16 @@ function TagRowTruncatedInner(_a) {
       }
       if (currentRowCount === rowLimit) {
         if (sumRowWidth + moreButtonWidth > maxWidth) {
+          const isFirstTag = newVisibleTags.length === 0 && currentRowVisibleTagAmount === 0;
+          const firstTagMaxWidth = Math.min(FIRST_TRUNCATED_TAG_WIDTH, maxWidth - moreButtonWidth - gapWidth);
+          if (isFirstTag && firstTagMaxWidth > 0) {
+            newFirstVisibleTagMaxWidth = firstTagMaxWidth;
+            currentRowWidth = firstTagMaxWidth + gapWidth;
+            currentRowVisibleTagAmount++;
+            isFirstTagTruncated = true;
+            newVisibleTags.push(tagRowItem);
+            return;
+          }
           currentRowCount++;
           currentRowVisibleTagAmount = 0;
           newHiddenTags.push(tagRowItem);
@@ -106,7 +124,13 @@ function TagRowTruncatedInner(_a) {
     });
     setVisibleTags(newVisibleTags);
     setHiddenTags(newHiddenTags);
-  }, [items, rowLimit, maxWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
+    setFirstVisibleTagMaxWidth(newHiddenTags.length > 0 ? newFirstVisibleTagMaxWidth : undefined);
+  }, [items, rowLimit, maxWidth, moreButtonWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
+  const getVisibleTagStyle = (_item, index) => index === 0 && firstVisibleTagMaxWidth ? {
+    flex: `0 0 ${firstVisibleTagMaxWidth}px`,
+    width: firstVisibleTagMaxWidth,
+    maxWidth: firstVisibleTagMaxWidth
+  } : undefined;
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
   }, (0, utils_1.extractSupportProps)(rest), {
@@ -123,21 +147,22 @@ function TagRowTruncatedInner(_a) {
       })
     }), (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_1.default.hiddenMoreButton,
-      ref: hiddenMoreButtonWrapperRef,
       children: (0, jsx_runtime_1.jsx)(TagMore_1.TagMore, {
         items: items,
         text: moreButtonLabel,
         size: size,
-        buttonRef: hiddenMoreButtonRef
+        buttonRef: setHiddenMoreButtonElement
       })
     }), (0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.visibleRow,
       "data-size": size,
+      "data-shrink-first-tag": Boolean(firstVisibleTagMaxWidth),
       "data-test-id": constants_1.TAG_ROW_TEST_IDS.visibleTagsWrapper,
       children: [(0, jsx_runtime_1.jsx)(TagList_1.TagList, {
         items: visibleTags,
         size: size,
-        onItemRemove: onItemRemove
+        onItemRemove: onItemRemove,
+        getTagStyle: getVisibleTagStyle
       }), hiddenTags.length > 0 && (0, jsx_runtime_1.jsx)(TagMore_1.TagMore, {
         items: hiddenTags,
         text: moreButtonLabel,

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

@@ -16,8 +16,13 @@
 .visibleRow{
   display:flex;
   flex-wrap:wrap;
+  width:100%;
+  min-width:0;
   max-width:100%;
 }
+.visibleRow[data-shrink-first-tag=true]{
+  flex-wrap:nowrap;
+}
 .visibleRow[data-size=xs]{
   gap:var(--space-tag-row-xs-gap, 4px);
 }

package/dist/esm/helperComponents/TagList/TagList.d.ts

@@ -1,11 +1,13 @@
-import { Ref } from 'react';
+import { type CSSProperties, type Ref } from 'react';
 import { Size, TagRowItemInner } from '../../types';
 type SetTagRef = (item: TagRowItemInner, index: number) => Ref<HTMLDivElement>;
+type GetTagStyle = (item: TagRowItemInner, index: number) => CSSProperties | undefined;
 type TagListProps = {
     items: TagRowItemInner[];
     size?: Size;
     onItemRemove?(item: string): void;
     setTagRef?: SetTagRef;
+    getTagStyle?: GetTagStyle;
 };
-export declare function TagList({ items, size, onItemRemove, setTagRef }: TagListProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagList({ items, size, onItemRemove, setTagRef, getTagStyle }: TagListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/helperComponents/TagList/TagList.js

@@ -2,13 +2,13 @@ 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) {
+function renderTag(size, handleRemoveItem, setRef, getStyle) {
     return function TagRowItem(item, index) {
         var _a;
-        return (_jsx("div", { ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index), className: styles.tagWrapper, children: _jsx(Tag, Object.assign({ size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }, item)) }, (_a = item.id) !== null && _a !== void 0 ? _a : item.label));
+        return (_jsx("div", { ref: setRef === null || setRef === void 0 ? void 0 : setRef(item, index), className: styles.tagWrapper, style: getStyle === null || getStyle === void 0 ? void 0 : getStyle(item, index), children: _jsx(Tag, Object.assign({ size: size, onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item) }, item)) }, (_a = item.id) !== null && _a !== void 0 ? _a : item.label));
     };
 }
-export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef }) {
+export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef, getTagStyle }) {
     const handleRemoveItem = onItemRemove ? (item) => () => onItemRemove(item.label) : undefined;
-    return _jsx(_Fragment, { children: items.map(renderTag(size, handleRemoveItem, setTagRef)) });
+    return _jsx(_Fragment, { children: items.map(renderTag(size, handleRemoveItem, setTagRef, getTagStyle)) });
 }

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

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

package/dist/esm/helperComponents/TagRowTruncated/TagRowTruncated.js

@@ -19,17 +19,19 @@ import { TagMore } from '../TagMore';
 import { useResizeObserver } from './hooks';
 import styles from './styles.module.css';
 import { getGapWidth } from './utils';
+const FIRST_TRUNCATED_TAG_WIDTH = 256;
 function TagRowTruncatedInner(_a) {
     var { items, rowLimit, size, moreButtonLabel = '', className, onItemRemove } = _a, rest = __rest(_a, ["items", "rowLimit", "size", "moreButtonLabel", "className", "onItemRemove"]);
     const [visibleTags, setVisibleTags] = useState([]);
     const [hiddenTags, setHiddenTags] = useState([]);
+    const [firstVisibleTagMaxWidth, setFirstVisibleTagMaxWidth] = useState();
     const hiddenRowElementRef = useRef(null);
-    const hiddenMoreButtonRef = useRef(null);
-    const hiddenMoreButtonWrapperRef = useRef(null);
     const [firstTagElement, setFirstTagElement] = useState(null);
+    const [hiddenMoreButtonElement, setHiddenMoreButtonElement] = useState(null);
     const tagsMapRef = useRef(new Map());
     const { width: maxWidth } = useResizeObserver(hiddenRowElementRef.current);
     const { width: firstVisibleTagWidth } = useResizeObserver(firstTagElement);
+    const { width: moreButtonWidth } = useResizeObserver(hiddenMoreButtonElement);
     function setTagElement(tag, index) {
         return (tagElement) => {
             if (index === 0 && tagElement) {
@@ -45,17 +47,21 @@ function TagRowTruncatedInner(_a) {
     }
     const gapWidth = getGapWidth(hiddenRowElementRef);
     useEffect(() => {
-        var _a;
         if (maxWidth < 1) {
             return;
         }
         const newVisibleTags = [];
         const newHiddenTags = [];
-        const moreButtonWidth = ((_a = hiddenMoreButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        let newFirstVisibleTagMaxWidth;
         let currentRowWidth = 0;
         let currentRowCount = 1;
         let currentRowVisibleTagAmount = 0;
+        let isFirstTagTruncated = false;
         tagsMapRef.current.forEach((tagElement, tagRowItem) => {
+            if (isFirstTagTruncated) {
+                newHiddenTags.push(tagRowItem);
+                return;
+            }
             const tagWidth = (tagElement === null || tagElement === void 0 ? void 0 : tagElement.offsetWidth) || 0;
             const sumRowWidth = currentRowWidth + tagWidth + gapWidth;
             if (currentRowCount > rowLimit) {
@@ -64,6 +70,16 @@ function TagRowTruncatedInner(_a) {
             }
             if (currentRowCount === rowLimit) {
                 if (sumRowWidth + moreButtonWidth > maxWidth) {
+                    const isFirstTag = newVisibleTags.length === 0 && currentRowVisibleTagAmount === 0;
+                    const firstTagMaxWidth = Math.min(FIRST_TRUNCATED_TAG_WIDTH, maxWidth - moreButtonWidth - gapWidth);
+                    if (isFirstTag && firstTagMaxWidth > 0) {
+                        newFirstVisibleTagMaxWidth = firstTagMaxWidth;
+                        currentRowWidth = firstTagMaxWidth + gapWidth;
+                        currentRowVisibleTagAmount++;
+                        isFirstTagTruncated = true;
+                        newVisibleTags.push(tagRowItem);
+                        return;
+                    }
                     currentRowCount++;
                     currentRowVisibleTagAmount = 0;
                     newHiddenTags.push(tagRowItem);
@@ -87,7 +103,11 @@ function TagRowTruncatedInner(_a) {
         });
         setVisibleTags(newVisibleTags);
         setHiddenTags(newHiddenTags);
-    }, [items, rowLimit, maxWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { "data-size": size, children: [_jsx("div", { className: styles.hiddenRow, ref: hiddenRowElementRef, "data-size": size, children: _jsx(TagList, { items: items, size: size, onItemRemove: onItemRemove, setTagRef: setTagElement }) }), _jsx("div", { className: styles.hiddenMoreButton, ref: hiddenMoreButtonWrapperRef, children: _jsx(TagMore, { items: items, text: moreButtonLabel, size: size, buttonRef: hiddenMoreButtonRef }) }), _jsxs("div", { className: styles.visibleRow, "data-size": size, "data-test-id": TAG_ROW_TEST_IDS.visibleTagsWrapper, children: [_jsx(TagList, { items: visibleTags, size: size, onItemRemove: onItemRemove }), hiddenTags.length > 0 && (_jsx(TagMore, { items: hiddenTags, text: moreButtonLabel, size: size, onItemRemove: onItemRemove }))] })] })));
+        setFirstVisibleTagMaxWidth(newHiddenTags.length > 0 ? newFirstVisibleTagMaxWidth : undefined);
+    }, [items, rowLimit, maxWidth, moreButtonWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
+    const getVisibleTagStyle = (_item, index) => index === 0 && firstVisibleTagMaxWidth
+        ? { flex: `0 0 ${firstVisibleTagMaxWidth}px`, width: firstVisibleTagMaxWidth, maxWidth: firstVisibleTagMaxWidth }
+        : undefined;
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { "data-size": size, children: [_jsx("div", { className: styles.hiddenRow, ref: hiddenRowElementRef, "data-size": size, children: _jsx(TagList, { items: items, size: size, onItemRemove: onItemRemove, setTagRef: setTagElement }) }), _jsx("div", { className: styles.hiddenMoreButton, children: _jsx(TagMore, { items: items, text: moreButtonLabel, size: size, buttonRef: setHiddenMoreButtonElement }) }), _jsxs("div", { className: styles.visibleRow, "data-size": size, "data-shrink-first-tag": Boolean(firstVisibleTagMaxWidth), "data-test-id": TAG_ROW_TEST_IDS.visibleTagsWrapper, children: [_jsx(TagList, { items: visibleTags, size: size, onItemRemove: onItemRemove, getTagStyle: getVisibleTagStyle }), hiddenTags.length > 0 && (_jsx(TagMore, { items: hiddenTags, text: moreButtonLabel, size: size, onItemRemove: onItemRemove }))] })] })));
 }
 export const TagRowTruncated = memo(TagRowTruncatedInner);

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

@@ -16,8 +16,13 @@
 .visibleRow{
   display:flex;
   flex-wrap:wrap;
+  width:100%;
+  min-width:0;
   max-width:100%;
 }
+.visibleRow[data-shrink-first-tag=true]{
+  flex-wrap:nowrap;
+}
 .visibleRow[data-size=xs]{
   gap:var(--space-tag-row-xs-gap, 4px);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.15.19",
+  "version": "0.15.20",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,5 +43,5 @@
     "@snack-uikit/utils": "4.0.2",
     "classnames": "2.5.1"
   },
-  "gitHead": "a9f6571146845d828e00206abdedb160980cff97"
+  "gitHead": "3bb1e178fe404fe49aaeb237407549869243b9f4"
 }

package/src/helperComponents/TagList/TagList.tsx

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import { type CSSProperties, type Ref } from 'react';
 
 import { Tag } from '../../components';
 import { SIZE } from '../../constants';
@@ -6,28 +6,40 @@ import { Size, TagRowItemInner } from '../../types';
 import styles from './styles.module.scss';
 
 type SetTagRef = (item: TagRowItemInner, index: number) => Ref<HTMLDivElement>;
+type GetTagStyle = (item: TagRowItemInner, index: number) => CSSProperties | undefined;
 
 type TagListProps = {
   items: TagRowItemInner[];
   size?: Size;
   onItemRemove?(item: string): void;
   setTagRef?: SetTagRef;
+  getTagStyle?: GetTagStyle;
 };
 
 type OnDeleteHandler = () => void;
 
-function renderTag(size: Size, handleRemoveItem?: (item: TagRowItemInner) => OnDeleteHandler, setRef?: SetTagRef) {
+function renderTag(
+  size: Size,
+  handleRemoveItem?: (item: TagRowItemInner) => OnDeleteHandler,
+  setRef?: SetTagRef,
+  getStyle?: GetTagStyle,
+) {
   return function TagRowItem(item: TagRowItemInner, index: number) {
     return (
-      <div key={item.id ?? item.label} ref={setRef?.(item, index)} className={styles.tagWrapper}>
+      <div
+        key={item.id ?? item.label}
+        ref={setRef?.(item, index)}
+        className={styles.tagWrapper}
+        style={getStyle?.(item, index)}
+      >
         <Tag size={size} onDelete={handleRemoveItem?.(item)} {...item} />
       </div>
     );
   };
 }
 
-export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef }: TagListProps) {
+export function TagList({ items, size = SIZE.Xs, onItemRemove, setTagRef, getTagStyle }: TagListProps) {
   const handleRemoveItem = onItemRemove ? (item: TagRowItemInner) => () => onItemRemove(item.label) : undefined;
 
-  return <>{items.map(renderTag(size, handleRemoveItem, setTagRef))}</>;
+  return <>{items.map(renderTag(size, handleRemoveItem, setTagRef, getTagStyle))}</>;
 }

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

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

package/src/helperComponents/TagRowTruncated/TagRowTruncated.tsx

@@ -11,6 +11,8 @@ import { useResizeObserver } from './hooks';
 import styles from './styles.module.scss';
 import { getGapWidth } from './utils';
 
+const FIRST_TRUNCATED_TAG_WIDTH = 256;
+
 type TagRowTruncatedProps = WithSupportProps<{
   items: TagRowItemInner[];
   rowLimit: number;
@@ -31,16 +33,17 @@ function TagRowTruncatedInner({
 }: TagRowTruncatedProps) {
   const [visibleTags, setVisibleTags] = useState<TagRowItemInner[]>([]);
   const [hiddenTags, setHiddenTags] = useState<TagRowItemInner[]>([]);
+  const [firstVisibleTagMaxWidth, setFirstVisibleTagMaxWidth] = useState<number>();
 
   const hiddenRowElementRef = useRef<HTMLDivElement>(null);
-  const hiddenMoreButtonRef = useRef<HTMLButtonElement>(null);
-  const hiddenMoreButtonWrapperRef = useRef<HTMLDivElement>(null);
 
   const [firstTagElement, setFirstTagElement] = useState<HTMLElement | null>(null);
+  const [hiddenMoreButtonElement, setHiddenMoreButtonElement] = useState<HTMLButtonElement | null>(null);
   const tagsMapRef = useRef(new Map<TagRowItemInner, HTMLElement | null>());
 
   const { width: maxWidth } = useResizeObserver(hiddenRowElementRef.current);
   const { width: firstVisibleTagWidth } = useResizeObserver(firstTagElement);
+  const { width: moreButtonWidth } = useResizeObserver(hiddenMoreButtonElement);
 
   function setTagElement(tag: TagRowItemInner, index: number) {
     return (tagElement: HTMLElement | null) => {
@@ -65,17 +68,21 @@ function TagRowTruncatedInner({
 
     const newVisibleTags: TagRowItemInner[] = [];
     const newHiddenTags: TagRowItemInner[] = [];
-
-    const moreButtonWidth = hiddenMoreButtonRef.current?.offsetWidth || 0;
+    let newFirstVisibleTagMaxWidth: number | undefined;
 
     let currentRowWidth = 0;
     let currentRowCount = 1;
     let currentRowVisibleTagAmount = 0;
+    let isFirstTagTruncated = false;
 
     tagsMapRef.current.forEach((tagElement, tagRowItem) => {
+      if (isFirstTagTruncated) {
+        newHiddenTags.push(tagRowItem);
+        return;
+      }
+
       const tagWidth = tagElement?.offsetWidth || 0;
       const sumRowWidth = currentRowWidth + tagWidth + gapWidth;
-
       if (currentRowCount > rowLimit) {
         newHiddenTags.push(tagRowItem);
         return;
@@ -83,6 +90,18 @@ function TagRowTruncatedInner({
 
       if (currentRowCount === rowLimit) {
         if (sumRowWidth + moreButtonWidth > maxWidth) {
+          const isFirstTag = newVisibleTags.length === 0 && currentRowVisibleTagAmount === 0;
+          const firstTagMaxWidth = Math.min(FIRST_TRUNCATED_TAG_WIDTH, maxWidth - moreButtonWidth - gapWidth);
+
+          if (isFirstTag && firstTagMaxWidth > 0) {
+            newFirstVisibleTagMaxWidth = firstTagMaxWidth;
+            currentRowWidth = firstTagMaxWidth + gapWidth;
+            currentRowVisibleTagAmount++;
+            isFirstTagTruncated = true;
+            newVisibleTags.push(tagRowItem);
+            return;
+          }
+
           currentRowCount++;
           currentRowVisibleTagAmount = 0;
           newHiddenTags.push(tagRowItem);
@@ -110,18 +129,29 @@ function TagRowTruncatedInner({
 
     setVisibleTags(newVisibleTags);
     setHiddenTags(newHiddenTags);
-  }, [items, rowLimit, maxWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
+    setFirstVisibleTagMaxWidth(newHiddenTags.length > 0 ? newFirstVisibleTagMaxWidth : undefined);
+  }, [items, rowLimit, maxWidth, moreButtonWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
+
+  const getVisibleTagStyle = (_item: TagRowItemInner, index: number) =>
+    index === 0 && firstVisibleTagMaxWidth
+      ? { flex: `0 0 ${firstVisibleTagMaxWidth}px`, width: firstVisibleTagMaxWidth, maxWidth: firstVisibleTagMaxWidth }
+      : undefined;
 
   return (
     <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)} data-size={size}>
       <div className={styles.hiddenRow} ref={hiddenRowElementRef} data-size={size}>
         <TagList items={items} size={size} onItemRemove={onItemRemove} setTagRef={setTagElement} />
       </div>
-      <div className={styles.hiddenMoreButton} ref={hiddenMoreButtonWrapperRef}>
-        <TagMore items={items} text={moreButtonLabel} size={size} buttonRef={hiddenMoreButtonRef} />
+      <div className={styles.hiddenMoreButton}>
+        <TagMore items={items} text={moreButtonLabel} size={size} buttonRef={setHiddenMoreButtonElement} />
       </div>
-      <div className={styles.visibleRow} data-size={size} data-test-id={TAG_ROW_TEST_IDS.visibleTagsWrapper}>
-        <TagList items={visibleTags} size={size} onItemRemove={onItemRemove} />
+      <div
+        className={styles.visibleRow}
+        data-size={size}
+        data-shrink-first-tag={Boolean(firstVisibleTagMaxWidth)}
+        data-test-id={TAG_ROW_TEST_IDS.visibleTagsWrapper}
+      >
+        <TagList items={visibleTags} size={size} onItemRemove={onItemRemove} getTagStyle={getVisibleTagStyle} />
         {hiddenTags.length > 0 && (
           <TagMore items={hiddenTags} text={moreButtonLabel} size={size} onItemRemove={onItemRemove} />
         )}

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

@@ -22,8 +22,15 @@ $sizes: 'xs', 's';
 .visibleRow {
   display: flex;
   flex-wrap: wrap;
+
+  width: 100%;
+  min-width: 0;
   max-width: 100%;
 
+  &[data-shrink-first-tag='true'] {
+    flex-wrap: nowrap;
+  }
+
   @each $size in $sizes {
     &[data-size=#{$size}] {
       @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-row, $size);