@ztwoint/z-ui 0.1.118 → 0.1.120

package/dist/components/dynamic-table/z2-table.js

@@ -1,8 +1,8 @@
-import { jsxs as m, jsx as o, Fragment as z } from "react/jsx-runtime";
+import { jsxs as R, jsx as o, Fragment as z } from "react/jsx-runtime";
 import { Fragment as P } from "react";
-import { Z2Checkbox as w } from "../checkbox/checkbox.js";
+import { Z2Checkbox as k } from "../checkbox/checkbox.js";
 import { useZ2Table as g } from "./z2-table-context.js";
-import { flexRender as k } from "@tanstack/react-table";
+import { flexRender as w } from "@tanstack/react-table";
 import { cva as v } from "class-variance-authority";
 import { cn as p } from "../../lib/utils.js";
 import { Z2Skeleton as Z } from "../skeleton/skeleton.js";
@@ -97,7 +97,7 @@ function D({
   dndRef: t,
   dndStyle: r
 }) {
-  var c, b, h, f, C, y, x, R;
+  var c, b, m, h, f, C, y, x;
   const { props: a } = g(), { column: n } = e, d = n.getIsPinned(), s = d === "left" && n.getIsLastColumn("left"), i = d === "right" && n.getIsFirstColumn("right"), u = B({
     size: (c = a.tableLayout) != null && c.dense ? "dense" : "default"
   });
@@ -105,11 +105,12 @@ function D({
     "th",
     {
       ref: t,
+      colSpan: e.colSpan,
       style: {
         ...((b = a.tableLayout) == null ? void 0 : b.width) === "fixed" && {
           width: `${e.getSize()}px`
         },
-        ...((h = a.tableLayout) == null ? void 0 : h.columnsPinnable) && n.getCanPin() && N(n),
+        ...((m = a.tableLayout) == null ? void 0 : m.columnsPinnable) && n.getCanPin() && N(n),
         ...r || null
       },
       "data-pinned": d || void 0,
@@ -117,11 +118,11 @@ function D({
       className: p(
         "relative h-10 text-left rtl:text-right align-middle [&:has([role=checkbox])]:pe-0 border-stroke-solid-light leading-none-medium-sm dark:text-inverted-secondary",
         u,
-        ((f = a.tableLayout) == null ? void 0 : f.cellBorder) && "border-e",
-        ((C = a.tableLayout) == null ? void 0 : C.columnsResizable) && n.getCanResize() && "truncate",
-        ((y = a.tableLayout) == null ? void 0 : y.columnsPinnable) && n.getCanPin() && "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs",
-        (x = e.column.columnDef.meta) == null ? void 0 : x.headerClassName,
-        n.getIndex() === 0 || n.getIndex() === e.headerGroup.headers.length - 1 ? (R = a.tableClassNames) == null ? void 0 : R.edgeCell : ""
+        ((h = a.tableLayout) == null ? void 0 : h.cellBorder) && "border-e",
+        ((f = a.tableLayout) == null ? void 0 : f.columnsResizable) && n.getCanResize() && "truncate",
+        ((C = a.tableLayout) == null ? void 0 : C.columnsPinnable) && n.getCanPin() && "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs",
+        (y = e.column.columnDef.meta) == null ? void 0 : y.headerClassName,
+        n.getIndex() === 0 || n.getIndex() === e.headerGroup.headers.length - 1 ? (x = a.tableClassNames) == null ? void 0 : x.edgeCell : ""
       ),
       children: l
     },
@@ -259,7 +260,7 @@ function $({
   dndRef: t,
   dndStyle: r
 }) {
-  var b, h, f, C, y, x, R, L;
+  var b, m, h, f, C, y, x, L;
   const { props: a } = g(), { column: n, row: d } = e, s = n.getIsPinned(), i = s === "left" && n.getIsLastColumn("left"), u = s === "right" && n.getIsFirstColumn("right"), c = S({
     size: (b = a.tableLayout) != null && b.dense ? "dense" : "default"
   });
@@ -267,9 +268,9 @@ function $({
     "td",
     {
       ref: t,
-      ...(h = a.tableLayout) != null && h.columnsDraggable && !s ? { cell: e } : {},
+      ...(m = a.tableLayout) != null && m.columnsDraggable && !s ? { cell: e } : {},
       style: {
-        ...((f = a.tableLayout) == null ? void 0 : f.columnsPinnable) && n.getCanPin() && N(n),
+        ...((h = a.tableLayout) == null ? void 0 : h.columnsPinnable) && n.getCanPin() && N(n),
         ...r || null
       },
       "data-pinned": s || void 0,
@@ -277,10 +278,10 @@ function $({
       className: p(
         "align-middle",
         c,
-        ((C = a.tableLayout) == null ? void 0 : C.cellBorder) && "border-e border-stroke-solid-light",
-        ((y = a.tableLayout) == null ? void 0 : y.columnsResizable) && n.getCanResize() && "truncate",
-        (x = e.column.columnDef.meta) == null ? void 0 : x.cellClassName,
-        ((R = a.tableLayout) == null ? void 0 : R.columnsPinnable) && n.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
+        ((f = a.tableLayout) == null ? void 0 : f.cellBorder) && "border-e border-stroke-solid-light",
+        ((C = a.tableLayout) == null ? void 0 : C.columnsResizable) && n.getCanResize() && "truncate",
+        (y = e.column.columnDef.meta) == null ? void 0 : y.cellClassName,
+        ((x = a.tableLayout) == null ? void 0 : x.columnsPinnable) && n.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
         n.getIndex() === 0 || n.getIndex() === d.getVisibleCells().length - 1 ? (L = a.tableClassNames) == null ? void 0 : L.edgeCell : ""
       ),
       children: l
@@ -294,8 +295,8 @@ function G() {
 }
 function O() {
   const { table: l, props: e } = g(), t = l.getAllColumns().length;
-  return /* @__PURE__ */ o("tr", { style: { height: l.getState().pagination.pageSize * 43 }, children: /* @__PURE__ */ o("td", { colSpan: t, className: "text-center text-muted-foreground py-6", children: /* @__PURE__ */ m("div", { className: "text-neutral-muted flex items-center gap-2 px-4 py-2 leading-none-medium-sm justify-center", children: [
-    /* @__PURE__ */ m(
+  return /* @__PURE__ */ o("tr", { style: { height: l.getState().pagination.pageSize * 43 }, children: /* @__PURE__ */ o("td", { colSpan: t, className: "text-center text-muted-foreground py-6", children: /* @__PURE__ */ R("div", { className: "text-neutral-muted flex items-center gap-2 px-4 py-2 leading-none-medium-sm justify-center", children: [
+    /* @__PURE__ */ R(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -356,31 +357,20 @@ function ee({
   row: l
   //   size,
 }) {
-  return /* @__PURE__ */ m(z, { children: [
-    /* @__PURE__ */ o(
-      "div",
-      {
-        className: p(
-          "hidden absolute top-0 bottom-0 start-0 w-[2px] bg-primary",
-          l.getIsSelected() && "block"
-        )
-      }
-    ),
-    /* @__PURE__ */ o(
-      w,
-      {
-        checked: l.getIsSelected(),
-        onCheckedChange: (e) => l.toggleSelected(!!e),
-        "aria-label": "Select row",
-        className: "align-[inherit]"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(
+    k,
+    {
+      checked: l.getIsSelected(),
+      onCheckedChange: (e) => l.toggleSelected(!!e),
+      "aria-label": "Select row",
+      className: "align-[inherit]"
+    }
+  ) });
 }
 function te(l) {
   const { table: e, recordCount: t, isLoading: r } = g();
   return /* @__PURE__ */ o(
-    w,
+    k,
     {
       checked: e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected() && "indeterminate",
       disabled: r || t === 0,
@@ -393,20 +383,20 @@ function te(l) {
 function ae() {
   var a, n;
   const { table: l, isLoading: e, props: t } = g(), r = l.getState().pagination;
-  return /* @__PURE__ */ m(_, { children: [
+  return /* @__PURE__ */ R(_, { children: [
     (((a = t.tableLayout) == null ? void 0 : a.stripped) || !((n = t.tableLayout) != null && n.rowBorder)) && /* @__PURE__ */ o(M, {}),
     /* @__PURE__ */ o(V, { children: e && (r != null && r.pageSize) ? t.loadingMode === "skeleton" ? Array.from({ length: r.pageSize }).map((d, s) => /* @__PURE__ */ o(F, { children: l.getVisibleFlatColumns().map((i, u) => {
       var c;
       return /* @__PURE__ */ o(H, { column: i, children: ((c = i.columnDef.meta) == null ? void 0 : c.skeleton) || /* @__PURE__ */ o(Z, { className: "h-4 w-full" }) }, u);
-    }) }, s)) : /* @__PURE__ */ o(O, {}) : l.getRowModel().rows.length ? l.getRowModel().rows.map((d, s) => /* @__PURE__ */ m(P, { children: [
-      /* @__PURE__ */ o(E, { row: d, children: d.getVisibleCells().map((i, u) => /* @__PURE__ */ o($, { cell: i, children: k(i.column.columnDef.cell, i.getContext()) }, u)) }, s),
+    }) }, s)) : /* @__PURE__ */ o(O, {}) : l.getRowModel().rows.length ? l.getRowModel().rows.map((d, s) => /* @__PURE__ */ R(P, { children: [
+      /* @__PURE__ */ o(E, { row: d, children: d.getVisibleCells().map((i, u) => /* @__PURE__ */ o($, { cell: i, children: w(i.column.columnDef.cell, i.getContext()) }, u)) }, s),
       d.getIsExpanded() && /* @__PURE__ */ o(j, { row: d })
     ] }, d.id)) : /* @__PURE__ */ o(G, {}) }),
     /* @__PURE__ */ o(I, { children: l.getHeaderGroups().map((d, s) => /* @__PURE__ */ o(T, { headerGroup: d, children: d.headers.map((i, u) => {
       var b;
       const { column: c } = i;
-      return /* @__PURE__ */ m(D, { header: i, children: [
-        i.isPlaceholder ? null : k(i.column.columnDef.header, i.getContext()),
+      return /* @__PURE__ */ R(D, { header: i, children: [
+        i.isPlaceholder ? null : w(i.column.columnDef.header, i.getContext()),
         ((b = t.tableLayout) == null ? void 0 : b.columnsResizable) && c.getCanResize() && /* @__PURE__ */ o(A, { header: i })
       ] }, u);
     }) }, s)) })

package/dist/components/table/table.type.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { default as React, FC } from 'react';
 import { NumberCellProps } from './components/cell/number-cell';
 import { BooleanCellProps } from './components/cell/boolean-cell';
 import { LinkCellProps } from './components/cell/link-cell';
@@ -49,7 +49,7 @@ type CellPropsByType = {
 };
 type ColumnBase<T extends CellType> = {
     key: string;
-    title: string;
+    title: string | React.ReactNode;
     cellType: T;
     cellRenderer?: CellRenderer;
     hideable?: boolean;

package/dist/components/table-filter/table-filter.type.d.ts

@@ -13,7 +13,7 @@ export type FilterOption = {
 export type FilterFieldType = 'string' | 'number' | 'boolean' | 'checkbox';
 export type FilterSchemaField = {
     filterKey: string;
-    title: string;
+    title: string | React.ReactNode;
     helperText?: string;
     type: FilterFieldType;
     options?: Record<string, number>;