@abpjs/theme-shared 1.0.0 → 2.0.0

package/dist/index.mjs

@@ -36,25 +36,114 @@ var DEFAULT_STYLES = `
   top: 18px;
 }
 
-.modal {
-  background-color: rgba(0, 0, 0, .6);
+.navbar .dropdown-menu {
+  min-width: 215px;
 }
 
-.abp-ellipsis {
+.ui-table-scrollable-body::-webkit-scrollbar {
+  height: 5px !important;
+  width: 5px !important;
+}
+
+.ui-table-scrollable-body::-webkit-scrollbar-track {
+  background: #ddd;
+}
+
+.ui-table-scrollable-body::-webkit-scrollbar-thumb {
+  background: #8a8686;
+}
+
+.abp-ellipsis-inline {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.abp-ellipsis {
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-widget-overlay {
+  z-index: 1000;
+}
+
+.color-white {
+  color: #FFF !important;
+}
+
+.custom-checkbox > label {
+  cursor: pointer;
+}
+
 /* <animations */
 
 .fade-in-top {
-  animation: fadeInTop 0.4s ease-in-out;
+  animation: fadeInTop 0.2s ease-in-out;
 }
 
 .fade-out-top {
-  animation: fadeOutTop 0.4s ease-in-out;
+  animation: fadeOutTop 0.2s ease-in-out;
+}
+
+.abp-collapsed-height {
+  -moz-transition: max-height linear 0.35s;
+  -ms-transition: max-height linear 0.35s;
+  -o-transition: max-height linear 0.35s;
+  -webkit-transition: max-height linear 0.35s;
+  overflow:hidden;
+  transition:max-height 0.35s linear;
+  height:auto;
+  max-height: 0;
+}
+
+.abp-mh-25 {
+  max-height: 25vh;
+}
+
+.abp-mh-50 {
+  transition:max-height 0.65s linear;
+  max-height: 50vh;
+}
+
+.abp-mh-75 {
+  transition:max-height 0.85s linear;
+  max-height: 75vh;
+}
+
+.abp-mh-100 {
+  transition:max-height 1s linear;
+  max-height: 100vh;
+}
+
+/* Sorting icon styles - @since 2.0.0 */
+[class^="sorting"] {
+  opacity: .3;
+  cursor: pointer;
+}
+[class^="sorting"]:before {
+  right: 0.5rem;
+  content: "\u2191";
+}
+[class^="sorting"]:after {
+  right: 0.5rem;
+  content: "\u2193";
+}
+
+.sorting_desc {
+  opacity: 1;
+}
+.sorting_desc:before {
+  opacity: .3;
+}
+
+.sorting_asc {
+  opacity: 1;
+}
+.sorting_asc:after {
+  opacity: .3;
 }
 
 @keyframes fadeInTop {
@@ -64,7 +153,7 @@ var DEFAULT_STYLES = `
   }
 
   to {
-    transform: translateY(5px);
+    transform: translateY(0px);
     opacity: 1;
   }
 }
@@ -104,37 +193,41 @@ import {
   useCallback,
   useState,
   useRef,
-  useMemo
+  useMemo,
+  useEffect
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var ToasterContext = createContext(null);
 var toastCounter = 0;
 function generateId() {
   toastCounter += 1;
-  return `toast-${Date.now()}-${toastCounter}-${Math.random().toString(36).substring(2, 9)}`;
+  return toastCounter;
 }
 var DEFAULT_LIFE = 5e3;
 function ToasterProvider({ children }) {
   const [toasts, setToasts] = useState([]);
-  const resolversRef = useRef(/* @__PURE__ */ new Map());
+  const subscribersRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    subscribersRef.current.forEach((subscriber) => {
+      subscriber(toasts);
+    });
+  }, [toasts]);
   const remove = useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
-    const resolver = resolversRef.current.get(id);
-    if (resolver) {
-      resolver(Toaster.Status.dismiss);
-      resolversRef.current.delete(id);
-    }
   }, []);
   const show = useCallback(
-    (message, title, severity, options) => {
-      const id = options?.id?.toString() || generateId();
+    (message, title, severity = "info", options) => {
+      const id = typeof options?.id === "number" ? options.id : generateId();
       const life = options?.sticky ? void 0 : options?.life ?? DEFAULT_LIFE;
       const toast = {
         id,
         message,
         title,
         severity,
-        ...options
+        options: {
+          ...options,
+          id
+        }
       };
       setToasts((prev) => [...prev, toast]);
       if (life) {
@@ -142,9 +235,7 @@ function ToasterProvider({ children }) {
           remove(id);
         }, life);
       }
-      return new Promise((resolve) => {
-        resolversRef.current.set(id, resolve);
-      });
+      return id;
     },
     [remove]
   );
@@ -157,44 +248,40 @@ function ToasterProvider({ children }) {
     [show]
   );
   const warn = useCallback(
-    (message, title, options) => show(message, title, "warn", options),
+    (message, title, options) => show(message, title, "warning", options),
     [show]
   );
   const error = useCallback(
     (message, title, options) => show(message, title, "error", options),
     [show]
   );
-  const addAll = useCallback(
-    (messages) => {
-      messages.forEach((msg) => {
-        show(msg.message, msg.title, msg.severity, msg);
-      });
-    },
-    [show]
-  );
-  const clear = useCallback((status) => {
+  const clear = useCallback((key) => {
     setToasts((prev) => {
-      prev.forEach((toast) => {
-        const resolver = resolversRef.current.get(toast.id);
-        if (resolver) {
-          resolver(status ?? Toaster.Status.dismiss);
-          resolversRef.current.delete(toast.id);
-        }
-      });
+      if (key) {
+        return prev.filter((toast) => toast.options?.containerKey !== key);
+      }
       return [];
     });
   }, []);
+  const subscribe = useCallback((subscriber) => {
+    subscribersRef.current.add(subscriber);
+    subscriber(toasts);
+    return () => {
+      subscribersRef.current.delete(subscriber);
+    };
+  }, [toasts]);
   const service = useMemo(
     () => ({
       info,
       success,
       warn,
       error,
-      addAll,
+      show,
+      remove,
       clear,
-      remove
+      subscribe
     }),
-    [info, success, warn, error, addAll, clear, remove]
+    [info, success, warn, error, show, remove, clear, subscribe]
   );
   const value = useMemo(
     () => ({ service, toasts }),
@@ -231,7 +318,8 @@ import {
   useCallback as useCallback2,
   useState as useState2,
   useRef as useRef2,
-  useMemo as useMemo2
+  useMemo as useMemo2,
+  useEffect as useEffect2
 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ConfirmationContext = createContext2(null);
@@ -241,6 +329,13 @@ function generateId2() {
 function ConfirmationProvider({ children }) {
   const [confirmation, setConfirmation] = useState2(null);
   const resolverRef = useRef2(null);
+  const subscribersRef = useRef2(/* @__PURE__ */ new Set());
+  const escapeListenerRef = useRef2(false);
+  useEffect2(() => {
+    subscribersRef.current.forEach((subscriber) => {
+      subscriber(confirmation);
+    });
+  }, [confirmation]);
   const respond = useCallback2((status) => {
     if (resolverRef.current) {
       resolverRef.current(status);
@@ -248,20 +343,34 @@ function ConfirmationProvider({ children }) {
     }
     setConfirmation(null);
   }, []);
+  useEffect2(() => {
+    if (!escapeListenerRef.current) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape" && confirmation && confirmation.options?.closable !== false) {
+        respond(Toaster.Status.dismiss);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [confirmation, respond]);
   const show = useCallback2(
-    (message, title, severity, options = {}) => {
+    (message, title, severity = "neutral", options = {}) => {
       if (resolverRef.current) {
         resolverRef.current(Toaster.Status.dismiss);
       }
       const id = options.id?.toString() || generateId2();
-      const confirmationMessage = {
-        id,
+      const dialogData = {
         message,
         title,
         severity,
-        options
+        options: {
+          ...options,
+          id
+        }
       };
-      setConfirmation(confirmationMessage);
+      setConfirmation(dialogData);
       return new Promise((resolve) => {
         resolverRef.current = resolve;
       });
@@ -277,7 +386,7 @@ function ConfirmationProvider({ children }) {
     [show]
   );
   const warn = useCallback2(
-    (message, title, options) => show(message, title, "warn", options),
+    (message, title, options) => show(message, title, "warning", options),
     [show]
   );
   const error = useCallback2(
@@ -290,15 +399,28 @@ function ConfirmationProvider({ children }) {
     },
     [respond]
   );
+  const listenToEscape = useCallback2(() => {
+    escapeListenerRef.current = true;
+  }, []);
+  const subscribe = useCallback2((subscriber) => {
+    subscribersRef.current.add(subscriber);
+    subscriber(confirmation);
+    return () => {
+      subscribersRef.current.delete(subscriber);
+    };
+  }, [confirmation]);
   const service = useMemo2(
     () => ({
       info,
       success,
       warn,
       error,
-      clear
+      show,
+      clear,
+      listenToEscape,
+      subscribe
     }),
-    [info, success, warn, error, clear]
+    [info, success, warn, error, show, clear, listenToEscape, subscribe]
   );
   const value = useMemo2(
     () => ({ service, confirmation, respond }),
@@ -411,7 +533,7 @@ function isHttpErrorResponse(error) {
 }
 
 // src/components/toast/Toast.tsx
-import { useEffect, useRef as useRef3, useMemo as useMemo3 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useMemo as useMemo3 } from "react";
 import {
   Toaster as ChakraToaster,
   Portal,
@@ -427,9 +549,15 @@ import {
   CheckCircle,
   Info,
   AlertTriangle,
-  XCircle
+  XCircle,
+  Circle
 } from "lucide-react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function resolveLocalizationParam(param) {
+  if (param === void 0) return void 0;
+  if (typeof param === "string") return param;
+  return param.defaultValue || param.key;
+}
 function SeverityIcon({ severity }) {
   const iconProps = { size: 20 };
   switch (severity) {
@@ -437,10 +565,13 @@ function SeverityIcon({ severity }) {
       return /* @__PURE__ */ jsx3(CheckCircle, { ...iconProps, color: "var(--chakra-colors-green-500)" });
     case "info":
       return /* @__PURE__ */ jsx3(Info, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
-    case "warn":
+    case "warning":
       return /* @__PURE__ */ jsx3(AlertTriangle, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
     case "error":
       return /* @__PURE__ */ jsx3(XCircle, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+    case "neutral":
+    default:
+      return /* @__PURE__ */ jsx3(Circle, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
   }
 }
 function getSeverityColorPalette(severity) {
@@ -449,10 +580,13 @@ function getSeverityColorPalette(severity) {
       return "green";
     case "info":
       return "blue";
-    case "warn":
+    case "warning":
       return "yellow";
     case "error":
       return "red";
+    case "neutral":
+    default:
+      return "gray";
   }
 }
 function getSeverityBg(severity) {
@@ -461,10 +595,13 @@ function getSeverityBg(severity) {
       return "green.50";
     case "info":
       return "blue.50";
-    case "warn":
+    case "warning":
       return "yellow.50";
     case "error":
       return "red.50";
+    case "neutral":
+    default:
+      return "gray.50";
   }
 }
 function getSeverityBorderColor(severity) {
@@ -473,10 +610,13 @@ function getSeverityBorderColor(severity) {
       return "green.200";
     case "info":
       return "blue.200";
-    case "warn":
+    case "warning":
       return "yellow.200";
     case "error":
       return "red.200";
+    case "neutral":
+    default:
+      return "gray.200";
   }
 }
 function mapSeverityToType(severity) {
@@ -485,10 +625,13 @@ function mapSeverityToType(severity) {
       return "success";
     case "info":
       return "info";
-    case "warn":
+    case "warning":
       return "warning";
     case "error":
       return "error";
+    case "neutral":
+    default:
+      return "info";
   }
 }
 function getPlacement(position) {
@@ -520,31 +663,38 @@ function getToaster(placement) {
   }
   return toasterCache.get(placement);
 }
-function ToastContainer({ position = "bottom-right" }) {
+function ToastContainer({ position = "bottom-right", containerKey }) {
   const { toasts, service } = useToasterContext();
   const { t } = useLocalization();
   const displayedToastsRef = useRef3(/* @__PURE__ */ new Set());
   const placement = useMemo3(() => getPlacement(position), [position]);
   const toaster = useMemo3(() => getToaster(placement), [placement]);
-  useEffect(() => {
-    const newToasts = toasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
+  const filteredToasts = useMemo3(() => {
+    if (!containerKey) return toasts;
+    return toasts.filter((toast) => toast.options?.containerKey === containerKey);
+  }, [toasts, containerKey]);
+  useEffect3(() => {
+    const newToasts = filteredToasts.filter((toast) => !displayedToastsRef.current.has(toast.id));
     newToasts.forEach((toast) => {
       displayedToastsRef.current.add(toast.id);
+      const messageStr = resolveLocalizationParam(toast.message) || "";
       const localizedMessage = t(
-        toast.message,
-        ...toast.messageLocalizationParams || []
+        messageStr,
+        ...toast.options?.messageLocalizationParams || []
       );
-      const localizedTitle = toast.title ? t(toast.title, ...toast.titleLocalizationParams || []) : void 0;
+      const titleStr = resolveLocalizationParam(toast.title);
+      const localizedTitle = titleStr ? t(titleStr, ...toast.options?.titleLocalizationParams || []) : void 0;
+      const severity = toast.severity || "info";
       requestAnimationFrame(() => {
         toaster.create({
-          id: toast.id,
+          id: String(toast.id),
           title: localizedTitle,
           description: localizedMessage,
-          type: mapSeverityToType(toast.severity),
-          duration: toast.sticky ? void 0 : toast.life || 5e3,
+          type: mapSeverityToType(severity),
+          duration: toast.options?.sticky ? void 0 : toast.options?.life || 5e3,
           meta: {
-            closable: toast.closable !== false,
-            severity: toast.severity
+            closable: toast.options?.closable !== false,
+            severity
           },
           onStatusChange: (details) => {
             if (details.status === "unmounted") {
@@ -555,7 +705,7 @@ function ToastContainer({ position = "bottom-right" }) {
         });
       });
     });
-  }, [toasts, t, service, toaster]);
+  }, [filteredToasts, t, service, toaster]);
   return /* @__PURE__ */ jsx3(Portal, { children: /* @__PURE__ */ jsx3(ChakraToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
     const severity = toast.meta?.severity || "info";
     const closable = toast.meta?.closable !== false;
@@ -595,9 +745,20 @@ import {
   CheckCircle as CheckCircle2,
   Info as Info2,
   AlertTriangle as AlertTriangle2,
-  XCircle as XCircle2
+  XCircle as XCircle2,
+  Circle as Circle2
 } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function resolveLocalizationParam2(param) {
+  if (param === void 0) return void 0;
+  if (typeof param === "string") return param;
+  return param.defaultValue || param.key;
+}
+function getLocalizationKey(param) {
+  if (param === void 0) return void 0;
+  if (typeof param === "string") return param;
+  return param.key;
+}
 function SeverityIcon2({ severity }) {
   const iconProps = { size: 24 };
   switch (severity) {
@@ -605,10 +766,13 @@ function SeverityIcon2({ severity }) {
       return /* @__PURE__ */ jsx4(CheckCircle2, { ...iconProps, color: "var(--chakra-colors-green-500)" });
     case "info":
       return /* @__PURE__ */ jsx4(Info2, { ...iconProps, color: "var(--chakra-colors-blue-500)" });
-    case "warn":
+    case "warning":
       return /* @__PURE__ */ jsx4(AlertTriangle2, { ...iconProps, color: "var(--chakra-colors-yellow-500)" });
     case "error":
       return /* @__PURE__ */ jsx4(XCircle2, { ...iconProps, color: "var(--chakra-colors-red-500)" });
+    case "neutral":
+    default:
+      return /* @__PURE__ */ jsx4(Circle2, { ...iconProps, color: "var(--chakra-colors-gray-500)" });
   }
 }
 function getSeverityColorPalette2(severity) {
@@ -617,10 +781,13 @@ function getSeverityColorPalette2(severity) {
       return "green";
     case "info":
       return "blue";
-    case "warn":
+    case "warning":
       return "yellow";
     case "error":
       return "red";
+    case "neutral":
+    default:
+      return "gray";
   }
 }
 function ConfirmationDialog({ className }) {
@@ -630,14 +797,18 @@ function ConfirmationDialog({ className }) {
   if (!confirmation) {
     return null;
   }
-  const { message, title, severity, options } = confirmation;
+  const { message, title, severity = "neutral", options } = confirmation;
+  const messageStr = resolveLocalizationParam2(message) || "";
   const localizedMessage = t(
-    message,
-    ...options.messageLocalizationParams || []
+    messageStr,
+    ...options?.messageLocalizationParams || []
   );
-  const localizedTitle = title ? t(title, ...options.titleLocalizationParams || []) : void 0;
-  const yesCopy = options.yesCopy ? t(options.yesCopy) : t("AbpUi::Yes");
-  const cancelCopy = options.cancelCopy ? t(options.cancelCopy) : t("AbpUi::Cancel");
+  const titleStr = resolveLocalizationParam2(title);
+  const localizedTitle = titleStr ? t(titleStr, ...options?.titleLocalizationParams || []) : void 0;
+  const yesKey = getLocalizationKey(options?.yesText);
+  const cancelKey = getLocalizationKey(options?.cancelText);
+  const yesCopy = yesKey ? t(yesKey) : t("AbpUi::Yes");
+  const cancelCopy = cancelKey ? t(cancelKey) : t("AbpUi::Cancel");
   const handleConfirm = () => {
     respond(Toaster.Status.confirm);
   };
@@ -648,7 +819,7 @@ function ConfirmationDialog({ className }) {
     respond(Toaster.Status.dismiss);
   };
   const handleOpenChange = (details) => {
-    if (!details.open) {
+    if (!details.open && options?.closable !== false) {
       handleDismiss();
     }
   };
@@ -669,7 +840,7 @@ function ConfirmationDialog({ className }) {
           ] }) }),
           /* @__PURE__ */ jsx4(Dialog.Body, { children: /* @__PURE__ */ jsx4(Text, { color: "gray.600", children: localizedMessage }) }),
           /* @__PURE__ */ jsx4(Dialog.Footer, { children: /* @__PURE__ */ jsxs2(Flex2, { gap: 3, children: [
-            !options.hideCancelBtn && /* @__PURE__ */ jsx4(
+            !options?.hideCancelBtn && /* @__PURE__ */ jsx4(
               Button,
               {
                 ref: cancelRef,
@@ -678,7 +849,7 @@ function ConfirmationDialog({ className }) {
                 children: cancelCopy
               }
             ),
-            !options.hideYesBtn && /* @__PURE__ */ jsx4(
+            !options?.hideYesBtn && /* @__PURE__ */ jsx4(
               Button,
               {
                 colorPalette: getSeverityColorPalette2(severity),
@@ -727,26 +898,28 @@ function ErrorComponent({
 }
 
 // src/components/loader-bar/LoaderBar.tsx
-import { useEffect as useEffect2, useRef as useRef5, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState4 } from "react";
 import { useLoader } from "@abpjs/core";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function LoaderBar({
   containerClass = "abp-loader-bar",
   progressClass = "abp-progress",
-  filter
+  filter,
+  intervalPeriod = 300,
+  stopDelay = 400
 }) {
   const { loading } = useLoader();
   const [isLoading, setIsLoading] = useState4(false);
   const [progressLevel, setProgressLevel] = useState4(0);
   const intervalRef = useRef5(null);
-  useEffect2(() => {
+  useEffect4(() => {
     if (loading) {
       startLoading();
     } else {
       stopLoading();
     }
   }, [loading]);
-  useEffect2(() => {
+  useEffect4(() => {
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
@@ -770,7 +943,7 @@ function LoaderBar({
         }
         return prev + 10;
       });
-    }, 300);
+    }, intervalPeriod);
   };
   const stopLoading = () => {
     setProgressLevel(100);
@@ -781,7 +954,7 @@ function LoaderBar({
     setTimeout(() => {
       setIsLoading(false);
       setProgressLevel(0);
-    }, 400);
+    }, stopDelay);
   };
   if (!isLoading && progressLevel === 0) {
     return null;
@@ -1086,7 +1259,7 @@ function FormField({
 }
 
 // src/components/change-password/ChangePassword.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect5 } from "react";
 import {
   Button as Button5,
   VStack as VStack2,
@@ -1118,7 +1291,7 @@ function ChangePassword({
     }
   });
   const newPassword = watch("newPassword");
-  useEffect3(() => {
+  useEffect5(() => {
     if (visible) {
       reset();
     }
@@ -1238,7 +1411,7 @@ function ChangePassword({
 }
 
 // src/components/profile/Profile.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect6 } from "react";
 import {
   Button as Button6,
   VStack as VStack3,
@@ -1272,13 +1445,13 @@ function Profile({
     }
   });
   const modalBusy = isSubmitting || loading;
-  useEffect4(() => {
+  useEffect6(() => {
     if (visible) {
       fetchProfile().then(() => {
       });
     }
   }, [visible, fetchProfile]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (profile) {
       reset({
         userName: profile.userName || "",