@12-apps/ui 6.54.1 → 6.55.0

package/dist/chunk-4SQ2WCZA.js

@@ -0,0 +1,241 @@
+import {
+  fieldHeight
+} from "./chunk-RGVNXES5.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/ContentToolbar/SavedViewsMenu.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KebabIcon from "@mui/icons-material/MoreVert";
+import ViewIcon from "@mui/icons-material/Visibility";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RECENT_LIMIT = 5;
+function DefaultTag({ label, testId }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      "data-testid": testId,
+      sx: { px: 0.75, py: 0.125, borderRadius: 1, fontSize: sxRem(11.2), bgcolor: "primary.main", color: "primary.contrastText" },
+      children: label
+    }
+  );
+}
+function buildActions(view, handlers, labels) {
+  const actions = [{ id: "apply", label: labels.apply, run: () => handlers.apply(view) }];
+  if (!view.isOwner) return actions;
+  if (!view.isDefault) {
+    actions.push({ id: "default", label: labels.setDefault, run: () => handlers.onSetDefault(view) });
+  }
+  actions.push({ id: "pin", label: view.pinned ? labels.unpin : labels.pin, run: () => handlers.onTogglePin(view) });
+  actions.push({ id: "share", label: view.shared ? labels.unshare : labels.share, run: () => handlers.onToggleShare(view) });
+  actions.push({ id: "edit", label: labels.edit, run: () => handlers.onEdit(view) });
+  actions.push({ id: "delete", label: labels.remove, danger: true, run: () => handlers.onDelete(view) });
+  return actions;
+}
+function ViewKebab({
+  view,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const close = () => setAnchorEl(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        "aria-label": `${labels.apply} ${view.name}`,
+        "data-testid": `${testIdPrefix}-kebab-${view.id}`,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { width: sxRem(28), height: sxRem(28), color: "text.secondary" },
+        children: /* @__PURE__ */ jsx(KebabIcon, { sx: { fontSize: sxRem(16) } })
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open: Boolean(anchorEl), onClose: close, children: buildActions(view, handlers, labels).map((action) => /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        "data-testid": `${testIdPrefix}-item-${action.id}-${view.id}`,
+        onClick: () => {
+          action.run();
+          close();
+        },
+        sx: action.danger ? { color: "error.main" } : void 0,
+        children: action.label
+      },
+      action.id
+    )) })
+  ] });
+}
+function ViewRow({
+  view,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, "data-testid": `${testIdPrefix}-row-${view.id}`, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        onClick: () => handlers.apply(view),
+        sx: { flex: 1, minWidth: 0, cursor: "pointer", display: "flex", alignItems: "center", gap: 0.75 },
+        "data-testid": `${testIdPrefix}-apply-${view.id}`,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(14) }, children: view.name }),
+          view.isDefault && /* @__PURE__ */ jsx(DefaultTag, { label: labels.defaultTag, testId: `${testIdPrefix}-default-${view.id}` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(ViewKebab, { view, handlers, labels, testIdPrefix })
+  ] });
+}
+function ViewSection({
+  title,
+  list,
+  sectionKey,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  if (list.length === 0) return null;
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testIdPrefix}-section-${sectionKey}`, children: [
+    /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(12), fontWeight: 600, color: "text.secondary" }, children: title }),
+    /* @__PURE__ */ jsx(Stack, { spacing: 0.5, sx: { mt: 0.5 }, children: list.map((view) => /* @__PURE__ */ jsx(ViewRow, { view, handlers, labels, testIdPrefix }, view.id)) })
+  ] });
+}
+function FooterButton({
+  label,
+  testId,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", color: "inherit", onClick, "data-testid": testId, sx: { textTransform: "none" }, children: label });
+}
+function PopoverBody({
+  views,
+  pinned,
+  recent,
+  activeViewName,
+  labels,
+  handlers,
+  onSelectMain,
+  onSaveCurrent,
+  onManageAll,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { p: 1.5, width: sxRem(300) }, "data-testid": `${testIdPrefix}-popover`, children: [
+    /* @__PURE__ */ jsxs(MenuItem, { "data-testid": `${testIdPrefix}-main`, selected: !activeViewName, onClick: onSelectMain, sx: { borderRadius: 1, px: 1, gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, fontSize: sxRem(14) }, children: labels.mainView }),
+      !activeViewName && /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: sxRem(16), color: "primary.main" } })
+    ] }),
+    views.length === 0 ? /* @__PURE__ */ jsx(Typography, { sx: { fontSize: sxRem(12), color: "text.secondary" }, children: labels.empty }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ViewSection, { title: labels.pinned, list: pinned, sectionKey: "pinned", handlers, labels, testIdPrefix }),
+      /* @__PURE__ */ jsx(ViewSection, { title: labels.recent, list: recent, sectionKey: "recent", handlers, labels, testIdPrefix })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: { borderTop: 1, borderColor: "divider", pt: 1 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: { alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsx(FooterButton, { label: labels.saveCurrent, testId: `${testIdPrefix}-save-current`, onClick: onSaveCurrent }),
+      /* @__PURE__ */ jsx(FooterButton, { label: labels.manageAll, testId: `${testIdPrefix}-manage-all`, onClick: onManageAll })
+    ] }) })
+  ] });
+}
+function SavedViewsMenu({
+  views,
+  activeViewName,
+  onApply,
+  onSelectMain,
+  onSaveCurrent,
+  onEdit,
+  onDelete,
+  onSetDefault,
+  onTogglePin,
+  onToggleShare,
+  onManageAll,
+  labels: labelOverrides,
+  testIdPrefix = "views"
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const close = () => setAnchorEl(null);
+  const runAndClose = (action) => () => {
+    action();
+    close();
+  };
+  const labels = labelOverrides;
+  const pinned = views.filter((view) => view.pinned);
+  const recent = views.filter((view) => !view.pinned).slice(0, RECENT_LIMIT);
+  const handlers = {
+    apply: (view) => {
+      onApply(view);
+      close();
+    },
+    onEdit,
+    onDelete,
+    onSetDefault,
+    onTogglePin,
+    onToggleShare
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        "data-testid": `${testIdPrefix}-button`,
+        "aria-haspopup": "menu",
+        "aria-expanded": Boolean(anchorEl),
+        "aria-label": activeViewName ?? labels.mainView,
+        sx: { minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: "text.primary", textTransform: "none", fontWeight: 600 },
+        children: [
+          /* @__PURE__ */ jsx(ViewIcon, { sx: { fontSize: sxRem(18), display: { xs: "inline-flex", md: "none" } } }),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: { xs: "none", md: "inline" } }, children: activeViewName ?? labels.mainView }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: sxRem(14) } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchorEl),
+        anchorEl,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsx(
+          PopoverBody,
+          {
+            views,
+            pinned,
+            recent,
+            activeViewName,
+            labels,
+            handlers,
+            onSelectMain: runAndClose(onSelectMain),
+            onSaveCurrent: runAndClose(onSaveCurrent),
+            onManageAll: runAndClose(onManageAll),
+            testIdPrefix
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  SavedViewsMenu
+};
+//# sourceMappingURL=chunk-4SQ2WCZA.js.map

package/dist/chunk-4UK3SCHE.js

@@ -0,0 +1,231 @@
+import {
+  SonnerToast
+} from "./chunk-ONRMGUCX.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/feedback/Sonner/Sonner.tsx
+import Box from "@mui/material/Box/index.js";
+import Portal from "@mui/material/Portal/index.js";
+import React, { createContext, useCallback, useContext, useRef, useState, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SonnerContext = createContext(null);
+var DEFAULT_DURATION_MS = 4e3;
+var buildToastItem = (toast2, id, type) => ({
+  ...toast2,
+  id,
+  type: type || toast2.type || "default",
+  createdAt: Date.now(),
+  visible: true
+});
+var scheduleAutoDismiss = (toast2, id, dismiss) => {
+  if (toast2.persistent || toast2.duration === 0) return;
+  window.setTimeout(() => dismiss(id), toast2.duration ?? DEFAULT_DURATION_MS);
+};
+var EXIT_TRANSITION_MS = 300;
+var resolveMessage = (message, value) => typeof message === "function" ? message(value) : message;
+var trackPromiseWithToasts = async (promiseToResolve, options, toasts) => {
+  const toastId = toasts.loading(options.loading);
+  try {
+    const data = await promiseToResolve;
+    toasts.dismiss(toastId);
+    toasts.success(resolveMessage(options.success, data));
+    return data;
+  } catch (err) {
+    toasts.dismiss(toastId);
+    toasts.error(resolveMessage(options.error, err instanceof Error ? err : new Error(String(err))));
+    throw err;
+  }
+};
+var SonnerProvider = ({ children, dismissLabel }) => {
+  const [toasts, setToasts] = useState([]);
+  const toastCounter = useRef(0);
+  const dismiss = useCallback((id) => {
+    const matches = (toast3) => id === void 0 || toast3.id === id;
+    setToasts(
+      (prev) => prev.map((toast3) => matches(toast3) ? { ...toast3, visible: false } : toast3)
+    );
+    window.setTimeout(() => {
+      setToasts((prev) => prev.filter((toast3) => !matches(toast3)));
+    }, EXIT_TRANSITION_MS);
+  }, []);
+  const addToast = useCallback(
+    (toast3, type) => {
+      const id = `sonner-${++toastCounter.current}`;
+      setToasts((prev) => [...prev, buildToastItem(toast3, id, type)]);
+      scheduleAutoDismiss(toast3, id, dismiss);
+      return id;
+    },
+    [dismiss]
+  );
+  const makeShortcut = useCallback(
+    (type, extra) => (message, options) => addToast({ dismissLabel, ...options, ...extra, title: message }, type),
+    [addToast]
+  );
+  const toast2 = useMemo(() => makeShortcut("default"), [makeShortcut]);
+  const success = useMemo(() => makeShortcut("success"), [makeShortcut]);
+  const error = useMemo(() => makeShortcut("error"), [makeShortcut]);
+  const warning = useMemo(() => makeShortcut("warning"), [makeShortcut]);
+  const info = useMemo(() => makeShortcut("info"), [makeShortcut]);
+  const loading = useMemo(
+    () => makeShortcut("loading", { persistent: true }),
+    [makeShortcut]
+  );
+  const promise = useCallback(
+    (promiseToResolve, options) => trackPromiseWithToasts(promiseToResolve, options, { loading, success, error, dismiss }),
+    [loading, success, error, dismiss]
+  );
+  const contextValue = {
+    toast: toast2,
+    success,
+    error,
+    warning,
+    info,
+    loading,
+    dismiss,
+    promise
+  };
+  useRegisterGlobalToast(contextValue);
+  return /* @__PURE__ */ jsxs(SonnerContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(SonnerToaster, { toasts, onDismiss: dismiss })
+  ] });
+};
+var useSonner = () => {
+  const context = useContext(SonnerContext);
+  if (!context) {
+    throw new Error("useSonner must be used within a SonnerProvider");
+  }
+  return context;
+};
+var SonnerToaster = ({ toasts, onDismiss }) => {
+  const MAX_VISIBLE_TOASTS = 5;
+  const visibleToasts = toasts.slice(-MAX_VISIBLE_TOASTS);
+  const hiddenCount = Math.max(0, toasts.length - MAX_VISIBLE_TOASTS);
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "fixed",
+        top: sxRem(16),
+        right: sxRem(16),
+        zIndex: 9999,
+        display: "flex",
+        flexDirection: "column",
+        pointerEvents: "none",
+        maxHeight: (theme) => `calc(100vh - ${rem(theme, 32)})`,
+        overflowY: "auto",
+        overflowX: "hidden"
+      },
+      children: [
+        hiddenCount > 0 && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              p: 1,
+              mb: 0.5,
+              textAlign: "center",
+              fontSize: sxRem(12),
+              color: "text.secondary",
+              pointerEvents: "none"
+            },
+            children: [
+              "+",
+              hiddenCount,
+              " more"
+            ]
+          }
+        ),
+        visibleToasts.map((toast2) => /* @__PURE__ */ jsx(Box, { sx: { pointerEvents: "auto" }, children: /* @__PURE__ */ jsx(SonnerToast, { ...toast2, onDismiss }) }, toast2.id))
+      ]
+    }
+  ) });
+};
+var globalToastContext = null;
+var useRegisterGlobalToast = (context) => {
+  React.useEffect(() => {
+    globalToastContext = context;
+    return () => {
+      globalToastContext = null;
+    };
+  }, [context]);
+};
+var createToastInstance = () => {
+  const warnNoProvider = () => {
+    if (typeof window !== "undefined" && window.console && window.console.warn) {
+      window.console.warn("Sonner: No SonnerProvider found. Please wrap your app with SonnerProvider.");
+    }
+  };
+  const methods = {
+    toast: (message, options) => {
+      if (!globalToastContext) {
+        warnNoProvider();
+        return "no-provider";
+      }
+      return globalToastContext.toast(message, options);
+    },
+    success: (message, options) => {
+      if (!globalToastContext) {
+        warnNoProvider();
+        return "no-provider";
+      }
+      return globalToastContext.success(message, options);
+    },
+    error: (message, options) => {
+      if (!globalToastContext) {
+        warnNoProvider();
+        return "no-provider";
+      }
+      return globalToastContext.error(message, options);
+    },
+    warning: (message, options) => {
+      if (!globalToastContext) {
+        warnNoProvider();
+        return "no-provider";
+      }
+      return globalToastContext.warning(message, options);
+    },
+    info: (message, options) => {
+      if (!globalToastContext) {
+        warnNoProvider();
+        return "no-provider";
+      }
+      return globalToastContext.info(message, options);
+    },
+    loading: (message, options) => {
+      if (!globalToastContext) {
+        warnNoProvider();
+        return "no-provider";
+      }
+      return globalToastContext.loading(message, options);
+    },
+    dismiss: (id) => {
+      if (!globalToastContext) {
+        warnNoProvider();
+        return;
+      }
+      globalToastContext.dismiss(id);
+    },
+    promise: async (promiseToResolve, options) => {
+      if (!globalToastContext) {
+        warnNoProvider();
+        throw new Error("No SonnerProvider found");
+      }
+      return globalToastContext.promise(promiseToResolve, options);
+    }
+  };
+  return methods;
+};
+var toast = createToastInstance();
+var Toaster = ({ children, dismissLabel }) => /* @__PURE__ */ jsx(SonnerProvider, { dismissLabel, children });
+
+export {
+  SonnerProvider,
+  useSonner,
+  useRegisterGlobalToast,
+  toast,
+  Toaster
+};
+//# sourceMappingURL=chunk-4UK3SCHE.js.map