@versini/ui-datagrid 0.4.4 → 0.4.6
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/DataGrid/DataGrid.js +1 -1
- package/dist/DataGrid/DataGridContext.js +1 -1
- package/dist/DataGrid/DataGridTypes.d.ts +0 -5
- package/dist/DataGrid/DataGridTypes.js +1 -1
- package/dist/DataGrid/index.js +1 -1
- package/dist/DataGridAnimated/AnimatedWrapper.js +1 -1
- package/dist/DataGridAnimated/index.js +1 -1
- package/dist/DataGridAnimated/useAnimatedHeight.js +1 -1
- package/dist/DataGridBody/DataGridBody.js +1 -1
- package/dist/DataGridBody/getBodyClass.js +1 -1
- package/dist/DataGridBody/index.js +1 -1
- package/dist/DataGridBody/useColumnMeasurement.js +1 -1
- package/dist/DataGridCell/DataGridCell.js +1 -1
- package/dist/DataGridCell/index.js +1 -1
- package/dist/DataGridCellSort/DataGridCellSort.js +1 -1
- package/dist/DataGridCellSort/index.js +1 -1
- package/dist/DataGridConstants/DataGridConstants.js +1 -1
- package/dist/DataGridConstants/index.js +1 -1
- package/dist/DataGridFooter/DataGridFooter.js +1 -1
- package/dist/DataGridFooter/index.js +1 -1
- package/dist/DataGridHeader/DataGridHeader.js +1 -1
- package/dist/DataGridHeader/index.js +1 -1
- package/dist/DataGridInfinite/DataGridInfiniteBody.js +3 -4
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridRow/DataGridRow.js +2 -3
- package/dist/DataGridRow/index.js +1 -1
- package/dist/DataGridSorting/index.js +1 -1
- package/dist/DataGridSorting/sortingUtils.js +1 -1
- package/dist/utilities/classes.d.ts +1 -16
- package/dist/utilities/classes.js +16 -63
- package/package.json +3 -3
|
@@ -268,11 +268,6 @@ export type DataGridContextValue = {
|
|
|
268
268
|
* sticky header/footer columns with body columns.
|
|
269
269
|
*/
|
|
270
270
|
setMeasuredColumnWidths?: (widths: number[]) => void;
|
|
271
|
-
/**
|
|
272
|
-
* Row index for explicit odd/even styling. Used by DataGridInfiniteBody where
|
|
273
|
-
* CSS :nth-child selectors don't work due to wrapper elements.
|
|
274
|
-
*/
|
|
275
|
-
rowIndex?: number;
|
|
276
271
|
/**
|
|
277
272
|
* Whether this is the last row (for explicit border removal). Used by
|
|
278
273
|
* DataGridInfiniteBody where CSS :last-child doesn't work.
|
package/dist/DataGrid/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.6
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -250,8 +250,8 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
|
|
|
250
250
|
/**
|
|
251
251
|
* Render items with marker at the correct position. Each row gets a
|
|
252
252
|
* data-row-index attribute for scrollToIndex functionality. Each row is
|
|
253
|
-
* wrapped with a context provider that includes the
|
|
254
|
-
*
|
|
253
|
+
* wrapped with a context provider that includes the isLastRow flag for proper
|
|
254
|
+
* border removal (CSS :last-child doesn't work with wrappers).
|
|
255
255
|
*/ const renderedContent = useMemo(()=>{
|
|
256
256
|
const result = [];
|
|
257
257
|
// Determine the actual last visible index (for border styling).
|
|
@@ -278,7 +278,6 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
|
|
|
278
278
|
*/ result.push(/*#__PURE__*/ jsx(DataGridContext.Provider, {
|
|
279
279
|
value: {
|
|
280
280
|
...bodyContextBase,
|
|
281
|
-
rowIndex: i,
|
|
282
281
|
isLastRow
|
|
283
282
|
},
|
|
284
283
|
children: /*#__PURE__*/ jsx("div", {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.6
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -31,7 +31,7 @@ import { getRowClasses } from "../utilities/classes.js";
|
|
|
31
31
|
// Count the number of direct children to determine column count.
|
|
32
32
|
const columnCount = react.Children.count(children);
|
|
33
33
|
return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
|
|
34
|
-
children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths,
|
|
34
|
+
children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths, isLastRow })=>{
|
|
35
35
|
/**
|
|
36
36
|
* Determine if this row is inside a sticky header/footer. Sticky elements
|
|
37
37
|
* are absolutely positioned and outside the main grid flow, so they can't
|
|
@@ -89,7 +89,6 @@ import { getRowClasses } from "../utilities/classes.js";
|
|
|
89
89
|
mode,
|
|
90
90
|
className,
|
|
91
91
|
cellWrapper,
|
|
92
|
-
rowIndex,
|
|
93
92
|
isLastRow
|
|
94
93
|
}),
|
|
95
94
|
style: {
|
|
@@ -40,20 +40,6 @@ export declare const getBorderClasses: ({ mode }: {
|
|
|
40
40
|
export declare const getBlurClasses: ({ blurEffect }: {
|
|
41
41
|
blurEffect?: BlurEffect;
|
|
42
42
|
}) => string;
|
|
43
|
-
/**
|
|
44
|
-
* Shadow classes for sticky headers (downward glow).
|
|
45
|
-
*/
|
|
46
|
-
export declare const getStickyHeaderShadowClasses: ({ mode, stickyHeader, }: {
|
|
47
|
-
mode: ThemeMode;
|
|
48
|
-
stickyHeader?: boolean;
|
|
49
|
-
}) => string;
|
|
50
|
-
/**
|
|
51
|
-
* Shadow classes for sticky footers (upward glow).
|
|
52
|
-
*/
|
|
53
|
-
export declare const getStickyFooterShadowClasses: ({ mode, stickyFooter, }: {
|
|
54
|
-
mode: ThemeMode;
|
|
55
|
-
stickyFooter?: boolean;
|
|
56
|
-
}) => string;
|
|
57
43
|
/**
|
|
58
44
|
* ============================================================================
|
|
59
45
|
* Composite Class Generators (component-specific combinations)
|
|
@@ -128,11 +114,10 @@ export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEff
|
|
|
128
114
|
* DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
|
|
129
115
|
* :nth-child selectors, which don't work with wrapper elements.
|
|
130
116
|
*/
|
|
131
|
-
export declare const getRowClasses: ({ mode, className, cellWrapper,
|
|
117
|
+
export declare const getRowClasses: ({ mode, className, cellWrapper, isLastRow, }: {
|
|
132
118
|
mode: ThemeMode;
|
|
133
119
|
cellWrapper?: CellWrapperType;
|
|
134
120
|
className?: string;
|
|
135
|
-
rowIndex?: number;
|
|
136
121
|
isLastRow?: boolean;
|
|
137
122
|
}) => string;
|
|
138
123
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.6
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -41,13 +41,13 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
41
41
|
*/ const getHeaderFooterBackgroundClasses = ({ mode, hasBlur, sticky })=>clsx({
|
|
42
42
|
// Semi-transparent for blur effect.
|
|
43
43
|
"bg-surface-darkest/50": hasBlur && sticky && (mode === "dark" || mode === "system"),
|
|
44
|
-
"bg-surface-
|
|
45
|
-
"dark:bg-surface-
|
|
44
|
+
"bg-surface-medium/50": hasBlur && sticky && (mode === "light" || mode === "alt-system"),
|
|
45
|
+
"dark:bg-surface-medium/50": hasBlur && sticky && mode === "system",
|
|
46
46
|
"dark:bg-surface-darkest/50": hasBlur && sticky && mode === "alt-system",
|
|
47
47
|
// Solid backgrounds.
|
|
48
48
|
"bg-surface-darkest": !hasBlur && (mode === "dark" || mode === "system"),
|
|
49
|
-
"bg-surface-light": !hasBlur && (mode === "light" || mode === "alt-system"),
|
|
50
|
-
"dark:bg-surface-light": !hasBlur && mode === "system",
|
|
49
|
+
"bg-surface-medium-light": !hasBlur && (mode === "light" || mode === "alt-system"),
|
|
50
|
+
"dark:bg-surface-medium-light": !hasBlur && mode === "system",
|
|
51
51
|
"dark:bg-surface-darkest": !hasBlur && mode === "alt-system"
|
|
52
52
|
});
|
|
53
53
|
/**
|
|
@@ -66,22 +66,6 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
66
66
|
"backdrop-blur-md": blurEffect === BlurEffects.MEDIUM,
|
|
67
67
|
"backdrop-blur-lg": blurEffect === BlurEffects.LARGE
|
|
68
68
|
});
|
|
69
|
-
/**
|
|
70
|
-
* Shadow classes for sticky headers (downward glow).
|
|
71
|
-
*/ const getStickyHeaderShadowClasses = ({ mode, stickyHeader })=>clsx({
|
|
72
|
-
"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "dark",
|
|
73
|
-
"shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "system",
|
|
74
|
-
"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "light",
|
|
75
|
-
"shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "alt-system"
|
|
76
|
-
});
|
|
77
|
-
/**
|
|
78
|
-
* Shadow classes for sticky footers (upward glow).
|
|
79
|
-
*/ const getStickyFooterShadowClasses = ({ mode, stickyFooter })=>clsx({
|
|
80
|
-
"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "dark",
|
|
81
|
-
"shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "system",
|
|
82
|
-
"shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": stickyFooter && mode === "light",
|
|
83
|
-
"shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": stickyFooter && mode === "alt-system"
|
|
84
|
-
});
|
|
85
69
|
/**
|
|
86
70
|
* ============================================================================
|
|
87
71
|
* Composite Class Generators (component-specific combinations)
|
|
@@ -143,7 +127,7 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
143
127
|
mode
|
|
144
128
|
}), className);
|
|
145
129
|
}
|
|
146
|
-
return clsx("flex flex-col", {
|
|
130
|
+
return clsx("flex flex-col", "border-b border-table-medium shadow-md", {
|
|
147
131
|
"absolute left-0 right-0 z-20 top-0 rounded-t-lg": stickyHeader
|
|
148
132
|
}, getHeaderFooterBackgroundClasses({
|
|
149
133
|
mode,
|
|
@@ -167,12 +151,9 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
167
151
|
return clsx("contents", className);
|
|
168
152
|
}
|
|
169
153
|
const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
|
|
170
|
-
return clsx("flex flex-col", {
|
|
171
|
-
"absolute left-0 right-0 z-20 bottom-0 rounded-b-lg": stickyFooter
|
|
172
|
-
},
|
|
173
|
-
mode,
|
|
174
|
-
stickyFooter
|
|
175
|
-
}), getHeaderFooterBackgroundClasses({
|
|
154
|
+
return clsx("flex flex-col", "border-t border-table-medium", {
|
|
155
|
+
"absolute left-0 right-0 z-20 bottom-0 rounded-b-lg shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]": stickyFooter
|
|
156
|
+
}, getHeaderFooterBackgroundClasses({
|
|
176
157
|
mode,
|
|
177
158
|
hasBlur,
|
|
178
159
|
sticky: Boolean(stickyFooter)
|
|
@@ -184,53 +165,25 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
184
165
|
* Generates classes for DataGridRow. When rowIndex is provided (e.g., from
|
|
185
166
|
* DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
|
|
186
167
|
* :nth-child selectors, which don't work with wrapper elements.
|
|
187
|
-
*/ const getRowClasses = ({ mode, className, cellWrapper,
|
|
168
|
+
*/ const getRowClasses = ({ mode, className, cellWrapper, isLastRow })=>{
|
|
188
169
|
const layoutClass = "group grid items-center";
|
|
189
170
|
if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
|
|
190
171
|
return clsx(layoutClass, className);
|
|
191
172
|
}
|
|
192
|
-
/**
|
|
193
|
-
* When rowIndex is provided, use explicit classes instead of CSS :nth-child
|
|
194
|
-
* selectors. CSS :nth-child doesn't work correctly when rows are wrapped
|
|
195
|
-
* (e.g., in DataGridInfiniteBody).
|
|
196
|
-
*/ const hasExplicitIndex = rowIndex !== undefined;
|
|
197
|
-
const isOdd = hasExplicitIndex && rowIndex % 2 === 0; // 0-based index: 0,2,4 are visually "odd" rows (1st, 3rd, 5th)
|
|
198
|
-
const isEven = hasExplicitIndex && rowIndex % 2 === 1;
|
|
199
173
|
/**
|
|
200
174
|
* Border classes: use explicit border-0 for last row when isLastRow is
|
|
201
175
|
* provided, otherwise fall back to CSS :last-child selector.
|
|
202
|
-
*/ const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent" // Last row: transparent border to maintain spacing
|
|
176
|
+
*/ const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent dark:border-b-transparent" // Last row: transparent border to maintain spacing
|
|
203
177
|
: "border-b" : "border-b last:border-0"; // Fallback to CSS :last-child
|
|
204
|
-
return clsx(layoutClass, borderClasses, getBorderClasses({
|
|
178
|
+
return clsx(layoutClass, borderClasses, "hover:bg-surface-medium hover:text-copy-light", getBorderClasses({
|
|
205
179
|
mode
|
|
206
|
-
}),
|
|
207
|
-
// Explicit odd/even when rowIndex is provided.
|
|
208
|
-
"bg-table-dark-odd": hasExplicitIndex && isOdd && mode === "dark",
|
|
209
|
-
"bg-table-dark-even": hasExplicitIndex && isEven && mode === "dark",
|
|
210
|
-
"bg-table-light-odd": hasExplicitIndex && isOdd && mode === "light",
|
|
211
|
-
"bg-table-light-even": hasExplicitIndex && isEven && mode === "light",
|
|
212
|
-
// System mode with explicit index.
|
|
213
|
-
"bg-table-dark-odd dark:bg-table-light-odd": hasExplicitIndex && isOdd && mode === "system",
|
|
214
|
-
"bg-table-dark-even dark:bg-table-light-even": hasExplicitIndex && isEven && mode === "system",
|
|
215
|
-
// Alt-system mode with explicit index.
|
|
216
|
-
"bg-table-light-odd dark:bg-table-dark-odd": hasExplicitIndex && isOdd && mode === "alt-system",
|
|
217
|
-
"bg-table-light-even dark:bg-table-dark-even": hasExplicitIndex && isEven && mode === "alt-system",
|
|
218
|
-
// CSS :nth-child selectors (original behavior when rowIndex not provided).
|
|
219
|
-
"odd:bg-table-dark-odd even:bg-table-dark-even": !hasExplicitIndex && mode === "dark",
|
|
220
|
-
"odd:bg-table-light-odd even:bg-table-light-even": !hasExplicitIndex && mode === "light",
|
|
221
|
-
"odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": !hasExplicitIndex && mode === "system",
|
|
222
|
-
"odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": !hasExplicitIndex && mode === "alt-system",
|
|
223
|
-
// Hover effects (same for both modes).
|
|
224
|
-
"hover:bg-table-dark-hover": mode === "dark",
|
|
225
|
-
"hover:bg-table-light-hover": mode === "light",
|
|
226
|
-
"hover:bg-table-dark-hover dark:hover:bg-table-light-hover": mode === "system",
|
|
227
|
-
"hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
|
|
228
|
-
}, className);
|
|
180
|
+
}), className);
|
|
229
181
|
};
|
|
230
182
|
/**
|
|
231
183
|
* Generates classes for DataGridCell.
|
|
232
184
|
*/ const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight })=>{
|
|
233
185
|
const isHeader = cellWrapper === CellWrapper.HEADER;
|
|
186
|
+
const isFooter = cellWrapper === CellWrapper.FOOTER;
|
|
234
187
|
return clsx(// Base padding.
|
|
235
188
|
{
|
|
236
189
|
"px-2 py-1": compact,
|
|
@@ -242,7 +195,7 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
242
195
|
"text-right justify-end": align === "right"
|
|
243
196
|
}, // Header/footer specific styles.
|
|
244
197
|
{
|
|
245
|
-
"font-
|
|
198
|
+
"font-bold": isHeader || isFooter
|
|
246
199
|
}, // Active row indicator.
|
|
247
200
|
"first:group-data-[active]:relative", "first:group-data-[active]:before:absolute first:group-data-[active]:before:left-0 first:group-data-[active]:before:top-0 first:group-data-[active]:before:bottom-0 first:group-data-[active]:before:w-1", "first:group-data-[active]:self-stretch first:group-data-[active]:flex first:group-data-[active]:items-center", // Active indicator color based on theme mode.
|
|
248
201
|
{
|
|
@@ -273,4 +226,4 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
273
226
|
return "gridcell";
|
|
274
227
|
};
|
|
275
228
|
|
|
276
|
-
export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses,
|
|
229
|
+
export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses, getSurfaceBackgroundClasses, getTextColorClasses };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-datagrid",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
},
|
|
87
87
|
"dependencies": {
|
|
88
88
|
"@tailwindcss/typography": "0.5.19",
|
|
89
|
-
"@versini/ui-button": "11.3.
|
|
89
|
+
"@versini/ui-button": "11.3.3",
|
|
90
90
|
"@versini/ui-icons": "4.16.1",
|
|
91
91
|
"clsx": "2.1.1",
|
|
92
92
|
"tailwindcss": "4.1.18"
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
"sideEffects": [
|
|
95
95
|
"**/*.css"
|
|
96
96
|
],
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "b46abc9c2e87588d6c9b438f70e68a4ffd05c28c"
|
|
98
98
|
}
|