@versini/ui-datagrid 0.4.2 → 0.4.4
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.d.ts +1 -1
- package/dist/DataGrid/DataGrid.js +10 -12
- package/dist/DataGrid/DataGridContext.js +1 -1
- package/dist/DataGrid/DataGridTypes.d.ts +5 -3
- 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 +1 -1
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridRow/DataGridRow.js +1 -1
- 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 +9 -9
- package/dist/utilities/classes.js +14 -14
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { DataGridProps } from "./DataGridTypes";
|
|
2
|
-
export declare const DataGrid: ({ className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight,
|
|
2
|
+
export declare const DataGrid: ({ className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, loading, columns, ...rest }: DataGridProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.4
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -27,7 +27,7 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
27
27
|
|
|
28
28
|
/* =============================================================================
|
|
29
29
|
* DataGrid (main component)
|
|
30
|
-
* ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight,
|
|
30
|
+
* ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, loading = false, columns, ...rest })=>{
|
|
31
31
|
/**
|
|
32
32
|
* Track registered header/footer components via context registration. Uses
|
|
33
33
|
* counter-based tracking to properly handle multiple instances. Components
|
|
@@ -75,7 +75,7 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
75
75
|
wrapperClassName,
|
|
76
76
|
stickyHeader: effectiveStickyHeader,
|
|
77
77
|
stickyFooter: effectiveStickyFooter,
|
|
78
|
-
|
|
78
|
+
loading: Boolean(loading),
|
|
79
79
|
hasColumns: Boolean(columns)
|
|
80
80
|
}), [
|
|
81
81
|
mode,
|
|
@@ -83,7 +83,7 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
83
83
|
wrapperClassName,
|
|
84
84
|
effectiveStickyHeader,
|
|
85
85
|
effectiveStickyFooter,
|
|
86
|
-
|
|
86
|
+
loading,
|
|
87
87
|
columns
|
|
88
88
|
]);
|
|
89
89
|
const contextValue = useMemo(()=>({
|
|
@@ -146,26 +146,24 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
146
146
|
...rest,
|
|
147
147
|
children: children
|
|
148
148
|
});
|
|
149
|
+
const loadingText = typeof loading === "string" ? loading : loading ? "Loading..." : null;
|
|
149
150
|
return /*#__PURE__*/ jsx(DataGridContext.Provider, {
|
|
150
151
|
value: contextValue,
|
|
151
152
|
children: /*#__PURE__*/ jsxs("div", {
|
|
152
153
|
className: classes.inner,
|
|
153
154
|
children: [
|
|
154
|
-
|
|
155
|
+
loading && /*#__PURE__*/ jsxs(Fragment, {
|
|
155
156
|
children: [
|
|
156
157
|
/*#__PURE__*/ jsx("div", {
|
|
157
158
|
className: classes.overlay,
|
|
158
159
|
"aria-hidden": "true"
|
|
159
160
|
}),
|
|
160
161
|
/*#__PURE__*/ jsx("div", {
|
|
161
|
-
className: classes.
|
|
162
|
-
children: /*#__PURE__*/ jsx("
|
|
163
|
-
className: classes.
|
|
162
|
+
className: classes.loadingWrapper,
|
|
163
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
164
|
+
className: classes.loadingText,
|
|
164
165
|
role: "status",
|
|
165
|
-
children:
|
|
166
|
-
className: "sr-only",
|
|
167
|
-
children: "Loading..."
|
|
168
|
-
})
|
|
166
|
+
children: loadingText
|
|
169
167
|
})
|
|
170
168
|
})
|
|
171
169
|
]
|
|
@@ -25,12 +25,14 @@ export type DataGridProps = {
|
|
|
25
25
|
*/
|
|
26
26
|
compact?: boolean;
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* When set, a frosty overlay will be placed above the data grid, blocking all
|
|
29
29
|
* interactions (sorting, scrolling, etc.). The content remains visible but
|
|
30
|
-
* slightly blurred with a
|
|
30
|
+
* slightly blurred with a loading message.
|
|
31
|
+
* - If `true`, displays "Loading..."
|
|
32
|
+
* - If a string, displays that string as the loading message
|
|
31
33
|
* @default false
|
|
32
34
|
*/
|
|
33
|
-
|
|
35
|
+
loading?: boolean | string;
|
|
34
36
|
/**
|
|
35
37
|
* The max height of the data grid. Required for sticky header/footer to work.
|
|
36
38
|
* Accepts any valid CSS max-height value.
|
package/dist/DataGrid/index.js
CHANGED
|
@@ -60,29 +60,29 @@ export declare const getStickyFooterShadowClasses: ({ mode, stickyFooter, }: {
|
|
|
60
60
|
* ============================================================================
|
|
61
61
|
*/
|
|
62
62
|
/**
|
|
63
|
-
*
|
|
63
|
+
* Loading text classes for loading state.
|
|
64
64
|
*/
|
|
65
|
-
export declare const
|
|
65
|
+
export declare const getLoadingTextClasses: ({ mode }: {
|
|
66
66
|
mode: ThemeMode;
|
|
67
67
|
}) => string;
|
|
68
68
|
/**
|
|
69
|
-
* Overlay classes for
|
|
69
|
+
* Overlay classes for loading state.
|
|
70
70
|
*/
|
|
71
71
|
export declare const getOverlayClasses: ({ mode }: {
|
|
72
72
|
mode: ThemeMode;
|
|
73
73
|
}) => {
|
|
74
74
|
inner: string;
|
|
75
75
|
overlay: string;
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
loadingWrapper: string;
|
|
77
|
+
loadingText: string;
|
|
78
78
|
};
|
|
79
79
|
/**
|
|
80
80
|
* Generates classes for the main DataGrid wrapper and grid.
|
|
81
81
|
*/
|
|
82
|
-
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter,
|
|
82
|
+
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading, hasColumns, }: {
|
|
83
83
|
mode: ThemeMode;
|
|
84
84
|
className?: string;
|
|
85
|
-
|
|
85
|
+
loading?: boolean;
|
|
86
86
|
hasColumns?: boolean;
|
|
87
87
|
stickyFooter?: boolean;
|
|
88
88
|
stickyHeader?: boolean;
|
|
@@ -90,8 +90,8 @@ export declare const getDataGridClasses: ({ mode, className, wrapperClassName, s
|
|
|
90
90
|
}) => {
|
|
91
91
|
overlay: string;
|
|
92
92
|
inner: string;
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
loadingWrapper: string;
|
|
94
|
+
loadingText: string;
|
|
95
95
|
wrapper: string;
|
|
96
96
|
scrollableContent: string;
|
|
97
97
|
grid: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.4.
|
|
2
|
+
@versini/ui-datagrid v0.4.4
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -87,38 +87,38 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
87
87
|
* Composite Class Generators (component-specific combinations)
|
|
88
88
|
* ============================================================================
|
|
89
89
|
*/ /**
|
|
90
|
-
*
|
|
91
|
-
*/ const
|
|
90
|
+
* Loading text classes for loading state.
|
|
91
|
+
*/ const getLoadingTextClasses = ({ mode })=>clsx("text-lg font-medium", {
|
|
92
92
|
"text-copy-dark": mode === "light",
|
|
93
93
|
"text-copy-light": mode === "dark",
|
|
94
94
|
"text-copy-dark dark:text-copy-light": mode === "alt-system",
|
|
95
95
|
"text-copy-light dark:text-copy-dark": mode === "system"
|
|
96
96
|
});
|
|
97
97
|
/**
|
|
98
|
-
* Overlay classes for
|
|
98
|
+
* Overlay classes for loading state.
|
|
99
99
|
*/ const getOverlayClasses = ({ mode })=>({
|
|
100
100
|
inner: "relative",
|
|
101
|
-
overlay: clsx("absolute inset-0 z-20 cursor-not-allowed", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
|
|
102
|
-
|
|
103
|
-
|
|
101
|
+
overlay: clsx("absolute inset-0 z-20 cursor-not-allowed rounded-lg", "backdrop-blur-xs bg-white/30 dark:bg-black/30"),
|
|
102
|
+
loadingWrapper: clsx("absolute z-30 top-0 left-0 right-0 h-[min(100%,100vh)]", "flex items-center justify-center", "pointer-events-none"),
|
|
103
|
+
loadingText: getLoadingTextClasses({
|
|
104
104
|
mode
|
|
105
105
|
})
|
|
106
106
|
});
|
|
107
107
|
/**
|
|
108
108
|
* Generates classes for the main DataGrid wrapper and grid.
|
|
109
|
-
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter,
|
|
110
|
-
const overlayClasses =
|
|
109
|
+
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading, hasColumns })=>{
|
|
110
|
+
const overlayClasses = loading ? getOverlayClasses({
|
|
111
111
|
mode
|
|
112
112
|
}) : null;
|
|
113
113
|
const hasSticky = stickyHeader || stickyFooter;
|
|
114
114
|
return {
|
|
115
115
|
overlay: overlayClasses?.overlay ?? "",
|
|
116
116
|
inner: overlayClasses?.inner ?? "",
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
loadingWrapper: overlayClasses?.loadingWrapper ?? "",
|
|
118
|
+
loadingText: overlayClasses?.loadingText ?? "",
|
|
119
119
|
wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
|
|
120
|
-
"overflow-x-auto": !hasSticky && !
|
|
121
|
-
"overflow-hidden flex flex-col": hasSticky ||
|
|
120
|
+
"overflow-x-auto": !hasSticky && !loading,
|
|
121
|
+
"overflow-hidden flex flex-col": hasSticky || loading
|
|
122
122
|
}, getSurfaceBackgroundClasses({
|
|
123
123
|
mode
|
|
124
124
|
}), getTextColorClasses({
|
|
@@ -273,4 +273,4 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
|
|
|
273
273
|
return "gridcell";
|
|
274
274
|
};
|
|
275
275
|
|
|
276
|
-
export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getOverlayClasses, getRowClasses,
|
|
276
|
+
export { getBlurClasses, getBorderClasses, getCaptionClasses, getCellClasses, getCellRole, getDataGridClasses, getFooterClasses, getHeaderClasses, getHeaderFooterBackgroundClasses, getLoadingTextClasses, getOverlayClasses, getRowClasses, getStickyFooterShadowClasses, getStickyHeaderShadowClasses, 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.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
"sideEffects": [
|
|
95
95
|
"**/*.css"
|
|
96
96
|
],
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "5bd6bc9cac4effc8224912be6e75a6bc3d7901b0"
|
|
98
98
|
}
|