@cryptlex/web-components 3.7.3 → 3.8.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 (12) hide show
  1. package/dist/components/data-table/data-table.es.js +116 -90
  2. package/dist/components/data-table/data-table.es.js.map +1 -1
  3. package/dist/components/data-table/table-content.es.js +54 -87
  4. package/dist/components/data-table/table-content.es.js.map +1 -1
  5. package/dist/components/inputs/checkbox.es.js +1 -1
  6. package/dist/components/inputs/checkbox.es.js.map +1 -1
  7. package/dist/components/ui/badge.es.js +11 -10
  8. package/dist/components/ui/badge.es.js.map +1 -1
  9. package/dist/components/ui/dropdown-menu.es.js +35 -35
  10. package/dist/components/ui/dropdown-menu.es.js.map +1 -1
  11. package/dist/index.es.d.ts +2 -2
  12. package/package.json +1 -1
package/dist/components/data-table/data-table.es.js CHANGED
@@ -1,34 +1,36 @@
1
1
  "use client";
2
- import { jsx as n, Fragment as V, jsxs as u } from "react/jsx-runtime";
3
- import { useId as I, useState as L, useEffect as R, useMemo as E } from "react";
4
- import { cn as O } from "../../utils/index.es.js";
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
5
  import "../../utils/form-context.es.js";
6
6
  import "../../utils/form-hook.es.js";
7
- import { useQuery as U, keepPreviousData as D } from "@tanstack/react-query";
8
- import { createColumnHelper as z, useReactTable as j, getCoreRowModel as q } from "@tanstack/react-table";
9
- import { ColumnPicker as B } from "./column-picker.es.js";
10
- import { PageSize as G } from "./page-size.es.js";
11
- import { Paginator as H } from "./paginator.es.js";
12
- import k from "./table-actions.es.js";
13
- import { TableContent as K } from "./table-content.es.js";
14
- import { TABLE_CHECK_BOX_COLUMN as Q, TABLE_ID_COLUMN as W, TABLE_DEFAULT_DATE_COLUMNS as X } from "./table-commons.es.js";
15
- const w = "Actions";
16
- function ge({
17
- columns: g,
18
- fetchFn: x,
19
- tableActions: A,
20
- columnsToHideByDefault: c = {},
21
- allowSelection: m,
22
- className: y,
23
- ..._
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
24
26
  // filterableFields,
25
27
  }) {
26
- var S, b, P, h;
27
- const v = I(), [M, N] = L({
28
+ var w, P, S, x, N;
29
+ const F = z(), [T, R] = E({
28
30
  sorting: [],
29
31
  // Sorting state
30
32
  columnFilters: [],
31
- // Filters for columns
33
+ // Filters for columns, not to be confused with the filters that get sent to the Web API.
32
34
  search: "",
33
35
  // Search query state
34
36
  columnVisibility: {},
@@ -37,123 +39,129 @@ function ge({
37
39
  // Row selection state
38
40
  pagination: { pageIndex: 0, pageSize: 20 }
39
41
  // Pagination state
40
- }), o = (e) => {
41
- N((i) => ({ ...i, ...e }));
42
+ }), i = (e) => {
43
+ R((r) => ({ ...r, ...e }));
42
44
  }, {
43
- sorting: l,
44
- columnFilters: d,
45
- search: f,
46
- columnVisibility: p,
47
- rowSelection: C,
48
- pagination: s
49
- } = M;
50
- R(() => {
51
- o({
45
+ sorting: c,
46
+ columnFilters: p,
47
+ search: h,
48
+ columnVisibility: C,
49
+ rowSelection: b,
50
+ pagination: u
51
+ } = T;
52
+ O(() => {
53
+ i({
52
54
  columnVisibility: {
53
55
  id: !1,
54
56
  updatedAt: !1,
55
- ...c
57
+ ...d
56
58
  }
57
59
  });
58
- }, [c]);
59
- const a = U({
60
- queryKey: [v, s, l, f.trim()],
61
- queryFn: () => x(s, l, f.trim()),
62
- placeholderData: D,
60
+ }, [d]);
61
+ const a = D({
62
+ queryKey: [F, u, c, h.trim()],
63
+ queryFn: () => m(u, c, h.trim()),
64
+ placeholderData: j,
63
65
  // Keep previous data while loading new data
64
66
  retry: 0,
65
67
  refetchOnWindowFocus: !1
66
- });
67
- z();
68
- const F = E(() => [
69
- ...m ? Q : [],
70
- ...W,
71
- ...g.filter((i) => i.id !== w),
68
+ }), I = U(() => [
69
+ ...f ? X : [],
70
+ ...Y,
71
+ ...l.filter((r) => r.id !== y),
72
72
  // ...(metadataColumns.length ? metadataColumns : []),
73
- ...X,
74
- ...g.filter((i) => i.id === w)
75
- ], [g, (S = a.data) == null ? void 0 : S.data, m]);
76
- function T(e) {
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
77
  return typeof e == "function";
78
78
  }
79
- function r(e, i) {
80
- return T(e) ? e(i) : e;
79
+ function s(e, r) {
80
+ return V(e) ? e(r) : e;
81
81
  }
82
- const t = j({
83
- data: ((b = a.data) == null ? void 0 : b.data) ?? [],
84
- columns: F,
82
+ const t = k({
83
+ data: ((P = a.data) == null ? void 0 : P.data) ?? [],
84
+ columns: I,
85
85
  getCoreRowModel: q(),
86
- rowCount: (P = a.data) == null ? void 0 : P.total,
86
+ rowCount: (S = a.data) == null ? void 0 : S.total,
87
87
  manualPagination: !0,
88
88
  // Handle pagination manually since pagination is done server side for data tables
89
89
  onPaginationChange: (e) => {
90
- o({ pagination: r(e, s) });
90
+ i({ pagination: s(e, u) });
91
91
  },
92
92
  manualSorting: !0,
93
93
  // Handle sorting manually since sorting is done server side for data tables
94
94
  onSortingChange: (e) => {
95
- o({ sorting: r(e, l), rowSelection: {} });
95
+ i({ sorting: s(e, c), rowSelection: {} });
96
96
  },
97
97
  manualFiltering: !0,
98
98
  // Handle filtering manually since filtering is done server side for data tables
99
99
  onGlobalFilterChange: (e) => {
100
- o({ columnFilters: r(e, d) });
100
+ i({ columnFilters: s(e, p) });
101
101
  },
102
102
  onColumnVisibilityChange: (e) => {
103
- o({ columnVisibility: r(e, p) });
103
+ i({ columnVisibility: s(e, C) });
104
104
  },
105
105
  onRowSelectionChange: (e) => {
106
- o({ rowSelection: r(e, C) });
106
+ i({ rowSelection: s(e, b) });
107
107
  },
108
108
  state: {
109
- sorting: l,
110
- columnFilters: d,
111
- columnVisibility: p,
112
- pagination: s,
113
- rowSelection: C
109
+ sorting: c,
110
+ columnFilters: p,
111
+ columnVisibility: C,
112
+ pagination: u,
113
+ rowSelection: b
114
114
  },
115
115
  meta: {
116
116
  refetch: a.refetch
117
117
  }
118
118
  });
119
- return /* @__PURE__ */ n(V, { children: /* @__PURE__ */ u("section", { ..._, className: O("flex flex-col bg-card", y), children: [
120
- /* @__PURE__ */ n(
121
- k,
119
+ return /* @__PURE__ */ o(g, { children: /* @__PURE__ */ n("section", { ...L, className: A("flex flex-col bg-card", _), children: [
120
+ /* @__PURE__ */ o(
121
+ Q,
122
122
  {
123
123
  dataQuery: a,
124
124
  getSelectedRowModel: t.getSelectedRowModel,
125
- tableActions: A,
126
- handleSearching: (e) => o({ search: e })
125
+ tableActions: M,
126
+ handleSearching: (e) => i({ search: e })
127
127
  }
128
128
  ),
129
- /* @__PURE__ */ n("div", { className: "w-full overflow-auto border-x grow", tabIndex: 0, children: /* @__PURE__ */ n(
130
- K,
131
- {
132
- getRowModel: t.getRowModel,
133
- getHeaderGroups: t.getHeaderGroups,
134
- query: a
135
- }
136
- ) }),
137
- /* @__PURE__ */ u("div", { className: "flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
138
- /* @__PURE__ */ u("div", { className: "flex gap-4", children: [
139
- /* @__PURE__ */ n(
140
- B,
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,
138
+ {
139
+ className: "size-full",
140
+ getRowModel: t.getRowModel,
141
+ getHeaderGroups: t.getHeaderGroups
142
+ }
143
+ )
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,
141
149
  {
142
150
  getAllColumns: t.getAllColumns,
143
151
  getIsAllColumnsVisible: t.getIsAllColumnsVisible,
144
152
  toggleAllColumnsVisible: t.toggleAllColumnsVisible
145
153
  }
146
154
  ),
147
- /* @__PURE__ */ n(
148
- G,
155
+ /* @__PURE__ */ o(
156
+ H,
149
157
  {
150
158
  size: t.getState().pagination.pageSize,
151
159
  onSelect: t.setPageSize
152
160
  }
153
161
  )
154
162
  ] }),
155
- /* @__PURE__ */ n(
156
- H,
163
+ /* @__PURE__ */ o(
164
+ K,
157
165
  {
158
166
  firstPage: t.firstPage,
159
167
  previousPage: t.previousPage,
@@ -162,14 +170,32 @@ function ge({
162
170
  lastPage: t.lastPage,
163
171
  nextPage: t.nextPage,
164
172
  getState: t.getState,
165
- rowCount: ((h = a.data) == null ? void 0 : h.total) ?? 0
173
+ rowCount: ((N = a.data) == null ? void 0 : N.total) ?? 0
166
174
  }
167
175
  )
168
176
  ] })
169
177
  ] }) });
170
178
  }
179
+ function v({
180
+ children: l,
181
+ className: m
182
+ }) {
183
+ return /* @__PURE__ */ n(g, { children: [
184
+ /* @__PURE__ */ o(
185
+ "span",
186
+ {
187
+ className: A(
188
+ "absolute top-0 bg-card z-20 size-full flex items-center justify-center",
189
+ m
190
+ ),
191
+ children: l
192
+ }
193
+ ),
194
+ /* @__PURE__ */ o("span", { className: "relative h-full w-0 block" })
195
+ ] });
196
+ }
171
197
  export {
172
- w as ACTIONS_COLUMN_ID,
173
- ge as DataTable
198
+ y as ACTIONS_COLUMN_ID,
199
+ fe as DataTable
174
200
  };
175
201
  //# sourceMappingURL=data-table.es.js.map
package/dist/components/data-table/data-table.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n// import { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n\tcn,\n\tTABLE_CHECK_BOX_COLUMN,\n\tTABLE_DEFAULT_DATE_COLUMNS,\n\tTABLE_ID_COLUMN\n} from \"@/index\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype ColumnDef,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype TableOptions,\n\ttype TableState,\n\ttype Updater,\n\tuseReactTable,\n\ttype VisibilityState\n} from \"@tanstack/react-table\";\nimport React, { useEffect, useId, useMemo, useState } from \"react\";\nimport { ColumnPicker } from \"./column-picker\";\nimport { PageSize } from \"./page-size\";\nimport { Paginator } from \"./paginator\";\nimport Actions from \"./table-actions\";\nimport { TableContent } from \"./table-content\";\nimport type { TableActions, TableFetchFn } from \"./table-utils\";\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = \"Actions\";\n\n// Props type for the DataTable component\n\nexport type DataTableState = Pick<TableState, 'sorting' | 'columnFilters' | 'columnVisibility' | 'rowSelection' | 'pagination'> & { search: string };\nexport interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {\n\tfetchFn: TableFetchFn<TData>;\n\ttableActions: TableActions;\n\tallowSelection: boolean;\n\tcolumnsToHideByDefault?: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends object>({\n\tcolumns,\n\tfetchFn,\n\ttableActions,\n\tcolumnsToHideByDefault = {},\n\tallowSelection,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps<TData>) {\n\t// State for managing table data and filters\n\tconst id = useId();\n\n\t//TODO: This is later to be stored in url as params\n\tconst [tableState, _setTableState] = useState<DataTableState>({\n\t\tsorting: [], // Sorting state\n\t\tcolumnFilters: [], // Filters for columns\n\t\tsearch: \"\", // Search query state\n\t\tcolumnVisibility: {}, // Visibility of columns\n\t\trowSelection: {}, // Row selection state\n\t\tpagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n\t});\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<DataTableState>) => {\n\t\t_setTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\t// Destructuring the table state for easier access\n\tconst {\n\t\tsorting,\n\t\tcolumnFilters,\n\t\tsearch,\n\t\tcolumnVisibility,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\t// TODO\n\t// Debounce the search query to avoid making a request on every keystroke\n\t// const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n\t// Update column visibility when columnsToHideByDefault changes\n\tuseEffect(() => {\n\t\tupdateTableState({\n\t\t\tcolumnVisibility: {\n\t\t\t\tid: false,\n\t\t\t\tupdatedAt: false,\n\t\t\t\t...columnsToHideByDefault,\n\t\t\t},\n\t\t});\n\t}, [columnsToHideByDefault]);\n\n\t// TODO, implement filters\n\t// const [filters, setFilters] = useState<FilterFormType[]>([]);\n\t// const formatedFilters = useMemo(() => {\n\t// return filters.reduce((acc, filter) => {\n\t// const { property, value, operator } = filter;\n\t// if (!acc[property]) {\n\t// acc[property] = {};\n\t// }\n\t// acc[property][operator] = value;\n\t// return acc;\n\t// }, {} as Record<string, Record<string, any>>);\n\t// }, [filters]);\n\n\t// Fetch table data using the fetchFn and react-query's useQuery hook\n\tconst query = useQuery({\n\t\tqueryKey: [id, pagination, sorting, search.trim()],\n\t\tqueryFn: () => fetchFn(pagination, sorting, search.trim()),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\n\t// TODO Memoizing here seems wasteful\n\t// TODO is createColumnHelper an expensive operation?\n\tconst columnHelper = createColumnHelper<TData>();\n\t// const metadataColumns = useMemo<ColumnDef<TData>[]>(() => {\n\t// \tconst data = query.data?.data;\n\t// \tif (!data?.length) return [];\n\t// \t// set of all the keys present in a given view\n\t// \tconst allMetadataKeys = new Set<string>();\n\n\t// \t// Collect all unique metadata keys\n\t// \tdata.forEach((row: TData) => {\n\t// \t\tif ('metadata' in row && row.metadata && Array.isArray(row.metadata)) {\n\t// \t\t\trow.metadata.forEach((meta: MetadataDto) => {\n\t// \t\t\t\tallMetadataKeys.add(meta.key);\n\t// \t\t\t});\n\t// \t\t}\n\t// \t});\n\n\t// \t// Generate columns for all unique metadata keys\n\t// \treturn Array.from(allMetadataKeys).map((key) =>\n\t// \t\tcolumnHelper.accessor(\n\t// \t\t\t(row: TData) => {\n\t// \t\t\t\t// Find the metadata object with the matching key\n\t// \t\t\t\tconst metadataEntry = row.metadata?.find(\n\t// \t\t\t\t\t(meta: MetadataDto) => meta.key === key,\n\t// \t\t\t\t);\n\t// \t\t\t\treturn metadataEntry?.value; // Return the value for the specific key\n\t// \t\t\t},\n\t// \t\t\t{\n\t// \t\t\t\theader: () => (\n\t// \t\t\t\t\t<TooltipProvider delayDuration={0}>\n\t// \t\t\t\t\t\t<Tooltip>\n\t// \t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t// \t\t\t\t\t\t\t\t<span className=\"flex gap-1 items-center align-middle\">\n\t// \t\t\t\t\t\t\t\t\t{key} <Info size={18} strokeWidth={\"1px\"} />\n\t// \t\t\t\t\t\t\t\t</span>\n\t// \t\t\t\t\t\t\t</TooltipTrigger>\n\t// \t\t\t\t\t\t\t<TooltipContent>Metadata Key</TooltipContent>\n\t// \t\t\t\t\t\t</Tooltip>\n\t// \t\t\t\t\t</TooltipProvider>\n\t// \t\t\t\t), // Use the metadata key as the column header\n\t// \t\t\t\tid: key,\n\t// \t\t\t\tenableSorting: false,\n\t// \t\t\t\tcell: (info) => {\n\t// \t\t\t\t\tconst value = info.getValue();\n\t// \t\t\t\t\t// Handle null/undefined values\n\t// \t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t// \t\t\t\t\t// For primitive types, return the string representation\n\t// \t\t\t\t\treturn String(value);\n\t// \t\t\t\t},\n\t// \t\t\t},\n\t// \t\t),\n\t// \t);\n\t// }, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n\t\tconst _columns = [\n\t\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t\t...TABLE_ID_COLUMN,\n\t\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t\t// ...(metadataColumns.length ? metadataColumns : []),\n\t\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t\t];\n\n\t\treturn _columns;\n\t}, [columns, query.data?.data, allowSelection]);\n\n\t// Type-guard for updater\n\tfunction isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n\t\treturn typeof updater === \"function\";\n\t}\n\t// Utility function to resolve updater\n\tfunction resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n\t\tif (isUpdaterFunction(updater)) {\n\t\t\treturn updater(currentValue);\n\t\t}\n\t\treturn updater;\n\t}\n\n\t// Use react-table's hook to create the table instance\n\tconst table = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: extendedColumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tupdateTableState({ pagination: resolveUpdater(updater, pagination) });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tupdateTableState({ sorting: resolveUpdater(updater, sorting), rowSelection: {} }); // Reset selection when sorting.\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonGlobalFilterChange: (updater) => {\n\t\t\tupdateTableState({ columnFilters: resolveUpdater(updater, columnFilters) });\n\t\t},\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tupdateTableState({ columnVisibility: resolveUpdater(updater, columnVisibility) });\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tupdateTableState({ rowSelection: resolveUpdater(updater, rowSelection) });\n\t\t},\n\t\tstate: {\n\t\t\tsorting: sorting,\n\t\t\tcolumnFilters: columnFilters,\n\t\t\tcolumnVisibility: columnVisibility,\n\t\t\tpagination: pagination,\n\t\t\trowSelection: rowSelection,\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/* TODO, explore filtering component being outside the data-table, fine-grained theming would be nice here */}\n\t\t\t{/* Also, the data-table is a huuuuuge component, it would be nice to have it broken into pieces a little */}\n\t\t\t{/* ContextAPI???? */}\n\n\t\t\t{/* <TableFilter\n filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n filters={filters}\n onFiltersChange={setFilters}\n /> */}\n\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={cn(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions\n\t\t\t\t\tdataQuery={query}\n\t\t\t\t\tgetSelectedRowModel={table.getSelectedRowModel}\n\t\t\t\t\ttableActions={tableActions}\n\t\t\t\t\thandleSearching={(value) => updateTableState({ search: value })}\n\t\t\t\t/>\n\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow\" tabIndex={0}>\n\t\t\t\t\t<TableContent\n\t\t\t\t\t\tgetRowModel={table.getRowModel}\n\t\t\t\t\t\tgetHeaderGroups={table.getHeaderGroups}\n\t\t\t\t\t\tquery={query}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<ColumnPicker\n\t\t\t\t\t\t\tgetAllColumns={table.getAllColumns}\n\t\t\t\t\t\t\tgetIsAllColumnsVisible={table.getIsAllColumnsVisible}\n\t\t\t\t\t\t\ttoggleAllColumnsVisible={table.toggleAllColumnsVisible}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSize\n\t\t\t\t\t\t\tsize={table.getState().pagination.pageSize}\n\t\t\t\t\t\t\tonSelect={table.setPageSize}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator\n\t\t\t\t\t\tfirstPage={table.firstPage}\n\t\t\t\t\t\tpreviousPage={table.previousPage}\n\t\t\t\t\t\tgetCanNextPage={table.getCanNextPage}\n\t\t\t\t\t\tgetCanPreviousPage={table.getCanPreviousPage}\n\t\t\t\t\t\tlastPage={table.lastPage}\n\t\t\t\t\t\tnextPage={table.nextPage}\n\t\t\t\t\t\tgetState={table.getState}\n\t\t\t\t\t\trowCount={query.data?.total ?? 0}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableActions","columnsToHideByDefault","allowSelection","className","props","id","useId","tableState","_setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","search","columnVisibility","rowSelection","pagination","useEffect","query","useQuery","keepPreviousData","createColumnHelper","extendedColumns","useMemo","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_a","isUpdaterFunction","updater","resolveUpdater","currentValue","table","useReactTable","_b","getCoreRowModel","_c","jsx","Fragment","cn","Actions","value","TableContent","jsxs","ColumnPicker","PageSize","Paginator","_d"],"mappings":"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"}
1
+ {"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n// import { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n\tcn,\n\tLoader,\n\tTABLE_CHECK_BOX_COLUMN,\n\tTABLE_DEFAULT_DATE_COLUMNS,\n\tTABLE_ID_COLUMN\n} from \"@/index\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype ColumnDef,\n\tgetCoreRowModel,\n\ttype TableOptions,\n\ttype TableState,\n\ttype Updater,\n\tuseReactTable,\n\ttype VisibilityState\n} from \"@tanstack/react-table\";\nimport { Info } from \"lucide-react\";\nimport React, { useEffect, useId, useMemo, useState } from \"react\";\nimport { ColumnPicker } from \"./column-picker\";\nimport { PageSize } from \"./page-size\";\nimport { Paginator } from \"./paginator\";\nimport Actions from \"./table-actions\";\nimport { TableContent } from \"./table-content\";\nimport type { TableActions, TableFetchFn } from \"./table-utils\";\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = \"Actions\";\n\n// Props type for the DataTable component\n\nexport type DataTableState = Pick<TableState, 'sorting' | 'columnFilters' | 'columnVisibility' | 'rowSelection' | 'pagination'> & { search: string };\nexport interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {\n\tfetchFn: TableFetchFn<TData>;\n\ttableActions: TableActions;\n\tallowSelection?: boolean;\n\tcolumnsToHideByDefault?: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends object>({\n\tcolumns,\n\tfetchFn,\n\ttableActions,\n\tcolumnsToHideByDefault = {},\n\tallowSelection = false,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps<TData>) {\n\t// State for managing table data and filters\n\tconst id = useId();\n\n\t//TODO: This is later to be stored in url as params\n\tconst [tableState, _setTableState] = useState<DataTableState>({\n\t\tsorting: [], // Sorting state\n\t\tcolumnFilters: [], // Filters for columns, not to be confused with the filters that get sent to the Web API.\n\t\tsearch: \"\", // Search query state\n\t\tcolumnVisibility: {}, // Visibility of columns\n\t\trowSelection: {}, // Row selection state\n\t\tpagination: { pageIndex: 0, pageSize: 20 }, // Pagination state\n\t});\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<DataTableState>) => {\n\t\t_setTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\t// Destructuring the table state for easier access\n\tconst {\n\t\tsorting,\n\t\tcolumnFilters,\n\t\tsearch,\n\t\tcolumnVisibility,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\t// TODO\n\t// Debounce the search query to avoid making a request on every keystroke\n\t// const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n\t// Update column visibility when columnsToHideByDefault changes\n\tuseEffect(() => {\n\t\tupdateTableState({\n\t\t\tcolumnVisibility: {\n\t\t\t\tid: false,\n\t\t\t\tupdatedAt: false,\n\t\t\t\t...columnsToHideByDefault,\n\t\t\t},\n\t\t});\n\t}, [columnsToHideByDefault]);\n\n\t// TODO, implement filters\n\t// const [filters, setFilters] = useState<FilterFormType[]>([]);\n\t// const formatedFilters = useMemo(() => {\n\t// return filters.reduce((acc, filter) => {\n\t// const { property, value, operator } = filter;\n\t// if (!acc[property]) {\n\t// acc[property] = {};\n\t// }\n\t// acc[property][operator] = value;\n\t// return acc;\n\t// }, {} as Record<string, Record<string, any>>);\n\t// }, [filters]);\n\n\t// Fetch table data using the fetchFn and react-query's useQuery hook\n\tconst query = useQuery({\n\t\tqueryKey: [id, pagination, sorting, search.trim()],\n\t\tqueryFn: () => fetchFn(pagination, sorting, search.trim()),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\n\t// TODO Memoizing here seems wasteful\n\t// TODO is createColumnHelper an expensive operation?\n\t// const columnHelper = createColumnHelper<TData>();\n\t// const metadataColumns = useMemo<ColumnDef<TData>[]>(() => {\n\t// \tconst data = query.data?.data;\n\t// \tif (!data?.length) return [];\n\t// \t// set of all the keys present in a given view\n\t// \tconst allMetadataKeys = new Set<string>();\n\n\t// \t// Collect all unique metadata keys\n\t// \tdata.forEach((row: TData) => {\n\t// \t\tif ('metadata' in row && row.metadata && Array.isArray(row.metadata)) {\n\t// \t\t\trow.metadata.forEach((meta: MetadataDto) => {\n\t// \t\t\t\tallMetadataKeys.add(meta.key);\n\t// \t\t\t});\n\t// \t\t}\n\t// \t});\n\n\t// \t// Generate columns for all unique metadata keys\n\t// \treturn Array.from(allMetadataKeys).map((key) =>\n\t// \t\tcolumnHelper.accessor(\n\t// \t\t\t(row: TData) => {\n\t// \t\t\t\t// Find the metadata object with the matching key\n\t// \t\t\t\tconst metadataEntry = row.metadata?.find(\n\t// \t\t\t\t\t(meta: MetadataDto) => meta.key === key,\n\t// \t\t\t\t);\n\t// \t\t\t\treturn metadataEntry?.value; // Return the value for the specific key\n\t// \t\t\t},\n\t// \t\t\t{\n\t// \t\t\t\theader: () => (\n\t// \t\t\t\t\t<TooltipProvider delayDuration={0}>\n\t// \t\t\t\t\t\t<Tooltip>\n\t// \t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t// \t\t\t\t\t\t\t\t<span className=\"flex gap-1 items-center align-middle\">\n\t// \t\t\t\t\t\t\t\t\t{key} <Info size={18} strokeWidth={\"1px\"} />\n\t// \t\t\t\t\t\t\t\t</span>\n\t// \t\t\t\t\t\t\t</TooltipTrigger>\n\t// \t\t\t\t\t\t\t<TooltipContent>Metadata Key</TooltipContent>\n\t// \t\t\t\t\t\t</Tooltip>\n\t// \t\t\t\t\t</TooltipProvider>\n\t// \t\t\t\t), // Use the metadata key as the column header\n\t// \t\t\t\tid: key,\n\t// \t\t\t\tenableSorting: false,\n\t// \t\t\t\tcell: (info) => {\n\t// \t\t\t\t\tconst value = info.getValue();\n\t// \t\t\t\t\t// Handle null/undefined values\n\t// \t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t// \t\t\t\t\t// For primitive types, return the string representation\n\t// \t\t\t\t\treturn String(value);\n\t// \t\t\t\t},\n\t// \t\t\t},\n\t// \t\t),\n\t// \t);\n\t// }, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n\t\tconst _columns = [\n\t\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t\t...TABLE_ID_COLUMN,\n\t\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t\t// ...(metadataColumns.length ? metadataColumns : []),\n\t\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t\t];\n\n\t\treturn _columns;\n\t}, [columns, query.data?.data, allowSelection]);\n\n\t// Type-guard for updater\n\tfunction isUpdaterFunction<T>(updater: Updater<T>): updater is (old: T) => T {\n\t\treturn typeof updater === \"function\";\n\t}\n\t// Utility function to resolve updater\n\tfunction resolveUpdater<T>(updater: Updater<T>, currentValue: T) {\n\t\tif (isUpdaterFunction(updater)) {\n\t\t\treturn updater(currentValue);\n\t\t}\n\t\treturn updater;\n\t}\n\n\t// Use react-table's hook to create the table instance\n\tconst table = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: extendedColumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tupdateTableState({ pagination: resolveUpdater(updater, pagination) });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tupdateTableState({ sorting: resolveUpdater(updater, sorting), rowSelection: {} }); // Reset selection when sorting.\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonGlobalFilterChange: (updater) => {\n\t\t\tupdateTableState({ columnFilters: resolveUpdater(updater, columnFilters) });\n\t\t},\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tupdateTableState({ columnVisibility: resolveUpdater(updater, columnVisibility) });\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tupdateTableState({ rowSelection: resolveUpdater(updater, rowSelection) });\n\t\t},\n\t\tstate: {\n\t\t\tsorting: sorting,\n\t\t\tcolumnFilters: columnFilters,\n\t\t\tcolumnVisibility: columnVisibility,\n\t\t\tpagination: pagination,\n\t\t\trowSelection: rowSelection,\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/* TODO, explore filtering component being outside the data-table, fine-grained theming would be nice here */}\n\t\t\t{/* Also, the data-table is a huuuuuge component, it would be nice to have it broken into pieces a little */}\n\t\t\t{/* ContextAPI???? */}\n\n\t\t\t{/* <TableFilter\n filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n filters={filters}\n onFiltersChange={setFilters}\n /> */}\n\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={cn(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions\n\t\t\t\t\tdataQuery={query}\n\t\t\t\t\tgetSelectedRowModel={table.getSelectedRowModel}\n\t\t\t\t\ttableActions={tableActions}\n\t\t\t\t\thandleSearching={(value) => updateTableState({ search: value })}\n\t\t\t\t/>\n\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow min-h-table relative\" tabIndex={0}>\n\t\t\t\t\t{/* Table overlay with loader */}\n\t\t\t\t\t{query.isLoading && (\n\t\t\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t\t\t<Loader />\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{/* Table overlay for empty table */}\n\t\t\t\t\t{!query.isLoading && table.getRowModel().rows.length === 0 && (\n\t\t\t\t\t\t// Empty table\n\t\t\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t\t\t{/* TODO Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableOverlay>\n\t\t\t\t\t)}\n\t\t\t\t\t{!query.isLoading && table.getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t<TableContent\n\t\t\t\t\t\t\tclassName=\"size-full\"\n\t\t\t\t\t\t\tgetRowModel={table.getRowModel}\n\t\t\t\t\t\t\tgetHeaderGroups={table.getHeaderGroups}\n\t\t\t\t\t\t/>}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<ColumnPicker\n\t\t\t\t\t\t\tgetAllColumns={table.getAllColumns}\n\t\t\t\t\t\t\tgetIsAllColumnsVisible={table.getIsAllColumnsVisible}\n\t\t\t\t\t\t\ttoggleAllColumnsVisible={table.toggleAllColumnsVisible}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSize\n\t\t\t\t\t\t\tsize={table.getState().pagination.pageSize}\n\t\t\t\t\t\t\tonSelect={table.setPageSize}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator\n\t\t\t\t\t\tfirstPage={table.firstPage}\n\t\t\t\t\t\tpreviousPage={table.previousPage}\n\t\t\t\t\t\tgetCanNextPage={table.getCanNextPage}\n\t\t\t\t\t\tgetCanPreviousPage={table.getCanPreviousPage}\n\t\t\t\t\t\tlastPage={table.lastPage}\n\t\t\t\t\t\tnextPage={table.nextPage}\n\t\t\t\t\t\tgetState={table.getState}\n\t\t\t\t\t\trowCount={query.data?.total ?? 0}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n\nfunction TableOverlay({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) {\n\treturn (\n\t\t<>\n\t\t\t<span\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute top-0 bg-card z-20 size-full flex items-center justify-center\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t\t{/* Keep something in document flow with the correct height */}\n\t\t\t<span className=\"relative h-full w-0 block\" />\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableActions","columnsToHideByDefault","allowSelection","className","props","id","useId","tableState","_setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","search","columnVisibility","rowSelection","pagination","useEffect","query","useQuery","keepPreviousData","extendedColumns","useMemo","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_a","isUpdaterFunction","updater","resolveUpdater","currentValue","table","useReactTable","_b","getCoreRowModel","_c","jsx","Fragment","cn","Actions","value","jsxs","TableOverlay","Loader","Info","_d","TableContent","ColumnPicker","PageSize","Paginator","_e","children"],"mappings":"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"}
package/dist/components/data-table/table-content.es.js CHANGED
@@ -1,98 +1,65 @@
1
- import { jsxs as o, jsx as e, Fragment as a } from "react/jsx-runtime";
2
- import { ACTIONS_COLUMN_ID as p } from "./data-table.es.js";
3
- import { Table as w, TableHeader as b, TableRow as u, TableHead as x, TableBody as N, TableCell as v } from "../ui/table.es.js";
4
- import { cn as h } from "../../utils/index.es.js";
5
- import { flexRender as f } from "@tanstack/react-table";
6
- import { Info as C, ArrowDownNarrowWide as T, ArrowDownWideNarrow as y, ArrowUpDown as k } from "lucide-react";
7
- import { useCallback as z } from "react";
8
- import { Loader as D } from "../ui/loader.es.js";
9
- import { Button as I } from "../ui/button.es.js";
10
- const g = ({
11
- children: l,
12
- className: i
13
- }) => /* @__PURE__ */ o(a, { children: [
14
- /* @__PURE__ */ e(
15
- "div",
16
- {
17
- className: h(
18
- "absolute top-0 bg-card z-20 size-full flex items-center justify-center",
19
- i
20
- ),
21
- children: l
22
- }
23
- ),
24
- /* @__PURE__ */ e("div", { className: "relative h-full w-0" })
25
- ] });
26
- function F({
27
- className: l,
28
- getHeaderGroups: i,
29
- getRowModel: s,
30
- query: n
1
+ import { jsxs as i, jsx as t } from "react/jsx-runtime";
2
+ import { ACTIONS_COLUMN_ID as l } from "./data-table.es.js";
3
+ import { Table as d, TableHeader as p, TableRow as a, TableHead as u, TableBody as f, TableCell as g } from "../ui/table.es.js";
4
+ import { flexRender as s } from "@tanstack/react-table";
5
+ import { ArrowDownNarrowWide as x, ArrowDownWideNarrow as w, ArrowUpDown as b } from "lucide-react";
6
+ import { Button as h } from "../ui/button.es.js";
7
+ function k({
8
+ className: c,
9
+ getHeaderGroups: m,
10
+ getRowModel: r
31
11
  }) {
32
- var m;
33
- const c = z(() => n.isLoading, [n]);
34
- return /* @__PURE__ */ o(w, { className: h("size-full relative min-h-table", l), children: [
35
- c() && /* @__PURE__ */ e(g, { className: "cursor-wait", children: /* @__PURE__ */ e(D, {}) }),
36
- !c() && s().rows.length === 0 && // Empty table
37
- /* @__PURE__ */ e(g, { className: "cursor-not-allowed", children: !n.isFetching && (n.isError ? /* @__PURE__ */ o("span", { className: "flex gap-3 justify-center items-center", children: [
38
- /* @__PURE__ */ e(C, {}),
39
- /* @__PURE__ */ e("span", { children: "You don't have the required permissions. Please contact your admin." })
40
- ] }) : (m = n.data) != null && m.data ? /* @__PURE__ */ e(a, { children: "Unknown error. Please contact customer support." }) : /* @__PURE__ */ e(a, { children: "No results found." })) }),
41
- !c() && s().rows.length !== 0 && /* @__PURE__ */ o(a, { children: [
42
- /* @__PURE__ */ e(b, { className: "sticky top-0 z-10", children: i().map((r) => /* @__PURE__ */ e(u, { children: r.headers.map((t) => /* @__PURE__ */ e(
43
- x,
44
- {
45
- className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${t.id === p ? "sticky right-0 z-50 text-center" : ""}`,
46
- children: /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-1", children: [
47
- /* @__PURE__ */ e("span", { children: t.isPlaceholder ? null : f(
48
- t.column.columnDef.header,
49
- t.getContext()
50
- ) }),
51
- t.column.getCanSort() && /* @__PURE__ */ e(
52
- I,
53
- {
54
- size: "icon",
55
- variant: "ghost",
56
- onClick: t.column.getToggleSortingHandler(),
57
- icon: () => {
58
- const d = t.column.getIsSorted();
59
- return d === "asc" ? T : d === "desc" ? y : k;
60
- }
12
+ return /* @__PURE__ */ i(d, { className: c, children: [
13
+ /* @__PURE__ */ t(p, { className: "sticky top-0 z-10", children: m().map((o) => /* @__PURE__ */ t(a, { children: o.headers.map((e) => /* @__PURE__ */ t(
14
+ u,
15
+ {
16
+ className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${e.id === l ? "sticky right-0 z-50 text-center" : ""}`,
17
+ children: /* @__PURE__ */ i("span", { className: "inline-flex items-center gap-1", children: [
18
+ /* @__PURE__ */ t("span", { children: e.isPlaceholder ? null : s(
19
+ e.column.columnDef.header,
20
+ e.getContext()
21
+ ) }),
22
+ e.column.getCanSort() && /* @__PURE__ */ t(
23
+ h,
24
+ {
25
+ size: "icon",
26
+ variant: "ghost",
27
+ onClick: e.column.getToggleSortingHandler(),
28
+ icon: () => {
29
+ const n = e.column.getIsSorted();
30
+ return n === "asc" ? x : n === "desc" ? w : b;
61
31
  }
62
- )
63
- ] })
64
- },
65
- t.id
66
- )) }, r.id)) }),
67
- /* @__PURE__ */ e(N, { className: "flex-1 overflow-y-auto relative", children: s().rows.length !== 0 && s().rows.map((r) => (
68
- // TODO, table rows with checkboxes are much bigger than table rows without them, adjust for the same to be uniform
69
- /* @__PURE__ */ e(
70
- u,
32
+ }
33
+ )
34
+ ] })
35
+ },
36
+ e.id
37
+ )) }, o.id)) }),
38
+ /* @__PURE__ */ t(f, { className: "flex-1 overflow-y-auto relative", children: r().rows.length !== 0 && r().rows.map((o) => /* @__PURE__ */ t(
39
+ a,
40
+ {
41
+ className: "h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20",
42
+ "data-state": o.getIsSelected() && "selected",
43
+ children: o.getVisibleCells().map((e) => /* @__PURE__ */ t(
44
+ g,
71
45
  {
72
- className: "transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20",
73
- "data-state": r.getIsSelected() && "selected",
74
- children: r.getVisibleCells().map((t) => /* @__PURE__ */ e(
75
- v,
76
- {
77
- className: `
46
+ className: `
78
47
  px-4 py-2 text-left text-sm whitespace-nowrap
79
- ${t.column.id === p ? "sticky right-0 w-20 bg-card" : ""}
48
+ ${e.column.id === l ? "sticky right-0 w-20 bg-card" : ""}
80
49
  `,
81
- children: f(
82
- t.column.columnDef.cell,
83
- t.getContext()
84
- )
85
- },
86
- t.id
87
- ))
50
+ children: s(
51
+ e.column.columnDef.cell,
52
+ e.getContext()
53
+ )
88
54
  },
89
- r.id
90
- )
91
- )) })
92
- ] })
55
+ e.id
56
+ ))
57
+ },
58
+ o.id
59
+ )) })
93
60
  ] });
94
61
  }
95
62
  export {
96
- F as TableContent
63
+ k as TableContent
97
64
  };
98
65
  //# sourceMappingURL=table-content.es.js.map
package/dist/components/data-table/table-content.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button, Loader } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/utils\";\nimport type { UseQueryResult } from \"@tanstack/react-query\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown,\n\tInfo,\n} from \"lucide-react\";\nimport { useCallback } from \"react\";\n\nconst TableOverlay = ({\n\tchildren,\n\tclassName,\n}: { children: React.ReactNode; className?: string }) => (\n\t<>\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute top-0 bg-card z-20 size-full flex items-center justify-center\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t\t{/* Keep something in document flow with the correct height */}\n\t\t<div className=\"relative h-full w-0\"></div>\n\t</>\n\n);\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n\tquery,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n\tquery: UseQueryResult<any, unknown>;\n}) {\n\tconst isLoading = useCallback(() => {\n\t\treturn query.isLoading;\n\t}, [query]);\n\n\treturn (\n\t\t<TableComponent className={cn(\"size-full relative min-h-table\", className)}>\n\t\t\t{/* Table overlay with loader */}\n\t\t\t{isLoading() && (\n\t\t\t\t<TableOverlay className=\"cursor-wait\">\n\t\t\t\t\t<Loader />\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{/* Table overlay for empty table */}\n\t\t\t{!isLoading() && getRowModel().rows.length === 0 && (\n\t\t\t\t// Empty table\n\t\t\t\t<TableOverlay className=\"cursor-not-allowed\">\n\t\t\t\t\t{!query.isFetching &&\n\t\t\t\t\t\t(query.isError ? (\n\t\t\t\t\t\t\t<span className=\"flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t{/* TODO Check for 403 explicitly!! */}\n\t\t\t\t\t\t\t\t{/* <span>{query.error}</span> */}\n\t\t\t\t\t\t\t\t<Info />\n\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\tYou don't have the required permissions. Please contact your\n\t\t\t\t\t\t\t\t\tadmin.\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : !query.data?.data ? (\n\t\t\t\t\t\t\t<>No results found.</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>Unknown error. Please contact customer support.</>\n\t\t\t\t\t\t))}\n\t\t\t\t</TableOverlay>\n\t\t\t)}\n\t\t\t{!isLoading() && getRowModel().rows.length !== 0 && (\n\t\t\t\t<>\n\t\t\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t\t// TODO, table rows with checkboxes are much bigger than table rows without them, adjust for the same to be uniform\n\t\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\t\tclassName=\"transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\t\t\tclassName={`\n px-4 py-2 text-left text-sm whitespace-nowrap\n ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t\t\t}\n `}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableOverlay","children","className","jsxs","Fragment","jsx","cn","TableContent","getHeaderGroups","getRowModel","query","isLoading","useCallback","TableComponent","Loader","Info","_a","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":"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"}
1
+ {"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from \"@/components/data-table/data-table\";\nimport { Button } from \"@/components/ui\";\nimport {\n\tTableBody,\n\tTableCell,\n\tTable as TableComponent,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport {\n\ttype HeaderGroup,\n\ttype RowModel,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\tArrowDownNarrowWide,\n\tArrowDownWideNarrow,\n\tArrowUpDown\n} from \"lucide-react\";\n\n// TODO, automate checking valid HTML\nexport function TableContent({\n\tclassName,\n\tgetHeaderGroups,\n\tgetRowModel,\n}: {\n\tclassName?: string;\n\tgetRowModel: () => RowModel<any>;\n\tgetHeaderGroups: () => HeaderGroup<any>[];\n}) {\n\treturn (\n\t\t<TableComponent className={className}>\n\t\t\t<TableHeader className=\"sticky top-0 z-10\">\n\t\t\t\t{getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t<TableRow key={headerGroup.id}>\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\tclassName={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? \"sticky right-0 z-50 text-center\" : \"\"}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"inline-flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder\n\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t: flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{header.column.getCanSort() && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\ticon={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst sort = header.column.getIsSorted();\n\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"asc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownNarrowWide;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tif (sort === \"desc\") {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowDownWideNarrow;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\treturn ArrowUpDown;\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableHeader>\n\t\t\t<TableBody className=\"flex-1 overflow-y-auto relative\">\n\t\t\t\t{getRowModel().rows.length !== 0 &&\n\t\t\t\t\tgetRowModel().rows.map((row) => (\n\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\tclassName=\"h-input transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20\"\n\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\t\tkey={cell.id}\n\t\t\t\t\t\t\t\t\tclassName={`\n px-4 py-2 text-left text-sm whitespace-nowrap\n ${cell.column.id === ACTIONS_COLUMN_ID\n\t\t\t\t\t\t\t\t\t\t\t? \"sticky right-0 w-20 bg-card\"\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t\t}\n `}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\tcell.getContext(),\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</TableComponent>\n\t);\n}\n"],"names":["TableContent","className","getHeaderGroups","getRowModel","jsxs","TableComponent","jsx","TableHeader","headerGroup","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","sort","ArrowDownNarrowWide","ArrowDownWideNarrow","ArrowUpDown","TableBody","row","cell","TableCell"],"mappings":";;;;;;AAsBO,SAASA,EAAa;AAAA,EAC5B,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AACD,GAIG;AACF,SACC,gBAAAC,EAACC,KAAe,WAAAJ,GACf,UAAA;AAAA,IAAA,gBAAAK,EAACC,GAAA,EAAY,WAAU,qBACrB,UAAAL,EAAA,EAAkB,IAAI,CAACM,MACvB,gBAAAF,EAACG,GAAA,EACC,UAAAD,EAAY,QAAQ,IAAI,CAACE,MACzB,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QAEA,WAAW,qEAAqED,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,QAExJ,UAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,kCACf,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EACC,UAAAI,EAAO,gBACL,OACAG;AAAA,YACDH,EAAO,OAAO,UAAU;AAAA,YACxBA,EAAO,WAAA;AAAA,UAAW,GAErB;AAAA,UACCA,EAAO,OAAO,WAAA,KACd,gBAAAJ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACA,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,SAASJ,EAAO,OAAO,wBAAA;AAAA,cACvB,MAAM,MAAM;AACX,sBAAMK,IAAOL,EAAO,OAAO,YAAA;AAC3B,uBAAIK,MAAS,QACLC,IAEJD,MAAS,SACLE,IAGDC;AAAA,cAAA;AAAA,YACR;AAAA,UAAA;AAAA,QACD,EAAA,CAEF;AAAA,MAAA;AAAA,MA9BKR,EAAO;AAAA,IAAA,CAgCb,KAnCaF,EAAY,EAoC3B,CACA,EAAA,CACF;AAAA,IACA,gBAAAF,EAACa,GAAA,EAAU,WAAU,mCACnB,cAAc,KAAK,WAAW,KAC9BhB,EAAA,EAAc,KAAK,IAAI,CAACiB,MACvB,gBAAAd;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QAEV,cAAYW,EAAI,cAAA,KAAmB;AAAA,QAElC,UAAAA,EAAI,gBAAA,EAAkB,IAAI,CAACC,MAC3B,gBAAAf;AAAA,UAACgB;AAAA,UAAA;AAAA,YAEA,WAAW;AAAA;AAAA,sBAEED,EAAK,OAAO,OAAOT,IAC5B,gCACA,EACH;AAAA;AAAA,YAGA,UAAAC;AAAA,cACAQ,EAAK,OAAO,UAAU;AAAA,cACtBA,EAAK,WAAA;AAAA,YAAW;AAAA,UACjB;AAAA,UAZKA,EAAK;AAAA,QAAA,CAcX;AAAA,MAAA;AAAA,MAnBID,EAAI;AAAA,IAAA,CAqBV,EAAA,CACH;AAAA,EAAA,GACD;AAEF;"}
package/dist/components/inputs/checkbox.es.js CHANGED
@@ -3,7 +3,7 @@ import { cn as t } from "../../utils/index.es.js";
3
3
  import { useFieldContext as a } from "../../utils/form-context.es.js";
4
4
  import { CircleDashed as l, Check as c } from "lucide-react";
5
5
  function u({ className: n, checked: e, indeterminate: i, ...r }) {
6
- return /* @__PURE__ */ s("div", { className: "relative", children: [
6
+ return /* @__PURE__ */ s("div", { className: "relative size-input", children: [
7
7
  i && /* @__PURE__ */ o(l, { className: "pointer-events-none absolute size-icon top-2 left-2" }),
8
8
  e && !i && /* @__PURE__ */ o(c, { className: "pointer-events-none absolute size-icon top-2 left-2" }),
9
9
  /* @__PURE__ */ o(
package/dist/components/inputs/checkbox.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.es.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport { Check, CircleDashed } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport interface CheckboxProps\n\textends Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> {\n\tindeterminate?: boolean\n}\n\nexport function Checkbox({ className, checked, indeterminate, ...props }: CheckboxProps) {\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t{indeterminate && <CircleDashed className=\"pointer-events-none absolute size-icon top-2 left-2\" />}\n\t\t\t{checked && !indeterminate && <Check className=\"pointer-events-none absolute size-icon top-2 left-2\" />}\n\t\t\t<input\n\t\t\t\tchecked={checked}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\n\t\t</div>\n\t);\n}\n\nexport interface TfCheckboxProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof Checkbox>,\n\t\t\"onChange\" | \"onBlur\" | \"checked\"\n\t> { }\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n\tconst field = useFieldContext<boolean>();\n\n\treturn (\n\t\t<Checkbox\n\t\t\tchecked={field.state.value}\n\t\t\tonChange={() => field.handleChange(!field.state.value)}\n\t\t\tonBlur={field.handleBlur}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["Checkbox","className","checked","indeterminate","props","jsxs","jsx","CircleDashed","Check","cn","TfCheckbox","field","useFieldContext"],"mappings":";;;;AAUO,SAASA,EAAS,EAAE,WAAAC,GAAW,SAAAC,GAAS,eAAAC,GAAe,GAAGC,KAAwB;AACxF,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAF,KAAiB,gBAAAG,EAACC,GAAA,EAAa,WAAU,sDAAA,CAAsD;AAAA,IAC/FL,KAAW,CAACC,KAAiB,gBAAAG,EAACE,GAAA,EAAM,WAAU,uDAAsD;AAAA,IACrG,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,SAAAJ;AAAA,QACA,MAAK;AAAA,QACL,WAAWO;AAAA,UACV;AAAA,UACAR;AAAA,QAAA;AAAA,QAEA,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GAED;AAEF;AAOO,SAASM,EAAW,EAAE,GAAGN,KAA0B;AACzD,QAAMO,IAAQC,EAAA;AAEd,SACC,gBAAAN;AAAA,IAACN;AAAA,IAAA;AAAA,MACA,SAASW,EAAM,MAAM;AAAA,MACrB,UAAU,MAAMA,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK;AAAA,MACrD,QAAQA,EAAM;AAAA,MACb,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"checkbox.es.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport { Check, CircleDashed } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport interface CheckboxProps\n\textends Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> {\n\tindeterminate?: boolean\n}\n\nexport function Checkbox({ className, checked, indeterminate, ...props }: CheckboxProps) {\n\treturn (\n\t\t<div className=\"relative size-input\">\n\t\t\t{indeterminate && <CircleDashed className=\"pointer-events-none absolute size-icon top-2 left-2\" />}\n\t\t\t{checked && !indeterminate && <Check className=\"pointer-events-none absolute size-icon top-2 left-2\" />}\n\t\t\t<input\n\t\t\t\tchecked={checked}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\n\t\t</div>\n\t);\n}\n\nexport interface TfCheckboxProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof Checkbox>,\n\t\t\"onChange\" | \"onBlur\" | \"checked\"\n\t> { }\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n\tconst field = useFieldContext<boolean>();\n\n\treturn (\n\t\t<Checkbox\n\t\t\tchecked={field.state.value}\n\t\t\tonChange={() => field.handleChange(!field.state.value)}\n\t\t\tonBlur={field.handleBlur}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["Checkbox","className","checked","indeterminate","props","jsxs","jsx","CircleDashed","Check","cn","TfCheckbox","field","useFieldContext"],"mappings":";;;;AAUO,SAASA,EAAS,EAAE,WAAAC,GAAW,SAAAC,GAAS,eAAAC,GAAe,GAAGC,KAAwB;AACxF,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAAF,KAAiB,gBAAAG,EAACC,GAAA,EAAa,WAAU,sDAAA,CAAsD;AAAA,IAC/FL,KAAW,CAACC,KAAiB,gBAAAG,EAACE,GAAA,EAAM,WAAU,uDAAsD;AAAA,IACrG,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,SAAAJ;AAAA,QACA,MAAK;AAAA,QACL,WAAWO;AAAA,UACV;AAAA,UACAR;AAAA,QAAA;AAAA,QAEA,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GAED;AAEF;AAOO,SAASM,EAAW,EAAE,GAAGN,KAA0B;AACzD,QAAMO,IAAQC,EAAA;AAEd,SACC,gBAAAN;AAAA,IAACN;AAAA,IAAA;AAAA,MACA,SAASW,EAAM,MAAM;AAAA,MACrB,UAAU,MAAMA,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK;AAAA,MACrD,QAAQA,EAAM;AAAA,MACb,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGP;"}
package/dist/components/ui/badge.es.js CHANGED
@@ -1,18 +1,19 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import { cn as r } from "../../utils/index.es.js";
3
- function c({ className: e, ...n }) {
4
- return /* @__PURE__ */ i(
5
- "div",
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { cn as t } from "../../utils/index.es.js";
3
+ function s({ className: n, children: r, ...i }) {
4
+ return /* @__PURE__ */ e(
5
+ "span",
6
6
  {
7
- className: r(
8
- "text-muted transition-colors inline-flex items-center justify-center leading-none select-none bg-card border px-2 h-input py-1 focus:outline-hidden focus:ring-1 focus:ring-ring",
9
- e
7
+ className: t(
8
+ "text-muted leading-none inline-flex items-center justify-center select-none bg-card border h-input focus:outline-hidden focus:ring-1 focus:ring-ring",
9
+ n
10
10
  ),
11
- ...n
11
+ ...i,
12
+ children: /* @__PURE__ */ e("span", { children: r })
12
13
  }
13
14
  );
14
15
  }
15
16
  export {
16
- c as Badge
17
+ s as Badge
17
18
  };
18
19
  //# sourceMappingURL=badge.es.js.map
package/dist/components/ui/badge.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"badge.es.js","sources":["../../../lib/components/ui/badge.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport type * as React from \"react\";\n\nexport function Badge({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted transition-colors inline-flex items-center justify-center leading-none select-none bg-card border px-2 h-input py-1 focus:outline-hidden focus:ring-1 focus:ring-ring\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"names":["Badge","className","props","jsx","cn"],"mappings":";;AAGO,SAASA,EAAM,EAAE,WAAAC,GAAW,GAAGC,KAAsC;AAC3E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACV;AAAA,QACAH;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"badge.es.js","sources":["../../../lib/components/ui/badge.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport type * as React from \"react\";\n\nexport function Badge({ className, children, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted leading-none inline-flex items-center justify-center select-none bg-card border h-input focus:outline-hidden focus:ring-1 focus:ring-ring\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{/* Contents */}\n\t\t\t<span>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</span>\n\t);\n}\n"],"names":["Badge","className","children","props","jsx","cn"],"mappings":";;AAGO,SAASA,EAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAAuC;AACtF,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACV;AAAA,QACAJ;AAAA,MAAA;AAAA,MAEA,GAAGE;AAAA,MAGJ,UAAA,gBAAAC,EAAC,UACC,UAAAF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGH;"}
package/dist/components/ui/dropdown-menu.es.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { jsx as t, jsxs as s } from "react/jsx-runtime";
2
2
  import { cn as n } from "../../utils/index.es.js";
3
- import { Root as c, Trigger as u, Group as l, Portal as d, Content as p, CheckboxItem as f, ItemIndicator as i, RadioGroup as b, RadioItem as g, Sub as h, SubTrigger as w, SubContent as x, Item as D, Label as I } from "../../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";
4
- import { Check as m, ChevronRight as M } from "lucide-react";
5
- const S = c, v = u, G = l, T = d, k = h, y = b;
3
+ import { Root as c, Trigger as l, Group as u, Portal as i, Content as p, CheckboxItem as f, ItemIndicator as d, RadioGroup as b, RadioItem as g, Sub as h, SubTrigger as w, SubContent as x, Item as N, Label as D } from "../../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";
4
+ import { Check as m, ChevronRight as I } from "lucide-react";
5
+ const S = c, v = l, G = u, T = i, k = h, y = b;
6
6
  function L({
7
- className: e,
8
- inset: o,
7
+ className: o,
8
+ inset: e,
9
9
  children: a,
10
10
  ...r
11
11
  }) {
@@ -14,102 +14,102 @@ function L({
14
14
  {
15
15
  className: n(
16
16
  "flex cursor-default select-none items-center px-2 py-1.5 body outline-hidden focus:bg-accent data-[state=open]:bg-accent",
17
- o && "pl-8",
18
- e
17
+ e && "pl-8",
18
+ o
19
19
  ),
20
20
  ...r,
21
21
  children: [
22
22
  a,
23
- /* @__PURE__ */ t(M, { className: "ml-auto size-4" })
23
+ /* @__PURE__ */ t(I, { className: "ml-auto size-4" })
24
24
  ]
25
25
  }
26
26
  );
27
27
  }
28
28
  function P({
29
- className: e,
30
- ...o
29
+ className: o,
30
+ ...e
31
31
  }) {
32
32
  return /* @__PURE__ */ t(
33
33
  x,
34
34
  {
35
35
  className: n(
36
36
  "z-50 min-w-32 overflow-hidden border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
37
- e
37
+ o
38
38
  ),
39
- ...o
39
+ ...e
40
40
  }
41
41
  );
42
42
  }
43
43
  function j({
44
- className: e,
45
- sideOffset: o = 4,
44
+ className: o,
45
+ sideOffset: e = 4,
46
46
  ...a
47
47
  }) {
48
- return /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(
48
+ return /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(
49
49
  p,
50
50
  {
51
51
  align: "start",
52
- sideOffset: o,
52
+ sideOffset: e,
53
53
  className: n(
54
54
  "z-50 min-w-48 max-w-2xs overflow-y-auto max-h-48 border bg-popover text-popover-foreground",
55
55
  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
56
- e
56
+ o
57
57
  ),
58
58
  ...a
59
59
  }
60
60
  ) });
61
61
  }
62
62
  function q({
63
- className: e,
64
- ...o
63
+ className: o,
64
+ ...e
65
65
  }) {
66
- return /* @__PURE__ */ t(D, { className: n("dropdown-item"), ...o });
66
+ return /* @__PURE__ */ t(N, { className: n("dropdown-item"), ...e });
67
67
  }
68
68
  function A({
69
- className: e,
70
- children: o,
69
+ className: o,
70
+ children: e,
71
71
  checked: a,
72
72
  ...r
73
73
  }) {
74
74
  return /* @__PURE__ */ s(
75
75
  f,
76
76
  {
77
- className: n("dropdown-item", e),
77
+ className: n("dropdown-item inline-flex items-center", o),
78
78
  checked: a,
79
79
  ...r,
80
80
  children: [
81
- /* @__PURE__ */ t(i, { className: "absolute right-2 size-icon", children: /* @__PURE__ */ t(m, { className: "size-icon" }) }),
82
- o
81
+ /* @__PURE__ */ t(d, { className: "absolute right-2 size-icon", children: /* @__PURE__ */ t(m, { className: "size-icon" }) }),
82
+ /* @__PURE__ */ t("span", { className: "leading-none pe-3", children: e })
83
83
  ]
84
84
  }
85
85
  );
86
86
  }
87
87
  function B({
88
- className: e,
89
- children: o,
88
+ className: o,
89
+ children: e,
90
90
  ...a
91
91
  }) {
92
92
  return /* @__PURE__ */ s(
93
93
  g,
94
94
  {
95
- className: n("dropdown-item", e),
95
+ className: n("dropdown-item", o),
96
96
  ...a,
97
97
  children: [
98
- /* @__PURE__ */ t(i, { className: "absolute right-2 size-icon", children: /* @__PURE__ */ t(m, { className: "size-icon" }) }),
99
- o
98
+ /* @__PURE__ */ t(d, { className: "absolute right-2 size-icon", children: /* @__PURE__ */ t(m, { className: "size-icon" }) }),
99
+ e
100
100
  ]
101
101
  }
102
102
  );
103
103
  }
104
104
  function E({
105
- className: e,
106
- ...o
105
+ className: o,
106
+ ...e
107
107
  }) {
108
108
  return /* @__PURE__ */ t(
109
- I,
109
+ D,
110
110
  {
111
- className: n("p-2 border-b caption", e),
112
- ...o
111
+ className: n("p-2 border-b caption", o),
112
+ ...e
113
113
  }
114
114
  );
115
115
  }
package/dist/components/ui/dropdown-menu.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown-menu.es.js","sources":["../../../lib/components/ui/dropdown-menu.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronRight } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/**\n * TODO (mudasirpandith)\n * Focus on trigger.\n * Focus on content after trigger is pressed?\n * List keyboard navigation in buttons within DropdownItems\n */\nexport function DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n\tinset?: boolean;\n}) {\n\treturn (\n\t\t<DropdownMenuPrimitive.SubTrigger\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default select-none items-center px-2 py-1.5 body outline-hidden focus:bg-accent data-[state=open]:bg-accent\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRight className=\"ml-auto size-4\" />\n\t\t</DropdownMenuPrimitive.SubTrigger>\n\t);\n}\n\nexport function DropdownMenuSubContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 min-w-32 overflow-hidden border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function DropdownMenuContent({\n\tclassName,\n\tsideOffset = 4,\n\t...props\n}: React.CustomComponentPropsWithRef<typeof DropdownMenuPrimitive.Content>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Portal>\n\t\t\t<DropdownMenuPrimitive.Content\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-50 min-w-48 max-w-2xs overflow-y-auto max-h-48 border bg-popover text-popover-foreground\",\n\t\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</DropdownMenuPrimitive.Portal>\n\t);\n}\n\nexport function DropdownMenuItem({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Item className={cn(\"dropdown-item\")} {...props} />\n\t);\n}\n\nexport function DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.CheckboxItem\n\t\t\tclassName={cn(\"dropdown-item\", className)}\n\t\t\tchecked={checked}\n\t\t\t{...props}\n\t\t>\n\t\t\t<DropdownMenuPrimitive.ItemIndicator className=\"absolute right-2 size-icon\">\n\t\t\t\t<Check className=\"size-icon\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.CheckboxItem>\n\t);\n}\n\nexport function DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tclassName={cn(\"dropdown-item\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<DropdownMenuPrimitive.ItemIndicator className=\"absolute right-2 size-icon\">\n\t\t\t\t<Check className=\"size-icon\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t);\n}\n\nexport function DropdownMenuLabel({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Label\n\t\t\tclassName={cn(\"p-2 border-b caption\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}"],"names":["DropdownMenu","DropdownMenuPrimitive.Root","DropdownMenuTrigger","DropdownMenuPrimitive.Trigger","DropdownMenuGroup","DropdownMenuPrimitive.Group","DropdownMenuPortal","DropdownMenuPrimitive.Portal","DropdownMenuSub","DropdownMenuPrimitive.Sub","DropdownMenuRadioGroup","DropdownMenuPrimitive.RadioGroup","DropdownMenuSubTrigger","className","inset","children","props","jsxs","DropdownMenuPrimitive.SubTrigger","cn","jsx","ChevronRight","DropdownMenuSubContent","DropdownMenuPrimitive.SubContent","DropdownMenuContent","sideOffset","DropdownMenuPrimitive.Content","DropdownMenuItem","DropdownMenuPrimitive.Item","DropdownMenuCheckboxItem","checked","DropdownMenuPrimitive.CheckboxItem","DropdownMenuPrimitive.ItemIndicator","Check","DropdownMenuRadioItem","DropdownMenuPrimitive.RadioItem","DropdownMenuLabel","DropdownMenuPrimitive.Label"],"mappings":";;;;AAKO,MAAMA,IAAeC,GACfC,IAAsBC,GACtBC,IAAoBC,GACpBC,IAAqBC,GACrBC,IAAkBC,GAClBC,IAAyBC;AAQ/B,SAASC,EAAuB;AAAA,EACtC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,GAEG;AACF,SACC,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACV;AAAA,QACAL,KAAS;AAAA,QACTD;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACD,gBAAAK,EAACC,GAAA,EAAa,WAAU,iBAAA,CAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5C;AAEO,SAASC,EAAuB;AAAA,EACtC,WAAAT;AAAA,EACA,GAAGG;AACJ,GAAkE;AACjE,SACC,gBAAAI;AAAA,IAACG;AAAAA,IAAA;AAAA,MACA,WAAWJ;AAAA,QACV;AAAA,QACAN;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASQ,EAAoB;AAAA,EACnC,WAAAX;AAAA,EACA,YAAAY,IAAa;AAAA,EACb,GAAGT;AACJ,GAA4E;AAC3E,SACC,gBAAAI,EAACb,GAAA,EACA,UAAA,gBAAAa;AAAA,IAACM;AAAAA,IAAA;AAAA,MACA,OAAM;AAAA,MACN,YAAAD;AAAA,MACA,WAAWN;AAAA,QACV;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,IAAA;AAAA,EAAA,GAEN;AAEF;AAEO,SAASW,EAAiB;AAAA,EAChC,WAAAd;AAAA,EACA,GAAGG;AACJ,GAA4D;AAC3D,SACC,gBAAAI,EAACQ,GAAA,EAA2B,WAAWT,EAAG,eAAe,GAAI,GAAGH,GAAO;AAEzE;AAEO,SAASa,EAAyB;AAAA,EACxC,WAAAhB;AAAA,EACA,UAAAE;AAAA,EACA,SAAAe;AAAA,EACA,GAAGd;AACJ,GAAoE;AACnE,SACC,gBAAAC;AAAA,IAACc;AAAAA,IAAA;AAAA,MACA,WAAWZ,EAAG,iBAAiBN,CAAS;AAAA,MACxC,SAAAiB;AAAA,MACC,GAAGd;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACY,GAAA,EAAoC,WAAU,8BAC9C,UAAA,gBAAAZ,EAACa,GAAA,EAAM,WAAU,YAAA,CAAY,EAAA,CAC9B;AAAA,QACClB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;AAEO,SAASmB,EAAsB;AAAA,EACrC,WAAArB;AAAA,EACA,UAAAE;AAAA,EACA,GAAGC;AACJ,GAAiE;AAChE,SACC,gBAAAC;AAAA,IAACkB;AAAAA,IAAA;AAAA,MACA,WAAWhB,EAAG,iBAAiBN,CAAS;AAAA,MACvC,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACY,GAAA,EAAoC,WAAU,8BAC9C,UAAA,gBAAAZ,EAACa,GAAA,EAAM,WAAU,YAAA,CAAY,EAAA,CAC9B;AAAA,QACClB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;AAEO,SAASqB,EAAkB;AAAA,EACjC,WAAAvB;AAAA,EACA,GAAGG;AACJ,GAA6D;AAC5D,SACC,gBAAAI;AAAA,IAACiB;AAAAA,IAAA;AAAA,MACA,WAAWlB,EAAG,wBAAwBN,CAAS;AAAA,MAC9C,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"dropdown-menu.es.js","sources":["../../../lib/components/ui/dropdown-menu.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronRight } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport const DropdownMenu = DropdownMenuPrimitive.Root;\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nexport const DropdownMenuGroup = DropdownMenuPrimitive.Group;\nexport const DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\nexport const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\n/**\n * TODO (mudasirpandith)\n * Focus on trigger.\n * Focus on content after trigger is pressed?\n * List keyboard navigation in buttons within DropdownItems\n */\nexport function DropdownMenuSubTrigger({\n\tclassName,\n\tinset,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n\tinset?: boolean;\n}) {\n\treturn (\n\t\t<DropdownMenuPrimitive.SubTrigger\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default select-none items-center px-2 py-1.5 body outline-hidden focus:bg-accent data-[state=open]:bg-accent\",\n\t\t\t\tinset && \"pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRight className=\"ml-auto size-4\" />\n\t\t</DropdownMenuPrimitive.SubTrigger>\n\t);\n}\n\nexport function DropdownMenuSubContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 min-w-32 overflow-hidden border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function DropdownMenuContent({\n\tclassName,\n\tsideOffset = 4,\n\t...props\n}: React.CustomComponentPropsWithRef<typeof DropdownMenuPrimitive.Content>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Portal>\n\t\t\t<DropdownMenuPrimitive.Content\n\t\t\t\talign=\"start\"\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-50 min-w-48 max-w-2xs overflow-y-auto max-h-48 border bg-popover text-popover-foreground\",\n\t\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</DropdownMenuPrimitive.Portal>\n\t);\n}\n\nexport function DropdownMenuItem({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Item className={cn(\"dropdown-item\")} {...props} />\n\t);\n}\n\nexport function DropdownMenuCheckboxItem({\n\tclassName,\n\tchildren,\n\tchecked,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.CheckboxItem\n\t\t\tclassName={cn(\"dropdown-item inline-flex items-center\", className)}\n\t\t\tchecked={checked}\n\t\t\t{...props}\n\t\t>\n\t\t\t<DropdownMenuPrimitive.ItemIndicator className=\"absolute right-2 size-icon\">\n\t\t\t\t<Check className=\"size-icon\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t<span className=\"leading-none pe-3\">\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</DropdownMenuPrimitive.CheckboxItem>\n\t);\n}\n\nexport function DropdownMenuRadioItem({\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tclassName={cn(\"dropdown-item\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<DropdownMenuPrimitive.ItemIndicator className=\"absolute right-2 size-icon\">\n\t\t\t\t<Check className=\"size-icon\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t);\n}\n\nexport function DropdownMenuLabel({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label>) {\n\treturn (\n\t\t<DropdownMenuPrimitive.Label\n\t\t\tclassName={cn(\"p-2 border-b caption\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}"],"names":["DropdownMenu","DropdownMenuPrimitive.Root","DropdownMenuTrigger","DropdownMenuPrimitive.Trigger","DropdownMenuGroup","DropdownMenuPrimitive.Group","DropdownMenuPortal","DropdownMenuPrimitive.Portal","DropdownMenuSub","DropdownMenuPrimitive.Sub","DropdownMenuRadioGroup","DropdownMenuPrimitive.RadioGroup","DropdownMenuSubTrigger","className","inset","children","props","jsxs","DropdownMenuPrimitive.SubTrigger","cn","jsx","ChevronRight","DropdownMenuSubContent","DropdownMenuPrimitive.SubContent","DropdownMenuContent","sideOffset","DropdownMenuPrimitive.Content","DropdownMenuItem","DropdownMenuPrimitive.Item","DropdownMenuCheckboxItem","checked","DropdownMenuPrimitive.CheckboxItem","DropdownMenuPrimitive.ItemIndicator","Check","DropdownMenuRadioItem","DropdownMenuPrimitive.RadioItem","DropdownMenuLabel","DropdownMenuPrimitive.Label"],"mappings":";;;;AAKO,MAAMA,IAAeC,GACfC,IAAsBC,GACtBC,IAAoBC,GACpBC,IAAqBC,GACrBC,IAAkBC,GAClBC,IAAyBC;AAQ/B,SAASC,EAAuB;AAAA,EACtC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,GAEG;AACF,SACC,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACV;AAAA,QACAL,KAAS;AAAA,QACTD;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACD,gBAAAK,EAACC,GAAA,EAAa,WAAU,iBAAA,CAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5C;AAEO,SAASC,EAAuB;AAAA,EACtC,WAAAT;AAAA,EACA,GAAGG;AACJ,GAAkE;AACjE,SACC,gBAAAI;AAAA,IAACG;AAAAA,IAAA;AAAA,MACA,WAAWJ;AAAA,QACV;AAAA,QACAN;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAASQ,EAAoB;AAAA,EACnC,WAAAX;AAAA,EACA,YAAAY,IAAa;AAAA,EACb,GAAGT;AACJ,GAA4E;AAC3E,SACC,gBAAAI,EAACb,GAAA,EACA,UAAA,gBAAAa;AAAA,IAACM;AAAAA,IAAA;AAAA,MACA,OAAM;AAAA,MACN,YAAAD;AAAA,MACA,WAAWN;AAAA,QACV;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,IAAA;AAAA,EAAA,GAEN;AAEF;AAEO,SAASW,EAAiB;AAAA,EAChC,WAAAd;AAAA,EACA,GAAGG;AACJ,GAA4D;AAC3D,SACC,gBAAAI,EAACQ,GAAA,EAA2B,WAAWT,EAAG,eAAe,GAAI,GAAGH,GAAO;AAEzE;AAEO,SAASa,EAAyB;AAAA,EACxC,WAAAhB;AAAA,EACA,UAAAE;AAAA,EACA,SAAAe;AAAA,EACA,GAAGd;AACJ,GAAoE;AACnE,SACC,gBAAAC;AAAA,IAACc;AAAAA,IAAA;AAAA,MACA,WAAWZ,EAAG,0CAA0CN,CAAS;AAAA,MACjE,SAAAiB;AAAA,MACC,GAAGd;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACY,GAAA,EAAoC,WAAU,8BAC9C,UAAA,gBAAAZ,EAACa,GAAA,EAAM,WAAU,YAAA,CAAY,EAAA,CAC9B;AAAA,QACA,gBAAAb,EAAC,QAAA,EAAK,WAAU,qBACd,UAAAL,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;AAEO,SAASmB,EAAsB;AAAA,EACrC,WAAArB;AAAA,EACA,UAAAE;AAAA,EACA,GAAGC;AACJ,GAAiE;AAChE,SACC,gBAAAC;AAAA,IAACkB;AAAAA,IAAA;AAAA,MACA,WAAWhB,EAAG,iBAAiBN,CAAS;AAAA,MACvC,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACY,GAAA,EAAoC,WAAU,8BAC9C,UAAA,gBAAAZ,EAACa,GAAA,EAAM,WAAU,YAAA,CAAY,EAAA,CAC9B;AAAA,QACClB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;AAEO,SAASqB,EAAkB;AAAA,EACjC,WAAAvB;AAAA,EACA,GAAGG;AACJ,GAA6D;AAC5D,SACC,gBAAAI;AAAA,IAACiB;AAAAA,IAAA;AAAA,MACA,WAAWlB,EAAG,wBAAwBN,CAAS;AAAA,MAC9C,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
package/dist/index.es.d.ts CHANGED
@@ -74,7 +74,7 @@ export declare function Avatar({ className, initials, ...props }: AvatarProps):
74
74
  export declare interface AvatarProps extends Omit<React_2.ComponentProps<"div">, "children">, InitialString {
75
75
  }
76
76
 
77
- export declare function Badge({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
77
+ export declare function Badge({ className, children, ...props }: React_2.ComponentProps<"span">): JSX.Element;
78
78
 
79
79
  declare interface BaseFormFieldProps {
80
80
  label: string;
@@ -182,7 +182,7 @@ export declare function DataTable<TData extends object>({ columns, fetchFn, tabl
182
182
  export declare interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, default_2.ComponentProps<'section'> {
183
183
  fetchFn: TableFetchFn<TData>;
184
184
  tableActions: TableActions;
185
- allowSelection: boolean;
185
+ allowSelection?: boolean;
186
186
  columnsToHideByDefault?: VisibilityState_2;
187
187
  }
188
188
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cryptlex/web-components",
3
- "version": "3.7.3",
3
+ "version": "3.8.0",
4
4
  "description": "React component library for Cryptlex web applications",
5
5
  "author": "Cryptlex",
6
6
  "type": "module",