wcz-test 6.7.7 → 6.8.0

package/dist/components.cjs

@@ -1,802 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components.ts
-var components_exports = {};
-__export(components_exports, {
-  ChipInputCell: () => ChipInputCell,
-  Dropzone: () => Dropzone,
-  EditableColumnHeader: () => EditableColumnHeader,
-  FileViewer: () => FileViewer,
-  Fullscreen: () => Fullscreen,
-  RouterButton: () => RouterButton,
-  RouterError: () => RouterError,
-  RouterGridActionsCellItem: () => RouterGridActionsCellItem,
-  RouterIconButton: () => RouterIconButton,
-  RouterLink: () => RouterLink,
-  RouterListItemButton: () => RouterListItemButton,
-  RouterNotFound: () => RouterNotFound,
-  RouterTab: () => RouterTab,
-  TypographyWithIcon: () => TypographyWithIcon
-});
-module.exports = __toCommonJS(components_exports);
-
-// src/components/core/TypographyWithIcon.tsx
-var import_material = require("@mui/material");
-var import_jsx_runtime = require("react/jsx-runtime");
-var TypographyWithIcon = ({ startIcon, endIcon, children, sx, ...props }) => {
-  const iconSx = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    lineHeight: 0,
-    "& > svg": {
-      display: "block"
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_material.Typography,
-    {
-      component: "span",
-      sx: {
-        display: "inline-flex",
-        alignItems: "center",
-        verticalAlign: "middle",
-        ...sx
-      },
-      gap: 1,
-      ...props,
-      children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Stack, { component: "span", sx: iconSx, children: startIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Stack, { component: "span", sx: { display: "inline", lineHeight: "inherit" }, children }),
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Stack, { component: "span", sx: iconSx, children: endIcon })
-      ]
-    }
-  );
-};
-
-// src/components/core/Fullscreen.tsx
-var import_material2 = require("@mui/material");
-var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Fullscreen = ({ children, sx, ...props }) => {
-  const reference = (0, import_react.useRef)(null);
-  const [height, setHeight] = (0, import_react.useState)();
-  const recompute = (0, import_react.useEffectEvent)(() => {
-    if (!reference.current) return;
-    const top = Math.ceil(reference.current.getBoundingClientRect().top);
-    const avail = Math.max(0, window.innerHeight - top);
-    setHeight(avail);
-  });
-  (0, import_react.useEffect)(() => {
-    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();
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_material2.Box,
-    {
-      ref: reference,
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        minHeight: 0,
-        width: "100%",
-        overflow: "auto",
-        ...sx
-      },
-      height,
-      ...props,
-      children
-    }
-  );
-};
-
-// src/components/file/Dropzone.tsx
-var import_CloudUpload = __toESM(require("@mui/icons-material/CloudUpload"), 1);
-var import_material3 = require("@mui/material");
-var import_react_dropzone = require("react-dropzone");
-var import_react_i18next = require("react-i18next");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var 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"
-};
-var Dropzone = ({ sx, ...props }) => {
-  const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } = (0, import_react_dropzone.useDropzone)(props);
-  const { t } = (0, import_react_i18next.useTranslation)();
-  const theme = (0, import_material3.useTheme)();
-  const style = {
-    ...baseStyle,
-    ...isFocused ? { borderColor: theme.palette.primary.main } : {},
-    ...isDragAccept ? { borderColor: theme.palette.success.main } : {},
-    ...isDragReject ? { borderColor: theme.palette.error.main } : {}
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_material3.Paper, { variant: "outlined", ...getRootProps({ style }), sx, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...getInputProps(), style: { display: "none" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_CloudUpload.default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.Typography, { children: t("Layout.File.DragSomeFilesHereOrClickToSelectThem") })
-  ] });
-};
-
-// src/components/file/FileViewer.tsx
-var import_react9 = require("react");
-
-// src/components/file/fileViewer/FileViewerGrid.tsx
-var import_MoreVert = __toESM(require("@mui/icons-material/MoreVert"), 1);
-var import_material6 = require("@mui/material");
-var import_colors = require("@mui/material/colors");
-var import_react6 = require("react");
-var import_react_intersection_observer = require("react-intersection-observer");
-
-// src/components/file/fileViewer/common/ActionsMenu.tsx
-var import_Delete = __toESM(require("@mui/icons-material/Delete"), 1);
-var import_FileDownload = __toESM(require("@mui/icons-material/FileDownload"), 1);
-var import_material5 = require("@mui/material");
-var import_react_i18next3 = require("react-i18next");
-
-// src/contexts/FileContext.ts
-var import_react2 = require("react");
-var FileContext = (0, import_react2.createContext)(null);
-var useFile = () => {
-  const context = (0, import_react2.useContext)(FileContext);
-  if (!context) {
-    throw new Error("FileViewer components must be used within FileViewer");
-  }
-  return context;
-};
-
-// src/hooks/DialogsHooks.tsx
-var import_material4 = require("@mui/material");
-var import_react4 = require("react");
-var import_react_i18next2 = require("react-i18next");
-
-// src/contexts/DialogsContext.ts
-var import_react3 = require("react");
-var DialogsContext = (0, import_react3.createContext)({});
-
-// src/hooks/DialogsHooks.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function AlertDialog({ open, payload, onClose }) {
-  const { t } = (0, import_react_i18next2.useTranslation)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.Dialog, { maxWidth: "xs", fullWidth: true, open, onClose: () => onClose(), disableRestoreFocus: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogTitle, { children: payload.title ?? t("Layout.Dialog.Alert") }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogContent, { children: payload.message }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogActions, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Button, { onClick: () => onClose(), autoFocus: true, children: t("Layout.Dialog.Confirm") }) })
-  ] });
-}
-function ConfirmDialog({ open, payload, onClose }) {
-  const { t } = (0, import_react_i18next2.useTranslation)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.Dialog, { maxWidth: "xs", fullWidth: true, open, onClose: () => onClose(false), disableRestoreFocus: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogTitle, { children: payload.title ?? t("Layout.Dialog.Confirm") }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.DialogContent, { children: payload.message }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material4.DialogActions, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Button, { onClick: () => onClose(false), children: payload.cancelText ?? t("Layout.Dialog.Cancel") }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material4.Button, { onClick: () => onClose(true), autoFocus: true, children: t("Layout.Dialog.Confirm") })
-    ] })
-  ] });
-}
-function useDialogs() {
-  const { open, close } = (0, import_react4.useContext)(DialogsContext);
-  const alert = (0, import_material4.useEventCallback)(
-    (message, { ...options } = {}) => open(AlertDialog, { ...options, message })
-  );
-  const confirm = (0, import_material4.useEventCallback)(
-    (message, { ...options } = {}) => open(ConfirmDialog, { ...options, message })
-  );
-  return { alert, confirm, open, close };
-}
-
-// src/queries/FileHooks.ts
-var import_react_query = require("@tanstack/react-query");
-var import_file_saver = __toESM(require("file-saver"), 1);
-var import_react5 = require("react");
-var import_tus_js_client = require("tus-js-client");
-var import_uuidv7 = require("uuidv7");
-var import_zod2 = __toESM(require("zod"), 1);
-
-// src/models/file/FileMeta.ts
-var z = __toESM(require("zod"), 1);
-var FileMetaSchema = z.object({
-  id: z.uuid(),
-  subId: z.uuid(),
-  appName: z.string().trim().min(1).max(255),
-  fileName: z.string().trim().min(1).max(255),
-  fileExtension: z.string().trim().min(1).max(255),
-  fileSize: z.number().min(0),
-  mediaSubType: z.string().trim().min(1).max(255),
-  mediaType: z.string().trim().min(1).max(255),
-  mimeType: z.string().trim().min(1).max(255),
-  createdBy: z.string().trim().min(1).max(255),
-  createdDate: z.date()
-});
-
-// src/lib/utils.ts
-var import_axios = __toESM(require("axios"), 1);
-
-// src/env.ts
-var import_env_core = require("@t3-oss/env-core");
-var import_zod = require("zod");
-var import_meta = {};
-var clientEnv = (0, import_env_core.createEnv)({
-  clientPrefix: "VITE_",
-  client: {
-    VITE_APP_TITLE: import_zod.z.string(),
-    VITE_MUI_LICENSE_KEY: import_zod.z.string(),
-    VITE_API_URL: import_zod.z.url()
-  },
-  runtimeEnv: import_meta.env,
-  emptyStringAsUndefined: true
-});
-var serverEnv = (0, import_env_core.createEnv)({
-  server: {
-    DATABASE_URL: import_zod.z.string(),
-    MICROSOFT_CLIENT_ID: import_zod.z.string(),
-    MICROSOFT_CLIENT_SECRET: import_zod.z.string()
-  },
-  runtimeEnv: process.env,
-  emptyStringAsUndefined: true
-});
-
-// src/lib/utils.ts
-var httpClient = import_axios.default.create({
-  baseURL: clientEnv.VITE_API_URL
-  // TODO: Not working in children projects
-});
-var toKebabCase = (str) => {
-  return str.replaceAll(/([a-z])([A-Z])/g, "$1-$2").replaceAll(/[\s_]+/g, "-").replaceAll(/[^a-zA-Z0-9-]/g, "").toLowerCase().replaceAll(/-+/g, "-").replaceAll(/(^-|-$)/g, "");
-};
-
-// src/queries/FileHooks.ts
-var QUERY_KEY = "file";
-var HOUR = 1e3 * 60 * 60;
-var APP_NAME = toKebabCase(clientEnv.VITE_APP_TITLE);
-var GetFileMetasParamsSchema = import_zod2.default.object({
-  appName: import_zod2.default.string().min(1).max(255).default(APP_NAME).optional(),
-  subId: import_zod2.default.uuid()
-});
-var useGetFileMetas = (params, options) => {
-  const queryParams = new URLSearchParams();
-  queryParams.append("appName", params.appName ?? APP_NAME);
-  queryParams.append("subId", params.subId);
-  return (0, import_react_query.useQuery)({
-    ...options,
-    queryKey: [QUERY_KEY, "meta", params.appName ?? APP_NAME, params.subId],
-    queryFn: ({ signal }) => httpClient.request({
-      url: `/${QUERY_KEY}/v1/meta?${queryParams.toString()}`,
-      method: "GET",
-      signal
-    }),
-    staleTime: HOUR,
-    gcTime: HOUR,
-    refetchOnWindowFocus: false
-  });
-};
-var GetFileThumbnailParamsSchema = import_zod2.default.object({
-  appName: import_zod2.default.string().min(1).max(255).default(APP_NAME).optional(),
-  meta: FileMetaSchema.nullish()
-});
-var useGetFileThumbnail = (params, options) => {
-  const queryParams = new URLSearchParams();
-  queryParams.append("appName", params.appName ?? APP_NAME);
-  queryParams.append("id", params.meta?.id ?? "");
-  return (0, import_react_query.useQuery)({
-    ...options,
-    queryKey: [QUERY_KEY, "thumbnail", params.appName ?? APP_NAME, params.meta?.id],
-    queryFn: ({ signal }) => httpClient.request({
-      url: `/${QUERY_KEY}/v1/thumbnail?${queryParams.toString()}`,
-      method: "GET",
-      signal,
-      responseType: "blob"
-    }),
-    select: (data) => URL.createObjectURL(data),
-    staleTime: HOUR,
-    gcTime: HOUR,
-    refetchOnWindowFocus: false,
-    enabled: !!params.meta && options?.enabled !== false
-  });
-};
-var GetFileParamsSchema = import_zod2.default.object({
-  appName: import_zod2.default.string().min(1).max(255).default(APP_NAME).optional(),
-  meta: FileMetaSchema.nullish()
-});
-var useGetFile = (params, options) => {
-  const queryParams = new URLSearchParams();
-  queryParams.append("appName", params.appName ?? APP_NAME);
-  queryParams.append("id", params.meta?.id ?? "");
-  return (0, import_react_query.useQuery)({
-    ...options,
-    queryKey: [QUERY_KEY, params.appName ?? APP_NAME, params.meta?.id],
-    queryFn: ({ signal }) => httpClient.request({
-      url: `/${QUERY_KEY}/v1?${queryParams.toString()}`,
-      method: "GET",
-      signal,
-      responseType: "blob"
-    }),
-    select: (data) => URL.createObjectURL(data),
-    staleTime: HOUR,
-    gcTime: HOUR,
-    refetchOnWindowFocus: false,
-    enabled: !!params.meta && options?.enabled !== false
-  });
-};
-var useDownloadFile = (options) => {
-  return (0, import_react_query.useMutation)({
-    ...options,
-    mutationFn: (meta) => httpClient.request({
-      url: `/${QUERY_KEY}/v1/download?appName=${APP_NAME}&id=${meta.id}`,
-      method: "GET",
-      responseType: "blob"
-    }),
-    onSuccess: (data, variables) => (0, import_file_saver.default)(data, `${variables.fileName}.${variables.fileExtension}`)
-  });
-};
-var useOpenFile = (options) => {
-  return (0, import_react_query.useMutation)({
-    ...options,
-    mutationFn: (meta) => httpClient.request({
-      url: `/${QUERY_KEY}/v1?appName=${APP_NAME}&id=${meta.id}`,
-      method: "GET",
-      responseType: "blob"
-    }),
-    onSuccess: (data) => {
-      window.open(URL.createObjectURL(data));
-    }
-  });
-};
-var useDeleteFile = (options) => {
-  const queryClient = (0, import_react_query.useQueryClient)();
-  return (0, import_react_query.useMutation)({
-    ...options,
-    mutationFn: (meta) => httpClient.request({
-      url: `/${QUERY_KEY}/v1?appName=${APP_NAME}&id=${meta.id}`,
-      method: "DELETE"
-    }),
-    onSettled: () => queryClient.invalidateQueries({ queryKey: [QUERY_KEY, "meta"], exact: false })
-  });
-};
-
-// src/components/file/fileViewer/common/ActionsMenu.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ActionsMenu = ({ meta, menu, setMenu }) => {
-  const { t } = (0, import_react_i18next3.useTranslation)();
-  const { fileMetas, onDelete, actions } = useFile();
-  const { confirm } = useDialogs();
-  const handleMenuClose = () => {
-    setMenu(null);
-  };
-  const { mutate: download, isPending: isDownloading } = useDownloadFile();
-  const { mutate: deleteFile, isPending: isDeleting } = useDeleteFile();
-  const handleOnDownload = () => {
-    handleMenuClose();
-    download(meta);
-  };
-  const handleOnDelete = async () => {
-    if (!await confirm(t("Layout.File.AreYouSureYouWantToDelete", { fileName: meta.fileName })))
-      return;
-    deleteFile(meta);
-    handleMenuClose();
-    if (onDelete) {
-      const remainingFileMetas = fileMetas.filter((m) => m.id !== meta.id);
-      onDelete({ remainingFileMetas, deletedFileMeta: meta });
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_material5.Menu,
-    {
-      open: menu !== null,
-      onClose: handleMenuClose,
-      anchorReference: "anchorPosition",
-      variant: "menu",
-      anchorPosition: menu === null ? void 0 : { top: menu.mouseY, left: menu.mouseX },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.List, { disablePadding: true, children: [
-        actions?.download !== false && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.ListItemButton, { onClick: handleOnDownload, disabled: isDownloading, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_FileDownload.default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.ListItemText, { children: t("Layout.File.Download") })
-        ] }),
-        actions?.delete !== false && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.ListItemButton, { onClick: handleOnDelete, disabled: isDeleting, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Delete.default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.ListItemText, { children: t("Layout.File.Delete") })
-        ] })
-      ] })
-    }
-  );
-};
-
-// src/components/file/fileViewer/FileViewerGrid.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var IMAGE_SIZE = 150;
-var FileViewerGrid = ({ sx, size, itemBar }) => {
-  const { fileMetas } = useFile();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Stack, { direction: "row", spacing: 1, sx: { overflow: "auto", ...sx }, children: fileMetas.map((fileMeta) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    GridFileViewerItem,
-    {
-      meta: fileMeta,
-      size,
-      itemBar
-    },
-    fileMeta.id
-  )) });
-};
-var GridFileViewerItem = ({ meta, size, itemBar }) => {
-  const { setImageId, actions } = useFile();
-  const [showItemBar, setShowItemBar] = (0, import_react6.useState)(itemBar === "always");
-  const [menu, setMenu] = (0, import_react6.useState)(null);
-  const { ref, inView } = (0, import_react_intersection_observer.useInView)();
-  (0, import_react6.useEffect)(() => {
-    setShowItemBar(itemBar === "always");
-  }, [itemBar]);
-  const { data: source } = useGetFileThumbnail({ meta }, { 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 } = useOpenFile();
-  const { mutate: download } = useDownloadFile();
-  const onClick = () => {
-    switch (meta.mediaType) {
-      case "image": {
-        return setImageId(meta.id);
-      }
-      case "application": {
-        return openFile(meta);
-      }
-      case "video": {
-        return openFile(meta);
-      }
-      default: {
-        return download(meta);
-      }
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_material6.ImageListItem, { sx: { width: size ?? IMAGE_SIZE, height: size ?? IMAGE_SIZE }, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_material6.Box,
-        {
-          component: "img",
-          src: source,
-          loading: "lazy",
-          alt: "thumbnail-" + meta.id,
-          onClick,
-          sx: { cursor: "pointer", objectFit: "contain", width: size ?? IMAGE_SIZE, height: size ?? IMAGE_SIZE }
-        }
-      ),
-      itemBar !== "hidden" && showItemBar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_material6.ImageListItemBar,
-        {
-          title: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Tooltip, { title: meta.fileName, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.Box, { children: meta.fileName }) }),
-          actionIcon: (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material6.IconButton, { sx: { color: import_colors.grey[100] }, onClick: openMenu, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_MoreVert.default, {}) })
-        }
-      )
-    ] }),
-    (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ActionsMenu, { meta, menu, setMenu })
-  ] });
-};
-
-// src/components/file/fileViewer/FileViewerList.tsx
-var import_AttachFile = __toESM(require("@mui/icons-material/AttachFile"), 1);
-var import_Image = __toESM(require("@mui/icons-material/Image"), 1);
-var import_MoreVert2 = __toESM(require("@mui/icons-material/MoreVert"), 1);
-var import_SmartDisplay = __toESM(require("@mui/icons-material/SmartDisplay"), 1);
-var import_material7 = require("@mui/material");
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var FileViewerList = ({ sx }) => {
-  const { fileMetas } = useFile();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.List, { dense: true, sx, children: fileMetas.map(
-    (fileMeta) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      ListFileViewerItem,
-      {
-        meta: fileMeta
-      },
-      fileMeta.id
-    )
-  ) });
-};
-var ListFileViewerItem = ({ meta }) => {
-  const { setImageId, actions } = useFile();
-  const [menu, setMenu] = (0, import_react7.useState)(null);
-  const openMenu = (event) => {
-    event.stopPropagation();
-    setMenu(menu === null ? { mouseX: event.clientX, mouseY: event.clientY } : null);
-  };
-  const { mutate: openFile } = useOpenFile();
-  const { mutate: download } = useDownloadFile();
-  const onClick = () => {
-    switch (meta.mediaType) {
-      case "image": {
-        return setImageId(meta.id);
-      }
-      case "application": {
-        return openFile(meta);
-      }
-      case "video": {
-        return openFile(meta);
-      }
-      default: {
-        return download(meta);
-      }
-    }
-  };
-  const icon = () => {
-    switch (meta.mediaType) {
-      case "image": {
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Image.default, {});
-      }
-      case "video": {
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_SmartDisplay.default, {});
-      }
-      default: {
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AttachFile.default, {});
-      }
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material7.ListItemButton, { onClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemIcon, { children: icon() }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemText, { primary: `${meta.fileName}.${meta.fileExtension}` }),
-      (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.IconButton, { edge: "end", onClick: openMenu, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_MoreVert2.default, {}) })
-    ] }, meta.id),
-    (actions?.download !== false || actions.delete !== false) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionsMenu, { meta, menu, setMenu })
-  ] });
-};
-
-// src/components/file/fileViewer/ImageViewer.tsx
-var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
-var import_material8 = require("@mui/material");
-var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ImageViewer = ({ metaId }) => {
-  const { fileMetas, setImageId } = useFile();
-  const meta = fileMetas.find((m) => m.id === metaId);
-  const { data: source } = useGetFile({ meta });
-  (0, import_react8.useEffect)(() => {
-    if (metaId)
-      globalThis.addEventListener("keydown", handleOnKeydown);
-    return () => {
-      globalThis.removeEventListener("keydown", handleOnKeydown);
-    };
-  }, [metaId]);
-  const handleOnKeydown = (event) => {
-    const images = fileMetas.filter((m) => m.mediaType === "image");
-    const imageIndex = images.findIndex((m) => m.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, index) => {
-    if (index > 0) {
-      const previousFile = images[index - 1];
-      setImageId(previousFile.id);
-    }
-  };
-  const handleOnArrowRight = (images, index) => {
-    if (index < images.length - 1) {
-      const nextFile = images[index + 1];
-      setImageId(nextFile.id);
-    }
-  };
-  const onClose = () => setImageId("");
-  if (!metaId) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material8.Dialog, { open: true, onClose, maxWidth: "xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.Box, { component: "img", src: source, alt: metaId, sx: { maxWidth: "100vw", maxHeight: { xs: "calc(100vh - 56px)", sm: "calc(100vh - 64px)" } } }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material8.Fab, { size: "medium", onClick: onClose, sx: { position: "fixed", top: 8, right: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Close.default, {}) })
-  ] });
-};
-
-// src/components/file/FileViewer.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var FileViewer = ({ subId, onDelete, actions, children }) => {
-  const { data: fileMetas = [] } = useGetFileMetas({ subId }, { enabled: !!subId });
-  const [imageId, setImageId] = (0, import_react9.useState)("");
-  const components = { Grid: FileViewerGrid, List: FileViewerList };
-  if (fileMetas.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FileContext.Provider, { value: { fileMetas, onDelete, actions, setImageId }, children: [
-    children(components),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageViewer, { metaId: imageId })
-  ] });
-};
-
-// src/components/data-grid/ChipInputCell.tsx
-var import_material9 = require("@mui/material");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var isArray = (value) => Array.isArray(value);
-var ChipInputCell = ({ params, slotProps, getLabel }) => {
-  if (!params.value) return null;
-  const getLabelValue = (value) => {
-    if (getLabel) return getLabel(value);
-    return value;
-  };
-  if (isArray(params.value))
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { overflowX: "auto", height: "100%", width: params.colDef.computedWidth }, children: params.value.map(
-      (value, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Chip, { label: getLabelValue(value), ...slotProps }, `${index + 1}-chip-input-cell`)
-    ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material9.Chip, { label: getLabelValue(params.value), ...slotProps });
-};
-
-// src/components/data-grid/EditableColumnHeader.tsx
-var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var EditableColumnHeader = ({ colDef }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TypographyWithIcon, { endIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Edit.default, { color: "disabled", fontSize: "small" }), variant: "body2", className: "MuiDataGrid-columnHeaderTitle", children: colDef.headerName });
-};
-
-// src/components/router/RouterButton.tsx
-var import_material10 = require("@mui/material");
-var import_react_router = require("@tanstack/react-router");
-var import_react10 = __toESM(require("react"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Component = import_react10.default.forwardRef(function ButtonComponent(props, reference) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Button, { ref: reference, component: "a", ...props });
-});
-var CreatedComponent = (0, import_react_router.createLink)(Component);
-var RouterButton = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CreatedComponent, { ...props });
-};
-
-// src/components/router/RouterGridActionsCellItem.tsx
-var import_x_data_grid_premium = require("@mui/x-data-grid-premium");
-var import_react_router2 = require("@tanstack/react-router");
-var import_react11 = __toESM(require("react"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Component2 = import_react11.default.forwardRef(
-  function GridActionsCellItemComponent(props, reference) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_x_data_grid_premium.GridActionsCellItem, { ref: reference, component: "a", ...props });
-  }
-);
-var CreatedComponent2 = (0, import_react_router2.createLink)(Component2);
-var RouterGridActionsCellItem = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CreatedComponent2, { ...props });
-};
-
-// src/components/router/RouterIconButton.tsx
-var import_material11 = require("@mui/material");
-var import_react_router3 = require("@tanstack/react-router");
-var import_react12 = __toESM(require("react"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Component3 = import_react12.default.forwardRef(function IconButtonComponent(props, reference) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material11.IconButton, { ref: reference, component: "a", ...props });
-});
-var CreatedComponent3 = (0, import_react_router3.createLink)(Component3);
-var RouterIconButton = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CreatedComponent3, { ...props });
-};
-
-// src/components/router/RouterLink.tsx
-var import_material12 = require("@mui/material");
-var import_react_router4 = require("@tanstack/react-router");
-var import_react13 = __toESM(require("react"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Component4 = import_react13.default.forwardRef(function LinkComponent(props, reference) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material12.Link, { ref: reference, ...props });
-});
-var CreatedComponent4 = (0, import_react_router4.createLink)(Component4);
-var RouterLink = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CreatedComponent4, { ...props });
-};
-
-// src/components/router/RouterTab.tsx
-var import_material13 = require("@mui/material");
-var import_react_router5 = require("@tanstack/react-router");
-var import_react14 = __toESM(require("react"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Component5 = import_react14.default.forwardRef(function TabComponent(props, reference) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material13.Tab, { ref: reference, component: "a", ...props });
-});
-var CreatedComponent5 = (0, import_react_router5.createLink)(Component5);
-var RouterTab = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CreatedComponent5, { ...props });
-};
-
-// src/components/router/RouterListItemButton.tsx
-var import_material14 = require("@mui/material");
-var import_react_router6 = require("@tanstack/react-router");
-var import_react15 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Component6 = import_react15.default.forwardRef(function ButtonComponent2(props, reference) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material14.ListItemButton, { ref: reference, component: "a", ...props });
-});
-var CreatedComponent6 = (0, import_react_router6.createLink)(Component6);
-var RouterListItemButton = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreatedComponent6, { ...props });
-};
-
-// src/components/router/RouterNotFound.tsx
-var import_material15 = require("@mui/material");
-var import_react_i18next4 = require("react-i18next");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function RouterNotFound() {
-  const { t } = (0, import_react_i18next4.useTranslation)();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material15.Box, { height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", px: 2, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material15.Box, { display: "flex", alignItems: "center", mb: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material15.Typography, { variant: "h3", component: "span", fontWeight: 500, sx: { lineHeight: 1 }, children: "404" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material15.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 3 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material15.Typography, { variant: "h5", component: "span", children: t("Layout.ThisPageCouldNotBeFound") })
-  ] }) });
-}
-
-// src/components/router/RouterError.tsx
-var import_material16 = require("@mui/material");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var RouterError = ({ error }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material16.Box, { height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", px: 2, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_material16.Box, { display: "flex", alignItems: "center", mb: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material16.Typography, { variant: "h3", component: "span", fontWeight: 500, sx: { lineHeight: 1 }, children: error.name || "500" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material16.Divider, { orientation: "vertical", flexItem: true, sx: { mx: 3 } }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_material16.Typography, { variant: "h5", component: "span", children: error.message })
-  ] }) });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ChipInputCell,
-  Dropzone,
-  EditableColumnHeader,
-  FileViewer,
-  Fullscreen,
-  RouterButton,
-  RouterError,
-  RouterGridActionsCellItem,
-  RouterIconButton,
-  RouterLink,
-  RouterListItemButton,
-  RouterNotFound,
-  RouterTab,
-  TypographyWithIcon
-});
-//# sourceMappingURL=components.cjs.map