@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/datatable/components/DataTable/SubComponentDataTable/index.mjs

@@ -0,0 +1,53 @@
+import { jsx as n } from "react/jsx-runtime";
+import r from "../DataTable.mjs";
+const i = ({
+  row: o,
+  tableId: t,
+  renderSubDataTable: e,
+  ...a
+}) => /* @__PURE__ */ n(
+  r,
+  {
+    tableId: `${t}-${o?.index || "sub-table"}`,
+    smallAnatomy: !0,
+    data: e.data,
+    columns: e.columns,
+    pagination: {
+      pageSize: 5,
+      pageIndex: 0,
+      showPagination: !0,
+      hideRecordsSelector: !0,
+      takeDefaultPagination: !0,
+      ...a.pagination
+    },
+    headerOptions: {
+      enableDragColumns: !1,
+      enableResizeColumns: !1,
+      enablePinLeftColumns: !1,
+      ...a.headerOptions
+    },
+    border: !1,
+    stateMessage: {
+      className: "[&_tr]:top-[52px]",
+      ...a.stateMessage
+    },
+    sx: {
+      wrapper: {
+        backgroundColor: "var(--color-table-row-expanded-bg)"
+      },
+      wrapperContainer: {
+        backgroundColor: "transparent"
+      },
+      tableContainer: {
+        paddingLeft: e?.expandedColumnSize === 0 ? 0 : e?.expandedColumnSize || 50
+      },
+      header: {
+        borderTop: "1px solid var(--color-table-divider)"
+      }
+    },
+    ...a
+  }
+);
+export {
+  i as default
+};

package/datatable/components/DataTable/TableCell/ExpandedRowCell/index.mjs

@@ -0,0 +1,17 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ArrowIndicator as t } from "../../../Assets/ArrowIndicator.mjs";
+import { IconButton as d } from "../../../Common/IconButton/index.mjs";
+const l = ({
+  row: o
+  //hoverRow
+}) => /* @__PURE__ */ e("div", { className: "flex justify-center items-center w-full h-full", children: /* @__PURE__ */ e(
+  d,
+  {
+    "data-id": "expanded-row-cell",
+    onClick: o.getToggleExpandedHandler(),
+    icon: o.getIsExpanded() ? /* @__PURE__ */ e(t, { direction: "up", size: 18 }) : /* @__PURE__ */ e(t, { direction: "down", size: 18 })
+  }
+) });
+export {
+  l as default
+};

package/datatable/components/DataTable/TableCell/RowActionsCell/index.mjs

@@ -0,0 +1,183 @@
+import { jsxs as A, Fragment as H, jsx as t } from "react/jsx-runtime";
+import { useState as h, useRef as k, useCallback as y, useEffect as d } from "react";
+import { createPortal as V } from "react-dom";
+import { validateScopes as q } from "../../../../common/functions/user-scopes/index.mjs";
+import { useComponentEventListener as F } from "../../../../hooks/useComponentEventListener.mjs";
+import { cn as c } from "../../../../common/helpers/cn.mjs";
+import { DeleteIndicator as G } from "../../../Assets/DeleteIndicator.mjs";
+import { DownloadIndicator as J } from "../../../Assets/DownloadIndicator.mjs";
+import { EditIndicator as K } from "../../../Assets/EditIndicator.mjs";
+import { MoreIndicator as I } from "../../../Assets/MoreIndicator.mjs";
+import { OpenNewTab as Q } from "../../../Assets/OpenNewTab.mjs";
+import { ViewDetailsIndicator as U } from "../../../Assets/ViewDetailsIndicator.mjs";
+import { VoidIndicator as W } from "../../../Assets/VoidIndicator.mjs";
+import { IconButton as P } from "../../../Common/IconButton/index.mjs";
+import { Tooltip as X } from "../../../Common/Tooltip.mjs";
+const ue = ({
+  tableId: w,
+  row: n,
+  hoverRow: x,
+  rowActions: f,
+  setOpenActions: i,
+  setHoverRow: R,
+  forceShowMenuActions: S
+}) => {
+  const { element: u } = F(
+    `${w}-container`
+  ), [o, l] = h(!1), [g, m] = h({
+    hover: !1,
+    index: 0
+  }), [C, D] = h({
+    top: 0,
+    left: 0,
+    bottom: 0
+  }), p = k(null), v = k(null), b = () => {
+    if (v.current) {
+      const e = v.current.getBoundingClientRect();
+      D({
+        top: e.top,
+        left: e.left,
+        bottom: e.bottom
+      });
+    }
+  }, E = y(() => {
+    i(!1), l(!1), b();
+  }, [i]), N = () => {
+    const e = new CustomEvent("closeAllMenus");
+    window.dispatchEvent(e), o ? (i(!1), l(!1)) : (i(!0), l(!0), b());
+  };
+  d(() => {
+    const e = () => {
+      o && b();
+    };
+    return window.addEventListener("scroll", e), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e), window.removeEventListener("resize", e);
+    };
+  }, [o]);
+  const z = (e) => {
+    switch (e) {
+      case "more":
+        return /* @__PURE__ */ t(I, { size: 18, direction: "vertical" });
+      case "view":
+        return /* @__PURE__ */ t(U, { size: 18 });
+      case "delete":
+        return /* @__PURE__ */ t(G, { size: 18 });
+      case "edit":
+        return /* @__PURE__ */ t(K, { size: 18 });
+      case "download":
+        return /* @__PURE__ */ t(J, { size: 18 });
+      case "void":
+        return /* @__PURE__ */ t(W, { size: 18 });
+      case "open-new-tab":
+        return /* @__PURE__ */ t(Q, { size: 18 });
+      default:
+        return /* @__PURE__ */ t(I, { size: 18, direction: "vertical" });
+    }
+  }, L = (e) => e?.disabled?.(n) ?? !q(e?.requiredScopes), M = y(() => {
+    u && (u.style.overflow = o ? "hidden" : "auto");
+  }, [o, u]);
+  d(() => {
+    M(), i?.(o);
+  }, [x.hover, o, i, M]), d(() => {
+    const e = (s) => {
+      o && p.current && !p.current.contains(s.target) && (m({ hover: !1, index: 0 }), l(!1), i(!1));
+    };
+    return window.addEventListener("click", e), () => window.removeEventListener("click", e);
+  }, [o, i]), d(() => {
+    const e = () => {
+      E();
+    };
+    return window.addEventListener("closeAllMenus", e), () => {
+      window.removeEventListener("closeAllMenus", e);
+    };
+  }, [E]);
+  const r = f?.[0], $ = f?.length === 1 && !S, O = r?.hidden?.(n), T = r?.showLabelInTooltip && r?.label?.(n), j = !!L(r);
+  return /* @__PURE__ */ A(H, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: c(
+          "relative text-center",
+          (x.hover || o) && !O ? "visible" : "invisible"
+        ),
+        style: { zIndex: o ? 99999 : "auto" },
+        children: $ && (r?.showOptions?.(n) === void 0 || !r?.showOptions?.(n)) ? /* @__PURE__ */ t(X, { text: T, position: "top", children: /* @__PURE__ */ t(
+          P,
+          {
+            isPinned: !0,
+            icon: z(r?.action),
+            onClick: (e) => {
+              e?.stopPropagation?.(), r?.onClick?.(n);
+            },
+            disabled: j,
+            style: {
+              margin: "0 auto"
+            }
+          }
+        ) }) : /* @__PURE__ */ t(
+          P,
+          {
+            icon: z("more"),
+            ref: v,
+            onClick: (e) => {
+              e?.stopPropagation?.(), N();
+            },
+            style: {
+              margin: "0 auto"
+            }
+          }
+        )
+      }
+    ),
+    o && V(
+      /* @__PURE__ */ t(
+        "div",
+        {
+          ref: p,
+          className: c(
+            "flex flex-col min-w-[175px] rounded px-0 py-2 w-max h-fit max-h-[200px] overflow-auto bg-table-paper-bg border border-table-divider fixed transition-all duration-100 ease-in table-dropdown-shadow"
+          ),
+          style: {
+            top: C.top,
+            left: C.left - 180,
+            zIndex: 99999
+          },
+          children: f?.map((e, s) => {
+            const a = L(e), B = !a && g.hover && g.index === s;
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                className: c(
+                  "flex flex-row justify-start items-center relative px-4 w-full h-[35px] gap-1",
+                  e?.showOptions?.(n) === void 0 || e?.showOptions?.(n) ? "flex" : "hidden",
+                  B ? "bg-table-row-hover" : "bg-table-paper-bg",
+                  a ? "cursor-default" : "cursor-pointer"
+                ),
+                onClick: () => {
+                  a || (e.onClick(n), l(!1), i(!1), R({ hover: !1, index: 0 }));
+                },
+                onPointerEnter: () => m({ hover: !0, index: s }),
+                onPointerLeave: () => m({ hover: !1, index: s }),
+                children: /* @__PURE__ */ t(
+                  "p",
+                  {
+                    className: c(
+                      "font-sans text-base font-normal leading-6 tracking-[0.15px] text-left",
+                      a ? "text-table-disabled" : "text-table-primary-text"
+                    ),
+                    children: e.label(n)
+                  }
+                )
+              },
+              `${w}-${n.id}-${e.action}-${s}`
+            );
+          })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+export {
+  ue as default
+};

package/datatable/components/DataTable/TableCell/RowSelectionCell/index.mjs

@@ -0,0 +1,58 @@
+import { jsxs as S, jsx as i } from "react/jsx-runtime";
+import { useCallback as b, useEffect as h } from "react";
+import { RowSelection as a } from "../../../RowSelection/index.mjs";
+const k = ({
+  row: e,
+  rowSelection: t,
+  table: o
+}) => {
+  const c = o?.getState()?.rowSelection, d = o?.setRowSelection, s = Object.keys(c).length !== 0, l = b(() => {
+    t?.getSelection?.([]);
+    const n = [];
+    return Object.keys(c).forEach((r) => {
+      const u = o?.getRow(r);
+      n.push(u);
+    }), n;
+  }, [t, c, o]);
+  h(() => {
+    t?.type === "checkbox" && s && t?.getSelection?.(l()), s || t?.getSelection?.([]);
+  }, [l, s, t]);
+  const g = e.getIsSelected().toString();
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: "flex justify-center items-center w-full h-full [&_button]:bg-transparent [&_button]:transition-[background-color] [&_button]:duration-200 [&_button]:ease-in-out [&_button:hover]:bg-bg-hover-color [&_button:focus]:bg-bg-hover-color",
+      onClick: (n) => {
+        n?.stopPropagation?.();
+      },
+      children: [
+        t?.type === "checkbox" && /* @__PURE__ */ i(
+          a,
+          {
+            type: "checkbox",
+            indeterminate: e.getIsSomeSelected(),
+            checked: e.getIsSelected(),
+            disabled: !e.getCanSelect(),
+            onChange: e.getToggleSelectedHandler()
+          }
+        ),
+        t?.type === "radio" && /* @__PURE__ */ i(
+          a,
+          {
+            type: "radio",
+            indeterminate: e.getIsSomeSelected(),
+            checked: c[e.id],
+            disabled: !e.getCanSelect(),
+            onClick: () => {
+              d({ [e.id]: !0 }), t?.getSelection?.([e]);
+            }
+          }
+        )
+      ]
+    },
+    g
+  );
+};
+export {
+  k as default
+};

package/datatable/components/DataTable/TableCell/index.mjs

@@ -0,0 +1,114 @@
+import { jsx as n } from "react/jsx-runtime";
+import { memo as K, useMemo as s, useRef as v, useState as Q, useEffect as R } from "react";
+import { useDndContext as W } from "@dnd-kit/core";
+import { useSortable as X } from "@dnd-kit/sortable";
+import { CSS as Y } from "@dnd-kit/utilities";
+import { flexRender as Z } from "@tanstack/react-table";
+import { IGNORE_REPORT_COLUMNS as tt } from "../../../common/constants.mjs";
+import { parseNumericValueForExport as N } from "../../../common/helpers/parseNumericValueToExport.mjs";
+import { useDataTableContext as et } from "../../../context/index.mjs";
+import { cn as y } from "../../../common/helpers/cn.mjs";
+import { ExpandedColumn as E } from "../../../common/helpers/ExpandedColumn.mjs";
+import { RowActionsColumn as ot } from "../../../common/helpers/RowActionsColumn.mjs";
+import { RowSelectionColumn as nt } from "../../../common/helpers/RowSelectionColumn.mjs";
+import { useGetCommonPinningStyles as rt } from "../../../hooks/useGetCommonPinningStyles.mjs";
+import it from "./ExpandedRowCell/index.mjs";
+import st from "./RowActionsCell/index.mjs";
+import lt from "./RowSelectionCell/index.mjs";
+const ut = ({
+  tableId: z,
+  table: c,
+  cell: t,
+  row: i,
+  hoverRow: l,
+  rowActions: D,
+  style: T,
+  forceShowMenuActions: A,
+  rowSelection: f,
+  setHoverRow: I,
+  setOpenActions: V
+}) => {
+  const { actions: P } = et() || {}, { pinStyles: u, isPinned: p } = rt(t.column), { active: O } = W(), { setNodeRef: j, transform: k } = X({
+    id: t.column.id
+  }), r = O?.id === t.column.id, F = t.column.getSize(), G = i.getIsExpanded(), L = t.column.id === E.id, b = t.column.id === ot.id, M = t.column.id === nt.id, _ = {
+    transform: Y.Translate.toString(k),
+    width: t.column.getSize()
+  }, $ = () => b ? /* @__PURE__ */ n(
+    st,
+    {
+      tableId: z,
+      row: i,
+      hoverRow: l,
+      setHoverRow: I,
+      rowActions: D,
+      setOpenActions: V || (() => null),
+      forceShowMenuActions: A
+    }
+  ) : L ? /* @__PURE__ */ n(it, { row: i, hoverRow: l }) : M && f ? /* @__PURE__ */ n(lt, { row: i, rowSelection: f, table: c }) : F < 40 ? /* @__PURE__ */ n("span", { children: "..." }) : Z(t.column.columnDef.cell, t.getContext()), B = s(() => {
+    const e = u?.width;
+    return Number.isNaN(e) ? 0 : e;
+  }, [u?.width]), g = $(), a = v(null), [d, U] = Q(""), C = v(""), x = s(() => t.column.getIndex(), []), w = s(() => t.column.columnDef.id, [t.column.columnDef.id]), S = s(() => t.row.id, [t.row.id]);
+  R(() => {
+    if (a.current) {
+      const e = a.current.textContent?.trim() ?? "";
+      e && U(e);
+    }
+  }, [g]), R(() => {
+    if (!tt.includes(w)) {
+      const e = t.column.columnDef, H = t.row.original, J = c.getAllLeafColumns()[0]?.id === E.id;
+      let o = e?.accessorFn?.(H) || d?.trim() || "";
+      if (e?.exportAsNumber && typeof o == "string" && (o = N(o) || ""), e?.exportAsPercentage && typeof o == "string") {
+        const h = N(o, {
+          isPercentage: !0
+        });
+        o = h !== void 0 ? h.toString() : "";
+      }
+      const m = o;
+      C.current !== m && (C.current = m, P?.onSetReportCellValue(m, S, x, {
+        hasSubTable: J
+      }));
+    }
+  }, [d, S, x, w, t.row.original]);
+  const q = () => r ? "bg-table-dragged-bg-important" : G ? "bg-table-row-expanded-bg" : l.hover ? "bg-table-row-hover" : p ? "bg-table-row-pinned" : "bg-table-row-bg";
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "cell",
+      ref: j,
+      id: `col-${t.id}`,
+      "data-testid": "table-cell",
+      className: y(
+        "relative overflow-hidden whitespace-nowrap text-ellipsis min-w-0 p-0 transition-[background-color] duration-200 ease-in-out shrink-0",
+        q(),
+        r && "border-b border-r border-l border-dashed border-table-divider z-500",
+        !r && (p ? "z-10" : "z-0")
+      ),
+      style: {
+        ...T,
+        ..._,
+        ...u,
+        width: B,
+        ...r && {
+          zIndex: 500
+        }
+      },
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          ref: a,
+          className: y(
+            "z-1 relative w-full h-full box-border flex items-center overflow-hidden whitespace-nowrap text-ellipsis transition-[background-color] duration-200 ease-in-out",
+            b ? "justify-center p-0" : "justify-start px-3",
+            r && "opacity-80 bg-transparent"
+          ),
+          "data-testid": "table-cell-content",
+          "data-value": d,
+          children: g
+        }
+      )
+    }
+  );
+}, zt = K(ut);
+export {
+  zt as default
+};

package/datatable/components/DataTable/TableHead/index.mjs

@@ -0,0 +1,62 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as b } from "../../../common/helpers/cn.mjs";
+import p from "../../../context/DragDropContentContext.mjs";
+import c from "../TableHeader/index.mjs";
+function y({
+  sx: t,
+  tableId: a,
+  table: m,
+  columnOrder: s,
+  smallAnatomy: n,
+  headerOptions: l,
+  disabled: h,
+  setHoverColumns: o
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      id: `${a}-header`,
+      "data-testid": "table-header",
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
+      className: b([
+        "box-border border-collapse border-spacing-0 text-table-primary-text sticky top-0 z-1",
+        n ? "h-10 max-h-10 min-h-10" : "h-[52px] max-h-[52px] min-h-[52px]",
+        l?.className
+      ]),
+      style: t?.thead,
+      children: /* @__PURE__ */ r(
+        p,
+        {
+          columnOrder: s,
+          children: m.getHeaderGroups().map((d) => /* @__PURE__ */ r(
+            "div",
+            {
+              role: "rowgroup",
+              "data-testid": "table-rowgroup",
+              className: "flex items-center h-full max-h-full min-h-full bg-table-header-bg border-b border-table-divider",
+              style: t?.header,
+              children: d.headers.filter((e) => e.column.getIsVisible()).map((e, i) => /* @__PURE__ */ r(
+                c,
+                {
+                  index: i,
+                  header: e,
+                  headerOptions: l,
+                  disabled: h,
+                  style: t?.header,
+                  tableId: a
+                },
+                `${e.id}-${i}`
+              ))
+            },
+            d.id
+          ))
+        },
+        "drag-context-header"
+      )
+    }
+  );
+}
+export {
+  y as default
+};

package/datatable/components/DataTable/TableHeader/ColumnPin/index.mjs

@@ -0,0 +1,48 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { PinIndicator as c } from "../../../Assets/PinIndicator.mjs";
+import { IconButton as m } from "../../../Common/IconButton/index.mjs";
+const f = ({
+  header: n,
+  color: t,
+  disabled: o,
+  enablePinLeftColumns: l,
+  enablePinRightColumns: s
+}) => /* @__PURE__ */ e("div", { className: "flex items-center justify-center bg-transparent gap-1", children: [
+  l && !n.column.getIsPinned() && n.column.getIsPinned() !== "left" && /* @__PURE__ */ i(
+    m,
+    {
+      color: t,
+      disabled: o,
+      icon: /* @__PURE__ */ i(c, { direction: "down" }),
+      onClick: () => {
+        n.column.pin("left");
+      }
+    }
+  ),
+  n.column.getIsPinned() && /* @__PURE__ */ i(
+    m,
+    {
+      color: t,
+      isPinned: !0,
+      disabled: o,
+      icon: /* @__PURE__ */ i(c, { direction: "down" }),
+      onClick: () => {
+        n.column.pin(!1);
+      }
+    }
+  ),
+  s && !n.column.getIsPinned() && n.column.getIsPinned() !== "right" && /* @__PURE__ */ i(
+    m,
+    {
+      color: t,
+      disabled: o,
+      icon: /* @__PURE__ */ i(c, { direction: "right" }),
+      onClick: () => {
+        n.column.pin("right");
+      }
+    }
+  )
+] });
+export {
+  f as default
+};

package/datatable/components/DataTable/TableHeader/ColumnSearcher/InputSearcher.mjs

@@ -0,0 +1,28 @@
+import { jsx as f } from "react/jsx-runtime";
+import r from "react";
+function p({
+  value: e,
+  onChange: s,
+  debounce: a = 500,
+  ...c
+}) {
+  const [t, o] = r.useState(e);
+  return r.useEffect(() => {
+    o(e);
+  }, [e]), r.useEffect(() => {
+    const u = setTimeout(() => {
+      s(t);
+    }, a);
+    return () => clearTimeout(u);
+  }, [t]), /* @__PURE__ */ f(
+    "input",
+    {
+      ...c,
+      value: t,
+      onChange: (u) => o(u.target.value)
+    }
+  );
+}
+export {
+  p as default
+};

package/datatable/components/DataTable/TableHeader/ColumnSearcher/index.mjs

@@ -0,0 +1,54 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import o from "./InputSearcher.mjs";
+const c = ({ column: l }) => {
+  const r = l.getFilterValue(), { filterVariant: i } = l.columnDef.meta ?? {};
+  return i === "range" ? /* @__PURE__ */ n("div", { children: [
+    /* @__PURE__ */ n("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ e(
+        o,
+        {
+          type: "number",
+          value: r?.[0] ?? "",
+          onChange: (a) => l.setFilterValue((t) => [a, t?.[1]]),
+          placeholder: "Min",
+          className: "w-24 border shadow rounded"
+        }
+      ),
+      /* @__PURE__ */ e(
+        o,
+        {
+          type: "number",
+          value: r?.[1] ?? "",
+          onChange: (a) => l.setFilterValue((t) => [t?.[0], a]),
+          placeholder: "Max",
+          className: "w-24 border shadow rounded"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "h-1" })
+  ] }) : i === "select" ? /* @__PURE__ */ n(
+    "select",
+    {
+      onChange: (a) => l.setFilterValue(a.target.value),
+      value: r?.toString(),
+      children: [
+        /* @__PURE__ */ e("option", { value: "", children: "All" }),
+        /* @__PURE__ */ e("option", { value: "complicated", children: "complicated" }),
+        /* @__PURE__ */ e("option", { value: "relationship", children: "relationship" }),
+        /* @__PURE__ */ e("option", { value: "single", children: "single" })
+      ]
+    }
+  ) : /* @__PURE__ */ e(
+    o,
+    {
+      className: "w-36 border shadow rounded",
+      onChange: (a) => l.setFilterValue(a),
+      placeholder: "Search...",
+      type: "text",
+      value: r ?? ""
+    }
+  );
+};
+export {
+  c as default
+};

package/datatable/components/DataTable/TableHeader/ColumnSort/index.mjs

@@ -0,0 +1,31 @@
+import { jsxs as i, Fragment as n, jsx as t } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+import { flexRender as l } from "@tanstack/react-table";
+import { ArrowLongIndicator as r } from "../../../Assets/ArrowLongIndicator.mjs";
+import { FilterIndicator as m } from "../../../Assets/FilterIndicator.mjs";
+import { IconButton as u } from "../../../Common/IconButton/index.mjs";
+const g = {
+  asc: /* @__PURE__ */ t(r, { direction: "up", size: 19.5 }),
+  desc: /* @__PURE__ */ t(r, { direction: "down", size: 19.5 })
+}, I = ({ header: o, isPinned: e }) => {
+  const c = s(() => o.isPlaceholder ? null : /* @__PURE__ */ i(n, { children: [
+    l(
+      o.column.getIsSorted() ? null : /* @__PURE__ */ t(m, { size: 18 }),
+      o.getContext()
+    ),
+    g?.[o.column.getIsSorted()] ?? null
+  ] }), [o]);
+  return /* @__PURE__ */ t(
+    u,
+    {
+      isPinned: e,
+      className: "flex items-center justify-center bg-transparent p-0 m-0 border-none cursor-pointer select-none touch-none",
+      onClick: o.column.getToggleSortingHandler(),
+      title: o.column.getCanSort() ? o.column.getNextSortingOrder() === "asc" ? "Sort ascending" : o.column.getNextSortingOrder() === "desc" ? "Sort descending" : "Clear sort" : void 0,
+      icon: c ?? /* @__PURE__ */ t(n, {})
+    }
+  );
+};
+export {
+  I as default
+};

package/datatable/components/DataTable/TableHeader/ColumnVisibility/index.mjs

@@ -0,0 +1,14 @@
+import { jsx as i } from "react/jsx-runtime";
+import { VisibilityIndicator as t } from "../../../Assets/VisibilityIndicator.mjs";
+import { IconButton as n } from "../../../Common/IconButton/index.mjs";
+const c = ({ header: o }) => /* @__PURE__ */ i(
+  n,
+  {
+    className: "flex items-center justify-center bg-transparent p-0 m-0 border-none cursor-pointer select-none touch-none",
+    icon: /* @__PURE__ */ i(t, { visibility: "off" }),
+    onClick: () => o.column.toggleVisibility()
+  }
+);
+export {
+  c as default
+};