@lax-wp/design-system 0.13.33-beta.6 → 0.13.33

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

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