@snack-uikit/tag 0.9.11 → 0.9.12-preview-1f246c4a.0

package/dist/cjs/components/Tag/Tag.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.APPEARANCE = void 0;
+exports.Tag = Tag;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const icons_1 = require("@snack-uikit/icons");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+Object.defineProperty(exports, "APPEARANCE", {
+  enumerable: true,
+  get: function () {
+    return constants_1.APPEARANCE;
+  }
+});
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault({});
+function Tag(_a) {
+  var {
+      label,
+      size = constants_1.SIZE.Xs,
+      appearance = constants_1.APPEARANCE.Neutral,
+      onDelete,
+      className,
+      tabIndex
+    } = _a,
+    rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
+  return (0, jsx_runtime_1.jsxs)("span", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
+    className: (0, classnames_1.default)(styles_module_scss_1.default.tag, className),
+    "data-size": size,
+    "data-appearance": appearance,
+    "data-removable": Boolean(onDelete),
+    children: [(0, jsx_runtime_1.jsx)("span", {
+      title: label,
+      className: styles_module_scss_1.default.label,
+      children: label
+    }), onDelete && (0, jsx_runtime_1.jsx)("button", {
+      type: 'button',
+      className: styles_module_scss_1.default.tagButton,
+      onClick: onDelete,
+      "data-test-id": 'tag-remove-button',
+      tabIndex: tabIndex,
+      children: size === constants_1.SIZE.Xs ? (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {
+        size: constants_2.ICON_SIZE[size],
+        className: styles_module_scss_1.default.icon
+      }) : (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {
+        size: constants_2.ICON_SIZE[size],
+        className: styles_module_scss_1.default.icon
+      })
+    })]
+  }));
+}

package/dist/cjs/components/Tag/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_SIZE = void 0;
+const constants_1 = require("../../constants");
+exports.ICON_SIZE = {
+  [constants_1.SIZE.Xs]: 16,
+  [constants_1.SIZE.S]: 24
+};

package/dist/cjs/components/Tag/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Tag"), exports);

package/dist/cjs/components/TagRow/TagRow.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const utils_1 = require("./utils");
+function TagRowInner(_a) {
+  var {
+      items,
+      rowLimit,
+      size = constants_1.SIZE.Xs
+    } = _a,
+    props = __rest(_a, ["items", "rowLimit", "size"]);
+  const coloredItems = (0, react_1.useMemo)(() => items.map(utils_1.mapTagRowItem), [items]);
+  if (rowLimit) {
+    return (0, jsx_runtime_1.jsx)(helperComponents_1.TagRowTruncated, Object.assign({
+      items: coloredItems,
+      rowLimit: rowLimit,
+      size: size
+    }, props));
+  }
+  return (0, jsx_runtime_1.jsx)(helperComponents_1.TagRowSimple, Object.assign({
+    items: coloredItems,
+    size: size
+  }, props));
+}
+exports.TagRow = (0, react_1.memo)(TagRowInner);

package/dist/cjs/components/TagRow/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TAG_ROW_TEST_IDS = void 0;
+exports.TAG_ROW_TEST_IDS = {
+  moreButton: 'tag-row__more-button',
+  visibleTagsWrapper: 'tag-row__visible-row',
+  droplistTagsWrapper: 'tag-row__droplist-contents'
+};

package/dist/cjs/components/TagRow/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TagRow"), exports);

package/dist/cjs/components/TagRow/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapTagRowItem = void 0;
+const constants_1 = require("../../constants");
+const mapTagRowItem = _ref => {
+  let {
+    label,
+    appearance
+  } = _ref;
+  if (appearance) {
+    return {
+      label,
+      appearance
+    };
+  }
+  return {
+    label,
+    appearance: constants_1.APPEARANCE.Neutral
+  };
+};
+exports.mapTagRowItem = mapTagRowItem;

package/dist/cjs/components/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Tag"), exports);
+__exportStar(require("./TagRow"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE = exports.APPEARANCE = void 0;
+exports.APPEARANCE = {
+  Neutral: 'neutral',
+  Primary: 'primary',
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink'
+};
+exports.SIZE = {
+  Xs: 'xs',
+  S: 's'
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagList = TagList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("../../components");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault({});
+function renderTag(size, handleRemoveItem, setRef) {
+  return function TagRowItem(item, index) {
+    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,
+      children: (0, jsx_runtime_1.jsx)(components_1.Tag, {
+        label: item.label,
+        appearance: item.appearance,
+        size: size,
+        onDelete: handleRemoveItem === null || handleRemoveItem === void 0 ? void 0 : handleRemoveItem(item)
+      })
+    }, item.label);
+  };
+}
+function TagList(_ref) {
+  let {
+    items,
+    size = constants_1.SIZE.Xs,
+    onItemRemove,
+    setTagRef
+  } = _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))
+  });
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TagList"), exports);

package/dist/cjs/helperComponents/TagMore/TagMore.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagMore = TagMore;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const scroll_1 = require("@snack-uikit/scroll");
+const constants_1 = require("../../components/TagRow/constants");
+const constants_2 = require("../../constants");
+const TagRowSimple_1 = require("../TagRowSimple");
+const styles_module_scss_1 = __importDefault({});
+function TagMore(_ref) {
+  let {
+    items,
+    text = '',
+    size = constants_2.SIZE.Xs,
+    buttonRef,
+    onItemRemove
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
+    placement: 'bottom-end',
+    trigger: 'hoverAndFocusVisible',
+    triggerClassName: styles_module_scss_1.default.triggerClassName,
+    content: (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.tagRowDroplistContainer,
+      "data-size": size,
+      children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
+        className: styles_module_scss_1.default.tagRowDroplistScroll,
+        size: 's',
+        barHideStrategy: 'move',
+        children: (0, jsx_runtime_1.jsx)(TagRowSimple_1.TagRowSimple, {
+          items: items,
+          size: size,
+          onItemRemove: onItemRemove,
+          "data-test-id": constants_1.TAG_ROW_TEST_IDS.droplistTagsWrapper
+        })
+      })
+    }),
+    children: (0, jsx_runtime_1.jsx)("button", {
+      type: 'button',
+      className: styles_module_scss_1.default.button,
+      ref: buttonRef,
+      "data-size": size,
+      "data-test-id": constants_1.TAG_ROW_TEST_IDS.moreButton,
+      children: `${text}${items.length}`
+    })
+  });
+}

package/dist/cjs/helperComponents/TagMore/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TagMore"), exports);

package/dist/cjs/helperComponents/TagRowSimple/TagRowSimple.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagRowSimple = TagRowSimple;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const TagList_1 = require("../TagList");
+const styles_module_scss_1 = __importDefault({});
+function TagRowSimple(_a) {
+  var {
+      items,
+      size,
+      onItemRemove,
+      setTagRef,
+      className
+    } = _a,
+    rest = __rest(_a, ["items", "size", "onItemRemove", "setTagRef", "className"]);
+  return (0, jsx_runtime_1.jsx)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.tagRowSimpleWrapper, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-size": size,
+    children: (0, jsx_runtime_1.jsx)(TagList_1.TagList, {
+      items: items,
+      size: size,
+      onItemRemove: onItemRemove,
+      setTagRef: setTagRef
+    })
+  }));
+}

package/dist/cjs/helperComponents/TagRowSimple/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./TagRowSimple"), exports);

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

@@ -0,0 +1,150 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagRowTruncated = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../components/TagRow/constants");
+const TagList_1 = require("../TagList");
+const TagMore_1 = require("../TagMore");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault({});
+const utils_2 = require("./utils");
+function TagRowTruncatedInner(_a) {
+  var {
+      items,
+      rowLimit,
+      size,
+      moreButtonLabel = '',
+      className,
+      onItemRemove
+    } = _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 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 tagsMapRef = (0, react_1.useRef)(new Map());
+  const {
+    width: maxWidth
+  } = (0, hooks_1.useResizeObserver)(hiddenRowElementRef.current);
+  const {
+    width: firstVisibleTagWidth
+  } = (0, hooks_1.useResizeObserver)(firstTagElement);
+  function setTagElement(tag, index) {
+    return tagElement => {
+      if (index === 0 && tagElement) {
+        setFirstTagElement(tagElement);
+      }
+      if (tagElement === null) {
+        tagsMapRef.current.delete(tag);
+      } else {
+        tagsMapRef.current.set(tag, tagElement);
+      }
+    };
+  }
+  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 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;
+      if (currentRowCount > rowLimit) {
+        newHiddenTags.push(tagRowItem);
+        return;
+      }
+      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 = currentRowVisibleTagAmount ? tagWidth + gapWidth : 0;
+        currentRowCount++;
+        currentRowVisibleTagAmount = 0;
+        newVisibleTags.push(tagRowItem);
+        return;
+      }
+      currentRowVisibleTagAmount++;
+      currentRowWidth = sumRowWidth;
+      newVisibleTags.push(tagRowItem);
+    });
+    setVisibleTags(newVisibleTags);
+    setHiddenTags(newHiddenTags);
+  }, [items, rowLimit, maxWidth, onItemRemove, gapWidth, firstVisibleTagWidth]);
+  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), {
+    "data-size": size,
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.hiddenRow,
+      ref: hiddenRowElementRef,
+      "data-size": size,
+      children: (0, jsx_runtime_1.jsx)(TagList_1.TagList, {
+        items: items,
+        size: size,
+        onItemRemove: onItemRemove,
+        setTagRef: setTagElement
+      })
+    }), (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
+      })
+    }), (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.visibleRow,
+      "data-size": size,
+      "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
+      }), hiddenTags.length > 0 && (0, jsx_runtime_1.jsx)(TagMore_1.TagMore, {
+        items: hiddenTags,
+        text: moreButtonLabel,
+        size: size,
+        onItemRemove: onItemRemove
+      })]
+    })]
+  }));
+}
+exports.TagRowTruncated = (0, react_1.memo)(TagRowTruncatedInner);

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeObserver = void 0;
+const react_1 = require("react");
+const useResizeObserver = element => {
+  const [width, setWidth] = (0, react_1.useState)(0);
+  (0, react_1.useEffect)(() => {
+    if (!element) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      if (element.offsetWidth !== width) {
+        setWidth(element.offsetWidth);
+      }
+    });
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+  }, [element, width]);
+  return {
+    width
+  };
+};
+exports.useResizeObserver = useResizeObserver;