lecom-ui 5.2.97 → 5.2.99

package/dist/components/TagInput/TagInput.js

@@ -40,7 +40,7 @@ function HiddenCountTag({
     {
       className: "w-4 h-4 cursor-pointer",
       onClick: handleRemove,
-      "aria-label": `Remover tag oculta`,
+      "aria-label": "Remover tag oculta",
       tabIndex: 0
     }
   ));
@@ -64,21 +64,17 @@ function useTagVisibility(ref, value) {
         (a, b) => a - b
       );
       if (offsetTops.length <= 1) {
-        return totalTags > 6 ? { visibleCount: 5, hiddenCount: totalTags - 5 } : { visibleCount: totalTags, hiddenCount: 0 };
+        return { visibleCount: totalTags, hiddenCount: 0 };
       }
       const firstLineTop = offsetTops[0];
       const secondLineTop = offsetTops[1];
       let firstLineCount = 0;
       let secondLineCount = 0;
       for (const child of children) {
-        if (child.offsetTop === firstLineTop) {
-          firstLineCount++;
-        } else if (child.offsetTop === secondLineTop) {
-          secondLineCount++;
-        }
+        if (child.offsetTop === firstLineTop) firstLineCount++;
+        else if (child.offsetTop === secondLineTop) secondLineCount++;
       }
-      const maxSecondLineVisible = Math.min(secondLineCount, 2);
-      const visibleCount = firstLineCount + maxSecondLineVisible;
+      const visibleCount = firstLineCount + secondLineCount;
       return {
         visibleCount,
         hiddenCount: Math.max(totalTags - visibleCount, 0)
@@ -100,25 +96,25 @@ function useTagVisibility(ref, value) {
     setHiddenCount(newHiddenCount);
   }, [ref, calculateVisibleTags, value.length]);
   React.useLayoutEffect(() => {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        calculateMaxVisible();
-      });
-    });
-    const resizeObserver = new ResizeObserver(() => {
-      calculateMaxVisible();
+    const calculateWhenVisible = () => {
+      requestAnimationFrame(() => requestAnimationFrame(calculateMaxVisible));
+    };
+    calculateWhenVisible();
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) calculateWhenVisible();
     });
+    const resizeObserver = new ResizeObserver(calculateMaxVisible);
     if (ref.current) {
+      observer.observe(ref.current);
       resizeObserver.observe(ref.current);
     }
     return () => {
+      observer.disconnect();
       resizeObserver.disconnect();
     };
   }, [value, calculateMaxVisible, ref]);
   React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      calculateMaxVisible();
-    }, 150);
+    const timeout = setTimeout(calculateMaxVisible, 150);
     return () => clearTimeout(timeout);
   }, [value.length, calculateMaxVisible]);
   return { maxVisibleCount, hiddenCount };
@@ -155,18 +151,13 @@ function TagInput(props) {
     }),
     [disabled, actualHiddenCount]
   );
-  const showPlaceholder = value.length === 0;
-  const showHiddenCount = actualHiddenCount > 0;
   const handleRemove = React.useCallback(
-    (valueToRemove) => {
-      onRemove(valueToRemove);
-    },
+    (valueToRemove) => onRemove(valueToRemove),
     [onRemove]
   );
   const handleRemoveHidden = React.useCallback(() => {
     if (value.length > visibleCount) {
-      const lastVisibleIndex = visibleCount;
-      const tagToRemove = value[lastVisibleIndex];
+      const tagToRemove = value[visibleCount];
       if (tagToRemove) {
         onRemove(tagToRemove.value);
       }
@@ -182,7 +173,7 @@ function TagInput(props) {
       style: containerStyles,
       ...restProps
     },
-    showPlaceholder && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-400" }, placeholder),
+    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-400" }, placeholder),
     displayTags.map((item) => /* @__PURE__ */ React.createElement(
       TagItem,
       {
@@ -192,7 +183,7 @@ function TagInput(props) {
         readOnly
       }
     )),
-    showHiddenCount && /* @__PURE__ */ React.createElement(
+    actualHiddenCount > 0 && /* @__PURE__ */ React.createElement(
       HiddenCountTag,
       {
         count: actualHiddenCount,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lecom-ui",
-  "version": "5.2.97",
+  "version": "5.2.99",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",