@crispy-seed/data-table 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/index.cjs +4563 -2
  2. package/dist/index.js +4547 -1
  3. package/package.json +1 -1
  4. package/dist/DataTable-12s-D02v6Qj5.js +0 -1523
  5. package/dist/DataTable-12s-Gpv6I4J8.cjs +0 -1574
  6. package/dist/DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs +0 -161
  7. package/dist/DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js +0 -153
  8. package/dist/Menu-12s-A4lEc__n.cjs +0 -103
  9. package/dist/Menu-12s-v9vnaq8F.js +0 -77
  10. package/dist/Select-12s-CE3SMzFp.js +0 -218
  11. package/dist/Select-12s-CNQC9z8t.cjs +0 -249
  12. package/dist/body-cells-12s-2sTwdliH.cjs +0 -461
  13. package/dist/body-cells-12s-Ba2uF4T-.js +0 -452
  14. package/dist/column-calc-12s-C1-I2KdV.js +0 -129
  15. package/dist/column-calc-12s-CJ26VuDJ.cjs +0 -149
  16. package/dist/column-layout-12s-BhQmNTJG.js +0 -99
  17. package/dist/column-layout-12s-k2fZYeKl.cjs +0 -120
  18. package/dist/column-menu-12s-6Yvu4SZ0.js +0 -406
  19. package/dist/column-menu-12s-BnknuXGh.cjs +0 -426
  20. package/dist/editors-12s-C0RxmTcI.cjs +0 -554
  21. package/dist/editors-12s-COixUnI2.js +0 -524
  22. package/dist/resize-12s-CajyNXFB.js +0 -58
  23. package/dist/resize-12s-ChLpxb4i.cjs +0 -58
  24. package/dist/states-12s-BB0PT_bq.cjs +0 -125
  25. package/dist/states-12s-m5mBR90e.js +0 -122
  26. package/dist/toolbar-12s-B1xiS-Zu.js +0 -68
  27. package/dist/toolbar-12s-DzLbghpK.cjs +0 -70
  28. package/dist/useDataTable-12s-BHiDUubw-12s-CBeCwTe7.js +0 -61
  29. package/dist/useDataTable-12s-BHiDUubw-12s-Dgvt7XDk.cjs +0 -61
  30. package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs +0 -207
  31. package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js +0 -183
  32. package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js +0 -289
  33. package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs +0 -292
  34. package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-BoOHq3GB.js +0 -98
  35. package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-De6YHBba.cjs +0 -98
  36. package/dist/useDataTableFilter-12s-ZzbmWMin-12s-CWyBeFna.js +0 -74
  37. package/dist/useDataTableFilter-12s-ZzbmWMin-12s-lpjzZY3_.cjs +0 -74
  38. package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-BexjP6iO.js +0 -104
  39. package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-Bt8gojr9.cjs +0 -104
  40. package/dist/useDataTableRow-12s-CPYaDa1p-12s-4qkGoz-j.js +0 -30
  41. package/dist/useDataTableRow-12s-CPYaDa1p-12s-DG64uYjn.cjs +0 -30
  42. package/dist/useDataTableScroll-12s-BKDCr0en-12s-C7f2vHeG.js +0 -61
  43. package/dist/useDataTableScroll-12s-BKDCr0en-12s-CUvUYMtt.cjs +0 -61
  44. package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-B-65V6gH.js +0 -37
  45. package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-DhVfN2Hq.cjs +0 -37
  46. package/dist/useDataTableSelection-12s-BIDtiRQq-12s-IS__VAnU.cjs +0 -71
  47. package/dist/useDataTableSelection-12s-BIDtiRQq-12s-O6M_BhrH.js +0 -71
  48. package/dist/useDataTableSort-12s-DvJYtmeS-12s-C5VGnsq4.cjs +0 -78
  49. package/dist/useDataTableSort-12s-DvJYtmeS-12s-DABSNt6U.js +0 -78
@@ -1,149 +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 Menu12s = require('./Menu-12s-A4lEc__n.cjs');
12
- var jsxRuntime = require('react/jsx-runtime');
13
- var React = require('react');
14
- var DataTable12s = require('./DataTable-12s-Gpv6I4J8.cjs');
15
- var columnLayout12s = require('./column-layout-12s-k2fZYeKl.cjs');
16
- var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs');
17
- var useDataTableColumnCalc12sDTQQTtEJ12s = require('./useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs');
18
-
19
- function _interopNamespace(e) {
20
- if (e && e.__esModule) return e;
21
- var n = Object.create(null);
22
- if (e) {
23
- Object.keys(e).forEach(function (k) {
24
- if (k !== 'default') {
25
- var d = Object.getOwnPropertyDescriptor(e, k);
26
- Object.defineProperty(n, k, d.get ? d : {
27
- enumerable: true,
28
- get: function () { return e[k]; }
29
- });
30
- }
31
- });
32
- }
33
- n.default = e;
34
- return n;
35
- }
36
-
37
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
38
-
39
- function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast }) {
40
- const effective = columnLayout12s.useEffectiveColumns(columns);
41
- return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
42
- children: effective.map(({ column }, index)=>{
43
- const isFirst = index === 0;
44
- const isLast = index === effective.length - 1;
45
- const sticky = columnLayout12s.stickyProps({
46
- selectable,
47
- stickyFirst,
48
- stickyLast,
49
- isSelectionCell: false,
50
- isFirst,
51
- isLast
52
- });
53
- return /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableFooterCell, {
54
- "data-sticky": sticky["data-sticky"],
55
- "data-sticky-edge": sticky["data-sticky-edge"],
56
- "data-sticky-edge-end": sticky["data-sticky-edge-end"],
57
- style: sticky.style,
58
- children: column.summary && /*#__PURE__*/ jsxRuntime.jsx(ColumnCalcCell, {
59
- column: column,
60
- rows: rows,
61
- numeric: column.type === "number" || column.type === "currency",
62
- align: column.type === "number" || column.type === "currency" ? "right" : "left"
63
- })
64
- }, column.key);
65
- })
66
- });
67
- }
68
- function formatCalcValue(value) {
69
- return value.toLocaleString(undefined, {
70
- maximumFractionDigits: 2
71
- });
72
- }
73
- /**
74
- * One ColumnCalc footer cell -- a click-anywhere-in-the-cell trigger (crisp's own
75
- * measured 246x36 hit target, `columncalc.recipe.ts`) that reads "Add calculation"
76
- * until an op is picked, then shows the computed value with its operation name beside
77
- * it. The math itself (`computeColumnCalc`) is headless and independently tested;
78
- * this component only resolves this column's own values and renders.
79
- */ function ColumnCalcCell({ column, rows, numeric, align }) {
80
- const { getColumnCalcOp, setColumnCalcOp } = DataTable12sZml1x9Kr12s.useDataTableContext();
81
- const op = getColumnCalcOp(column.key) ?? column.summaryDefaultOp;
82
- const values = React__namespace.useMemo(()=>rows.map((row)=>DataTable12s.getColumnValue(column, row)), [
83
- rows,
84
- column
85
- ]);
86
- const result = React__namespace.useMemo(()=>op ? useDataTableColumnCalc12sDTQQTtEJ12s.computeColumnCalc(values, op) : null, [
87
- values,
88
- op
89
- ]);
90
- const ops = [
91
- ...useDataTableColumnCalc12sDTQQTtEJ12s.DATA_TABLE_UNIVERSAL_CALC_OPS,
92
- ...numeric ? useDataTableColumnCalc12sDTQQTtEJ12s.DATA_TABLE_NUMERIC_CALC_OPS : []
93
- ];
94
- return /*#__PURE__*/ jsxRuntime.jsxs(Menu12s.MenuRoot, {
95
- children: [
96
- /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuTrigger, {
97
- asChild: true,
98
- children: /*#__PURE__*/ jsxRuntime.jsx("button", {
99
- type: "button",
100
- className: "seed-data-table-column-calc-trigger",
101
- "data-align": align === "right" ? "right" : undefined,
102
- children: op && result !== null ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
103
- children: [
104
- /*#__PURE__*/ jsxRuntime.jsx("span", {
105
- className: "seed-data-table-column-calc-value",
106
- children: formatCalcValue(result)
107
- }),
108
- /*#__PURE__*/ jsxRuntime.jsx("span", {
109
- className: "seed-data-table-column-calc-op",
110
- children: useDataTableColumnCalc12sDTQQTtEJ12s.DATA_TABLE_CALC_LABEL[op]
111
- }),
112
- /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconChevronDownLine_default, {
113
- size: 14
114
- })
115
- ]
116
- }) : /*#__PURE__*/ jsxRuntime.jsx("span", {
117
- className: "seed-data-table-column-calc-placeholder",
118
- children: "Add calculation"
119
- })
120
- })
121
- }),
122
- /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuPositioner, {
123
- children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuContent, {
124
- style: {
125
- minWidth: 160
126
- },
127
- children: /*#__PURE__*/ jsxRuntime.jsxs(Menu12s.MenuScrollArea, {
128
- children: [
129
- ops.map((candidate)=>/*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItem, {
130
- onClick: ()=>setColumnCalcOp(column.key, candidate),
131
- children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItemLabel, {
132
- children: useDataTableColumnCalc12sDTQQTtEJ12s.DATA_TABLE_CALC_LABEL[candidate]
133
- })
134
- }, candidate)),
135
- op && /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItem, {
136
- onClick: ()=>setColumnCalcOp(column.key, undefined),
137
- children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItemLabel, {
138
- children: "Clear"
139
- })
140
- })
141
- ]
142
- })
143
- })
144
- })
145
- ]
146
- });
147
- }
148
-
149
- exports.ColumnCalcCells = ColumnCalcCells;
@@ -1,99 +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 * as React from 'react';
12
- import { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js';
13
-
14
- /** The subset of `useDataTableContext()` every "resolve which columns to actually
15
- * render, in what order, under what label/width" helper below needs -- narrowed so
16
- * each helper's own signature documents exactly what it reads, rather than the whole
17
- * table API. */ function useEffectiveColumns(columns) {
18
- const { visibleColumnOrder, getColumnLabel, getColumnWidth } = useDataTableContext();
19
- return React.useMemo(()=>{
20
- const byKey = new Map(columns.map((column)=>[
21
- column.key,
22
- column
23
- ]));
24
- return visibleColumnOrder.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>({
25
- column,
26
- label: getColumnLabel(column.key, column.header),
27
- width: getColumnWidth(column.key) ?? column.width
28
- }));
29
- }, [
30
- columns,
31
- visibleColumnOrder,
32
- getColumnLabel,
33
- getColumnWidth
34
- ]);
35
- }
36
- /** Sticky positioning for the leading/trailing visible cell of a row (header, body, or
37
- * footer) -- `stickyFirst` pins the SELECTION cell when the table has one, plus the
38
- * first data column; `stickyLast` always pins the last VISIBLE data column. Only the
39
- * OUTERMOST sticky cell on each side gets `data-sticky-edge(-end)` -- that's the one
40
- * whose shadow should reveal on scroll, not every sticky cell.
41
- *
42
- * When both a selection column and a sticky first data column are present, the edge
43
- * is the data column (e.g. Company), not the 40px selection cell: the data column is
44
- * ALSO `position: sticky`, sitting immediately to its right, so a shadow cast from the
45
- * selection cell's trailing edge would render directly underneath that opaque sticky
46
- * cell and never actually be visible. Putting `data-sticky-edge` on the trailing-most
47
- * sticky-left cell is what makes the shadow render somewhere unobstructed -- past the
48
- * whole pinned group, not between two members of it. */ function stickyProps(options) {
49
- const { selectable, stickyFirst, stickyLast, isSelectionCell, isFirst, isLast } = options;
50
- if (stickyFirst && isSelectionCell) {
51
- // Still sticky either way. The edge marker only belongs here when there is no
52
- // sticky first DATA column to hand it to instead (i.e. no columns at all) --
53
- // otherwise that data column is the true trailing edge of the pinned group.
54
- return selectable ? {
55
- "data-sticky": "",
56
- style: {
57
- insetInlineStart: 0
58
- }
59
- } : {
60
- "data-sticky": "",
61
- "data-sticky-edge": "",
62
- style: {
63
- insetInlineStart: 0
64
- }
65
- };
66
- }
67
- if (stickyFirst && isFirst && !selectable) {
68
- return {
69
- "data-sticky": "",
70
- "data-sticky-edge": "",
71
- style: {
72
- insetInlineStart: 0
73
- }
74
- };
75
- }
76
- if (stickyFirst && isFirst && selectable) {
77
- // The trailing edge of the pinned group -- past the 40px selection cell, so this
78
- // is where the scroll shadow actually renders unobstructed.
79
- return {
80
- "data-sticky": "",
81
- "data-sticky-edge": "",
82
- style: {
83
- insetInlineStart: 40
84
- }
85
- };
86
- }
87
- if (stickyLast && isLast) {
88
- return {
89
- "data-sticky": "",
90
- "data-sticky-edge-end": "",
91
- style: {
92
- insetInlineEnd: 0
93
- }
94
- };
95
- }
96
- return {};
97
- }
98
-
99
- export { stickyProps as s, useEffectiveColumns as u };
@@ -1,120 +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 React = require('react');
12
- var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs');
13
-
14
- function _interopNamespace(e) {
15
- if (e && e.__esModule) return e;
16
- var n = Object.create(null);
17
- if (e) {
18
- Object.keys(e).forEach(function (k) {
19
- if (k !== 'default') {
20
- var d = Object.getOwnPropertyDescriptor(e, k);
21
- Object.defineProperty(n, k, d.get ? d : {
22
- enumerable: true,
23
- get: function () { return e[k]; }
24
- });
25
- }
26
- });
27
- }
28
- n.default = e;
29
- return n;
30
- }
31
-
32
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
-
34
- /** The subset of `useDataTableContext()` every "resolve which columns to actually
35
- * render, in what order, under what label/width" helper below needs -- narrowed so
36
- * each helper's own signature documents exactly what it reads, rather than the whole
37
- * table API. */ function useEffectiveColumns(columns) {
38
- const { visibleColumnOrder, getColumnLabel, getColumnWidth } = DataTable12sZml1x9Kr12s.useDataTableContext();
39
- return React__namespace.useMemo(()=>{
40
- const byKey = new Map(columns.map((column)=>[
41
- column.key,
42
- column
43
- ]));
44
- return visibleColumnOrder.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>({
45
- column,
46
- label: getColumnLabel(column.key, column.header),
47
- width: getColumnWidth(column.key) ?? column.width
48
- }));
49
- }, [
50
- columns,
51
- visibleColumnOrder,
52
- getColumnLabel,
53
- getColumnWidth
54
- ]);
55
- }
56
- /** Sticky positioning for the leading/trailing visible cell of a row (header, body, or
57
- * footer) -- `stickyFirst` pins the SELECTION cell when the table has one, plus the
58
- * first data column; `stickyLast` always pins the last VISIBLE data column. Only the
59
- * OUTERMOST sticky cell on each side gets `data-sticky-edge(-end)` -- that's the one
60
- * whose shadow should reveal on scroll, not every sticky cell.
61
- *
62
- * When both a selection column and a sticky first data column are present, the edge
63
- * is the data column (e.g. Company), not the 40px selection cell: the data column is
64
- * ALSO `position: sticky`, sitting immediately to its right, so a shadow cast from the
65
- * selection cell's trailing edge would render directly underneath that opaque sticky
66
- * cell and never actually be visible. Putting `data-sticky-edge` on the trailing-most
67
- * sticky-left cell is what makes the shadow render somewhere unobstructed -- past the
68
- * whole pinned group, not between two members of it. */ function stickyProps(options) {
69
- const { selectable, stickyFirst, stickyLast, isSelectionCell, isFirst, isLast } = options;
70
- if (stickyFirst && isSelectionCell) {
71
- // Still sticky either way. The edge marker only belongs here when there is no
72
- // sticky first DATA column to hand it to instead (i.e. no columns at all) --
73
- // otherwise that data column is the true trailing edge of the pinned group.
74
- return selectable ? {
75
- "data-sticky": "",
76
- style: {
77
- insetInlineStart: 0
78
- }
79
- } : {
80
- "data-sticky": "",
81
- "data-sticky-edge": "",
82
- style: {
83
- insetInlineStart: 0
84
- }
85
- };
86
- }
87
- if (stickyFirst && isFirst && !selectable) {
88
- return {
89
- "data-sticky": "",
90
- "data-sticky-edge": "",
91
- style: {
92
- insetInlineStart: 0
93
- }
94
- };
95
- }
96
- if (stickyFirst && isFirst && selectable) {
97
- // The trailing edge of the pinned group -- past the 40px selection cell, so this
98
- // is where the scroll shadow actually renders unobstructed.
99
- return {
100
- "data-sticky": "",
101
- "data-sticky-edge": "",
102
- style: {
103
- insetInlineStart: 40
104
- }
105
- };
106
- }
107
- if (stickyLast && isLast) {
108
- return {
109
- "data-sticky": "",
110
- "data-sticky-edge-end": "",
111
- style: {
112
- insetInlineEnd: 0
113
- }
114
- };
115
- }
116
- return {};
117
- }
118
-
119
- exports.stickyProps = stickyProps;
120
- exports.useEffectiveColumns = useEffectiveColumns;