@cryptlex/web-components 3.8.2 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/dist/components/data-table/data-table-filter.es.js +178 -0
  2. package/dist/components/data-table/data-table-filter.es.js.map +1 -0
  3. package/dist/components/data-table/data-table.es.js +402 -153
  4. package/dist/components/data-table/data-table.es.js.map +1 -1
  5. package/dist/components/data-table/table-commons.es.js +267 -19
  6. package/dist/components/data-table/table-commons.es.js.map +1 -1
  7. package/dist/components/inputs/calendar.es.js +12 -12
  8. package/dist/components/inputs/calendar.es.js.map +1 -1
  9. package/dist/components/inputs/checkbox.es.js +13 -13
  10. package/dist/components/inputs/checkbox.es.js.map +1 -1
  11. package/dist/components/inputs/country-select.es.js +3 -3
  12. package/dist/components/inputs/form-field.es.js +1 -1
  13. package/dist/components/inputs/input-otp.es.js +2 -2
  14. package/dist/components/inputs/input-otp.es.js.map +1 -1
  15. package/dist/components/inputs/input.es.js +7 -7
  16. package/dist/components/inputs/input.es.js.map +1 -1
  17. package/dist/components/inputs/multi-select.es.js +7 -7
  18. package/dist/components/inputs/radio-group.es.js +1 -1
  19. package/dist/components/inputs/select.es.js +10 -10
  20. package/dist/components/inputs/select.es.js.map +1 -1
  21. package/dist/components/inputs/textarea.es.js +4 -4
  22. package/dist/components/key-value-card/key-value-card.es.js +6 -9
  23. package/dist/components/key-value-card/key-value-card.es.js.map +1 -1
  24. package/dist/components/ui/accordion.es.js +6 -6
  25. package/dist/components/ui/accordion.es.js.map +1 -1
  26. package/dist/components/ui/alert.es.js +4 -4
  27. package/dist/components/ui/avatar.es.js +1 -1
  28. package/dist/components/ui/badge.es.js +1 -1
  29. package/dist/components/ui/breadcrumb.es.js +2 -2
  30. package/dist/components/ui/breadcrumb.es.js.map +1 -1
  31. package/dist/components/ui/button.es.js +27 -25
  32. package/dist/components/ui/button.es.js.map +1 -1
  33. package/dist/components/ui/card.es.js +8 -8
  34. package/dist/components/ui/card.es.js.map +1 -1
  35. package/dist/components/ui/copy-button.es.js +12 -14
  36. package/dist/components/ui/copy-button.es.js.map +1 -1
  37. package/dist/components/ui/dialog.es.js +4 -4
  38. package/dist/components/ui/dialog.es.js.map +1 -1
  39. package/dist/components/ui/drawer.es.js +10 -10
  40. package/dist/components/ui/drawer.es.js.map +1 -1
  41. package/dist/components/ui/dropdown-menu.es.js +13 -13
  42. package/dist/components/ui/dropdown-menu.es.js.map +1 -1
  43. package/dist/components/ui/label.es.js +1 -1
  44. package/dist/components/ui/loader.es.js +3 -3
  45. package/dist/components/ui/pagination.es.js +2 -2
  46. package/dist/components/ui/pagination.es.js.map +1 -1
  47. package/dist/components/ui/popover.es.js +5 -5
  48. package/dist/components/ui/popover.es.js.map +1 -1
  49. package/dist/components/ui/separator.es.js +1 -1
  50. package/dist/components/ui/sheet.es.js +1 -1
  51. package/dist/components/ui/sidebar.es.js +105 -105
  52. package/dist/components/ui/sidebar.es.js.map +1 -1
  53. package/dist/components/ui/skeleton.es.js +1 -1
  54. package/dist/components/ui/static-data-table.es.js +1 -1
  55. package/dist/components/ui/table.es.js +8 -8
  56. package/dist/components/ui/table.es.js.map +1 -1
  57. package/dist/components/ui/tabs.es.js +1 -1
  58. package/dist/components/ui/tabs.es.js.map +1 -1
  59. package/dist/components/ui/timeline.es.js +3 -3
  60. package/dist/components/ui/timeline.es.js.map +1 -1
  61. package/dist/components/ui/tooltip.es.js +1 -1
  62. package/dist/index.es.d.ts +128 -32
  63. package/dist/index.es.js +237 -238
  64. package/dist/index.es.js.map +1 -1
  65. package/dist/node_modules/.pnpm/@radix-ui_react-dropdown-menu@2.1.15_@types_react-dom@19.1.0_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0/node_modules/@radix-ui/react-dropdown-menu/dist/index.es.js +10 -10
  66. package/dist/node_modules/.pnpm/@radix-ui_react-menu@2.1.15_@types_react-dom@19.1.0_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0/node_modules/@radix-ui/react-menu/dist/index.es.js +4 -4
  67. package/dist/utils/{index.es.js → primitives.es.js} +1 -1
  68. package/dist/utils/primitives.es.js.map +1 -0
  69. package/dist/{hooks → utils}/use-mobile.es.js.map +1 -1
  70. package/lib/theme.css +10 -12
  71. package/lib/tokens.css +3 -3
  72. package/lib/utilities.css +8 -8
  73. package/package.json +9 -11
  74. package/dist/components/data-table/column-picker.es.js +0 -50
  75. package/dist/components/data-table/column-picker.es.js.map +0 -1
  76. package/dist/components/data-table/page-size.es.js +0 -25
  77. package/dist/components/data-table/page-size.es.js.map +0 -1
  78. package/dist/components/data-table/paginator.es.js +0 -64
  79. package/dist/components/data-table/paginator.es.js.map +0 -1
  80. package/dist/components/data-table/table-actions.es.js +0 -26
  81. package/dist/components/data-table/table-actions.es.js.map +0 -1
  82. package/dist/components/data-table/table-content.es.js +0 -65
  83. package/dist/components/data-table/table-content.es.js.map +0 -1
  84. package/dist/components/data-table/table-utils/constants.es.js +0 -288
  85. package/dist/components/data-table/table-utils/constants.es.js.map +0 -1
  86. package/dist/components/data-table/table-utils/createTableFetchFn.es.js +0 -25
  87. package/dist/components/data-table/table-utils/createTableFetchFn.es.js.map +0 -1
  88. package/dist/components/data-table/table-utils/date.es.js +0 -12
  89. package/dist/components/data-table/table-utils/date.es.js.map +0 -1
  90. package/dist/components/data-table/table-utils/string.es.js +0 -19
  91. package/dist/components/data-table/table-utils/string.es.js.map +0 -1
  92. package/dist/components/data-table/table-utils/types.es.js +0 -5
  93. package/dist/components/data-table/table-utils/types.es.js.map +0 -1
  94. package/dist/utils/index.es.js.map +0 -1
  95. /package/dist/{hooks → utils}/use-mobile.es.js +0 -0
@@ -1,201 +1,450 @@
1
1
  "use client";
2
- import { jsx as o, Fragment as g, jsxs as n } from "react/jsx-runtime";
3
- import { useId as z, useState as E, useEffect as O, useMemo as U } from "react";
4
- import { cn as A } from "../../utils/index.es.js";
5
- import "../../utils/form-context.es.js";
6
- import "../../utils/form-hook.es.js";
7
- import { useQuery as D, keepPreviousData as j } from "@tanstack/react-query";
8
- import { useReactTable as k, getCoreRowModel as q } from "@tanstack/react-table";
9
- import { Info as B } from "lucide-react";
10
- import { ColumnPicker as G } from "./column-picker.es.js";
11
- import { PageSize as H } from "./page-size.es.js";
12
- import { Paginator as K } from "./paginator.es.js";
13
- import Q from "./table-actions.es.js";
14
- import { TableContent as W } from "./table-content.es.js";
15
- import { TABLE_CHECK_BOX_COLUMN as X, TABLE_ID_COLUMN as Y, TABLE_DEFAULT_DATE_COLUMNS as J } from "./table-commons.es.js";
16
- import { Loader as Z } from "../ui/loader.es.js";
17
- const y = "Actions";
18
- function fe({
19
- columns: l,
20
- fetchFn: m,
21
- tableActions: M,
22
- columnsToHideByDefault: d = {},
23
- allowSelection: f = !1,
24
- className: _,
25
- ...L
26
- // filterableFields,
27
- }) {
28
- var w, P, S, x, N;
29
- const F = z(), [T, R] = E({
30
- sorting: [],
31
- // Sorting state
32
- columnFilters: [],
33
- // Filters for columns, not to be confused with the filters that get sent to the Web API.
2
+ import { jsx as e, Fragment as k, jsxs as s } from "react/jsx-runtime";
3
+ import { useQuery as ae, keepPreviousData as re } from "@tanstack/react-query";
4
+ import { createColumnHelper as oe, useReactTable as ie, getCoreRowModel as le, flexRender as O } from "@tanstack/react-table";
5
+ import { Info as se, RotateCw as ce, ArrowDownNarrowWide as de, ArrowDownWideNarrow as ue, ArrowUpDown as me, Columns3 as ge, GripVertical as fe, Menu as pe, ChevronFirst as he, ChevronLeft as be, ChevronRight as Ce, ChevronLast as Se } from "lucide-react";
6
+ import { createContext as ve, useId as we, useState as z, useMemo as I, useEffect as A, useContext as xe } from "react";
7
+ import { useSensors as ye, useSensor as B, PointerSensor as Ne, KeyboardSensor as Te, DndContext as De, closestCenter as Pe, DragOverlay as Me } from "@dnd-kit/core";
8
+ import { sortableKeyboardCoordinates as ke, SortableContext as Oe, verticalListSortingStrategy as Ie, arrayMove as Ae, useSortable as ze } from "@dnd-kit/sortable";
9
+ import { CSS as Le } from "@dnd-kit/utilities";
10
+ import { DropdownMenu as Q, DropdownMenuTrigger as X, DropdownMenuContent as Y, DropdownMenuGroup as Re, DropdownMenuCheckboxItem as $, DropdownMenuRadioGroup as Fe, DropdownMenuRadioItem as Ve } from "../ui/dropdown-menu.es.js";
11
+ import { DataTableFilter as _e } from "./data-table-filter.es.js";
12
+ import { Table as Ee, TableHeader as He, TableRow as G, TableHead as Ue, TableBody as je, TableCell as qe } from "../ui/table.es.js";
13
+ import { merge as Be } from "lodash-es";
14
+ import { TABLE_CHECK_BOX_COLUMN as $e, TABLE_ID_COLUMN as Ge, TABLE_DEFAULT_DATE_COLUMNS as Ke, getResourceDisplayName as K } from "./table-commons.es.js";
15
+ import { Loader as We } from "../ui/loader.es.js";
16
+ import { SearchInput as Qe } from "../inputs/search-input.es.js";
17
+ import { cn as x } from "../../utils/primitives.es.js";
18
+ import { Button as f } from "../ui/button.es.js";
19
+ const L = "tableActions";
20
+ function St({ columns: t, fetchFn: i, columnsToHideByDefault: r = {}, allowSelection: o = !1, filterConfig: a }) {
21
+ var _, E, H;
22
+ const l = we(), [v, N] = z({
23
+ /** Reflect in URL */
34
24
  search: "",
35
25
  // Search query state
26
+ pagination: { pageIndex: 0, pageSize: 20 },
27
+ // Pagination state
28
+ sorting: [],
29
+ // Sorting state
30
+ /** TODO Store on browser as preference */
36
31
  columnVisibility: {},
37
32
  // Visibility of columns
38
- rowSelection: {},
33
+ columnOrder: [],
34
+ /** Ephemeral */
35
+ rowSelection: {}
39
36
  // Row selection state
40
- pagination: { pageIndex: 0, pageSize: 20 }
41
- // Pagination state
42
- }), i = (e) => {
43
- R((r) => ({ ...r, ...e }));
37
+ }), [c, d] = z([]), p = I(() => c.reduce((n, C) => Be(n, C), {}), [c]), u = (n) => {
38
+ N((C) => ({ ...C, ...n }));
44
39
  }, {
45
- sorting: c,
46
- columnFilters: p,
47
- search: h,
48
- columnVisibility: C,
49
- rowSelection: b,
50
- pagination: u
51
- } = T;
52
- O(() => {
53
- i({
40
+ sorting: h,
41
+ search: P,
42
+ columnVisibility: T,
43
+ rowSelection: M,
44
+ pagination: b,
45
+ columnOrder: R
46
+ } = v, w = ae({
47
+ queryKey: [l, b, h, P.trim()],
48
+ queryFn: () => i(b, h, P.trim(), p),
49
+ placeholderData: re,
50
+ // Keep previous data while loading new data
51
+ retry: 0,
52
+ refetchOnWindowFocus: !1
53
+ });
54
+ A(() => {
55
+ u({
54
56
  columnVisibility: {
55
57
  id: !1,
56
58
  updatedAt: !1,
57
- ...d
59
+ ...r
58
60
  }
59
61
  });
60
- }, [d]);
61
- const a = D({
62
- queryKey: [F, u, c, h.trim()],
63
- queryFn: () => m(u, c, h.trim()),
64
- placeholderData: j,
65
- // Keep previous data while loading new data
66
- retry: 0,
67
- refetchOnWindowFocus: !1
68
- }), I = U(() => [
69
- ...f ? X : [],
70
- ...Y,
71
- ...l.filter((r) => r.id !== y),
72
- // ...(metadataColumns.length ? metadataColumns : []),
73
- ...J,
74
- ...l.filter((r) => r.id === y)
75
- ], [l, (w = a.data) == null ? void 0 : w.data, f]);
76
- function V(e) {
77
- return typeof e == "function";
62
+ }, []), A(() => {
63
+ }, [T]);
64
+ const Z = I(() => oe(), []), F = I(() => {
65
+ var j;
66
+ const n = (j = w.data) == null ? void 0 : j.data;
67
+ if (!(n != null && n.length)) return [];
68
+ const C = (m) => m != null && typeof m == "object" && "metadata" in m && Array.isArray(m.metadata), U = n.filter(
69
+ C
70
+ );
71
+ return U.length === 0 ? [] : Array.from(new Set(U.flatMap((m) => {
72
+ var g;
73
+ return ((g = m.metadata) == null ? void 0 : g.map((S) => S.key)) ?? [];
74
+ }))).map((m) => Z.accessor(
75
+ (g) => {
76
+ var S, q;
77
+ return C(g) ? ((q = (S = g == null ? void 0 : g.metadata) == null ? void 0 : S.find((ne) => ne.key === m)) == null ? void 0 : q.value) ?? "" : "";
78
+ },
79
+ {
80
+ id: m,
81
+ header: m,
82
+ // tooltip header
83
+ enableSorting: !1,
84
+ cell: (g) => {
85
+ const S = g.getValue();
86
+ return S == null ? "" : String(S);
87
+ }
88
+ }
89
+ ));
90
+ }, [(_ = w.data) == null ? void 0 : _.data]), ee = [
91
+ ...o ? $e : [],
92
+ ...Ge,
93
+ ...t.filter((n) => n.id !== L),
94
+ ...F.length ? F : [],
95
+ ...Ke,
96
+ // Actions column
97
+ ...t.filter((n) => n.id === L)
98
+ ];
99
+ function te(n) {
100
+ return typeof n == "function";
78
101
  }
79
- function s(e, r) {
80
- return V(e) ? e(r) : e;
102
+ function D(n, C) {
103
+ return te(n) ? n(C) : n;
81
104
  }
82
- const t = k({
83
- data: ((P = a.data) == null ? void 0 : P.data) ?? [],
84
- columns: I,
85
- getCoreRowModel: q(),
86
- rowCount: (S = a.data) == null ? void 0 : S.total,
105
+ const V = ie({
106
+ data: ((E = w.data) == null ? void 0 : E.data) ?? [],
107
+ columns: ee,
108
+ getCoreRowModel: le(),
109
+ rowCount: (H = w.data) == null ? void 0 : H.total,
87
110
  manualPagination: !0,
88
111
  // Handle pagination manually since pagination is done server side for data tables
89
- onPaginationChange: (e) => {
90
- i({ pagination: s(e, u) });
112
+ onPaginationChange: (n) => {
113
+ u({ pagination: D(n, b) });
91
114
  },
92
115
  manualSorting: !0,
93
116
  // Handle sorting manually since sorting is done server side for data tables
94
- onSortingChange: (e) => {
95
- i({ sorting: s(e, c), rowSelection: {} });
117
+ onSortingChange: (n) => {
118
+ u({ sorting: [...D(n, h)], rowSelection: {} });
96
119
  },
97
120
  manualFiltering: !0,
98
121
  // Handle filtering manually since filtering is done server side for data tables
99
- onGlobalFilterChange: (e) => {
100
- i({ columnFilters: s(e, p) });
122
+ onColumnVisibilityChange: (n) => {
123
+ u({ columnVisibility: D(n, T) });
101
124
  },
102
- onColumnVisibilityChange: (e) => {
103
- i({ columnVisibility: s(e, C) });
125
+ onRowSelectionChange: (n) => {
126
+ u({ rowSelection: D(n, M) });
104
127
  },
105
- onRowSelectionChange: (e) => {
106
- i({ rowSelection: s(e, b) });
128
+ onColumnOrderChange: (n) => {
129
+ u({ columnOrder: D(n, R) });
107
130
  },
108
131
  state: {
109
- sorting: c,
110
- columnFilters: p,
111
- columnVisibility: C,
112
- pagination: u,
113
- rowSelection: b
132
+ sorting: h,
133
+ columnVisibility: T,
134
+ pagination: b,
135
+ rowSelection: M,
136
+ columnOrder: R
114
137
  },
115
138
  meta: {
116
- refetch: a.refetch
139
+ refetch: w.refetch
117
140
  }
118
141
  });
119
- return /* @__PURE__ */ o(g, { children: /* @__PURE__ */ n("section", { ...L, className: A("flex flex-col bg-card", _), children: [
120
- /* @__PURE__ */ o(
121
- Q,
142
+ return A(() => {
143
+ u({ columnOrder: [...V.getAllLeafColumns().map((n) => n.id)] });
144
+ }, []), { tableState: v, updateTableState: u, query: w, tanTable: V, mergedFilters: p, filters: c, setFilters: d, filterConfig: a };
145
+ }
146
+ const J = ve(null), y = () => {
147
+ const t = xe(J);
148
+ if (!t)
149
+ throw Error("DataTable should be used within DataTableProvider.");
150
+ return t;
151
+ };
152
+ function vt({ children: t, ...i }) {
153
+ return /* @__PURE__ */ e(J.Provider, { value: i, children: t });
154
+ }
155
+ function wt({
156
+ tableActions: t,
157
+ className: i,
158
+ ...r
159
+ // filterableFields,
160
+ }) {
161
+ var l;
162
+ const { query: o, tanTable: a } = y();
163
+ return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ s("section", { ...r, className: x("flex flex-col bg-card", i), children: [
164
+ /* @__PURE__ */ e(Ze, { tableActions: t }),
165
+ /* @__PURE__ */ s("div", { className: "w-full overflow-auto border-x grow min-h-table relative", tabIndex: 0, children: [
166
+ o.isLoading && /* @__PURE__ */ e(W, { className: "cursor-wait", children: /* @__PURE__ */ e(We, {}) }),
167
+ !o.isLoading && a.getRowModel().rows.length === 0 && // Empty table
168
+ /* @__PURE__ */ e(W, { className: "cursor-not-allowed", children: !o.isFetching && (o.isError ? /* @__PURE__ */ s("span", { className: "flex gap-3 justify-center items-center", children: [
169
+ /* @__PURE__ */ e(se, {}),
170
+ /* @__PURE__ */ e("span", { children: "You don't have the required permissions. Please contact your admin." })
171
+ ] }) : (l = o.data) != null && l.data ? /* @__PURE__ */ e(k, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(k, { children: "No results found." })) }),
172
+ !o.isLoading && a.getRowModel().rows.length !== 0 && /* @__PURE__ */ e(et, { className: "size-full" })
173
+ ] }),
174
+ /* @__PURE__ */ s("div", { className: "flex w-full justify-between border gap-icon p-icon overflow-x-auto", children: [
175
+ /* @__PURE__ */ s("div", { className: "flex gap-icon", children: [
176
+ /* @__PURE__ */ e(Xe, {}),
177
+ /* @__PURE__ */ e(Je, {})
178
+ ] }),
179
+ /* @__PURE__ */ e(Ye, {})
180
+ ] })
181
+ ] }) });
182
+ }
183
+ function W({
184
+ children: t,
185
+ className: i
186
+ }) {
187
+ return /* @__PURE__ */ s(k, { children: [
188
+ /* @__PURE__ */ e(
189
+ "span",
122
190
  {
123
- dataQuery: a,
124
- getSelectedRowModel: t.getSelectedRowModel,
125
- tableActions: M,
126
- handleSearching: (e) => i({ search: e })
191
+ className: x(
192
+ i,
193
+ "absolute top-0 bg-card z-20 size-full text-sm flex items-center justify-center"
194
+ ),
195
+ children: t
127
196
  }
128
197
  ),
129
- /* @__PURE__ */ n("div", { className: "w-full overflow-auto border-x grow min-h-table relative", tabIndex: 0, children: [
130
- a.isLoading && /* @__PURE__ */ o(v, { className: "cursor-wait", children: /* @__PURE__ */ o(Z, {}) }),
131
- !a.isLoading && t.getRowModel().rows.length === 0 && // Empty table
132
- /* @__PURE__ */ o(v, { className: "cursor-not-allowed", children: !a.isFetching && (a.isError ? /* @__PURE__ */ n("span", { className: "flex gap-3 justify-center items-center", children: [
133
- /* @__PURE__ */ o(B, {}),
134
- /* @__PURE__ */ o("span", { children: "You don't have the required permissions. Please contact your admin." })
135
- ] }) : (x = a.data) != null && x.data ? /* @__PURE__ */ o(g, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ o(g, { children: "No results found." })) }),
136
- !a.isLoading && t.getRowModel().rows.length !== 0 && /* @__PURE__ */ o(
137
- W,
198
+ /* @__PURE__ */ e("span", { className: "relative h-full w-0 block" })
199
+ ] });
200
+ }
201
+ function Xe({ ...t }) {
202
+ const { tanTable: i, tableState: r, updateTableState: o } = y(), [a, l] = z(null), v = ye(
203
+ B(Ne),
204
+ B(Te, {
205
+ coordinateGetter: ke
206
+ })
207
+ );
208
+ return /* @__PURE__ */ e(
209
+ De,
210
+ {
211
+ sensors: v,
212
+ collisionDetection: Pe,
213
+ onDragStart: (c) => {
214
+ const { active: d } = c;
215
+ l(d.id.toString());
216
+ },
217
+ onDragEnd: (c) => {
218
+ const { active: d, over: p } = c;
219
+ if (p && d.id !== p.id) {
220
+ const u = r.columnOrder.indexOf(d.id.toString()), h = r.columnOrder.indexOf(p.id.toString());
221
+ o({ columnOrder: [...Ae(r.columnOrder, u, h)] });
222
+ }
223
+ l(null);
224
+ },
225
+ children: /* @__PURE__ */ s(
226
+ Oe,
138
227
  {
139
- className: "size-full",
140
- getRowModel: t.getRowModel,
141
- getHeaderGroups: t.getHeaderGroups
228
+ items: r.columnOrder,
229
+ strategy: Ie,
230
+ children: [
231
+ /* @__PURE__ */ s(Q, { ...t, children: [
232
+ /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ e(f, { icon: () => ge, variant: "neutral", children: "Columns" }) }),
233
+ /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ s(Re, { children: [
234
+ /* @__PURE__ */ e(
235
+ $,
236
+ {
237
+ className: "italic",
238
+ onSelect: (c) => {
239
+ c.preventDefault(), i.toggleAllColumnsVisible();
240
+ },
241
+ checked: i.getIsAllColumnsVisible(),
242
+ children: "(Select all)"
243
+ }
244
+ ),
245
+ r.columnOrder.map((c) => /* @__PURE__ */ e(N, { colId: c }, c))
246
+ ] }) })
247
+ ] }),
248
+ /* @__PURE__ */ e(Me, { children: a ? /* @__PURE__ */ e("div", { className: "dropdown-item opacity-70 border-2 border-primary", children: K(a, "admin-portal") }) : null })
249
+ ]
142
250
  }
143
251
  )
144
- ] }),
145
- /* @__PURE__ */ n("div", { className: "flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
146
- /* @__PURE__ */ n("div", { className: "flex gap-4", children: [
147
- /* @__PURE__ */ o(
148
- G,
149
- {
150
- getAllColumns: t.getAllColumns,
151
- getIsAllColumnsVisible: t.getIsAllColumnsVisible,
152
- toggleAllColumnsVisible: t.toggleAllColumnsVisible
153
- }
154
- ),
155
- /* @__PURE__ */ o(
156
- H,
157
- {
158
- size: t.getState().pagination.pageSize,
159
- onSelect: t.setPageSize
160
- }
161
- )
162
- ] }),
163
- /* @__PURE__ */ o(
164
- K,
252
+ }
253
+ );
254
+ function N({ colId: c }) {
255
+ const d = i.getAllLeafColumns().find((b) => b.id === c);
256
+ if (!d)
257
+ return null;
258
+ const {
259
+ attributes: p,
260
+ listeners: u,
261
+ setNodeRef: h,
262
+ transform: P,
263
+ transition: T
264
+ } = ze({ id: c }), M = {
265
+ transform: Le.Transform.toString(P),
266
+ transition: T,
267
+ zIndex: "999"
268
+ };
269
+ return /* @__PURE__ */ s("div", { ...p, ref: h, className: "flex items-center", style: M, children: [
270
+ /* @__PURE__ */ e(fe, { className: "size-icon cursor-grab m-2", ...u }),
271
+ /* @__PURE__ */ s(
272
+ $,
165
273
  {
166
- firstPage: t.firstPage,
167
- previousPage: t.previousPage,
168
- getCanNextPage: t.getCanNextPage,
169
- getCanPreviousPage: t.getCanPreviousPage,
170
- lastPage: t.lastPage,
171
- nextPage: t.nextPage,
172
- getState: t.getState,
173
- rowCount: ((N = a.data) == null ? void 0 : N.total) ?? 0
274
+ onSelect: (b) => {
275
+ b.preventDefault(), d.toggleVisibility();
276
+ },
277
+ disabled: !d.getCanHide(),
278
+ checked: d.getIsVisible(),
279
+ children: [
280
+ d.getIsSorted(),
281
+ " ",
282
+ K(d.id, "admin-portal")
283
+ ]
174
284
  }
175
285
  )
176
- ] })
177
- ] }) });
286
+ ] });
287
+ }
178
288
  }
179
- function v({
180
- children: l,
181
- className: m
182
- }) {
183
- return /* @__PURE__ */ n(g, { children: [
184
- /* @__PURE__ */ o(
185
- "span",
289
+ function Ye() {
290
+ var o;
291
+ const { tanTable: t, query: i } = y(), r = ((o = i.data) == null ? void 0 : o.total) ?? 0;
292
+ return /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
293
+ /* @__PURE__ */ e("span", { className: "whitespace-nowrap caption text-muted", children: `${t.getState().pagination.pageIndex * t.getState().pagination.pageSize + 1} - ${Math.min(
294
+ (t.getState().pagination.pageIndex + 1) * t.getState().pagination.pageSize,
295
+ r
296
+ )} of ${r == null ? void 0 : r.toLocaleString()}` }),
297
+ /* @__PURE__ */ e(
298
+ f,
186
299
  {
187
- className: A(
188
- "absolute top-0 bg-card z-20 size-full flex items-center justify-center",
189
- m
190
- ),
191
- children: l
300
+ onClick: () => t.firstPage(),
301
+ disabled: !t.getCanPreviousPage(),
302
+ variant: "neutral",
303
+ size: "icon",
304
+ icon: () => he
192
305
  }
193
306
  ),
194
- /* @__PURE__ */ o("span", { className: "relative h-full w-0 block" })
307
+ /* @__PURE__ */ e(
308
+ f,
309
+ {
310
+ onClick: () => t.previousPage(),
311
+ disabled: !t.getCanPreviousPage(),
312
+ variant: "neutral",
313
+ size: "icon",
314
+ icon: () => be
315
+ }
316
+ ),
317
+ /* @__PURE__ */ e(
318
+ f,
319
+ {
320
+ onClick: () => t.nextPage(),
321
+ disabled: !t.getCanNextPage(),
322
+ variant: "neutral",
323
+ size: "icon",
324
+ icon: () => Ce
325
+ }
326
+ ),
327
+ /* @__PURE__ */ e(
328
+ f,
329
+ {
330
+ onClick: () => t.lastPage(),
331
+ disabled: !t.getCanNextPage(),
332
+ variant: "neutral",
333
+ size: "icon",
334
+ icon: () => Se
335
+ }
336
+ )
337
+ ] });
338
+ }
339
+ function Je() {
340
+ const { tanTable: t } = y(), i = [10, 20, 30, 40, 50];
341
+ return /* @__PURE__ */ s(Q, { children: [
342
+ /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ e(f, { icon: () => pe, variant: "neutral", children: t.getState().pagination.pageSize }) }),
343
+ /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(Fe, { value: t.getState().pagination.pageSize.toString(), children: i.map((r) => /* @__PURE__ */ e(
344
+ Ve,
345
+ {
346
+ value: r.toString(),
347
+ onSelect: () => t.setPageSize(r),
348
+ children: r
349
+ }
350
+ )) }) })
351
+ ] });
352
+ }
353
+ function Ze({ tableActions: t }) {
354
+ const { query: i, tanTable: r, tableState: o, updateTableState: a } = y();
355
+ return /* @__PURE__ */ s("section", { className: "flex bg-card justify-between my-0 p-icon border gap-icon overflow-auto", children: [
356
+ /* @__PURE__ */ s("div", { className: "flex gap-icon", children: [
357
+ /* @__PURE__ */ e(
358
+ f,
359
+ {
360
+ loading: i.isFetching,
361
+ icon: () => ce,
362
+ onClick: () => i.refetch(),
363
+ variant: "neutral",
364
+ size: "icon"
365
+ }
366
+ ),
367
+ t.filter((l) => l.bulk === r.getSelectedRowModel().rows.length > 0).map((l, v) => /* @__PURE__ */ e(f, { type: "button", disabled: i.isFetching, className: "animate-in fade-in slide-in-from-left-15 duration-300 transition-transform", onClick: (N) => {
368
+ l.onClick(N, r);
369
+ }, icon: () => l.icon, size: "icon" }, `${v}-${l.bulk}`))
370
+ ] }),
371
+ /* @__PURE__ */ s("div", { className: "flex gap-icon", children: [
372
+ /* @__PURE__ */ e(_e, {}),
373
+ /* @__PURE__ */ e(
374
+ Qe,
375
+ {
376
+ value: o.search,
377
+ onChange: (l) => {
378
+ a({ search: l });
379
+ },
380
+ buttonProps: {
381
+ // TODO, this might not work
382
+ disabled: i.isFetching
383
+ }
384
+ }
385
+ )
386
+ ] })
387
+ ] });
388
+ }
389
+ function et({ className: t }) {
390
+ const { tanTable: i } = y(), r = (o, a) => x("animate-in fade-in slide-in-from-top-10", "px-icon py-2 text-left text-sm font-medium whitespace-nowrap", o && "bg-card sticky right-0 z-50 text-center", a);
391
+ return /* @__PURE__ */ s(Ee, { className: x(t), children: [
392
+ /* @__PURE__ */ e(He, { className: "sticky top-0 z-10", children: i.getHeaderGroups().map((o) => /* @__PURE__ */ e(G, { className: x("h-input"), children: o.headers.map((a) => /* @__PURE__ */ e(
393
+ Ue,
394
+ {
395
+ className: r(!1, "bg-card"),
396
+ children: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1", children: [
397
+ !a.column.getCanSort() && !a.isPlaceholder && /* @__PURE__ */ e("span", { children: O(
398
+ a.column.columnDef.header,
399
+ a.getContext()
400
+ ) }),
401
+ a.column.getCanSort() && /* @__PURE__ */ e(
402
+ f,
403
+ {
404
+ variant: "ghost",
405
+ className: "w-full",
406
+ onClick: a.column.getToggleSortingHandler(),
407
+ trailingIcon: () => {
408
+ const l = a.column.getIsSorted();
409
+ return l === "asc" ? de : l === "desc" ? ue : me;
410
+ },
411
+ children: O(
412
+ a.column.columnDef.header,
413
+ a.getContext()
414
+ )
415
+ }
416
+ )
417
+ ] })
418
+ },
419
+ a.id
420
+ )) }, o.id)) }),
421
+ /* @__PURE__ */ e(je, { className: "flex-1 overflow-y-auto relative", children: i.getRowModel().rows.map((o) => /* @__PURE__ */ e(
422
+ G,
423
+ {
424
+ className: x("h-input transition-colors data-[selected=true]:bg-primary/10 hover:bg-muted-foreground/20"),
425
+ "data-selected": o.getIsSelected(),
426
+ children: o.getVisibleCells().map((a) => /* @__PURE__ */ e(
427
+ qe,
428
+ {
429
+ className: r(a.column.id === L),
430
+ children: O(
431
+ a.column.columnDef.cell,
432
+ a.getContext()
433
+ )
434
+ },
435
+ a.id
436
+ ))
437
+ },
438
+ o.id
439
+ )) })
195
440
  ] });
196
441
  }
197
442
  export {
198
- y as ACTIONS_COLUMN_ID,
199
- fe as DataTable
443
+ L as ACTIONS_COLUMN_ID,
444
+ wt as DataTable,
445
+ J as DataTableContext,
446
+ vt as DataTableProvider,
447
+ y as useDataTable,
448
+ St as useDataTableState
200
449
  };
201
450
  //# sourceMappingURL=data-table.es.js.map