@bioturing/components 0.36.2 → 0.37.1

package/dist/components/modal/Modal.js

@@ -1,60 +1,60 @@
 "use client";
-import { jsx as e, jsxs as a, Fragment as T } from "react/jsx-runtime";
-import ue from "antd/es/modal";
-import { XIcon as pe } from "@bioturing/assets";
-import { useState as H, useRef as he, useCallback as ye, useEffect as be } from "react";
-import { ModalContextProvider as ge } from "antd/es/modal/context";
-import R from "antd/es/modal/components/NormalCancelBtn";
-import L from "antd/es/modal/components/NormalOkBtn";
-import { getConfirmLocale as ve } from "antd/es/modal/locale";
-import { useLocale as Ce } from "antd/es/locale";
-import { ModalSize as c } from "./constants.js";
+import { jsx as o, jsxs as c, Fragment as H } from "react/jsx-runtime";
+import pe from "antd/es/modal";
+import { XIcon as he } from "@bioturing/assets";
+import { useState as R, useRef as ye, useCallback as be, useEffect as Ce } from "react";
+import { ModalContextProvider as ve } from "antd/es/modal/context";
+import j from "antd/es/modal/components/NormalCancelBtn";
+import E from "antd/es/modal/components/NormalOkBtn";
+import { getConfirmLocale as ge } from "antd/es/modal/locale";
+import { useLocale as ke } from "antd/es/locale";
+import { ModalSize as m } from "./constants.js";
 import { Stack as f } from "../stack/index.js";
-import { Truncate as ke } from "../truncate/component.js";
-import { IconButton as we } from "../icon-button/component.js";
-import { useCls as xe } from "../utils/antdUtils.js";
-import { useTheme as Oe } from "../theme-provider/context/themeStore.js";
-import { clsx as ze } from "../utils/cn.js";
-const Ge = ({
+import { Truncate as we } from "../truncate/component.js";
+import { IconButton as xe } from "../icon-button/component.js";
+import { useCls as Oe } from "../utils/antdUtils.js";
+import { useTheme as ze } from "../theme-provider/context/themeStore.js";
+import { clsx as Be } from "../utils/cn.js";
+const Je = ({
   open: u,
   closeIcon: p,
-  children: j,
-  size: E,
+  children: F,
+  size: L,
   footer: h,
-  width: F,
-  style: P,
+  width: P,
+  style: W,
   styles: y,
-  classNames: W,
-  okButtonProps: $,
-  cancelButtonProps: q,
-  loading: A,
+  classNames: $,
+  okButtonProps: q,
+  cancelButtonProps: A,
+  loading: X,
   onOk: b,
-  onCancel: m,
-  okText: g,
-  okType: X = "primary",
-  confirmLoading: v,
-  cancelText: C = "Close",
+  onCancel: C,
+  okText: v,
+  okType: D = "primary",
+  confirmLoading: s,
+  cancelText: g = "Close",
   hideOkButton: k = !1,
   hideCancelButton: w = !1,
   contentPadding: r,
   title: i,
   afterTitle: x,
-  beforeCloseButton: D,
-  afterCloseButton: G,
-  defaultFixedHeaderFooter: J = !1,
-  centered: K = !0,
-  type: Q = "default",
-  defaultOpen: U = !0,
-  background: V,
-  bodyScrollable: Y = !0,
-  rootClassName: Z,
-  ..._
+  beforeCloseButton: G,
+  afterCloseButton: J,
+  defaultFixedHeaderFooter: K = !1,
+  centered: Q = !0,
+  type: U = "default",
+  defaultOpen: V = !0,
+  background: Y,
+  bodyScrollable: Z = !0,
+  rootClassName: _,
+  ...ee
 }) => {
-  const ee = p === void 0 ? /* @__PURE__ */ e(pe, { size: 16, weight: "bold" }) : p, t = E || (Q === "default" ? "medium" : "xsmall"), oe = F || c[t], re = {
-    "--ds-modal-bg": `var(--ds-color-bg-${V || (t in c && parseInt(c[t]) <= parseInt(c.medium) ? "elevated" : "container")})`,
-    ...P,
+  const oe = p === void 0 ? /* @__PURE__ */ o(he, { size: 16, weight: "bold" }) : p, t = L || (U === "default" ? "medium" : "xsmall"), re = P || m[t], te = {
+    "--ds-modal-bg": `var(--ds-color-bg-${Y || (t in m && parseInt(m[t]) <= parseInt(m.medium) ? "elevated" : "container")})`,
+    ...W,
     ...t === "fullscreen" ? { top: 0, maxWidth: "100%", height: "100%" } : {}
-  }, te = {
+  }, le = {
     ...y,
     body: {
       ...typeof r < "u" ? {
@@ -62,105 +62,108 @@ const Ge = ({
       } : {},
       ...y?.body
     }
-  }, [O, z] = H(!1), n = xe(), { className: le } = Oe(), s = he(null), ne = ye(
-    (o) => {
-      if (!o) return;
-      const l = o.querySelector("." + n("modal-body"));
+  }, [O, z] = R(!1), n = Oe(), { className: ne } = ze(), a = ye(null), se = be(
+    (e) => {
+      if (!e) return;
+      const l = e.querySelector("." + n("modal-body"));
       if (!(l instanceof HTMLElement)) return;
-      const S = new ResizeObserver(() => {
-        const fe = l.scrollHeight > l.clientHeight;
-        z(fe);
+      const T = new ResizeObserver(() => {
+        const ue = l.scrollHeight > l.clientHeight;
+        z(ue);
       });
-      s.current = S, S.observe(l);
-      const de = l.scrollHeight > l.clientHeight;
-      z(de);
+      a.current = T, T.observe(l);
+      const fe = l.scrollHeight > l.clientHeight;
+      z(fe);
     },
     [n]
   );
-  be(() => () => {
-    s.current && (s.current.disconnect(), s.current = null);
+  Ce(() => () => {
+    a.current && (a.current.disconnect(), a.current = null);
   }, []);
-  const [B] = Ce("Modal", ve()), se = g || B?.okText, ae = C || B?.cancelText, I = {
-    loading: A,
-    ...$
-  }, M = {
+  const [B] = ke("Modal", ge()), ae = v || B?.okText, ce = g || B?.cancelText, I = {
+    // loading: typeof confirmLoading === "boolean" ? confirmLoading : loading,
     ...q
-  }, [ce, N] = H(U), d = typeof u > "u", me = d ? ce : u, ie = /* @__PURE__ */ e(
-    ge,
+  }, M = {
+    ...A
+  }, [me, N] = R(V), d = typeof u > "u", ie = d ? me : u, S = (e) => {
+    s || C?.(e);
+  }, de = /* @__PURE__ */ o(
+    ve,
     {
       value: {
         okButtonProps: I,
         cancelButtonProps: M,
-        onCancel: m,
+        onCancel: S,
         onOk: b,
-        okType: X,
-        confirmLoading: v,
-        okTextLocale: se,
-        cancelTextLocale: ae
+        okType: D,
+        confirmLoading: s,
+        okTextLocale: ae,
+        cancelTextLocale: ce
       },
-      children: k ? /* @__PURE__ */ e(R, {}) : w ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ a(T, { children: [
-        /* @__PURE__ */ e(R, {}),
-        /* @__PURE__ */ e(L, {})
+      children: k ? /* @__PURE__ */ o(j, {}) : w ? /* @__PURE__ */ o(E, {}) : /* @__PURE__ */ c(H, { children: [
+        /* @__PURE__ */ o(j, {}),
+        /* @__PURE__ */ o(E, {})
       ] })
     }
   );
-  return /* @__PURE__ */ e(
-    ue,
+  return /* @__PURE__ */ o(
+    pe,
     {
       closeIcon: !1,
-      open: me,
-      width: oe,
-      style: re,
-      title: /* @__PURE__ */ a(T, { children: [
-        /* @__PURE__ */ a(f, { align: "center", gap: 8, className: n("modal-title-wrapper"), children: [
-          /* @__PURE__ */ e(f.Child, { grow: !0, children: typeof i == "string" ? /* @__PURE__ */ e(ke, { children: i }) : i }),
-          /* @__PURE__ */ a(f.Child, { stack: !0, hug: !0, align: "center", gap: 8, children: [
-            D,
-            /* @__PURE__ */ e(
-              we,
+      open: ie,
+      width: re,
+      style: te,
+      title: /* @__PURE__ */ c(H, { children: [
+        /* @__PURE__ */ c(f, { align: "center", gap: 8, className: n("modal-title-wrapper"), children: [
+          /* @__PURE__ */ o(f.Child, { grow: !0, children: typeof i == "string" ? /* @__PURE__ */ o(we, { children: i }) : i }),
+          /* @__PURE__ */ c(f.Child, { stack: !0, hug: !0, align: "center", gap: 8, children: [
+            G,
+            /* @__PURE__ */ o(
+              xe,
               {
-                onClick: (o) => m?.(o),
-                children: ee
+                onClick: (e) => S(e),
+                children: oe
               }
             ),
-            G
+            J
           ] })
         ] }),
         x || null
       ] }),
-      rootClassName: ze(le, Z),
+      rootClassName: Be(ne, _),
       classNames: {
-        ...W,
+        ...$,
         wrapper: n(
           "modal-wrap",
           t == "fullscreen" && "modal-fullscreen",
           O && "modal-content-overflow",
-          Y === !1 && "modal-no-body-scroll",
-          J || O || t == "fullscreen" ? "modal-fixed" : ""
+          Z === !1 && "modal-no-body-scroll",
+          K || O || t == "fullscreen" ? "modal-fixed" : ""
         )
       },
-      styles: te,
-      modalRender: (o) => /* @__PURE__ */ e("div", { ref: ne, className: n("modal-inner"), children: o }),
+      styles: le,
+      modalRender: (e) => /* @__PURE__ */ o("div", { ref: se, className: n("modal-inner"), children: e }),
       okButtonProps: I,
       cancelButtonProps: M,
-      onOk: (o) => {
-        d && N(!1), b?.(o);
+      onOk: (e) => {
+        d && N(!1), b?.(e);
       },
-      onCancel: (o) => {
-        d && N(!1), m?.(o);
+      onCancel: (e) => {
+        s || (d && N(!1), C?.(e));
       },
-      okText: g,
-      cancelText: C,
+      okText: v,
+      cancelText: g,
       okType: "primary",
-      confirmLoading: v,
-      footer: typeof h > "u" ? k && w ? null : ie : h,
-      centered: K,
-      ..._,
-      children: j
+      confirmLoading: s,
+      footer: typeof h > "u" ? k && w ? null : de : h,
+      centered: Q,
+      loading: X,
+      ...ee,
+      children: F
     }
   );
 };
 export {
-  Ge as Modal
+  Je as Modal
 };
 //# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntModal,\n  type ModalProps as AntModalProps,\n} from \"antd/es/modal\";\nimport { XIcon } from \"@bioturing/assets\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { ModalContextProvider } from \"antd/es/modal/context\";\nimport NormalCancelBtn from \"antd/es/modal/components/NormalCancelBtn\";\nimport NormalOkBtn from \"antd/es/modal/components/NormalOkBtn\";\nimport { getConfirmLocale } from \"antd/es/modal/locale\";\nimport { useLocale } from \"antd/es/locale\";\nimport { IconButton } from \"../icon-button\";\nimport { ModalSize } from \"./constants\";\nimport { ModalType } from \"./functions\";\nimport { Truncate } from \"../truncate\";\nimport { Stack } from \"../stack\";\nimport { useTheme } from \"../theme-provider\";\n\n// Define props interface extending Ant Design's ModalProps\nexport interface ModalProps extends Omit<AntModalProps, \"centered\"> {\n  /**\n   * Predefined sizes for the modal\n   * - xsmall: 400px\n   * - small: 520px\n   * - medium: 640px (default)\n   * - large: 840px\n   * - xlarge: 1024px\n   * - fullscreen: 100vw (takes full screen width with margins)\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?:\n    | \"xsmall\"\n    | \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"xlarge\"\n    | \"xxlarge\"\n    | \"fullscreen\";\n  /**\n   * Mark modal as loading\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Hide Ok button\n   * @default false\n   */\n  hideOkButton?: boolean;\n  /**\n   * Hide Cancel button\n   * @default false\n   */\n  hideCancelButton?: boolean;\n  /**\n   * Custom Content Padding\n   * @default \"24px\"\n   */\n  contentPadding?: number | string | boolean;\n  /**\n   * Add more content below the title\n   */\n  afterTitle?: React.ReactNode;\n  /**\n   * Add more actions before close button\n   */\n  beforeCloseButton?: React.ReactNode;\n  /**\n   * Add more actions after close button\n   */\n  afterCloseButton?: React.ReactNode;\n  /**\n   * Set header and footer to fixed position\n   * @default false\n   */\n  defaultFixedHeaderFooter?: boolean;\n  /**\n   * Centered Modal\n   * @default true\n   */\n  centered?: boolean;\n  /**\n   * Modal type\n   * @default \"default\"\n   */\n  type?: ModalType;\n  /**\n   * Default open state for uncontrolled modal\n   * @default true\n   */\n  defaultOpen?: boolean;\n  /**\n   * Modal background\n   * @default \"elevated\" if size smaller than \"medium\", otherwise \"container\"\n   */\n  background?: \"elevated\" | \"container\";\n  /**\n   * Modal old close callback\n   * @deprecated use onCancel instead\n   */\n  onClose?: () => void;\n  /**\n   * Make modal body scrollable\n   * @default true\n   */\n  bodyScrollable?: boolean;\n}\n\n// Create Modal component\nexport const Modal = ({\n  open: externalOpen,\n  closeIcon,\n  children,\n  size: sizeProp,\n  footer,\n  width,\n  style,\n  styles,\n  classNames,\n  okButtonProps,\n  cancelButtonProps,\n  loading,\n  onOk,\n  onCancel,\n  okText,\n  okType = \"primary\",\n  confirmLoading,\n  cancelText = \"Close\",\n  hideOkButton = false,\n  hideCancelButton = false,\n  contentPadding,\n  title,\n  afterTitle,\n  beforeCloseButton,\n  afterCloseButton,\n  defaultFixedHeaderFooter = false,\n  centered = true,\n  type = \"default\",\n  defaultOpen = true,\n  background: backgroundProp,\n  bodyScrollable = true,\n  rootClassName,\n  ...rest\n}: ModalProps) => {\n  // Default close icon with Phosphor icon\n  const defaultCloseIcon =\n    closeIcon === undefined ? <XIcon size={16} weight=\"bold\" /> : closeIcon;\n\n  // Use custom width if provided, otherwise use the size from the map\n  const defaultModalSize = type === \"default\" ? \"medium\" : \"xsmall\";\n\n  const size: keyof typeof ModalSize = sizeProp || defaultModalSize;\n  const modalWidth = width || ModalSize[size];\n\n  const background =\n    backgroundProp ||\n    (size &&\n    size in ModalSize &&\n    parseInt(ModalSize[size]) <= parseInt(ModalSize.medium)\n      ? \"elevated\"\n      : \"container\");\n\n  // Apply additional styles for fullscreen mode\n  const modalStyle = {\n    \"--ds-modal-bg\": `var(--ds-color-bg-${background})`,\n    ...style,\n    ...(size === \"fullscreen\"\n      ? { top: 0, maxWidth: \"100%\", height: \"100%\" }\n      : {}),\n  };\n\n  const modalStyles = {\n    ...styles,\n    body: {\n      ...((typeof contentPadding != \"undefined\"\n        ? {\n            \"--ds-modal-content-padding\":\n              contentPadding === false || contentPadding === 0\n                ? \"0\"\n                : typeof contentPadding == \"number\"\n                ? `${contentPadding}px`\n                : contentPadding,\n          }\n        : {}) as React.CSSProperties),\n      ...styles?.body,\n    },\n  };\n\n  const [isContentOverflow, setIsContentOverflow] = useState(false);\n\n  const cls = useCls();\n\n  const { className: themeClassName } = useTheme();\n\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const modalInnerRef = useCallback(\n    (node: HTMLElement | null) => {\n      // If the node is null (component unmounting), just return\n      if (!node) return;\n\n      const modalBody = node.querySelector(\".\" + cls(\"modal-body\"));\n      if (!(modalBody instanceof HTMLElement)) return;\n\n      // Create ResizeObserver to detect overflow\n      const resizeObserver = new ResizeObserver(() => {\n        const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;\n        setIsContentOverflow(hasOverflow);\n      });\n\n      // Store reference to the observer\n      resizeObserverRef.current = resizeObserver;\n\n      // Start observing\n      resizeObserver.observe(modalBody);\n\n      // Initial check\n      const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;\n      setIsContentOverflow(hasOverflow);\n    },\n    [cls]\n  );\n\n  // clean up resize observer\n  useEffect(() => {\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n    };\n  }, []);\n\n  const [locale] = useLocale(\"Modal\", getConfirmLocale());\n\n  const okTextLocale: React.ReactNode = okText || locale?.okText;\n  const cancelTextLocale = cancelText || locale?.cancelText;\n\n  const modalOkButtonProps = {\n    loading: loading,\n    ...okButtonProps,\n  };\n\n  const modalCancelButtonProps = {\n    ...cancelButtonProps,\n  };\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const uncontrolledOpen = typeof externalOpen === \"undefined\";\n\n  const open = uncontrolledOpen ? internalOpen : externalOpen;\n\n  const defaultFooter = (\n    <ModalContextProvider\n      value={{\n        okButtonProps: modalOkButtonProps,\n        cancelButtonProps: modalCancelButtonProps,\n        onCancel,\n        onOk,\n        okType,\n        confirmLoading,\n        okTextLocale,\n        cancelTextLocale,\n      }}\n    >\n      {hideOkButton ? (\n        <NormalCancelBtn />\n      ) : hideCancelButton ? (\n        <NormalOkBtn />\n      ) : (\n        <>\n          <NormalCancelBtn />\n          <NormalOkBtn />\n        </>\n      )}\n    </ModalContextProvider>\n  );\n  const renderTitle = () => {\n    return (\n      <>\n        <Stack align=\"center\" gap={8} className={cls(\"modal-title-wrapper\")}>\n          <Stack.Child grow>\n            {typeof title === \"string\" ? <Truncate>{title}</Truncate> : title}\n          </Stack.Child>\n          <Stack.Child stack hug align=\"center\" gap={8}>\n            {beforeCloseButton}\n            <IconButton\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) =>\n                onCancel?.(e)\n              }\n            >\n              {defaultCloseIcon}\n            </IconButton>\n            {afterCloseButton}\n          </Stack.Child>\n          {}\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </>\n    );\n  };\n  return (\n    <AntModal\n      closeIcon={false}\n      open={open}\n      width={modalWidth}\n      style={modalStyle}\n      title={renderTitle()}\n      rootClassName={clsx(themeClassName, rootClassName)}\n      classNames={{\n        ...classNames,\n        wrapper: cls(\n          \"modal-wrap\",\n          size == \"fullscreen\" && \"modal-fullscreen\",\n          isContentOverflow && \"modal-content-overflow\",\n          bodyScrollable === false && \"modal-no-body-scroll\",\n          defaultFixedHeaderFooter || isContentOverflow || size == \"fullscreen\"\n            ? \"modal-fixed\"\n            : \"\"\n        ),\n      }}\n      styles={modalStyles}\n      modalRender={(modal) => (\n        <div ref={modalInnerRef} className={cls(\"modal-inner\")}>\n          {modal}\n        </div>\n      )}\n      okButtonProps={modalOkButtonProps}\n      cancelButtonProps={modalCancelButtonProps}\n      onOk={(e) => {\n        if (uncontrolledOpen) setInternalOpen(false);\n        onOk?.(e);\n      }}\n      onCancel={(e) => {\n        if (uncontrolledOpen) setInternalOpen(false);\n        onCancel?.(e);\n      }}\n      okText={okText}\n      cancelText={cancelText}\n      okType=\"primary\"\n      confirmLoading={confirmLoading}\n      footer={\n        typeof footer === \"undefined\"\n          ? hideOkButton && hideCancelButton\n            ? null\n            : defaultFooter\n          : footer\n      }\n      centered={centered}\n      {...rest}\n    >\n      {children}\n    </AntModal>\n  );\n};\n"],"names":["Modal","externalOpen","closeIcon","children","sizeProp","footer","width","style","styles","classNames","okButtonProps","cancelButtonProps","loading","onOk","onCancel","okText","okType","confirmLoading","cancelText","hideOkButton","hideCancelButton","contentPadding","title","afterTitle","beforeCloseButton","afterCloseButton","defaultFixedHeaderFooter","centered","type","defaultOpen","backgroundProp","bodyScrollable","rootClassName","rest","defaultCloseIcon","jsx","XIcon","size","modalWidth","ModalSize","modalStyle","modalStyles","isContentOverflow","setIsContentOverflow","useState","cls","useCls","themeClassName","useTheme","resizeObserverRef","useRef","modalInnerRef","useCallback","node","modalBody","resizeObserver","hasOverflow","useEffect","locale","useLocale","getConfirmLocale","okTextLocale","cancelTextLocale","modalOkButtonProps","modalCancelButtonProps","internalOpen","setInternalOpen","uncontrolledOpen","open","defaultFooter","ModalContextProvider","NormalCancelBtn","NormalOkBtn","jsxs","Fragment","AntModal","Stack","Truncate","IconButton","e","clsx","modal"],"mappings":";;;;;;;;;;;;;;;;;AA8GO,MAAMA,KAAQ,CAAC;AAAA,EACpB,MAAMC;AAAA,EACN,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,YAAYC;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,eAAAC;AAAA,EACA,GAAGC;AACL,MAAkB;AAEhB,QAAMC,KACJhC,MAAc,SAAY,gBAAAiC,EAACC,MAAM,MAAM,IAAI,QAAO,OAAA,CAAO,IAAKlC,GAK1DmC,IAA+BjC,MAFZwB,MAAS,YAAY,WAAW,WAGnDU,KAAahC,KAASiC,EAAUF,CAAI,GAWpCG,KAAa;AAAA,IACjB,iBAAiB,qBATjBV,MAEAO,KAAQE,KACR,SAASA,EAAUF,CAAI,CAAC,KAAK,SAASE,EAAU,MAAM,IAClD,aACA,YAI4C;AAAA,IAChD,GAAGhC;AAAA,IACH,GAAI8B,MAAS,eACT,EAAE,KAAK,GAAG,UAAU,QAAQ,QAAQ,WACpC,CAAA;AAAA,EAAC,GAGDI,KAAc;AAAA,IAClB,GAAGjC;AAAA,IACH,MAAM;AAAA,MACJ,GAAK,OAAOa,IAAkB,MAC1B;AAAA,QACE,8BACEA,MAAmB,MAASA,MAAmB,IAC3C,MACA,OAAOA,KAAkB,WACzB,GAAGA,CAAc,OACjBA;AAAA,MAAA,IAER,CAAA;AAAA,MACJ,GAAGb,GAAQ;AAAA,IAAA;AAAA,EACb,GAGI,CAACkC,GAAmBC,CAAoB,IAAIC,EAAS,EAAK,GAE1DC,IAAMC,GAAA,GAEN,EAAE,WAAWC,GAAA,IAAmBC,GAAA,GAEhCC,IAAoBC,GAA8B,IAAI,GAEtDC,KAAgBC;AAAA,IACpB,CAACC,MAA6B;AAE5B,UAAI,CAACA,EAAM;AAEX,YAAMC,IAAYD,EAAK,cAAc,MAAMR,EAAI,YAAY,CAAC;AAC5D,UAAI,EAAES,aAAqB,aAAc;AAGzC,YAAMC,IAAiB,IAAI,eAAe,MAAM;AAC9C,cAAMC,KAAcF,EAAU,eAAeA,EAAU;AACvD,QAAAX,EAAqBa,EAAW;AAAA,MAClC,CAAC;AAGD,MAAAP,EAAkB,UAAUM,GAG5BA,EAAe,QAAQD,CAAS;AAGhC,YAAME,KAAcF,EAAU,eAAeA,EAAU;AACvD,MAAAX,EAAqBa,EAAW;AAAA,IAClC;AAAA,IACA,CAACX,CAAG;AAAA,EAAA;AAIN,EAAAY,GAAU,MACD,MAAM;AACX,IAAIR,EAAkB,YACpBA,EAAkB,QAAQ,WAAA,GAC1BA,EAAkB,UAAU;AAAA,EAEhC,GACC,CAAA,CAAE;AAEL,QAAM,CAACS,CAAM,IAAIC,GAAU,SAASC,IAAkB,GAEhDC,KAAgC9C,KAAU2C,GAAQ,QAClDI,KAAmB5C,KAAcwC,GAAQ,YAEzCK,IAAqB;AAAA,IACzB,SAAAnD;AAAA,IACA,GAAGF;AAAA,EAAA,GAGCsD,IAAyB;AAAA,IAC7B,GAAGrD;AAAA,EAAA,GAGC,CAACsD,IAAcC,CAAe,IAAItB,EAASf,CAAW,GAEtDsC,IAAmB,OAAOlE,IAAiB,KAE3CmE,KAAOD,IAAmBF,KAAehE,GAEzCoE,KACJ,gBAAAlC;AAAA,IAACmC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,eAAeP;AAAA,QACf,mBAAmBC;AAAA,QACnB,UAAAlD;AAAA,QACA,MAAAD;AAAA,QACA,QAAAG;AAAA,QACA,gBAAAC;AAAA,QACA,cAAA4C;AAAA,QACA,kBAAAC;AAAA,MAAA;AAAA,MAGD,UAAA3C,sBACEoD,GAAA,CAAA,CAAgB,IACfnD,IACF,gBAAAe,EAACqC,GAAA,CAAA,CAAY,IAEb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAvC,EAACoC,GAAA,EAAgB;AAAA,0BAChBC,GAAA,CAAA,CAAY;AAAA,MAAA,EAAA,CACf;AAAA,IAAA;AAAA,EAAA;AA4BN,SACE,gBAAArC;AAAA,IAACwC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAAP;AAAA,MACA,OAAO9B;AAAA,MACP,OAAOE;AAAA,MACP,OA5BA,gBAAAiC,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAD,EAACG,GAAA,EAAM,OAAM,UAAS,KAAK,GAAG,WAAW/B,EAAI,qBAAqB,GAChE,UAAA;AAAA,UAAA,gBAAAV,EAACyC,EAAM,OAAN,EAAY,MAAI,IACd,UAAA,OAAOtD,KAAU,WAAW,gBAAAa,EAAC0C,IAAA,EAAU,UAAAvD,EAAA,CAAM,IAAcA,GAC9D;AAAA,UACA,gBAAAmD,EAACG,EAAM,OAAN,EAAY,OAAK,IAAC,KAAG,IAAC,OAAM,UAAS,KAAK,GACxC,UAAA;AAAA,YAAApD;AAAA,YACD,gBAAAW;AAAA,cAAC2C;AAAA,cAAA;AAAA,gBACC,SAAS,CAACC,MACRjE,IAAWiE,CAAC;AAAA,gBAGb,UAAA7C;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFT;AAAA,UAAA,EAAA,CACH;AAAA,QAAA,GAEF;AAAA,QACCF,KAA0B;AAAA,MAAA,GAC7B;AAAA,MAUA,eAAeyD,GAAKjC,IAAgBf,CAAa;AAAA,MACjD,YAAY;AAAA,QACV,GAAGvB;AAAA,QACH,SAASoC;AAAA,UACP;AAAA,UACAR,KAAQ,gBAAgB;AAAA,UACxBK,KAAqB;AAAA,UACrBX,MAAmB,MAAS;AAAA,UAC5BL,KAA4BgB,KAAqBL,KAAQ,eACrD,gBACA;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,QAAQI;AAAA,MACR,aAAa,CAACwC,MACZ,gBAAA9C,EAAC,OAAA,EAAI,KAAKgB,IAAe,WAAWN,EAAI,aAAa,GAClD,UAAAoC,EAAA,CACH;AAAA,MAEF,eAAelB;AAAA,MACf,mBAAmBC;AAAA,MACnB,MAAM,CAACe,MAAM;AACX,QAAIZ,OAAkC,EAAK,GAC3CtD,IAAOkE,CAAC;AAAA,MACV;AAAA,MACA,UAAU,CAACA,MAAM;AACf,QAAIZ,OAAkC,EAAK,GAC3CrD,IAAWiE,CAAC;AAAA,MACd;AAAA,MACA,QAAAhE;AAAA,MACA,YAAAG;AAAA,MACA,QAAO;AAAA,MACP,gBAAAD;AAAA,MACA,QACE,OAAOZ,IAAW,MACdc,KAAgBC,IACd,OACAiD,KACFhE;AAAA,MAEN,UAAAsB;AAAA,MACC,GAAGM;AAAA,MAEH,UAAA9B;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntModal,\n  type ModalProps as AntModalProps,\n} from \"antd/es/modal\";\nimport { XIcon } from \"@bioturing/assets\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { ModalContextProvider } from \"antd/es/modal/context\";\nimport NormalCancelBtn from \"antd/es/modal/components/NormalCancelBtn\";\nimport NormalOkBtn from \"antd/es/modal/components/NormalOkBtn\";\nimport { getConfirmLocale } from \"antd/es/modal/locale\";\nimport { useLocale } from \"antd/es/locale\";\nimport { IconButton } from \"../icon-button\";\nimport { ModalSize } from \"./constants\";\nimport { ModalType } from \"./functions\";\nimport { Truncate } from \"../truncate\";\nimport { Stack } from \"../stack\";\nimport { useTheme } from \"../theme-provider\";\n\n// Define props interface extending Ant Design's ModalProps\nexport interface ModalProps extends Omit<AntModalProps, \"centered\"> {\n  /**\n   * Predefined sizes for the modal\n   * - xsmall: 400px\n   * - small: 520px\n   * - medium: 640px (default)\n   * - large: 840px\n   * - xlarge: 1024px\n   * - fullscreen: 100vw (takes full screen width with margins)\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?:\n    | \"xsmall\"\n    | \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"xlarge\"\n    | \"xxlarge\"\n    | \"fullscreen\";\n  /**\n   * Mark modal as loading\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Hide Ok button\n   * @default false\n   */\n  hideOkButton?: boolean;\n  /**\n   * Hide Cancel button\n   * @default false\n   */\n  hideCancelButton?: boolean;\n  /**\n   * Custom Content Padding\n   * @default \"24px\"\n   */\n  contentPadding?: number | string | boolean;\n  /**\n   * Add more content below the title\n   */\n  afterTitle?: React.ReactNode;\n  /**\n   * Add more actions before close button\n   */\n  beforeCloseButton?: React.ReactNode;\n  /**\n   * Add more actions after close button\n   */\n  afterCloseButton?: React.ReactNode;\n  /**\n   * Set header and footer to fixed position\n   * @default false\n   */\n  defaultFixedHeaderFooter?: boolean;\n  /**\n   * Centered Modal\n   * @default true\n   */\n  centered?: boolean;\n  /**\n   * Modal type\n   * @default \"default\"\n   */\n  type?: ModalType;\n  /**\n   * Default open state for uncontrolled modal\n   * @default true\n   */\n  defaultOpen?: boolean;\n  /**\n   * Modal background\n   * @default \"elevated\" if size smaller than \"medium\", otherwise \"container\"\n   */\n  background?: \"elevated\" | \"container\";\n  /**\n   * Modal old close callback\n   * @deprecated use onCancel instead\n   */\n  onClose?: () => void;\n  /**\n   * Make modal body scrollable\n   * @default true\n   */\n  bodyScrollable?: boolean;\n}\n\n// Create Modal component\nexport const Modal = ({\n  open: externalOpen,\n  closeIcon,\n  children,\n  size: sizeProp,\n  footer,\n  width,\n  style,\n  styles,\n  classNames,\n  okButtonProps,\n  cancelButtonProps,\n  loading,\n  onOk,\n  onCancel,\n  okText,\n  okType = \"primary\",\n  confirmLoading,\n  cancelText = \"Close\",\n  hideOkButton = false,\n  hideCancelButton = false,\n  contentPadding,\n  title,\n  afterTitle,\n  beforeCloseButton,\n  afterCloseButton,\n  defaultFixedHeaderFooter = false,\n  centered = true,\n  type = \"default\",\n  defaultOpen = true,\n  background: backgroundProp,\n  bodyScrollable = true,\n  rootClassName,\n  ...rest\n}: ModalProps) => {\n  // Default close icon with Phosphor icon\n  const defaultCloseIcon =\n    closeIcon === undefined ? <XIcon size={16} weight=\"bold\" /> : closeIcon;\n\n  // Use custom width if provided, otherwise use the size from the map\n  const defaultModalSize = type === \"default\" ? \"medium\" : \"xsmall\";\n\n  const size: keyof typeof ModalSize = sizeProp || defaultModalSize;\n  const modalWidth = width || ModalSize[size];\n\n  const background =\n    backgroundProp ||\n    (size &&\n    size in ModalSize &&\n    parseInt(ModalSize[size]) <= parseInt(ModalSize.medium)\n      ? \"elevated\"\n      : \"container\");\n\n  // Apply additional styles for fullscreen mode\n  const modalStyle = {\n    \"--ds-modal-bg\": `var(--ds-color-bg-${background})`,\n    ...style,\n    ...(size === \"fullscreen\"\n      ? { top: 0, maxWidth: \"100%\", height: \"100%\" }\n      : {}),\n  };\n\n  const modalStyles = {\n    ...styles,\n    body: {\n      ...((typeof contentPadding != \"undefined\"\n        ? {\n            \"--ds-modal-content-padding\":\n              contentPadding === false || contentPadding === 0\n                ? \"0\"\n                : typeof contentPadding == \"number\"\n                ? `${contentPadding}px`\n                : contentPadding,\n          }\n        : {}) as React.CSSProperties),\n      ...styles?.body,\n    },\n  };\n\n  const [isContentOverflow, setIsContentOverflow] = useState(false);\n\n  const cls = useCls();\n\n  const { className: themeClassName } = useTheme();\n\n  const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n  const modalInnerRef = useCallback(\n    (node: HTMLElement | null) => {\n      // If the node is null (component unmounting), just return\n      if (!node) return;\n\n      const modalBody = node.querySelector(\".\" + cls(\"modal-body\"));\n      if (!(modalBody instanceof HTMLElement)) return;\n\n      // Create ResizeObserver to detect overflow\n      const resizeObserver = new ResizeObserver(() => {\n        const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;\n        setIsContentOverflow(hasOverflow);\n      });\n\n      // Store reference to the observer\n      resizeObserverRef.current = resizeObserver;\n\n      // Start observing\n      resizeObserver.observe(modalBody);\n\n      // Initial check\n      const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;\n      setIsContentOverflow(hasOverflow);\n    },\n    [cls]\n  );\n\n  // clean up resize observer\n  useEffect(() => {\n    return () => {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.disconnect();\n        resizeObserverRef.current = null;\n      }\n    };\n  }, []);\n\n  const [locale] = useLocale(\"Modal\", getConfirmLocale());\n\n  const okTextLocale: React.ReactNode = okText || locale?.okText;\n  const cancelTextLocale = cancelText || locale?.cancelText;\n\n  const modalOkButtonProps = {\n    // loading: typeof confirmLoading === \"boolean\" ? confirmLoading : loading,\n    ...okButtonProps,\n  };\n\n  const modalCancelButtonProps = {\n    ...cancelButtonProps,\n  };\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const uncontrolledOpen = typeof externalOpen === \"undefined\";\n\n  const open = uncontrolledOpen ? internalOpen : externalOpen;\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (confirmLoading) {\n      return;\n    }\n    onCancel?.(e);\n  };\n\n  const defaultFooter = (\n    <ModalContextProvider\n      value={{\n        okButtonProps: modalOkButtonProps,\n        cancelButtonProps: modalCancelButtonProps,\n        onCancel: handleCancel,\n        onOk,\n        okType,\n        confirmLoading,\n        okTextLocale,\n        cancelTextLocale,\n      }}\n    >\n      {hideOkButton ? (\n        <NormalCancelBtn />\n      ) : hideCancelButton ? (\n        <NormalOkBtn />\n      ) : (\n        <>\n          <NormalCancelBtn />\n          <NormalOkBtn />\n        </>\n      )}\n    </ModalContextProvider>\n  );\n  const renderTitle = () => {\n    return (\n      <>\n        <Stack align=\"center\" gap={8} className={cls(\"modal-title-wrapper\")}>\n          <Stack.Child grow>\n            {typeof title === \"string\" ? <Truncate>{title}</Truncate> : title}\n          </Stack.Child>\n          <Stack.Child stack hug align=\"center\" gap={8}>\n            {beforeCloseButton}\n            <IconButton\n              onClick={(e: React.MouseEvent<HTMLButtonElement>) =>\n                handleCancel(e)\n              }\n            >\n              {defaultCloseIcon}\n            </IconButton>\n            {afterCloseButton}\n          </Stack.Child>\n          {}\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </>\n    );\n  };\n  return (\n    <AntModal\n      closeIcon={false}\n      open={open}\n      width={modalWidth}\n      style={modalStyle}\n      title={renderTitle()}\n      rootClassName={clsx(themeClassName, rootClassName)}\n      classNames={{\n        ...classNames,\n        wrapper: cls(\n          \"modal-wrap\",\n          size == \"fullscreen\" && \"modal-fullscreen\",\n          isContentOverflow && \"modal-content-overflow\",\n          bodyScrollable === false && \"modal-no-body-scroll\",\n          defaultFixedHeaderFooter || isContentOverflow || size == \"fullscreen\"\n            ? \"modal-fixed\"\n            : \"\"\n        ),\n      }}\n      styles={modalStyles}\n      modalRender={(modal) => (\n        <div ref={modalInnerRef} className={cls(\"modal-inner\")}>\n          {modal}\n        </div>\n      )}\n      okButtonProps={modalOkButtonProps}\n      cancelButtonProps={modalCancelButtonProps}\n      onOk={(e) => {\n        if (uncontrolledOpen) setInternalOpen(false);\n        onOk?.(e);\n      }}\n      onCancel={(e) => {\n        if (confirmLoading) return;\n        if (uncontrolledOpen) setInternalOpen(false);\n        onCancel?.(e);\n      }}\n      okText={okText}\n      cancelText={cancelText}\n      okType=\"primary\"\n      confirmLoading={confirmLoading}\n      footer={\n        typeof footer === \"undefined\"\n          ? hideOkButton && hideCancelButton\n            ? null\n            : defaultFooter\n          : footer\n      }\n      centered={centered}\n      loading={loading}\n      {...rest}\n    >\n      {children}\n    </AntModal>\n  );\n};\n"],"names":["Modal","externalOpen","closeIcon","children","sizeProp","footer","width","style","styles","classNames","okButtonProps","cancelButtonProps","loading","onOk","onCancel","okText","okType","confirmLoading","cancelText","hideOkButton","hideCancelButton","contentPadding","title","afterTitle","beforeCloseButton","afterCloseButton","defaultFixedHeaderFooter","centered","type","defaultOpen","backgroundProp","bodyScrollable","rootClassName","rest","defaultCloseIcon","jsx","XIcon","size","modalWidth","ModalSize","modalStyle","modalStyles","isContentOverflow","setIsContentOverflow","useState","cls","useCls","themeClassName","useTheme","resizeObserverRef","useRef","modalInnerRef","useCallback","node","modalBody","resizeObserver","hasOverflow","useEffect","locale","useLocale","getConfirmLocale","okTextLocale","cancelTextLocale","modalOkButtonProps","modalCancelButtonProps","internalOpen","setInternalOpen","uncontrolledOpen","open","handleCancel","defaultFooter","ModalContextProvider","NormalCancelBtn","NormalOkBtn","jsxs","Fragment","AntModal","Stack","Truncate","IconButton","clsx","modal"],"mappings":"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"}

package/dist/components/truncate/component.d.ts

@@ -12,6 +12,13 @@ export interface TruncateProps extends Omit<React.ComponentPropsWithoutRef<"span
      */
     lines?: number | "auto";
     container?: HTMLElement | React.RefObject<HTMLElement>;
+    /**
+     * Custom render function to transform text before display
+     * Useful for keyword highlighting, text transformations, etc.
+     * @param text - The text to render (may be truncated)
+     * @returns React node to render
+     */
+    renderText?: (text: string) => React.ReactNode;
 }
 export declare const Truncate: React.FC<TruncateProps>;
 //# sourceMappingURL=component.d.ts.map

package/dist/components/truncate/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/truncate/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAK9E,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEhD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC7D,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAIxB,SAAS,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CACxD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqL5C,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/truncate/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAK9E,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEhD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC7D,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAIxB,SAAS,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiM5C,CAAC"}

package/dist/components/truncate/component.js

@@ -1,112 +1,121 @@
 "use client";
-import { jsx as T } from "react/jsx-runtime";
-import { useRef as M, useState as L, useCallback as h, useLayoutEffect as z } from "react";
-import { calculateAvailableHeight as A, getMiddleTruncatedString as F } from "./helpers.js";
+import { jsx as C } from "react/jsx-runtime";
+import { useRef as A, useState as F, useCallback as p, useLayoutEffect as R } from "react";
+import { calculateAvailableHeight as k, getMiddleTruncatedString as q } from "./helpers.js";
 import { useOverflowDetection as g } from "./useOverflowDetection.js";
 import './style.css';/* empty css          */
-import { useCls as R } from "../utils/antdUtils.js";
-import { clsx as k } from "../utils/cn.js";
-const J = ({
+import { useCls as B } from "../utils/antdUtils.js";
+import { clsx as j } from "../utils/cn.js";
+const Q = ({
   children: w,
   position: i = "end",
   lines: e = 1,
-  className: b,
-  style: f,
+  className: O,
+  style: v,
   container: o,
-  ...x
+  renderText: d,
+  ...S
 }) => {
-  const s = R(), l = M(null), [m, p] = L(w), r = w, O = g({
+  const f = B(), l = A(null), [m, y] = F(w), a = w, x = g({
     container: l,
     additionalElements: [l.current?.parentElement].filter(Boolean),
     type: "vertical",
-    text: r,
+    text: a,
     enabled: e === "auto"
-  }), C = g({
+  }), E = g({
     container: l,
     type: "vertical",
-    text: r,
+    text: a,
     enabled: typeof e == "number" && e > 1
-  }), E = g({
+  }), H = g({
     container: l,
     type: "horizontal",
     enabled: i === "end" && e === 1
-  }), S = e === "auto" && O.isOverflowing || typeof e == "number" && e > 1 && C.isOverflowing || i === "end" && e === 1 && E.isOverflowing || i === "middle" && r !== m, H = h(() => e !== "auto" ? {
-    ...f,
+  }), M = e === "auto" && x.isOverflowing || typeof e == "number" && e > 1 && E.isOverflowing || i === "end" && e === 1 && H.isOverflowing || i === "middle" && a !== m, L = p(() => e !== "auto" ? {
+    ...v,
     ...e > 1 ? { "--ds-line-clamp": e } : {}
   } : {
-    ...f,
+    ...v,
     // Set a temporary high value to ensure it fits the parent
     "--ds-line-clamp": 999
-  }, [e, f]), y = h(() => {
+  }, [e, v]), b = p(() => {
     const t = l.current;
     if (!t) return;
-    const n = window.getComputedStyle(t), a = parseFloat(n.fontSize), u = n.lineHeight === "normal" ? a * 1.2 : parseFloat(n.lineHeight), c = A(t), d = Math.max(1, Math.floor(c / u));
-    t.style.setProperty("--ds-line-clamp", String(d));
-  }, [r]), v = h(
-    (t, n, a) => {
+    const n = window.getComputedStyle(t), r = parseFloat(n.fontSize), u = n.lineHeight === "normal" ? r * 1.2 : parseFloat(n.lineHeight), c = k(t), s = Math.max(1, Math.floor(c / u));
+    t.style.setProperty("--ds-line-clamp", String(s));
+  }, []), h = p(
+    (t, n, r) => {
       const u = t.filter(Boolean);
       if (u.length === 0) return;
       window.document.fonts?.ready?.then(n);
       const c = new ResizeObserver(() => {
         window.requestAnimationFrame(n);
       });
-      return u.forEach((d) => c.observe(d)), () => {
-        c.disconnect(), a && a();
+      return u.forEach((s) => c.observe(s)), () => {
+        c.disconnect(), r && r();
       };
     },
     []
   );
-  return z(() => {
+  R(() => {
     const t = l.current;
     let n = o instanceof HTMLElement ? o : o && "current" in o ? o.current : null;
     if (t && (n || (n = t.closest("[data-truncate-container]")), !(typeof o < "u" && !n))) {
-      if (p(r), e === "auto")
-        return v(
+      if (y(a), e === "auto")
+        return h(
           [t, t.parentElement],
-          y
+          b
         );
       if (i === "middle") {
-        let a = { cancelled: !1 };
-        return v(
+        let r = { cancelled: !1 };
+        return h(
           [n || t],
           () => {
-            a && (a.cancelled = !0);
+            r && (r.cancelled = !0);
             const c = { cancelled: !1 };
-            a = c;
-            const d = F(r, "…", t);
-            c.cancelled || p(d);
+            r = c;
+            const s = q(
+              a,
+              "…",
+              t,
+              d
+            );
+            c.cancelled || y(s);
           },
           () => {
-            a.cancelled = !0;
+            r.cancelled = !0;
           }
         );
       }
     }
   }, [
-    r,
+    a,
     i,
     e,
     o,
-    y,
-    v
-  ]), /* @__PURE__ */ T(
+    b,
+    h,
+    d
+  ]);
+  const T = d ? d(m) : m, z = a !== m;
+  return /* @__PURE__ */ C(
     "span",
     {
       ref: l,
-      style: H(),
-      className: k(
-        s(e === 1 ? "truncate" : "truncate-multiline"),
-        s(i === "middle" ? "truncate-middle" : "truncate-end"),
-        b
+      style: L(),
+      className: j(
+        f(e === 1 ? "truncate" : "truncate-multiline"),
+        f(i === "middle" ? "truncate-middle" : "truncate-end"),
+        O
       ),
-      title: S ? r : void 0,
+      title: M ? a : void 0,
       "data-truncate-text-node": !0,
-      ...x,
-      children: r === m ? r : /* @__PURE__ */ T("span", { children: m })
+      ...S,
+      children: z ? /* @__PURE__ */ C("span", { children: T }) : T
     }
   );
 };
 export {
-  J as Truncate
+  Q as Truncate
 };
 //# sourceMappingURL=component.js.map

package/dist/components/truncate/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/truncate/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { calculateAvailableHeight, getMiddleTruncatedString } from \"./helpers\";\nimport { useOverflowDetection } from \"./useOverflowDetection\";\n\nimport \"./style.css\";\n\nexport type TruncatePosition = \"middle\" | \"end\";\n\nexport interface TruncateProps\n  extends Omit<React.ComponentPropsWithoutRef<\"span\">, \"title\"> {\n  /** Text content to be truncated */\n  children: string;\n  /** Position where the truncation should occur */\n  position?: TruncatePosition;\n  /**\n   * Number of lines to display before truncating\n   * @default 1\n   * @remarks Use 'auto' to fit parent height\n   */\n  lines?: number | \"auto\";\n  /*\n   * Ref to the container element of the truncated text. It will have resize observer attached to it.\n   */\n  container?: HTMLElement | React.RefObject<HTMLElement>;\n}\n\nexport const Truncate: React.FC<TruncateProps> = ({\n  children,\n  position = \"end\",\n  lines = 1,\n  className,\n  style,\n  container: containerProp,\n  ...rest\n}) => {\n  const cls = useCls();\n  const containerRef = useRef<HTMLElement>(null);\n  const [truncatedText, setTruncatedText] = useState(children);\n\n  const text = children;\n\n  // Overflow detection for different scenarios\n  const autoLineOverflow = useOverflowDetection({\n    container: containerRef,\n    additionalElements: [containerRef.current?.parentElement].filter(Boolean),\n    type: \"vertical\",\n    text,\n    enabled: lines === \"auto\",\n  });\n\n  const multilineOverflow = useOverflowDetection({\n    container: containerRef,\n    type: \"vertical\",\n    text,\n    enabled: typeof lines === \"number\" && lines > 1,\n  });\n\n  const endTruncateOverflow = useOverflowDetection({\n    container: containerRef,\n    type: \"horizontal\",\n    enabled: position === \"end\" && lines === 1,\n  });\n\n  // Determine if content is truncated based on the active mode\n  const isTruncated =\n    (lines === \"auto\" && autoLineOverflow.isOverflowing) ||\n    (typeof lines === \"number\" &&\n      lines > 1 &&\n      multilineOverflow.isOverflowing) ||\n    (position === \"end\" && lines === 1 && endTruncateOverflow.isOverflowing) ||\n    (position === \"middle\" && text !== truncatedText);\n\n  // Get appropriate container styles based on position and lines\n  const getContainerStyles = useCallback(() => {\n    // For explicit line numbers or single line\n    if (lines !== \"auto\") {\n      return {\n        ...style,\n        ...(lines > 1 ? { \"--ds-line-clamp\": lines } : {}),\n      } as React.CSSProperties;\n    }\n\n    // For auto line calculation, we'll let the useLayoutEffect handle it\n    return {\n      ...style,\n      // Set a temporary high value to ensure it fits the parent\n      \"--ds-line-clamp\": 999,\n    } as React.CSSProperties;\n  }, [lines, style]);\n\n  // Handle auto line calculation\n  const handleAutoLineCalculation = useCallback(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const styles = window.getComputedStyle(container);\n    const fontSize = parseFloat(styles.fontSize);\n    const lineHeight =\n      styles.lineHeight === \"normal\"\n        ? fontSize * 1.2\n        : parseFloat(styles.lineHeight);\n\n    const availableHeight = calculateAvailableHeight(container);\n    const maxLines = Math.max(1, Math.floor(availableHeight / lineHeight));\n\n    container.style.setProperty(\"--ds-line-clamp\", String(maxLines));\n  }, [text]);\n\n  const observe = useCallback(\n    (\n      elements: (HTMLElement | null)[],\n      callback: () => void,\n      cleanup?: () => void\n    ) => {\n      const validElements = elements.filter(Boolean) as HTMLElement[];\n      if (validElements.length === 0) return;\n\n      window.document.fonts?.ready?.then(callback);\n\n      const observer = new ResizeObserver(() => {\n        window.requestAnimationFrame(callback);\n      });\n\n      validElements.forEach((el) => observer.observe(el));\n      return () => {\n        observer.disconnect();\n        if (cleanup) cleanup();\n      };\n    },\n    []\n  );\n\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    let flexContainer =\n      containerProp instanceof HTMLElement\n        ? containerProp\n        : containerProp && \"current\" in containerProp\n        ? containerProp.current\n        : null;\n    if (!container) return;\n    if (!flexContainer) {\n      flexContainer = container.closest(\"[data-truncate-container]\");\n    }\n    if (typeof containerProp !== \"undefined\" && !flexContainer) return;\n\n    // reset\n    setTruncatedText(text);\n\n    // Handle auto-height calculation\n    if (lines === \"auto\") {\n      return observe(\n        [container, container.parentElement],\n        handleAutoLineCalculation\n      );\n    }\n\n    // Handle middle truncation with resize observer\n    if (position === \"middle\") {\n      let cancellationToken = { cancelled: false };\n\n      const handleMiddleTruncate = () => {\n        if (cancellationToken) cancellationToken.cancelled = true;\n\n        const requestCancellationToken = { cancelled: false };\n        cancellationToken = requestCancellationToken;\n\n        const truncated = getMiddleTruncatedString(text, \"\\u2026\", container);\n\n        if (requestCancellationToken.cancelled) return;\n\n        setTruncatedText(truncated);\n      };\n\n      return observe(\n        [flexContainer ? flexContainer : container],\n        handleMiddleTruncate,\n        () => {\n          cancellationToken.cancelled = true;\n        }\n      );\n    }\n  }, [\n    text,\n    position,\n    lines,\n    containerProp,\n    handleAutoLineCalculation,\n    observe,\n  ]);\n\n  return (\n    <span\n      ref={containerRef}\n      style={getContainerStyles()}\n      className={clsx(\n        lines === 1 ? cls(\"truncate\") : cls(\"truncate-multiline\"),\n        position === \"middle\" ? cls(\"truncate-middle\") : cls(\"truncate-end\"),\n        className\n      )}\n      title={isTruncated ? text : undefined}\n      data-truncate-text-node\n      {...rest}\n    >\n      {text === truncatedText ? text : <span>{truncatedText}</span>}\n    </span>\n  );\n};\n"],"names":["Truncate","children","position","lines","className","style","containerProp","rest","cls","useCls","containerRef","useRef","truncatedText","setTruncatedText","useState","text","autoLineOverflow","useOverflowDetection","multilineOverflow","endTruncateOverflow","isTruncated","getContainerStyles","useCallback","handleAutoLineCalculation","container","styles","fontSize","lineHeight","availableHeight","calculateAvailableHeight","maxLines","observe","elements","callback","cleanup","validElements","observer","el","useLayoutEffect","flexContainer","cancellationToken","requestCancellationToken","truncated","getMiddleTruncatedString","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/truncate/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { calculateAvailableHeight, getMiddleTruncatedString } from \"./helpers\";\nimport { useOverflowDetection } from \"./useOverflowDetection\";\n\nimport \"./style.css\";\n\nexport type TruncatePosition = \"middle\" | \"end\";\n\nexport interface TruncateProps\n  extends Omit<React.ComponentPropsWithoutRef<\"span\">, \"title\"> {\n  /** Text content to be truncated */\n  children: string;\n  /** Position where the truncation should occur */\n  position?: TruncatePosition;\n  /**\n   * Number of lines to display before truncating\n   * @default 1\n   * @remarks Use 'auto' to fit parent height\n   */\n  lines?: number | \"auto\";\n  /*\n   * Ref to the container element of the truncated text. It will have resize observer attached to it.\n   */\n  container?: HTMLElement | React.RefObject<HTMLElement>;\n  /**\n   * Custom render function to transform text before display\n   * Useful for keyword highlighting, text transformations, etc.\n   * @param text - The text to render (may be truncated)\n   * @returns React node to render\n   */\n  renderText?: (text: string) => React.ReactNode;\n}\n\nexport const Truncate: React.FC<TruncateProps> = ({\n  children,\n  position = \"end\",\n  lines = 1,\n  className,\n  style,\n  container: containerProp,\n  renderText,\n  ...rest\n}) => {\n  const cls = useCls();\n  const containerRef = useRef<HTMLElement>(null);\n  const [truncatedText, setTruncatedText] = useState(children);\n\n  const text = children;\n\n  // Overflow detection for different scenarios\n  const autoLineOverflow = useOverflowDetection({\n    container: containerRef,\n    additionalElements: [containerRef.current?.parentElement].filter(Boolean),\n    type: \"vertical\",\n    text,\n    enabled: lines === \"auto\",\n  });\n\n  const multilineOverflow = useOverflowDetection({\n    container: containerRef,\n    type: \"vertical\",\n    text,\n    enabled: typeof lines === \"number\" && lines > 1,\n  });\n\n  const endTruncateOverflow = useOverflowDetection({\n    container: containerRef,\n    type: \"horizontal\",\n    enabled: position === \"end\" && lines === 1,\n  });\n\n  // Determine if content is truncated based on the active mode\n  const isTruncated =\n    (lines === \"auto\" && autoLineOverflow.isOverflowing) ||\n    (typeof lines === \"number\" &&\n      lines > 1 &&\n      multilineOverflow.isOverflowing) ||\n    (position === \"end\" && lines === 1 && endTruncateOverflow.isOverflowing) ||\n    (position === \"middle\" && text !== truncatedText);\n\n  // Get appropriate container styles based on position and lines\n  const getContainerStyles = useCallback(() => {\n    // For explicit line numbers or single line\n    if (lines !== \"auto\") {\n      return {\n        ...style,\n        ...(lines > 1 ? { \"--ds-line-clamp\": lines } : {}),\n      } as React.CSSProperties;\n    }\n\n    // For auto line calculation, we'll let the useLayoutEffect handle it\n    return {\n      ...style,\n      // Set a temporary high value to ensure it fits the parent\n      \"--ds-line-clamp\": 999,\n    } as React.CSSProperties;\n  }, [lines, style]);\n\n  // Handle auto line calculation\n  const handleAutoLineCalculation = useCallback(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const styles = window.getComputedStyle(container);\n    const fontSize = parseFloat(styles.fontSize);\n    const lineHeight =\n      styles.lineHeight === \"normal\"\n        ? fontSize * 1.2\n        : parseFloat(styles.lineHeight);\n\n    const availableHeight = calculateAvailableHeight(container);\n    const maxLines = Math.max(1, Math.floor(availableHeight / lineHeight));\n\n    container.style.setProperty(\"--ds-line-clamp\", String(maxLines));\n  }, []);\n\n  const observe = useCallback(\n    (\n      elements: (HTMLElement | null)[],\n      callback: () => void,\n      cleanup?: () => void\n    ) => {\n      const validElements = elements.filter(Boolean) as HTMLElement[];\n      if (validElements.length === 0) return;\n\n      window.document.fonts?.ready?.then(callback);\n\n      const observer = new ResizeObserver(() => {\n        window.requestAnimationFrame(callback);\n      });\n\n      validElements.forEach((el) => observer.observe(el));\n      return () => {\n        observer.disconnect();\n        if (cleanup) cleanup();\n      };\n    },\n    []\n  );\n\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    let flexContainer =\n      containerProp instanceof HTMLElement\n        ? containerProp\n        : containerProp && \"current\" in containerProp\n        ? containerProp.current\n        : null;\n    if (!container) return;\n    if (!flexContainer) {\n      flexContainer = container.closest(\"[data-truncate-container]\");\n    }\n    if (typeof containerProp !== \"undefined\" && !flexContainer) return;\n\n    // reset\n    setTruncatedText(text);\n\n    // Handle auto-height calculation\n    if (lines === \"auto\") {\n      return observe(\n        [container, container.parentElement],\n        handleAutoLineCalculation\n      );\n    }\n\n    // Handle middle truncation with resize observer\n    if (position === \"middle\") {\n      let cancellationToken = { cancelled: false };\n\n      const handleMiddleTruncate = () => {\n        if (cancellationToken) cancellationToken.cancelled = true;\n\n        const requestCancellationToken = { cancelled: false };\n        cancellationToken = requestCancellationToken;\n\n        // Pass renderText function for styled content measurement\n        const truncated = getMiddleTruncatedString(\n          text,\n          \"\\u2026\",\n          container,\n          renderText\n        );\n\n        if (requestCancellationToken.cancelled) return;\n\n        setTruncatedText(truncated);\n      };\n\n      return observe(\n        [flexContainer ? flexContainer : container],\n        handleMiddleTruncate,\n        () => {\n          cancellationToken.cancelled = true;\n        }\n      );\n    }\n  }, [\n    text,\n    position,\n    lines,\n    containerProp,\n    handleAutoLineCalculation,\n    observe,\n    renderText,\n  ]);\n\n  // Determine content to display\n  const displayContent = renderText ? renderText(truncatedText) : truncatedText;\n  const shouldWrapInSpan = text !== truncatedText;\n\n  return (\n    <span\n      ref={containerRef}\n      style={getContainerStyles()}\n      className={clsx(\n        lines === 1 ? cls(\"truncate\") : cls(\"truncate-multiline\"),\n        position === \"middle\" ? cls(\"truncate-middle\") : cls(\"truncate-end\"),\n        className\n      )}\n      title={isTruncated ? text : undefined}\n      data-truncate-text-node\n      {...rest}\n    >\n      {shouldWrapInSpan ? <span>{displayContent}</span> : displayContent}\n    </span>\n  );\n};\n"],"names":["Truncate","children","position","lines","className","style","containerProp","renderText","rest","cls","useCls","containerRef","useRef","truncatedText","setTruncatedText","useState","text","autoLineOverflow","useOverflowDetection","multilineOverflow","endTruncateOverflow","isTruncated","getContainerStyles","useCallback","handleAutoLineCalculation","container","styles","fontSize","lineHeight","availableHeight","calculateAvailableHeight","maxLines","observe","elements","callback","cleanup","validElements","observer","el","useLayoutEffect","flexContainer","cancellationToken","requestCancellationToken","truncated","getMiddleTruncatedString","displayContent","shouldWrapInSpan","jsx","clsx"],"mappings":";;;;;;;;AAmCO,MAAMA,IAAoC,CAAC;AAAA,EAChD,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAWC;AAAA,EACX,YAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAA,GACNC,IAAeC,EAAoB,IAAI,GACvC,CAACC,GAAeC,CAAgB,IAAIC,EAASd,CAAQ,GAErDe,IAAOf,GAGPgB,IAAmBC,EAAqB;AAAA,IAC5C,WAAWP;AAAA,IACX,oBAAoB,CAACA,EAAa,SAAS,aAAa,EAAE,OAAO,OAAO;AAAA,IACxE,MAAM;AAAA,IACN,MAAAK;AAAA,IACA,SAASb,MAAU;AAAA,EAAA,CACpB,GAEKgB,IAAoBD,EAAqB;AAAA,IAC7C,WAAWP;AAAA,IACX,MAAM;AAAA,IACN,MAAAK;AAAA,IACA,SAAS,OAAOb,KAAU,YAAYA,IAAQ;AAAA,EAAA,CAC/C,GAEKiB,IAAsBF,EAAqB;AAAA,IAC/C,WAAWP;AAAA,IACX,MAAM;AAAA,IACN,SAAST,MAAa,SAASC,MAAU;AAAA,EAAA,CAC1C,GAGKkB,IACHlB,MAAU,UAAUc,EAAiB,iBACrC,OAAOd,KAAU,YAChBA,IAAQ,KACRgB,EAAkB,iBACnBjB,MAAa,SAASC,MAAU,KAAKiB,EAAoB,iBACzDlB,MAAa,YAAYc,MAASH,GAG/BS,IAAqBC,EAAY,MAEjCpB,MAAU,SACL;AAAA,IACL,GAAGE;AAAA,IACH,GAAIF,IAAQ,IAAI,EAAE,mBAAmBA,EAAA,IAAU,CAAA;AAAA,EAAC,IAK7C;AAAA,IACL,GAAGE;AAAA;AAAA,IAEH,mBAAmB;AAAA,EAAA,GAEpB,CAACF,GAAOE,CAAK,CAAC,GAGXmB,IAA4BD,EAAY,MAAM;AAClD,UAAME,IAAYd,EAAa;AAC/B,QAAI,CAACc,EAAW;AAEhB,UAAMC,IAAS,OAAO,iBAAiBD,CAAS,GAC1CE,IAAW,WAAWD,EAAO,QAAQ,GACrCE,IACJF,EAAO,eAAe,WAClBC,IAAW,MACX,WAAWD,EAAO,UAAU,GAE5BG,IAAkBC,EAAyBL,CAAS,GACpDM,IAAW,KAAK,IAAI,GAAG,KAAK,MAAMF,IAAkBD,CAAU,CAAC;AAErE,IAAAH,EAAU,MAAM,YAAY,mBAAmB,OAAOM,CAAQ,CAAC;AAAA,EACjE,GAAG,CAAA,CAAE,GAECC,IAAUT;AAAA,IACd,CACEU,GACAC,GACAC,MACG;AACH,YAAMC,IAAgBH,EAAS,OAAO,OAAO;AAC7C,UAAIG,EAAc,WAAW,EAAG;AAEhC,aAAO,SAAS,OAAO,OAAO,KAAKF,CAAQ;AAE3C,YAAMG,IAAW,IAAI,eAAe,MAAM;AACxC,eAAO,sBAAsBH,CAAQ;AAAA,MACvC,CAAC;AAED,aAAAE,EAAc,QAAQ,CAACE,MAAOD,EAAS,QAAQC,CAAE,CAAC,GAC3C,MAAM;AACX,QAAAD,EAAS,WAAA,GACLF,KAASA,EAAA;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,EAAAI,EAAgB,MAAM;AACpB,UAAMd,IAAYd,EAAa;AAC/B,QAAI6B,IACFlC,aAAyB,cACrBA,IACAA,KAAiB,aAAaA,IAC9BA,EAAc,UACd;AACN,QAAKmB,MACAe,MACHA,IAAgBf,EAAU,QAAQ,2BAA2B,IAE3D,SAAOnB,IAAkB,OAAe,CAACkC,KAM7C;AAAA,UAHA1B,EAAiBE,CAAI,GAGjBb,MAAU;AACZ,eAAO6B;AAAA,UACL,CAACP,GAAWA,EAAU,aAAa;AAAA,UACnCD;AAAA,QAAA;AAKJ,UAAItB,MAAa,UAAU;AACzB,YAAIuC,IAAoB,EAAE,WAAW,GAAA;AAqBrC,eAAOT;AAAA,UACL,CAACQ,KAAgCf,CAAS;AAAA,UApBf,MAAM;AACjC,YAAIgB,QAAqC,YAAY;AAErD,kBAAMC,IAA2B,EAAE,WAAW,GAAA;AAC9C,YAAAD,IAAoBC;AAGpB,kBAAMC,IAAYC;AAAA,cAChB5B;AAAA,cACA;AAAA,cACAS;AAAA,cACAlB;AAAA,YAAA;AAGF,YAAImC,EAAyB,aAE7B5B,EAAiB6B,CAAS;AAAA,UAC5B;AAAA,UAKE,MAAM;AACJ,YAAAF,EAAkB,YAAY;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ;AAAA;AAAA,EACF,GAAG;AAAA,IACDzB;AAAA,IACAd;AAAA,IACAC;AAAA,IACAG;AAAA,IACAkB;AAAA,IACAQ;AAAA,IACAzB;AAAA,EAAA,CACD;AAGD,QAAMsC,IAAiBtC,IAAaA,EAAWM,CAAa,IAAIA,GAC1DiC,IAAmB9B,MAASH;AAElC,SACE,gBAAAkC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKpC;AAAA,MACL,OAAOW,EAAA;AAAA,MACP,WAAW0B;AAAA,QACKvC,EAAdN,MAAU,IAAQ,aAAkB,oBAAR;AAAA,QACJM,EAAxBP,MAAa,WAAe,oBAAyB,cAAR;AAAA,QAC7CE;AAAA,MAAA;AAAA,MAEF,OAAOiB,IAAcL,IAAO;AAAA,MAC5B,2BAAuB;AAAA,MACtB,GAAGR;AAAA,MAEH,UAAAsC,IAAmB,gBAAAC,EAAC,QAAA,EAAM,UAAAF,EAAA,CAAe,IAAUA;AAAA,IAAA;AAAA,EAAA;AAG1D;"}

package/dist/components/truncate/helpers.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 /**
  * Finds the closest parent element that has inline flex display
  * @param element - The starting HTMLElement
@@ -5,11 +6,16 @@
  */
 export declare function findClosestInlineFlexParent(element: HTMLElement): HTMLElement | null;
 export declare function getFlexRemainingSpace(flexContainer: HTMLElement, ignoreElement?: HTMLElement | ((e: HTMLElement) => boolean)): number;
-export declare const measureText: (container: HTMLElement) => {
+/**
+ * Measures text width with optional render function for styled content
+ * @param container - The container element to clone styles from
+ * @param renderText - Optional render function to apply styling to text before measurement
+ */
+export declare const measureText: (container: HTMLElement, renderText?: ((text: string) => React.ReactNode) | null) => {
     measure: (text: string) => number;
     destroy: () => void;
 };
-export declare const getMiddleTruncatedString: (text: string, ellipsis: string, container: HTMLElement) => string;
+export declare const getMiddleTruncatedString: (text: string, ellipsis: string, container: HTMLElement, renderText?: ((text: string) => React.ReactNode) | null) => string;
 export declare const createMeasurementClone: (text: string, container: HTMLElement) => HTMLSpanElement;
 export declare const checkIfTextTruncated: (text: string, container: HTMLElement, availableHeight?: number) => boolean;
 export declare const calculateAvailableHeight: (container: HTMLElement) => number;

package/dist/components/truncate/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/truncate/helpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,WAAW,GACnB,WAAW,GAAG,IAAI,CAqBpB;AAED,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,WAAW,EAC1B,aAAa,GAAE,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,OAAO,CAAQ,UA2ClE;AAED,eAAO,MAAM,WAAW,GAAI,WAAW,WAAW;oBAuB9B,MAAM;;CASzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,MAAM,MAAM,EACZ,UAAU,MAAM,EAChB,WAAW,WAAW,KACrB,MAgEF,CAAC;AAGF,eAAO,MAAM,sBAAsB,GACjC,MAAM,MAAM,EACZ,WAAW,WAAW,oBAavB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,MAAM,MAAM,EACZ,WAAW,WAAW,EACtB,kBAAkB,MAAM,YAQzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,WAAW,WAAW,WAiB9D,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,WAAW,WAAW,WAiB7D,CAAC;AAGF,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,uBAAuB,GAAI,WAAW,WAAW,KAAG,OAEhE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,WAAW,WAAW,EACtB,kBAAkB,MAAM,KACvB,OAGF,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,WAAW,WAAW,EACtB,UAAS,oBAAyB,KACjC,OAyCF,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/truncate/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,WAAW,GACnB,WAAW,GAAG,IAAI,CAqBpB;AAED,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,WAAW,EAC1B,aAAa,GAAE,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW,KAAK,OAAO,CAAQ,UA2ClE;AAKD;;;;GAIG;AACH,eAAO,MAAM,WAAW,GACtB,WAAW,WAAW,EACtB,aAAa,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI;oBAwBrC,MAAM;;CA0DzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GACnC,MAAM,MAAM,EACZ,UAAU,MAAM,EAChB,WAAW,WAAW,EACtB,aAAa,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,IAAI,KACtD,MAgEF,CAAC;AAGF,eAAO,MAAM,sBAAsB,GACjC,MAAM,MAAM,EACZ,WAAW,WAAW,oBAavB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,MAAM,MAAM,EACZ,WAAW,WAAW,EACtB,kBAAkB,MAAM,YAQzB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,WAAW,WAAW,WAiB9D,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,WAAW,WAAW,WAiB7D,CAAC;AAGF,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,uBAAuB,GAAI,WAAW,WAAW,KAAG,OAEhE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,WAAW,WAAW,EACtB,kBAAkB,MAAM,KACvB,OAGF,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,WAAW,WAAW,EACtB,UAAS,oBAAyB,KACjC,OAyCF,CAAC"}