@dmsi/wedgekit-react 0.0.81 → 0.0.83
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/{chunk-6R2HCLEL.js → chunk-37TJJQL3.js} +2 -2
- package/dist/{chunk-B6PDZCU7.js → chunk-5GUW4DUY.js} +1 -1
- package/dist/{chunk-ATOEGP3V.js → chunk-CKSDMI2Q.js} +14 -7
- package/dist/{chunk-2DCVAATK.js → chunk-MQWWNAO3.js} +4 -4
- package/dist/{chunk-FOC6LTSX.js → chunk-UPBBOZM3.js} +1 -1
- package/dist/{chunk-SWA5WVQO.js → chunk-WNQ53SVY.js} +30 -0
- package/dist/components/DataGridCell.cjs +53 -43
- package/dist/components/DataGridCell.js +5 -5
- package/dist/components/Menu.cjs +17 -14
- package/dist/components/Menu.js +3 -3
- package/dist/components/MenuOption.cjs +10 -7
- package/dist/components/MenuOption.js +2 -2
- package/dist/components/Modal.cjs +18 -15
- package/dist/components/Modal.js +3 -3
- package/dist/components/NestedMenu.cjs +12 -9
- package/dist/components/NestedMenu.js +2 -2
- package/dist/components/PDFViewer.cjs +21 -18
- package/dist/components/PDFViewer.js +3 -3
- package/dist/components/ProjectBar.cjs +6 -3
- package/dist/components/ProjectBar.js +1 -1
- package/dist/components/TopBar.cjs +1 -1
- package/dist/components/TopBar.js +1 -1
- package/dist/components/{DataGrid.cjs → index.cjs} +1424 -1335
- package/dist/components/{DataGrid.js → index.js} +948 -883
- package/dist/components/useMenuSystem.cjs +20 -17
- package/dist/components/useMenuSystem.js +2 -2
- package/dist/hooks/index.cjs +34 -3
- package/dist/hooks/index.js +3 -1
- package/package.json +6 -1
- package/src/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.tsx +32 -0
- package/src/components/DataGrid/ColumnSelectorHeaderCell/index.tsx +66 -0
- package/src/components/DataGrid/PinnedColumns.tsx +145 -0
- package/src/components/DataGrid/TableBody/LoadingCell.tsx +40 -0
- package/src/components/DataGrid/TableBody/TableBodyRow.tsx +129 -0
- package/src/components/DataGrid/TableBody/index.tsx +159 -0
- package/src/components/{DataGrid.tsx → DataGrid/index.tsx} +42 -678
- package/src/components/DataGrid/types.ts +86 -0
- package/src/components/DataGrid/utils.tsx +15 -0
- package/src/components/DataGridCell.tsx +37 -21
- package/src/components/TopBar.tsx +1 -1
- package/src/components/index.ts +20 -0
- package/src/hooks/index.ts +1 -0
- package/dist/chunk-AWQSSKCK.js +0 -32
- package/dist/components/useInfiniteScroll.cjs +0 -57
- package/dist/components/useInfiniteScroll.js +0 -8
- /package/src/{components → hooks}/useInfiniteScroll.tsx +0 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Menu
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-37TJJQL3.js";
|
|
4
4
|
import {
|
|
5
5
|
useSubMenuSystem
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-5GUW4DUY.js";
|
|
7
7
|
import {
|
|
8
8
|
MenuOption
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-UPBBOZM3.js";
|
|
10
10
|
import {
|
|
11
11
|
Search
|
|
12
12
|
} from "./chunk-LP6AZST2.js";
|
|
@@ -167,13 +167,15 @@ function DataCellHeader(_a) {
|
|
|
167
167
|
children,
|
|
168
168
|
setNodeRef,
|
|
169
169
|
node,
|
|
170
|
-
id
|
|
170
|
+
id,
|
|
171
|
+
useMenuDefaultMinWidth
|
|
171
172
|
} = _b, props = __objRest(_b, [
|
|
172
173
|
"header",
|
|
173
174
|
"children",
|
|
174
175
|
"setNodeRef",
|
|
175
176
|
"node",
|
|
176
|
-
"id"
|
|
177
|
+
"id",
|
|
178
|
+
"useMenuDefaultMinWidth"
|
|
177
179
|
]);
|
|
178
180
|
var _a2;
|
|
179
181
|
const [showMenu, setShowMenu] = useState(false);
|
|
@@ -194,7 +196,9 @@ function DataCellHeader(_a) {
|
|
|
194
196
|
const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
|
|
195
197
|
const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
|
|
196
198
|
const right = (columnPinning == null ? void 0 : columnPinning.right) ? columnPinning.right : [];
|
|
197
|
-
predeterminedPinned.current = [...left, ...right].includes(
|
|
199
|
+
predeterminedPinned.current = [...left, ...right].includes(
|
|
200
|
+
header.column.id
|
|
201
|
+
);
|
|
198
202
|
}, []);
|
|
199
203
|
useEffect(() => {
|
|
200
204
|
const handler = setTimeout(() => {
|
|
@@ -232,6 +236,7 @@ function DataCellHeader(_a) {
|
|
|
232
236
|
show: showMenu,
|
|
233
237
|
setShow: setShowMenu,
|
|
234
238
|
mobileHide,
|
|
239
|
+
useDefaultMinWidth: useMenuDefaultMinWidth,
|
|
235
240
|
children: [
|
|
236
241
|
/* @__PURE__ */ jsx(
|
|
237
242
|
MenuOption,
|
|
@@ -249,6 +254,7 @@ function DataCellHeader(_a) {
|
|
|
249
254
|
ref: (el) => {
|
|
250
255
|
registerSubMenu(menuId, el);
|
|
251
256
|
},
|
|
257
|
+
useDefaultMinWidth: useMenuDefaultMinWidth,
|
|
252
258
|
children: [
|
|
253
259
|
/* @__PURE__ */ jsx("div", { className: clsx(paddingUsingComponentGap), children: /* @__PURE__ */ jsx(
|
|
254
260
|
Search,
|
|
@@ -410,7 +416,8 @@ function DraggableCellHeader(_a) {
|
|
|
410
416
|
whiteSpace: "nowrap",
|
|
411
417
|
zIndex: isDragging ? 1 : 0,
|
|
412
418
|
width: header.column.getSize(),
|
|
413
|
-
"--color-text-primary-normal": "var(--color-neutral-000)"
|
|
419
|
+
"--color-text-primary-normal": "var(--color-neutral-000)",
|
|
420
|
+
userSelect: "none"
|
|
414
421
|
};
|
|
415
422
|
return /* @__PURE__ */ jsx(
|
|
416
423
|
DataCellHeader,
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useMounted
|
|
3
3
|
} from "./chunk-4RJKB7LC.js";
|
|
4
|
-
import {
|
|
5
|
-
ModalButtons
|
|
6
|
-
} from "./chunk-QUPHLL7D.js";
|
|
7
4
|
import {
|
|
8
5
|
ModalContent
|
|
9
6
|
} from "./chunk-FWPJ73IK.js";
|
|
@@ -13,9 +10,12 @@ import {
|
|
|
13
10
|
import {
|
|
14
11
|
ModalScrim
|
|
15
12
|
} from "./chunk-4JLU7TAC.js";
|
|
13
|
+
import {
|
|
14
|
+
ModalButtons
|
|
15
|
+
} from "./chunk-QUPHLL7D.js";
|
|
16
16
|
import {
|
|
17
17
|
useMatchesMobile
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-WNQ53SVY.js";
|
|
19
19
|
import {
|
|
20
20
|
findDocumentRoot
|
|
21
21
|
} from "./chunk-4T7F5BZZ.js";
|
|
@@ -27,6 +27,35 @@ function useKeydown(keys, isActive) {
|
|
|
27
27
|
}, [keys, isActive]);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
// src/hooks/useInfiniteScroll.tsx
|
|
31
|
+
import { useEffect as useEffect2 } from "react";
|
|
32
|
+
function useInfiniteScroll({
|
|
33
|
+
containerRef,
|
|
34
|
+
onLoadMore,
|
|
35
|
+
isLoading,
|
|
36
|
+
offset = 50,
|
|
37
|
+
enabled = true
|
|
38
|
+
// ✅ Add this
|
|
39
|
+
}) {
|
|
40
|
+
useEffect2(() => {
|
|
41
|
+
if (!enabled) return;
|
|
42
|
+
const handleScroll = () => {
|
|
43
|
+
const el2 = containerRef.current;
|
|
44
|
+
if (!el2 || isLoading) return;
|
|
45
|
+
const { scrollTop, scrollHeight, clientHeight } = el2;
|
|
46
|
+
const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
|
|
47
|
+
if (isNearBottom) {
|
|
48
|
+
onLoadMore();
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
const el = containerRef.current;
|
|
52
|
+
if (el) el.addEventListener("scroll", handleScroll);
|
|
53
|
+
return () => {
|
|
54
|
+
if (el) el.removeEventListener("scroll", handleScroll);
|
|
55
|
+
};
|
|
56
|
+
}, [containerRef, onLoadMore, isLoading, offset, enabled]);
|
|
57
|
+
}
|
|
58
|
+
|
|
30
59
|
// src/hooks/useMatchesMedia.ts
|
|
31
60
|
import { useLayoutEffect, useState } from "react";
|
|
32
61
|
var useMatchesMedia = (query) => {
|
|
@@ -44,6 +73,7 @@ var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
|
|
|
44
73
|
|
|
45
74
|
export {
|
|
46
75
|
useKeydown,
|
|
76
|
+
useInfiniteScroll,
|
|
47
77
|
useMatchesMedia,
|
|
48
78
|
useMatchesMobile
|
|
49
79
|
};
|
|
@@ -118,7 +118,7 @@ var CSS = /* @__PURE__ */ Object.freeze({
|
|
|
118
118
|
|
|
119
119
|
// src/components/DataGridCell.tsx
|
|
120
120
|
var import_clsx8 = __toESM(require("clsx"), 1);
|
|
121
|
-
var
|
|
121
|
+
var import_react10 = require("react");
|
|
122
122
|
|
|
123
123
|
// src/classNames.ts
|
|
124
124
|
var import_clsx = __toESM(require("clsx"), 1);
|
|
@@ -855,20 +855,23 @@ Search.displayName = "Search";
|
|
|
855
855
|
|
|
856
856
|
// src/components/Menu.tsx
|
|
857
857
|
var import_clsx5 = __toESM(require("clsx"), 1);
|
|
858
|
-
var
|
|
858
|
+
var import_react8 = require("react");
|
|
859
859
|
var import_react_dom = require("react-dom");
|
|
860
860
|
|
|
861
861
|
// src/components/useMenuSystem.tsx
|
|
862
|
-
var
|
|
862
|
+
var import_react7 = require("react");
|
|
863
863
|
|
|
864
864
|
// src/hooks/useKeydown.ts
|
|
865
865
|
var import_react4 = require("react");
|
|
866
866
|
|
|
867
|
-
// src/hooks/
|
|
867
|
+
// src/hooks/useInfiniteScroll.tsx
|
|
868
868
|
var import_react5 = require("react");
|
|
869
|
+
|
|
870
|
+
// src/hooks/useMatchesMedia.ts
|
|
871
|
+
var import_react6 = require("react");
|
|
869
872
|
var useMatchesMedia = (query) => {
|
|
870
|
-
const [matches, setMatches] = (0,
|
|
871
|
-
(0,
|
|
873
|
+
const [matches, setMatches] = (0, import_react6.useState)();
|
|
874
|
+
(0, import_react6.useLayoutEffect)(() => {
|
|
872
875
|
const mediaQueryList = window.matchMedia(query);
|
|
873
876
|
const listener = () => setMatches(mediaQueryList.matches);
|
|
874
877
|
listener();
|
|
@@ -881,17 +884,17 @@ var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
|
|
|
881
884
|
|
|
882
885
|
// src/components/useMenuSystem.tsx
|
|
883
886
|
function useSubMenuSystem(mobilePositionTo) {
|
|
884
|
-
const [activeMenus, setActiveMenus] = (0,
|
|
887
|
+
const [activeMenus, setActiveMenus] = (0, import_react7.useState)(
|
|
885
888
|
{}
|
|
886
889
|
);
|
|
887
|
-
const [activeMenu, setActiveMenu] = (0,
|
|
888
|
-
const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0,
|
|
890
|
+
const [activeMenu, setActiveMenu] = (0, import_react7.useState)("");
|
|
891
|
+
const [currentSubMenuLevel, setCurrentSubMenuLevel] = (0, import_react7.useState)(
|
|
889
892
|
null
|
|
890
893
|
);
|
|
891
|
-
const menuRootRef = (0,
|
|
892
|
-
const subMenuRefs = (0,
|
|
893
|
-
const hoverTimeoutRef = (0,
|
|
894
|
-
const closeTimeoutRef = (0,
|
|
894
|
+
const menuRootRef = (0, import_react7.useRef)(null);
|
|
895
|
+
const subMenuRefs = (0, import_react7.useRef)({});
|
|
896
|
+
const hoverTimeoutRef = (0, import_react7.useRef)(null);
|
|
897
|
+
const closeTimeoutRef = (0, import_react7.useRef)(null);
|
|
895
898
|
const isMobile = useMatchesMobile();
|
|
896
899
|
const toggleMenu = (menuId, level) => {
|
|
897
900
|
if (closeTimeoutRef.current) {
|
|
@@ -989,7 +992,7 @@ function useSubMenuSystem(mobilePositionTo) {
|
|
|
989
992
|
const isMenuActive = (menuId, level) => {
|
|
990
993
|
return activeMenus[level] === menuId;
|
|
991
994
|
};
|
|
992
|
-
(0,
|
|
995
|
+
(0, import_react7.useEffect)(() => {
|
|
993
996
|
const handleClickOutside = (event) => {
|
|
994
997
|
var _a;
|
|
995
998
|
if (Object.keys(activeMenus).length === 0) return;
|
|
@@ -1008,7 +1011,7 @@ function useSubMenuSystem(mobilePositionTo) {
|
|
|
1008
1011
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
1009
1012
|
};
|
|
1010
1013
|
}, [activeMenus]);
|
|
1011
|
-
(0,
|
|
1014
|
+
(0, import_react7.useEffect)(() => {
|
|
1012
1015
|
return () => {
|
|
1013
1016
|
if (hoverTimeoutRef.current) {
|
|
1014
1017
|
clearTimeout(hoverTimeoutRef.current);
|
|
@@ -1085,13 +1088,13 @@ function useSubMenuSystem(mobilePositionTo) {
|
|
|
1085
1088
|
};
|
|
1086
1089
|
}
|
|
1087
1090
|
function useMenuPosition(elementRef, position = "bottom", options) {
|
|
1088
|
-
const [menuPosition, setMenuPosition] = (0,
|
|
1091
|
+
const [menuPosition, setMenuPosition] = (0, import_react7.useState)({
|
|
1089
1092
|
top: 0,
|
|
1090
1093
|
left: 0,
|
|
1091
1094
|
minWidth: 0
|
|
1092
1095
|
});
|
|
1093
1096
|
const isMobile = useMatchesMobile();
|
|
1094
|
-
const updatePosition = (0,
|
|
1097
|
+
const updatePosition = (0, import_react7.useCallback)(() => {
|
|
1095
1098
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
1096
1099
|
if (!(elementRef == null ? void 0 : elementRef.current)) return;
|
|
1097
1100
|
const triggerRect = elementRef.current.getBoundingClientRect();
|
|
@@ -1127,7 +1130,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
|
|
|
1127
1130
|
minWidth: triggerRect.width
|
|
1128
1131
|
});
|
|
1129
1132
|
}, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
|
|
1130
|
-
(0,
|
|
1133
|
+
(0, import_react7.useEffect)(() => {
|
|
1131
1134
|
if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
|
|
1132
1135
|
const handleClickOutside = (event) => {
|
|
1133
1136
|
var _a, _b, _c, _d, _e;
|
|
@@ -1153,7 +1156,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
|
|
|
1153
1156
|
options == null ? void 0 : options.menuRef,
|
|
1154
1157
|
options == null ? void 0 : options.additionalRefs
|
|
1155
1158
|
]);
|
|
1156
|
-
(0,
|
|
1159
|
+
(0, import_react7.useEffect)(() => {
|
|
1157
1160
|
updatePosition();
|
|
1158
1161
|
const resizeObserver = new ResizeObserver(updatePosition);
|
|
1159
1162
|
if (elementRef == null ? void 0 : elementRef.current) {
|
|
@@ -1231,9 +1234,9 @@ var Menu = (_a) => {
|
|
|
1231
1234
|
"autoFocusOff",
|
|
1232
1235
|
"menuName"
|
|
1233
1236
|
]);
|
|
1234
|
-
const internalRef = (0,
|
|
1237
|
+
const internalRef = (0, import_react8.useRef)(null);
|
|
1235
1238
|
const actualRef = ref || internalRef;
|
|
1236
|
-
const [maxHeight, setMaxHeight] = (0,
|
|
1239
|
+
const [maxHeight, setMaxHeight] = (0, import_react8.useState)("180px");
|
|
1237
1240
|
const isMobile = useMatchesMobile();
|
|
1238
1241
|
const { menuPosition, updatePosition } = useMenuPosition(
|
|
1239
1242
|
isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
|
|
@@ -1245,7 +1248,7 @@ var Menu = (_a) => {
|
|
|
1245
1248
|
topOffset
|
|
1246
1249
|
}
|
|
1247
1250
|
);
|
|
1248
|
-
(0,
|
|
1251
|
+
(0, import_react8.useEffect)(() => {
|
|
1249
1252
|
const raf = requestAnimationFrame(() => {
|
|
1250
1253
|
if (!actualRef || !actualRef.current || customMaxHeight) {
|
|
1251
1254
|
return;
|
|
@@ -1266,14 +1269,14 @@ var Menu = (_a) => {
|
|
|
1266
1269
|
cancelAnimationFrame(raf);
|
|
1267
1270
|
};
|
|
1268
1271
|
}, [actualRef, customMaxHeight]);
|
|
1269
|
-
(0,
|
|
1272
|
+
(0, import_react8.useEffect)(() => {
|
|
1270
1273
|
if (!show) {
|
|
1271
1274
|
return;
|
|
1272
1275
|
}
|
|
1273
1276
|
initializeMenuFocus();
|
|
1274
1277
|
updatePosition();
|
|
1275
1278
|
}, [show, updatePosition]);
|
|
1276
|
-
(0,
|
|
1279
|
+
(0, import_react8.useEffect)(() => {
|
|
1277
1280
|
if (!show || !setShow) {
|
|
1278
1281
|
return;
|
|
1279
1282
|
}
|
|
@@ -1426,7 +1429,7 @@ Menu.displayName = "Menu";
|
|
|
1426
1429
|
|
|
1427
1430
|
// src/components/MenuOption.tsx
|
|
1428
1431
|
var import_clsx7 = __toESM(require("clsx"), 1);
|
|
1429
|
-
var
|
|
1432
|
+
var import_react9 = require("react");
|
|
1430
1433
|
|
|
1431
1434
|
// src/components/Paragraph.tsx
|
|
1432
1435
|
var import_clsx6 = __toESM(require("clsx"), 1);
|
|
@@ -1504,10 +1507,10 @@ var MenuOption = ({
|
|
|
1504
1507
|
highlightMatchingText = false,
|
|
1505
1508
|
menuValue
|
|
1506
1509
|
}) => {
|
|
1507
|
-
const uniqueId = (0,
|
|
1508
|
-
const internalRef = (0,
|
|
1510
|
+
const uniqueId = (0, import_react9.useId)();
|
|
1511
|
+
const internalRef = (0, import_react9.useRef)(null);
|
|
1509
1512
|
const actualRef = ref || internalRef;
|
|
1510
|
-
const menuId = (0,
|
|
1513
|
+
const menuId = (0, import_react9.useRef)(`menu-${uniqueId}`);
|
|
1511
1514
|
const isMobile = useMatchesMobile();
|
|
1512
1515
|
const handleMouseEnter = () => {
|
|
1513
1516
|
if (subMenu && onSubMenuHover && !disabled) {
|
|
@@ -1650,7 +1653,7 @@ function highlightMatch(text, searchValue) {
|
|
|
1650
1653
|
|
|
1651
1654
|
// src/components/DataGridCell.tsx
|
|
1652
1655
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1653
|
-
var DataGridCell = (0,
|
|
1656
|
+
var DataGridCell = (0, import_react10.memo)(
|
|
1654
1657
|
(_a) => {
|
|
1655
1658
|
var _b = _a, {
|
|
1656
1659
|
id,
|
|
@@ -1686,10 +1689,10 @@ var DataGridCell = (0, import_react9.memo)(
|
|
|
1686
1689
|
"width"
|
|
1687
1690
|
]);
|
|
1688
1691
|
const Element = type === "header" ? "th" : "td";
|
|
1689
|
-
const timerRef = (0,
|
|
1690
|
-
const [isGrabbing, setIsGrabbing] = (0,
|
|
1691
|
-
const [isPointerPressed, setIsPointerPressed] = (0,
|
|
1692
|
-
(0,
|
|
1692
|
+
const timerRef = (0, import_react10.useRef)(null);
|
|
1693
|
+
const [isGrabbing, setIsGrabbing] = (0, import_react10.useState)(false);
|
|
1694
|
+
const [isPointerPressed, setIsPointerPressed] = (0, import_react10.useState)(false);
|
|
1695
|
+
(0, import_react10.useEffect)(() => {
|
|
1693
1696
|
return () => {
|
|
1694
1697
|
if (timerRef.current) {
|
|
1695
1698
|
clearTimeout(timerRef.current);
|
|
@@ -1781,21 +1784,23 @@ function DataCellHeader(_a) {
|
|
|
1781
1784
|
children,
|
|
1782
1785
|
setNodeRef,
|
|
1783
1786
|
node,
|
|
1784
|
-
id
|
|
1787
|
+
id,
|
|
1788
|
+
useMenuDefaultMinWidth
|
|
1785
1789
|
} = _b, props = __objRest(_b, [
|
|
1786
1790
|
"header",
|
|
1787
1791
|
"children",
|
|
1788
1792
|
"setNodeRef",
|
|
1789
1793
|
"node",
|
|
1790
|
-
"id"
|
|
1794
|
+
"id",
|
|
1795
|
+
"useMenuDefaultMinWidth"
|
|
1791
1796
|
]);
|
|
1792
1797
|
var _a2;
|
|
1793
|
-
const [showMenu, setShowMenu] = (0,
|
|
1794
|
-
const [filter, setFilter] = (0,
|
|
1798
|
+
const [showMenu, setShowMenu] = (0, import_react10.useState)(false);
|
|
1799
|
+
const [filter, setFilter] = (0, import_react10.useState)(
|
|
1795
1800
|
(_a2 = header.column.getFilterValue()) != null ? _a2 : ""
|
|
1796
1801
|
);
|
|
1797
|
-
const ref = (0,
|
|
1798
|
-
const predeterminedPinned = (0,
|
|
1802
|
+
const ref = (0, import_react10.useRef)(null);
|
|
1803
|
+
const predeterminedPinned = (0, import_react10.useRef)(false);
|
|
1799
1804
|
const {
|
|
1800
1805
|
menuRootRef,
|
|
1801
1806
|
isMenuActive,
|
|
@@ -1803,14 +1808,16 @@ function DataCellHeader(_a) {
|
|
|
1803
1808
|
listeners: subMenuListeners,
|
|
1804
1809
|
mobileHide
|
|
1805
1810
|
} = useSubMenuSystem(node ? node : ref);
|
|
1806
|
-
(0,
|
|
1811
|
+
(0, import_react10.useEffect)(() => {
|
|
1807
1812
|
var _a3;
|
|
1808
1813
|
const columnPinning = (_a3 = header.getContext().table.options.initialState) == null ? void 0 : _a3.columnPinning;
|
|
1809
1814
|
const left = (columnPinning == null ? void 0 : columnPinning.left) ? columnPinning.left : [];
|
|
1810
1815
|
const right = (columnPinning == null ? void 0 : columnPinning.right) ? columnPinning.right : [];
|
|
1811
|
-
predeterminedPinned.current = [...left, ...right].includes(
|
|
1816
|
+
predeterminedPinned.current = [...left, ...right].includes(
|
|
1817
|
+
header.column.id
|
|
1818
|
+
);
|
|
1812
1819
|
}, []);
|
|
1813
|
-
(0,
|
|
1820
|
+
(0, import_react10.useEffect)(() => {
|
|
1814
1821
|
const handler = setTimeout(() => {
|
|
1815
1822
|
header.column.setFilterValue(filter);
|
|
1816
1823
|
}, 500);
|
|
@@ -1846,6 +1853,7 @@ function DataCellHeader(_a) {
|
|
|
1846
1853
|
show: showMenu,
|
|
1847
1854
|
setShow: setShowMenu,
|
|
1848
1855
|
mobileHide,
|
|
1856
|
+
useDefaultMinWidth: useMenuDefaultMinWidth,
|
|
1849
1857
|
children: [
|
|
1850
1858
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1851
1859
|
MenuOption,
|
|
@@ -1863,6 +1871,7 @@ function DataCellHeader(_a) {
|
|
|
1863
1871
|
ref: (el) => {
|
|
1864
1872
|
registerSubMenu(menuId, el);
|
|
1865
1873
|
},
|
|
1874
|
+
useDefaultMinWidth: useMenuDefaultMinWidth,
|
|
1866
1875
|
children: [
|
|
1867
1876
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_clsx8.default)(paddingUsingComponentGap), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1868
1877
|
Search,
|
|
@@ -2024,7 +2033,8 @@ function DraggableCellHeader(_a) {
|
|
|
2024
2033
|
whiteSpace: "nowrap",
|
|
2025
2034
|
zIndex: isDragging ? 1 : 0,
|
|
2026
2035
|
width: header.column.getSize(),
|
|
2027
|
-
"--color-text-primary-normal": "var(--color-neutral-000)"
|
|
2036
|
+
"--color-text-primary-normal": "var(--color-neutral-000)",
|
|
2037
|
+
userSelect: "none"
|
|
2028
2038
|
};
|
|
2029
2039
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
2030
2040
|
DataCellHeader,
|
|
@@ -4,11 +4,11 @@ import {
|
|
|
4
4
|
DataGridCell,
|
|
5
5
|
DragAlongCell,
|
|
6
6
|
DraggableCellHeader
|
|
7
|
-
} from "../chunk-
|
|
8
|
-
import "../chunk-
|
|
9
|
-
import "../chunk-
|
|
10
|
-
import "../chunk-
|
|
11
|
-
import "../chunk-
|
|
7
|
+
} from "../chunk-CKSDMI2Q.js";
|
|
8
|
+
import "../chunk-37TJJQL3.js";
|
|
9
|
+
import "../chunk-5GUW4DUY.js";
|
|
10
|
+
import "../chunk-UPBBOZM3.js";
|
|
11
|
+
import "../chunk-WNQ53SVY.js";
|
|
12
12
|
import "../chunk-LP6AZST2.js";
|
|
13
13
|
import "../chunk-VG4EPHJA.js";
|
|
14
14
|
import "../chunk-WVUIIBRR.js";
|
package/dist/components/Menu.cjs
CHANGED
|
@@ -64,20 +64,23 @@ __export(Menu_exports, {
|
|
|
64
64
|
});
|
|
65
65
|
module.exports = __toCommonJS(Menu_exports);
|
|
66
66
|
var import_clsx = __toESM(require("clsx"), 1);
|
|
67
|
-
var
|
|
67
|
+
var import_react5 = require("react");
|
|
68
68
|
var import_react_dom = require("react-dom");
|
|
69
69
|
|
|
70
70
|
// src/components/useMenuSystem.tsx
|
|
71
|
-
var
|
|
71
|
+
var import_react4 = require("react");
|
|
72
72
|
|
|
73
73
|
// src/hooks/useKeydown.ts
|
|
74
74
|
var import_react = require("react");
|
|
75
75
|
|
|
76
|
-
// src/hooks/
|
|
76
|
+
// src/hooks/useInfiniteScroll.tsx
|
|
77
77
|
var import_react2 = require("react");
|
|
78
|
+
|
|
79
|
+
// src/hooks/useMatchesMedia.ts
|
|
80
|
+
var import_react3 = require("react");
|
|
78
81
|
var useMatchesMedia = (query) => {
|
|
79
|
-
const [matches, setMatches] = (0,
|
|
80
|
-
(0,
|
|
82
|
+
const [matches, setMatches] = (0, import_react3.useState)();
|
|
83
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
81
84
|
const mediaQueryList = window.matchMedia(query);
|
|
82
85
|
const listener = () => setMatches(mediaQueryList.matches);
|
|
83
86
|
listener();
|
|
@@ -90,13 +93,13 @@ var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
|
|
|
90
93
|
|
|
91
94
|
// src/components/useMenuSystem.tsx
|
|
92
95
|
function useMenuPosition(elementRef, position = "bottom", options) {
|
|
93
|
-
const [menuPosition, setMenuPosition] = (0,
|
|
96
|
+
const [menuPosition, setMenuPosition] = (0, import_react4.useState)({
|
|
94
97
|
top: 0,
|
|
95
98
|
left: 0,
|
|
96
99
|
minWidth: 0
|
|
97
100
|
});
|
|
98
101
|
const isMobile = useMatchesMobile();
|
|
99
|
-
const updatePosition = (0,
|
|
102
|
+
const updatePosition = (0, import_react4.useCallback)(() => {
|
|
100
103
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
101
104
|
if (!(elementRef == null ? void 0 : elementRef.current)) return;
|
|
102
105
|
const triggerRect = elementRef.current.getBoundingClientRect();
|
|
@@ -132,7 +135,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
|
|
|
132
135
|
minWidth: triggerRect.width
|
|
133
136
|
});
|
|
134
137
|
}, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset, isMobile]);
|
|
135
|
-
(0,
|
|
138
|
+
(0, import_react4.useEffect)(() => {
|
|
136
139
|
if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
|
|
137
140
|
const handleClickOutside = (event) => {
|
|
138
141
|
var _a, _b, _c, _d, _e;
|
|
@@ -158,7 +161,7 @@ function useMenuPosition(elementRef, position = "bottom", options) {
|
|
|
158
161
|
options == null ? void 0 : options.menuRef,
|
|
159
162
|
options == null ? void 0 : options.additionalRefs
|
|
160
163
|
]);
|
|
161
|
-
(0,
|
|
164
|
+
(0, import_react4.useEffect)(() => {
|
|
162
165
|
updatePosition();
|
|
163
166
|
const resizeObserver = new ResizeObserver(updatePosition);
|
|
164
167
|
if (elementRef == null ? void 0 : elementRef.current) {
|
|
@@ -236,9 +239,9 @@ var Menu = (_a) => {
|
|
|
236
239
|
"autoFocusOff",
|
|
237
240
|
"menuName"
|
|
238
241
|
]);
|
|
239
|
-
const internalRef = (0,
|
|
242
|
+
const internalRef = (0, import_react5.useRef)(null);
|
|
240
243
|
const actualRef = ref || internalRef;
|
|
241
|
-
const [maxHeight, setMaxHeight] = (0,
|
|
244
|
+
const [maxHeight, setMaxHeight] = (0, import_react5.useState)("180px");
|
|
242
245
|
const isMobile = useMatchesMobile();
|
|
243
246
|
const { menuPosition, updatePosition } = useMenuPosition(
|
|
244
247
|
isMobile && mobilePositionTo ? mobilePositionTo : positionTo,
|
|
@@ -250,7 +253,7 @@ var Menu = (_a) => {
|
|
|
250
253
|
topOffset
|
|
251
254
|
}
|
|
252
255
|
);
|
|
253
|
-
(0,
|
|
256
|
+
(0, import_react5.useEffect)(() => {
|
|
254
257
|
const raf = requestAnimationFrame(() => {
|
|
255
258
|
if (!actualRef || !actualRef.current || customMaxHeight) {
|
|
256
259
|
return;
|
|
@@ -271,14 +274,14 @@ var Menu = (_a) => {
|
|
|
271
274
|
cancelAnimationFrame(raf);
|
|
272
275
|
};
|
|
273
276
|
}, [actualRef, customMaxHeight]);
|
|
274
|
-
(0,
|
|
277
|
+
(0, import_react5.useEffect)(() => {
|
|
275
278
|
if (!show) {
|
|
276
279
|
return;
|
|
277
280
|
}
|
|
278
281
|
initializeMenuFocus();
|
|
279
282
|
updatePosition();
|
|
280
283
|
}, [show, updatePosition]);
|
|
281
|
-
(0,
|
|
284
|
+
(0, import_react5.useEffect)(() => {
|
|
282
285
|
if (!show || !setShow) {
|
|
283
286
|
return;
|
|
284
287
|
}
|
package/dist/components/Menu.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Menu
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
6
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-37TJJQL3.js";
|
|
5
|
+
import "../chunk-5GUW4DUY.js";
|
|
6
|
+
import "../chunk-WNQ53SVY.js";
|
|
7
7
|
import "../chunk-4T7F5BZZ.js";
|
|
8
8
|
import "../chunk-ORMEWXMH.js";
|
|
9
9
|
export {
|
|
@@ -64,7 +64,7 @@ __export(MenuOption_exports, {
|
|
|
64
64
|
});
|
|
65
65
|
module.exports = __toCommonJS(MenuOption_exports);
|
|
66
66
|
var import_clsx5 = __toESM(require("clsx"), 1);
|
|
67
|
-
var
|
|
67
|
+
var import_react4 = require("react");
|
|
68
68
|
|
|
69
69
|
// src/classNames.ts
|
|
70
70
|
var import_clsx = __toESM(require("clsx"), 1);
|
|
@@ -318,11 +318,14 @@ function Icon(_a) {
|
|
|
318
318
|
// src/hooks/useKeydown.ts
|
|
319
319
|
var import_react = require("react");
|
|
320
320
|
|
|
321
|
-
// src/hooks/
|
|
321
|
+
// src/hooks/useInfiniteScroll.tsx
|
|
322
322
|
var import_react2 = require("react");
|
|
323
|
+
|
|
324
|
+
// src/hooks/useMatchesMedia.ts
|
|
325
|
+
var import_react3 = require("react");
|
|
323
326
|
var useMatchesMedia = (query) => {
|
|
324
|
-
const [matches, setMatches] = (0,
|
|
325
|
-
(0,
|
|
327
|
+
const [matches, setMatches] = (0, import_react3.useState)();
|
|
328
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
326
329
|
const mediaQueryList = window.matchMedia(query);
|
|
327
330
|
const listener = () => setMatches(mediaQueryList.matches);
|
|
328
331
|
listener();
|
|
@@ -359,10 +362,10 @@ var MenuOption = ({
|
|
|
359
362
|
highlightMatchingText = false,
|
|
360
363
|
menuValue
|
|
361
364
|
}) => {
|
|
362
|
-
const uniqueId = (0,
|
|
363
|
-
const internalRef = (0,
|
|
365
|
+
const uniqueId = (0, import_react4.useId)();
|
|
366
|
+
const internalRef = (0, import_react4.useRef)(null);
|
|
364
367
|
const actualRef = ref || internalRef;
|
|
365
|
-
const menuId = (0,
|
|
368
|
+
const menuId = (0, import_react4.useRef)(`menu-${uniqueId}`);
|
|
366
369
|
const isMobile = useMatchesMobile();
|
|
367
370
|
const handleMouseEnter = () => {
|
|
368
371
|
if (subMenu && onSubMenuHover && !disabled) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
MenuOption
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-UPBBOZM3.js";
|
|
5
|
+
import "../chunk-WNQ53SVY.js";
|
|
6
6
|
import "../chunk-VG4EPHJA.js";
|
|
7
7
|
import "../chunk-S5K22XTH.js";
|
|
8
8
|
import "../chunk-IGQVA7SC.js";
|