@acronis-platform/ui-react 1.0.0 → 2.0.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.
- package/dist/components/ui/alert/alert.js +55 -55
- package/dist/components/ui/alert/alert.js.map +1 -1
- package/dist/components/ui/checkbox/checkbox.js +1 -1
- package/dist/components/ui/checkbox/checkbox.js.map +1 -1
- package/dist/components/ui/data-table/data-table-bulk-actions-bar.js +38 -0
- package/dist/components/ui/data-table/data-table-bulk-actions-bar.js.map +1 -0
- package/dist/components/ui/data-table/data-table-column-header.js +23 -20
- package/dist/components/ui/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/ui/data-table/data-table-expand-trigger.js +23 -15
- package/dist/components/ui/data-table/data-table-expand-trigger.js.map +1 -1
- package/dist/components/ui/data-table/data-table-pagination.js +29 -28
- package/dist/components/ui/data-table/data-table-pagination.js.map +1 -1
- package/dist/components/ui/data-table/data-table-selection.js +7 -0
- package/dist/components/ui/data-table/data-table-selection.js.map +1 -0
- package/dist/components/ui/data-table/data-table-toolbar.js +21 -23
- package/dist/components/ui/data-table/data-table-toolbar.js.map +1 -1
- package/dist/components/ui/data-table/data-table-view-options.js +12 -10
- package/dist/components/ui/data-table/data-table-view-options.js.map +1 -1
- package/dist/components/ui/data-table/data-table.js +347 -183
- package/dist/components/ui/data-table/data-table.js.map +1 -1
- package/dist/components/ui/stepper/stepper.js +70 -0
- package/dist/components/ui/stepper/stepper.js.map +1 -0
- package/dist/components/ui/stepper-item/stepper-item.js +97 -0
- package/dist/components/ui/stepper-item/stepper-item.js.map +1 -0
- package/dist/components/ui/table/table-pagination.js +54 -47
- package/dist/components/ui/table/table-pagination.js.map +1 -1
- package/dist/components/ui/table/table-view-options.js +32 -19
- package/dist/components/ui/table/table-view-options.js.map +1 -1
- package/dist/components/ui/table/table.js +112 -63
- package/dist/components/ui/table/table.js.map +1 -1
- package/dist/components/ui/timeline/timeline.js +10 -10
- package/dist/components/ui/timeline/timeline.js.map +1 -1
- package/dist/components/ui/toast/toast.js +15 -15
- package/dist/components/ui/toast/toast.js.map +1 -1
- package/dist/index.js +386 -373
- package/dist/index.js.map +1 -1
- package/dist/react.js +386 -373
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/data-table/data-table-bulk-actions-bar.d.ts +26 -0
- package/dist/src/components/ui/data-table/data-table-column-header.d.ts +6 -1
- package/dist/src/components/ui/data-table/data-table-expand-trigger.d.ts +4 -0
- package/dist/src/components/ui/data-table/data-table-pagination.d.ts +15 -1
- package/dist/src/components/ui/data-table/data-table-selection.d.ts +11 -0
- package/dist/src/components/ui/data-table/data-table-view-options.d.ts +3 -2
- package/dist/src/components/ui/data-table/data-table.d.ts +88 -3
- package/dist/src/components/ui/data-table/data-table.docs.d.ts +61 -1
- package/dist/src/components/ui/data-table/index.d.ts +3 -1
- package/dist/src/components/ui/stepper/index.d.ts +1 -0
- package/dist/src/components/ui/stepper/stepper.d.ts +40 -0
- package/dist/src/components/ui/stepper-item/index.d.ts +1 -0
- package/dist/src/components/ui/stepper-item/stepper-item.d.ts +41 -0
- package/dist/src/components/ui/table/index.d.ts +1 -1
- package/dist/src/components/ui/table/table-pagination.d.ts +21 -0
- package/dist/src/components/ui/table/table-view-options.d.ts +9 -2
- package/dist/src/components/ui/table/table.d.ts +40 -1
- package/dist/src/index.d.ts +2 -0
- package/dist/ui-react.css +1 -1
- package/package.json +3 -3
|
@@ -1,82 +1,83 @@
|
|
|
1
1
|
import { jsxs as a, jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronFirstIcon as
|
|
3
|
-
import { InputSelect as
|
|
2
|
+
import { ChevronFirstIcon as h, ChevronLeftIcon as u, ChevronRightIcon as x, ChevronLastIcon as f } from "@acronis-platform/icons-react/stroke-mono";
|
|
3
|
+
import { InputSelect as v, InputSelectTrigger as C, InputSelectValue as I, InputSelectContent as N, InputSelectItem as P } from "../input-select/input-select.js";
|
|
4
4
|
import { ButtonIcon as i } from "../button-icon/button-icon.js";
|
|
5
|
-
function
|
|
5
|
+
function j({
|
|
6
6
|
table: e,
|
|
7
|
-
pageSizeOptions:
|
|
7
|
+
pageSizeOptions: o = [10, 20, 30, 40, 50],
|
|
8
|
+
rowsPerPageLabel: l = "Rows per page",
|
|
9
|
+
firstPageLabel: s = "Go to first page",
|
|
10
|
+
previousPageLabel: c = "Go to previous page",
|
|
11
|
+
nextPageLabel: d = "Go to next page",
|
|
12
|
+
lastPageLabel: g = "Go to last page",
|
|
13
|
+
pageLabel: m = (t, r) => `Page ${t} of ${r}`,
|
|
14
|
+
summaryLabel: p = (t, r) => `${t} of ${r} row(s) selected.`
|
|
8
15
|
}) {
|
|
9
16
|
return /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2", children: [
|
|
10
|
-
/* @__PURE__ */
|
|
17
|
+
/* @__PURE__ */ n("div", { className: "flex-1 text-sm text-muted-foreground", children: p(
|
|
11
18
|
e.getFilteredSelectedRowModel().rows.length,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
e.getFilteredRowModel().rows.length,
|
|
15
|
-
" row(s) selected."
|
|
16
|
-
] }),
|
|
19
|
+
e.getFilteredRowModel().rows.length
|
|
20
|
+
) }),
|
|
17
21
|
/* @__PURE__ */ a("div", { className: "flex items-center gap-6 lg:gap-8", children: [
|
|
18
22
|
/* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
|
|
19
|
-
/* @__PURE__ */ n("p", { className: "text-sm font-medium", children:
|
|
23
|
+
/* @__PURE__ */ n("p", { className: "text-sm font-medium", children: l }),
|
|
20
24
|
/* @__PURE__ */ a(
|
|
21
|
-
|
|
25
|
+
v,
|
|
22
26
|
{
|
|
23
27
|
value: `${e.getState().pagination.pageSize}`,
|
|
24
28
|
onValueChange: (t) => e.setPageSize(Number(t)),
|
|
25
29
|
children: [
|
|
26
|
-
/* @__PURE__ */ n(
|
|
27
|
-
/* @__PURE__ */ n(
|
|
30
|
+
/* @__PURE__ */ n(C, { "aria-label": l, className: "h-8 w-[70px]", children: /* @__PURE__ */ n(I, {}) }),
|
|
31
|
+
/* @__PURE__ */ n(N, { children: o.map((t) => /* @__PURE__ */ n(P, { value: `${t}`, children: t }, t)) })
|
|
28
32
|
]
|
|
29
33
|
}
|
|
30
34
|
)
|
|
31
35
|
] }),
|
|
32
|
-
/* @__PURE__ */
|
|
33
|
-
"Page ",
|
|
36
|
+
/* @__PURE__ */ n("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: m(
|
|
34
37
|
e.getState().pagination.pageIndex + 1,
|
|
35
|
-
" of",
|
|
36
|
-
" ",
|
|
37
38
|
e.getPageCount()
|
|
38
|
-
|
|
39
|
+
) }),
|
|
39
40
|
/* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
|
|
40
41
|
/* @__PURE__ */ n(
|
|
41
42
|
i,
|
|
42
43
|
{
|
|
43
44
|
variant: "secondary",
|
|
44
|
-
"aria-label":
|
|
45
|
+
"aria-label": s,
|
|
45
46
|
className: "hidden lg:inline-flex",
|
|
46
47
|
onClick: () => e.setPageIndex(0),
|
|
47
48
|
disabled: !e.getCanPreviousPage(),
|
|
48
|
-
children: /* @__PURE__ */ n(
|
|
49
|
+
children: /* @__PURE__ */ n(h, {})
|
|
49
50
|
}
|
|
50
51
|
),
|
|
51
52
|
/* @__PURE__ */ n(
|
|
52
53
|
i,
|
|
53
54
|
{
|
|
54
55
|
variant: "secondary",
|
|
55
|
-
"aria-label":
|
|
56
|
+
"aria-label": c,
|
|
56
57
|
onClick: () => e.previousPage(),
|
|
57
58
|
disabled: !e.getCanPreviousPage(),
|
|
58
|
-
children: /* @__PURE__ */ n(
|
|
59
|
+
children: /* @__PURE__ */ n(u, {})
|
|
59
60
|
}
|
|
60
61
|
),
|
|
61
62
|
/* @__PURE__ */ n(
|
|
62
63
|
i,
|
|
63
64
|
{
|
|
64
65
|
variant: "secondary",
|
|
65
|
-
"aria-label":
|
|
66
|
+
"aria-label": d,
|
|
66
67
|
onClick: () => e.nextPage(),
|
|
67
68
|
disabled: !e.getCanNextPage(),
|
|
68
|
-
children: /* @__PURE__ */ n(
|
|
69
|
+
children: /* @__PURE__ */ n(x, {})
|
|
69
70
|
}
|
|
70
71
|
),
|
|
71
72
|
/* @__PURE__ */ n(
|
|
72
73
|
i,
|
|
73
74
|
{
|
|
74
75
|
variant: "secondary",
|
|
75
|
-
"aria-label":
|
|
76
|
+
"aria-label": g,
|
|
76
77
|
className: "hidden lg:inline-flex",
|
|
77
78
|
onClick: () => e.setPageIndex(e.getPageCount() - 1),
|
|
78
79
|
disabled: !e.getCanNextPage(),
|
|
79
|
-
children: /* @__PURE__ */ n(
|
|
80
|
+
children: /* @__PURE__ */ n(f, {})
|
|
80
81
|
}
|
|
81
82
|
)
|
|
82
83
|
] })
|
|
@@ -84,6 +85,6 @@ function C({
|
|
|
84
85
|
] });
|
|
85
86
|
}
|
|
86
87
|
export {
|
|
87
|
-
|
|
88
|
+
j as DataTablePagination
|
|
88
89
|
};
|
|
89
90
|
//# sourceMappingURL=data-table-pagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n ChevronFirstIcon,\n ChevronLastIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n table: Table<TData>;\n /** Page-size options offered in the rows-per-page select. */\n pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination<TData>({\n table,\n pageSizeOptions = [10, 20, 30, 40, 50],\n}: DataTablePaginationProps<TData>) {\n return (\n <div className=\"flex items-center justify-between px-2\">\n <div className=\"flex-1 text-sm text-muted-foreground\">\n {table.getFilteredSelectedRowModel().rows.length
|
|
1
|
+
{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n ChevronFirstIcon,\n ChevronLastIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n table: Table<TData>;\n /** Page-size options offered in the rows-per-page select. */\n pageSizeOptions?: number[];\n /** Label of the rows-per-page select (also its accessible name). */\n rowsPerPageLabel?: string;\n /** Accessible name of the first-page control. */\n firstPageLabel?: string;\n /** Accessible name of the previous-page control. */\n previousPageLabel?: string;\n /** Accessible name of the next-page control. */\n nextPageLabel?: string;\n /** Accessible name of the last-page control. */\n lastPageLabel?: string;\n /** Builds the page indicator from the 1-based page number and page count. */\n pageLabel?: (page: number, pageCount: number) => string;\n /** Builds the leading selection summary from the selected and total counts. */\n summaryLabel?: (selectedRows: number, totalRows: number) => string;\n}\n\nexport function DataTablePagination<TData>({\n table,\n pageSizeOptions = [10, 20, 30, 40, 50],\n rowsPerPageLabel = 'Rows per page',\n firstPageLabel = 'Go to first page',\n previousPageLabel = 'Go to previous page',\n nextPageLabel = 'Go to next page',\n lastPageLabel = 'Go to last page',\n pageLabel = (page, count) => `Page ${page} of ${count}`,\n summaryLabel = (selected, total) => `${selected} of ${total} row(s) selected.`,\n}: DataTablePaginationProps<TData>) {\n return (\n <div className=\"flex items-center justify-between px-2\">\n <div className=\"flex-1 text-sm text-muted-foreground\">\n {summaryLabel(\n table.getFilteredSelectedRowModel().rows.length,\n table.getFilteredRowModel().rows.length\n )}\n </div>\n <div className=\"flex items-center gap-6 lg:gap-8\">\n <div className=\"flex items-center gap-2\">\n <p className=\"text-sm font-medium\">{rowsPerPageLabel}</p>\n <Select\n value={`${table.getState().pagination.pageSize}`}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger aria-label={rowsPerPageLabel} className=\"h-8 w-[70px]\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {pageSizeOptions.map((pageSize) => (\n <SelectItem key={pageSize} value={`${pageSize}`}>\n {pageSize}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n {pageLabel(\n table.getState().pagination.pageIndex + 1,\n table.getPageCount()\n )}\n </div>\n <div className=\"flex items-center gap-2\">\n <ButtonIcon\n variant=\"secondary\"\n aria-label={firstPageLabel}\n className=\"hidden lg:inline-flex\"\n onClick={() => table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronFirstIcon />\n </ButtonIcon>\n <ButtonIcon\n variant=\"secondary\"\n aria-label={previousPageLabel}\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n <ChevronLeftIcon />\n </ButtonIcon>\n <ButtonIcon\n variant=\"secondary\"\n aria-label={nextPageLabel}\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n <ChevronRightIcon />\n </ButtonIcon>\n <ButtonIcon\n variant=\"secondary\"\n aria-label={lastPageLabel}\n className=\"hidden lg:inline-flex\"\n onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n <ChevronLastIcon />\n </ButtonIcon>\n </div>\n </div>\n </div>\n );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","rowsPerPageLabel","firstPageLabel","previousPageLabel","nextPageLabel","lastPageLabel","pageLabel","page","count","summaryLabel","selected","total","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table-selection.js","sources":["../../../../src/components/ui/data-table/data-table-selection.ts"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\n/**\n * Whether any row is currently selected — the single threshold that decides\n * between per-row actions and bulk actions, per the design (Figma 5916-10470\n * / 5916-10745 / 5916-11716 / 5916-11286 / 5916-11991): a single selected row\n * already switches to the bulk scope (its own row actions hide, and\n * `DataTableBulkActionsBar` enables), same as two or more. `TableActionsCell`\n * takes this as its `bulkSelectionActive` prop, so the threshold doesn't have\n * to be re-derived per consumer.\n */\nexport function isBulkSelectionActive<TData>(table: Table<TData>): boolean {\n return table.getSelectedRowModel().rows.length > 0;\n}\n"],"names":["isBulkSelectionActive","table"],"mappings":"AAWO,SAASA,EAA6BC,GAA8B;AACzE,SAAOA,EAAM,oBAAA,EAAsB,KAAK,SAAS;AACnD;"}
|
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import { jsxs as s, jsx as
|
|
1
|
+
import { jsxs as s, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { TimesIcon as C } from "@acronis-platform/icons-react/stroke-mono";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
function O(t, l) {
|
|
3
|
+
import { FilterSearch as v, FilterSearchFilters as x, FilterSearchAppliedFilters as S } from "../filter-search/filter-search.js";
|
|
4
|
+
import { InputSearch as T } from "../input-search/input-search.js";
|
|
5
|
+
import { Button as j } from "../button/button.js";
|
|
6
|
+
function V(t, l) {
|
|
8
7
|
return Object.fromEntries(
|
|
9
8
|
t.filter((e) => e.id !== l).map((e) => [e.id, e.value])
|
|
10
9
|
);
|
|
11
10
|
}
|
|
12
|
-
function
|
|
11
|
+
function N(t) {
|
|
13
12
|
return Object.entries(t).map(([l, e]) => ({ id: l, value: e }));
|
|
14
13
|
}
|
|
15
14
|
function k({
|
|
@@ -22,28 +21,28 @@ function k({
|
|
|
22
21
|
getFilterChipLabel: d
|
|
23
22
|
}) {
|
|
24
23
|
var f;
|
|
25
|
-
const o = t.getState().columnFilters, n = !!m, g = o.length > 0, u =
|
|
26
|
-
const
|
|
27
|
-
t.setColumnFilters([...
|
|
24
|
+
const o = t.getState().columnFilters, n = !!m, g = o.length > 0, u = V(o, e), F = (a) => {
|
|
25
|
+
const r = e ? o.filter((h) => h.id === e) : [];
|
|
26
|
+
t.setColumnFilters([...r, ...N(a)]);
|
|
28
27
|
};
|
|
29
28
|
return /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: [
|
|
30
|
-
/* @__PURE__ */ s(
|
|
29
|
+
/* @__PURE__ */ s(v, { children: [
|
|
31
30
|
l,
|
|
32
|
-
e && /* @__PURE__ */
|
|
33
|
-
|
|
31
|
+
e && /* @__PURE__ */ i(
|
|
32
|
+
T,
|
|
34
33
|
{
|
|
35
34
|
placeholder: c,
|
|
36
35
|
"aria-label": c,
|
|
37
36
|
value: ((f = t.getColumn(e)) == null ? void 0 : f.getFilterValue()) ?? "",
|
|
38
37
|
onChange: (a) => {
|
|
39
|
-
var
|
|
40
|
-
return (
|
|
38
|
+
var r;
|
|
39
|
+
return (r = t.getColumn(e)) == null ? void 0 : r.setFilterValue(a.target.value);
|
|
41
40
|
},
|
|
42
41
|
className: "w-56"
|
|
43
42
|
}
|
|
44
43
|
),
|
|
45
|
-
n && /* @__PURE__ */
|
|
46
|
-
|
|
44
|
+
n && /* @__PURE__ */ i(
|
|
45
|
+
x,
|
|
47
46
|
{
|
|
48
47
|
value: u,
|
|
49
48
|
onValueChange: F,
|
|
@@ -52,21 +51,20 @@ function k({
|
|
|
52
51
|
}
|
|
53
52
|
),
|
|
54
53
|
!n && g && /* @__PURE__ */ s(
|
|
55
|
-
|
|
54
|
+
j,
|
|
56
55
|
{
|
|
57
56
|
variant: "ghost",
|
|
58
57
|
onClick: () => t.resetColumnFilters(),
|
|
59
58
|
className: "h-8 gap-2",
|
|
60
59
|
children: [
|
|
61
60
|
"Reset",
|
|
62
|
-
/* @__PURE__ */
|
|
61
|
+
/* @__PURE__ */ i(C, {})
|
|
63
62
|
]
|
|
64
63
|
}
|
|
65
|
-
)
|
|
66
|
-
/* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(v, { table: t }) })
|
|
64
|
+
)
|
|
67
65
|
] }),
|
|
68
|
-
n && /* @__PURE__ */
|
|
69
|
-
|
|
66
|
+
n && /* @__PURE__ */ i(
|
|
67
|
+
S,
|
|
70
68
|
{
|
|
71
69
|
filters: u,
|
|
72
70
|
onValueChange: F,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n FilterSearch,\n
|
|
1
|
+
{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n FilterSearch,\n FilterSearchAppliedFilters,\n FilterSearchFilters,\n} from '../filter-search';\nimport { InputSearch } from '../input-search';\n\n// Convert between TanStack's `ColumnFiltersState` (an array of `{ id, value }`,\n// keyed by column id) and `FilterSearchFilters`'s `Record<string, unknown>`\n// (keyed by the same column id). The plain text search filter (`searchKey`) is a\n// separate concern and is excluded from the per-column filter record.\nfunction filtersToRecord(\n columnFilters: ColumnFiltersState,\n excludeKey?: string\n): Record<string, unknown> {\n return Object.fromEntries(\n columnFilters\n .filter((filter) => filter.id !== excludeKey)\n .map((filter) => [filter.id, filter.value])\n );\n}\n\nfunction recordToFilters(\n record: Record<string, unknown>\n): ColumnFiltersState {\n return Object.entries(record).map(([id, value]) => ({ id, value }));\n}\n\ninterface DataTableToolbarProps<TData> {\n table: Table<TData>;\n /**\n * Rendered as the leading element of the toolbar row, before the search\n * box — e.g. a tenant/scope `Select` (matches the Figma \"FilterSearch\"\n * anatomy, which places a scope switcher ahead of search).\n */\n leading?: ReactNode;\n /** Column id to wire the search box to (client-side text filter). */\n searchKey?: string;\n searchPlaceholder?: string;\n /**\n * Filter field children rendered inside the `FilterSearchFilters` popover.\n * Wire each field to a column via `useFilterSearchFilters()` keyed by column\n * id. When provided, the toolbar renders the filter popover + an applied-filter\n * chip row below it.\n */\n children?: ReactNode;\n /** Label for the filters trigger button. */\n filtersLabel?: ReactNode;\n /** Format an applied-filter chip's label (defaults to `\"<id>: <value>\"`). */\n getFilterChipLabel?: (key: string, value: unknown) => ReactNode;\n}\n\nexport function DataTableToolbar<TData>({\n table,\n leading,\n searchKey,\n searchPlaceholder = 'Filter…',\n children,\n filtersLabel = 'Filters',\n getFilterChipLabel,\n}: DataTableToolbarProps<TData>) {\n const columnFilters = table.getState().columnFilters;\n const hasFilterFields = Boolean(children);\n const isFiltered = columnFilters.length > 0;\n\n const filterRecord = filtersToRecord(columnFilters, searchKey);\n\n // Commit the per-column filter record back to TanStack, preserving the\n // separate text-search filter (`searchKey`) untouched.\n const handleFiltersChange = (next: Record<string, unknown>) => {\n const searchFilter = searchKey\n ? columnFilters.filter((filter) => filter.id === searchKey)\n : [];\n table.setColumnFilters([...searchFilter, ...recordToFilters(next)]);\n };\n\n return (\n <div className=\"flex flex-col gap-3\">\n <FilterSearch>\n {leading}\n {searchKey && (\n <InputSearch\n placeholder={searchPlaceholder}\n aria-label={searchPlaceholder}\n value={\n (table.getColumn(searchKey)?.getFilterValue() as string) ?? ''\n }\n onChange={(event) =>\n table.getColumn(searchKey)?.setFilterValue(event.target.value)\n }\n className=\"w-56\"\n />\n )}\n {hasFilterFields && (\n <FilterSearchFilters\n value={filterRecord}\n onValueChange={handleFiltersChange}\n label={filtersLabel}\n >\n {children}\n </FilterSearchFilters>\n )}\n {!hasFilterFields && isFiltered && (\n <Button\n variant=\"ghost\"\n onClick={() => table.resetColumnFilters()}\n className=\"h-8 gap-2\"\n >\n Reset\n <TimesIcon />\n </Button>\n )}\n </FilterSearch>\n {hasFilterFields && (\n <FilterSearchAppliedFilters\n filters={filterRecord}\n onValueChange={handleFiltersChange}\n getFilterChipLabel={getFilterChipLabel}\n />\n )}\n </div>\n );\n}\n"],"names":["filtersToRecord","columnFilters","excludeKey","filter","recordToFilters","record","id","value","DataTableToolbar","table","leading","searchKey","searchPlaceholder","children","filtersLabel","getFilterChipLabel","hasFilterFields","isFiltered","filterRecord","handleFiltersChange","next","searchFilter","jsxs","FilterSearch","jsx","InputSearch","_a","event","FilterSearchFilters","Button","TimesIcon","FilterSearchAppliedFilters"],"mappings":";;;;;AAgBA,SAASA,EACPC,GACAC,GACyB;AACzB,SAAO,OAAO;AAAA,IACZD,EACG,OAAO,CAACE,MAAWA,EAAO,OAAOD,CAAU,EAC3C,IAAI,CAACC,MAAW,CAACA,EAAO,IAAIA,EAAO,KAAK,CAAC;AAAA,EAAA;AAEhD;AAEA,SAASC,EACPC,GACoB;AACpB,SAAO,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,GAAIC,CAAK,OAAO,EAAE,IAAAD,GAAI,OAAAC,IAAQ;AACpE;AA0BO,SAASC,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AACF,GAAiC;;AAC/B,QAAMd,IAAgBQ,EAAM,SAAA,EAAW,eACjCO,IAAkB,EAAQH,GAC1BI,IAAahB,EAAc,SAAS,GAEpCiB,IAAelB,EAAgBC,GAAeU,CAAS,GAIvDQ,IAAsB,CAACC,MAAkC;AAC7D,UAAMC,IAAeV,IACjBV,EAAc,OAAO,CAACE,MAAWA,EAAO,OAAOQ,CAAS,IACxD,CAAA;AACJ,IAAAF,EAAM,iBAAiB,CAAC,GAAGY,GAAc,GAAGjB,EAAgBgB,CAAI,CAAC,CAAC;AAAA,EACpE;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAA,EAACC,GAAA,EACE,UAAA;AAAA,MAAAb;AAAA,MACAC,KACC,gBAAAa;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAab;AAAA,UACb,cAAYA;AAAA,UACZ,SACGc,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,qBAA+B;AAAA,UAE9D,UAAU,CAACC,MAAA;;AACT,oBAAAD,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,eAAeC,EAAM,OAAO;AAAA;AAAA,UAE1D,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGbX,KACC,gBAAAQ;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOV;AAAA,UACP,eAAeC;AAAA,UACf,OAAOL;AAAA,UAEN,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,CAACG,KAAmBC,KACnB,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAMpB,EAAM,mBAAA;AAAA,UACrB,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,8BAEEqB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACb,GAEJ;AAAA,IACCd,KACC,gBAAAQ;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,SAASb;AAAA,QACT,eAAeC;AAAA,QACf,oBAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}
|
|
@@ -1,27 +1,29 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { TableViewOptions as
|
|
3
|
-
function
|
|
4
|
-
table: t
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { TableViewOptions as l } from "../table/table-view-options.js";
|
|
3
|
+
function d({
|
|
4
|
+
table: t,
|
|
5
|
+
...o
|
|
5
6
|
}) {
|
|
6
|
-
const
|
|
7
|
+
const s = t.getAllColumns().filter(
|
|
7
8
|
(e) => typeof e.accessorFn < "u" && e.getCanHide()
|
|
8
9
|
).map((e) => ({
|
|
9
10
|
id: e.id,
|
|
10
11
|
label: e.id,
|
|
11
12
|
hidden: !e.getIsVisible()
|
|
12
13
|
}));
|
|
13
|
-
return /* @__PURE__ */
|
|
14
|
-
|
|
14
|
+
return /* @__PURE__ */ n(
|
|
15
|
+
l,
|
|
15
16
|
{
|
|
16
|
-
columns:
|
|
17
|
+
columns: s,
|
|
17
18
|
onToggle: (e) => {
|
|
18
19
|
const i = t.getColumn(e);
|
|
19
20
|
i == null || i.toggleVisibility(!i.getIsVisible());
|
|
20
|
-
}
|
|
21
|
+
},
|
|
22
|
+
...o
|
|
21
23
|
}
|
|
22
24
|
);
|
|
23
25
|
}
|
|
24
26
|
export {
|
|
25
|
-
|
|
27
|
+
d as DataTableViewOptions
|
|
26
28
|
};
|
|
27
29
|
//# sourceMappingURL=data-table-view-options.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\nimport { TableViewOptions } from '../table';\n\ninterface DataTableViewOptionsProps<TData> {\n table: Table<TData>;\n}\n\n// Thin TanStack adapter over the primitive-only `TableViewOptions`: maps\n// `table.getAllColumns()` onto the plain `{ id, label, hidden }[]` shape and\n// routes `onToggle` back through `column.toggleVisibility()`.\nexport function DataTableViewOptions<TData>({\n table,\n}: DataTableViewOptionsProps<TData>) {\n const columns = table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== 'undefined' && column.getCanHide()\n )\n .map((column) => ({\n id: column.id,\n label: column.id,\n hidden: !column.getIsVisible(),\n }));\n\n return (\n <TableViewOptions\n columns={columns}\n onToggle={(id) => {\n const column = table.getColumn(id);\n column?.toggleVisibility(!column.getIsVisible());\n }}\n />\n );\n}\n"],"names":["DataTableViewOptions","table","columns","column","jsx","TableViewOptions","id"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\nimport { TableViewOptions, type TableViewOptionsProps } from '../table';\n\ninterface DataTableViewOptionsProps<TData>\n extends Pick<\n TableViewOptionsProps,\n 'triggerLabel' | 'iconOnly' | 'triggerAriaLabel'\n > {\n table: Table<TData>;\n}\n\n// Thin TanStack adapter over the primitive-only `TableViewOptions`: maps\n// `table.getAllColumns()` onto the plain `{ id, label, hidden }[]` shape and\n// routes `onToggle` back through `column.toggleVisibility()`.\nexport function DataTableViewOptions<TData>({\n table,\n ...triggerProps\n}: DataTableViewOptionsProps<TData>) {\n const columns = table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== 'undefined' && column.getCanHide()\n )\n .map((column) => ({\n id: column.id,\n label: column.id,\n hidden: !column.getIsVisible(),\n }));\n\n return (\n <TableViewOptions\n columns={columns}\n onToggle={(id) => {\n const column = table.getColumn(id);\n column?.toggleVisibility(!column.getIsVisible());\n }}\n {...triggerProps}\n />\n );\n}\n"],"names":["DataTableViewOptions","table","triggerProps","columns","column","jsx","TableViewOptions","id"],"mappings":";;AAeO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,GAAGC;AACL,GAAqC;AACnC,QAAMC,IAAUF,EACb,cAAA,EACA;AAAA,IACC,CAACG,MACC,OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA;AAAA,EAAW,EAEjE,IAAI,CAACA,OAAY;AAAA,IAChB,IAAIA,EAAO;AAAA,IACX,OAAOA,EAAO;AAAA,IACd,QAAQ,CAACA,EAAO,aAAA;AAAA,EAAa,EAC7B;AAEJ,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,UAAU,CAACI,MAAO;AAChB,cAAMH,IAASH,EAAM,UAAUM,CAAE;AACjC,QAAAH,KAAA,QAAAA,EAAQ,iBAAiB,CAACA,EAAO,aAAA;AAAA,MACnC;AAAA,MACC,GAAGF;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|