schummar-table 0.44.0 → 0.44.1
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/index.cjs +238 -159
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +208 -130
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1021,6 +1021,83 @@ function useFilter(impl) {
|
|
|
1021
1021
|
}, context);
|
|
1022
1022
|
}
|
|
1023
1023
|
|
|
1024
|
+
// src/components/combinedFilter.tsx
|
|
1025
|
+
import { jsx as jsx11 } from "@emotion/react/jsx-runtime";
|
|
1026
|
+
function CombinedFilter(_a) {
|
|
1027
|
+
var _b = _a, {
|
|
1028
|
+
columnIds: inputColumnIds
|
|
1029
|
+
} = _b, props = __objRest(_b, [
|
|
1030
|
+
"columnIds"
|
|
1031
|
+
]);
|
|
1032
|
+
const table = useTableContext();
|
|
1033
|
+
const columnIds = table.useState((state) => {
|
|
1034
|
+
return inputColumnIds != null ? inputColumnIds : state.activeColumns.filter(
|
|
1035
|
+
(column) => column.filter !== void 0 && !state.visibleColumns.some((c) => c.id === column.id)
|
|
1036
|
+
).map((column) => column.id);
|
|
1037
|
+
});
|
|
1038
|
+
const isActive = table.useState((state) => {
|
|
1039
|
+
return columnIds.some((columnId) => {
|
|
1040
|
+
const filter = state.filters.get(columnId);
|
|
1041
|
+
const filterValue = state.filterValues.get(columnId);
|
|
1042
|
+
return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
|
|
1043
|
+
});
|
|
1044
|
+
});
|
|
1045
|
+
useFilter(__spreadProps(__spreadValues({}, props), {
|
|
1046
|
+
id: "combinedFilter",
|
|
1047
|
+
value: isActive,
|
|
1048
|
+
isActive(filterValue) {
|
|
1049
|
+
return filterValue;
|
|
1050
|
+
},
|
|
1051
|
+
test() {
|
|
1052
|
+
return true;
|
|
1053
|
+
},
|
|
1054
|
+
onChange(value) {
|
|
1055
|
+
var _a2;
|
|
1056
|
+
if (value === void 0) {
|
|
1057
|
+
for (const columnId of columnIds) {
|
|
1058
|
+
const impl = table.getState().filters.get(columnId);
|
|
1059
|
+
(_a2 = impl == null ? void 0 : impl.onChange) == null ? void 0 : _a2.call(impl, void 0);
|
|
1060
|
+
if ((impl == null ? void 0 : impl.value) === void 0) {
|
|
1061
|
+
table.update((state) => {
|
|
1062
|
+
state.filterValues.delete(columnId);
|
|
1063
|
+
});
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
}
|
|
1067
|
+
}
|
|
1068
|
+
}));
|
|
1069
|
+
return /* @__PURE__ */ jsx11("div", { children: columnIds.map((columnId) => /* @__PURE__ */ jsx11(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ jsx11(FilterControl, { component: Filter }) }, columnId)) });
|
|
1070
|
+
}
|
|
1071
|
+
function Filter(_a) {
|
|
1072
|
+
var _b = _a, { isActive } = _b, props = __objRest(_b, ["isActive"]);
|
|
1073
|
+
const table = useTableContext();
|
|
1074
|
+
const columnId = useColumnContext();
|
|
1075
|
+
const FilterList2 = useTheme((t) => t.icons.FilterList);
|
|
1076
|
+
const label = table.useState((state) => {
|
|
1077
|
+
var _a2, _b2;
|
|
1078
|
+
return (_b2 = (_a2 = state.activeColumns.find((column) => column.id === columnId)) == null ? void 0 : _a2.header) != null ? _b2 : null;
|
|
1079
|
+
});
|
|
1080
|
+
const Button2 = useTheme((t) => t.components.Button);
|
|
1081
|
+
return /* @__PURE__ */ jsx11(
|
|
1082
|
+
Button2,
|
|
1083
|
+
__spreadProps(__spreadValues({}, props), {
|
|
1084
|
+
startIcon: /* @__PURE__ */ jsx11(
|
|
1085
|
+
FilterList2,
|
|
1086
|
+
{
|
|
1087
|
+
css: {
|
|
1088
|
+
color: isActive ? "var(--primaryMain)" : "#b0bac9"
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
),
|
|
1092
|
+
css: {
|
|
1093
|
+
width: "100%",
|
|
1094
|
+
color: isActive ? "var(--primaryMain)" : "var(--color-text)"
|
|
1095
|
+
},
|
|
1096
|
+
children: label
|
|
1097
|
+
})
|
|
1098
|
+
);
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1024
1101
|
// src/components/datePicker.tsx
|
|
1025
1102
|
import { useDayzed } from "dayzed";
|
|
1026
1103
|
import {
|
|
@@ -1046,7 +1123,7 @@ function defaults(first, ...more) {
|
|
|
1046
1123
|
|
|
1047
1124
|
// src/components/dateInput.tsx
|
|
1048
1125
|
import { Fragment, useMemo as useMemo4, useState as useState4 } from "react";
|
|
1049
|
-
import { jsx as
|
|
1126
|
+
import { jsx as jsx12 } from "@emotion/react/jsx-runtime";
|
|
1050
1127
|
var className = "schummar-table-date-input";
|
|
1051
1128
|
var defaultDate = new Date(1970, 0, 1);
|
|
1052
1129
|
var isIncludedType = (type) => type === "day" || type === "month" || type === "year";
|
|
@@ -1114,14 +1191,14 @@ function DateInput({
|
|
|
1114
1191
|
);
|
|
1115
1192
|
const parts = format.formatToParts(value != null ? value : defaultDate);
|
|
1116
1193
|
const isEmpty = !value;
|
|
1117
|
-
return /* @__PURE__ */
|
|
1194
|
+
return /* @__PURE__ */ jsx12(
|
|
1118
1195
|
"div",
|
|
1119
1196
|
{
|
|
1120
1197
|
css: {
|
|
1121
1198
|
display: "flex",
|
|
1122
1199
|
alignItems: "baseline"
|
|
1123
1200
|
},
|
|
1124
|
-
children: parts.map(({ type, value: value2 }, index) => /* @__PURE__ */
|
|
1201
|
+
children: parts.map(({ type, value: value2 }, index) => /* @__PURE__ */ jsx12(Fragment, { children: isIncludedType(type) ? /* @__PURE__ */ jsx12(
|
|
1125
1202
|
"input",
|
|
1126
1203
|
{
|
|
1127
1204
|
className,
|
|
@@ -1156,20 +1233,20 @@ function DateInput({
|
|
|
1156
1233
|
onFocus: (event) => event.target.select(),
|
|
1157
1234
|
onBlur: commit
|
|
1158
1235
|
}
|
|
1159
|
-
) : type === "literal" ? /* @__PURE__ */
|
|
1236
|
+
) : type === "literal" ? /* @__PURE__ */ jsx12("span", { children: value2 }) : null }, index))
|
|
1160
1237
|
}
|
|
1161
1238
|
);
|
|
1162
1239
|
}
|
|
1163
1240
|
|
|
1164
1241
|
// src/components/text.tsx
|
|
1165
|
-
import { Fragment as Fragment2, jsx as
|
|
1242
|
+
import { Fragment as Fragment2, jsx as jsx13 } from "@emotion/react/jsx-runtime";
|
|
1166
1243
|
function Text({ id }) {
|
|
1167
1244
|
const text = useTheme((t) => t.text[id]);
|
|
1168
|
-
return /* @__PURE__ */
|
|
1245
|
+
return /* @__PURE__ */ jsx13(Fragment2, { children: text });
|
|
1169
1246
|
}
|
|
1170
1247
|
|
|
1171
1248
|
// src/components/datePicker.tsx
|
|
1172
|
-
import { Fragment as Fragment4, jsx as
|
|
1249
|
+
import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
|
|
1173
1250
|
var DatePickerContext = createContext4({});
|
|
1174
1251
|
function DatePickerProvider(_a) {
|
|
1175
1252
|
var _b = _a, {
|
|
@@ -1178,7 +1255,7 @@ function DatePickerProvider(_a) {
|
|
|
1178
1255
|
"children"
|
|
1179
1256
|
]);
|
|
1180
1257
|
const value = useMemo5(() => props, [JSON.stringify(props)]);
|
|
1181
|
-
return /* @__PURE__ */
|
|
1258
|
+
return /* @__PURE__ */ jsx14(DatePickerContext.Provider, { value, children });
|
|
1182
1259
|
}
|
|
1183
1260
|
var weekDays = [0, 1, 2, 3, 4, 5, 6];
|
|
1184
1261
|
var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
@@ -1256,12 +1333,12 @@ var getCalendarWeek = (date) => {
|
|
|
1256
1333
|
return weekOfYear;
|
|
1257
1334
|
};
|
|
1258
1335
|
var commonQuickOptions = {
|
|
1259
|
-
today: { label: /* @__PURE__ */
|
|
1260
|
-
thisWeek: { label: /* @__PURE__ */
|
|
1261
|
-
thisMonth: { label: /* @__PURE__ */
|
|
1262
|
-
thisYear: { label: /* @__PURE__ */
|
|
1263
|
-
lastSevenDays: { label: /* @__PURE__ */
|
|
1264
|
-
lastThirtyDays: { label: /* @__PURE__ */
|
|
1336
|
+
today: { label: /* @__PURE__ */ jsx14(Text, { id: "today" }), value: today },
|
|
1337
|
+
thisWeek: { label: /* @__PURE__ */ jsx14(Text, { id: "thisWeek" }), value: (props) => thisWeek(0, props.firstDayOfWeek) },
|
|
1338
|
+
thisMonth: { label: /* @__PURE__ */ jsx14(Text, { id: "thisMonth" }), value: () => thisMonth() },
|
|
1339
|
+
thisYear: { label: /* @__PURE__ */ jsx14(Text, { id: "thisYear" }), value: () => thisYear() },
|
|
1340
|
+
lastSevenDays: { label: /* @__PURE__ */ jsx14(Text, { id: "lastSevenDays" }), value: () => lastDays(7) },
|
|
1341
|
+
lastThirtyDays: { label: /* @__PURE__ */ jsx14(Text, { id: "lastThirtyDays" }), value: () => lastDays(30) }
|
|
1265
1342
|
};
|
|
1266
1343
|
function dateIntersect(a, b) {
|
|
1267
1344
|
if (a instanceof Date) {
|
|
@@ -1390,7 +1467,7 @@ function DatePicker(props) {
|
|
|
1390
1467
|
const max = dirty ? dirty.max : value instanceof Date ? value : value == null ? void 0 : value.max;
|
|
1391
1468
|
const resolvedQuickOptions = [
|
|
1392
1469
|
...quickOptions,
|
|
1393
|
-
...noReset ? [] : [{ label: /* @__PURE__ */
|
|
1470
|
+
...noReset ? [] : [{ label: /* @__PURE__ */ jsx14(Text, { id: "reset" }), value: null }]
|
|
1394
1471
|
].map((option, index) => {
|
|
1395
1472
|
if (option instanceof Function) {
|
|
1396
1473
|
return option((value3) => {
|
|
@@ -1399,7 +1476,7 @@ function DatePicker(props) {
|
|
|
1399
1476
|
});
|
|
1400
1477
|
}
|
|
1401
1478
|
const { label, value: value2 } = typeof option === "string" ? commonQuickOptions[option] : option;
|
|
1402
|
-
return /* @__PURE__ */
|
|
1479
|
+
return /* @__PURE__ */ jsx14(
|
|
1403
1480
|
Button2,
|
|
1404
1481
|
{
|
|
1405
1482
|
variant: "text",
|
|
@@ -1496,7 +1573,7 @@ function DatePicker(props) {
|
|
|
1496
1573
|
gap: "var(--spacing)"
|
|
1497
1574
|
},
|
|
1498
1575
|
children: [
|
|
1499
|
-
/* @__PURE__ */
|
|
1576
|
+
/* @__PURE__ */ jsx14(
|
|
1500
1577
|
DateInput,
|
|
1501
1578
|
{
|
|
1502
1579
|
value: min != null ? min : null,
|
|
@@ -1506,7 +1583,7 @@ function DatePicker(props) {
|
|
|
1506
1583
|
),
|
|
1507
1584
|
rangeSelect && /* @__PURE__ */ jsxs8(Fragment4, { children: [
|
|
1508
1585
|
" - ",
|
|
1509
|
-
/* @__PURE__ */
|
|
1586
|
+
/* @__PURE__ */ jsx14(
|
|
1510
1587
|
DateInput,
|
|
1511
1588
|
{
|
|
1512
1589
|
value: max != null ? max : null,
|
|
@@ -1530,13 +1607,13 @@ function DatePicker(props) {
|
|
|
1530
1607
|
alignItems: "center"
|
|
1531
1608
|
},
|
|
1532
1609
|
children: [
|
|
1533
|
-
/* @__PURE__ */
|
|
1610
|
+
/* @__PURE__ */ jsx14(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getBackProps({ calendars })), { children: /* @__PURE__ */ jsx14(ChevronRight2, { css: { transform: "rotate3d(0, 0, 1, 180deg)" } }) })),
|
|
1534
1611
|
/* @__PURE__ */ jsxs8("div", { css: { display: "flex" }, children: [
|
|
1535
1612
|
formatMonth(month),
|
|
1536
1613
|
" ",
|
|
1537
1614
|
formatYear(year)
|
|
1538
1615
|
] }),
|
|
1539
|
-
/* @__PURE__ */
|
|
1616
|
+
/* @__PURE__ */ jsx14(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getForwardProps({ calendars })), { children: /* @__PURE__ */ jsx14(ChevronRight2, {}) }))
|
|
1540
1617
|
]
|
|
1541
1618
|
}
|
|
1542
1619
|
),
|
|
@@ -1549,7 +1626,7 @@ function DatePicker(props) {
|
|
|
1549
1626
|
gridTemplateColumns: "repeat(8, max-content)"
|
|
1550
1627
|
},
|
|
1551
1628
|
children: [
|
|
1552
|
-
showCalendarWeek ? /* @__PURE__ */
|
|
1629
|
+
showCalendarWeek ? /* @__PURE__ */ jsx14(
|
|
1553
1630
|
"div",
|
|
1554
1631
|
{
|
|
1555
1632
|
css: {
|
|
@@ -1557,10 +1634,10 @@ function DatePicker(props) {
|
|
|
1557
1634
|
padding: 10,
|
|
1558
1635
|
borderRight: "1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))"
|
|
1559
1636
|
},
|
|
1560
|
-
children: /* @__PURE__ */
|
|
1637
|
+
children: /* @__PURE__ */ jsx14(Text, { id: "calendarWeek" })
|
|
1561
1638
|
}
|
|
1562
|
-
) : /* @__PURE__ */
|
|
1563
|
-
weekDays.map((_v, weekDay) => /* @__PURE__ */
|
|
1639
|
+
) : /* @__PURE__ */ jsx14("div", {}),
|
|
1640
|
+
weekDays.map((_v, weekDay) => /* @__PURE__ */ jsx14(
|
|
1564
1641
|
"div",
|
|
1565
1642
|
{
|
|
1566
1643
|
css: {
|
|
@@ -1576,7 +1653,7 @@ function DatePicker(props) {
|
|
|
1576
1653
|
const weekEnd = week[6];
|
|
1577
1654
|
const weekDisabled = !rangeSelect || minDate && weekEnd.date < minDate || maxDate && weekStart.date > maxDate;
|
|
1578
1655
|
return /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
1579
|
-
showCalendarWeek ? /* @__PURE__ */
|
|
1656
|
+
showCalendarWeek ? /* @__PURE__ */ jsx14(
|
|
1580
1657
|
"button",
|
|
1581
1658
|
{
|
|
1582
1659
|
type: "button",
|
|
@@ -1601,10 +1678,10 @@ function DatePicker(props) {
|
|
|
1601
1678
|
onPointerOut: () => !weekDisabled && setHovered(void 0),
|
|
1602
1679
|
children: getCalendarWeek(weekEnd.date)
|
|
1603
1680
|
}
|
|
1604
|
-
) : /* @__PURE__ */
|
|
1681
|
+
) : /* @__PURE__ */ jsx14("div", {}),
|
|
1605
1682
|
week.map((dateObject, dayIndex) => {
|
|
1606
1683
|
if (!dateObject) {
|
|
1607
|
-
return /* @__PURE__ */
|
|
1684
|
+
return /* @__PURE__ */ jsx14("div", {}, dayIndex);
|
|
1608
1685
|
}
|
|
1609
1686
|
const { prevMonth, nextMonth, date } = dateObject;
|
|
1610
1687
|
const today2 = startOfDay(date).getTime() === now.getTime();
|
|
@@ -1615,7 +1692,7 @@ function DatePicker(props) {
|
|
|
1615
1692
|
min <= hovered.min ? { min, max: hovered.min } : { min: hovered.max, max: min }
|
|
1616
1693
|
));
|
|
1617
1694
|
const blocked = blockedRanges.some((range) => dateIntersect(date, range));
|
|
1618
|
-
return /* @__PURE__ */
|
|
1695
|
+
return /* @__PURE__ */ jsx14(
|
|
1619
1696
|
"button",
|
|
1620
1697
|
__spreadProps(__spreadValues({
|
|
1621
1698
|
type: "button",
|
|
@@ -1651,7 +1728,7 @@ function DatePicker(props) {
|
|
|
1651
1728
|
}
|
|
1652
1729
|
)
|
|
1653
1730
|
] }, `${month}${year}`)),
|
|
1654
|
-
/* @__PURE__ */
|
|
1731
|
+
/* @__PURE__ */ jsx14(
|
|
1655
1732
|
"div",
|
|
1656
1733
|
{
|
|
1657
1734
|
css: {
|
|
@@ -1669,7 +1746,7 @@ function DatePicker(props) {
|
|
|
1669
1746
|
}
|
|
1670
1747
|
|
|
1671
1748
|
// src/components/dateFilter.tsx
|
|
1672
|
-
import { jsx as
|
|
1749
|
+
import { jsx as jsx15 } from "@emotion/react/jsx-runtime";
|
|
1673
1750
|
function convertDate(x) {
|
|
1674
1751
|
if (x instanceof Date) return x;
|
|
1675
1752
|
if (typeof x === "number" || typeof x === "string") return new Date(x);
|
|
@@ -1721,14 +1798,14 @@ function DateFilter(_a) {
|
|
|
1721
1798
|
return dateIntersect(filterValue, value2);
|
|
1722
1799
|
}
|
|
1723
1800
|
}));
|
|
1724
|
-
return /* @__PURE__ */
|
|
1801
|
+
return /* @__PURE__ */ jsx15(
|
|
1725
1802
|
"div",
|
|
1726
1803
|
{
|
|
1727
1804
|
css: {
|
|
1728
1805
|
padding: "calc(var(--spacing) * 2)",
|
|
1729
1806
|
display: "grid"
|
|
1730
1807
|
},
|
|
1731
|
-
children: /* @__PURE__ */
|
|
1808
|
+
children: /* @__PURE__ */ jsx15(
|
|
1732
1809
|
DatePicker,
|
|
1733
1810
|
{
|
|
1734
1811
|
rangeSelect: !singleSelect,
|
|
@@ -1749,7 +1826,7 @@ function DateFilter(_a) {
|
|
|
1749
1826
|
|
|
1750
1827
|
// src/components/numberField.tsx
|
|
1751
1828
|
import { useState as useState6 } from "react";
|
|
1752
|
-
import { jsx as
|
|
1829
|
+
import { jsx as jsx16 } from "@emotion/react/jsx-runtime";
|
|
1753
1830
|
var Pattern = /^-?\d*(?:[.,]\d*)?$/;
|
|
1754
1831
|
var printNumber = (value, locale) => {
|
|
1755
1832
|
if (value === null) {
|
|
@@ -1775,7 +1852,7 @@ function NumberField(_a) {
|
|
|
1775
1852
|
const locale = useTheme((t) => t.locale);
|
|
1776
1853
|
const TextField2 = useTheme((t) => t.components.TextField);
|
|
1777
1854
|
const [value = printNumber(commitedValue, locale), setValue] = useState6();
|
|
1778
|
-
return /* @__PURE__ */
|
|
1855
|
+
return /* @__PURE__ */ jsx16(
|
|
1779
1856
|
TextField2,
|
|
1780
1857
|
__spreadProps(__spreadValues({
|
|
1781
1858
|
value,
|
|
@@ -1800,7 +1877,7 @@ function NumberField(_a) {
|
|
|
1800
1877
|
}
|
|
1801
1878
|
|
|
1802
1879
|
// src/components/rangeFilter.tsx
|
|
1803
|
-
import { jsx as
|
|
1880
|
+
import { jsx as jsx17, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
|
|
1804
1881
|
function RangeFilter(_a) {
|
|
1805
1882
|
var _b = _a, {
|
|
1806
1883
|
min,
|
|
@@ -1854,7 +1931,7 @@ function RangeFilter(_a) {
|
|
|
1854
1931
|
return value2 !== null && value2 >= min2 && value2 <= max2;
|
|
1855
1932
|
}
|
|
1856
1933
|
}));
|
|
1857
|
-
return /* @__PURE__ */
|
|
1934
|
+
return /* @__PURE__ */ jsx17(
|
|
1858
1935
|
"div",
|
|
1859
1936
|
{
|
|
1860
1937
|
css: {
|
|
@@ -1874,12 +1951,12 @@ function RangeFilter(_a) {
|
|
|
1874
1951
|
}
|
|
1875
1952
|
},
|
|
1876
1953
|
children: [
|
|
1877
|
-
/* @__PURE__ */
|
|
1954
|
+
/* @__PURE__ */ jsx17(
|
|
1878
1955
|
NumberField,
|
|
1879
1956
|
{
|
|
1880
1957
|
value: value == null ? void 0 : value[0],
|
|
1881
1958
|
onChange: (newMin) => onChange(normalize(newMin, value == null ? void 0 : value[1], "min", { min, max })),
|
|
1882
|
-
startIcon: /* @__PURE__ */
|
|
1959
|
+
startIcon: /* @__PURE__ */ jsx17("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMinText }),
|
|
1883
1960
|
placeholder: String(minValue != null ? minValue : ""),
|
|
1884
1961
|
css: {
|
|
1885
1962
|
alignItems: "baseline"
|
|
@@ -1887,12 +1964,12 @@ function RangeFilter(_a) {
|
|
|
1887
1964
|
}
|
|
1888
1965
|
),
|
|
1889
1966
|
"-",
|
|
1890
|
-
/* @__PURE__ */
|
|
1967
|
+
/* @__PURE__ */ jsx17(
|
|
1891
1968
|
NumberField,
|
|
1892
1969
|
{
|
|
1893
1970
|
value: value == null ? void 0 : value[1],
|
|
1894
1971
|
onChange: (newMax) => onChange(normalize(value == null ? void 0 : value[0], newMax, "max", { min, max })),
|
|
1895
|
-
startIcon: /* @__PURE__ */
|
|
1972
|
+
startIcon: /* @__PURE__ */ jsx17("span", { css: { margin: "0 calc(var(--spacing) * 2)" }, children: rangeMaxText }),
|
|
1896
1973
|
placeholder: String(maxValue != null ? maxValue : ""),
|
|
1897
1974
|
css: {
|
|
1898
1975
|
alignItems: "baseline"
|
|
@@ -1925,7 +2002,7 @@ function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFI
|
|
|
1925
2002
|
import { useEffect as useEffect4, useMemo as useMemo7, useState as useState8 } from "react";
|
|
1926
2003
|
|
|
1927
2004
|
// src/components/formControlLabel.tsx
|
|
1928
|
-
import { jsx as
|
|
2005
|
+
import { jsx as jsx18, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
|
|
1929
2006
|
function FormControlLabel({
|
|
1930
2007
|
control,
|
|
1931
2008
|
label,
|
|
@@ -1948,7 +2025,7 @@ function FormControlLabel({
|
|
|
1948
2025
|
],
|
|
1949
2026
|
children: [
|
|
1950
2027
|
control,
|
|
1951
|
-
/* @__PURE__ */
|
|
2028
|
+
/* @__PURE__ */ jsx18("span", { css: { marginLeft: "var(--spacing)" }, children: label })
|
|
1952
2029
|
]
|
|
1953
2030
|
}
|
|
1954
2031
|
);
|
|
@@ -1996,7 +2073,7 @@ function throttle(function_, ms) {
|
|
|
1996
2073
|
}
|
|
1997
2074
|
|
|
1998
2075
|
// src/components/virtualList.tsx
|
|
1999
|
-
import { jsx as
|
|
2076
|
+
import { jsx as jsx19, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
|
|
2000
2077
|
function VirtualList(_a) {
|
|
2001
2078
|
var _b = _a, {
|
|
2002
2079
|
virtual = true,
|
|
@@ -2026,7 +2103,7 @@ function VirtualList(_a) {
|
|
|
2026
2103
|
};
|
|
2027
2104
|
}, [update, virtual, throttleScroll]);
|
|
2028
2105
|
if (!virtual) {
|
|
2029
|
-
return /* @__PURE__ */
|
|
2106
|
+
return /* @__PURE__ */ jsx19(
|
|
2030
2107
|
"div",
|
|
2031
2108
|
__spreadProps(__spreadValues({}, props), {
|
|
2032
2109
|
css: {
|
|
@@ -2071,9 +2148,9 @@ function VirtualList(_a) {
|
|
|
2071
2148
|
display: "grid"
|
|
2072
2149
|
},
|
|
2073
2150
|
children: [
|
|
2074
|
-
/* @__PURE__ */
|
|
2151
|
+
/* @__PURE__ */ jsx19("div", { "data-virtual-before": true, style: { height: before } }),
|
|
2075
2152
|
items.slice(from, to).map((item, index) => children(item, index + from)),
|
|
2076
|
-
/* @__PURE__ */
|
|
2153
|
+
/* @__PURE__ */ jsx19("div", { "data-virtual-after": true, style: { height: after } })
|
|
2077
2154
|
]
|
|
2078
2155
|
})
|
|
2079
2156
|
);
|
|
@@ -2087,7 +2164,7 @@ function averageItemHeight(container) {
|
|
|
2087
2164
|
}
|
|
2088
2165
|
|
|
2089
2166
|
// src/components/selectFilter.tsx
|
|
2090
|
-
import { jsx as
|
|
2167
|
+
import { jsx as jsx20, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
|
|
2091
2168
|
function toggle(set, value, singleSelect) {
|
|
2092
2169
|
const newSet = new Set(singleSelect ? [] : set);
|
|
2093
2170
|
if (set.has(value)) {
|
|
@@ -2165,16 +2242,16 @@ function SelectFilter(_a) {
|
|
|
2165
2242
|
gap: "var(--spacing)"
|
|
2166
2243
|
},
|
|
2167
2244
|
children: [
|
|
2168
|
-
!hideSearchField && /* @__PURE__ */
|
|
2245
|
+
!hideSearchField && /* @__PURE__ */ jsx20(
|
|
2169
2246
|
AutoFocusTextField,
|
|
2170
2247
|
{
|
|
2171
2248
|
value: query,
|
|
2172
2249
|
onChange: (event) => setQuery(event.target.value),
|
|
2173
|
-
endIcon: /* @__PURE__ */
|
|
2250
|
+
endIcon: /* @__PURE__ */ jsx20(IconButton2, { onClick: () => setQuery(""), children: !query ? /* @__PURE__ */ jsx20(Search2, {}) : /* @__PURE__ */ jsx20(Clear2, {}) }),
|
|
2174
2251
|
css: { marginBottom: "var(--spacing)" }
|
|
2175
2252
|
}
|
|
2176
2253
|
),
|
|
2177
|
-
!hideResetButton && /* @__PURE__ */
|
|
2254
|
+
!hideResetButton && /* @__PURE__ */ jsx20(
|
|
2178
2255
|
Button2,
|
|
2179
2256
|
{
|
|
2180
2257
|
disabled: value.size === 0,
|
|
@@ -2189,7 +2266,7 @@ function SelectFilter(_a) {
|
|
|
2189
2266
|
children: deselectAll
|
|
2190
2267
|
}
|
|
2191
2268
|
),
|
|
2192
|
-
/* @__PURE__ */
|
|
2269
|
+
/* @__PURE__ */ jsx20(
|
|
2193
2270
|
VirtualList,
|
|
2194
2271
|
{
|
|
2195
2272
|
items: ordered,
|
|
@@ -2201,10 +2278,10 @@ function SelectFilter(_a) {
|
|
|
2201
2278
|
display: "grid",
|
|
2202
2279
|
gridTemplateColumns: "minmax(0, 1fr)"
|
|
2203
2280
|
},
|
|
2204
|
-
children: (option, index) => /* @__PURE__ */
|
|
2281
|
+
children: (option, index) => /* @__PURE__ */ jsx20(
|
|
2205
2282
|
FormControlLabel,
|
|
2206
2283
|
{
|
|
2207
|
-
control: /* @__PURE__ */
|
|
2284
|
+
control: /* @__PURE__ */ jsx20(
|
|
2208
2285
|
Checkbox2,
|
|
2209
2286
|
{
|
|
2210
2287
|
checked: value.has(option),
|
|
@@ -2217,7 +2294,7 @@ function SelectFilter(_a) {
|
|
|
2217
2294
|
)
|
|
2218
2295
|
}
|
|
2219
2296
|
),
|
|
2220
|
-
ordered.length === 0 && /* @__PURE__ */
|
|
2297
|
+
ordered.length === 0 && /* @__PURE__ */ jsx20("span", { css: { textAlign: "center" }, children: noResults })
|
|
2221
2298
|
]
|
|
2222
2299
|
}
|
|
2223
2300
|
);
|
|
@@ -3004,12 +3081,12 @@ function useTableState(_props) {
|
|
|
3004
3081
|
}
|
|
3005
3082
|
|
|
3006
3083
|
// src/components/clearFiltersButton.tsx
|
|
3007
|
-
import { jsx as
|
|
3084
|
+
import { jsx as jsx21 } from "@emotion/react/jsx-runtime";
|
|
3008
3085
|
function ClearFiltersButton() {
|
|
3009
3086
|
const Button2 = useTheme((t) => t.components.Button);
|
|
3010
3087
|
const textClearFilters = useTheme((t) => t.text.clearFilters);
|
|
3011
3088
|
const table = useTableContext();
|
|
3012
|
-
return /* @__PURE__ */
|
|
3089
|
+
return /* @__PURE__ */ jsx21("div", { css: defaultClasses.clearFiltersButton, children: /* @__PURE__ */ jsx21(
|
|
3013
3090
|
Button2,
|
|
3014
3091
|
{
|
|
3015
3092
|
variant: "outlined",
|
|
@@ -3028,7 +3105,7 @@ function ClearFiltersButton() {
|
|
|
3028
3105
|
}
|
|
3029
3106
|
|
|
3030
3107
|
// src/components/columnFooter.tsx
|
|
3031
|
-
import { jsx as
|
|
3108
|
+
import { jsx as jsx22 } from "@emotion/react/jsx-runtime";
|
|
3032
3109
|
function ColumnFooter() {
|
|
3033
3110
|
const table = useTableContext();
|
|
3034
3111
|
const columnId = useColumnContext();
|
|
@@ -3060,7 +3137,7 @@ function ColumnFooter() {
|
|
|
3060
3137
|
const column = state.activeColumns.find((column2) => column2.id === columnId);
|
|
3061
3138
|
return column == null ? void 0 : column.footer;
|
|
3062
3139
|
});
|
|
3063
|
-
return /* @__PURE__ */
|
|
3140
|
+
return /* @__PURE__ */ jsx22(
|
|
3064
3141
|
"div",
|
|
3065
3142
|
{
|
|
3066
3143
|
className: cx(classes, columnClasses),
|
|
@@ -3082,7 +3159,7 @@ import { castDraft as castDraft5 } from "immer";
|
|
|
3082
3159
|
import { useEffect as useEffect13, useRef as useRef4 } from "react";
|
|
3083
3160
|
|
|
3084
3161
|
// src/components/resizeHandle.tsx
|
|
3085
|
-
import { jsx as
|
|
3162
|
+
import { jsx as jsx23 } from "@emotion/react/jsx-runtime";
|
|
3086
3163
|
function ResizeHandle() {
|
|
3087
3164
|
const table = useTableContext();
|
|
3088
3165
|
const columnId = useColumnContext();
|
|
@@ -3119,7 +3196,7 @@ function ResizeHandle() {
|
|
|
3119
3196
|
if (!enabled) {
|
|
3120
3197
|
return null;
|
|
3121
3198
|
}
|
|
3122
|
-
return /* @__PURE__ */
|
|
3199
|
+
return /* @__PURE__ */ jsx23(
|
|
3123
3200
|
ResizeHandleView,
|
|
3124
3201
|
{
|
|
3125
3202
|
enabled,
|
|
@@ -3144,7 +3221,7 @@ function ResizeHandleView(_a) {
|
|
|
3144
3221
|
var _a2;
|
|
3145
3222
|
return (_a2 = theme.styles) == null ? void 0 : _a2.columnDivider;
|
|
3146
3223
|
});
|
|
3147
|
-
return /* @__PURE__ */
|
|
3224
|
+
return /* @__PURE__ */ jsx23(
|
|
3148
3225
|
"div",
|
|
3149
3226
|
__spreadValues({
|
|
3150
3227
|
className: className2,
|
|
@@ -3173,7 +3250,7 @@ function ResizeHandleView(_a) {
|
|
|
3173
3250
|
}
|
|
3174
3251
|
|
|
3175
3252
|
// src/components/sortComponent.tsx
|
|
3176
|
-
import { jsx as
|
|
3253
|
+
import { jsx as jsx24, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
|
|
3177
3254
|
function SortComponent({ children }) {
|
|
3178
3255
|
const table = useTableContext();
|
|
3179
3256
|
const columnId = useColumnContext();
|
|
@@ -3230,8 +3307,8 @@ function SortComponent({ children }) {
|
|
|
3230
3307
|
onClick: (event) => toggle2(event),
|
|
3231
3308
|
onContextMenu: (event) => toggle2(event, true),
|
|
3232
3309
|
children: [
|
|
3233
|
-
/* @__PURE__ */
|
|
3234
|
-
/* @__PURE__ */
|
|
3310
|
+
/* @__PURE__ */ jsx24("div", { children }),
|
|
3311
|
+
/* @__PURE__ */ jsx24(Badge2, { badgeContent: sortDisabled ? 0 : index, children: /* @__PURE__ */ jsx24(
|
|
3235
3312
|
"span",
|
|
3236
3313
|
{
|
|
3237
3314
|
css: [
|
|
@@ -3239,7 +3316,7 @@ function SortComponent({ children }) {
|
|
|
3239
3316
|
!direction && { opacity: 0 },
|
|
3240
3317
|
direction === "desc" && { transform: "rotate3d(0, 0, 1, 180deg)" }
|
|
3241
3318
|
],
|
|
3242
|
-
children: /* @__PURE__ */
|
|
3319
|
+
children: /* @__PURE__ */ jsx24(ArrowUpward2, {})
|
|
3243
3320
|
}
|
|
3244
3321
|
) })
|
|
3245
3322
|
]
|
|
@@ -3248,7 +3325,7 @@ function SortComponent({ children }) {
|
|
|
3248
3325
|
}
|
|
3249
3326
|
|
|
3250
3327
|
// src/components/columnHeader.tsx
|
|
3251
|
-
import { jsx as
|
|
3328
|
+
import { jsx as jsx25, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
|
|
3252
3329
|
var ColumnHeaderContext = new StoreScope({
|
|
3253
3330
|
items: /* @__PURE__ */ new Map()
|
|
3254
3331
|
});
|
|
@@ -3411,10 +3488,10 @@ function ColumnHeader() {
|
|
|
3411
3488
|
onPointerMove: enabled ? onPointerMove : void 0,
|
|
3412
3489
|
onPointerUp: enabled ? onPointerUp : void 0,
|
|
3413
3490
|
children: [
|
|
3414
|
-
/* @__PURE__ */
|
|
3415
|
-
/* @__PURE__ */
|
|
3416
|
-
/* @__PURE__ */
|
|
3417
|
-
/* @__PURE__ */
|
|
3491
|
+
/* @__PURE__ */ jsx25(SortComponent, { children: header }),
|
|
3492
|
+
/* @__PURE__ */ jsx25("div", { css: { flex: 1 } }),
|
|
3493
|
+
/* @__PURE__ */ jsx25(FilterControl, {}),
|
|
3494
|
+
/* @__PURE__ */ jsx25(ResizeHandle, {})
|
|
3418
3495
|
]
|
|
3419
3496
|
}
|
|
3420
3497
|
);
|
|
@@ -3422,7 +3499,7 @@ function ColumnHeader() {
|
|
|
3422
3499
|
|
|
3423
3500
|
// src/components/columnSelection.tsx
|
|
3424
3501
|
import { useContext as useContext7, useState as useState11 } from "react";
|
|
3425
|
-
import { Fragment as Fragment5, jsx as
|
|
3502
|
+
import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
|
|
3426
3503
|
function ColumnSelection() {
|
|
3427
3504
|
const IconButton2 = useTheme((t) => t.components.IconButton);
|
|
3428
3505
|
const Popover2 = useTheme((t) => t.components.Popover);
|
|
@@ -3461,8 +3538,8 @@ function ColumnSelection() {
|
|
|
3461
3538
|
};
|
|
3462
3539
|
const allVisible = columns.every((column) => !hiddenColumns.has(column.id));
|
|
3463
3540
|
return /* @__PURE__ */ jsxs15(Fragment5, { children: [
|
|
3464
|
-
/* @__PURE__ */
|
|
3465
|
-
/* @__PURE__ */
|
|
3541
|
+
/* @__PURE__ */ jsx26(IconButton2, { onClick: (event) => setAnchorElement(anchorElement ? null : event.currentTarget), children: /* @__PURE__ */ jsx26(Settings2, {}) }),
|
|
3542
|
+
/* @__PURE__ */ jsx26(
|
|
3466
3543
|
Popover2,
|
|
3467
3544
|
{
|
|
3468
3545
|
anchorEl: anchorElement,
|
|
@@ -3472,17 +3549,17 @@ function ColumnSelection() {
|
|
|
3472
3549
|
className: classes == null ? void 0 : classes.popover,
|
|
3473
3550
|
backdropClassName: classes == null ? void 0 : classes.popoverBackdrop,
|
|
3474
3551
|
children: /* @__PURE__ */ jsxs15("div", { css: { padding: `calc(var(--spacing) * 2)`, display: "grid" }, children: [
|
|
3475
|
-
/* @__PURE__ */
|
|
3552
|
+
/* @__PURE__ */ jsx26("div", { css: { marginBottom: "var(--spacing)" }, children: selectColumns }),
|
|
3476
3553
|
/* @__PURE__ */ jsxs15("div", { css: { margin: "0.5em 0", display: "flex", gap: "0.5em" }, children: [
|
|
3477
|
-
/* @__PURE__ */
|
|
3478
|
-
/* @__PURE__ */
|
|
3554
|
+
/* @__PURE__ */ jsx26(Button2, { variant: "outlined", onClick: () => toggle2(void 0, !allVisible), children: allVisible ? hideAll : showAll }),
|
|
3555
|
+
/* @__PURE__ */ jsx26(Button2, { variant: "outlined", onClick: reset, children: resetAll })
|
|
3479
3556
|
] }),
|
|
3480
3557
|
columns.map((column) => {
|
|
3481
3558
|
var _a;
|
|
3482
|
-
return /* @__PURE__ */
|
|
3559
|
+
return /* @__PURE__ */ jsx26(
|
|
3483
3560
|
FormControlLabel,
|
|
3484
3561
|
{
|
|
3485
|
-
control: /* @__PURE__ */
|
|
3562
|
+
control: /* @__PURE__ */ jsx26(
|
|
3486
3563
|
Checkbox2,
|
|
3487
3564
|
{
|
|
3488
3565
|
checked: !((_a = column.hidden) != null ? _a : hiddenColumns.has(column.id)),
|
|
@@ -3503,7 +3580,7 @@ function ColumnSelection() {
|
|
|
3503
3580
|
|
|
3504
3581
|
// src/components/export.tsx
|
|
3505
3582
|
import { useContext as useContext8, useState as useState12 } from "react";
|
|
3506
|
-
import { Fragment as Fragment6, jsx as
|
|
3583
|
+
import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
|
|
3507
3584
|
function Export2() {
|
|
3508
3585
|
const { exporters: contextExporters } = useContext8(TableSettingsContext);
|
|
3509
3586
|
const table = useTableContext();
|
|
@@ -3549,8 +3626,8 @@ function Export2() {
|
|
|
3549
3626
|
}
|
|
3550
3627
|
}
|
|
3551
3628
|
return /* @__PURE__ */ jsxs16(Fragment6, { children: [
|
|
3552
|
-
/* @__PURE__ */
|
|
3553
|
-
/* @__PURE__ */
|
|
3629
|
+
/* @__PURE__ */ jsx27(IconButton2, { onClick: (event) => setAnchor(anchor ? null : event.currentTarget), children: /* @__PURE__ */ jsx27(ExportIcon, { css: !!anchor && { color: "var(--primaryMain)" } }) }),
|
|
3630
|
+
/* @__PURE__ */ jsx27(
|
|
3554
3631
|
Popover2,
|
|
3555
3632
|
{
|
|
3556
3633
|
open: !!anchor,
|
|
@@ -3572,11 +3649,11 @@ function Export2() {
|
|
|
3572
3649
|
}
|
|
3573
3650
|
},
|
|
3574
3651
|
children: [
|
|
3575
|
-
/* @__PURE__ */
|
|
3652
|
+
/* @__PURE__ */ jsx27("div", { css: { marginBottom: "var(--spacing)" }, children: exportTitle }),
|
|
3576
3653
|
exporters.map((entry, index) => /* @__PURE__ */ jsxs16(
|
|
3577
3654
|
Button2,
|
|
3578
3655
|
{
|
|
3579
|
-
startIcon: entry.action === "copy" ? /* @__PURE__ */
|
|
3656
|
+
startIcon: entry.action === "copy" ? /* @__PURE__ */ jsx27(Clipboard2, {}) : /* @__PURE__ */ jsx27(ExportIcon, {}),
|
|
3580
3657
|
onClick: () => execute(entry),
|
|
3581
3658
|
children: [
|
|
3582
3659
|
entry.action === "copy" ? exportCopy : exportDownload,
|
|
@@ -3617,10 +3694,10 @@ function calcCss(styles, item, index) {
|
|
|
3617
3694
|
|
|
3618
3695
|
// src/components/cell.tsx
|
|
3619
3696
|
import { memo, useLayoutEffect as useLayoutEffect3 } from "react";
|
|
3620
|
-
import { jsx as
|
|
3697
|
+
import { jsx as jsx28 } from "@emotion/react/jsx-runtime";
|
|
3621
3698
|
var defaultWrapCell = (content) => {
|
|
3622
3699
|
if (typeof content === "string") {
|
|
3623
|
-
return /* @__PURE__ */
|
|
3700
|
+
return /* @__PURE__ */ jsx28("span", { css: defaultClasses.text, title: content, children: content });
|
|
3624
3701
|
}
|
|
3625
3702
|
return content;
|
|
3626
3703
|
};
|
|
@@ -3648,12 +3725,12 @@ var Cell = memo(function Cell2({ itemId, rowIndex }) {
|
|
|
3648
3725
|
const styles = useTheme((t) => calcCss(t.styles, item == null ? void 0 : item.value, rowIndex));
|
|
3649
3726
|
if (!column || !item) return null;
|
|
3650
3727
|
const content = column.renderCell(column.value(item.value), item.value);
|
|
3651
|
-
return /* @__PURE__ */
|
|
3728
|
+
return /* @__PURE__ */ jsx28("div", { className: className2, css: [defaultClasses.cell, styles], style: columnStyleOverride, children: wrapCell(content, column.value(item.value), item.value, rowIndex) });
|
|
3652
3729
|
});
|
|
3653
3730
|
|
|
3654
3731
|
// src/components/details.tsx
|
|
3655
3732
|
import { forwardRef } from "react";
|
|
3656
|
-
import { jsx as
|
|
3733
|
+
import { jsx as jsx29 } from "@emotion/react/jsx-runtime";
|
|
3657
3734
|
var Details = forwardRef(function Details2({ itemId, rowIndex }, ref) {
|
|
3658
3735
|
const table = useTableContext();
|
|
3659
3736
|
const classes = useTheme((t) => t.classes);
|
|
@@ -3666,11 +3743,11 @@ var Details = forwardRef(function Details2({ itemId, rowIndex }, ref) {
|
|
|
3666
3743
|
css: (styles == null ? void 0 : styles.details) instanceof Function ? styles.details(item == null ? void 0 : item.value, rowIndex) : styles == null ? void 0 : styles.details
|
|
3667
3744
|
};
|
|
3668
3745
|
});
|
|
3669
|
-
return details ? /* @__PURE__ */
|
|
3746
|
+
return details ? /* @__PURE__ */ jsx29("div", { ref, className: className2, css: [defaultClasses.details, css3], children: details }) : null;
|
|
3670
3747
|
});
|
|
3671
3748
|
|
|
3672
3749
|
// src/components/expandControl.tsx
|
|
3673
|
-
import { jsx as
|
|
3750
|
+
import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
|
|
3674
3751
|
function ExpandControl({
|
|
3675
3752
|
itemId,
|
|
3676
3753
|
hasDeferredChildren
|
|
@@ -3717,9 +3794,9 @@ function ExpandControl({
|
|
|
3717
3794
|
}
|
|
3718
3795
|
}
|
|
3719
3796
|
if (isExpanded && hasDeferredChildren && !hasChildren) {
|
|
3720
|
-
return /* @__PURE__ */
|
|
3797
|
+
return /* @__PURE__ */ jsx30(Spinner2, { css: { margin: "0 var(--spacing)" } });
|
|
3721
3798
|
}
|
|
3722
|
-
return /* @__PURE__ */
|
|
3799
|
+
return /* @__PURE__ */ jsx30(IconButton2, { onClick: toggle2, children: /* @__PURE__ */ jsx30(
|
|
3723
3800
|
"span",
|
|
3724
3801
|
{
|
|
3725
3802
|
css: {
|
|
@@ -3727,13 +3804,13 @@ function ExpandControl({
|
|
|
3727
3804
|
transition: "all 300ms",
|
|
3728
3805
|
transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
|
|
3729
3806
|
},
|
|
3730
|
-
children: /* @__PURE__ */
|
|
3807
|
+
children: /* @__PURE__ */ jsx30(ChevronRight2, {})
|
|
3731
3808
|
}
|
|
3732
3809
|
) });
|
|
3733
3810
|
}
|
|
3734
3811
|
|
|
3735
3812
|
// src/components/selectComponent.tsx
|
|
3736
|
-
import { jsx as
|
|
3813
|
+
import { jsx as jsx31 } from "@emotion/react/jsx-runtime";
|
|
3737
3814
|
function SelectComponent({ itemId }) {
|
|
3738
3815
|
const table = useTableContext();
|
|
3739
3816
|
const Checkbox2 = useTheme((t) => t.components.Checkbox);
|
|
@@ -3782,7 +3859,7 @@ function SelectComponent({ itemId }) {
|
|
|
3782
3859
|
state.lastSelectedId = itemId;
|
|
3783
3860
|
});
|
|
3784
3861
|
}
|
|
3785
|
-
return /* @__PURE__ */
|
|
3862
|
+
return /* @__PURE__ */ jsx31(
|
|
3786
3863
|
Checkbox2,
|
|
3787
3864
|
{
|
|
3788
3865
|
css: {
|
|
@@ -3796,7 +3873,7 @@ function SelectComponent({ itemId }) {
|
|
|
3796
3873
|
}
|
|
3797
3874
|
|
|
3798
3875
|
// src/components/row.tsx
|
|
3799
|
-
import { Fragment as Fragment7, jsx as
|
|
3876
|
+
import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
|
|
3800
3877
|
var Row = memo2(function Row2({
|
|
3801
3878
|
itemId,
|
|
3802
3879
|
rowIndex
|
|
@@ -3808,7 +3885,7 @@ var Row = memo2(function Row2({
|
|
|
3808
3885
|
const classes = useTheme((t) => t.classes);
|
|
3809
3886
|
const styles = useTheme((t) => t.styles);
|
|
3810
3887
|
const item = table.useState((state) => state.activeItemsById.get(itemId));
|
|
3811
|
-
const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : (props) => /* @__PURE__ */
|
|
3888
|
+
const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : (props) => /* @__PURE__ */ jsx32("div", __spreadValues({}, props));
|
|
3812
3889
|
const rowClassName = (classes == null ? void 0 : classes.row) instanceof Function ? classes.row(item == null ? void 0 : item.value, rowIndex) : classes == null ? void 0 : classes.row;
|
|
3813
3890
|
const rowStyles = (styles == null ? void 0 : styles.row) instanceof Function ? styles.row(item == null ? void 0 : item.value, rowIndex) : styles == null ? void 0 : styles.row;
|
|
3814
3891
|
const subgrid = table.useState((state) => state.props.subgrid);
|
|
@@ -3865,7 +3942,7 @@ var Row = memo2(function Row2({
|
|
|
3865
3942
|
if (!item) {
|
|
3866
3943
|
return null;
|
|
3867
3944
|
}
|
|
3868
|
-
return /* @__PURE__ */
|
|
3945
|
+
return /* @__PURE__ */ jsx32(ClassNames2, { children: ({ css: css3 }) => /* @__PURE__ */ jsx32(Fragment7, { children: wrapRow(
|
|
3869
3946
|
{
|
|
3870
3947
|
className: css3([
|
|
3871
3948
|
subgrid ? {
|
|
@@ -3879,7 +3956,7 @@ var Row = memo2(function Row2({
|
|
|
3879
3956
|
rowStyles
|
|
3880
3957
|
]),
|
|
3881
3958
|
children: /* @__PURE__ */ jsxs17(Fragment7, { children: [
|
|
3882
|
-
/* @__PURE__ */
|
|
3959
|
+
/* @__PURE__ */ jsx32(
|
|
3883
3960
|
"div",
|
|
3884
3961
|
{
|
|
3885
3962
|
className: cellClassName,
|
|
@@ -3893,16 +3970,16 @@ var Row = memo2(function Row2({
|
|
|
3893
3970
|
className: cellClassName,
|
|
3894
3971
|
css: [defaultClasses.cell, defaultClasses.firstCell, css_],
|
|
3895
3972
|
children: [
|
|
3896
|
-
indent > 0 && /* @__PURE__ */
|
|
3897
|
-
enableSelection && /* @__PURE__ */
|
|
3898
|
-
(hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */
|
|
3973
|
+
indent > 0 && /* @__PURE__ */ jsx32("div", { css: { width: indent * 20 } }),
|
|
3974
|
+
enableSelection && /* @__PURE__ */ jsx32(SelectComponent, { itemId }),
|
|
3975
|
+
(hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ jsx32(ExpandControl, { itemId, hasDeferredChildren }),
|
|
3899
3976
|
rowAction
|
|
3900
3977
|
]
|
|
3901
3978
|
}
|
|
3902
3979
|
),
|
|
3903
|
-
columnIds.map((columnId) => /* @__PURE__ */
|
|
3904
|
-
/* @__PURE__ */
|
|
3905
|
-
/* @__PURE__ */
|
|
3980
|
+
columnIds.map((columnId) => /* @__PURE__ */ jsx32(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ jsx32(Cell, { itemId, rowIndex }) }, columnId)),
|
|
3981
|
+
/* @__PURE__ */ jsx32("div", { className: cellClassName, css: [defaultClasses.cellFill, css_] }),
|
|
3982
|
+
/* @__PURE__ */ jsx32(Details, { ref: detailsDivRef, itemId, rowIndex })
|
|
3906
3983
|
] })
|
|
3907
3984
|
},
|
|
3908
3985
|
item.value,
|
|
@@ -3912,7 +3989,7 @@ var Row = memo2(function Row2({
|
|
|
3912
3989
|
|
|
3913
3990
|
// src/components/virtualized.tsx
|
|
3914
3991
|
import { useEffect as useEffect14, useLayoutEffect as useLayoutEffect5, useMemo as useMemo10, useRef as useRef6, useState as useState13 } from "react";
|
|
3915
|
-
import { jsx as
|
|
3992
|
+
import { jsx as jsx33, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
|
|
3916
3993
|
var findScrollRoot = (x) => {
|
|
3917
3994
|
const parent = x.parentElement;
|
|
3918
3995
|
if (!parent) return document.documentElement;
|
|
@@ -4027,15 +4104,15 @@ function Virtualized(_a) {
|
|
|
4027
4104
|
);
|
|
4028
4105
|
return /* @__PURE__ */ jsxs18("div", __spreadProps(__spreadValues({}, props), { children: [
|
|
4029
4106
|
header,
|
|
4030
|
-
virtual && /* @__PURE__ */
|
|
4107
|
+
virtual && /* @__PURE__ */ jsx33("div", { style: { gridColumn: "1 / -1", height: before }, ref: probeRef }),
|
|
4031
4108
|
children(itemIds, from),
|
|
4032
|
-
virtual && /* @__PURE__ */
|
|
4109
|
+
virtual && /* @__PURE__ */ jsx33("div", { style: { gridColumn: "1 / -1", height: after } }),
|
|
4033
4110
|
footer
|
|
4034
4111
|
] }));
|
|
4035
4112
|
}
|
|
4036
4113
|
|
|
4037
4114
|
// src/components/table.tsx
|
|
4038
|
-
import { Fragment as Fragment8, jsx as
|
|
4115
|
+
import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
|
|
4039
4116
|
function Table(props) {
|
|
4040
4117
|
const [table, resetState] = useTableState(props);
|
|
4041
4118
|
const [isHydrated, clearStorage] = useTableStateStorage(table);
|
|
@@ -4049,7 +4126,7 @@ function Table(props) {
|
|
|
4049
4126
|
var _a, _b;
|
|
4050
4127
|
return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
|
|
4051
4128
|
});
|
|
4052
|
-
return /* @__PURE__ */
|
|
4129
|
+
return /* @__PURE__ */ jsx34(TableContext.Provider, { value: table, children: /* @__PURE__ */ jsx34(TableResetContext.Provider, { value: reset, children: /* @__PURE__ */ jsx34(TableMemoContextProvider, { children: /* @__PURE__ */ jsx34(TableLoadingState, { isHydrated }) }) }) });
|
|
4053
4130
|
}
|
|
4054
4131
|
function TableLoadingState({ isHydrated }) {
|
|
4055
4132
|
const loadingText = useTheme((t) => t.text.loading);
|
|
@@ -4059,8 +4136,8 @@ function TableLoadingState({ isHydrated }) {
|
|
|
4059
4136
|
return () => clearTimeout(handle);
|
|
4060
4137
|
});
|
|
4061
4138
|
return /* @__PURE__ */ jsxs19(Fragment8, { children: [
|
|
4062
|
-
!isHydrated && showLoading && /* @__PURE__ */
|
|
4063
|
-
/* @__PURE__ */
|
|
4139
|
+
!isHydrated && showLoading && /* @__PURE__ */ jsx34("div", { children: loadingText }),
|
|
4140
|
+
/* @__PURE__ */ jsx34(TableInner, { hidden: !isHydrated })
|
|
4064
4141
|
] });
|
|
4065
4142
|
}
|
|
4066
4143
|
var TableInner = memo3(function TableInner2({ hidden }) {
|
|
@@ -4101,7 +4178,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
|
|
|
4101
4178
|
var _a, _b;
|
|
4102
4179
|
return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
|
|
4103
4180
|
});
|
|
4104
|
-
return /* @__PURE__ */
|
|
4181
|
+
return /* @__PURE__ */ jsx34(
|
|
4105
4182
|
Virtualized,
|
|
4106
4183
|
{
|
|
4107
4184
|
className: classes == null ? void 0 : classes.table,
|
|
@@ -4121,7 +4198,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
|
|
|
4121
4198
|
].join(" ")
|
|
4122
4199
|
},
|
|
4123
4200
|
header: /* @__PURE__ */ jsxs19(Fragment8, { children: [
|
|
4124
|
-
/* @__PURE__ */
|
|
4201
|
+
/* @__PURE__ */ jsx34(
|
|
4125
4202
|
"div",
|
|
4126
4203
|
{
|
|
4127
4204
|
className: classes == null ? void 0 : classes.headerCell,
|
|
@@ -4146,18 +4223,18 @@ var TableInner = memo3(function TableInner2({ hidden }) {
|
|
|
4146
4223
|
styles == null ? void 0 : styles.headerCell
|
|
4147
4224
|
],
|
|
4148
4225
|
children: [
|
|
4149
|
-
enableSelection && /* @__PURE__ */
|
|
4150
|
-
enableColumnSelection && /* @__PURE__ */
|
|
4151
|
-
enableExport && /* @__PURE__ */
|
|
4226
|
+
enableSelection && /* @__PURE__ */ jsx34(SelectComponent, {}),
|
|
4227
|
+
enableColumnSelection && /* @__PURE__ */ jsx34(ColumnSelection, {}),
|
|
4228
|
+
enableExport && /* @__PURE__ */ jsx34(Export2, {}),
|
|
4152
4229
|
(enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ jsxs19(Fragment8, { children: [
|
|
4153
|
-
/* @__PURE__ */
|
|
4154
|
-
/* @__PURE__ */
|
|
4230
|
+
/* @__PURE__ */ jsx34("div", { css: { flex: 1 } }),
|
|
4231
|
+
/* @__PURE__ */ jsx34(ResizeHandleView, {})
|
|
4155
4232
|
] })
|
|
4156
4233
|
]
|
|
4157
4234
|
}
|
|
4158
4235
|
),
|
|
4159
|
-
/* @__PURE__ */
|
|
4160
|
-
/* @__PURE__ */
|
|
4236
|
+
/* @__PURE__ */ jsx34(ColumnHeaderContext.Provider, { children: visibleColumns.map((column) => /* @__PURE__ */ jsx34(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ jsx34(ColumnHeader, {}) }, column.id)) }),
|
|
4237
|
+
/* @__PURE__ */ jsx34(
|
|
4161
4238
|
"div",
|
|
4162
4239
|
{
|
|
4163
4240
|
className: classes == null ? void 0 : classes.headerCell,
|
|
@@ -4171,9 +4248,9 @@ var TableInner = memo3(function TableInner2({ hidden }) {
|
|
|
4171
4248
|
)
|
|
4172
4249
|
] }),
|
|
4173
4250
|
footer: /* @__PURE__ */ jsxs19(Fragment8, { children: [
|
|
4174
|
-
enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */
|
|
4251
|
+
enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ jsx34(ClearFiltersButton, {}),
|
|
4175
4252
|
hasFooter && /* @__PURE__ */ jsxs19(Fragment8, { children: [
|
|
4176
|
-
/* @__PURE__ */
|
|
4253
|
+
/* @__PURE__ */ jsx34(
|
|
4177
4254
|
"div",
|
|
4178
4255
|
{
|
|
4179
4256
|
className: classes == null ? void 0 : classes.footerCell,
|
|
@@ -4186,7 +4263,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
|
|
|
4186
4263
|
]
|
|
4187
4264
|
}
|
|
4188
4265
|
),
|
|
4189
|
-
/* @__PURE__ */
|
|
4266
|
+
/* @__PURE__ */ jsx34(
|
|
4190
4267
|
"div",
|
|
4191
4268
|
{
|
|
4192
4269
|
className: classes == null ? void 0 : classes.footerCell,
|
|
@@ -4198,8 +4275,8 @@ var TableInner = memo3(function TableInner2({ hidden }) {
|
|
|
4198
4275
|
]
|
|
4199
4276
|
}
|
|
4200
4277
|
),
|
|
4201
|
-
visibleColumns.map((column) => /* @__PURE__ */
|
|
4202
|
-
/* @__PURE__ */
|
|
4278
|
+
visibleColumns.map((column) => /* @__PURE__ */ jsx34(ColumnContext.Provider, { value: column.id, children: /* @__PURE__ */ jsx34(ColumnFooter, {}) }, column.id)),
|
|
4279
|
+
/* @__PURE__ */ jsx34(
|
|
4203
4280
|
"div",
|
|
4204
4281
|
{
|
|
4205
4282
|
className: classes == null ? void 0 : classes.footerCell,
|
|
@@ -4213,7 +4290,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
|
|
|
4213
4290
|
)
|
|
4214
4291
|
] })
|
|
4215
4292
|
] }),
|
|
4216
|
-
children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */
|
|
4293
|
+
children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsx34(Row, { itemId, rowIndex: startIndex + index }, itemId))
|
|
4217
4294
|
}
|
|
4218
4295
|
);
|
|
4219
4296
|
});
|
|
@@ -4239,7 +4316,7 @@ var termMatch = (text, query) => {
|
|
|
4239
4316
|
};
|
|
4240
4317
|
|
|
4241
4318
|
// src/components/textFilter.tsx
|
|
4242
|
-
import { jsx as
|
|
4319
|
+
import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
|
|
4243
4320
|
function TextFilter(_a) {
|
|
4244
4321
|
var _b = _a, {
|
|
4245
4322
|
compare = textMatch,
|
|
@@ -4263,19 +4340,19 @@ function TextFilter(_a) {
|
|
|
4263
4340
|
return compare(value2, filterValue);
|
|
4264
4341
|
}
|
|
4265
4342
|
}));
|
|
4266
|
-
return /* @__PURE__ */
|
|
4343
|
+
return /* @__PURE__ */ jsx35(
|
|
4267
4344
|
"div",
|
|
4268
4345
|
{
|
|
4269
4346
|
css: {
|
|
4270
4347
|
padding: `calc(var(--spacing) * 2)`,
|
|
4271
4348
|
display: "grid"
|
|
4272
4349
|
},
|
|
4273
|
-
children: /* @__PURE__ */
|
|
4350
|
+
children: /* @__PURE__ */ jsx35(
|
|
4274
4351
|
AutoFocusTextField,
|
|
4275
4352
|
{
|
|
4276
4353
|
value,
|
|
4277
4354
|
onChange: (event) => onChange(event.target.value),
|
|
4278
|
-
endIcon: /* @__PURE__ */
|
|
4355
|
+
endIcon: /* @__PURE__ */ jsx35(IconButton2, { onClick: () => onChange(""), children: !value ? /* @__PURE__ */ jsx35(Search2, {}) : /* @__PURE__ */ jsx35(Clear2, {}) }),
|
|
4279
4356
|
placeholder
|
|
4280
4357
|
}
|
|
4281
4358
|
)
|
|
@@ -4285,6 +4362,7 @@ function TextFilter(_a) {
|
|
|
4285
4362
|
export {
|
|
4286
4363
|
AutoFocusTextField,
|
|
4287
4364
|
ColumnContext,
|
|
4365
|
+
CombinedFilter,
|
|
4288
4366
|
DateFilter,
|
|
4289
4367
|
DatePicker,
|
|
4290
4368
|
DatePickerProvider,
|