@wallarm-org/design-system 0.4.1-rc-fix-table-width.5 → 0.4.1-rc-fix-table-width.7
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/components/OverflowTooltip/OverflowTooltipTrigger.d.ts +2 -1
- package/dist/components/OverflowTooltip/OverflowTooltipTrigger.js +16 -3
- package/dist/components/Table/TableHead.js +1 -1
- package/dist/components/Table/TableInner/TableInnerContainer.js +1 -1
- package/dist/components/Table/TableInner/TableInnerWindow.js +53 -55
- package/dist/components/Table/TableRow.d.ts +3 -2
- package/dist/components/Table/TableRow.js +4 -2
- package/dist/components/Table/lib/constants.d.ts +1 -1
- package/dist/components/Table/lib/constants.js +1 -1
- package/dist/metadata/components.json +1 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ export interface OverflowTooltipTriggerProps {
|
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
8
|
* Trigger component that automatically detects overflow in the element.
|
|
9
|
-
*
|
|
9
|
+
* Observers are created lazily on pointer enter for performance —
|
|
10
|
+
* avoids hundreds of ResizeObserver/MutationObserver instances in virtualized lists.
|
|
10
11
|
*/
|
|
11
12
|
export declare const OverflowTooltipTrigger: FC<OverflowTooltipTriggerProps>;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cloneElement, isValidElement, useEffect, useRef } from "react";
|
|
2
|
+
import { cloneElement, isValidElement, useCallback, useEffect, useRef, useState } from "react";
|
|
3
3
|
import { TooltipTrigger } from "../Tooltip/index.js";
|
|
4
4
|
import { useOverflowTooltip } from "./OverflowTooltipContext.js";
|
|
5
5
|
const OverflowTooltipTrigger = ({ children, asChild = true, ref })=>{
|
|
6
6
|
const { setIsOverflowing } = useOverflowTooltip();
|
|
7
7
|
const containerRef = useRef(null);
|
|
8
|
+
const [activated, setActivated] = useState(false);
|
|
9
|
+
const handlePointerEnter = useCallback(()=>{
|
|
10
|
+
setActivated(true);
|
|
11
|
+
}, []);
|
|
8
12
|
useEffect(()=>{
|
|
9
13
|
const container = containerRef.current;
|
|
10
|
-
if (!container) return;
|
|
14
|
+
if (!container || !activated) return;
|
|
11
15
|
const checkOverflow = ()=>{
|
|
12
16
|
const hasOverflow = container.scrollWidth > container.clientWidth || container.scrollHeight > container.clientHeight;
|
|
13
17
|
setIsOverflowing(hasOverflow);
|
|
@@ -26,6 +30,7 @@ const OverflowTooltipTrigger = ({ children, asChild = true, ref })=>{
|
|
|
26
30
|
mutationObserver.disconnect();
|
|
27
31
|
};
|
|
28
32
|
}, [
|
|
33
|
+
activated,
|
|
29
34
|
setIsOverflowing
|
|
30
35
|
]);
|
|
31
36
|
const setRefs = (node)=>{
|
|
@@ -36,10 +41,18 @@ const OverflowTooltipTrigger = ({ children, asChild = true, ref })=>{
|
|
|
36
41
|
if (originalRef) if ('function' == typeof originalRef) originalRef(node);
|
|
37
42
|
else originalRef.current = node;
|
|
38
43
|
};
|
|
44
|
+
const mergePointerEnter = useCallback((e)=>{
|
|
45
|
+
handlePointerEnter();
|
|
46
|
+
children.props?.onPointerEnter?.(e);
|
|
47
|
+
}, [
|
|
48
|
+
handlePointerEnter,
|
|
49
|
+
children
|
|
50
|
+
]);
|
|
39
51
|
return /*#__PURE__*/ jsx(TooltipTrigger, {
|
|
40
52
|
asChild: asChild,
|
|
41
53
|
children: /*#__PURE__*/ isValidElement(children) ? /*#__PURE__*/ cloneElement(children, {
|
|
42
|
-
ref: setRefs
|
|
54
|
+
ref: setRefs,
|
|
55
|
+
onPointerEnter: mergePointerEnter
|
|
43
56
|
}) : children
|
|
44
57
|
});
|
|
45
58
|
};
|
|
@@ -5,7 +5,7 @@ import { TableHeadCell } from "./TableHeadCell.js";
|
|
|
5
5
|
const TableHead = ()=>{
|
|
6
6
|
const { table } = useTableContext();
|
|
7
7
|
return /*#__PURE__*/ jsx(THead, {
|
|
8
|
-
className: "sticky top-0 z-30
|
|
8
|
+
className: "sticky top-0 z-30 h-32",
|
|
9
9
|
children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx(Tr, {
|
|
10
10
|
children: headerGroup.headers.map((header)=>/*#__PURE__*/ jsx(TableHeadCell, {
|
|
11
11
|
header: header
|
|
@@ -11,7 +11,7 @@ import { useTableContext } from "../TableContext/index.js";
|
|
|
11
11
|
import { TableHead } from "../TableHead.js";
|
|
12
12
|
import { TableSettingsMenu } from "../TableSettingsMenu/index.js";
|
|
13
13
|
const TableInnerContainer = ({ isEmpty, virtualized, showSettings, ariaLabel, children })=>{
|
|
14
|
-
const { containerRef, table,
|
|
14
|
+
const { containerRef, table, onEndReached, onEndReachedThreshold } = useTableContext();
|
|
15
15
|
const scrollRootRef = useRef(null);
|
|
16
16
|
const containerWidth = useContainerWidth(containerRef);
|
|
17
17
|
useEndReached({
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useEffect, useRef } from "react";
|
|
3
3
|
import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
|
|
4
4
|
import { useEndReached } from "../hooks/index.js";
|
|
@@ -9,7 +9,7 @@ import { useTableContext } from "../TableContext/index.js";
|
|
|
9
9
|
import { TableHead } from "../TableHead.js";
|
|
10
10
|
import { TableSettingsMenu } from "../TableSettingsMenu/index.js";
|
|
11
11
|
const TableInnerWindow = ({ isEmpty, showSettings, ariaLabel, children })=>{
|
|
12
|
-
const { table,
|
|
12
|
+
const { table, onEndReached, onEndReachedThreshold } = useTableContext();
|
|
13
13
|
const rootRef = useRef(null);
|
|
14
14
|
const headerScrollRef = useRef(null);
|
|
15
15
|
const bodyScrollRef = useRef(null);
|
|
@@ -51,68 +51,66 @@ const TableInnerWindow = ({ isEmpty, showSettings, ariaLabel, children })=>{
|
|
|
51
51
|
const totalSize = table.getTotalSize();
|
|
52
52
|
const tableWidth = Math.max(containerWidth, totalSize);
|
|
53
53
|
const tableStyles = 'table-fixed border-separate border-spacing-0';
|
|
54
|
-
return /*#__PURE__*/
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
55
|
+
ref: rootRef,
|
|
56
|
+
className: "group/scroll outline-none",
|
|
57
|
+
children: [
|
|
58
|
+
/*#__PURE__*/ jsxs("div", {
|
|
59
|
+
className: "sticky top-0 z-30 relative",
|
|
60
|
+
children: [
|
|
61
|
+
/*#__PURE__*/ jsx("div", {
|
|
62
|
+
ref: headerScrollRef,
|
|
63
|
+
className: "overflow-hidden rounded-t-12 border border-b-0 border-border-primary-light",
|
|
64
|
+
children: /*#__PURE__*/ jsxs("table", {
|
|
65
|
+
className: tableStyles,
|
|
66
|
+
style: {
|
|
67
|
+
width: tableWidth
|
|
68
|
+
},
|
|
69
|
+
"aria-hidden": true,
|
|
70
|
+
children: [
|
|
71
|
+
/*#__PURE__*/ jsx(TableColGroup, {
|
|
72
|
+
tableWidth: tableWidth
|
|
73
|
+
}),
|
|
74
|
+
/*#__PURE__*/ jsx(TableHead, {})
|
|
75
|
+
]
|
|
76
|
+
})
|
|
77
|
+
}),
|
|
78
|
+
showSettings && /*#__PURE__*/ jsx(TableSettingsMenu, {})
|
|
79
|
+
]
|
|
80
|
+
}),
|
|
81
|
+
/*#__PURE__*/ jsxs(ScrollArea, {
|
|
82
|
+
className: "group/scroll rounded-b-12 border border-t-0 border-border-primary-light",
|
|
83
|
+
children: [
|
|
84
|
+
/*#__PURE__*/ jsxs(ScrollAreaViewport, {
|
|
85
|
+
ref: bodyScrollRef,
|
|
86
|
+
"data-table-scroll-container": true,
|
|
87
|
+
style: {
|
|
88
|
+
overflowX: 'auto',
|
|
89
|
+
overflowY: 'hidden'
|
|
90
|
+
},
|
|
91
|
+
children: [
|
|
92
|
+
/*#__PURE__*/ jsxs("table", {
|
|
66
93
|
className: tableStyles,
|
|
67
94
|
style: {
|
|
68
95
|
width: tableWidth
|
|
69
96
|
},
|
|
70
|
-
"aria-
|
|
97
|
+
"aria-label": ariaLabel,
|
|
71
98
|
children: [
|
|
72
99
|
/*#__PURE__*/ jsx(TableColGroup, {
|
|
73
100
|
tableWidth: tableWidth
|
|
74
101
|
}),
|
|
75
|
-
/*#__PURE__*/ jsx(
|
|
102
|
+
!isEmpty && /*#__PURE__*/ jsx(TableBody, {})
|
|
76
103
|
]
|
|
77
|
-
})
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"data-table-scroll-container": true,
|
|
88
|
-
style: {
|
|
89
|
-
overflowX: 'auto',
|
|
90
|
-
overflowY: 'hidden'
|
|
91
|
-
},
|
|
92
|
-
children: [
|
|
93
|
-
/*#__PURE__*/ jsxs("table", {
|
|
94
|
-
className: tableStyles,
|
|
95
|
-
style: {
|
|
96
|
-
width: tableWidth
|
|
97
|
-
},
|
|
98
|
-
"aria-label": ariaLabel,
|
|
99
|
-
children: [
|
|
100
|
-
/*#__PURE__*/ jsx(TableColGroup, {
|
|
101
|
-
tableWidth: tableWidth
|
|
102
|
-
}),
|
|
103
|
-
!isEmpty && /*#__PURE__*/ jsx(TableBody, {})
|
|
104
|
-
]
|
|
105
|
-
}),
|
|
106
|
-
children
|
|
107
|
-
]
|
|
108
|
-
}),
|
|
109
|
-
/*#__PURE__*/ jsx(ScrollAreaScrollbar, {
|
|
110
|
-
orientation: "horizontal"
|
|
111
|
-
})
|
|
112
|
-
]
|
|
113
|
-
})
|
|
114
|
-
]
|
|
115
|
-
})
|
|
104
|
+
}),
|
|
105
|
+
children
|
|
106
|
+
]
|
|
107
|
+
}),
|
|
108
|
+
/*#__PURE__*/ jsx(ScrollAreaScrollbar, {
|
|
109
|
+
orientation: "horizontal"
|
|
110
|
+
})
|
|
111
|
+
]
|
|
112
|
+
})
|
|
113
|
+
]
|
|
116
114
|
});
|
|
117
115
|
};
|
|
118
116
|
TableInnerWindow.displayName = 'TableInnerWindow';
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type Ref } from 'react';
|
|
2
2
|
import type { Row } from '@tanstack/react-table';
|
|
3
3
|
interface TableRowProps<T> {
|
|
4
4
|
row: Row<T>;
|
|
5
5
|
ref?: Ref<HTMLTableRowElement>;
|
|
6
6
|
'data-index'?: number;
|
|
7
7
|
}
|
|
8
|
-
|
|
8
|
+
declare const TableRowInner: {
|
|
9
9
|
<T>({ row, ref, "data-index": dataIndex }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
displayName: string;
|
|
11
11
|
};
|
|
12
|
+
export declare const TableRow: typeof TableRowInner;
|
|
12
13
|
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from "react";
|
|
2
3
|
import { cn } from "../../utils/cn.js";
|
|
3
4
|
import { TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID } from "./lib/index.js";
|
|
4
5
|
import { Td, Tr } from "./primitives/index.js";
|
|
@@ -9,7 +10,7 @@ const SYSTEM_COLUMN_IDS = new Set([
|
|
|
9
10
|
TABLE_EXPAND_COLUMN_ID,
|
|
10
11
|
TABLE_SELECT_COLUMN_ID
|
|
11
12
|
]);
|
|
12
|
-
const
|
|
13
|
+
const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
|
|
13
14
|
const { expandingEnabled } = useTableContext();
|
|
14
15
|
const isGroupParent = row.subRows.length > 0;
|
|
15
16
|
const isSelected = isGroupParent ? row.getIsAllSubRowsSelected() : row.getIsSelected();
|
|
@@ -69,5 +70,6 @@ const TableRow = ({ row, ref, 'data-index': dataIndex })=>{
|
|
|
69
70
|
]
|
|
70
71
|
});
|
|
71
72
|
};
|
|
72
|
-
|
|
73
|
+
TableRowInner.displayName = 'TableRow';
|
|
74
|
+
const TableRow = /*#__PURE__*/ memo(TableRowInner);
|
|
73
75
|
export { TableRow };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const TABLE_SKELETON_ROWS = 12;
|
|
2
|
-
export declare const TABLE_VIRTUALIZATION_OVERSCAN =
|
|
2
|
+
export declare const TABLE_VIRTUALIZATION_OVERSCAN = 3;
|
|
3
3
|
export declare const TABLE_MIN_COLUMN_WIDTH = 96;
|
|
4
4
|
export declare const TABLE_SELECT_COLUMN_ID = "_selection";
|
|
5
5
|
export declare const TABLE_SELECT_COLUMN_WIDTH = 33;
|
package/package.json
CHANGED