@versini/ui-datagrid 0.6.0 → 0.8.0
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 +4 -6
- package/dist/DataGrid/DataGridContext.js +1 -1
- package/dist/DataGrid/DataGridTypes.d.ts +0 -10
- package/dist/DataGrid/DataGridTypes.js +1 -1
- package/dist/DataGrid/index.d.ts +1 -0
- 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.d.ts +1 -0
- 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.d.ts +1 -0
- package/dist/DataGridCell/index.js +1 -1
- package/dist/DataGridCellSort/ButtonSort.d.ts +8 -0
- package/dist/DataGridCellSort/ButtonSort.js +67 -0
- package/dist/DataGridCellSort/DataGridCellSort.d.ts +1 -1
- package/dist/DataGridCellSort/DataGridCellSort.js +12 -14
- package/dist/DataGridCellSort/index.d.ts +1 -0
- 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.d.ts +1 -0
- package/dist/DataGridFooter/index.js +1 -1
- package/dist/DataGridHeader/DataGridHeader.js +1 -1
- package/dist/DataGridHeader/index.d.ts +1 -0
- 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.d.ts +1 -0
- 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 -2
- package/dist/utilities/classes.js +2 -3
- package/package.json +3 -3
|
@@ -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, loading, columns,
|
|
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.
|
|
2
|
+
@versini/ui-datagrid v0.8.0
|
|
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, loading = false, columns,
|
|
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,16 +75,14 @@ import { DataGridContext } from "./DataGridContext.js";
|
|
|
75
75
|
wrapperClassName,
|
|
76
76
|
stickyHeader: effectiveStickyHeader,
|
|
77
77
|
stickyFooter: effectiveStickyFooter,
|
|
78
|
-
loading: Boolean(loading)
|
|
79
|
-
noBorder
|
|
78
|
+
loading: Boolean(loading)
|
|
80
79
|
}), [
|
|
81
80
|
mode,
|
|
82
81
|
className,
|
|
83
82
|
wrapperClassName,
|
|
84
83
|
effectiveStickyHeader,
|
|
85
84
|
effectiveStickyFooter,
|
|
86
|
-
loading
|
|
87
|
-
noBorder
|
|
85
|
+
loading
|
|
88
86
|
]);
|
|
89
87
|
const contextValue = useMemo(()=>({
|
|
90
88
|
mode,
|
|
@@ -78,11 +78,6 @@ export type DataGridProps = {
|
|
|
78
78
|
* @example ["200px", "1fr", "min-content"] - Fixed, flexible, and content-sized columns
|
|
79
79
|
*/
|
|
80
80
|
columns?: ReadonlyArray<DataGridColumnSize>;
|
|
81
|
-
/**
|
|
82
|
-
* Whether or not to render the DataGrid with a border.
|
|
83
|
-
* @default false
|
|
84
|
-
*/
|
|
85
|
-
noBorder?: boolean;
|
|
86
81
|
};
|
|
87
82
|
export type DataGridHeaderProps = {
|
|
88
83
|
/**
|
|
@@ -199,11 +194,6 @@ export type DataGridCellSortProps = {
|
|
|
199
194
|
* CSS class to apply to the cell.
|
|
200
195
|
*/
|
|
201
196
|
className?: string;
|
|
202
|
-
/**
|
|
203
|
-
* The focus mode for the sort button.
|
|
204
|
-
* @default "alt-system"
|
|
205
|
-
*/
|
|
206
|
-
focusMode?: ThemeMode;
|
|
207
197
|
/**
|
|
208
198
|
* The theme mode for the sort button.
|
|
209
199
|
* @default "alt-system"
|
package/dist/DataGrid/index.d.ts
CHANGED
package/dist/DataGrid/index.js
CHANGED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ButtonSortTypes } from "@versini/ui-types";
|
|
2
|
+
import { type BlurEffect, type ThemeMode } from "../DataGridConstants";
|
|
3
|
+
type ButtonSortProps = Pick<ButtonSortTypes.Props, "active" | "className" | "onClick" | "labelRight" | "children">;
|
|
4
|
+
export declare const ButtonSort: ({ active, className, onClick, labelRight, children, blurEffect, mode, }: ButtonSortProps & {
|
|
5
|
+
mode: ThemeMode;
|
|
6
|
+
blurEffect?: BlurEffect;
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
@versini/ui-datagrid v0.8.0
|
|
3
|
+
© 2026 gizmette.com
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import clsx from "clsx";
|
|
8
|
+
import { BlurEffects } from "../DataGridConstants/index.js";
|
|
9
|
+
import { getTextColorClassesForHeaderFooter } from "../utilities/classes.js";
|
|
10
|
+
|
|
11
|
+
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
12
|
+
|
|
13
|
+
;// CONCATENATED MODULE: external "clsx"
|
|
14
|
+
|
|
15
|
+
;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
|
|
16
|
+
|
|
17
|
+
;// CONCATENATED MODULE: external "../utilities/classes.js"
|
|
18
|
+
|
|
19
|
+
;// CONCATENATED MODULE: ./src/DataGridCellSort/ButtonSort.tsx
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
const getActiveIndicatorClasses = (active)=>{
|
|
25
|
+
if (!active) {
|
|
26
|
+
return "";
|
|
27
|
+
}
|
|
28
|
+
return clsx("relative", "focus-within:static", "focus-within:after:border-transparent", "after:absolute", "after:content-['']", "after:border-b-2", "after:-bottom-1", "after:left-0", "after:right-0", // the small border at the bottom of the button when it is active (sorted)
|
|
29
|
+
"after:border-table-light");
|
|
30
|
+
};
|
|
31
|
+
const ButtonSort = ({ active = false, className, onClick, labelRight, children, blurEffect, mode })=>{
|
|
32
|
+
const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
|
|
33
|
+
const buttonClasses = clsx(// Base styles
|
|
34
|
+
"flex items-center", // Size - small
|
|
35
|
+
"h-6 px-1 sm:px-2", // Font
|
|
36
|
+
"text-sm font-bold", // Radius - small
|
|
37
|
+
"rounded-xs", // Text color
|
|
38
|
+
getTextColorClassesForHeaderFooter({
|
|
39
|
+
mode,
|
|
40
|
+
hasBlur
|
|
41
|
+
}), // Focus styles
|
|
42
|
+
"focus:outline", "focus:outline-2", "focus:outline-offset-2", "focus:outline-focus-medium", // Hover styles
|
|
43
|
+
"hover:text-copy-light-hover", "hover:bg-action-darker-hover", // Active styles
|
|
44
|
+
"active:text-copy-medium-active", "active:bg-action-dark-active", // Custom className
|
|
45
|
+
className);
|
|
46
|
+
const wrapperClasses = getActiveIndicatorClasses(active);
|
|
47
|
+
return /*#__PURE__*/ jsx("div", {
|
|
48
|
+
className: wrapperClasses,
|
|
49
|
+
children: /*#__PURE__*/ jsxs("button", {
|
|
50
|
+
className: buttonClasses,
|
|
51
|
+
type: "button",
|
|
52
|
+
onClick: onClick,
|
|
53
|
+
children: [
|
|
54
|
+
/*#__PURE__*/ jsx("span", {
|
|
55
|
+
className: "text-copy-light",
|
|
56
|
+
children: children
|
|
57
|
+
}),
|
|
58
|
+
labelRight && /*#__PURE__*/ jsx("span", {
|
|
59
|
+
className: "pl-2",
|
|
60
|
+
children: labelRight
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
})
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export { ButtonSort };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { DataGridCellSortProps } from "../DataGrid/DataGridTypes";
|
|
2
|
-
export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName,
|
|
2
|
+
export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest }: DataGridCellSortProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.8.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { ButtonSort_private } from "@versini/ui-button/private";
|
|
8
7
|
import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
|
|
9
8
|
import clsx from "clsx";
|
|
10
9
|
import { DataGridContext } from "../DataGrid/DataGridContext.js";
|
|
11
10
|
import { getCellClasses } from "../utilities/classes.js";
|
|
11
|
+
import { ButtonSort } from "./ButtonSort.js";
|
|
12
12
|
|
|
13
13
|
;// CONCATENATED MODULE: external "react/jsx-runtime"
|
|
14
14
|
|
|
15
|
-
;// CONCATENATED MODULE: external "@versini/ui-button/private"
|
|
16
|
-
|
|
17
15
|
;// CONCATENATED MODULE: external "@versini/ui-icons"
|
|
18
16
|
|
|
19
17
|
;// CONCATENATED MODULE: external "clsx"
|
|
@@ -22,6 +20,8 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
22
20
|
|
|
23
21
|
;// CONCATENATED MODULE: external "../utilities/classes.js"
|
|
24
22
|
|
|
23
|
+
;// CONCATENATED MODULE: external "./ButtonSort.js"
|
|
24
|
+
|
|
25
25
|
;// CONCATENATED MODULE: ./src/DataGridCellSort/DataGridCellSort.tsx
|
|
26
26
|
|
|
27
27
|
|
|
@@ -31,7 +31,7 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
31
31
|
|
|
32
32
|
/* =============================================================================
|
|
33
33
|
* DataGridCellSort
|
|
34
|
-
* ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName,
|
|
34
|
+
* ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, align, ...rest })=>{
|
|
35
35
|
const isSorted = sortedCell === cellId;
|
|
36
36
|
const handleSort = ()=>{
|
|
37
37
|
if (onSort) {
|
|
@@ -43,18 +43,18 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
43
43
|
const getSortIcon = ()=>{
|
|
44
44
|
if (isSorted && sortDirection === "asc") {
|
|
45
45
|
return /*#__PURE__*/ jsx(IconSortUp, {
|
|
46
|
-
|
|
46
|
+
size: "size-4",
|
|
47
47
|
monotone: true
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
50
|
if (isSorted && sortDirection === "desc") {
|
|
51
51
|
return /*#__PURE__*/ jsx(IconSortDown, {
|
|
52
|
-
|
|
52
|
+
size: "size-4",
|
|
53
53
|
monotone: true
|
|
54
54
|
});
|
|
55
55
|
}
|
|
56
56
|
return /*#__PURE__*/ jsx(IconSort, {
|
|
57
|
-
|
|
57
|
+
size: "size-4",
|
|
58
58
|
monotone: true
|
|
59
59
|
});
|
|
60
60
|
};
|
|
@@ -68,7 +68,7 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
68
68
|
return "other";
|
|
69
69
|
};
|
|
70
70
|
return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
|
|
71
|
-
children: ({ mode, compact, cellWrapper })=>{
|
|
71
|
+
children: ({ mode, compact, cellWrapper, blurEffect })=>{
|
|
72
72
|
const mainClasses = getCellClasses({
|
|
73
73
|
cellWrapper,
|
|
74
74
|
className,
|
|
@@ -91,15 +91,13 @@ import { getCellClasses } from "../utilities/classes.js";
|
|
|
91
91
|
className: contentClasses,
|
|
92
92
|
children: [
|
|
93
93
|
slotLeft,
|
|
94
|
-
/*#__PURE__*/ jsx(
|
|
94
|
+
/*#__PURE__*/ jsx(ButtonSort, {
|
|
95
|
+
mode: mode,
|
|
96
|
+
blurEffect: blurEffect,
|
|
95
97
|
active: isSorted,
|
|
96
98
|
className: buttonClassName,
|
|
97
99
|
onClick: handleSort,
|
|
98
|
-
noBorder: true,
|
|
99
|
-
focusMode: focusMode,
|
|
100
|
-
mode: "light",
|
|
101
100
|
labelRight: children,
|
|
102
|
-
noBackground: true,
|
|
103
101
|
children: getSortIcon()
|
|
104
102
|
}),
|
|
105
103
|
slotRight
|
|
@@ -68,9 +68,8 @@ export declare const getOverlayClasses: ({ mode }: {
|
|
|
68
68
|
/**
|
|
69
69
|
* Generates classes for the main DataGrid wrapper and grid.
|
|
70
70
|
*/
|
|
71
|
-
export declare const getDataGridClasses: ({ mode,
|
|
71
|
+
export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading, }: {
|
|
72
72
|
mode: ThemeMode;
|
|
73
|
-
noBorder?: boolean;
|
|
74
73
|
className?: string;
|
|
75
74
|
loading?: boolean;
|
|
76
75
|
stickyFooter?: boolean;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.
|
|
2
|
+
@versini/ui-datagrid v0.8.0
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -95,7 +95,7 @@ const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>{
|
|
|
95
95
|
});
|
|
96
96
|
/**
|
|
97
97
|
* Generates classes for the main DataGrid wrapper and grid.
|
|
98
|
-
*/ const getDataGridClasses = ({ mode,
|
|
98
|
+
*/ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, loading })=>{
|
|
99
99
|
const overlayClasses = loading ? getOverlayClasses({
|
|
100
100
|
mode
|
|
101
101
|
}) : null;
|
|
@@ -106,7 +106,6 @@ const getTextColorClassesForHeaderFooter = ({ mode, hasBlur })=>{
|
|
|
106
106
|
loadingWrapper: overlayClasses?.loadingWrapper ?? "",
|
|
107
107
|
loadingText: overlayClasses?.loadingText ?? "",
|
|
108
108
|
wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
|
|
109
|
-
"ring-2 ring-table-dark": !noBorder,
|
|
110
109
|
"overflow-x-auto": !hasSticky && !loading,
|
|
111
110
|
"overflow-hidden flex flex-col": hasSticky || loading
|
|
112
111
|
}, getSurfaceBackgroundClasses({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-datagrid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -87,11 +87,11 @@
|
|
|
87
87
|
},
|
|
88
88
|
"devDependencies": {
|
|
89
89
|
"@testing-library/jest-dom": "6.9.1",
|
|
90
|
+
"@versini/ui-button": "11.3.3",
|
|
90
91
|
"@versini/ui-types": "8.3.0"
|
|
91
92
|
},
|
|
92
93
|
"dependencies": {
|
|
93
94
|
"@tailwindcss/typography": "0.5.19",
|
|
94
|
-
"@versini/ui-button": "11.3.3",
|
|
95
95
|
"@versini/ui-icons": "4.16.1",
|
|
96
96
|
"clsx": "2.1.1",
|
|
97
97
|
"tailwindcss": "4.1.18"
|
|
@@ -99,5 +99,5 @@
|
|
|
99
99
|
"sideEffects": [
|
|
100
100
|
"**/*.css"
|
|
101
101
|
],
|
|
102
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "17220b771f97115901ce34188fe98b911b75cfdc"
|
|
103
103
|
}
|