@lax-wp/design-system 0.13.32 → 0.13.33-beta.0

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

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