wcz-layout
Version:
1,807 lines • 53.4 kB
JavaScript
import { d as sanitizeReturnTo, m as loginProvidersQueryOptions } from "./utils-KaM5VMTJ.mjs";
import { n as RouterIconButton, t as RouterListItemButton } from "./RouterListItemButton-ULMlaQh6.mjs";
import { a as fileQueryOptions, i as fileMetasQueryOptions, n as deleteFileMutationOptions, o as fileThumbnailQueryOptions, r as downloadFileMutationOptions, s as openFileMutationOptions } from "./file-aSQto2rw.mjs";
import { _ as toClipboardText, d as columnAlign, h as pinnedSx, p as hasColumnLabel, t as AggregatedCell, u as cellSelectionSx, v as useDialogs } from "./AggregatedCell-BtKC5-m6.mjs";
import { c } from "react/compiler-runtime";
import { Box, Button, Card, CardContent, CircularProgress, Dialog, Divider, Fab, IconButton, ImageListItem, ImageListItemBar, Link, List, ListItemButton, ListItemIcon, ListItemText, Menu, Paper, Skeleton, Stack, Tab, Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TableRow, Tooltip, Typography, alpha, useTheme } from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import React, { Fragment, createContext, useContext, useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { manifest } from "virtual:wcz-layout";
import { createLink, rootRouteId, useLocation, useMatch } from "@tanstack/react-router";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import Close from "@mui/icons-material/Close";
import CloudQueue from "@mui/icons-material/CloudQueue";
import Microsoft from "@mui/icons-material/Microsoft";
import CloudUpload from "@mui/icons-material/CloudUpload";
import { useDropzone } from "react-dropzone";
import MoreVert from "@mui/icons-material/MoreVert";
import { grey } from "@mui/material/colors";
import { useInView } from "react-intersection-observer";
import Delete from "@mui/icons-material/Delete";
import FileDownload from "@mui/icons-material/FileDownload";
import AttachFile from "@mui/icons-material/AttachFile";
import Image from "@mui/icons-material/Image";
import SmartDisplay from "@mui/icons-material/SmartDisplay";
import { useHotkeys } from "@tanstack/react-hotkeys";
import { useVirtualizer } from "@tanstack/react-virtual";
//#region src/components/core/account/LoginForm.tsx
const LAST_PROVIDER_KEY = "auth-provider";
const PROVIDER_ICON = {
entra: /* @__PURE__ */ jsx(Microsoft, {}),
aws: /* @__PURE__ */ jsx(CloudQueue, {})
};
/**
* The provider chooser card. Mount it at `/login` — `requireAuth` redirects there,
* and it reads `?returnTo` from the URL itself, so it takes no props.
*/
const LoginForm = () => {
const $ = c(36);
if ($[0] !== "768688d2a6d9f6d1b08467771ab00d6ca2dc6a32d0233a10821cfaf230752138") {
for (let $i = 0; $i < 36; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "768688d2a6d9f6d1b08467771ab00d6ca2dc6a32d0233a10821cfaf230752138";
}
const { data: t0 } = useQuery(loginProvidersQueryOptions);
let t1;
if ($[1] !== t0) {
t1 = t0 === void 0 ? [] : t0;
$[1] = t0;
$[2] = t1;
} else t1 = $[2];
const providers = t1;
let t2;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t2 = { select: _temp$1 };
$[3] = t2;
} else t2 = $[3];
const search = useLocation(t2);
let t3;
if ($[4] !== search.returnTo) {
t3 = sanitizeReturnTo(search.returnTo);
$[4] = search.returnTo;
$[5] = t3;
} else t3 = $[5];
const returnTo = t3;
const { t } = useTranslation();
const [lastProvider, setLastProvider] = useState(null);
let t4;
let t5;
if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
t4 = () => setLastProvider(localStorage.getItem(LAST_PROVIDER_KEY));
t5 = [];
$[6] = t4;
$[7] = t5;
} else {
t4 = $[6];
t5 = $[7];
}
useEffect(t4, t5);
const preferred = lastProvider ?? (providers.length === 1 ? providers[0].id : null);
let t6;
if ($[8] !== returnTo) {
t6 = (provider) => () => {
localStorage.setItem(LAST_PROVIDER_KEY, provider);
location.href = `/auth/login?provider=${provider}&returnTo=${encodeURIComponent(returnTo)}`;
};
$[8] = returnTo;
$[9] = t6;
} else t6 = $[9];
const signIn = t6;
let t7;
if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
t7 = {
minHeight: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
px: 2,
py: 6
};
$[10] = t7;
} else t7 = $[10];
let t8;
if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
t8 = [_temp2, _temp3];
$[11] = t8;
} else t8 = $[11];
let t9;
if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
t9 = { p: {
xs: 3,
sm: 4
} };
$[12] = t9;
} else t9 = $[12];
let t10;
let t11;
if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
t10 = { alignItems: "center" };
t11 = /* @__PURE__ */ jsx(Box, {
component: "img",
src: "/android-chrome-192x192.png",
alt: manifest.name,
width: 48,
height: 48
});
$[13] = t10;
$[14] = t11;
} else {
t10 = $[13];
t11 = $[14];
}
let t12;
if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
t12 = /* @__PURE__ */ jsx(Typography, {
variant: "body2",
color: "text.secondary",
sx: { fontWeight: 600 },
children: manifest.name
});
$[15] = t12;
} else t12 = $[15];
let t13;
if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
t13 = { fontWeight: 700 };
$[16] = t13;
} else t13 = $[16];
let t14;
if ($[17] !== t) {
t14 = t("Layout.LogIn");
$[17] = t;
$[18] = t14;
} else t14 = $[18];
let t15;
if ($[19] !== t14) {
t15 = /* @__PURE__ */ jsxs(Stack, {
direction: "row",
spacing: 2,
sx: t10,
children: [t11, /* @__PURE__ */ jsxs(Stack, {
spacing: .25,
children: [t12, /* @__PURE__ */ jsx(Typography, {
variant: "h5",
sx: t13,
children: t14
})]
})]
});
$[19] = t14;
$[20] = t15;
} else t15 = $[20];
let t16;
if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
t16 = /* @__PURE__ */ jsx(Divider, { sx: { my: 3 } });
$[21] = t16;
} else t16 = $[21];
let t17;
if ($[22] !== preferred || $[23] !== providers || $[24] !== signIn || $[25] !== t) {
let t18;
if ($[27] !== preferred || $[28] !== signIn || $[29] !== t) {
t18 = (t19) => {
const { id, label } = t19;
return /* @__PURE__ */ jsx(Button, {
fullWidth: true,
size: "large",
startIcon: PROVIDER_ICON[id],
variant: id === preferred ? "contained" : "outlined",
onClick: signIn(id),
sx: {
minHeight: 52,
px: 2,
borderRadius: 1,
fontWeight: 600,
textTransform: "none",
boxShadow: "none"
},
children: t("Layout.ContinueWith", { provider: label })
}, id);
};
$[27] = preferred;
$[28] = signIn;
$[29] = t;
$[30] = t18;
} else t18 = $[30];
t17 = providers.map(t18);
$[22] = preferred;
$[23] = providers;
$[24] = signIn;
$[25] = t;
$[26] = t17;
} else t17 = $[26];
let t18;
if ($[31] !== t17) {
t18 = /* @__PURE__ */ jsx(Stack, {
spacing: 1.5,
children: t17
});
$[31] = t17;
$[32] = t18;
} else t18 = $[32];
let t19;
if ($[33] !== t15 || $[34] !== t18) {
t19 = /* @__PURE__ */ jsx(Box, {
sx: t7,
children: /* @__PURE__ */ jsx(Card, {
variant: "outlined",
sx: t8,
children: /* @__PURE__ */ jsxs(CardContent, {
sx: t9,
children: [
t15,
t16,
t18
]
})
})
});
$[33] = t15;
$[34] = t18;
$[35] = t19;
} else t19 = $[35];
return t19;
};
function _temp$1(location) {
return location.search;
}
function _temp2(theme) {
return {
width: "100%",
maxWidth: 440,
borderColor: alpha(theme.palette.primary.main, .2),
borderRadius: 1,
boxShadow: `0 20px 50px ${alpha(theme.palette.common.black, .08)}`
};
}
function _temp3(theme_0) {
return theme_0.applyStyles("dark", {
borderColor: alpha(theme_0.palette.primary.main, .28),
boxShadow: `0 20px 50px ${alpha(theme_0.palette.common.black, .28)}`
});
}
//#endregion
//#region src/components/core/Fullscreen.tsx
const Fullscreen = (t0) => {
const $ = c(16);
if ($[0] !== "2243979894039564df2fd1f70562faf7a7d5878eaeea3b472ad974fd8b0c233e") {
for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "2243979894039564df2fd1f70562faf7a7d5878eaeea3b472ad974fd8b0c233e";
}
let children;
let props;
let sx;
if ($[1] !== t0) {
({children, sx, ...props} = t0);
$[1] = t0;
$[2] = children;
$[3] = props;
$[4] = sx;
} else {
children = $[2];
props = $[3];
sx = $[4];
}
const reference = useRef(null);
const [height, setHeight] = useState();
let t1;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t1 = () => {
if (!reference.current) return;
const top = reference.current.getBoundingClientRect().top;
const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
const avail = Math.max(0, Math.floor(viewportHeight - top));
setHeight(avail);
};
$[5] = t1;
} else t1 = $[5];
const recompute = useEffectEvent(t1);
let t2;
if ($[6] !== recompute) {
t2 = () => {
const element = reference.current;
if (!element) return;
recompute();
window.addEventListener("resize", recompute);
const ro = new ResizeObserver(recompute);
ro.observe(document.documentElement);
ro.observe(document.body);
ro.observe(element);
return () => {
window.removeEventListener("resize", recompute);
ro.disconnect();
};
};
$[6] = recompute;
$[7] = t2;
} else t2 = $[7];
let t3;
if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
t3 = [];
$[8] = t3;
} else t3 = $[8];
useLayoutEffect(t2, t3);
let t4;
if ($[9] !== height || $[10] !== sx) {
t4 = {
display: "flex",
flexDirection: "column",
boxSizing: "border-box",
minHeight: 0,
width: "100%",
overflow: "auto",
height,
...sx
};
$[9] = height;
$[10] = sx;
$[11] = t4;
} else t4 = $[11];
let t5;
if ($[12] !== children || $[13] !== props || $[14] !== t4) {
t5 = /* @__PURE__ */ jsx(Box, {
ref: reference,
sx: t4,
...props,
children
});
$[12] = children;
$[13] = props;
$[14] = t4;
$[15] = t5;
} else t5 = $[15];
return t5;
};
//#endregion
//#region src/components/file/Dropzone.tsx
const baseStyle = {
flex: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: "20px",
borderWidth: 2,
borderRadius: 2,
borderStyle: "dashed",
outline: "none",
transition: "border .24s ease-in-out",
cursor: "pointer"
};
const Dropzone = (t0) => {
const $ = c(32);
if ($[0] !== "835a1014bc277abe6d9ec1a05ba4c7bf5844ace27aac767fe4a606b16069e907") {
for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "835a1014bc277abe6d9ec1a05ba4c7bf5844ace27aac767fe4a606b16069e907";
}
let progress;
let props;
let sx;
if ($[1] !== t0) {
({sx, progress, ...props} = t0);
$[1] = t0;
$[2] = progress;
$[3] = props;
$[4] = sx;
} else {
progress = $[2];
props = $[3];
sx = $[4];
}
const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = useDropzone(props);
const { t } = useTranslation();
const theme = useTheme();
const t1 = progress ? "progress" : props.disabled ? "not-allowed" : "pointer";
const t2 = theme.vars || theme;
let T0;
let t3;
if ($[5] !== getRootProps || $[6] !== isDragAccept || $[7] !== isDragReject || $[8] !== isFocused || $[9] !== t1 || $[10] !== t2.palette.text.disabled || $[11] !== theme) {
const style = {
...baseStyle,
cursor: t1,
borderColor: t2.palette.text.disabled,
...isFocused ? { borderColor: (theme.vars || theme).palette.primary.main } : {},
...isDragAccept ? { borderColor: (theme.vars || theme).palette.success.main } : {},
...isDragReject ? { borderColor: (theme.vars || theme).palette.error.main } : {}
};
T0 = Box;
t3 = getRootProps({ style });
$[5] = getRootProps;
$[6] = isDragAccept;
$[7] = isDragReject;
$[8] = isFocused;
$[9] = t1;
$[10] = t2.palette.text.disabled;
$[11] = theme;
$[12] = T0;
$[13] = t3;
} else {
T0 = $[12];
t3 = $[13];
}
let t4;
if ($[14] !== getInputProps) {
t4 = getInputProps();
$[14] = getInputProps;
$[15] = t4;
} else t4 = $[15];
let t5;
if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
t5 = { display: "none" };
$[16] = t5;
} else t5 = $[16];
let t6;
if ($[17] !== t4) {
t6 = /* @__PURE__ */ jsx("input", {
...t4,
style: t5
});
$[17] = t4;
$[18] = t6;
} else t6 = $[18];
let t7;
if ($[19] !== progress) {
t7 = progress ? /* @__PURE__ */ jsx(CircularProgress, {
size: 24,
variant: "determinate",
value: progress
}) : /* @__PURE__ */ jsx(CloudUpload, {});
$[19] = progress;
$[20] = t7;
} else t7 = $[20];
let t8;
if ($[21] !== t) {
t8 = t("Layout.File.DragSomeFilesHereOrClickToSelectThem");
$[21] = t;
$[22] = t8;
} else t8 = $[22];
let t9;
if ($[23] !== t8) {
t9 = /* @__PURE__ */ jsx(Typography, { children: t8 });
$[23] = t8;
$[24] = t9;
} else t9 = $[24];
let t10;
if ($[25] !== T0 || $[26] !== sx || $[27] !== t3 || $[28] !== t6 || $[29] !== t7 || $[30] !== t9) {
t10 = /* @__PURE__ */ jsxs(T0, {
...t3,
sx,
children: [
t6,
t7,
t9
]
});
$[25] = T0;
$[26] = sx;
$[27] = t3;
$[28] = t6;
$[29] = t7;
$[30] = t9;
$[31] = t10;
} else t10 = $[31];
return t10;
};
//#endregion
//#region src/contexts/FileContext.ts
const FileContext = createContext(null);
const useFile = () => {
const $ = c(1);
if ($[0] !== "a9a469a99242723a03ab2ab21b9513f8d7f393e7a397296039721f8243a94fd9") {
for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "a9a469a99242723a03ab2ab21b9513f8d7f393e7a397296039721f8243a94fd9";
}
const context = useContext(FileContext);
if (!context) throw new Error("FileViewer components must be used within FileViewer");
return context;
};
//#endregion
//#region src/components/file/fileViewer/common/ActionsMenu.tsx
const ActionsMenu = (t0) => {
const $ = c(43);
if ($[0] !== "37413a10a2df1dbf561819b83375455df60d2eb9e9781fbb0853c0e5c2f8a772") {
for (let $i = 0; $i < 43; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "37413a10a2df1dbf561819b83375455df60d2eb9e9781fbb0853c0e5c2f8a772";
}
const { meta, menu, setMenu } = t0;
const { t } = useTranslation();
const { fileMetas, onDelete, actions, appName } = useFile();
const { confirm } = useDialogs();
let t1;
if ($[1] !== setMenu) {
t1 = () => {
setMenu(null);
};
$[1] = setMenu;
$[2] = t1;
} else t1 = $[2];
const handleMenuClose = t1;
let t2;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t2 = { from: rootRouteId };
$[3] = t2;
} else t2 = $[3];
const queryClient = useMatch(t2).context.queryClient;
let t3;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t3 = downloadFileMutationOptions();
$[4] = t3;
} else t3 = $[4];
const { mutate: download, isPending: isDownloading } = useMutation(t3);
let t4;
if ($[5] !== queryClient) {
t4 = deleteFileMutationOptions({ queryClient });
$[5] = queryClient;
$[6] = t4;
} else t4 = $[6];
const { mutate: deleteFile, isPending: isDeleting } = useMutation(t4);
let t5;
if ($[7] !== appName || $[8] !== download || $[9] !== handleMenuClose || $[10] !== meta.fileExtension || $[11] !== meta.fileName || $[12] !== meta.id) {
t5 = () => {
handleMenuClose();
download({
id: meta.id,
appName,
fileName: meta.fileName,
fileExtension: meta.fileExtension
});
};
$[7] = appName;
$[8] = download;
$[9] = handleMenuClose;
$[10] = meta.fileExtension;
$[11] = meta.fileName;
$[12] = meta.id;
$[13] = t5;
} else t5 = $[13];
const handleOnDownload = t5;
let t6;
if ($[14] !== appName || $[15] !== confirm || $[16] !== deleteFile || $[17] !== fileMetas || $[18] !== handleMenuClose || $[19] !== meta || $[20] !== onDelete || $[21] !== t) {
t6 = async () => {
if (!await confirm(t("Layout.File.AreYouSureYouWantToDelete", { name: meta.fileName }))) return;
deleteFile({
id: meta.id,
appName
});
handleMenuClose();
if (onDelete) {
const remainingFileMetas = fileMetas.filter((m) => m.id !== meta.id);
onDelete({
remainingFileMetas,
deletedFileMeta: meta
});
}
};
$[14] = appName;
$[15] = confirm;
$[16] = deleteFile;
$[17] = fileMetas;
$[18] = handleMenuClose;
$[19] = meta;
$[20] = onDelete;
$[21] = t;
$[22] = t6;
} else t6 = $[22];
const handleOnDelete = t6;
const t7 = menu !== null;
let t8;
if ($[23] !== menu) {
t8 = menu === null ? void 0 : {
top: menu.mouseY,
left: menu.mouseX
};
$[23] = menu;
$[24] = t8;
} else t8 = $[24];
let t9;
if ($[25] !== actions?.download || $[26] !== handleOnDownload || $[27] !== isDownloading || $[28] !== t) {
t9 = actions?.download !== false && /* @__PURE__ */ jsxs(ListItemButton, {
onClick: handleOnDownload,
disabled: isDownloading,
children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(FileDownload, {}) }), /* @__PURE__ */ jsx(ListItemText, { children: t("Layout.File.Download") })]
});
$[25] = actions?.download;
$[26] = handleOnDownload;
$[27] = isDownloading;
$[28] = t;
$[29] = t9;
} else t9 = $[29];
let t10;
if ($[30] !== actions?.delete || $[31] !== handleOnDelete || $[32] !== isDeleting || $[33] !== t) {
t10 = actions?.delete !== false && /* @__PURE__ */ jsxs(ListItemButton, {
onClick: handleOnDelete,
disabled: isDeleting,
children: [/* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(Delete, {}) }), /* @__PURE__ */ jsx(ListItemText, { children: t("Layout.File.Delete") })]
});
$[30] = actions?.delete;
$[31] = handleOnDelete;
$[32] = isDeleting;
$[33] = t;
$[34] = t10;
} else t10 = $[34];
let t11;
if ($[35] !== t10 || $[36] !== t9) {
t11 = /* @__PURE__ */ jsxs(List, {
disablePadding: true,
children: [t9, t10]
});
$[35] = t10;
$[36] = t9;
$[37] = t11;
} else t11 = $[37];
let t12;
if ($[38] !== handleMenuClose || $[39] !== t11 || $[40] !== t7 || $[41] !== t8) {
t12 = /* @__PURE__ */ jsx(Menu, {
open: t7,
onClose: handleMenuClose,
anchorReference: "anchorPosition",
variant: "menu",
anchorPosition: t8,
children: t11
});
$[38] = handleMenuClose;
$[39] = t11;
$[40] = t7;
$[41] = t8;
$[42] = t12;
} else t12 = $[42];
return t12;
};
//#endregion
//#region src/components/file/fileViewer/FileViewerGrid.tsx
const IMAGE_SIZE = 150;
const FileViewerGrid = (t0) => {
const $ = c(13);
if ($[0] !== "fb41b3b0b995b83bc7531222ea82e43374e75765dca0bbfabbc703db4b87aac4") {
for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "fb41b3b0b995b83bc7531222ea82e43374e75765dca0bbfabbc703db4b87aac4";
}
const { sx, size, itemBar } = t0;
const { fileMetas } = useFile();
let t1;
if ($[1] !== sx) {
t1 = {
overflow: "auto",
...sx
};
$[1] = sx;
$[2] = t1;
} else t1 = $[2];
let t2;
if ($[3] !== fileMetas || $[4] !== itemBar || $[5] !== size) {
let t3;
if ($[7] !== itemBar || $[8] !== size) {
t3 = (fileMeta) => /* @__PURE__ */ jsx(GridFileViewerItem, {
meta: fileMeta,
size,
itemBar
}, fileMeta.id);
$[7] = itemBar;
$[8] = size;
$[9] = t3;
} else t3 = $[9];
t2 = fileMetas.map(t3);
$[3] = fileMetas;
$[4] = itemBar;
$[5] = size;
$[6] = t2;
} else t2 = $[6];
let t3;
if ($[10] !== t1 || $[11] !== t2) {
t3 = /* @__PURE__ */ jsx(Stack, {
direction: "row",
spacing: 1,
sx: t1,
children: t2
});
$[10] = t1;
$[11] = t2;
$[12] = t3;
} else t3 = $[12];
return t3;
};
const GridFileViewerItem = ({ meta, size, itemBar }) => {
const { setImageId, actions, appName } = useFile();
const [showItemBar, setShowItemBar] = useState(itemBar === "always");
const [menu, setMenu] = useState(null);
const { ref, inView } = useInView();
const queryClient = useQueryClient();
const target = useRef(null);
useEffect(() => {
setShowItemBar(itemBar === "always");
}, [itemBar]);
const { data: source, isPending } = useQuery({
...fileThumbnailQueryOptions({
id: meta.id,
appName
}),
enabled: inView
});
const handleOnMouseEnter = () => setShowItemBar(true);
const handleOnMouseLeave = () => itemBar !== "always" && setShowItemBar(false);
const openMenu = (event) => {
setMenu(menu === null ? {
mouseX: event.clientX,
mouseY: event.clientY
} : null);
setTimeout(() => setShowItemBar(true));
};
const { mutate: openFile } = useMutation(openFileMutationOptions({ target }));
const { mutate: download } = useMutation(downloadFileMutationOptions());
const onClick = () => {
switch (meta.mediaType) {
case "image": return setImageId(meta.id);
case "application":
case "video":
target.current = window.open("about:blank", "_blank");
return openFile({
id: meta.id,
appName
});
default: return download({
id: meta.id,
appName,
fileName: meta.fileName,
fileExtension: meta.fileExtension
});
}
};
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ImageListItem, {
sx: {
width: size ?? IMAGE_SIZE,
height: size ?? IMAGE_SIZE
},
onMouseEnter: handleOnMouseEnter,
onMouseLeave: handleOnMouseLeave,
ref,
children: [isPending ? /* @__PURE__ */ jsx(Skeleton, {
variant: "rectangular",
width: size ?? IMAGE_SIZE,
height: size ?? IMAGE_SIZE
}) : /* @__PURE__ */ jsx(Box, {
component: "img",
src: source,
loading: "lazy",
alt: "thumbnail-" + meta.id,
onClick,
onMouseEnter: () => queryClient.prefetchQuery(fileQueryOptions({
id: meta.id,
appName
})),
sx: {
cursor: "pointer",
objectFit: "contain",
width: size ?? IMAGE_SIZE,
height: size ?? IMAGE_SIZE
}
}), itemBar !== "hidden" && showItemBar && /* @__PURE__ */ jsx(ImageListItemBar, {
title: /* @__PURE__ */ jsx(Tooltip, {
title: meta.fileName,
children: /* @__PURE__ */ jsx(Box, { children: meta.fileName })
}),
actionIcon: (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ jsx(IconButton, {
sx: { color: grey[100] },
onClick: openMenu,
"aria-label": "File actions",
children: /* @__PURE__ */ jsx(MoreVert, {})
})
})]
}), (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ jsx(ActionsMenu, {
meta,
menu,
setMenu
})] });
};
//#endregion
//#region src/components/file/fileViewer/FileViewerList.tsx
const FileViewerList = (t0) => {
const $ = c(6);
if ($[0] !== "90821c9c06bc31e3067959087f22fa79fc3b392b2e1718015a5455d608dce1c7") {
for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "90821c9c06bc31e3067959087f22fa79fc3b392b2e1718015a5455d608dce1c7";
}
const { sx } = t0;
const { fileMetas } = useFile();
let t1;
if ($[1] !== fileMetas) {
t1 = fileMetas.map(_temp);
$[1] = fileMetas;
$[2] = t1;
} else t1 = $[2];
let t2;
if ($[3] !== sx || $[4] !== t1) {
t2 = /* @__PURE__ */ jsx(List, {
dense: true,
sx,
children: t1
});
$[3] = sx;
$[4] = t1;
$[5] = t2;
} else t2 = $[5];
return t2;
};
const ListFileViewerItem = ({ meta }) => {
const { setImageId, actions, appName } = useFile();
const [menu, setMenu] = useState(null);
const queryClient = useQueryClient();
const target = useRef(null);
const openMenu = (event) => {
event.stopPropagation();
setMenu(menu === null ? {
mouseX: event.clientX,
mouseY: event.clientY
} : null);
};
const { mutate: openFile } = useMutation(openFileMutationOptions({ target }));
const { mutate: download } = useMutation(downloadFileMutationOptions());
const onClick = () => {
switch (meta.mediaType) {
case "image": return setImageId(meta.id);
case "application":
case "video":
target.current = window.open("about:blank", "_blank");
return openFile({
id: meta.id,
appName
});
default: return download({
id: meta.id,
appName,
fileName: meta.fileName,
fileExtension: meta.fileExtension
});
}
};
const icon = () => {
switch (meta.mediaType) {
case "image": return /* @__PURE__ */ jsx(Image, {});
case "video": return /* @__PURE__ */ jsx(SmartDisplay, {});
default: return /* @__PURE__ */ jsx(AttachFile, {});
}
};
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ListItemButton, {
onClick,
onMouseEnter: () => queryClient.prefetchQuery(fileQueryOptions({
id: meta.id,
appName
})),
children: [
/* @__PURE__ */ jsx(ListItemIcon, { children: icon() }),
/* @__PURE__ */ jsx(ListItemText, { primary: `${meta.fileName}.${meta.fileExtension}` }),
(actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ jsx(IconButton, {
edge: "end",
onClick: openMenu,
"aria-label": "File actions",
children: /* @__PURE__ */ jsx(MoreVert, {})
})
]
}, meta.id), (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ jsx(ActionsMenu, {
meta,
menu,
setMenu
})] });
};
function _temp(fileMeta) {
return /* @__PURE__ */ jsx(ListFileViewerItem, { meta: fileMeta }, fileMeta.id);
}
//#endregion
//#region src/components/file/fileViewer/ImageViewer.tsx
const ImageViewer = ({ metaId }) => {
const { fileMetas, setImageId, appName } = useFile();
const meta = fileMetas.find((m) => m.id === metaId);
const { data: source, isPending } = useQuery({
...fileQueryOptions({
id: meta?.id ?? "",
appName
}),
enabled: !!meta
});
useEffect(() => {
if (metaId) globalThis.addEventListener("keydown", handleOnKeydown);
return () => {
globalThis.removeEventListener("keydown", handleOnKeydown);
};
}, [metaId]);
const handleOnKeydown = (event) => {
const images = fileMetas.filter((m_0) => m_0.mediaType === "image");
const imageIndex = images.findIndex((m_1) => m_1.id === metaId);
switch (event.key) {
case "ArrowLeft": return handleOnArrowLeft(images, imageIndex);
case "ArrowRight": return handleOnArrowRight(images, imageIndex);
case "Backspace":
case "Escape":
event.preventDefault();
return onClose();
}
};
const handleOnArrowLeft = (images_0, index) => {
if (index > 0) {
const previousFile = images_0[index - 1];
setImageId(previousFile.id);
}
};
const handleOnArrowRight = (images_1, index_0) => {
if (index_0 < images_1.length - 1) {
const nextFile = images_1[index_0 + 1];
setImageId(nextFile.id);
}
};
const onClose = () => setImageId("");
if (!meta) return null;
return /* @__PURE__ */ jsxs(Dialog, {
open: true,
onClose,
maxWidth: "xl",
children: [isPending ? /* @__PURE__ */ jsx(Skeleton, {
variant: "rectangular",
sx: {
width: {
xs: "100vw",
sm: 600
},
height: {
xs: "calc(100vh - 56px)",
sm: "calc(100vh - 64px)"
}
}
}) : /* @__PURE__ */ jsx(Box, {
component: "img",
src: source,
alt: meta.fileName,
sx: {
maxWidth: "100vw",
maxHeight: {
xs: "calc(100vh - 56px)",
sm: "calc(100vh - 64px)"
}
}
}), /* @__PURE__ */ jsx(Fab, {
size: "medium",
onClick: onClose,
"aria-label": "Close",
sx: {
position: "fixed",
top: 8,
right: 8
},
children: /* @__PURE__ */ jsx(Close, {})
})]
});
};
//#endregion
//#region src/components/file/FileViewer.tsx
const FileViewer = (t0) => {
const $ = c(22);
if ($[0] !== "f20716e955e976c65e4217e568b647786c1c8599751fff5b227781489170527e") {
for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "f20716e955e976c65e4217e568b647786c1c8599751fff5b227781489170527e";
}
const { appName, subId, onDelete, actions, children } = t0;
let t1;
if ($[1] !== appName || $[2] !== subId) {
t1 = fileMetasQueryOptions({
appName,
subId
});
$[1] = appName;
$[2] = subId;
$[3] = t1;
} else t1 = $[3];
const t2 = !!subId;
let t3;
if ($[4] !== t1 || $[5] !== t2) {
t3 = {
...t1,
enabled: t2
};
$[4] = t1;
$[5] = t2;
$[6] = t3;
} else t3 = $[6];
const { data: t4 } = useQuery(t3);
let t5;
if ($[7] !== t4) {
t5 = t4 === void 0 ? [] : t4;
$[7] = t4;
$[8] = t5;
} else t5 = $[8];
const fileMetas = t5;
const [imageId, setImageId] = useState("");
if (fileMetas.length === 0) return null;
let t6;
if ($[9] !== actions || $[10] !== appName || $[11] !== fileMetas || $[12] !== onDelete) {
t6 = {
appName,
fileMetas,
onDelete,
actions,
setImageId
};
$[9] = actions;
$[10] = appName;
$[11] = fileMetas;
$[12] = onDelete;
$[13] = t6;
} else t6 = $[13];
let t7;
if ($[14] !== children) {
t7 = children({
Grid: FileViewerGrid,
List: FileViewerList
});
$[14] = children;
$[15] = t7;
} else t7 = $[15];
let t8;
if ($[16] !== imageId) {
t8 = /* @__PURE__ */ jsx(ImageViewer, { metaId: imageId });
$[16] = imageId;
$[17] = t8;
} else t8 = $[17];
let t9;
if ($[18] !== t6 || $[19] !== t7 || $[20] !== t8) {
t9 = /* @__PURE__ */ jsxs(FileContext.Provider, {
value: t6,
children: [t7, t8]
});
$[18] = t6;
$[19] = t7;
$[20] = t8;
$[21] = t9;
} else t9 = $[21];
return t9;
};
//#endregion
//#region src/components/router/RouterButton.tsx
const Component$3 = React.forwardRef(function ButtonComponent(props, reference) {
const $ = c(4);
if ($[0] !== "ac6204c9fa419bc8efad3ebea0df725f19f2cc476a09c695e535caec26527133") {
for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "ac6204c9fa419bc8efad3ebea0df725f19f2cc476a09c695e535caec26527133";
}
let t0;
if ($[1] !== props || $[2] !== reference) {
t0 = /* @__PURE__ */ jsx(Button, {
ref: reference,
component: "a",
...props
});
$[1] = props;
$[2] = reference;
$[3] = t0;
} else t0 = $[3];
return t0;
});
const CreatedComponent$3 = createLink(Component$3);
const RouterButton = (props) => {
const $ = c(3);
if ($[0] !== "ac6204c9fa419bc8efad3ebea0df725f19f2cc476a09c695e535caec26527133") {
for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "ac6204c9fa419bc8efad3ebea0df725f19f2cc476a09c695e535caec26527133";
}
let t0;
if ($[1] !== props) {
t0 = /* @__PURE__ */ jsx(CreatedComponent$3, { ...props });
$[1] = props;
$[2] = t0;
} else t0 = $[2];
return t0;
};
//#endregion
//#region src/components/router/RouterFab.tsx
const Component$2 = React.forwardRef(function FabComponent(props, reference) {
const $ = c(4);
if ($[0] !== "ecf406c2f1df75bd8d4f8cc1e2a0841119cda75e807b28c7c03400a2d927c16b") {
for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "ecf406c2f1df75bd8d4f8cc1e2a0841119cda75e807b28c7c03400a2d927c16b";
}
let t0;
if ($[1] !== props || $[2] !== reference) {
t0 = /* @__PURE__ */ jsx(Fab, {
ref: reference,
component: "a",
...props
});
$[1] = props;
$[2] = reference;
$[3] = t0;
} else t0 = $[3];
return t0;
});
const CreatedComponent$2 = createLink(Component$2);
const RouterFab = (props) => {
const $ = c(3);
if ($[0] !== "ecf406c2f1df75bd8d4f8cc1e2a0841119cda75e807b28c7c03400a2d927c16b") {
for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "ecf406c2f1df75bd8d4f8cc1e2a0841119cda75e807b28c7c03400a2d927c16b";
}
let t0;
if ($[1] !== props) {
t0 = /* @__PURE__ */ jsx(CreatedComponent$2, { ...props });
$[1] = props;
$[2] = t0;
} else t0 = $[2];
return t0;
};
//#endregion
//#region src/components/router/RouterLink.tsx
const Component$1 = React.forwardRef(function LinkComponent(props, reference) {
const $ = c(4);
if ($[0] !== "b12e87e18a050ab0e29a4efcc3bd2a9fa6915db983e56ea2dc68853a7dc4b979") {
for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "b12e87e18a050ab0e29a4efcc3bd2a9fa6915db983e56ea2dc68853a7dc4b979";
}
let t0;
if ($[1] !== props || $[2] !== reference) {
t0 = /* @__PURE__ */ jsx(Link, {
ref: reference,
...props
});
$[1] = props;
$[2] = reference;
$[3] = t0;
} else t0 = $[3];
return t0;
});
const CreatedComponent$1 = createLink(Component$1);
const RouterLink = (props) => {
const $ = c(3);
if ($[0] !== "b12e87e18a050ab0e29a4efcc3bd2a9fa6915db983e56ea2dc68853a7dc4b979") {
for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "b12e87e18a050ab0e29a4efcc3bd2a9fa6915db983e56ea2dc68853a7dc4b979";
}
let t0;
if ($[1] !== props) {
t0 = /* @__PURE__ */ jsx(CreatedComponent$1, { ...props });
$[1] = props;
$[2] = t0;
} else t0 = $[2];
return t0;
};
//#endregion
//#region src/components/router/RouterTab.tsx
const Component = React.forwardRef(function TabComponent(props, reference) {
const $ = c(4);
if ($[0] !== "219e07108be3e229bc6eb53840beb65505cbaaf46f02d872937e7895165a73de") {
for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "219e07108be3e229bc6eb53840beb65505cbaaf46f02d872937e7895165a73de";
}
let t0;
if ($[1] !== props || $[2] !== reference) {
t0 = /* @__PURE__ */ jsx(Tab, {
ref: reference,
component: "a",
...props
});
$[1] = props;
$[2] = reference;
$[3] = t0;
} else t0 = $[3];
return t0;
});
const CreatedComponent = createLink(Component);
const RouterTab = (props) => {
const $ = c(3);
if ($[0] !== "219e07108be3e229bc6eb53840beb65505cbaaf46f02d872937e7895165a73de") {
for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "219e07108be3e229bc6eb53840beb65505cbaaf46f02d872937e7895165a73de";
}
let t0;
if ($[1] !== props) {
t0 = /* @__PURE__ */ jsx(CreatedComponent, { ...props });
$[1] = props;
$[2] = t0;
} else t0 = $[2];
return t0;
};
//#endregion
//#region src/components/router/RouterNotFound.tsx
function RouterNotFound() {
const $ = c(9);
if ($[0] !== "8a932f32be41de20bb279988c19a99e19e47742df0f90842afbafb2f61f78e2b") {
for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "8a932f32be41de20bb279988c19a99e19e47742df0f90842afbafb2f61f78e2b";
}
const { t } = useTranslation();
let t0;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t0 = {
alignItems: "center",
justifyContent: "center",
px: 2
};
$[1] = t0;
} else t0 = $[1];
let t1;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t1 = {
display: "flex",
alignItems: "center",
mb: 4
};
$[2] = t1;
} else t1 = $[2];
let t2;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t2 = /* @__PURE__ */ jsx(Typography, {
variant: "h3",
component: "span",
sx: {
fontWeight: 500,
lineHeight: 1
},
children: "404"
});
$[3] = t2;
} else t2 = $[3];
let t3;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t3 = /* @__PURE__ */ jsx(Divider, {
orientation: "vertical",
flexItem: true,
sx: { mx: 3 }
});
$[4] = t3;
} else t3 = $[4];
let t4;
if ($[5] !== t) {
t4 = t("Layout.ThisPageCouldNotBeFound");
$[5] = t;
$[6] = t4;
} else t4 = $[6];
let t5;
if ($[7] !== t4) {
t5 = /* @__PURE__ */ jsx(Fullscreen, {
sx: t0,
children: /* @__PURE__ */ jsxs(Box, {
sx: t1,
children: [
t2,
t3,
/* @__PURE__ */ jsx(Typography, {
variant: "h5",
component: "span",
children: t4
})
]
})
});
$[7] = t4;
$[8] = t5;
} else t5 = $[8];
return t5;
}
//#endregion
//#region src/components/router/RouterError.tsx
const RouterError = (t0) => {
const $ = c(12);
if ($[0] !== "5b254385a6d8e94b48b6f5b7d9a805c0a6c781995d61d22d20f368b43b726800") {
for (let $i = 0; $i < 12; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
$[0] = "5b254385a6d8e94b48b6f5b7d9a805c0a6c781995d61d22d20f368b43b726800";
}
const { error } = t0;
const isError = error instanceof Error;
let t1;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t1 = {
alignItems: "center",
justifyContent: "center",
px: 2
};
$[1] = t1;
} else t1 = $[1];
let t2;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t2 = {
display: "flex",
alignItems: "center",
mb: 4
};
$[2] = t2;
} else t2 = $[2];
let t3;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t3 = {
fontWeight: 500,
lineHeight: 1
};
$[3] = t3;
} else t3 = $[3];
const t4 = isError && error.name || "500";
let t5;
if ($[4] !== t4) {
t5 = /* @__PURE__ */ jsx(Typography, {
variant: "h3",
component: "span",
sx: t3,
children: t4
});
$[4] = t4;
$[5] = t5;
} else t5 = $[5];
let t6;
if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
t6 = /* @__PURE__ */ jsx(Divider, {
orientation: "vertical",
flexItem: true,
sx: { mx: 3 }
});
$[6] = t6;
} else t6 = $[6];
const t7 = isError ? error.message : String(error);
let t8;
if ($[7] !== t7) {
t8 = /* @__PURE__ */ jsx(Typography, {
variant: "h5",
component: "span",
children: t7
});
$[7] = t7;
$[8] = t8;
} else t8 = $[8];
let t9;
if ($[9] !== t5 || $[10] !== t8) {
t9 = /* @__PURE__ */ jsx(Fullscreen, {
sx: t1,
children: /* @__PURE__ */ jsxs(Box, {
sx: t2,
children: [
t5,
t6,
t8
]
})
});
$[9] = t5;
$[10] = t8;
$[11] = t9;
} else t9 = $[11];
return t9;
};
//#endregion
//#region src/components/table/LayoutTable.tsx
const ROW_HEIGHT = 52;
const COLUMN_HEADER_HEIGHT = 56;
/** Rows and columns kept mounted past the viewport edge so scrolling never shows a gap. */
const ROW_OVERSCAN = 6;
const COLUMN_OVERSCAN = 3;
const JUSTIFY = {
left: "flex-start",
center: "center",
right: "flex-end"
};
const CELL_SX = {
py: 0,
px: "10px"
};
const UTILITY_SX = {
py: 0,
px: .5
};
/** Pins the aggregation row to the bottom of the scroll area, like the sticky header. */
const FOOTER_SX = {
position: "sticky",
bottom: 0,
zIndex: 3,
bgcolor: "background.paper",
borderTop: 1,
borderTopStyle: "solid",
borderColor: "divider"
};
const pinnedWidth = (columns) => columns.reduce((total, column) => total + column.getSize(), 0);
function LayoutTable({ table, loading = false, pagination = false, pageSizeOptions = [
10,
25,
50,
100
], showToolbar = false, disableColumnMenu = false, onRowClick, onRowDoubleClick, sx, ...toolbar }) {
"use no memo";
const { t } = useTranslation();
const containerRef = useRef(null);
const headerGroups = table.getHeaderGroups();
const headerHeight = headerGroups.length * COLUMN_HEADER_HEIGHT;
const visibleColumnCount = table.getVisibleLeafColumns().length;
const hasFooter = table.getAllLeafColumns().some((column) => column.columnDef.footer);
const { top, bottom } = table.state.rowPinning;
const pinnedIds = /* @__PURE__ */ new Set([...top, ...bottom]);
const centerRows = (pagination ? table.getRowModel() : table.getPrePaginatedRowModel()).rows.filter((row) => !pinnedIds.has(row.id));
const rows = [
...table.getTopRows(),
...centerRows,
...table.getBottomRows()
];
const isEmpty = !loading && !rows.length;
const pageSize = table.state.pagination.pageSize;
useEffect(() => {
if (!pagination && pageSize !== rows.length) table.setPageSize(Math.max(rows.length, 1));
}, [
pagination,
pageSize,
rows.length,
table
]);
const startColumns = table.getStartVisibleLeafColumns();
const endColumns = table.getEndVisibleLeafColumns();
const centerColumns = table.getCenterVisibleLeafColumns();
const startPinnedWidth = pinnedWidth(startColumns);
const endPinnedWidth = pinnedWidth(endColumns);
const virtualizeColumns = headerGroups.length === 1 && !loading;
const rowVirtualizer = useVirtualizer({
count: rows.length,
getScrollElement: () => containerRef.current,
estimateSize: () => ROW_HEIGHT,
getItemKey: (index) => rows[index].id,
overscan: ROW_OVERSCAN,
scrollMargin: headerHeight,
scrollPaddingStart: headerHeight
});
const columnVirtualizer = useVirtualizer({
count: virtualizeColumns ? centerColumns.length : 0,
getScrollElement: () => containerRef.current,
estimateSize: (index_0) => centerColumns[index_0].getSize(),
getItemKey: (index_1) => centerColumns[index_1].id,
horizontal: true,
overscan: COLUMN_OVERSCAN,
scrollPaddingStart: startPinnedWidth,
scrollPaddingEnd: endPinnedWidth
});
const columnSizing = table.state.columnSizing;
useEffect(() => {
columnVirtualizer.measure();
}, [columnVirtualizer, columnSizing]);
const focusedCell = table.getFocusedCell();
const focusedRowId = focusedCell?.row.id;
const focusedColumnId = focusedCell?.column.id;
useEffect(() => {
const cell = containerRef.current?.querySelector("tbody td[tabindex='0']");
if (cell) {
cell.scrollIntoView({
block: "nearest",
inline: "nearest"
});
return;
}
const rowIndex = rows.findIndex((row_0) => row_0.id === focusedRowId);
if (rowIndex >= 0) rowVirtualizer.scrollToIndex(rowIndex);
const columnIndex = centerColumns.findIndex((column_0) => column_0.id === focusedColumnId);
if (columnIndex >= 0) columnVirtualizer.scrollToIndex(columnIndex);
}, [focusedRowId, focusedColumnId]);
const hasCellSelection = table.state.cellSelection.length > 0;
const copySelection = () => {
const text = toClipboardText(table.getSelectedCellRangesData());
if (text) navigator.clipboard.writeText(text);
};
useHotkeys([
{
hotkey: "ArrowUp",
callback: () => table.moveCellSelection("up")
},
{
hotkey: "ArrowDown",
callback: () => table.moveCellSelection("down")
},
{
hotkey: "ArrowLeft",
callback: () => table.moveCellSelection("left")
},
{
hotkey: "ArrowRight",
callback: () => table.moveCellSelection("right")
},
{
hotkey: "Shift+ArrowUp",
callback: () => table.extendCellSelection("up")
},
{
hotkey: "Shift+ArrowDown",
callback: () => table.extendCellSelection("down")
},
{
hotkey: "Shift+ArrowLeft",
callback: () => table.extendCellSelection("left")
},
{
hotkey: "Shift+ArrowRight",
callback: () => table.extendCellSelection("right")
},
{
hotkey: "Mod+C",
callback: copySelection
},
{
hotkey: "Escape",
callback: () => table.resetCellSelection(true)
},
{
hotkey: "Mod+A",
callback: () => table.selectAllCells(),
options: { enabled: true }
}
], {
target: containerRef,
enabled: hasCellSelection
});
const virtualRows = rowVirtualizer.getVirtualItems();
const paddingTop = virtualRows.length ? virtualRows[0].start - headerHeight : 0;
const paddingBottom = virtualRows.length ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end + headerHeight : 0;
const virtualColumns = columnVirtualizer.getVirtualItems();
const firstColumn = virtualColumns.length ? virtualColumns[0] : void 0;
const lastColumn = virtualColumns.length ? virtualColumns[virtualColumns.length - 1] : void 0;
const paddingStart = firstColumn ? firstColumn.start : 0;
const paddingEnd = lastColumn ? columnVirtualizer.getTotalSize() - lastColumn.end : 0;
/**
* Splits a display-ordered leaf array — a header row, a footer row or a row's
* cells, which TanStack all orders start-pinned, centre, end-pinned — into the
* pinned regions, which always render, and the virtualized centre window.
*/
const windowColumns = (all) => firstColumn && lastColumn ? {
start: all.slice(0, startColumns.length),
center: all.slice(startColumns.length + firstColumn.index, startColumns.length + lastColumn.index + 1),
end: endColumns.length ? all.slice(all.length - endColumns.length) : []
} : {
start: all,
center: [],
end: []
};
/** Absorbs the width of the columns the centre window skipped. */
const skippedColumns = (width) => width > 0 ? /* @__PURE__ */ jsx(TableCell, {
"aria-hidden": true,
style: { width },
sx: { p: 0 }
}) : null;
const renderHeader = (h, groupIndex) => /* @__PURE__ */ jsx(table.AppHeader, {
header: h,
children: (header) => {
const align = columnAlign(header.column);
const labelled = hasColumnLabel(header.column);
return /* @__PURE__ */ jsxs(TableCell, {
colSpan: header.colSpan,
align,
sortDirection: header.column.getIsSorted(),
sx: {
position: "sticky",
top: groupIndex * COLUMN_HEADER_HEIGHT,
zIndex: 3,
bgcolor: "background.paper",
width: header.getSize(),
whiteSpace: "nowrap",
overflow: "hidden",
...labelled ? CELL_SX : UTILITY_SX,
...pinnedSx(header.column, true)
},
children: [header.isPlaceholder ? null : /* @__PURE__ */ jsxs(Box, {
sx: {
display: "flex",
alignItems: "center",
minWidth: 0,
justifyContent: JUSTIFY[align]
},
children: [/* @__PURE__ */ jsx(Box, {
sx: {
flex: labelled ? 1 : "0 1 auto",
minWidth: 0,
display: "flex",
justifyContent: JUSTIFY[align],
overflow: "hidden",
"& .MuiTableSortLabel-root": { minWidth: 0 },
"& .MuiTableSortLabel-root > *:first-of-type": {
overflow: "hidden",
textOverflow: "ellipsis"
}
},
children: /* @__PURE__ */ jsx(header.HeaderSortLabel, { children: /* @__PURE__ */ jsx(header.FlexRender, {}) })
}), !disableColumnMenu && /* @__PURE__ */ jsx(header.HeaderMenu, {})]
}), /* @__PURE__ */ jsx(header.HeaderResizeHandle, {})]
});
}
}, h.id);
const renderCell = (c) => /* @__PURE__ */ jsx(table.AppCell, {
cell: c,
children: (cell_0) => cell_0.getIsCovered() ? null : /* @__PURE__ */ jsx(TableCell, {
align: columnAlign(cell_0.column),
rowSpan: cell_0.getRowSpan(),
colSpan: cell_0.getColSpan(),
tabIndex: cell_0.getCanSelect() ? cell_0.getTabIndex() : void 0,
onMouseDown: cell_0.getSelectionStartHandler(),
onMouseEnter: cell_0.getSelectionExtendHandler(),
sx: {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
userSelect: cell_0.getCanSelect() ? "none" : void 0,
...hasColumnLabel(cell_0.column) ? CELL_SX : UTILITY_SX,
...pinnedSx(cell_0.column),
...cellSelectionSx(cell_0)
},
children: cell_0.getIsGrouped() ? /* @__PURE__ */ jsx(cell_0.GroupCell, {}) : cell_0.row.getIsGrouped() && !cell_0.getIsAggregated() ? null : /* @__PURE__ */ jsx(cell_0.FlexRender, {})
})
}, c.id);
const renderFooter = (f) => /* @__PURE__ */ jsx(table.AppFooter, {
header: f,
children: (footer) => /* @__PURE__ */ jsx(TableCell, {
colSpan: footer.colSpan,
align: columnAlign(footer.column),
sx: {
...hasColumnLabel(footer.column) ? CELL_SX : UTILITY_SX,
...pinnedSx(footer.column),
...FOOTER_SX
},
children: footer.isPlaceholder ? null : /* @__PURE__ */ jsx(footer.FlexRender, {})
})
}, f.id);
const renderRow = (row_1) => {
const cells = windowColumns(row_1.getVisibleCells());
return /* @__PURE__ */ jsxs(TableRow, {
hover: true,
selected: row_1.getIsSelected(),
onClick: onRowClick && (() => onRowClick(row_1)),
onDoubleClick: onRowDoubleClick && (() => onRowDoubleClick(row_1)),
sx: {
height: ROW_HEIGHT,
cursor: onRowClick || onRowDoubleClick ? "pointer" : void 0
},
children: [
cells.start.map(renderCell),
skippedColumns(paddingStart),
cells.center.map(renderCell),
skippedColumns(paddingEnd),
cells.end.map(renderCell),
/* @__PURE__ */ jsx(TableCell, {
"aria-hidden": true,
sx: { p: 0 }
})
]
}, row_1.id);
};
/** Reserves the scroll height of the rows outside the virtual window. */
const skippedRows = (height) => height > 0 ? /* @__PURE__ */ jsx(TableRow, {
"aria-hidden": true,
style: { height },
children: /* @__PURE__ */ jsx(TableCell, {
colSpan: visibleColumnCount + 1,
sx: {
p: 0,
border: 0
}
})
}) : null;
return /* @__PURE__ */ jsx(table.AppTable, { children: /* @__PURE__ */ jsxs(Paper, {
variant: "outlined",
sx: {
display: "flex",
flexDirection: "column",
height: "100%",
minHeight: 0,
overflow: "hidden",
...sx
},
children: [
showToolbar && /* @__PURE__ */ jsx(table.Toolbar, { ...toolbar }),
/* @__PURE__ */ jsx(TableContainer, {
ref: containerRef,
sx: {
flex: 1,
minHeight: 0,
position: "relative",
scrollPaddingBlockStart: `${headerHeight}px`,
scrollPaddingInlineStart: `${startPinnedWidth}px`,
scrollPaddingInlineEnd: `${endPinnedWidth}px`
},
children: /* @__PURE__ */ jsxs(Table, {
stickyHeader: true,
size: "small",
sx: {
tableLayout: "fixed",
width: table.getTotalSize(),
minWidth: "100%",
"& tbody .MuiTableRow-root:last-of-type .MuiTableCell-root": { borderBottom: 0 },
"& .MuiTableCell-root:focus": {
outline: "1px solid",
outlineColor: "primary.main",
outlineOffset: -1
}
},
children: [
/* @__PURE__ */ jsx(TableHead, { children: headerGroups.map((headerGroup, groupIndex_0) => {
const headers = windowColumns(headerGroup.headers.filter((header_0) => header_0.column.getIsVisible()));
return /* @__PURE__ */ jsxs(TableRow, {
sx: { height: COLUMN_HEADER_HEIGHT },
children: [
headers.start.map((h_0) => renderHeader(h_0, groupIndex_0)),
skippedColumns(paddingStart),
headers.center.map((h_1) => renderHeader(h_1, groupIndex_0)),
skippedColumns(paddingEnd),
headers.end.map((h_2) => renderHeader(h_2, groupIndex_0)),
/* @__PURE__ */ jsx(TableCell, {
"aria-hidden": true,
sx: {
p: 0,
position: "sticky",
top: groupIndex_0 * COLUMN_HEADER_HEIGHT,
zIndex: 3,
bgcolor: "background.paper"
}
})
]
}, headerGroup.id);
}) }),
/* @__PURE__ */ jsxs(TableBody, { children: [loading ? /* @__PURE__ */ jsx(table.Skeleton, { rowHeight: ROW_HEIGHT }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
skippedRows(paddingTop),
virtualRows.map((virtualRow) => renderRow(rows[virtualRow.index])),
skippedRows(paddingBottom)
] }), isEmpty && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
colSpan: visibleColumnCount + 1,
sx: {
border: 0,
p: 0
},
children: /* @__PURE__ */ jsxs(Box, {
sx: {
position: "absolute",
top: headerHeight,
left: 0,
right: 0,
bottom: 0,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 1,
color: "text.secondary",
bgcolor: "background.paper",
"& .no-rows-primary": { opacity: .7 },
"& .no-rows-secondary": { opacity: .3 }
},
children: [/* @__PURE__ */ jsxs("svg", {
fill: "currentColor",
width: 96,
viewBox: "0 0 452 257",
"aria-hidden": true,
focusable: "false",
children: [
/* @__PURE__ */ jsx("path", {
className: "no-rows-primary",
d: "M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"
}),
/* @__PURE__ */ jsx("path", {
className: "no-rows-primary",
d: "M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"
}),
/* @__PURE__ */ jsx("path", {
className: "no-rows-primary",
d: "M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"
}),
/* @__PURE__ */ jsx("path", {
className: "no-rows-secondary",
d: "M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"
})
]
}), /* @__PURE__ */ jsx(Box, { children: t("Layout.Table.NoRows") })]
})
}) })] }),
hasFooter && /* @__PURE__ */ jsx(TableFooter, { children: table.getFooterGroups().map((footerGroup) => {
const footers = windowColumns(footerGroup.headers.filter((header_1) => header_1.column.getIsVisible()));
return /* @__PURE__ */ jsxs(TableRow, { children: [
footers.start.map(renderFooter),
skippedColumns(paddingStart),
footers.center.map(renderFooter),
skippedColumns(paddingEnd),
footers.end.map(renderFooter),
/* @__PURE__ */ jsx(TableCell, {
"aria-hidden": true,
sx: {
p: 0,
...FOOTER_SX
}
})
] }, footerGroup.id);
}) })
]
})
}),
pagination && /* @__PURE__ */ jsx(table.Pagination, { pageSizeOptions })
]
}) });
}
//#endregion
export { AggregatedCell, Dropzone, FileViewer, Fullscreen, LayoutTable, LoginForm, RouterButton, RouterError, RouterFab, RouterIconButton, RouterLink, RouterListItemButton, RouterNotFound, RouterTab };
//# sourceMappingURL=components.mjs.map