lecom-ui 5.2.98 → 5.3.0

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
     }
   ));
@@ -71,14 +71,10 @@ function useTagVisibility(ref, value) {
       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)
@@ -101,23 +97,18 @@ function useTagVisibility(ref, value) {
   }, [ref, calculateVisibleTags, value.length]);
   React.useLayoutEffect(() => {
     const calculateWhenVisible = () => {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          calculateMaxVisible();
-        });
-      });
+      requestAnimationFrame(() => requestAnimationFrame(calculateMaxVisible));
     };
     const observer = new IntersectionObserver((entries) => {
-      if (entries.some((entry) => entry.isIntersecting)) {
-        calculateWhenVisible();
-      }
-    });
-    const resizeObserver = new ResizeObserver(() => {
-      calculateMaxVisible();
+      if (entries.some((entry) => entry.isIntersecting)) calculateWhenVisible();
     });
+    const resizeObserver = new ResizeObserver(calculateMaxVisible);
     if (ref.current) {
       observer.observe(ref.current);
       resizeObserver.observe(ref.current);
+      if (ref.current.offsetParent !== null) {
+        calculateWhenVisible();
+      }
     }
     return () => {
       observer.disconnect();
@@ -125,11 +116,12 @@ function useTagVisibility(ref, value) {
     };
   }, [value, calculateMaxVisible, ref]);
   React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      calculateMaxVisible();
-    }, 150);
+    const timeout = setTimeout(calculateMaxVisible, 150);
     return () => clearTimeout(timeout);
   }, [value.length, calculateMaxVisible]);
+  React.useLayoutEffect(() => {
+    calculateMaxVisible();
+  }, [value.length, calculateMaxVisible]);
   return { maxVisibleCount, hiddenCount };
 }
 function TagInput(props) {
@@ -164,18 +156,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);
       }
@@ -191,7 +178,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,
       {
@@ -201,7 +188,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.98",
+  "version": "5.3.0",
   "license": "MIT",
   "type": "module",
   "module": "dist/index.js",