@rttui/skin-anocca 1.0.16 → 1.0.18
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/cjs/HeaderPinButtons.cjs +109 -0
- package/dist/cjs/HeaderPinButtons.cjs.map +10 -0
- package/dist/cjs/RowPinButtons.cjs +75 -0
- package/dist/cjs/RowPinButtons.cjs.map +10 -0
- package/dist/cjs/index.cjs +383 -0
- package/dist/cjs/index.cjs.map +10 -0
- package/dist/cjs/package.json +5 -0
- package/dist/cjs/stories/ReactTanstackTableUiStory.stories.cjs +276 -0
- package/dist/cjs/stories/ReactTanstackTableUiStory.stories.cjs.map +10 -0
- package/dist/cjs/stories/ReactTanstackTableUiStoryComponent.cjs +186 -0
- package/dist/cjs/stories/ReactTanstackTableUiStoryComponent.cjs.map +10 -0
- package/dist/cjs/stories/createSourceCode.cjs +92 -0
- package/dist/cjs/stories/createSourceCode.cjs.map +10 -0
- package/dist/mjs/HeaderPinButtons.mjs +79 -0
- package/dist/mjs/HeaderPinButtons.mjs.map +10 -0
- package/dist/mjs/RowPinButtons.mjs +45 -0
- package/dist/mjs/RowPinButtons.mjs.map +10 -0
- package/dist/mjs/index.mjs +352 -0
- package/dist/mjs/index.mjs.map +10 -0
- package/dist/mjs/package.json +5 -0
- package/dist/mjs/stories/ReactTanstackTableUiStory.stories.mjs +246 -0
- package/dist/mjs/stories/ReactTanstackTableUiStory.stories.mjs.map +10 -0
- package/dist/mjs/stories/ReactTanstackTableUiStoryComponent.mjs +155 -0
- package/dist/mjs/stories/ReactTanstackTableUiStoryComponent.mjs.map +10 -0
- package/{src/stories/createSourceCode.ts → dist/mjs/stories/createSourceCode.mjs} +13 -4
- package/dist/mjs/stories/createSourceCode.mjs.map +10 -0
- package/dist/types/HeaderPinButtons.d.ts +1 -0
- package/dist/types/RowPinButtons.d.ts +4 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/stories/ReactTanstackTableUiStory.stories.d.ts +78 -0
- package/dist/types/stories/ReactTanstackTableUiStoryComponent.d.ts +17 -0
- package/dist/types/stories/createSourceCode.d.ts +5 -0
- package/package.json +5 -2
- package/.storybook/main.ts +0 -18
- package/.storybook/preview.ts +0 -14
- package/CHANGELOG.md +0 -126
- package/index.html +0 -13
- package/src/HeaderPinButtons.tsx +0 -81
- package/src/RowPinButtons.tsx +0 -40
- package/src/index.tsx +0 -460
- package/src/stories/ReactTanstackTableUiStory.mdx +0 -147
- package/src/stories/ReactTanstackTableUiStory.stories.tsx +0 -207
- package/src/stories/ReactTanstackTableUiStoryComponent.tsx +0 -113
- package/src/stories/ScrollbarWidthSpecified.mdx +0 -42
- package/tsconfig.json +0 -34
- package/tsconfig.types.json +0 -9
- package/vite.config.ts +0 -23
@@ -0,0 +1,109 @@
|
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
5
|
+
var __moduleCache = /* @__PURE__ */ new WeakMap;
|
6
|
+
var __toCommonJS = (from) => {
|
7
|
+
var entry = __moduleCache.get(from), desc;
|
8
|
+
if (entry)
|
9
|
+
return entry;
|
10
|
+
entry = __defProp({}, "__esModule", { value: true });
|
11
|
+
if (from && typeof from === "object" || typeof from === "function")
|
12
|
+
__getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
|
13
|
+
get: () => from[key],
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
15
|
+
}));
|
16
|
+
__moduleCache.set(from, entry);
|
17
|
+
return entry;
|
18
|
+
};
|
19
|
+
var __export = (target, all) => {
|
20
|
+
for (var name in all)
|
21
|
+
__defProp(target, name, {
|
22
|
+
get: all[name],
|
23
|
+
enumerable: true,
|
24
|
+
configurable: true,
|
25
|
+
set: (newValue) => all[name] = () => newValue
|
26
|
+
});
|
27
|
+
};
|
28
|
+
|
29
|
+
// packages/skin-anocca/src/HeaderPinButtons.tsx
|
30
|
+
var exports_HeaderPinButtons = {};
|
31
|
+
__export(exports_HeaderPinButtons, {
|
32
|
+
HeaderPinButtons: () => HeaderPinButtons
|
33
|
+
});
|
34
|
+
module.exports = __toCommonJS(exports_HeaderPinButtons);
|
35
|
+
var import_core = require("@rttui/core");
|
36
|
+
var import_md = require("react-icons/md");
|
37
|
+
var jsx_runtime = require("react/jsx-runtime");
|
38
|
+
var HeaderPinButtons = () => {
|
39
|
+
const vHeader = import_core.useVirtualHeader();
|
40
|
+
const header = vHeader.header;
|
41
|
+
if (!header) {
|
42
|
+
return null;
|
43
|
+
}
|
44
|
+
const isPinned = vHeader.isPinned;
|
45
|
+
return /* @__PURE__ */ jsx_runtime.jsxs("div", {
|
46
|
+
style: { display: "flex", gap: "-4px", justifyContent: "flex-start" },
|
47
|
+
children: [
|
48
|
+
isPinned !== "start" ? /* @__PURE__ */ jsx_runtime.jsx("button", {
|
49
|
+
style: {
|
50
|
+
border: "none",
|
51
|
+
background: "transparent",
|
52
|
+
cursor: "pointer",
|
53
|
+
padding: "2px",
|
54
|
+
borderRadius: "4px",
|
55
|
+
display: "flex",
|
56
|
+
alignItems: "center",
|
57
|
+
opacity: 0.5
|
58
|
+
},
|
59
|
+
onClick: () => {
|
60
|
+
if (!header) {
|
61
|
+
return;
|
62
|
+
}
|
63
|
+
header.column.pin("left");
|
64
|
+
},
|
65
|
+
children: /* @__PURE__ */ jsx_runtime.jsx(import_md.MdChevronLeft, {})
|
66
|
+
}) : null,
|
67
|
+
isPinned ? /* @__PURE__ */ jsx_runtime.jsx("button", {
|
68
|
+
style: {
|
69
|
+
border: "none",
|
70
|
+
background: "transparent",
|
71
|
+
cursor: "pointer",
|
72
|
+
padding: "2px",
|
73
|
+
borderRadius: "4px",
|
74
|
+
display: "flex",
|
75
|
+
alignItems: "center",
|
76
|
+
opacity: 0.7
|
77
|
+
},
|
78
|
+
onClick: () => {
|
79
|
+
if (!header) {
|
80
|
+
return;
|
81
|
+
}
|
82
|
+
header.column.pin(false);
|
83
|
+
},
|
84
|
+
children: /* @__PURE__ */ jsx_runtime.jsx(import_md.MdClose, {})
|
85
|
+
}) : null,
|
86
|
+
isPinned !== "end" ? /* @__PURE__ */ jsx_runtime.jsx("button", {
|
87
|
+
style: {
|
88
|
+
border: "none",
|
89
|
+
background: "transparent",
|
90
|
+
cursor: "pointer",
|
91
|
+
padding: "2px",
|
92
|
+
borderRadius: "4px",
|
93
|
+
display: "flex",
|
94
|
+
alignItems: "center",
|
95
|
+
opacity: 0.5
|
96
|
+
},
|
97
|
+
onClick: () => {
|
98
|
+
if (!header) {
|
99
|
+
return;
|
100
|
+
}
|
101
|
+
header.column.pin("right");
|
102
|
+
},
|
103
|
+
children: /* @__PURE__ */ jsx_runtime.jsx(import_md.MdChevronRight, {})
|
104
|
+
}) : null
|
105
|
+
]
|
106
|
+
});
|
107
|
+
};
|
108
|
+
|
109
|
+
//# debugId=E49BA4364922B12F64756E2164756E21
|
@@ -0,0 +1,10 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../src/HeaderPinButtons.tsx"],
|
4
|
+
"sourcesContent": [
|
5
|
+
"import { useVirtualHeader } from \"@rttui/core\";\nimport { MdChevronLeft, MdChevronRight, MdClose } from \"react-icons/md\";\n\nexport const HeaderPinButtons = () => {\n const vHeader = useVirtualHeader();\n const header = vHeader.header;\n if (!header) {\n return null;\n }\n const isPinned = vHeader.isPinned;\n return (\n <div style={{ display: \"flex\", gap: \"-4px\", justifyContent: \"flex-start\" }}>\n {isPinned !== \"start\" ? (\n <button\n style={{\n border: \"none\",\n background: \"transparent\",\n cursor: \"pointer\",\n padding: \"2px\",\n borderRadius: \"4px\",\n display: \"flex\",\n alignItems: \"center\",\n opacity: 0.5,\n }}\n onClick={() => {\n if (!header) {\n return;\n }\n header.column.pin(\"left\");\n }}\n >\n <MdChevronLeft />\n </button>\n ) : null}\n {isPinned ? (\n <button\n style={{\n border: \"none\",\n background: \"transparent\",\n cursor: \"pointer\",\n padding: \"2px\",\n borderRadius: \"4px\",\n display: \"flex\",\n alignItems: \"center\",\n opacity: 0.7,\n }}\n onClick={() => {\n if (!header) {\n return;\n }\n header.column.pin(false);\n }}\n >\n <MdClose />\n </button>\n ) : null}\n {isPinned !== \"end\" ? (\n <button\n style={{\n border: \"none\",\n background: \"transparent\",\n cursor: \"pointer\",\n padding: \"2px\",\n borderRadius: \"4px\",\n display: \"flex\",\n alignItems: \"center\",\n opacity: 0.5,\n }}\n onClick={() => {\n if (!header) {\n return;\n }\n header.column.pin(\"right\");\n }}\n >\n <MdChevronRight />\n </button>\n ) : null}\n </div>\n );\n};\n"
|
6
|
+
],
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAiC,IAAjC;AACuD,IAAvD;AAAA;AAEO,IAAM,mBAAmB,MAAM;AAAA,EACpC,MAAM,UAAU,6BAAiB;AAAA,EACjC,MAAM,SAAS,QAAQ;AAAA,EACvB,KAAK,QAAQ;AAAA,IACX,OAAO;AAAA,EACT;AAAA,EACA,MAAM,WAAW,QAAQ;AAAA,EACzB,uBACE,iBAmEE,OAnEF;AAAA,IAAK,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,gBAAgB,aAAa;AAAA,IAAzE,UAmEE;AAAA,MAlEC,aAAa,0BACZ,gBAmBE,UAnBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,KAAK,QAAQ;AAAA,YACX;AAAA,UACF;AAAA,UACA,OAAO,OAAO,IAAI,MAAM;AAAA;AAAA,QAf5B,0BAkBE,gBAAC,yBAAD,EAAe;AAAA,OACf,IACA;AAAA,MACH,2BACC,gBAmBE,UAnBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,KAAK,QAAQ;AAAA,YACX;AAAA,UACF;AAAA,UACA,OAAO,OAAO,IAAI,KAAK;AAAA;AAAA,QAf3B,0BAkBE,gBAAC,mBAAD,EAAS;AAAA,OACT,IACA;AAAA,MACH,aAAa,wBACZ,gBAmBE,UAnBF;AAAA,QACE,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,QACA,SAAS,MAAM;AAAA,UACb,KAAK,QAAQ;AAAA,YACX;AAAA,UACF;AAAA,UACA,OAAO,OAAO,IAAI,OAAO;AAAA;AAAA,QAf7B,0BAkBE,gBAAC,0BAAD,EAAgB;AAAA,OAChB,IACA;AAAA;AAAA,GACJ;AAAA;",
|
8
|
+
"debugId": "E49BA4364922B12F64756E2164756E21",
|
9
|
+
"names": []
|
10
|
+
}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
5
|
+
var __moduleCache = /* @__PURE__ */ new WeakMap;
|
6
|
+
var __toCommonJS = (from) => {
|
7
|
+
var entry = __moduleCache.get(from), desc;
|
8
|
+
if (entry)
|
9
|
+
return entry;
|
10
|
+
entry = __defProp({}, "__esModule", { value: true });
|
11
|
+
if (from && typeof from === "object" || typeof from === "function")
|
12
|
+
__getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
|
13
|
+
get: () => from[key],
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
15
|
+
}));
|
16
|
+
__moduleCache.set(from, entry);
|
17
|
+
return entry;
|
18
|
+
};
|
19
|
+
var __export = (target, all) => {
|
20
|
+
for (var name in all)
|
21
|
+
__defProp(target, name, {
|
22
|
+
get: all[name],
|
23
|
+
enumerable: true,
|
24
|
+
configurable: true,
|
25
|
+
set: (newValue) => all[name] = () => newValue
|
26
|
+
});
|
27
|
+
};
|
28
|
+
|
29
|
+
// packages/skin-anocca/src/RowPinButtons.tsx
|
30
|
+
var exports_RowPinButtons = {};
|
31
|
+
__export(exports_RowPinButtons, {
|
32
|
+
RowPinButtons: () => RowPinButtons
|
33
|
+
});
|
34
|
+
module.exports = __toCommonJS(exports_RowPinButtons);
|
35
|
+
var import_material = require("@mui/material");
|
36
|
+
var import_fi = require("react-icons/fi");
|
37
|
+
var jsx_runtime = require("react/jsx-runtime");
|
38
|
+
function RowPinButtons({ row }) {
|
39
|
+
if (!row.getCanPin()) {
|
40
|
+
return null;
|
41
|
+
}
|
42
|
+
if (row.getIsPinned()) {
|
43
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.IconButton, {
|
44
|
+
onClick: () => row.pin(false, true, true),
|
45
|
+
size: "small",
|
46
|
+
sx: { color: "text.secondary" },
|
47
|
+
children: /* @__PURE__ */ jsx_runtime.jsx(import_fi.FiX, {
|
48
|
+
size: 16
|
49
|
+
})
|
50
|
+
});
|
51
|
+
}
|
52
|
+
return /* @__PURE__ */ jsx_runtime.jsxs(import_material.Stack, {
|
53
|
+
direction: "row",
|
54
|
+
children: [
|
55
|
+
/* @__PURE__ */ jsx_runtime.jsx(import_material.IconButton, {
|
56
|
+
onClick: () => row.pin("top", true, true),
|
57
|
+
size: "small",
|
58
|
+
sx: { color: "text.secondary" },
|
59
|
+
children: /* @__PURE__ */ jsx_runtime.jsx(import_fi.FiChevronUp, {
|
60
|
+
size: 16
|
61
|
+
})
|
62
|
+
}),
|
63
|
+
/* @__PURE__ */ jsx_runtime.jsx(import_material.IconButton, {
|
64
|
+
onClick: () => row.pin("bottom", true, true),
|
65
|
+
size: "small",
|
66
|
+
sx: { color: "text.secondary" },
|
67
|
+
children: /* @__PURE__ */ jsx_runtime.jsx(import_fi.FiChevronDown, {
|
68
|
+
size: 16
|
69
|
+
})
|
70
|
+
})
|
71
|
+
]
|
72
|
+
});
|
73
|
+
}
|
74
|
+
|
75
|
+
//# debugId=A366EE9DE02AF7EF64756E2164756E21
|
@@ -0,0 +1,10 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../src/RowPinButtons.tsx"],
|
4
|
+
"sourcesContent": [
|
5
|
+
"import { Row } from \"@tanstack/react-table\";\nimport { IconButton, Stack } from \"@mui/material\";\nimport { FiX, FiChevronUp, FiChevronDown } from \"react-icons/fi\";\n\nexport function RowPinButtons({ row }: { row: Row<any> }) {\n if (!row.getCanPin()) {\n return null;\n }\n\n if (row.getIsPinned()) {\n return (\n <IconButton\n onClick={() => row.pin(false, true, true)}\n size=\"small\"\n sx={{ color: \"text.secondary\" }}\n >\n <FiX size={16} />\n </IconButton>\n );\n }\n\n return (\n <Stack direction=\"row\">\n <IconButton\n onClick={() => row.pin(\"top\", true, true)}\n size=\"small\"\n sx={{ color: \"text.secondary\" }}\n >\n <FiChevronUp size={16} />\n </IconButton>\n <IconButton\n onClick={() => row.pin(\"bottom\", true, true)}\n size=\"small\"\n sx={{ color: \"text.secondary\" }}\n >\n <FiChevronDown size={16} />\n </IconButton>\n </Stack>\n );\n}\n"
|
6
|
+
],
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACkC,IAAlC;AACgD,IAAhD;AAAA;AAEO,SAAS,aAAa,GAAG,OAA0B;AAAA,EACxD,KAAK,IAAI,UAAU,GAAG;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EAEA,IAAI,IAAI,YAAY,GAAG;AAAA,IACrB,uBACE,gBAME,4BANF;AAAA,MACE,SAAS,MAAM,IAAI,IAAI,OAAO,MAAM,IAAI;AAAA,MACxC,MAAK;AAAA,MACL,IAAI,EAAE,OAAO,iBAAiB;AAAA,MAHhC,0BAKE,gBAAC,eAAD;AAAA,QAAK,MAAM;AAAA,OAAI;AAAA,KACf;AAAA,EAEN;AAAA,EAEA,uBACE,iBAeE,uBAfF;AAAA,IAAO,WAAU;AAAA,IAAjB,UAeE;AAAA,sBAdA,gBAME,4BANF;AAAA,QACE,SAAS,MAAM,IAAI,IAAI,OAAO,MAAM,IAAI;AAAA,QACxC,MAAK;AAAA,QACL,IAAI,EAAE,OAAO,iBAAiB;AAAA,QAHhC,0BAKE,gBAAC,uBAAD;AAAA,UAAa,MAAM;AAAA,SAAI;AAAA,OACvB;AAAA,sBACF,gBAME,4BANF;AAAA,QACE,SAAS,MAAM,IAAI,IAAI,UAAU,MAAM,IAAI;AAAA,QAC3C,MAAK;AAAA,QACL,IAAI,EAAE,OAAO,iBAAiB;AAAA,QAHhC,0BAKE,gBAAC,yBAAD;AAAA,UAAe,MAAM;AAAA,SAAI;AAAA,OACzB;AAAA;AAAA,GACF;AAAA;",
|
8
|
+
"debugId": "A366EE9DE02AF7EF64756E2164756E21",
|
9
|
+
"names": []
|
10
|
+
}
|
@@ -0,0 +1,383 @@
|
|
1
|
+
var __create = Object.create;
|
2
|
+
var __getProtoOf = Object.getPrototypeOf;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
7
|
+
var __toESM = (mod, isNodeMode, target) => {
|
8
|
+
target = mod != null ? __create(__getProtoOf(mod)) : {};
|
9
|
+
const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
|
10
|
+
for (let key of __getOwnPropNames(mod))
|
11
|
+
if (!__hasOwnProp.call(to, key))
|
12
|
+
__defProp(to, key, {
|
13
|
+
get: () => mod[key],
|
14
|
+
enumerable: true
|
15
|
+
});
|
16
|
+
return to;
|
17
|
+
};
|
18
|
+
var __moduleCache = /* @__PURE__ */ new WeakMap;
|
19
|
+
var __toCommonJS = (from) => {
|
20
|
+
var entry = __moduleCache.get(from), desc;
|
21
|
+
if (entry)
|
22
|
+
return entry;
|
23
|
+
entry = __defProp({}, "__esModule", { value: true });
|
24
|
+
if (from && typeof from === "object" || typeof from === "function")
|
25
|
+
__getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
|
26
|
+
get: () => from[key],
|
27
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
28
|
+
}));
|
29
|
+
__moduleCache.set(from, entry);
|
30
|
+
return entry;
|
31
|
+
};
|
32
|
+
var __export = (target, all) => {
|
33
|
+
for (var name in all)
|
34
|
+
__defProp(target, name, {
|
35
|
+
get: all[name],
|
36
|
+
enumerable: true,
|
37
|
+
configurable: true,
|
38
|
+
set: (newValue) => all[name] = () => newValue
|
39
|
+
});
|
40
|
+
};
|
41
|
+
|
42
|
+
// packages/skin-anocca/src/index.tsx
|
43
|
+
var exports_src = {};
|
44
|
+
__export(exports_src, {
|
45
|
+
AnoccaSkin: () => AnoccaSkin
|
46
|
+
});
|
47
|
+
module.exports = __toCommonJS(exports_src);
|
48
|
+
var import_material = require("@mui/material");
|
49
|
+
var import_core = require("@rttui/core");
|
50
|
+
var import_react = __toESM(require("react"));
|
51
|
+
var import_react_table = require("@tanstack/react-table");
|
52
|
+
var jsx_runtime = require("react/jsx-runtime");
|
53
|
+
var AnoccaSkin = {
|
54
|
+
rowHeight: 32,
|
55
|
+
headerRowHeight: 32,
|
56
|
+
footerRowHeight: 32,
|
57
|
+
OverlayContainer: ({ children }) => {
|
58
|
+
const { width, height } = import_core.useTableContext();
|
59
|
+
const cssVars = import_core.useTableCssVars();
|
60
|
+
return /* @__PURE__ */ jsx_runtime.jsx("div", {
|
61
|
+
className: "rttui-overlay-container",
|
62
|
+
style: {
|
63
|
+
position: "relative",
|
64
|
+
width: width + "px",
|
65
|
+
height: height + "px",
|
66
|
+
...cssVars
|
67
|
+
},
|
68
|
+
children
|
69
|
+
});
|
70
|
+
},
|
71
|
+
OuterContainer: ({ children }) => {
|
72
|
+
const { tableContainerRef } = import_core.useTableContext();
|
73
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.Paper, {
|
74
|
+
ref: tableContainerRef,
|
75
|
+
className: "outer-container",
|
76
|
+
elevation: 2,
|
77
|
+
sx: {
|
78
|
+
overflow: "auto",
|
79
|
+
width: "var(--table-container-width)",
|
80
|
+
height: "var(--table-container-height)",
|
81
|
+
position: "relative",
|
82
|
+
contain: "paint",
|
83
|
+
willChange: "transform",
|
84
|
+
borderRadius: 1
|
85
|
+
},
|
86
|
+
children
|
87
|
+
});
|
88
|
+
},
|
89
|
+
TableScroller: () => {
|
90
|
+
return /* @__PURE__ */ jsx_runtime.jsx("div", {
|
91
|
+
className: "table-scroller",
|
92
|
+
style: {
|
93
|
+
width: "var(--table-width)",
|
94
|
+
height: "calc(var(--table-height) + var(--header-height) + var(--footer-height))",
|
95
|
+
position: "absolute"
|
96
|
+
}
|
97
|
+
});
|
98
|
+
},
|
99
|
+
TableHeader: ({ children }) => {
|
100
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableHead, {
|
101
|
+
component: "div",
|
102
|
+
className: "thead",
|
103
|
+
sx: {
|
104
|
+
position: "sticky",
|
105
|
+
top: 0,
|
106
|
+
width: "var(--table-width)",
|
107
|
+
zIndex: 2,
|
108
|
+
backgroundColor: (theme) => theme.palette.background.paper,
|
109
|
+
boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,
|
110
|
+
display: "flex",
|
111
|
+
flexDirection: "column",
|
112
|
+
justifyContent: "flex-start",
|
113
|
+
alignItems: "stretch"
|
114
|
+
},
|
115
|
+
children
|
116
|
+
});
|
117
|
+
},
|
118
|
+
TableFooter: ({ children }) => {
|
119
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableFooter, {
|
120
|
+
component: "div",
|
121
|
+
className: "table-footer",
|
122
|
+
sx: {
|
123
|
+
position: "sticky",
|
124
|
+
bottom: -1,
|
125
|
+
width: "var(--table-width)",
|
126
|
+
zIndex: 2,
|
127
|
+
backgroundColor: (theme) => theme.palette.background.paper,
|
128
|
+
boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`
|
129
|
+
},
|
130
|
+
children
|
131
|
+
});
|
132
|
+
},
|
133
|
+
HeaderRow: TableHeaderRow,
|
134
|
+
HeaderCell: import_react.default.forwardRef((props, ref) => {
|
135
|
+
return /* @__PURE__ */ jsx_runtime.jsx(TableHeaderCell, {
|
136
|
+
...props,
|
137
|
+
ref
|
138
|
+
});
|
139
|
+
}),
|
140
|
+
TableBody: ({ children }) => {
|
141
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableBody, {
|
142
|
+
component: "div",
|
143
|
+
className: "table-body",
|
144
|
+
sx: {
|
145
|
+
position: "relative",
|
146
|
+
width: "var(--table-width)",
|
147
|
+
height: "var(--table-height)",
|
148
|
+
display: "flex",
|
149
|
+
flexDirection: "column",
|
150
|
+
justifyContent: "flex-start",
|
151
|
+
alignItems: "stretch"
|
152
|
+
},
|
153
|
+
children
|
154
|
+
});
|
155
|
+
},
|
156
|
+
PinnedRows: ({ children, position, pinned }) => {
|
157
|
+
if (pinned.length === 0) {
|
158
|
+
return null;
|
159
|
+
}
|
160
|
+
const style = {
|
161
|
+
position: "sticky",
|
162
|
+
zIndex: 3
|
163
|
+
};
|
164
|
+
if (position === "top") {
|
165
|
+
style.top = "var(--header-height)";
|
166
|
+
style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;
|
167
|
+
style.boxShadow = "0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)";
|
168
|
+
} else if (position === "bottom") {
|
169
|
+
style.bottom = "var(--footer-height)";
|
170
|
+
style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;
|
171
|
+
style.boxShadow = "0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)";
|
172
|
+
}
|
173
|
+
const Component = position === "top" ? import_material.TableHead : import_material.TableFooter;
|
174
|
+
return /* @__PURE__ */ jsx_runtime.jsx(Component, {
|
175
|
+
component: "div",
|
176
|
+
className: `sticky-${position}-rows`,
|
177
|
+
sx: style,
|
178
|
+
children
|
179
|
+
});
|
180
|
+
},
|
181
|
+
PinnedCols: ({ children, position, pinned }) => {
|
182
|
+
if (pinned.length === 0) {
|
183
|
+
return null;
|
184
|
+
}
|
185
|
+
const style = {
|
186
|
+
position: "sticky",
|
187
|
+
zIndex: 3,
|
188
|
+
display: "flex"
|
189
|
+
};
|
190
|
+
if (position === "left") {
|
191
|
+
style.left = 0;
|
192
|
+
} else if (position === "right") {
|
193
|
+
style.right = 0;
|
194
|
+
}
|
195
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.Box, {
|
196
|
+
component: "div",
|
197
|
+
className: `sticky-${position}-cols`,
|
198
|
+
sx: style,
|
199
|
+
children
|
200
|
+
});
|
201
|
+
},
|
202
|
+
TableRowWrapper: import_react.default.forwardRef(({ children, flatIndex, dndStyle }, ref) => {
|
203
|
+
const theme = import_material.useTheme();
|
204
|
+
const backgroundColor = (theme2) => {
|
205
|
+
const baseColor = flatIndex % 2 === 0 ? theme2.palette.background.paper : theme2.palette.mode === "dark" ? theme2.palette.grey[900] : theme2.palette.grey[100];
|
206
|
+
return baseColor;
|
207
|
+
};
|
208
|
+
const vars = {
|
209
|
+
"--row-background-color": backgroundColor(theme)
|
210
|
+
};
|
211
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.Box, {
|
212
|
+
sx: {
|
213
|
+
...dndStyle,
|
214
|
+
...vars,
|
215
|
+
width: "var(--table-width)",
|
216
|
+
display: "flex",
|
217
|
+
flexDirection: "column",
|
218
|
+
justifyContent: "flex-start",
|
219
|
+
alignItems: "stretch"
|
220
|
+
},
|
221
|
+
"data-index": flatIndex,
|
222
|
+
ref,
|
223
|
+
children
|
224
|
+
});
|
225
|
+
}),
|
226
|
+
TableRow: ({ children }) => {
|
227
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableRow, {
|
228
|
+
component: "div",
|
229
|
+
className: "table-row",
|
230
|
+
sx: {
|
231
|
+
position: "relative",
|
232
|
+
width: "var(--table-width)",
|
233
|
+
display: "flex",
|
234
|
+
height: "var(--row-height)",
|
235
|
+
zIndex: 1,
|
236
|
+
boxSizing: "border-box",
|
237
|
+
backgroundColor: "var(--row-background-color)",
|
238
|
+
"&:hover": {
|
239
|
+
backgroundColor: (theme) => {
|
240
|
+
return theme.palette.mode === "dark" ? "#1e1e52" : "#E3F2FD";
|
241
|
+
}
|
242
|
+
}
|
243
|
+
},
|
244
|
+
children
|
245
|
+
});
|
246
|
+
},
|
247
|
+
TableRowExpandedContent: ({ children }) => {
|
248
|
+
const { table } = import_core.useTableContext();
|
249
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableRow, {
|
250
|
+
component: "div",
|
251
|
+
className: "expanded-row",
|
252
|
+
sx: {
|
253
|
+
backgroundColor: (theme) => theme.palette.background.default
|
254
|
+
},
|
255
|
+
children: /* @__PURE__ */ jsx_runtime.jsx(import_material.TableCell, {
|
256
|
+
component: "div",
|
257
|
+
className: "expanded-cell",
|
258
|
+
colSpan: table.getAllLeafColumns().length,
|
259
|
+
sx: {
|
260
|
+
padding: 2
|
261
|
+
},
|
262
|
+
children
|
263
|
+
})
|
264
|
+
});
|
265
|
+
},
|
266
|
+
Cell: import_react.default.forwardRef(({ children, header, isMeasuring, isLastPinned, isLast, isLastCenter }, ref) => {
|
267
|
+
const { isPinned } = header;
|
268
|
+
const { table } = import_core.useTableContext();
|
269
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableCell, {
|
270
|
+
className: "td",
|
271
|
+
component: "div",
|
272
|
+
ref,
|
273
|
+
sx: {
|
274
|
+
height: "var(--row-height)",
|
275
|
+
width: isMeasuring ? "auto" : header.width,
|
276
|
+
overflow: "hidden",
|
277
|
+
textOverflow: "ellipsis",
|
278
|
+
whiteSpace: "nowrap",
|
279
|
+
zIndex: isPinned ? 5 : 0,
|
280
|
+
boxSizing: "border-box",
|
281
|
+
fontSize: "0.875rem",
|
282
|
+
color: "text.primary",
|
283
|
+
alignItems: "center",
|
284
|
+
gap: "8px",
|
285
|
+
display: "flex",
|
286
|
+
justifyContent: "flex-start",
|
287
|
+
alignContent: "center",
|
288
|
+
padding: "6px 12px",
|
289
|
+
backgroundColor: "var(--row-background-color)",
|
290
|
+
borderBottom: "none",
|
291
|
+
flexShrink: 0,
|
292
|
+
position: "relative",
|
293
|
+
borderRight: (isPinned === "start" && !isLastPinned || !isPinned) && !isLast && !(isLastCenter && table.getIsSomeColumnsPinned("right")) ? (theme) => `1px solid ${theme.palette.divider}` : undefined,
|
294
|
+
borderLeft: isPinned === "end" && !isLastPinned ? (theme) => `1px solid ${theme.palette.divider}` : undefined,
|
295
|
+
".table-row:hover &": {
|
296
|
+
backgroundColor: (theme) => {
|
297
|
+
return theme.palette.mode === "dark" ? "#1e1e52" : "#E3F2FD";
|
298
|
+
},
|
299
|
+
zIndex: isPinned ? 2 : 0
|
300
|
+
}
|
301
|
+
},
|
302
|
+
children
|
303
|
+
});
|
304
|
+
}),
|
305
|
+
PinnedColsOverlay: ({ position }) => {
|
306
|
+
const { table } = import_core.useTableContext();
|
307
|
+
if (!table.getIsSomeColumnsPinned(position)) {
|
308
|
+
return null;
|
309
|
+
}
|
310
|
+
const width = position === "left" ? table.getLeftTotalSize() : table.getRightTotalSize();
|
311
|
+
const style = {
|
312
|
+
width,
|
313
|
+
[position]: 0,
|
314
|
+
position: "sticky",
|
315
|
+
top: 0,
|
316
|
+
bottom: 0,
|
317
|
+
zIndex: 20,
|
318
|
+
pointerEvents: "none"
|
319
|
+
};
|
320
|
+
if (position === "left") {
|
321
|
+
style.boxShadow = "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
322
|
+
} else if (position === "right") {
|
323
|
+
style.boxShadow = "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
324
|
+
}
|
325
|
+
return /* @__PURE__ */ jsx_runtime.jsx("div", {
|
326
|
+
className: `pinned-${position}-overlay`,
|
327
|
+
style
|
328
|
+
});
|
329
|
+
}
|
330
|
+
};
|
331
|
+
var TableHeaderCell = import_react.default.forwardRef(({
|
332
|
+
headerId,
|
333
|
+
isPinned,
|
334
|
+
width,
|
335
|
+
header,
|
336
|
+
type,
|
337
|
+
isLast,
|
338
|
+
isLastPinned,
|
339
|
+
isLastCenter,
|
340
|
+
isMeasuring
|
341
|
+
}, ref) => {
|
342
|
+
const { table } = import_core.useTableContext();
|
343
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableCell, {
|
344
|
+
ref,
|
345
|
+
component: "div",
|
346
|
+
className: "th",
|
347
|
+
"data-header-id": headerId,
|
348
|
+
"data-is-pinned": isPinned,
|
349
|
+
sx: {
|
350
|
+
transition: "background-color 0.2s ease",
|
351
|
+
whiteSpace: "nowrap",
|
352
|
+
zIndex: isPinned ? 1 : 0,
|
353
|
+
display: "flex",
|
354
|
+
overflow: "hidden",
|
355
|
+
height: "var(--header-row-height)",
|
356
|
+
width: isMeasuring ? "auto" : width,
|
357
|
+
position: "relative",
|
358
|
+
flexShrink: 0,
|
359
|
+
alignItems: "center",
|
360
|
+
gap: "8px",
|
361
|
+
justifyContent: "space-between",
|
362
|
+
padding: "6px 12px",
|
363
|
+
boxSizing: "border-box",
|
364
|
+
fontWeight: 600,
|
365
|
+
backgroundColor: isPinned ? (theme) => theme.palette.background.paper : "transparent",
|
366
|
+
borderRight: (isPinned === "start" && !isLastPinned || !isPinned) && !isLast && !(isLastCenter && table.getIsSomeColumnsPinned("right")) ? (theme) => `1px solid ${theme.palette.divider}` : undefined,
|
367
|
+
borderLeft: isPinned === "end" && !isLastPinned ? (theme) => `1px solid ${theme.palette.divider}` : undefined
|
368
|
+
},
|
369
|
+
children: /* @__PURE__ */ jsx_runtime.jsx("div", {
|
370
|
+
style: { flex: 1, display: "flex", justifyContent: "flex-start" },
|
371
|
+
children: header && !header.isPlaceholder ? import_react_table.flexRender(header.column.columnDef[type], header.getContext()) : null
|
372
|
+
})
|
373
|
+
});
|
374
|
+
});
|
375
|
+
function TableHeaderRow({ children }) {
|
376
|
+
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableRow, {
|
377
|
+
component: "div",
|
378
|
+
sx: { height: "var(--row-height)", display: "flex" },
|
379
|
+
children
|
380
|
+
});
|
381
|
+
}
|
382
|
+
|
383
|
+
//# debugId=E280C00B0855846064756E2164756E21
|
@@ -0,0 +1,10 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../src/index.tsx"],
|
4
|
+
"sourcesContent": [
|
5
|
+
"import {\n Box,\n Paper,\n SxProps,\n TableBody,\n TableCell,\n TableFooter,\n TableHead,\n TableRow,\n Theme,\n useTheme,\n} from \"@mui/material\";\nimport {\n Skin,\n useTableContext,\n useTableCssVars,\n VirtualHeader,\n} from \"@rttui/core\";\nimport React, { CSSProperties } from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\n\nconst AnoccaSkin: Skin = {\n rowHeight: 32,\n headerRowHeight: 32,\n footerRowHeight: 32,\n OverlayContainer: ({ children }) => {\n const { width, height } = useTableContext();\n const cssVars = useTableCssVars();\n return (\n <div\n className=\"rttui-overlay-container\"\n style={{\n position: \"relative\",\n width: width + \"px\",\n height: height + \"px\",\n ...cssVars,\n }}\n >\n {children}\n </div>\n );\n },\n OuterContainer: ({ children }) => {\n const { tableContainerRef } = useTableContext();\n\n return (\n <Paper\n ref={tableContainerRef}\n className=\"outer-container\"\n elevation={2}\n sx={{\n overflow: \"auto\",\n width: \"var(--table-container-width)\",\n height: \"var(--table-container-height)\",\n position: \"relative\",\n contain: \"paint\",\n willChange: \"transform\",\n borderRadius: 1,\n }}\n >\n {children}\n </Paper>\n );\n },\n TableScroller: () => {\n return (\n <div\n className=\"table-scroller\"\n style={{\n width: \"var(--table-width)\",\n height:\n \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n position: \"absolute\",\n }}\n ></div>\n );\n },\n TableHeader: ({ children }) => {\n return (\n <TableHead\n component=\"div\"\n className=\"thead\"\n sx={{\n position: \"sticky\",\n top: 0,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n }}\n >\n {children}\n </TableHead>\n );\n },\n TableFooter: ({ children }) => {\n return (\n <TableFooter\n component=\"div\"\n className=\"table-footer\"\n sx={{\n position: \"sticky\",\n bottom: -1,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableFooter>\n );\n },\n HeaderRow: TableHeaderRow,\n HeaderCell: React.forwardRef((props, ref) => {\n return <TableHeaderCell {...props} ref={ref} />;\n }),\n TableBody: ({ children }) => {\n return (\n <TableBody\n component=\"div\"\n className=\"table-body\"\n sx={{\n position: \"relative\",\n width: \"var(--table-width)\",\n height: \"var(--table-height)\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n }}\n >\n {children}\n </TableBody>\n );\n },\n PinnedRows: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n };\n if (position === \"top\") {\n style.top = \"var(--header-height)\";\n style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n } else if (position === \"bottom\") {\n style.bottom = \"var(--footer-height)\";\n style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n\n const Component = position === \"top\" ? TableHead : TableFooter;\n\n return (\n <Component\n component=\"div\"\n className={`sticky-${position}-rows`}\n sx={style}\n >\n {children}\n </Component>\n );\n },\n PinnedCols: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n display: \"flex\",\n };\n\n if (position === \"left\") {\n style.left = 0;\n } else if (position === \"right\") {\n style.right = 0;\n }\n\n return (\n <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n {children}\n </Box>\n );\n },\n\n TableRowWrapper: React.forwardRef(\n ({ children, flatIndex, dndStyle }, ref) => {\n const theme = useTheme();\n const backgroundColor = (theme: Theme) => {\n const baseColor =\n flatIndex % 2 === 0\n ? theme.palette.background.paper\n : theme.palette.mode === \"dark\"\n ? theme.palette.grey[900]\n : theme.palette.grey[100];\n return baseColor;\n };\n\n const vars: Record<string, string> = {\n \"--row-background-color\": backgroundColor(theme),\n };\n\n return (\n <Box\n sx={{\n ...dndStyle,\n ...vars,\n width: \"var(--table-width)\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n }}\n data-index={flatIndex}\n ref={ref}\n >\n {children}\n </Box>\n );\n },\n ),\n TableRow: ({ children }) => {\n return (\n <TableRow\n component=\"div\"\n className=\"table-row\"\n sx={{\n position: \"relative\",\n width: \"var(--table-width)\",\n display: \"flex\",\n height: \"var(--row-height)\",\n zIndex: 1,\n boxSizing: \"border-box\",\n backgroundColor: \"var(--row-background-color)\",\n \"&:hover\": {\n backgroundColor: (theme) => {\n // Always use solid background colors for all cells on hover\n return theme.palette.mode === \"dark\"\n ? \"#1e1e52\" // Dark blue solid color\n : \"#E3F2FD\"; // Light blue solid color\n },\n },\n }}\n >\n {children}\n </TableRow>\n );\n },\n TableRowExpandedContent: ({ children }) => {\n const { table } = useTableContext();\n return (\n <TableRow\n component=\"div\"\n className=\"expanded-row\"\n sx={{\n backgroundColor: (theme) => theme.palette.background.default,\n }}\n >\n <TableCell\n component=\"div\"\n className=\"expanded-cell\"\n colSpan={table.getAllLeafColumns().length}\n sx={{\n padding: 2,\n }}\n >\n {children}\n </TableCell>\n </TableRow>\n );\n },\n Cell: React.forwardRef(\n (\n { children, header, isMeasuring, isLastPinned, isLast, isLastCenter },\n ref,\n ) => {\n const { isPinned } = header;\n const { table } = useTableContext();\n return (\n <TableCell\n className=\"td\"\n component=\"div\"\n ref={ref}\n sx={{\n height: \"var(--row-height)\",\n width: isMeasuring ? \"auto\" : header.width,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 5 : 0,\n boxSizing: \"border-box\",\n fontSize: \"0.875rem\",\n color: \"text.primary\",\n alignItems: \"center\",\n gap: \"8px\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignContent: \"center\",\n padding: \"6px 12px\",\n backgroundColor: \"var(--row-background-color)\",\n borderBottom: \"none\",\n flexShrink: 0,\n position: \"relative\",\n borderRight:\n ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n !isLast &&\n !(isLastCenter && table.getIsSomeColumnsPinned(\"right\"))\n ? (theme) => `1px solid ${theme.palette.divider}`\n : undefined,\n borderLeft:\n isPinned === \"end\" && !isLastPinned\n ? (theme) => `1px solid ${theme.palette.divider}`\n : undefined,\n \".table-row:hover &\": {\n backgroundColor: (theme) => {\n // Always use solid background colors for all cells on hover\n return theme.palette.mode === \"dark\"\n ? \"#1e1e52\" // Dark blue solid color\n : \"#E3F2FD\"; // Light blue solid color\n },\n zIndex: isPinned ? 2 : 0,\n },\n }}\n >\n {children}\n </TableCell>\n );\n },\n ),\n PinnedColsOverlay: ({ position }) => {\n const { table } = useTableContext();\n if (!table.getIsSomeColumnsPinned(position)) {\n return null;\n }\n const width =\n position === \"left\"\n ? table.getLeftTotalSize()\n : table.getRightTotalSize();\n\n const style: CSSProperties = {\n width,\n [position]: 0,\n position: \"sticky\",\n top: 0,\n bottom: 0,\n zIndex: 20,\n pointerEvents: \"none\",\n };\n\n if (position === \"left\") {\n style.boxShadow =\n \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n } else if (position === \"right\") {\n style.boxShadow =\n \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n return <div className={`pinned-${position}-overlay`} style={style} />;\n },\n};\n\nconst TableHeaderCell = React.forwardRef<\n HTMLDivElement,\n VirtualHeader & {\n type: \"header\" | \"footer\";\n isLast: boolean;\n isFirst: boolean;\n isLastPinned: boolean;\n isFirstPinned: boolean;\n isLastCenter: boolean;\n isFirstCenter: boolean;\n isMeasuring: boolean;\n }\n>(\n (\n {\n headerId,\n isPinned,\n width,\n header,\n type,\n isLast,\n isLastPinned,\n isLastCenter,\n isMeasuring,\n },\n ref,\n ) => {\n const { table } = useTableContext();\n return (\n <TableCell\n ref={ref}\n component=\"div\"\n className=\"th\"\n data-header-id={headerId}\n data-is-pinned={isPinned}\n sx={{\n transition: \"background-color 0.2s ease\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 1 : 0,\n display: \"flex\",\n overflow: \"hidden\",\n height: \"var(--header-row-height)\",\n width: isMeasuring ? \"auto\" : width,\n position: \"relative\",\n flexShrink: 0,\n alignItems: \"center\",\n gap: \"8px\",\n justifyContent: \"space-between\",\n padding: \"6px 12px\",\n boxSizing: \"border-box\",\n fontWeight: 600,\n backgroundColor: isPinned\n ? (theme) => theme.palette.background.paper\n : \"transparent\",\n borderRight:\n ((isPinned === \"start\" && !isLastPinned) || !isPinned) &&\n !isLast &&\n !(isLastCenter && table.getIsSomeColumnsPinned(\"right\"))\n ? (theme) => `1px solid ${theme.palette.divider}`\n : undefined,\n borderLeft:\n isPinned === \"end\" && !isLastPinned\n ? (theme) => `1px solid ${theme.palette.divider}`\n : undefined,\n }}\n >\n <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n {header && !header.isPlaceholder\n ? flexRender(header.column.columnDef[type], header.getContext())\n : null}\n </div>\n </TableCell>\n );\n },\n);\n\nexport { AnoccaSkin };\n\nfunction TableHeaderRow({ children }: { children: React.ReactNode }) {\n return (\n <TableRow\n component=\"div\"\n sx={{ height: \"var(--row-height)\", display: \"flex\" }}\n >\n {children}\n </TableRow>\n );\n}\n"
|
6
|
+
],
|
7
|
+
"mappings": "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",
|
8
|
+
"debugId": "E280C00B0855846064756E2164756E21",
|
9
|
+
"names": []
|
10
|
+
}
|