@sustaina/shared-ui 1.29.0 → 1.29.1

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { CSSProperties, ReactNode, SVGProps } from 'react';
+import React__default, { CSSProperties, ReactNode, SVGProps, ComponentProps } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ClassValue } from 'clsx';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
@@ -1283,8 +1283,10 @@ type TruncatedProps = {
     children: ReactNode;
     as?: keyof React__default.JSX.IntrinsicElements;
     style?: CSSProperties;
+    tooltipProps?: Omit<ComponentProps<typeof Tooltip$1>, "open" | "onOpenChange">;
+    tooltipContentProps?: Omit<ComponentProps<typeof TooltipContent$1>, "children">;
 };
-declare const Truncated: ({ children, className, ellipsis, as, style }: TruncatedProps) => react_jsx_runtime.JSX.Element;
+declare const Truncated: ({ children, className, ellipsis, as, style, tooltipProps, tooltipContentProps }: TruncatedProps) => react_jsx_runtime.JSX.Element;
 
 type InputPrimitiveProps = React$1.InputHTMLAttributes<HTMLInputElement>;
 declare const inputVariants: (props?: ({

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { CSSProperties, ReactNode, SVGProps } from 'react';
+import React__default, { CSSProperties, ReactNode, SVGProps, ComponentProps } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ClassValue } from 'clsx';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
@@ -1283,8 +1283,10 @@ type TruncatedProps = {
     children: ReactNode;
     as?: keyof React__default.JSX.IntrinsicElements;
     style?: CSSProperties;
+    tooltipProps?: Omit<ComponentProps<typeof Tooltip$1>, "open" | "onOpenChange">;
+    tooltipContentProps?: Omit<ComponentProps<typeof TooltipContent$1>, "children">;
 };
-declare const Truncated: ({ children, className, ellipsis, as, style }: TruncatedProps) => react_jsx_runtime.JSX.Element;
+declare const Truncated: ({ children, className, ellipsis, as, style, tooltipProps, tooltipContentProps }: TruncatedProps) => react_jsx_runtime.JSX.Element;
 
 type InputPrimitiveProps = React$1.InputHTMLAttributes<HTMLInputElement>;
 declare const inputVariants: (props?: ({

package/dist/index.js

@@ -9824,27 +9824,51 @@ var CropperModal = ({
     }
   );
 };
-var Truncated = ({ children, className, ellipsis = true, as = "p", style }) => {
+var Truncated = ({
+  children,
+  className,
+  ellipsis = true,
+  as = "p",
+  style,
+  tooltipProps,
+  tooltipContentProps
+}) => {
   const elementRef = React4.useRef(null);
   const [open, setOpen] = React4.useState(false);
   const [isTruncated, setIsTruncated] = React4.useState(false);
   const Comp = as;
   const normalizedChildren = typeof children === "string" ? children.replace(/>/g, ">\u200B") : children;
+  const lineClampLines = typeof ellipsis === "number" ? ellipsis : typeof ellipsis === "object" ? ellipsis?.lineClamp ?? 3 : null;
   React4.useEffect(() => {
     const el = elementRef.current;
     if (!el) return;
-    const checkTruncate = debounce(() => {
-      const overflowX = el.scrollWidth > el.clientWidth;
-      const overflowY = el.scrollHeight > el.clientHeight;
-      setIsTruncated(overflowX || overflowY);
-    }, 300);
-    const resizeObserver = new ResizeObserver(checkTruncate);
+    const measure = () => {
+      if (!ellipsis) {
+        setIsTruncated(false);
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const width = el.clientWidth || el.offsetWidth || rect.width;
+      const height = el.clientHeight || el.offsetHeight || rect.height;
+      if (!width || !height) {
+        setIsTruncated(false);
+        return;
+      }
+      const epsilon = 1;
+      const overflowWidth = el.scrollWidth - width > epsilon;
+      const overflowHeight = el.scrollHeight - height > epsilon;
+      setIsTruncated(overflowWidth || overflowHeight);
+    };
+    const resizeObserver = new ResizeObserver(() => requestAnimationFrame(measure));
     resizeObserver.observe(el);
+    const mutationObserver = new MutationObserver(() => measure());
+    mutationObserver.observe(el, { childList: true, subtree: true, characterData: true });
+    requestAnimationFrame(measure);
     return () => {
       resizeObserver.disconnect();
+      mutationObserver.disconnect();
     };
-  }, []);
-  const lineClampLines = typeof ellipsis === "number" ? ellipsis : typeof ellipsis === "object" ? ellipsis.lineClamp ?? 3 : null;
+  }, [children, ellipsis, lineClampLines]);
   const truncationClass = React4.useMemo(() => {
     if (!ellipsis) return "";
     if (typeof ellipsis === "number") return `line-clamp-${ellipsis}`;
@@ -9863,14 +9887,20 @@ var Truncated = ({ children, className, ellipsis = true, as = "p", style }) => {
   }, [lineClampLines, style]);
   const baseContent = /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref: elementRef, className: cn(truncationClass, className), style: clampedStyle, children: normalizedChildren });
   let tooltipContent = normalizedChildren;
-  let tooltipSide = "top";
   if (typeof ellipsis === "object") {
     tooltipContent = ellipsis?.content ?? normalizedChildren;
-    tooltipSide = ellipsis?.side ?? "top";
   }
+  const {
+    className: tooltipContentClassName,
+    arrowClassName: tooltipArrowClassName,
+    side: tooltipContentSide,
+    ...tooltipContentRest
+  } = tooltipContentProps ?? {};
+  const tooltipSide = (typeof ellipsis === "object" ? ellipsis?.side : void 0) ?? tooltipContentSide ?? "top";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Tooltip2,
     {
+      ...tooltipProps,
       open,
       onOpenChange: (open2) => {
         setOpen(isTruncated && open2);
@@ -9881,8 +9911,12 @@ var Truncated = ({ children, className, ellipsis = true, as = "p", style }) => {
           TooltipContent2,
           {
             side: tooltipSide,
-            className: cn("text-white bg-[#8B8B8B] max-w-md wrap-break-word shadow-lg"),
-            arrowClassName: "bg-[#8B8B8B] fill-[#8B8B8B]",
+            className: cn(
+              "text-white bg-[#8B8B8B] max-w-xs sm:max-w-md wrap-break-word shadow-lg",
+              tooltipContentClassName
+            ),
+            arrowClassName: cn("bg-[#8B8B8B] fill-[#8B8B8B]", tooltipArrowClassName),
+            ...tooltipContentRest,
             children: tooltipContent
           }
         )