@crispy-seed/data-table 0.1.1 → 0.1.3
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 +4570 -2
- package/dist/index.js +4554 -1
- package/package.json +1 -1
- package/dist/DataTable-12s-D02v6Qj5.js +0 -1523
- package/dist/DataTable-12s-Gpv6I4J8.cjs +0 -1574
- package/dist/DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs +0 -161
- package/dist/DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js +0 -153
- package/dist/Menu-12s-A4lEc__n.cjs +0 -103
- package/dist/Menu-12s-v9vnaq8F.js +0 -77
- package/dist/Select-12s-CE3SMzFp.js +0 -218
- package/dist/Select-12s-CNQC9z8t.cjs +0 -249
- package/dist/body-cells-12s-2sTwdliH.cjs +0 -461
- package/dist/body-cells-12s-Ba2uF4T-.js +0 -452
- package/dist/column-calc-12s-C1-I2KdV.js +0 -129
- package/dist/column-calc-12s-CJ26VuDJ.cjs +0 -149
- package/dist/column-layout-12s-BhQmNTJG.js +0 -99
- package/dist/column-layout-12s-k2fZYeKl.cjs +0 -120
- package/dist/column-menu-12s-6Yvu4SZ0.js +0 -406
- package/dist/column-menu-12s-BnknuXGh.cjs +0 -426
- package/dist/editors-12s-C0RxmTcI.cjs +0 -554
- package/dist/editors-12s-COixUnI2.js +0 -524
- package/dist/resize-12s-CajyNXFB.js +0 -58
- package/dist/resize-12s-ChLpxb4i.cjs +0 -58
- package/dist/states-12s-BB0PT_bq.cjs +0 -125
- package/dist/states-12s-m5mBR90e.js +0 -122
- package/dist/toolbar-12s-B1xiS-Zu.js +0 -68
- package/dist/toolbar-12s-DzLbghpK.cjs +0 -70
- package/dist/useDataTable-12s-BHiDUubw-12s-CBeCwTe7.js +0 -61
- package/dist/useDataTable-12s-BHiDUubw-12s-Dgvt7XDk.cjs +0 -61
- package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs +0 -207
- package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js +0 -183
- package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js +0 -289
- package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs +0 -292
- package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-BoOHq3GB.js +0 -98
- package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-De6YHBba.cjs +0 -98
- package/dist/useDataTableFilter-12s-ZzbmWMin-12s-CWyBeFna.js +0 -74
- package/dist/useDataTableFilter-12s-ZzbmWMin-12s-lpjzZY3_.cjs +0 -74
- package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-BexjP6iO.js +0 -104
- package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-Bt8gojr9.cjs +0 -104
- package/dist/useDataTableRow-12s-CPYaDa1p-12s-4qkGoz-j.js +0 -30
- package/dist/useDataTableRow-12s-CPYaDa1p-12s-DG64uYjn.cjs +0 -30
- package/dist/useDataTableScroll-12s-BKDCr0en-12s-C7f2vHeG.js +0 -61
- package/dist/useDataTableScroll-12s-BKDCr0en-12s-CUvUYMtt.cjs +0 -61
- package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-B-65V6gH.js +0 -37
- package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-DhVfN2Hq.cjs +0 -37
- package/dist/useDataTableSelection-12s-BIDtiRQq-12s-IS__VAnU.cjs +0 -71
- package/dist/useDataTableSelection-12s-BIDtiRQq-12s-O6M_BhrH.js +0 -71
- package/dist/useDataTableSort-12s-DvJYtmeS-12s-C5VGnsq4.cjs +0 -78
- package/dist/useDataTableSort-12s-DvJYtmeS-12s-DABSNt6U.js +0 -78
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
12
|
-
require('react');
|
|
13
|
-
var DataTable12s = require('./DataTable-12s-Gpv6I4J8.cjs');
|
|
14
|
-
var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs');
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* A small inline spinner, not seed's own `ProgressCircle` -- that component's
|
|
18
|
-
* smallest size (24px) is already bigger than crisp's own measured 16px loading
|
|
19
|
-
* icon, the same gap `editors.tsx`'s `EditPendingIndicator` already works around for
|
|
20
|
-
* its own (smaller still, 14px) in-cell pending spinner. Same shape, one size up,
|
|
21
|
-
* reusing the SAME global `rotate` keyframe (this file's own qvism recipe slot
|
|
22
|
-
* nests `.seed-data-table-loading-spinner` under it) rather than a third near-
|
|
23
|
-
* identical spinner.
|
|
24
|
-
*/ function LoadingSpinner() {
|
|
25
|
-
return /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
26
|
-
className: "seed-data-table-loading-spinner",
|
|
27
|
-
width: 16,
|
|
28
|
-
height: 16,
|
|
29
|
-
viewBox: "0 0 16 16",
|
|
30
|
-
fill: "none",
|
|
31
|
-
role: "presentation",
|
|
32
|
-
"aria-hidden": "true",
|
|
33
|
-
children: [
|
|
34
|
-
/*#__PURE__*/ jsxRuntime.jsx("circle", {
|
|
35
|
-
cx: 8,
|
|
36
|
-
cy: 8,
|
|
37
|
-
r: 6.5,
|
|
38
|
-
stroke: "currentColor",
|
|
39
|
-
strokeOpacity: 0.25,
|
|
40
|
-
strokeWidth: 2
|
|
41
|
-
}),
|
|
42
|
-
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
43
|
-
d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5",
|
|
44
|
-
stroke: "currentColor",
|
|
45
|
-
strokeWidth: 2,
|
|
46
|
-
strokeLinecap: "round"
|
|
47
|
-
})
|
|
48
|
-
]
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
/** The full-body empty/error row's own content -- one `<tr>`/`<td colSpan>` wrapping
|
|
52
|
-
* this, rendered by `DataTable.tsx` itself (it already owns `totalCols`). Shared by
|
|
53
|
-
* `empty` and `error` alike, matching crisp's own single `.crisp-datatable-empty`
|
|
54
|
-
* class doing double duty for both. */ function EmptyStateContent({ children, classNames }) {
|
|
55
|
-
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
56
|
-
className: classNames.emptyState,
|
|
57
|
-
children: children
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
/** The full-body loading row's own content (spinner + `loadingLabel`). */ function LoadingStateContent({ label, classNames }) {
|
|
61
|
-
return /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
62
|
-
className: classNames.loadingState,
|
|
63
|
-
children: [
|
|
64
|
-
/*#__PURE__*/ jsxRuntime.jsx(LoadingSpinner, {}),
|
|
65
|
-
label
|
|
66
|
-
]
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Infinite scroll's own sentinel + "loading more" row -- the LAST child of
|
|
71
|
-
* `<tbody>` while `hasMore` (the headless `useDataTableInfiniteScroll`'s own
|
|
72
|
-
* return, read off context the same way `SelectAllCheckbox` reads `selectionState`).
|
|
73
|
-
* Renders nothing once `hasMore` is false -- there is no manual pagination
|
|
74
|
-
* fallback, matching DATATABLE-ATTIO-SPEC.md's auto-load-only contract. While a
|
|
75
|
-
* fetch is in flight (`loadingMore`) the SAME row shows the compact spinner
|
|
76
|
-
* (`loadingState`'s own `[data-inline]` modifier, a normal 36px row); at rest it's
|
|
77
|
-
* an empty sentinel row the IntersectionObserver watches.
|
|
78
|
-
*/ function InfiniteScrollRow({ colSpan, classNames, loadingLabel }) {
|
|
79
|
-
const { sentinelRef, hasMore, loadingMore } = DataTable12sZml1x9Kr12s.useDataTableContext();
|
|
80
|
-
if (!hasMore) return null;
|
|
81
|
-
return /*#__PURE__*/ jsxRuntime.jsx("tr", {
|
|
82
|
-
ref: sentinelRef,
|
|
83
|
-
"aria-hidden": loadingMore ? undefined : "true",
|
|
84
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableCell, {
|
|
85
|
-
colSpan: colSpan,
|
|
86
|
-
children: loadingMore && /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
87
|
-
className: classNames.loadingState,
|
|
88
|
-
"data-inline": "",
|
|
89
|
-
children: [
|
|
90
|
-
/*#__PURE__*/ jsxRuntime.jsx(LoadingSpinner, {}),
|
|
91
|
-
loadingLabel
|
|
92
|
-
]
|
|
93
|
-
})
|
|
94
|
-
})
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
/** The trailing "+ New" add-row footer -- crisp's own `.crisp-datatable-addrow`
|
|
98
|
-
* inside a zero-padding `.crisp-datatable-addcell`, its own `<tfoot>` (a table can
|
|
99
|
-
* have more than one; the ColumnCalc summary footer, when both are present, is a
|
|
100
|
-
* separate one, matching crisp's own two independent `<TableFooter>` rows). */ function AddRowFooter({ onAddRow, addRowLabel, colSpan, classNames }) {
|
|
101
|
-
return /*#__PURE__*/ jsxRuntime.jsx("tfoot", {
|
|
102
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("tr", {
|
|
103
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("td", {
|
|
104
|
-
className: classNames.addRowCell,
|
|
105
|
-
colSpan: colSpan,
|
|
106
|
-
children: /*#__PURE__*/ jsxRuntime.jsxs("button", {
|
|
107
|
-
type: "button",
|
|
108
|
-
className: classNames.addRow,
|
|
109
|
-
onClick: onAddRow,
|
|
110
|
-
children: [
|
|
111
|
-
/*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconPlusLine_default, {
|
|
112
|
-
size: 15
|
|
113
|
-
}),
|
|
114
|
-
addRowLabel
|
|
115
|
-
]
|
|
116
|
-
})
|
|
117
|
-
})
|
|
118
|
-
})
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
exports.AddRowFooter = AddRowFooter;
|
|
123
|
-
exports.EmptyStateContent = EmptyStateContent;
|
|
124
|
-
exports.InfiniteScrollRow = InfiniteScrollRow;
|
|
125
|
-
exports.LoadingStateContent = LoadingStateContent;
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
12
|
-
import 'react';
|
|
13
|
-
import { D as DataTableCell, y as IconPlusLine_default } from './DataTable-12s-D02v6Qj5.js';
|
|
14
|
-
import { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js';
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* A small inline spinner, not seed's own `ProgressCircle` -- that component's
|
|
18
|
-
* smallest size (24px) is already bigger than crisp's own measured 16px loading
|
|
19
|
-
* icon, the same gap `editors.tsx`'s `EditPendingIndicator` already works around for
|
|
20
|
-
* its own (smaller still, 14px) in-cell pending spinner. Same shape, one size up,
|
|
21
|
-
* reusing the SAME global `rotate` keyframe (this file's own qvism recipe slot
|
|
22
|
-
* nests `.seed-data-table-loading-spinner` under it) rather than a third near-
|
|
23
|
-
* identical spinner.
|
|
24
|
-
*/ function LoadingSpinner() {
|
|
25
|
-
return /*#__PURE__*/ jsxs("svg", {
|
|
26
|
-
className: "seed-data-table-loading-spinner",
|
|
27
|
-
width: 16,
|
|
28
|
-
height: 16,
|
|
29
|
-
viewBox: "0 0 16 16",
|
|
30
|
-
fill: "none",
|
|
31
|
-
role: "presentation",
|
|
32
|
-
"aria-hidden": "true",
|
|
33
|
-
children: [
|
|
34
|
-
/*#__PURE__*/ jsx("circle", {
|
|
35
|
-
cx: 8,
|
|
36
|
-
cy: 8,
|
|
37
|
-
r: 6.5,
|
|
38
|
-
stroke: "currentColor",
|
|
39
|
-
strokeOpacity: 0.25,
|
|
40
|
-
strokeWidth: 2
|
|
41
|
-
}),
|
|
42
|
-
/*#__PURE__*/ jsx("path", {
|
|
43
|
-
d: "M14.5 8a6.5 6.5 0 0 0-6.5-6.5",
|
|
44
|
-
stroke: "currentColor",
|
|
45
|
-
strokeWidth: 2,
|
|
46
|
-
strokeLinecap: "round"
|
|
47
|
-
})
|
|
48
|
-
]
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
/** The full-body empty/error row's own content -- one `<tr>`/`<td colSpan>` wrapping
|
|
52
|
-
* this, rendered by `DataTable.tsx` itself (it already owns `totalCols`). Shared by
|
|
53
|
-
* `empty` and `error` alike, matching crisp's own single `.crisp-datatable-empty`
|
|
54
|
-
* class doing double duty for both. */ function EmptyStateContent({ children, classNames }) {
|
|
55
|
-
return /*#__PURE__*/ jsx("div", {
|
|
56
|
-
className: classNames.emptyState,
|
|
57
|
-
children: children
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
/** The full-body loading row's own content (spinner + `loadingLabel`). */ function LoadingStateContent({ label, classNames }) {
|
|
61
|
-
return /*#__PURE__*/ jsxs("div", {
|
|
62
|
-
className: classNames.loadingState,
|
|
63
|
-
children: [
|
|
64
|
-
/*#__PURE__*/ jsx(LoadingSpinner, {}),
|
|
65
|
-
label
|
|
66
|
-
]
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Infinite scroll's own sentinel + "loading more" row -- the LAST child of
|
|
71
|
-
* `<tbody>` while `hasMore` (the headless `useDataTableInfiniteScroll`'s own
|
|
72
|
-
* return, read off context the same way `SelectAllCheckbox` reads `selectionState`).
|
|
73
|
-
* Renders nothing once `hasMore` is false -- there is no manual pagination
|
|
74
|
-
* fallback, matching DATATABLE-ATTIO-SPEC.md's auto-load-only contract. While a
|
|
75
|
-
* fetch is in flight (`loadingMore`) the SAME row shows the compact spinner
|
|
76
|
-
* (`loadingState`'s own `[data-inline]` modifier, a normal 36px row); at rest it's
|
|
77
|
-
* an empty sentinel row the IntersectionObserver watches.
|
|
78
|
-
*/ function InfiniteScrollRow({ colSpan, classNames, loadingLabel }) {
|
|
79
|
-
const { sentinelRef, hasMore, loadingMore } = useDataTableContext();
|
|
80
|
-
if (!hasMore) return null;
|
|
81
|
-
return /*#__PURE__*/ jsx("tr", {
|
|
82
|
-
ref: sentinelRef,
|
|
83
|
-
"aria-hidden": loadingMore ? undefined : "true",
|
|
84
|
-
children: /*#__PURE__*/ jsx(DataTableCell, {
|
|
85
|
-
colSpan: colSpan,
|
|
86
|
-
children: loadingMore && /*#__PURE__*/ jsxs("div", {
|
|
87
|
-
className: classNames.loadingState,
|
|
88
|
-
"data-inline": "",
|
|
89
|
-
children: [
|
|
90
|
-
/*#__PURE__*/ jsx(LoadingSpinner, {}),
|
|
91
|
-
loadingLabel
|
|
92
|
-
]
|
|
93
|
-
})
|
|
94
|
-
})
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
/** The trailing "+ New" add-row footer -- crisp's own `.crisp-datatable-addrow`
|
|
98
|
-
* inside a zero-padding `.crisp-datatable-addcell`, its own `<tfoot>` (a table can
|
|
99
|
-
* have more than one; the ColumnCalc summary footer, when both are present, is a
|
|
100
|
-
* separate one, matching crisp's own two independent `<TableFooter>` rows). */ function AddRowFooter({ onAddRow, addRowLabel, colSpan, classNames }) {
|
|
101
|
-
return /*#__PURE__*/ jsx("tfoot", {
|
|
102
|
-
children: /*#__PURE__*/ jsx("tr", {
|
|
103
|
-
children: /*#__PURE__*/ jsx("td", {
|
|
104
|
-
className: classNames.addRowCell,
|
|
105
|
-
colSpan: colSpan,
|
|
106
|
-
children: /*#__PURE__*/ jsxs("button", {
|
|
107
|
-
type: "button",
|
|
108
|
-
className: classNames.addRow,
|
|
109
|
-
onClick: onAddRow,
|
|
110
|
-
children: [
|
|
111
|
-
/*#__PURE__*/ jsx(IconPlusLine_default, {
|
|
112
|
-
size: 15
|
|
113
|
-
}),
|
|
114
|
-
addRowLabel
|
|
115
|
-
]
|
|
116
|
-
})
|
|
117
|
-
})
|
|
118
|
-
})
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
export { AddRowFooter as A, EmptyStateContent as E, InfiniteScrollRow as I, LoadingStateContent as L };
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
12
|
-
import 'react';
|
|
13
|
-
import { z as withContext, P as Primitive, A as dataTable, B as IconMagnifyingglassLine_default } from './DataTable-12s-D02v6Qj5.js';
|
|
14
|
-
import { c as TextFieldRoot, d as TextFieldPrefixIcon, e as TextFieldInput } from './editors-12s-COixUnI2.js';
|
|
15
|
-
import { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js';
|
|
16
|
-
|
|
17
|
-
const DataTableToolbar = withContext(Primitive.div, "toolbar");
|
|
18
|
-
const DataTableCount = withContext(Primitive.span, "count");
|
|
19
|
-
/**
|
|
20
|
-
* Fix (recurring bug): the search box is seed's own DOCUMENTED `TextField`
|
|
21
|
-
* composition -- `TextFieldRoot` (`variant="outline" size="medium"`) +
|
|
22
|
-
* `TextFieldPrefixIcon` + `TextFieldInput`, exactly `docs/examples/react/
|
|
23
|
-
* text-field-input/prefix.tsx` -- not that same trio fought with a custom
|
|
24
|
-
* `classNames.search` overriding its height/padding/icon position with `!important`.
|
|
25
|
-
* That override (this file's own previous state) is what kept mis-placing the icon:
|
|
26
|
-
* every fix landed on ANOTHER property the override was still fighting (the icon's own
|
|
27
|
-
* intrinsic SVG size, its inherited margin, the root's own min-height beating a plain
|
|
28
|
-
* `height` override) because the override was never the right layer to fix it at.
|
|
29
|
-
* `size="medium"`'s built-in prefix-icon spacing (a flex `gap` + edge margins, not
|
|
30
|
-
* absolute positioning) is what `text-input.ts`'s own variant CSS already gets right,
|
|
31
|
-
* so it needs no help from this component at all -- `search` (recipe.ts) is now just
|
|
32
|
-
* this box's own layout constraint (`flex`, `max-width`) within the toolbar row, not
|
|
33
|
-
* its internal chrome.
|
|
34
|
-
*/ function SearchBox({ placeholder, label }) {
|
|
35
|
-
const { query, setQuery } = useDataTableContext();
|
|
36
|
-
const classNames = dataTable();
|
|
37
|
-
return /*#__PURE__*/ jsxs(TextFieldRoot, {
|
|
38
|
-
variant: "outline",
|
|
39
|
-
size: "medium",
|
|
40
|
-
className: classNames.search,
|
|
41
|
-
children: [
|
|
42
|
-
/*#__PURE__*/ jsx(TextFieldPrefixIcon, {
|
|
43
|
-
svg: /*#__PURE__*/ jsx(IconMagnifyingglassLine_default, {})
|
|
44
|
-
}),
|
|
45
|
-
/*#__PURE__*/ jsx(TextFieldInput, {
|
|
46
|
-
type: "text",
|
|
47
|
-
value: query,
|
|
48
|
-
onChange: (event)=>setQuery(event.target.value),
|
|
49
|
-
placeholder: placeholder,
|
|
50
|
-
"aria-label": label
|
|
51
|
-
})
|
|
52
|
-
]
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
/** crisp's own count format (`datatable.tsx`'s `resolvedCountLabel`): unfiltered reads
|
|
56
|
-
* "N rows" ("N row" for exactly one), filtered/searched reads "N of M" with no
|
|
57
|
-
* trailing word at all -- reproduced literally rather than reinvented, since this is
|
|
58
|
-
* the one piece of copy DATATABLE-ATTIO-SPEC.md calls out by example. */ function defaultCountLabel(shown, total) {
|
|
59
|
-
if (shown === total) return `${total} ${total === 1 ? "row" : "rows"}`;
|
|
60
|
-
return `${shown} of ${total}`;
|
|
61
|
-
}
|
|
62
|
-
function RowCount({ shown, total, countLabel }) {
|
|
63
|
-
return /*#__PURE__*/ jsx(DataTableCount, {
|
|
64
|
-
children: (countLabel ?? defaultCountLabel)(shown, total)
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export { DataTableToolbar as D, RowCount as R, SearchBox as S };
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
12
|
-
require('react');
|
|
13
|
-
var DataTable12s = require('./DataTable-12s-Gpv6I4J8.cjs');
|
|
14
|
-
var editors12s = require('./editors-12s-C0RxmTcI.cjs');
|
|
15
|
-
var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs');
|
|
16
|
-
|
|
17
|
-
const DataTableToolbar = DataTable12s.withContext(DataTable12s.Primitive.div, "toolbar");
|
|
18
|
-
const DataTableCount = DataTable12s.withContext(DataTable12s.Primitive.span, "count");
|
|
19
|
-
/**
|
|
20
|
-
* Fix (recurring bug): the search box is seed's own DOCUMENTED `TextField`
|
|
21
|
-
* composition -- `TextFieldRoot` (`variant="outline" size="medium"`) +
|
|
22
|
-
* `TextFieldPrefixIcon` + `TextFieldInput`, exactly `docs/examples/react/
|
|
23
|
-
* text-field-input/prefix.tsx` -- not that same trio fought with a custom
|
|
24
|
-
* `classNames.search` overriding its height/padding/icon position with `!important`.
|
|
25
|
-
* That override (this file's own previous state) is what kept mis-placing the icon:
|
|
26
|
-
* every fix landed on ANOTHER property the override was still fighting (the icon's own
|
|
27
|
-
* intrinsic SVG size, its inherited margin, the root's own min-height beating a plain
|
|
28
|
-
* `height` override) because the override was never the right layer to fix it at.
|
|
29
|
-
* `size="medium"`'s built-in prefix-icon spacing (a flex `gap` + edge margins, not
|
|
30
|
-
* absolute positioning) is what `text-input.ts`'s own variant CSS already gets right,
|
|
31
|
-
* so it needs no help from this component at all -- `search` (recipe.ts) is now just
|
|
32
|
-
* this box's own layout constraint (`flex`, `max-width`) within the toolbar row, not
|
|
33
|
-
* its internal chrome.
|
|
34
|
-
*/ function SearchBox({ placeholder, label }) {
|
|
35
|
-
const { query, setQuery } = DataTable12sZml1x9Kr12s.useDataTableContext();
|
|
36
|
-
const classNames = DataTable12s.dataTable();
|
|
37
|
-
return /*#__PURE__*/ jsxRuntime.jsxs(editors12s.TextFieldRoot, {
|
|
38
|
-
variant: "outline",
|
|
39
|
-
size: "medium",
|
|
40
|
-
className: classNames.search,
|
|
41
|
-
children: [
|
|
42
|
-
/*#__PURE__*/ jsxRuntime.jsx(editors12s.TextFieldPrefixIcon, {
|
|
43
|
-
svg: /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconMagnifyingglassLine_default, {})
|
|
44
|
-
}),
|
|
45
|
-
/*#__PURE__*/ jsxRuntime.jsx(editors12s.TextFieldInput, {
|
|
46
|
-
type: "text",
|
|
47
|
-
value: query,
|
|
48
|
-
onChange: (event)=>setQuery(event.target.value),
|
|
49
|
-
placeholder: placeholder,
|
|
50
|
-
"aria-label": label
|
|
51
|
-
})
|
|
52
|
-
]
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
/** crisp's own count format (`datatable.tsx`'s `resolvedCountLabel`): unfiltered reads
|
|
56
|
-
* "N rows" ("N row" for exactly one), filtered/searched reads "N of M" with no
|
|
57
|
-
* trailing word at all -- reproduced literally rather than reinvented, since this is
|
|
58
|
-
* the one piece of copy DATATABLE-ATTIO-SPEC.md calls out by example. */ function defaultCountLabel(shown, total) {
|
|
59
|
-
if (shown === total) return `${total} ${total === 1 ? "row" : "rows"}`;
|
|
60
|
-
return `${shown} of ${total}`;
|
|
61
|
-
}
|
|
62
|
-
function RowCount({ shown, total, countLabel }) {
|
|
63
|
-
return /*#__PURE__*/ jsxRuntime.jsx(DataTableCount, {
|
|
64
|
-
children: (countLabel ?? defaultCountLabel)(shown, total)
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
exports.DataTableToolbar = DataTableToolbar;
|
|
69
|
-
exports.RowCount = RowCount;
|
|
70
|
-
exports.SearchBox = SearchBox;
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
import { elementProps } from '@seed-design/dom-utils';
|
|
12
|
-
import { u as useDataTableColumnCalc } from './useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js';
|
|
13
|
-
import { u as useDataTableColumns } from './useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js';
|
|
14
|
-
import { u as useDataTableEdit } from './useDataTableEdit-12s-9Wb_UCrN-12s-BoOHq3GB.js';
|
|
15
|
-
import { u as useDataTableFilter } from './useDataTableFilter-12s-ZzbmWMin-12s-CWyBeFna.js';
|
|
16
|
-
import { u as useDataTableInfiniteScroll } from './useDataTableInfiniteScroll-12s-8ZG31URd-12s-BexjP6iO.js';
|
|
17
|
-
import { u as useDataTableScroll } from './useDataTableScroll-12s-BKDCr0en-12s-C7f2vHeG.js';
|
|
18
|
-
import { u as useDataTableSearch } from './useDataTableSearch-12s-Ck3iWcpX-12s-B-65V6gH.js';
|
|
19
|
-
import { u as useDataTableSelection } from './useDataTableSelection-12s-BIDtiRQq-12s-O6M_BhrH.js';
|
|
20
|
-
import { u as useDataTableSort } from './useDataTableSort-12s-DvJYtmeS-12s-DABSNt6U.js';
|
|
21
|
-
|
|
22
|
-
// Composes the eight independent concerns a table root owns -- which column is
|
|
23
|
-
// sorted, which rows are selected, the toolbar's free-text query, each column's own
|
|
24
|
-
// filter, column order/visibility/width/label, each column's ColumnCalc footer op, the
|
|
25
|
-
// horizontal scroll-shadow edge state, and which single cell is mid-edit/pending/
|
|
26
|
-
// erroring -- the way useSelect composes useSelectHighlight + useSelectOptions. No
|
|
27
|
-
// sub-hook knows about any other; a future concern (row grouping) is a ninth sibling
|
|
28
|
-
// call here, not a branch inside an existing one.
|
|
29
|
-
function useDataTable(props) {
|
|
30
|
-
const sort = useDataTableSort(props);
|
|
31
|
-
const selection = useDataTableSelection(props);
|
|
32
|
-
const search = useDataTableSearch(props);
|
|
33
|
-
const filter = useDataTableFilter(props);
|
|
34
|
-
const columns = useDataTableColumns(props);
|
|
35
|
-
const columnCalc = useDataTableColumnCalc(props);
|
|
36
|
-
const scroll = useDataTableScroll();
|
|
37
|
-
const edit = useDataTableEdit(props);
|
|
38
|
-
// Wired to `scroll`'s own scroll-container ref (not a fresh one of its own) so a
|
|
39
|
-
// BOUNDED table's auto-load triggers off its own internal scroll, not the
|
|
40
|
-
// browsing viewport -- see useDataTableInfiniteScroll.ts's own doc comment.
|
|
41
|
-
const infiniteScroll = useDataTableInfiniteScroll({
|
|
42
|
-
...props,
|
|
43
|
-
scrollRootRef: scroll.elementRef
|
|
44
|
-
});
|
|
45
|
-
return {
|
|
46
|
-
...sort,
|
|
47
|
-
...selection,
|
|
48
|
-
...search,
|
|
49
|
-
...filter,
|
|
50
|
-
...columns,
|
|
51
|
-
...columnCalc,
|
|
52
|
-
...scroll,
|
|
53
|
-
...edit,
|
|
54
|
-
...infiniteScroll,
|
|
55
|
-
rootProps: elementProps({
|
|
56
|
-
role: "table"
|
|
57
|
-
})
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export { useDataTable as u };
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
var domUtils = require('@seed-design/dom-utils');
|
|
12
|
-
var useDataTableColumnCalc12sDTQQTtEJ12s = require('./useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs');
|
|
13
|
-
var useDataTableColumns12sCn2ZAzFL12s = require('./useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs');
|
|
14
|
-
var useDataTableEdit12s9Wb_UCrN12s = require('./useDataTableEdit-12s-9Wb_UCrN-12s-De6YHBba.cjs');
|
|
15
|
-
var useDataTableFilter12sZzbmWMin12s = require('./useDataTableFilter-12s-ZzbmWMin-12s-lpjzZY3_.cjs');
|
|
16
|
-
var useDataTableInfiniteScroll12s8ZG31URd12s = require('./useDataTableInfiniteScroll-12s-8ZG31URd-12s-Bt8gojr9.cjs');
|
|
17
|
-
var useDataTableScroll12sBKDCr0en12s = require('./useDataTableScroll-12s-BKDCr0en-12s-CUvUYMtt.cjs');
|
|
18
|
-
var useDataTableSearch12sCk3iWcpX12s = require('./useDataTableSearch-12s-Ck3iWcpX-12s-DhVfN2Hq.cjs');
|
|
19
|
-
var useDataTableSelection12sBIDtiRQq12s = require('./useDataTableSelection-12s-BIDtiRQq-12s-IS__VAnU.cjs');
|
|
20
|
-
var useDataTableSort12sDvJYtmeS12s = require('./useDataTableSort-12s-DvJYtmeS-12s-C5VGnsq4.cjs');
|
|
21
|
-
|
|
22
|
-
// Composes the eight independent concerns a table root owns -- which column is
|
|
23
|
-
// sorted, which rows are selected, the toolbar's free-text query, each column's own
|
|
24
|
-
// filter, column order/visibility/width/label, each column's ColumnCalc footer op, the
|
|
25
|
-
// horizontal scroll-shadow edge state, and which single cell is mid-edit/pending/
|
|
26
|
-
// erroring -- the way useSelect composes useSelectHighlight + useSelectOptions. No
|
|
27
|
-
// sub-hook knows about any other; a future concern (row grouping) is a ninth sibling
|
|
28
|
-
// call here, not a branch inside an existing one.
|
|
29
|
-
function useDataTable(props) {
|
|
30
|
-
const sort = useDataTableSort12sDvJYtmeS12s.useDataTableSort(props);
|
|
31
|
-
const selection = useDataTableSelection12sBIDtiRQq12s.useDataTableSelection(props);
|
|
32
|
-
const search = useDataTableSearch12sCk3iWcpX12s.useDataTableSearch(props);
|
|
33
|
-
const filter = useDataTableFilter12sZzbmWMin12s.useDataTableFilter(props);
|
|
34
|
-
const columns = useDataTableColumns12sCn2ZAzFL12s.useDataTableColumns(props);
|
|
35
|
-
const columnCalc = useDataTableColumnCalc12sDTQQTtEJ12s.useDataTableColumnCalc(props);
|
|
36
|
-
const scroll = useDataTableScroll12sBKDCr0en12s.useDataTableScroll();
|
|
37
|
-
const edit = useDataTableEdit12s9Wb_UCrN12s.useDataTableEdit(props);
|
|
38
|
-
// Wired to `scroll`'s own scroll-container ref (not a fresh one of its own) so a
|
|
39
|
-
// BOUNDED table's auto-load triggers off its own internal scroll, not the
|
|
40
|
-
// browsing viewport -- see useDataTableInfiniteScroll.ts's own doc comment.
|
|
41
|
-
const infiniteScroll = useDataTableInfiniteScroll12s8ZG31URd12s.useDataTableInfiniteScroll({
|
|
42
|
-
...props,
|
|
43
|
-
scrollRootRef: scroll.elementRef
|
|
44
|
-
});
|
|
45
|
-
return {
|
|
46
|
-
...sort,
|
|
47
|
-
...selection,
|
|
48
|
-
...search,
|
|
49
|
-
...filter,
|
|
50
|
-
...columns,
|
|
51
|
-
...columnCalc,
|
|
52
|
-
...scroll,
|
|
53
|
-
...edit,
|
|
54
|
-
...infiniteScroll,
|
|
55
|
-
rootProps: domUtils.elementProps({
|
|
56
|
-
role: "table"
|
|
57
|
-
})
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
exports.useDataTable = useDataTable;
|