@lax-wp/design-system 0.14.40 → 0.14.42

package/dist/components/data-display/infinite-table/body/cell/DataCell.es.js

@@ -1,152 +1,167 @@
-import { jsxs as $, jsx as t, Fragment as Fe } from "react/jsx-runtime";
-import { useTheme as Ke } from "../../../../../hooks/useTheme.es.js";
-import { formatDate as G, formatCurrency as ce } from "../../../../../utils/formatters.es.js";
-import { getTableRowBgClassNamesByStatus as je } from "../../../../../constants/table.es.js";
-import { useTableConfig as We } from "../../../../../providers/design-system-provider/hooks.es.js";
-import H from "../../../../tooltip/Tooltip.es.js";
-import { Typography as Ue } from "../../../typography/Typography.es.js";
-import { OpenInNewRounded as Ye } from "@mui/icons-material";
+import { jsxs as $, jsx as r, Fragment as We } from "react/jsx-runtime";
+import { useTheme as Ue } from "../../../../../hooks/useTheme.es.js";
+import { formatDate as q, formatCurrency as de } from "../../../../../utils/formatters.es.js";
+import { getTableRowBgClassNamesByStatus as Ye } from "../../../../../constants/table.es.js";
+import { useTableConfig as Be } from "../../../../../providers/design-system-provider/hooks.es.js";
+import J from "../../../../tooltip/Tooltip.es.js";
+import { Typography as Ge } from "../../../typography/Typography.es.js";
+import { OpenInNewRounded as He } from "@mui/icons-material";
 import x from "../../../../../_virtual/index.es.js";
-import C, { useContext as Be, useCallback as M, useState as S, useRef as X, useEffect as v } from "react";
-import { Link as Ge } from "react-router-dom";
-import { TableContext as He } from "../../context.es.js";
-import { InlineEditField as Xe } from "./InlineEditField.es.js";
-import { CELL_DEFAULT_RIGHT_OFFSET as qe, CELL_INDENT_PER_LEVEL_PX as q, CELL_STICKY_SHADOW_DARK as Je, CELL_STICKY_SHADOW_LIGHT as Qe } from "../../constants.es.js";
-import { LoadingSpinnerIcon as J, KeyboardArrowDownIcon as Ze, KeyboardArrowRightFilledIcon as Pe, LinkIcon as Ee } from "../../../../icon/icons.generated.es.js";
-let Q;
-const me = (e) => {
+import g, { useContext as Xe, useCallback as C, useState as D, useRef as Q, useEffect as v } from "react";
+import { Link as qe } from "react-router-dom";
+import { TableContext as Je } from "../../context.es.js";
+import { getCellText as Qe } from "../../copy-text.es.js";
+import { InlineEditField as Ze } from "./InlineEditField.es.js";
+import { CELL_DEFAULT_RIGHT_OFFSET as Pe, CELL_INDENT_PER_LEVEL_PX as Z, CELL_STICKY_SHADOW_DARK as Ee, CELL_STICKY_SHADOW_LIGHT as eo } from "../../constants.es.js";
+import { LoadingSpinnerIcon as P, KeyboardArrowDownIcon as oo, KeyboardArrowRightFilledIcon as to, LinkIcon as ro } from "../../../../icon/icons.generated.es.js";
+let E;
+const fe = (e) => {
   const o = Number(e);
   if (Number.isNaN(o) || e === null || e === void 0)
     return "0ms";
   if (o >= 864e5) {
-    const p = Math.floor(o / 864e5), d = Math.floor(o % 864e5 / 36e5), i = Math.floor(o % 36e5 / 6e4), h = Math.floor(o % 6e4 / 1e3);
-    return `${p}d ${d}h ${i}m ${h}s`;
+    const p = Math.floor(o / 864e5), d = Math.floor(o % 864e5 / 36e5), u = Math.floor(o % 36e5 / 6e4), h = Math.floor(o % 6e4 / 1e3);
+    return `${p}d ${d}h ${u}m ${h}s`;
   }
   if (o >= 36e5) {
-    const p = Math.floor(o / 36e5), d = Math.floor(o % 36e5 / 6e4), i = Math.floor(o % 6e4 / 1e3);
-    return `${p}h ${d}m ${i}s`;
+    const p = Math.floor(o / 36e5), d = Math.floor(o % 36e5 / 6e4), u = Math.floor(o % 6e4 / 1e3);
+    return `${p}h ${d}m ${u}s`;
   }
   if (o >= 6e4) {
     const p = Math.floor(o / 6e4), d = Math.floor(o % 6e4 / 1e3);
     return `${p}m ${d}s`;
   }
   return o >= 1e3 ? `${(o / 1e3).toFixed(2)}s` : `${o}ms`;
-}, eo = ({ children: e, withLink: o, linkTo: p, rowData: d, disableRowClick: i }) => o && !i ? /* @__PURE__ */ t(Ge, { to: p?.(d?.id, d) || "", children: e }) : e, oo = ({
+}, ao = ({ children: e, withLink: o, linkTo: p, rowData: d, disableRowClick: u }) => o && !u ? /* @__PURE__ */ r(qe, { to: p?.(d?.id, d) || "", children: e }) : e, no = ({
   cell: e,
   id: o,
   nextWidthSum: p,
   isLastCell: d,
-  rowHovering: i,
+  rowHovering: u,
   index: h,
-  isFirstStickyCell: de,
-  handleCellClick: fe,
+  isFirstStickyCell: pe,
+  handleCellClick: we,
   currentData: y,
-  highlightSubstring: D,
-  is_read: to,
-  is_modified: Z,
-  is_row_modified: P,
+  highlightSubstring: S,
+  is_read: so,
+  is_modified: ee,
+  is_row_modified: oe,
   is_deleted: R,
-  is_added: I,
+  is_added: z,
   level: b,
   inlineEditing: k,
   isInlineEditing: l,
   setRowHovering: O,
-  handleCellValueChange: pe,
-  cellRef: we,
-  handleUpdateCellData: he,
-  registerValidation: ye,
-  loadingExpand: be,
-  toggleRowExpand: E,
-  isDraggingOver: ve,
+  handleCellValueChange: he,
+  cellRef: ye,
+  handleUpdateCellData: be,
+  registerValidation: ve,
+  loadingExpand: ke,
+  toggleRowExpand: te,
+  isDraggingOver: xe,
   isLoading: V,
-  is_incomplete: ee,
-  pendingEdit: a,
-  hasPendingEdit: u,
-  pendingValidationError: ke
+  is_incomplete: re,
+  pendingEdit: s,
+  hasPendingEdit: i,
+  pendingValidationError: Te
 }) => {
   const {
-    cascadingTableConfig: oe,
-    originalsOnly: xe,
-    maxLevel: Te,
-    showNewItem: ro,
-    expandedRows: Ce,
-    rowLinkConfig: z,
-    multiSelectConfig: ge,
-    cellEditing: A,
-    cellEditingValue: F,
-    allowInlineEdit: te,
-    fieldOperationLoading: _e,
-    pendingEdits: Ne,
-    selectedRowId: K
-  } = Be(He), Le = K != null && String(K) === String(o), $e = We(), j = (e?.column?.key ? e?.row?.original?.__cellMetadata?.[e.column.key] : void 0)?.is_locked ?? e?.column?.is_locked, W = (e?.column?.key ? Ne?.[o]?.[e.column.key]?.validationError : null) || ke || null, re = k === e.column.key && e?.column?.canEdit && !j && !e?.column?.is_disabled, Me = _e === `${o}-${e?.column?.id}`, { theme: Se } = Ke(), De = Se === "dark", Oe = M(() => O(o), [O, o]), Ve = M(() => O(null), [O]), g = $e?.formatDuration, [n, f] = S(
-    e?.column?.dataType === "duration" && e?.value ? g ? g(e.value) : me(e.value) : e.value
-  ), [w, ae] = S(null), [U, Re] = S(!1), [Ie, ne] = S(!1), [ze, se] = S(!1), _ = X(null), N = X(), L = X(), { selectedColumnIds: ie = [] } = ge || {}, ue = !Object.prototype.hasOwnProperty.call(e?.column?.meta ?? {}, "shouldHighlight") || e?.column?.meta?.shouldHighlight, le = M(() => {
-    _.current && Re(_.current.scrollWidth > _.current.clientWidth);
-  }, []), Y = M((r) => {
-    N.current && clearTimeout(N.current), r ? ne(!0) : N.current = setTimeout(() => ne(!1), 200);
-  }, []), B = M((r) => {
-    L.current && clearTimeout(L.current), r ? se(!0) : L.current = setTimeout(() => se(!1), 200);
+    cascadingTableConfig: ae,
+    originalsOnly: Ce,
+    maxLevel: ge,
+    showNewItem: uo,
+    expandedRows: _e,
+    rowLinkConfig: F,
+    multiSelectConfig: Ne,
+    cellEditing: K,
+    cellEditingValue: A,
+    allowInlineEdit: ne,
+    fieldOperationLoading: Le,
+    pendingEdits: Me,
+    selectedRowId: j,
+    cellContextMenuConfig: W,
+    openCellContextMenu: U
+  } = Xe(Je), $e = j != null && String(j) === String(o), De = Be(), Y = (e?.column?.key ? e?.row?.original?.__cellMetadata?.[e.column.key] : void 0)?.is_locked ?? e?.column?.is_locked, B = (e?.column?.key ? Me?.[o]?.[e.column.key]?.validationError : null) || Te || null, I = k === e.column.key && e?.column?.canEdit && !Y && !e?.column?.is_disabled, Se = Le === `${o}-${e?.column?.id}`, { theme: Oe } = Ue(), Ve = Oe === "dark", Ie = C(() => O(o), [O, o]), Re = C(() => O(null), [O]), _ = De?.formatDuration, [n, f] = D(
+    e?.column?.dataType === "duration" && e?.value ? _ ? _(e.value) : fe(e.value) : e.value
+  ), [w, se] = D(null), [G, ze] = D(!1), [Fe, ue] = D(!1), [Ke, ie] = D(!1), N = Q(null), L = Q(), M = Q(), { selectedColumnIds: le = [] } = Ne || {}, ce = !Object.prototype.hasOwnProperty.call(e?.column?.meta ?? {}, "shouldHighlight") || e?.column?.meta?.shouldHighlight, me = C(() => {
+    N.current && ze(N.current.scrollWidth > N.current.clientWidth);
+  }, []), H = C((t) => {
+    L.current && clearTimeout(L.current), t ? ue(!0) : L.current = setTimeout(() => ue(!1), 200);
+  }, []), X = C((t) => {
+    M.current && clearTimeout(M.current), t ? ie(!0) : M.current = setTimeout(() => ie(!1), 200);
   }, []), T = x({
-    "bg-amber-100 dark:bg-amber-900/30": u,
-    "bg-neutral-100 dark:bg-black-600": i === o && !l && !u && !(R || y?.is_deleted) && !(I || y?.is_added),
-    "bg-error-200 dark:bg-error-900": i === o && !l && !u && (R || y?.is_deleted),
-    "bg-success-100 dark:bg-success-800": i === o && !l && !u && (I || y?.is_added),
-    "bg-warning-100 dark:bg-warning-950": i === o && !l && !u && (ee || Z || P || y?.is_row_modified),
+    "bg-amber-100 dark:bg-amber-900/30": i,
+    "bg-neutral-100 dark:bg-black-600": u === o && !l && !i && !(R || y?.is_deleted) && !(z || y?.is_added),
+    "bg-error-200 dark:bg-error-900": u === o && !l && !i && (R || y?.is_deleted),
+    "bg-success-100 dark:bg-success-800": u === o && !l && !i && (z || y?.is_added),
+    "bg-warning-100 dark:bg-warning-950": u === o && !l && !i && (re || ee || oe || y?.is_row_modified),
     // 'bg-primary-50 dark:bg-black-700': !is_incomplete && !is_read && showNewItem && !isLoading && rowHovering !== id && !isInlineEditing && !hasPendingEdit,
-    "bg-warning-50 dark:bg-orange-900": (ee || Z || P || y?.is_row_modified) && !V && i !== o && !l && !u,
-    "bg-error-100 dark:bg-error-975": (R || y?.is_deleted) && !V && i !== o && !l && !u,
-    "bg-success-50 dark:bg-success-900": (I || y?.is_added) && !V && i !== o && !l && !u,
-    "bg-primary-50 dark:bg-primary-900": (ve || l) && !u,
-    "bg-primary-50 dark:bg-primary-800": ie?.includes(e.column.id) && !l && !u,
-    "bg-primary-50 dark:bg-primary-700": Le && i !== o && !l && !u && !V,
-    [je[e?.row?.original?.__rowBgStatus]]: e?.row?.original?.__rowBgStatus && !l && !u
-  }), Ae = (r) => {
-    e.column?.disableRowClick || fe(r);
-  };
-  v(() => (e?.row?.original?.status === "running" && e.column?.dataType === "duration" && (Q = setInterval(() => {
-    const s = new Date(G(e?.row?.original?.created_at || e?.row?.original?.executed_on, { withTime: !0, format: "yyyy-MM-dd HH:mm:ss" })), m = Math.abs((/* @__PURE__ */ new Date()).getTime() - new Date(s).getTime());
-    f(g ? g(m) : me(m));
+    "bg-warning-50 dark:bg-orange-900": (re || ee || oe || y?.is_row_modified) && !V && u !== o && !l && !i,
+    "bg-error-100 dark:bg-error-975": (R || y?.is_deleted) && !V && u !== o && !l && !i,
+    "bg-success-50 dark:bg-success-900": (z || y?.is_added) && !V && u !== o && !l && !i,
+    "bg-primary-50 dark:bg-primary-900": (xe || l) && !i,
+    "bg-primary-50 dark:bg-primary-800": le?.includes(e.column.id) && !l && !i,
+    "bg-primary-50 dark:bg-primary-700": $e && u !== o && !l && !i && !V,
+    [Ye[e?.row?.original?.__rowBgStatus]]: e?.row?.original?.__rowBgStatus && !l && !i
+  }), Ae = (t) => {
+    e.column?.disableRowClick || we(t);
+  }, je = C((t) => {
+    if (W?.isEnabled === !1 || !U || I) return;
+    const a = {
+      rowId: o,
+      rowData: e?.row?.original ?? {},
+      columnKey: e?.column?.key ?? "",
+      column: e.column,
+      value: e?.value,
+      text: Qe(n, e?.value, t.currentTarget),
+      cell: e
+    };
+    W?.isDisabledForCell?.(a) || (t.preventDefault(), t.stopPropagation(), U({ x: t.clientX, y: t.clientY, target: a }));
+  }, [W, U, I, o, e, n]);
+  v(() => (e?.row?.original?.status === "running" && e.column?.dataType === "duration" && (E = setInterval(() => {
+    const a = new Date(q(e?.row?.original?.created_at || e?.row?.original?.executed_on, { withTime: !0, format: "yyyy-MM-dd HH:mm:ss" })), m = Math.abs((/* @__PURE__ */ new Date()).getTime() - new Date(a).getTime());
+    f(_ ? _(m) : fe(m));
   }, 500)), () => {
-    Q && clearInterval(Q);
-  }), [n, e.value, e?.row?.original?.created_at, e?.row?.original?.executed_on, e?.row?.original?.status, e.column?.dataType, g]), v(() => {
-    (e?.column?.tooltipCellKey || e?.column?.type?.toLowerCase() === "url") && (e?.column?.type?.toLowerCase() === "url" ? ae(e?.value) : ae(e?.row?.original?.[String(e?.column?.tooltipCellKey)]));
+    E && clearInterval(E);
+  }), [n, e.value, e?.row?.original?.created_at, e?.row?.original?.executed_on, e?.row?.original?.status, e.column?.dataType, _]), v(() => {
+    (e?.column?.tooltipCellKey || e?.column?.type?.toLowerCase() === "url") && (e?.column?.type?.toLowerCase() === "url" ? se(e?.value) : se(e?.row?.original?.[String(e?.column?.tooltipCellKey)]));
   }, [e?.column?.tooltipCellKey, e?.row?.original, e?.column?.type, e?.value]), v(() => {
     if (e?.column?.type?.toLowerCase() === "currency")
-      if (a?.value !== void 0) {
-        const r = e?.row?.original?.__rawData, s = e?.column?.Header, m = a?.meta?.currency_code || r?.[s]?.currency_code || "USD";
-        f(ce(a.value, m));
+      if (s?.value !== void 0) {
+        const t = e?.row?.original?.__rawData, a = e?.column?.Header, m = s?.meta?.currency_code || t?.[a]?.currency_code || "USD";
+        f(de(s.value, m));
       } else {
-        const r = e?.row?.original?.__rawData, s = e?.column?.Header;
-        f(ce(e?.value, r?.[s]?.currency_code || "USD"));
+        const t = e?.row?.original?.__rawData, a = e?.column?.Header;
+        f(de(e?.value, t?.[a]?.currency_code || "USD"));
       }
-  }, [e?.value, e?.column?.type, e?.column?.Header, e?.row?.original?.__rawData, a?.value, a?.meta?.currency_code]), v(() => {
-    e?.column?.type?.toLowerCase() === "percentage" && (a?.value !== void 0 ? f(a.value?.toString() + "%" || "") : f(e?.value?.toString() + "%" || ""));
-  }, [e?.value, e?.column?.type, a?.value]), v(() => {
-    const r = e?.column?.type?.toLowerCase() || "";
-    if (["date", "datetime"].includes(r))
-      if (a?.value !== void 0) {
-        const s = r === "datetime", m = G(a.value, { withTime: s, skipTimezone: !0 });
-        f(m || a.value);
+  }, [e?.value, e?.column?.type, e?.column?.Header, e?.row?.original?.__rawData, s?.value, s?.meta?.currency_code]), v(() => {
+    e?.column?.type?.toLowerCase() === "percentage" && (s?.value !== void 0 ? f(s.value?.toString() + "%" || "") : f(e?.value?.toString() + "%" || ""));
+  }, [e?.value, e?.column?.type, s?.value]), v(() => {
+    const t = e?.column?.type?.toLowerCase() || "";
+    if (["date", "datetime"].includes(t))
+      if (s?.value !== void 0) {
+        const a = t === "datetime", m = q(s.value, { withTime: a, skipTimezone: !0 });
+        f(m || s.value);
       } else f(e.value);
-  }, [e?.value, e?.column?.type, a?.value]), v(() => {
-    const r = e?.column?.type?.toLowerCase() || "";
-    ["currency", "percentage", "duration", "boolean", "date", "datetime"].includes(r) || (a?.value !== void 0 ? f(a.value) : e?.column?.dataType !== "duration" && f(e.value));
-  }, [e?.value, e?.column?.type, e?.column?.dataType, a?.value]), v(() => {
-    if (e?.column?.type?.toLowerCase() === "boolean" && te) {
-      const r = a?.value !== void 0 ? a.value : e?.value;
-      f(r === !0 || r === "true" || r === "True" || r === "Yes" || r === 1 ? "Yes" : "No");
+  }, [e?.value, e?.column?.type, s?.value]), v(() => {
+    const t = e?.column?.type?.toLowerCase() || "";
+    ["currency", "percentage", "duration", "boolean", "date", "datetime"].includes(t) || (s?.value !== void 0 ? f(s.value) : e?.column?.dataType !== "duration" && f(e.value));
+  }, [e?.value, e?.column?.type, e?.column?.dataType, s?.value]), v(() => {
+    if (e?.column?.type?.toLowerCase() === "boolean" && ne) {
+      const t = s?.value !== void 0 ? s.value : e?.value;
+      f(t === !0 || t === "true" || t === "True" || t === "Yes" || t === 1 ? "Yes" : "No");
     }
-  }, [e?.value, e?.column?.type, te, a?.value]), v(() => () => {
-    N.current && clearTimeout(N.current), L.current && clearTimeout(L.current);
+  }, [e?.value, e?.column?.type, ne, s?.value]), v(() => () => {
+    L.current && clearTimeout(L.current), M.current && clearTimeout(M.current);
   }, []);
-  const c = C.isValidElement(n);
+  const c = g.isValidElement(n);
   return /* @__PURE__ */ $(
     "td",
     {
       id: e.value,
       "data-column-key": e?.column?.key,
       ...e.getCellProps(),
-      onClick: z?.isEnabled ? void 0 : Ae,
+      onClick: F?.isEnabled ? void 0 : Ae,
       className: x(
         "h-row",
         {
@@ -158,23 +173,24 @@ const me = (e) => {
           "overflow-x-hidden overflow-y-visible": k !== e.column.key && c,
           "overflow-hidden": k !== e.column.key && !c
         },
-        W && !re ? "outline outline-2 outline-error-500 -outline-offset-2 z-[5]" : "",
+        B && !I ? "outline outline-2 outline-error-500 -outline-offset-2 z-[5]" : "",
         `${T || "bg-white dark:bg-black-800"}`
       ),
-      style: { minWidth: `${e.column.width}px`, maxWidth: `${e.column.width}px`, right: e?.column?.sticky ? `${p}px` : qe, paddingLeft: b > 0 && h === 0 ? `${b * q}px` : void 0 },
-      onMouseEnter: Oe,
-      onMouseLeave: Ve,
+      style: { minWidth: `${e.column.width}px`, maxWidth: `${e.column.width}px`, right: e?.column?.sticky ? `${p}px` : Pe, paddingLeft: b > 0 && h === 0 ? `${b * Z}px` : void 0 },
+      onMouseEnter: Ie,
+      onMouseLeave: Re,
+      onContextMenu: je,
       children: [
-        /* @__PURE__ */ t(eo, { withLink: z?.isEnabled, linkTo: z?.linkTo || void 0, rowData: e?.row?.original, disableRowClick: e?.column?.disableRowClick, children: (Array.isArray(A) ? A.includes(`${o}-${e?.column?.id}`) : A === `${o}-${e?.column?.id}`) ? /* @__PURE__ */ $("div", { className: "h-row top-0 font-medium font-inter w-full absolute flex items-center px-4", children: [
-          /* @__PURE__ */ t("span", { className: "text-neutral-400 dark:text-black-400 truncate", children: (() => {
-            const r = `${o}-${e?.column?.id}`, s = typeof F == "object" ? F?.[r] : F, m = e?.column?.type?.toLowerCase();
-            return m === "boolean" ? s === !0 || s === "true" || s === "True" ? "Yes" : "No" : (m === "date" || m === "datetime") && s ? G(s, { withTime: m === "datetime", skipTimezone: !0 }) || String(s) : s != null ? String(s) : n;
+        /* @__PURE__ */ r(ao, { withLink: F?.isEnabled, linkTo: F?.linkTo || void 0, rowData: e?.row?.original, disableRowClick: e?.column?.disableRowClick, children: (Array.isArray(K) ? K.includes(`${o}-${e?.column?.id}`) : K === `${o}-${e?.column?.id}`) ? /* @__PURE__ */ $("div", { className: "h-row top-0 font-medium font-inter w-full absolute flex items-center px-4", children: [
+          /* @__PURE__ */ r("span", { className: "text-neutral-400 dark:text-black-400 truncate", children: (() => {
+            const t = `${o}-${e?.column?.id}`, a = typeof A == "object" ? A?.[t] : A, m = e?.column?.type?.toLowerCase();
+            return m === "boolean" ? a === !0 || a === "true" || a === "True" ? "Yes" : "No" : (m === "date" || m === "datetime") && a ? q(a, { withTime: m === "datetime", skipTimezone: !0 }) || String(a) : a != null ? String(a) : n;
           })() }),
-          /* @__PURE__ */ t("div", { className: "ml-2 flex items-center gap-1.5", children: /* @__PURE__ */ t(J, { className: "spinner text-neutral-600 dark:text-white", size: 12 }) })
-        ] }) : k === e.column.key && e?.column?.canEdit && !j && !e?.column?.is_disabled ? /* @__PURE__ */ t("div", { className: "h-row w-full absolute top-0 left-0 flex items-center", style: { marginLeft: b > 0 && h === 0 ? `-${b * q}px` : void 0, width: b > 0 && h === 0 ? `calc(100% + ${b * q}px)` : "100%" }, children: /* @__PURE__ */ t(Xe, { cell: e, id: o, inlineEditing: k, cellRef: we, handleCellValueChange: pe, handleUpdateCellData: he, registerValidation: ye }) }) : /* @__PURE__ */ $(Fe, { children: [
-          b > 0 && h === 0 && /* @__PURE__ */ t("div", { className: "h-row border-l border-neutral-300 dark:border-black-600 ml-2" }),
-          /* @__PURE__ */ t("div", { className: "min-h-6", children: /* @__PURE__ */ t(
-            H,
+          /* @__PURE__ */ r("div", { className: "ml-2 flex items-center gap-1.5", children: /* @__PURE__ */ r(P, { className: "spinner text-neutral-600 dark:text-white", size: 12 }) })
+        ] }) : k === e.column.key && e?.column?.canEdit && !Y && !e?.column?.is_disabled ? /* @__PURE__ */ r("div", { className: "h-row w-full absolute top-0 left-0 flex items-center", style: { marginLeft: b > 0 && h === 0 ? `-${b * Z}px` : void 0, width: b > 0 && h === 0 ? `calc(100% + ${b * Z}px)` : "100%" }, children: /* @__PURE__ */ r(Ze, { cell: e, id: o, inlineEditing: k, cellRef: ye, handleCellValueChange: he, handleUpdateCellData: be, registerValidation: ve }) }) : /* @__PURE__ */ $(We, { children: [
+          b > 0 && h === 0 && /* @__PURE__ */ r("div", { className: "h-row border-l border-neutral-300 dark:border-black-600 ml-2" }),
+          /* @__PURE__ */ r("div", { className: "min-h-6", children: /* @__PURE__ */ r(
+            J,
             {
               title: w && e?.column?.type?.toLowerCase() !== "url" ? w : void 0,
               hideTooltip: !w || e?.column?.type?.toLowerCase() === "url",
@@ -183,36 +199,36 @@ const me = (e) => {
               children: /* @__PURE__ */ $(
                 "div",
                 {
-                  className: x(`h-row top-0 font-medium font-inter overflow-index-auto whitespace-nowrap text-ellipsis dark:text-black-200 w-full absolute flex items-center ${T || "bg-white dark:bg-black-800"}`, c ? "overflow-x-hidden overflow-y-visible" : "overflow-x-hidden", { "border border-b-0 border-t-0 border-primary-600 dark:border-blue-800": ie?.includes(e.column.id) }),
-                  style: e?.column?.sticky && de ? { boxShadow: De ? Je : Qe } : {},
+                  className: x(`h-row top-0 font-medium font-inter overflow-index-auto whitespace-nowrap text-ellipsis dark:text-black-200 w-full absolute flex items-center ${T || "bg-white dark:bg-black-800"}`, c ? "overflow-x-hidden overflow-y-visible" : "overflow-x-hidden", { "border border-b-0 border-t-0 border-primary-600 dark:border-blue-800": le?.includes(e.column.id) }),
+                  style: e?.column?.sticky && pe ? { boxShadow: Ve ? Ee : eo } : {},
                   children: [
-                    oe?.isCascading && !xe && h === 0 && /* @__PURE__ */ t("div", { className: x("w-[22px] h-row flex items-center px-4", `${T || "bg-white dark:bg-black-800"}`), id: "cascading", children: Te > b && (e?.row?.original?.__has_children || oe?.showAllDropdown) && /* @__PURE__ */ t("div", { children: be ? /* @__PURE__ */ t(J, { className: "text-neutral-600 dark:text-white", size: 8 }) : /* @__PURE__ */ t("div", { children: Ce?.[o]?.isOpen ? /* @__PURE__ */ t(Ze, { size: 20, className: "text-neutral-400 dark:text-neutral-400", onClick: (r) => {
-                      E(), r.stopPropagation();
-                    } }) : /* @__PURE__ */ t(Pe, { size: 20, className: "text-neutral-400 dark:text-neutral-400", onClick: (r) => {
-                      E(), r.stopPropagation();
+                    ae?.isCascading && !Ce && h === 0 && /* @__PURE__ */ r("div", { className: x("w-[22px] h-row flex items-center px-4", `${T || "bg-white dark:bg-black-800"}`), id: "cascading", children: ge > b && (e?.row?.original?.__has_children || ae?.showAllDropdown) && /* @__PURE__ */ r("div", { children: ke ? /* @__PURE__ */ r(P, { className: "text-neutral-600 dark:text-white", size: 8 }) : /* @__PURE__ */ r("div", { children: _e?.[o]?.isOpen ? /* @__PURE__ */ r(oo, { size: 20, className: "text-neutral-400 dark:text-neutral-400", onClick: (t) => {
+                      te(), t.stopPropagation();
+                    } }) : /* @__PURE__ */ r(to, { size: 20, className: "text-neutral-400 dark:text-neutral-400", onClick: (t) => {
+                      te(), t.stopPropagation();
                     } }) }) }) }),
-                    e?.column?.type?.toLowerCase() === "url" && w ? /* @__PURE__ */ t(
-                      H,
+                    e?.column?.type?.toLowerCase() === "url" && w ? /* @__PURE__ */ r(
+                      J,
                       {
-                        title: /* @__PURE__ */ t("div", { onMouseEnter: () => Y(!0), onMouseLeave: () => Y(!1), children: /* @__PURE__ */ t("a", { href: w, target: "_blank", rel: "noopener noreferrer", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ $("div", { className: "flex gap-1 items-center w-full", children: [
-                          /* @__PURE__ */ t("div", { className: "w-4 h-4", children: /* @__PURE__ */ t(Ee, { height: 16, width: 16 }) }),
-                          /* @__PURE__ */ t(Ue, { variant: "medium", size: "small", className: "truncate", appearance: "custom", children: w }),
-                          /* @__PURE__ */ t(Ye, { sx: { height: "16px", width: "16px", color: "#016DCF" } })
+                        title: /* @__PURE__ */ r("div", { onMouseEnter: () => H(!0), onMouseLeave: () => H(!1), children: /* @__PURE__ */ r("a", { href: w, target: "_blank", rel: "noopener noreferrer", onClick: (t) => t.stopPropagation(), children: /* @__PURE__ */ $("div", { className: "flex gap-1 items-center w-full", children: [
+                          /* @__PURE__ */ r("div", { className: "w-4 h-4", children: /* @__PURE__ */ r(ro, { height: 16, width: 16 }) }),
+                          /* @__PURE__ */ r(Ge, { variant: "medium", size: "small", className: "truncate", appearance: "custom", children: w }),
+                          /* @__PURE__ */ r(He, { sx: { height: "16px", width: "16px", color: "#016DCF" } })
                         ] }) }) }),
                         placement: "top",
-                        open: Ie,
-                        onOpenChange: Y,
+                        open: Fe,
+                        onOpenChange: H,
                         className: "block w-full min-w-0 overflow-hidden",
-                        children: /* @__PURE__ */ t("div", { className: "w-full h-row flex items-center px-4 min-w-0 overflow-hidden text-primary-400", children: /* @__PURE__ */ t("span", { ref: _, onMouseEnter: le, className: "truncate w-full", children: D && ue && !C.isValidElement(n) && typeof n != "object" ? D(n) : n }) })
+                        children: /* @__PURE__ */ r("div", { className: "w-full h-row flex items-center px-4 min-w-0 overflow-hidden text-primary-400", children: /* @__PURE__ */ r("span", { ref: N, "data-cell-content": !0, onMouseEnter: me, className: "truncate w-full", children: S && ce && !g.isValidElement(n) && typeof n != "object" ? S(n) : n }) })
                       }
-                    ) : /* @__PURE__ */ t(
-                      H,
+                    ) : /* @__PURE__ */ r(
+                      J,
                       {
-                        title: U && n && !c ? /* @__PURE__ */ t(
+                        title: G && n && !c ? /* @__PURE__ */ r(
                           "div",
                           {
-                            onMouseEnter: () => B(!0),
-                            onMouseLeave: () => B(!1),
+                            onMouseEnter: () => X(!0),
+                            onMouseLeave: () => X(!1),
                             className: "max-h-96 overflow-y-auto whitespace-pre-wrap break-words no-scroll",
                             children: String(n)
                           }
@@ -220,16 +236,17 @@ const me = (e) => {
                         placement: "top",
                         delayShow: !0,
                         hideTooltip: !!w,
-                        open: U && !w && !c ? ze : void 0,
-                        onOpenChange: U && !w && !c ? B : void 0,
+                        open: G && !w && !c ? Ke : void 0,
+                        onOpenChange: G && !w && !c ? X : void 0,
                         className: x("block w-full min-w-0", c ? "overflow-x-hidden overflow-y-visible" : "overflow-hidden"),
-                        children: /* @__PURE__ */ t("div", { className: x("w-full h-row flex items-center px-4 min-w-0", c ? "overflow-x-hidden overflow-y-visible" : "overflow-hidden"), children: /* @__PURE__ */ t(
+                        children: /* @__PURE__ */ r("div", { className: x("w-full h-row flex items-center px-4 min-w-0", c ? "overflow-x-hidden overflow-y-visible" : "overflow-hidden"), children: /* @__PURE__ */ r(
                           "span",
                           {
-                            ref: c ? void 0 : _,
-                            onMouseEnter: c ? void 0 : le,
+                            ref: c ? void 0 : N,
+                            "data-cell-content": !0,
+                            onMouseEnter: c ? void 0 : me,
                             className: x(c ? "flex min-w-0 max-w-full items-center justify-start gap-1" : "truncate w-full"),
-                            children: D && ue && !C.isValidElement(n) && typeof n != "object" ? D(n) : C.isValidElement(n) ? typeof n.type == "string" ? n : C.cloneElement(n, {
+                            children: S && ce && !g.isValidElement(n) && typeof n != "object" ? S(n) : g.isValidElement(n) ? typeof n.type == "string" ? n : g.cloneElement(n, {
                               ...n.props,
                               containerWidth: e.column.width
                             }) : n
@@ -243,14 +260,14 @@ const me = (e) => {
             }
           ) })
         ] }) }),
-        W && !re && /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-0 right-0 h-row flex items-end pointer-events-none z-[5]", children: /* @__PURE__ */ t("div", { className: "w-full bg-error-50 dark:bg-error-975 px-1.5 py-0.5 truncate", children: /* @__PURE__ */ t("span", { className: "text-error-600 text-2xs font-medium leading-none", children: W }) }) }),
-        Me && !(k === e.column.key && e?.column?.canEdit && !j && !e?.column?.is_disabled) && /* @__PURE__ */ t("div", { className: "absolute top-0 right-0 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-10", children: /* @__PURE__ */ t(J, { className: "text-primary-600 dark:text-white", size: 8 }) })
+        B && !I && /* @__PURE__ */ r("div", { className: "absolute bottom-0 left-0 right-0 h-row flex items-end pointer-events-none z-[5]", children: /* @__PURE__ */ r("div", { className: "w-full bg-error-50 dark:bg-error-975 px-1.5 py-0.5 truncate", children: /* @__PURE__ */ r("span", { className: "text-error-600 text-2xs font-medium leading-none", children: B }) }) }),
+        Se && !(k === e.column.key && e?.column?.canEdit && !Y && !e?.column?.is_disabled) && /* @__PURE__ */ r("div", { className: "absolute top-0 right-0 bg-white dark:bg-black-800 rounded-full w-5 h-5 flex items-center justify-center border border-primary-300 dark:border-primary-600 shadow-sm z-10", children: /* @__PURE__ */ r(P, { className: "text-primary-600 dark:text-white", size: 8 }) })
       ]
     },
     h
   );
-}, To = C.memo(oo);
+}, Lo = g.memo(no);
 export {
-  To as DataCell
+  Lo as DataCell
 };
 //# sourceMappingURL=DataCell.es.js.map