@julseb-lib/react 1.0.46 → 1.0.48

package/dist/index.cjs

@@ -2499,48 +2499,75 @@ var usePagination = ({
 
 // src/lib/hooks/useTextLineCount.tsx
 var import_react14 = require("react");
-var useTextLineCount = (text, containerWidth, fontSize = 16, fontFamily = "lato") => {
-  const [lineCount, setLineCount] = (0, import_react14.useState)(1);
-  const canvasRef = (0, import_react14.useRef)(null);
+var useTextLineCount = (text, fontSize = 16) => {
+  const [visualLines, setVisualLines] = (0, import_react14.useState)(1);
+  const elementRef = (0, import_react14.useRef)(
+    null
+  );
   const measureLines = (0, import_react14.useCallback)(() => {
-    if (!canvasRef.current) {
-      canvasRef.current = document.createElement("canvas");
+    const element = elementRef.current;
+    if (!element || !text) {
+      setVisualLines(1);
+      return;
     }
-    const canvas = canvasRef.current;
-    const context = canvas.getContext("2d");
-    if (!context || !text || containerWidth <= 0) {
-      setLineCount(1);
+    const computedStyle = getComputedStyle(element);
+    const paddingLeft = parseInt(computedStyle.paddingLeft) || 0;
+    const paddingRight = parseInt(computedStyle.paddingRight) || 0;
+    const borderLeft = parseInt(computedStyle.borderLeftWidth) || 0;
+    const borderRight = parseInt(computedStyle.borderRightWidth) || 0;
+    const actualWidth = element.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight;
+    if (actualWidth <= 0) {
+      setVisualLines(1);
       return;
     }
-    context.font = `${fontSize}px ${fontFamily}`;
-    const lines = text.split("\n");
-    let totalLines = 0;
-    lines.forEach((line) => {
-      if (line.length === 0) {
-        totalLines += 1;
-        return;
-      }
-      const words = line.split(" ");
-      let currentLine = "";
-      let linesForThisSegment = 1;
-      for (const word of words) {
-        const testLine = currentLine ? `${currentLine} ${word}` : word;
-        const testWidth = context.measureText(testLine).width;
-        if (testWidth > containerWidth && currentLine) {
-          linesForThisSegment++;
-          currentLine = word;
-        } else {
-          currentLine = testLine;
-        }
-      }
-      totalLines += linesForThisSegment;
-    });
-    setLineCount(Math.max(1, totalLines));
-  }, [text, containerWidth, fontSize, fontFamily]);
+    try {
+      const hiddenDiv = document.createElement("div");
+      hiddenDiv.style.position = "absolute";
+      hiddenDiv.style.visibility = "hidden";
+      hiddenDiv.style.height = "auto";
+      hiddenDiv.style.width = `${actualWidth}px`;
+      hiddenDiv.style.fontSize = computedStyle.fontSize || `${fontSize}px`;
+      hiddenDiv.style.fontFamily = computedStyle.fontFamily || "system-ui";
+      hiddenDiv.style.lineHeight = computedStyle.lineHeight || "1.2";
+      hiddenDiv.style.wordWrap = "break-word";
+      hiddenDiv.style.whiteSpace = "pre-wrap";
+      hiddenDiv.style.padding = "0";
+      hiddenDiv.style.margin = "0";
+      hiddenDiv.style.border = "none";
+      document.body.appendChild(hiddenDiv);
+      hiddenDiv.textContent = text;
+      const elementHeight = hiddenDiv.offsetHeight;
+      const lineHeight = parseInt(getComputedStyle(hiddenDiv).lineHeight) || fontSize * 1.2;
+      const calculatedLines = Math.max(
+        1,
+        Math.round(elementHeight / lineHeight)
+      );
+      document.body.removeChild(hiddenDiv);
+      setVisualLines(calculatedLines);
+    } catch (error) {
+      console.warn("Element line count measurement failed:", error);
+      setVisualLines(text.split("\n").length);
+    }
+  }, [text, fontSize]);
   (0, import_react14.useEffect)(() => {
-    measureLines();
+    const timer = setTimeout(measureLines, 50);
+    return () => clearTimeout(timer);
   }, [measureLines]);
-  return lineCount;
+  (0, import_react14.useEffect)(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const resizeObserver = new ResizeObserver(() => {
+      measureLines();
+    });
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [measureLines]);
+  return {
+    visualLines,
+    elementRef
+  };
 };
 
 // src/lib/hooks/useTouchScreen.tsx
@@ -69962,9 +69989,9 @@ var PageLayout = ({
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime370.jsxs)(import_jsx_runtime370.Fragment, { children: [
     meta && /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Meta, { ...meta }),
-    (0, import_react118.isValidElement)(header) ? header : /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Header, { ...header }),
+    header && ((0, import_react118.isValidElement)(header) ? header : /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Header, { ...header })),
     !noWrapper ? /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Wrapper, { ...wrapperProps, children: !noMain ? /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Main, { ...mainProps, children }) : children }) : children,
-    (0, import_react118.isValidElement)(footer) ? footer : /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Footer, { ...footer })
+    footer && ((0, import_react118.isValidElement)(footer) ? footer : /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Footer, { ...footer }))
   ] });
 };