@versini/ui-datagrid 0.7.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.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/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.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.js +1 -1
- package/package.json +3 -3
|
@@ -194,11 +194,6 @@ export type DataGridCellSortProps = {
|
|
|
194
194
|
* CSS class to apply to the cell.
|
|
195
195
|
*/
|
|
196
196
|
className?: string;
|
|
197
|
-
/**
|
|
198
|
-
* The focus mode for the sort button.
|
|
199
|
-
* @default "alt-system"
|
|
200
|
-
*/
|
|
201
|
-
focusMode?: ThemeMode;
|
|
202
197
|
/**
|
|
203
198
|
* The theme mode for the sort button.
|
|
204
199
|
* @default "alt-system"
|
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
|
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
|
}
|