@televet/kibble-ui 5.0.27 → 5.0.28-jc.0

package/dist/chunks/withTruncation-B2GhwmHG.js

@@ -1,92 +0,0 @@
-import { j as a } from "./jsx-runtime-C5mzlN2N.js";
-import k, { useState as y, useRef as m, useCallback as j, useEffect as O, useMemo as R } from "react";
-import { B as h } from "./index-9BerxEcw.js";
-import { T as _ } from "./tooltip.component-CHohp2qn.js";
-const w = (e) => {
-  if (typeof e == "string")
-    return e;
-  if (typeof e == "number" || typeof e == "boolean")
-    return String(e);
-  if (k.isValidElement(e)) {
-    const r = e;
-    if (r.props.children)
-      return w(r.props.children);
-  }
-  return Array.isArray(e) ? e.map(w).join(" ") : "";
-}, B = (e) => {
-  function r({
-    truncated: l = !1,
-    noOfLines: d = 1,
-    children: i,
-    tooltipProps: u,
-    ["data-testid"]: o = "kibble-truncated-text",
-    ...x
-  }) {
-    const [p, b] = y(!1), n = m(null), T = m(null), s = m(null), c = j(() => {
-      if (!n.current) return;
-      const t = n.current.children[0];
-      if (!t) return;
-      T.current = t;
-      const f = t.scrollHeight > t.clientHeight;
-      b(f);
-    }, []);
-    O(() => {
-      if (!l) return;
-      let t;
-      const f = () => {
-        window.clearTimeout(t), t = window.setTimeout(c, 100);
-      }, g = window.setTimeout(c, 50);
-      return n.current && (s.current = new ResizeObserver(() => {
-        f();
-      }), s.current.observe(n.current)), () => {
-        window.clearTimeout(t), window.clearTimeout(g), s.current && s.current.disconnect();
-      };
-    }, [l, c, i, d]);
-    const v = R(
-      () => u?.label || w(i),
-      [i, u?.label]
-    );
-    return l ? /* @__PURE__ */ a.jsx(
-      _,
-      {
-        ...u,
-        label: v,
-        disabled: !p,
-        "data-testid": `${o}-tooltip`,
-        children: /* @__PURE__ */ a.jsx(
-          h,
-          {
-            ref: n,
-            width: "100%",
-            minWidth: 0,
-            overflow: "hidden",
-            flex: "1 1 auto",
-            className: "TruncatedText__Wrapper",
-            "data-testid": `${o}-wrapper`,
-            children: /* @__PURE__ */ a.jsx(
-              e,
-              {
-                className: "TruncatedText__TextContent",
-                "data-testid": `${o}-content`,
-                css: {
-                  display: "-webkit-box",
-                  WebkitBoxOrient: "vertical",
-                  WebkitLineClamp: d,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis"
-                },
-                ...x,
-                children: i
-              }
-            )
-          }
-        )
-      }
-    ) : /* @__PURE__ */ a.jsx(e, { ...x, "data-testid": o, children: i });
-  }
-  return r.displayName = `withTruncation(${e.displayName || e.name})`, r;
-};
-export {
-  B as w
-};
-//# sourceMappingURL=withTruncation-B2GhwmHG.js.map

package/dist/chunks/withTruncation-B2GhwmHG.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"withTruncation-B2GhwmHG.js","sources":["../../src/hocs/withTruncation.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Tooltip, TooltipProps } from 'components/Tooltip';\n\nexport interface WithTruncationProps {\n  /** If true, the text will be truncated. */\n  truncated?: boolean;\n  /** The number of lines to truncate the text to. */\n  noOfLines?: number;\n  /** Props to customize the tooltip. See `Tooltip` for more information. */\n  tooltipProps?: Omit<TooltipProps, 'disabled'>;\n  /** The children to be displayed inside the truncated text. */\n  children?: ReactNode | string;\n  /** Data test id for the truncated text.\n   * @default kibble-truncated-text\n   */\n  'data-testid'?: string;\n}\n\n/**\n * Helper function to extract text content from ReactNode\n */\nconst getTextFromChildren = (children: ReactNode | string): string => {\n  if (typeof children === 'string') {\n    return children;\n  }\n  if (typeof children === 'number' || typeof children === 'boolean') {\n    return String(children);\n  }\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<{ children?: ReactNode }>;\n    if (element.props.children) {\n      return getTextFromChildren(element.props.children);\n    }\n  }\n  if (Array.isArray(children)) {\n    return children.map(getTextFromChildren).join(' ');\n  }\n  return '';\n};\n\nexport const withTruncation = <P extends WithTruncationProps>(Component: React.ComponentType<P>): React.FC<P> => {\n  function WithTruncation({\n    truncated = false,\n    noOfLines = 1,\n    children,\n    tooltipProps,\n    ['data-testid']: dataTestId = 'kibble-truncated-text',\n    ...rest\n  }: WithTruncationProps): React.JSX.Element {\n    const [isTextOverFlowing, setIsTextOverFlowing] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const textElementRef = useRef<HTMLElement | null>(null);\n    const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n    const checkOverflow = useCallback(() => {\n      if (!containerRef.current) return;\n\n      // Get the actual text element (first child)\n      const textElement = containerRef.current.children[0] as HTMLElement;\n      if (!textElement) return;\n\n      textElementRef.current = textElement;\n\n      // Check if text is overflowing\n      const isOverflowing = textElement.scrollHeight > textElement.clientHeight;\n      setIsTextOverFlowing(isOverflowing);\n    }, []);\n\n    useEffect(() => {\n      if (!truncated) return;\n\n      let timeoutId: number;\n\n      const debouncedCheck = (): void => {\n        window.clearTimeout(timeoutId);\n        timeoutId = window.setTimeout(checkOverflow, 100);\n      };\n\n      // Initial check with a slight delay to ensure rendering is complete\n      const initialCheckTimeout = window.setTimeout(checkOverflow, 50);\n\n      // Observe the container for resize events\n      if (containerRef.current) {\n        resizeObserverRef.current = new ResizeObserver(() => {\n          debouncedCheck();\n        });\n        resizeObserverRef.current.observe(containerRef.current);\n      }\n\n      return (): void => {\n        window.clearTimeout(timeoutId);\n        window.clearTimeout(initialCheckTimeout);\n        if (resizeObserverRef.current) {\n          resizeObserverRef.current.disconnect();\n        }\n      };\n    }, [truncated, checkOverflow, children, noOfLines]);\n\n    const tooltipLabel = useMemo(\n      () => tooltipProps?.label || getTextFromChildren(children),\n      [children, tooltipProps?.label],\n    );\n\n    if (!truncated) {\n      return (\n        <Component {...(rest as P)} data-testid={dataTestId}>\n          {children}\n        </Component>\n      );\n    }\n\n    return (\n      <Tooltip\n        {...tooltipProps}\n        label={tooltipLabel}\n        disabled={!isTextOverFlowing}\n        data-testid={`${dataTestId}-tooltip`}\n      >\n        <Box\n          ref={containerRef}\n          width=\"100%\"\n          minWidth={0}\n          overflow=\"hidden\"\n          flex=\"1 1 auto\"\n          className=\"TruncatedText__Wrapper\"\n          data-testid={`${dataTestId}-wrapper`}\n        >\n          <Component\n            className=\"TruncatedText__TextContent\"\n            data-testid={`${dataTestId}-content`}\n            css={{\n              display: '-webkit-box',\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: noOfLines,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n            {...(rest as P)}\n          >\n            {children}\n          </Component>\n        </Box>\n      </Tooltip>\n    );\n  }\n\n  WithTruncation.displayName = `withTruncation(${Component.displayName || Component.name})`;\n  return WithTruncation;\n};\n"],"names":["getTextFromChildren","children","React","element","withTruncation","Component","WithTruncation","truncated","noOfLines","tooltipProps","dataTestId","rest","isTextOverFlowing","setIsTextOverFlowing","useState","containerRef","useRef","textElementRef","resizeObserverRef","checkOverflow","useCallback","textElement","isOverflowing","useEffect","timeoutId","debouncedCheck","initialCheckTimeout","tooltipLabel","useMemo","jsx","Tooltip","Box"],"mappings":"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"}

package/dist/chunks/withTruncation-pzYbtqYw.js

@@ -1,2 +0,0 @@
-"use strict";const c=require("./jsx-runtime-BjDatQAs.js"),r=require("react"),j=require("./index-BQRnVsAg.js"),_=require("./tooltip.component-DBw-hAPU.js"),g=e=>e&&e.__esModule?e:{default:e},k=g(r),d=e=>{if(typeof e=="string")return e;if(typeof e=="number"||typeof e=="boolean")return String(e);if(k.default.isValidElement(e)){const n=e;if(n.props.children)return d(n.props.children)}return Array.isArray(e)?e.map(d).join(" "):""},y=e=>{function n({truncated:l=!1,noOfLines:m=1,children:i,tooltipProps:a,["data-testid"]:o="kibble-truncated-text",...w}){const[p,b]=r.useState(!1),s=r.useRef(null),T=r.useRef(null),u=r.useRef(null),f=r.useCallback(()=>{if(!s.current)return;const t=s.current.children[0];if(!t)return;T.current=t;const x=t.scrollHeight>t.clientHeight;b(x)},[]);r.useEffect(()=>{if(!l)return;let t;const x=()=>{window.clearTimeout(t),t=window.setTimeout(f,100)},v=window.setTimeout(f,50);return s.current&&(u.current=new ResizeObserver(()=>{x()}),u.current.observe(s.current)),()=>{window.clearTimeout(t),window.clearTimeout(v),u.current&&u.current.disconnect()}},[l,f,i,m]);const R=r.useMemo(()=>a?.label||d(i),[i,a?.label]);return l?c.jsxRuntimeExports.jsx(_.Tooltip,{...a,label:R,disabled:!p,"data-testid":`${o}-tooltip`,children:c.jsxRuntimeExports.jsx(j.Box,{ref:s,width:"100%",minWidth:0,overflow:"hidden",flex:"1 1 auto",className:"TruncatedText__Wrapper","data-testid":`${o}-wrapper`,children:c.jsxRuntimeExports.jsx(e,{className:"TruncatedText__TextContent","data-testid":`${o}-content`,css:{display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:m,overflow:"hidden",textOverflow:"ellipsis"},...w,children:i})})}):c.jsxRuntimeExports.jsx(e,{...w,"data-testid":o,children:i})}return n.displayName=`withTruncation(${e.displayName||e.name})`,n};exports.withTruncation=y;
-//# sourceMappingURL=withTruncation-pzYbtqYw.js.map