@optimum-intelligence/opti-ui 0.2.0 → 0.4.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/README.md +105 -3
- package/dist/components/accordion/Accordion.d.ts +12 -0
- package/dist/components/accordion/Accordion.js +12 -0
- package/dist/components/accordion/Accordion.js.map +1 -1
- package/dist/components/alert/Alert.d.ts +4 -0
- package/dist/components/alert/Alert.js.map +1 -1
- package/dist/components/app-shell/AppShell.d.ts +22 -0
- package/dist/components/app-shell/AppShell.js +6 -0
- package/dist/components/app-shell/AppShell.js.map +1 -1
- package/dist/components/avatar/Avatar.d.ts +8 -0
- package/dist/components/avatar/Avatar.js +2 -0
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +9 -0
- package/dist/components/badge/Badge.js +6 -0
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts +1 -0
- package/dist/components/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/components/button/Button.d.ts +8 -0
- package/dist/components/button/Button.js +6 -0
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/calendar/Calendar.d.ts +3 -0
- package/dist/components/calendar/Calendar.js.map +1 -1
- package/dist/components/card/Card.d.ts +14 -1
- package/dist/components/card/Card.js +13 -0
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/choice/Choice.d.ts +13 -0
- package/dist/components/choice/Choice.js +10 -0
- package/dist/components/choice/Choice.js.map +1 -1
- package/dist/components/combobox/Combobox.d.ts +12 -0
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/command-palette/CommandPalette.d.ts +10 -0
- package/dist/components/command-palette/CommandPalette.js.map +1 -1
- package/dist/components/data-table/DataTable.d.ts +62 -96
- package/dist/components/data-table/DataTable.js +452 -418
- package/dist/components/data-table/DataTable.js.map +1 -1
- package/dist/components/data-table/DataTableContent.d.ts +36 -0
- package/dist/components/data-table/DataTableContent.js +550 -0
- package/dist/components/data-table/DataTableContent.js.map +1 -0
- package/dist/components/data-table/DataTableFilters.d.ts +18 -0
- package/dist/components/data-table/DataTableFilters.js +284 -0
- package/dist/components/data-table/DataTableFilters.js.map +1 -0
- package/dist/components/data-table/DataTableRow.d.ts +33 -0
- package/dist/components/data-table/DataTableRow.js +552 -0
- package/dist/components/data-table/DataTableRow.js.map +1 -0
- package/dist/components/data-table/context.d.ts +5 -0
- package/dist/components/data-table/context.js +14 -0
- package/dist/components/data-table/context.js.map +1 -0
- package/dist/components/data-table/layout.d.ts +60 -0
- package/dist/components/data-table/layout.js +272 -0
- package/dist/components/data-table/layout.js.map +1 -0
- package/dist/components/data-table/types.d.ts +335 -0
- package/dist/components/data-table/useDataTable.d.ts +9 -0
- package/dist/components/data-table/useDataTable.js +666 -0
- package/dist/components/data-table/useDataTable.js.map +1 -0
- package/dist/components/date-picker/DateRangePicker.d.ts +1 -0
- package/dist/components/date-picker/DateRangePicker.js.map +1 -1
- package/dist/components/date-picker/PickerField.d.ts +13 -0
- package/dist/components/date-picker/PickerField.js.map +1 -1
- package/dist/components/dialog/Dialog.d.ts +5 -0
- package/dist/components/dialog/Dialog.js.map +1 -1
- package/dist/components/drawer/Drawer.d.ts +10 -0
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/empty-state/EmptyState.d.ts +5 -0
- package/dist/components/empty-state/EmptyState.js.map +1 -1
- package/dist/components/file-upload/FileUpload.d.ts +21 -0
- package/dist/components/file-upload/FileUpload.js.map +1 -1
- package/dist/components/input/Input.d.ts +7 -0
- package/dist/components/input/Input.js +3 -0
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/link/Link.d.ts +1 -0
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/menu/Menu.d.ts +6 -0
- package/dist/components/menu/Menu.js.map +1 -1
- package/dist/components/number-field/NumberField.d.ts +7 -0
- package/dist/components/number-field/NumberField.js.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +4 -0
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/popover/Popover.d.ts +4 -0
- package/dist/components/popover/Popover.js.map +1 -1
- package/dist/components/preview-card/PreviewCard.d.ts +4 -0
- package/dist/components/preview-card/PreviewCard.js.map +1 -1
- package/dist/components/progress/Progress.d.ts +8 -0
- package/dist/components/progress/Progress.js.map +1 -1
- package/dist/components/scroll-area/ScrollArea.d.ts +1 -0
- package/dist/components/scroll-area/ScrollArea.js.map +1 -1
- package/dist/components/search-input/SearchInput.d.ts +2 -0
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/select/Select.d.ts +11 -0
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/separator/Separator.d.ts +1 -0
- package/dist/components/separator/Separator.js +1 -0
- package/dist/components/separator/Separator.js.map +1 -1
- package/dist/components/skeleton/Skeleton.d.ts +7 -0
- package/dist/components/skeleton/Skeleton.js +1 -0
- package/dist/components/skeleton/Skeleton.js.map +1 -1
- package/dist/components/slider/Slider.d.ts +1 -0
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/spinner/Spinner.d.ts +2 -0
- package/dist/components/spinner/Spinner.js +1 -0
- package/dist/components/spinner/Spinner.js.map +1 -1
- package/dist/components/stat-card/StatCard.d.ts +5 -1
- package/dist/components/stat-card/StatCard.js.map +1 -1
- package/dist/components/stepper/Stepper.d.ts +4 -0
- package/dist/components/stepper/Stepper.js.map +1 -1
- package/dist/components/table/Table.d.ts +23 -0
- package/dist/components/table/Table.js +17 -0
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/tabs/Tabs.d.ts +1 -0
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tag/Tag.d.ts +3 -0
- package/dist/components/tag/Tag.js.map +1 -1
- package/dist/components/toast/Toast.d.ts +2 -0
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toggle/Toggle.d.ts +7 -0
- package/dist/components/toggle/Toggle.js +1 -0
- package/dist/components/toggle/Toggle.js.map +1 -1
- package/dist/components/tooltip/Tooltip.d.ts +8 -0
- package/dist/components/tooltip/Tooltip.js.map +1 -1
- package/dist/components/typography/Typography.d.ts +5 -0
- package/dist/components/typography/Typography.js +2 -0
- package/dist/components/typography/Typography.js.map +1 -1
- package/dist/components.json +5375 -0
- package/dist/icons/index.d.ts +8 -0
- package/dist/icons/index.js +9 -1
- package/dist/icons/index.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +4 -2
- package/dist/llms-full.txt +2590 -0
- package/dist/llms.txt +175 -0
- package/dist/opti-ui.css +494 -167
- package/dist/theme/ThemeProvider.d.ts +1 -0
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/utils/portal.d.ts +4 -0
- package/dist/utils/portal.js +4 -0
- package/dist/utils/portal.js.map +1 -1
- package/package.json +7 -3
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cx } from "../../utils/cx.js";
|
|
3
|
+
import { ChevronDownIcon, XIcon } from "../../icons/index.js";
|
|
4
|
+
import { Button } from "../button/Button.js";
|
|
5
|
+
import { Toggle } from "../toggle/Toggle.js";
|
|
6
|
+
import { Select } from "../select/Select.js";
|
|
7
|
+
import { formatDate } from "../calendar/date-utils.js";
|
|
8
|
+
import { DateRangePicker } from "../date-picker/DateRangePicker.js";
|
|
9
|
+
import { useDataTableContext } from "./context.js";
|
|
10
|
+
import { c } from "react/compiler-runtime";
|
|
11
|
+
import "react";
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
//#region src/components/data-table/DataTableFilters.tsx
|
|
14
|
+
/** The control of one filter: a dropdown, a toggle chip or a date range picker. */
|
|
15
|
+
function DataTableFilter(t0) {
|
|
16
|
+
const $ = c(41);
|
|
17
|
+
const { id, size: t1, className } = t0;
|
|
18
|
+
const size = t1 === void 0 ? "md" : t1;
|
|
19
|
+
const table = useDataTableContext();
|
|
20
|
+
const t2 = table.filters;
|
|
21
|
+
let T0;
|
|
22
|
+
let T1;
|
|
23
|
+
let t3;
|
|
24
|
+
let t4;
|
|
25
|
+
let t5;
|
|
26
|
+
let t6;
|
|
27
|
+
let t7;
|
|
28
|
+
let t8;
|
|
29
|
+
let t9;
|
|
30
|
+
if ($[0] !== className || $[1] !== id || $[2] !== size || $[3] !== table) {
|
|
31
|
+
t9 = Symbol.for("react.early_return_sentinel");
|
|
32
|
+
bb0: {
|
|
33
|
+
let t10;
|
|
34
|
+
if ($[13] !== id) {
|
|
35
|
+
t10 = (candidate) => candidate.id === id;
|
|
36
|
+
$[13] = id;
|
|
37
|
+
$[14] = t10;
|
|
38
|
+
} else t10 = $[14];
|
|
39
|
+
const filter = t2.find(t10);
|
|
40
|
+
if (!filter) {
|
|
41
|
+
t9 = null;
|
|
42
|
+
break bb0;
|
|
43
|
+
}
|
|
44
|
+
const value = table.filterValues[id];
|
|
45
|
+
let t11;
|
|
46
|
+
if ($[15] !== className) {
|
|
47
|
+
t11 = cx("oui-data-table__filter", className);
|
|
48
|
+
$[15] = className;
|
|
49
|
+
$[16] = t11;
|
|
50
|
+
} else t11 = $[16];
|
|
51
|
+
const classes = t11;
|
|
52
|
+
if (filter.type === "toggle") {
|
|
53
|
+
let t12;
|
|
54
|
+
if ($[17] !== id || $[18] !== table) {
|
|
55
|
+
t12 = (pressed) => table.setFilterValue(id, pressed || void 0);
|
|
56
|
+
$[17] = id;
|
|
57
|
+
$[18] = table;
|
|
58
|
+
$[19] = t12;
|
|
59
|
+
} else t12 = $[19];
|
|
60
|
+
t9 = /* @__PURE__ */ jsx(Toggle, {
|
|
61
|
+
size,
|
|
62
|
+
className: classes,
|
|
63
|
+
pressed: value !== void 0,
|
|
64
|
+
onPressedChange: t12,
|
|
65
|
+
children: filter.label
|
|
66
|
+
});
|
|
67
|
+
break bb0;
|
|
68
|
+
}
|
|
69
|
+
if (filter.type === "dateRange") {
|
|
70
|
+
const range = value ?? null;
|
|
71
|
+
let t12;
|
|
72
|
+
if ($[20] !== id || $[21] !== table) {
|
|
73
|
+
t12 = (next) => table.setFilterValue(id, next ?? void 0);
|
|
74
|
+
$[20] = id;
|
|
75
|
+
$[21] = table;
|
|
76
|
+
$[22] = t12;
|
|
77
|
+
} else t12 = $[22];
|
|
78
|
+
t9 = /* @__PURE__ */ jsx(DateRangePicker, {
|
|
79
|
+
size,
|
|
80
|
+
className: classes,
|
|
81
|
+
placeholder: filter.label,
|
|
82
|
+
value: range,
|
|
83
|
+
onValueChange: t12,
|
|
84
|
+
presets: filter.presets,
|
|
85
|
+
min: filter.min,
|
|
86
|
+
max: filter.max,
|
|
87
|
+
locale: table.locale,
|
|
88
|
+
triggerProps: { "aria-label": range ? `${filter.label}: ${formatDate(range.start)} – ${formatDate(range.end)}` : filter.label }
|
|
89
|
+
});
|
|
90
|
+
break bb0;
|
|
91
|
+
}
|
|
92
|
+
T1 = Select.Root;
|
|
93
|
+
t5 = [{
|
|
94
|
+
value: null,
|
|
95
|
+
label: table.labels.filterAll
|
|
96
|
+
}, ...filter.options];
|
|
97
|
+
t6 = value ?? null;
|
|
98
|
+
if ($[23] !== id || $[24] !== table) {
|
|
99
|
+
t7 = (next_0) => table.setFilterValue(id, next_0 ?? void 0);
|
|
100
|
+
$[23] = id;
|
|
101
|
+
$[24] = table;
|
|
102
|
+
$[25] = t7;
|
|
103
|
+
} else t7 = $[25];
|
|
104
|
+
let t12;
|
|
105
|
+
if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
|
|
106
|
+
t12 = /* @__PURE__ */ jsx(Select.Value, {});
|
|
107
|
+
$[26] = t12;
|
|
108
|
+
} else t12 = $[26];
|
|
109
|
+
let t13;
|
|
110
|
+
if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
|
|
111
|
+
t13 = /* @__PURE__ */ jsx("span", {
|
|
112
|
+
className: "oui-select__icon",
|
|
113
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
114
|
+
});
|
|
115
|
+
$[27] = t13;
|
|
116
|
+
} else t13 = $[27];
|
|
117
|
+
t8 = /* @__PURE__ */ jsxs(Select.Trigger, {
|
|
118
|
+
size,
|
|
119
|
+
className: classes,
|
|
120
|
+
"data-active": value !== void 0 ? "" : void 0,
|
|
121
|
+
children: [
|
|
122
|
+
/* @__PURE__ */ jsx("span", {
|
|
123
|
+
className: "oui-data-table__filter-label",
|
|
124
|
+
children: filter.label
|
|
125
|
+
}),
|
|
126
|
+
t12,
|
|
127
|
+
t13
|
|
128
|
+
]
|
|
129
|
+
});
|
|
130
|
+
T0 = Select.Content;
|
|
131
|
+
if ($[28] !== table.labels.filterAll) {
|
|
132
|
+
t3 = /* @__PURE__ */ jsx(Select.Item, {
|
|
133
|
+
value: null,
|
|
134
|
+
children: table.labels.filterAll
|
|
135
|
+
});
|
|
136
|
+
$[28] = table.labels.filterAll;
|
|
137
|
+
$[29] = t3;
|
|
138
|
+
} else t3 = $[29];
|
|
139
|
+
t4 = filter.options.map(_temp);
|
|
140
|
+
}
|
|
141
|
+
$[0] = className;
|
|
142
|
+
$[1] = id;
|
|
143
|
+
$[2] = size;
|
|
144
|
+
$[3] = table;
|
|
145
|
+
$[4] = T0;
|
|
146
|
+
$[5] = T1;
|
|
147
|
+
$[6] = t3;
|
|
148
|
+
$[7] = t4;
|
|
149
|
+
$[8] = t5;
|
|
150
|
+
$[9] = t6;
|
|
151
|
+
$[10] = t7;
|
|
152
|
+
$[11] = t8;
|
|
153
|
+
$[12] = t9;
|
|
154
|
+
} else {
|
|
155
|
+
T0 = $[4];
|
|
156
|
+
T1 = $[5];
|
|
157
|
+
t3 = $[6];
|
|
158
|
+
t4 = $[7];
|
|
159
|
+
t5 = $[8];
|
|
160
|
+
t6 = $[9];
|
|
161
|
+
t7 = $[10];
|
|
162
|
+
t8 = $[11];
|
|
163
|
+
t9 = $[12];
|
|
164
|
+
}
|
|
165
|
+
if (t9 !== Symbol.for("react.early_return_sentinel")) return t9;
|
|
166
|
+
let t10;
|
|
167
|
+
if ($[30] !== T0 || $[31] !== t3 || $[32] !== t4) {
|
|
168
|
+
t10 = /* @__PURE__ */ jsxs(T0, { children: [t3, t4] });
|
|
169
|
+
$[30] = T0;
|
|
170
|
+
$[31] = t3;
|
|
171
|
+
$[32] = t4;
|
|
172
|
+
$[33] = t10;
|
|
173
|
+
} else t10 = $[33];
|
|
174
|
+
let t11;
|
|
175
|
+
if ($[34] !== T1 || $[35] !== t10 || $[36] !== t5 || $[37] !== t6 || $[38] !== t7 || $[39] !== t8) {
|
|
176
|
+
t11 = /* @__PURE__ */ jsxs(T1, {
|
|
177
|
+
items: t5,
|
|
178
|
+
value: t6,
|
|
179
|
+
onValueChange: t7,
|
|
180
|
+
children: [t8, t10]
|
|
181
|
+
});
|
|
182
|
+
$[34] = T1;
|
|
183
|
+
$[35] = t10;
|
|
184
|
+
$[36] = t5;
|
|
185
|
+
$[37] = t6;
|
|
186
|
+
$[38] = t7;
|
|
187
|
+
$[39] = t8;
|
|
188
|
+
$[40] = t11;
|
|
189
|
+
} else t11 = $[40];
|
|
190
|
+
return t11;
|
|
191
|
+
}
|
|
192
|
+
function _temp(option) {
|
|
193
|
+
return /* @__PURE__ */ jsx(Select.Item, {
|
|
194
|
+
value: option.value,
|
|
195
|
+
children: option.label
|
|
196
|
+
}, option.value);
|
|
197
|
+
}
|
|
198
|
+
/** Every filter of the table, with a clear button while any is active. Children are added after the filters. */
|
|
199
|
+
function DataTableFilters(t0) {
|
|
200
|
+
const $ = c(23);
|
|
201
|
+
let children;
|
|
202
|
+
let className;
|
|
203
|
+
let props;
|
|
204
|
+
let t1;
|
|
205
|
+
if ($[0] !== t0) {
|
|
206
|
+
({size: t1, className, children, ...props} = t0);
|
|
207
|
+
$[0] = t0;
|
|
208
|
+
$[1] = children;
|
|
209
|
+
$[2] = className;
|
|
210
|
+
$[3] = props;
|
|
211
|
+
$[4] = t1;
|
|
212
|
+
} else {
|
|
213
|
+
children = $[1];
|
|
214
|
+
className = $[2];
|
|
215
|
+
props = $[3];
|
|
216
|
+
t1 = $[4];
|
|
217
|
+
}
|
|
218
|
+
const size = t1 === void 0 ? "md" : t1;
|
|
219
|
+
const table = useDataTableContext();
|
|
220
|
+
if (!table.filters.length && !children) return null;
|
|
221
|
+
const t2 = table.labels.filters;
|
|
222
|
+
let t3;
|
|
223
|
+
if ($[5] !== className) {
|
|
224
|
+
t3 = cx("oui-data-table__filters", className);
|
|
225
|
+
$[5] = className;
|
|
226
|
+
$[6] = t3;
|
|
227
|
+
} else t3 = $[6];
|
|
228
|
+
let t4;
|
|
229
|
+
if ($[7] !== size || $[8] !== table.filters) {
|
|
230
|
+
let t5;
|
|
231
|
+
if ($[10] !== size) {
|
|
232
|
+
t5 = (filter) => /* @__PURE__ */ jsx(DataTableFilter, {
|
|
233
|
+
id: filter.id,
|
|
234
|
+
size
|
|
235
|
+
}, filter.id);
|
|
236
|
+
$[10] = size;
|
|
237
|
+
$[11] = t5;
|
|
238
|
+
} else t5 = $[11];
|
|
239
|
+
t4 = table.filters.map(t5);
|
|
240
|
+
$[7] = size;
|
|
241
|
+
$[8] = table.filters;
|
|
242
|
+
$[9] = t4;
|
|
243
|
+
} else t4 = $[9];
|
|
244
|
+
let t5;
|
|
245
|
+
if ($[12] !== table.activeFilterCount || $[13] !== table.clearFilters || $[14] !== table.labels.clearFilters) {
|
|
246
|
+
t5 = table.activeFilterCount > 0 && /* @__PURE__ */ jsxs(Button, {
|
|
247
|
+
size: "sm",
|
|
248
|
+
variant: "ghost",
|
|
249
|
+
shape: "rounded",
|
|
250
|
+
onClick: table.clearFilters,
|
|
251
|
+
children: [/* @__PURE__ */ jsx(XIcon, {}), table.labels.clearFilters]
|
|
252
|
+
});
|
|
253
|
+
$[12] = table.activeFilterCount;
|
|
254
|
+
$[13] = table.clearFilters;
|
|
255
|
+
$[14] = table.labels.clearFilters;
|
|
256
|
+
$[15] = t5;
|
|
257
|
+
} else t5 = $[15];
|
|
258
|
+
let t6;
|
|
259
|
+
if ($[16] !== children || $[17] !== props || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== table.labels.filters) {
|
|
260
|
+
t6 = /* @__PURE__ */ jsxs("div", {
|
|
261
|
+
role: "group",
|
|
262
|
+
"aria-label": t2,
|
|
263
|
+
className: t3,
|
|
264
|
+
...props,
|
|
265
|
+
children: [
|
|
266
|
+
t4,
|
|
267
|
+
children,
|
|
268
|
+
t5
|
|
269
|
+
]
|
|
270
|
+
});
|
|
271
|
+
$[16] = children;
|
|
272
|
+
$[17] = props;
|
|
273
|
+
$[18] = t3;
|
|
274
|
+
$[19] = t4;
|
|
275
|
+
$[20] = t5;
|
|
276
|
+
$[21] = table.labels.filters;
|
|
277
|
+
$[22] = t6;
|
|
278
|
+
} else t6 = $[22];
|
|
279
|
+
return t6;
|
|
280
|
+
}
|
|
281
|
+
//#endregion
|
|
282
|
+
export { DataTableFilter, DataTableFilters };
|
|
283
|
+
|
|
284
|
+
//# sourceMappingURL=DataTableFilters.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTableFilters.js","names":["React","cx","ChevronDownIcon","XIcon","Button","formatDate","DateRange","DateRangePicker","Select","Toggle","useDataTableContext","DataTableControlSize","DataTableFilterProps","id","size","className","DataTableFilter","t0","$","_c","t1","undefined","table","t2","filters","T0","T1","t3","t4","t5","t6","t7","t8","t9","Symbol","for","bb0","t10","candidate","filter","find","value","filterValues","t11","classes","type","t12","pressed","setFilterValue","label","range","next","presets","min","max","locale","start","end","Root","labels","filterAll","options","next_0","t13","Content","map","_temp","option","DataTableFiltersProps","HTMLAttributes","HTMLDivElement","DataTableFilters","children","props","length","activeFilterCount","clearFilters","_c"],"sources":["../../../src/components/data-table/DataTableFilters.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { ChevronDownIcon, XIcon } from '../../icons';\nimport { Button } from '../button/Button';\nimport { formatDate, type DateRange } from '../calendar/date-utils';\nimport { DateRangePicker } from '../date-picker/DateRangePicker';\nimport { Select } from '../select/Select';\nimport { Toggle } from '../toggle/Toggle';\nimport { useDataTableContext } from './context';\n\nexport type DataTableControlSize = 'sm' | 'md';\n\nexport interface DataTableFilterProps {\n /** Id of the filter: the column id, or the `id` given in `filters`. */\n id: string;\n /** Control height. */\n size?: DataTableControlSize;\n /** Class name for the filter control. */\n className?: string;\n}\n\n/** The control of one filter: a dropdown, a toggle chip or a date range picker. */\nexport function DataTableFilter({ id, size = 'md', className }: DataTableFilterProps) {\n const table = useDataTableContext();\n const filter = table.filters.find((candidate) => candidate.id === id);\n if (!filter) return null;\n const value = table.filterValues[id];\n const classes = cx('oui-data-table__filter', className);\n\n if (filter.type === 'toggle') {\n return (\n <Toggle\n size={size}\n className={classes}\n pressed={value !== undefined}\n onPressedChange={(pressed) => table.setFilterValue(id, pressed || undefined)}\n >\n {filter.label}\n </Toggle>\n );\n }\n\n if (filter.type === 'dateRange') {\n const range = (value as DateRange | undefined) ?? null;\n return (\n <DateRangePicker\n size={size}\n className={classes}\n placeholder={filter.label}\n value={range}\n onValueChange={(next) => table.setFilterValue(id, next ?? undefined)}\n presets={filter.presets}\n min={filter.min}\n max={filter.max}\n locale={table.locale}\n triggerProps={{\n 'aria-label': range ? `${filter.label}: ${formatDate(range.start)} – ${formatDate(range.end)}` : filter.label,\n }}\n />\n );\n }\n\n return (\n <Select.Root\n items={[{ value: null, label: table.labels.filterAll }, ...filter.options]}\n value={(value as string | undefined) ?? null}\n onValueChange={(next) => table.setFilterValue(id, next ?? undefined)}\n >\n <Select.Trigger size={size} className={classes} data-active={value !== undefined ? '' : undefined}>\n <span className=\"oui-data-table__filter-label\">{filter.label}</span>\n <Select.Value />\n <span className=\"oui-select__icon\">\n <ChevronDownIcon />\n </span>\n </Select.Trigger>\n <Select.Content>\n <Select.Item value={null}>{table.labels.filterAll}</Select.Item>\n {filter.options.map((option) => (\n <Select.Item key={option.value} value={option.value}>\n {option.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select.Root>\n );\n}\n\nexport interface DataTableFiltersProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Control height of every filter. */\n size?: DataTableControlSize;\n}\n\n/** Every filter of the table, with a clear button while any is active. Children are added after the filters. */\nexport function DataTableFilters({ size = 'md', className, children, ...props }: DataTableFiltersProps) {\n const table = useDataTableContext();\n if (!table.filters.length && !children) return null;\n return (\n <div role=\"group\" aria-label={table.labels.filters} className={cx('oui-data-table__filters', className)} {...props}>\n {table.filters.map((filter) => (\n <DataTableFilter key={filter.id} id={filter.id} size={size} />\n ))}\n {children}\n {table.activeFilterCount > 0 && (\n <Button size=\"sm\" variant=\"ghost\" shape=\"rounded\" onClick={table.clearFilters}>\n <XIcon />\n {table.labels.clearFilters}\n </Button>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { DataTableColumn, DataTableEntry, DataTableInstance } from './types';
|
|
3
|
+
/** Whether the column's editor is the built-in text input, which takes the focus when editing starts. */
|
|
4
|
+
export declare function isTextEditor<T>(column: DataTableColumn<T>): boolean;
|
|
5
|
+
/** What a cell shows outside editing: the column's `cell`, or its value as text. */
|
|
6
|
+
export declare function cellContent<T>(column: DataTableColumn<T>, row: T): React.ReactNode;
|
|
7
|
+
interface RowActionsProps<T> {
|
|
8
|
+
table: DataTableInstance<T>;
|
|
9
|
+
entry: DataTableEntry<T>;
|
|
10
|
+
/** Called with the edit button before editing starts. */
|
|
11
|
+
onEdit?: (button: HTMLElement) => void;
|
|
12
|
+
}
|
|
13
|
+
/** Trailing cell of a row: its own actions, then edit and delete; save and cancel while it is edited. */
|
|
14
|
+
export declare function RowActions<T>({ table, entry: { row, id }, onEdit }: RowActionsProps<T>): React.JSX.Element;
|
|
15
|
+
export interface DataTableRowProps<T> {
|
|
16
|
+
table: DataTableInstance<T>;
|
|
17
|
+
entry: DataTableEntry<T>;
|
|
18
|
+
columns: DataTableColumn<T>[];
|
|
19
|
+
hasActions: boolean;
|
|
20
|
+
/** Id of the column whose editor takes the focus when editing starts. */
|
|
21
|
+
focused?: string;
|
|
22
|
+
/** Virtualized tables: position among all rows, and the height every row shares. */
|
|
23
|
+
index?: number;
|
|
24
|
+
height?: number;
|
|
25
|
+
}
|
|
26
|
+
declare function Row<T>({ table, entry, columns, hasActions, focused, index, height }: DataTableRowProps<T>): React.JSX.Element;
|
|
27
|
+
export declare const DataTableRow: typeof Row;
|
|
28
|
+
/**
|
|
29
|
+
* A row that only gives its columns their width: what the cells would show, at
|
|
30
|
+
* no height. Rendered while the column widths are measured, never painted.
|
|
31
|
+
*/
|
|
32
|
+
export declare function SizerRow<T>({ table, entry, columns, hasActions }: DataTableRowProps<T>): React.JSX.Element;
|
|
33
|
+
export {};
|