@lax-wp/design-system 0.14.34 → 0.14.36

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

@@ -1,235 +1,254 @@
-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 J, formatCurrency as fe } 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 Q 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 S, useRef as Z, useEffect as v } from "react";
+import { Link as qe } from "react-router-dom";
+import { TableContext as Je } from "../../context.es.js";
+import { InlineEditField as Qe } from "./InlineEditField.es.js";
+import { CELL_DEFAULT_RIGHT_OFFSET as Ze, CELL_INDENT_PER_LEVEL_PX as P, CELL_STICKY_SHADOW_DARK as Pe, CELL_STICKY_SHADOW_LIGHT as Ee } from "../../constants.es.js";
+import { LoadingSpinnerIcon as E, KeyboardArrowDownIcon as eo, KeyboardArrowRightFilledIcon as oo, LinkIcon as to } from "../../../../icon/icons.generated.es.js";
+let ee;
+const pe = (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 l = Math.floor(o / 864e5), i = Math.floor(o % 864e5 / 36e5), u = Math.floor(o % 36e5 / 6e4), w = Math.floor(o % 6e4 / 1e3);
+    return `${l}d ${i}h ${u}m ${w}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 l = Math.floor(o / 36e5), i = Math.floor(o % 36e5 / 6e4), u = Math.floor(o % 6e4 / 1e3);
+    return `${l}h ${i}m ${u}s`;
   }
   if (o >= 6e4) {
-    const p = Math.floor(o / 6e4), d = Math.floor(o % 6e4 / 1e3);
-    return `${p}m ${d}s`;
+    const l = Math.floor(o / 6e4), i = Math.floor(o % 6e4 / 1e3);
+    return `${l}m ${i}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 = ({
+}, ro = (e, o, l) => {
+  const i = (V) => ["string", "number", "boolean"].includes(typeof V), u = i(e) ? e : o;
+  return i(u) ? String(u) : (l?.querySelector("[data-cell-content]") ?? l)?.innerText?.trim() || "";
+}, ao = ({ children: e, withLink: o, linkTo: l, rowData: i, disableRowClick: u }) => o && !u ? /* @__PURE__ */ r(qe, { to: l?.(i?.id, i) || "", children: e }) : e, no = ({
   cell: e,
   id: o,
-  nextWidthSum: p,
-  isLastCell: d,
-  rowHovering: i,
-  index: h,
-  isFirstStickyCell: de,
-  handleCellClick: fe,
+  nextWidthSum: l,
+  isLastCell: i,
+  rowHovering: u,
+  index: w,
+  isFirstStickyCell: V,
+  handleCellClick: we,
   currentData: y,
   highlightSubstring: D,
-  is_read: to,
-  is_modified: Z,
-  is_row_modified: P,
-  is_deleted: R,
-  is_added: I,
+  is_read: so,
+  is_modified: oe,
+  is_row_modified: te,
+  is_deleted: z,
+  is_added: F,
   level: b,
   inlineEditing: k,
-  isInlineEditing: l,
+  isInlineEditing: m,
   setRowHovering: O,
-  handleCellValueChange: pe,
-  cellRef: we,
-  handleUpdateCellData: he,
-  registerValidation: ye,
-  loadingExpand: be,
-  toggleRowExpand: E,
-  isDraggingOver: ve,
-  isLoading: V,
-  is_incomplete: ee,
-  pendingEdit: a,
-  hasPendingEdit: u,
-  pendingValidationError: ke
+  handleCellValueChange: he,
+  cellRef: ye,
+  handleUpdateCellData: be,
+  registerValidation: ve,
+  loadingExpand: ke,
+  toggleRowExpand: re,
+  isDraggingOver: xe,
+  isLoading: I,
+  is_incomplete: ae,
+  pendingEdit: s,
+  hasPendingEdit: c,
+  pendingValidationError: Te
 }) => {
   const {
-    cascadingTableConfig: oe,
-    originalsOnly: xe,
-    maxLevel: Te,
-    showNewItem: ro,
-    expandedRows: Ce,
-    rowLinkConfig: z,
-    multiSelectConfig: ge,
+    cascadingTableConfig: ne,
+    originalsOnly: Ce,
+    maxLevel: ge,
+    showNewItem: uo,
+    expandedRows: _e,
+    rowLinkConfig: K,
+    multiSelectConfig: Ne,
     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);
+    cellEditingValue: j,
+    allowInlineEdit: se,
+    fieldOperationLoading: Le,
+    pendingEdits: Me,
+    selectedRowId: W,
+    cellContextMenuConfig: U,
+    openCellContextMenu: Y
+  } = Xe(Je), $e = W != null && String(W) === String(o), Se = Be(), B = (e?.column?.key ? e?.row?.original?.__cellMetadata?.[e.column.key] : void 0)?.is_locked ?? e?.column?.is_locked, G = (e?.column?.key ? Me?.[o]?.[e.column.key]?.validationError : null) || Te || null, R = k === e.column.key && e?.column?.canEdit && !B && !e?.column?.is_disabled, De = Le === `${o}-${e?.column?.id}`, { theme: Oe } = Ue(), Ie = Oe === "dark", Re = C(() => O(o), [O, o]), Ve = C(() => O(null), [O]), _ = Se?.formatDuration, [n, p] = S(
+    e?.column?.dataType === "duration" && e?.value ? _ ? _(e.value) : pe(e.value) : e.value
+  ), [h, ue] = S(null), [H, ze] = S(!1), [Fe, ie] = S(!1), [Ke, le] = S(!1), N = Z(null), L = Z(), M = Z(), { selectedColumnIds: ce = [] } = Ne || {}, me = !Object.prototype.hasOwnProperty.call(e?.column?.meta ?? {}, "shouldHighlight") || e?.column?.meta?.shouldHighlight, de = C(() => {
+    N.current && ze(N.current.scrollWidth > N.current.clientWidth);
+  }, []), X = C((t) => {
+    L.current && clearTimeout(L.current), t ? ie(!0) : L.current = setTimeout(() => ie(!1), 200);
+  }, []), q = C((t) => {
+    M.current && clearTimeout(M.current), t ? le(!0) : M.current = setTimeout(() => le(!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": c,
+    "bg-neutral-100 dark:bg-black-600": u === o && !m && !c && !(z || y?.is_deleted) && !(F || y?.is_added),
+    "bg-error-200 dark:bg-error-900": u === o && !m && !c && (z || y?.is_deleted),
+    "bg-success-100 dark:bg-success-800": u === o && !m && !c && (F || y?.is_added),
+    "bg-warning-100 dark:bg-warning-950": u === o && !m && !c && (ae || oe || te || 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": (ae || oe || te || y?.is_row_modified) && !I && u !== o && !m && !c,
+    "bg-error-100 dark:bg-error-975": (z || y?.is_deleted) && !I && u !== o && !m && !c,
+    "bg-success-50 dark:bg-success-900": (F || y?.is_added) && !I && u !== o && !m && !c,
+    "bg-primary-50 dark:bg-primary-900": (xe || m) && !c,
+    "bg-primary-50 dark:bg-primary-800": ce?.includes(e.column.id) && !m && !c,
+    "bg-primary-50 dark:bg-primary-700": $e && u !== o && !m && !c && !I,
+    [Ye[e?.row?.original?.__rowBgStatus]]: e?.row?.original?.__rowBgStatus && !m && !c
+  }), Ae = (t) => {
+    e.column?.disableRowClick || we(t);
+  }, je = C((t) => {
+    if (U?.isEnabled === !1 || !Y || R) return;
+    const a = {
+      rowId: o,
+      rowData: e?.row?.original ?? {},
+      columnKey: e?.column?.key ?? "",
+      column: e.column,
+      value: e?.value,
+      text: ro(n, e?.value, t.currentTarget),
+      cell: e
+    };
+    U?.isDisabledForCell?.(a) || (t.preventDefault(), t.stopPropagation(), Y({ x: t.clientX, y: t.clientY, target: a }));
+  }, [U, Y, R, o, e, n]);
+  v(() => (e?.row?.original?.status === "running" && e.column?.dataType === "duration" && (ee = setInterval(() => {
+    const a = new Date(J(e?.row?.original?.created_at || e?.row?.original?.executed_on, { withTime: !0, format: "yyyy-MM-dd HH:mm:ss" })), f = Math.abs((/* @__PURE__ */ new Date()).getTime() - new Date(a).getTime());
+    p(_ ? _(f) : pe(f));
   }, 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)]));
+    ee && clearInterval(ee);
+  }), [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" ? ue(e?.value) : ue(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, f = s?.meta?.currency_code || t?.[a]?.currency_code || "USD";
+        p(fe(s.value, f));
       } 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;
+        p(fe(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);
-      } 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, e?.column?.Header, e?.row?.original?.__rawData, s?.value, s?.meta?.currency_code]), v(() => {
+    e?.column?.type?.toLowerCase() === "percentage" && (s?.value !== void 0 ? p(s.value?.toString() + "%" || "") : p(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", f = J(s.value, { withTime: a, skipTimezone: !0 });
+        p(f || s.value);
+      } else p(e.value);
+  }, [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 ? p(s.value) : e?.column?.dataType !== "duration" && p(e.value));
+  }, [e?.value, e?.column?.type, e?.column?.dataType, s?.value]), v(() => {
+    if (e?.column?.type?.toLowerCase() === "boolean" && se) {
+      const t = s?.value !== void 0 ? s.value : e?.value;
+      p(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, se, s?.value]), v(() => () => {
+    L.current && clearTimeout(L.current), M.current && clearTimeout(M.current);
   }, []);
-  const c = C.isValidElement(n);
+  const d = g.isValidElement(n);
   return /* @__PURE__ */ $(
     "td",
     {
       id: e.value,
       "data-column-key": e?.column?.key,
       ...e.getCellProps(),
-      onClick: z?.isEnabled ? void 0 : Ae,
+      onClick: K?.isEnabled ? void 0 : Ae,
       className: x(
         "h-row",
         {
           "sticky left-0": e?.column?.sticky,
           relative: !e?.column?.sticky,
-          "w-full": d,
+          "w-full": i,
           "overflow-visible": k === e.column.key,
           /** Chips/badges: avoid vertical clip from overflow-x-hidden + truncate (see isUiElementCell branch below) */
-          "overflow-x-hidden overflow-y-visible": k !== e.column.key && c,
-          "overflow-hidden": k !== e.column.key && !c
+          "overflow-x-hidden overflow-y-visible": k !== e.column.key && d,
+          "overflow-hidden": k !== e.column.key && !d
         },
-        W && !re ? "outline outline-2 outline-error-500 -outline-offset-2 z-[5]" : "",
+        G && !R ? "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,
+      style: { minWidth: `${e.column.width}px`, maxWidth: `${e.column.width}px`, right: e?.column?.sticky ? `${l}px` : Ze, paddingLeft: b > 0 && w === 0 ? `${b * P}px` : void 0 },
+      onMouseEnter: Re,
       onMouseLeave: Ve,
+      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: K?.isEnabled, linkTo: K?.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__ */ r("span", { className: "text-neutral-400 dark:text-black-400 truncate", children: (() => {
+            const t = `${o}-${e?.column?.id}`, a = typeof j == "object" ? j?.[t] : j, f = e?.column?.type?.toLowerCase();
+            return f === "boolean" ? a === !0 || a === "true" || a === "True" ? "Yes" : "No" : (f === "date" || f === "datetime") && a ? J(a, { withTime: f === "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(E, { className: "spinner text-neutral-600 dark:text-white", size: 12 }) })
+        ] }) : k === e.column.key && e?.column?.canEdit && !B && !e?.column?.is_disabled ? /* @__PURE__ */ r("div", { className: "h-row w-full absolute top-0 left-0 flex items-center", style: { marginLeft: b > 0 && w === 0 ? `-${b * P}px` : void 0, width: b > 0 && w === 0 ? `calc(100% + ${b * P}px)` : "100%" }, children: /* @__PURE__ */ r(Qe, { cell: e, id: o, inlineEditing: k, cellRef: ye, handleCellValueChange: he, handleUpdateCellData: be, registerValidation: ve }) }) : /* @__PURE__ */ $(We, { children: [
+          b > 0 && w === 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(
+            Q,
             {
-              title: w && e?.column?.type?.toLowerCase() !== "url" ? w : void 0,
-              hideTooltip: !w || e?.column?.type?.toLowerCase() === "url",
+              title: h && e?.column?.type?.toLowerCase() !== "url" ? h : void 0,
+              hideTooltip: !h || e?.column?.type?.toLowerCase() === "url",
               delayShow: !0,
               placement: "top",
               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"}`, d ? "overflow-x-hidden overflow-y-visible" : "overflow-x-hidden", { "border border-b-0 border-t-0 border-primary-600 dark:border-blue-800": ce?.includes(e.column.id) }),
+                  style: e?.column?.sticky && V ? { boxShadow: Ie ? Pe : Ee } : {},
                   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();
+                    ne?.isCascading && !Ce && w === 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 || ne?.showAllDropdown) && /* @__PURE__ */ r("div", { children: ke ? /* @__PURE__ */ r(E, { className: "text-neutral-600 dark:text-white", size: 8 }) : /* @__PURE__ */ r("div", { children: _e?.[o]?.isOpen ? /* @__PURE__ */ r(eo, { size: 20, className: "text-neutral-400 dark:text-neutral-400", onClick: (t) => {
+                      re(), t.stopPropagation();
+                    } }) : /* @__PURE__ */ r(oo, { size: 20, className: "text-neutral-400 dark:text-neutral-400", onClick: (t) => {
+                      re(), t.stopPropagation();
                     } }) }) }) }),
-                    e?.column?.type?.toLowerCase() === "url" && w ? /* @__PURE__ */ t(
-                      H,
+                    e?.column?.type?.toLowerCase() === "url" && h ? /* @__PURE__ */ r(
+                      Q,
                       {
-                        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: () => X(!0), onMouseLeave: () => X(!1), children: /* @__PURE__ */ r("a", { href: h, 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(to, { height: 16, width: 16 }) }),
+                          /* @__PURE__ */ r(Ge, { variant: "medium", size: "small", className: "truncate", appearance: "custom", children: h }),
+                          /* @__PURE__ */ r(He, { sx: { height: "16px", width: "16px", color: "#016DCF" } })
                         ] }) }) }),
                         placement: "top",
-                        open: Ie,
-                        onOpenChange: Y,
+                        open: Fe,
+                        onOpenChange: X,
                         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: de, className: "truncate w-full", children: D && me && !g.isValidElement(n) && typeof n != "object" ? D(n) : n }) })
                       }
-                    ) : /* @__PURE__ */ t(
-                      H,
+                    ) : /* @__PURE__ */ r(
+                      Q,
                       {
-                        title: U && n && !c ? /* @__PURE__ */ t(
+                        title: H && n && !d ? /* @__PURE__ */ r(
                           "div",
                           {
-                            onMouseEnter: () => B(!0),
-                            onMouseLeave: () => B(!1),
+                            onMouseEnter: () => q(!0),
+                            onMouseLeave: () => q(!1),
                             className: "max-h-96 overflow-y-auto whitespace-pre-wrap break-words no-scroll",
                             children: String(n)
                           }
                         ) : void 0,
                         placement: "top",
                         delayShow: !0,
-                        hideTooltip: !!w,
-                        open: U && !w && !c ? ze : void 0,
-                        onOpenChange: U && !w && !c ? B : 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(
+                        hideTooltip: !!h,
+                        open: H && !h && !d ? Ke : void 0,
+                        onOpenChange: H && !h && !d ? q : void 0,
+                        className: x("block w-full min-w-0", d ? "overflow-x-hidden overflow-y-visible" : "overflow-hidden"),
+                        children: /* @__PURE__ */ r("div", { className: x("w-full h-row flex items-center px-4 min-w-0", d ? "overflow-x-hidden overflow-y-visible" : "overflow-hidden"), children: /* @__PURE__ */ r(
                           "span",
                           {
-                            ref: c ? void 0 : _,
-                            onMouseEnter: c ? void 0 : le,
-                            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, {
+                            ref: d ? void 0 : N,
+                            "data-cell-content": !0,
+                            onMouseEnter: d ? void 0 : de,
+                            className: x(d ? "flex min-w-0 max-w-full items-center justify-start gap-1" : "truncate w-full"),
+                            children: D && me && !g.isValidElement(n) && typeof n != "object" ? D(n) : g.isValidElement(n) ? typeof n.type == "string" ? n : g.cloneElement(n, {
                               ...n.props,
                               containerWidth: e.column.width
                             }) : n
@@ -243,14 +262,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 }) })
+        G && !R && /* @__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: G }) }) }),
+        De && !(k === e.column.key && e?.column?.canEdit && !B && !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(E, { className: "text-primary-600 dark:text-white", size: 8 }) })
       ]
     },
-    h
+    w
   );
-}, To = C.memo(oo);
+}, No = g.memo(no);
 export {
-  To as DataCell
+  No as DataCell
 };
 //# sourceMappingURL=DataCell.es.js.map