@officesdk/design 0.1.18 → 0.1.20

package/dist/components/esm/index.d.ts

@@ -673,11 +673,11 @@ declare const IconProvider: React.FC<IconProviderProps>;
  */
 declare const useIconRegistry: () => IconRegistry | null;
 
-interface ToastProps {
+interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'onClick'> {
     /**
      * Toast variant type
      */
-    variant?: 'success' | 'info' | 'error' | 'warn';
+    variant?: 'success' | 'info' | 'error' | 'warn' | 'loading';
     /**
      * Toast message content (main text)
      */
@@ -771,6 +771,7 @@ interface ToastContextValue {
     info: (message: React.ReactNode, options?: Partial<ToastProps>) => string;
     error: (message: React.ReactNode, options?: Partial<ToastProps>) => string;
     warn: (message: React.ReactNode, options?: Partial<ToastProps>) => string;
+    loading: (message: React.ReactNode, options?: Partial<ToastProps>) => string;
 }
 interface ToastContainerProps {
     placement?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
@@ -847,6 +848,7 @@ declare const toast: {
     info: (message: React.ReactNode, options?: Partial<ToastProps>) => string;
     error: (message: React.ReactNode, options?: Partial<ToastProps>) => string;
     warn: (message: React.ReactNode, options?: Partial<ToastProps>) => string;
+    loading: (message: React.ReactNode, options?: Partial<ToastProps>) => string;
     destroy: () => void;
 };
 

package/dist/components/esm/index.js

@@ -163,13 +163,22 @@ var init_Icon2 = __esm({
     init_IconProvider();
   }
 });
-var ToastContainer, IconWrapper, ContentWrapper, Message, Description, ActionGroup, SuccessIcon, InfoIcon, ErrorIcon, WarnIcon, CloseIconSvg, Toast;
+
+// src/Toast/loading.gif
+var loading_default;
+var init_loading = __esm({
+  "src/Toast/loading.gif"() {
+    loading_default = "./loading-ASMP54FR.gif";
+  }
+});
+var ToastContainer, IconWrapper, ContentWrapper, Message, Description, ActionGroup, SuccessIcon, InfoIcon, ErrorIcon, WarnIcon, CloseIconSvg, LoadingIcon, Toast;
 var init_Toast = __esm({
   "src/Toast/Toast.tsx"() {
     init_styled();
     init_Icon2();
     init_Button2();
     init_context();
+    init_loading();
     ToastContainer = styled.div`
   display: inline-flex;
   align-items: center;
@@ -231,11 +240,21 @@ var init_Toast = __esm({
   gap: 2px;
   align-items: center;
 `;
-    SuccessIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React3.createElement("path", { d: "M6 10L9 13L14 7", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
+    SuccessIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#4ea44b" }), /* @__PURE__ */ React3.createElement(
+      "path",
+      {
+        d: "M6 10L9 13L14 7",
+        stroke: "white",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ));
     InfoIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#5ba0e7" }), /* @__PURE__ */ React3.createElement("path", { d: "M10 9V14M10 6H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
     ErrorIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#e95555" }), /* @__PURE__ */ React3.createElement("path", { d: "M7 7L13 13M13 7L7 13", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
     WarnIcon = () => /* @__PURE__ */ React3.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("circle", { cx: "10", cy: "10", r: "8", fill: "#ebe361" }), /* @__PURE__ */ React3.createElement("path", { d: "M10 6V11M10 14H10.01", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }));
     CloseIconSvg = () => /* @__PURE__ */ React3.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.createElement("path", { d: "M9 3L3 9M3 3L9 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }));
+    LoadingIcon = () => /* @__PURE__ */ React3.createElement("img", { src: loading_default, alt: "Loading", width: "20", height: "20" });
     Toast = ({
       variant = "info",
       message,
@@ -250,7 +269,8 @@ var init_Toast = __esm({
       icon,
       showIcon = true,
       className,
-      style
+      style,
+      ...restProps
     }) => {
       const [visible, setVisible] = useState(true);
       useEffect(() => {
@@ -282,7 +302,8 @@ var init_Toast = __esm({
           success: /* @__PURE__ */ React3.createElement(SuccessIcon, null),
           info: /* @__PURE__ */ React3.createElement(InfoIcon, null),
           error: /* @__PURE__ */ React3.createElement(ErrorIcon, null),
-          warn: /* @__PURE__ */ React3.createElement(WarnIcon, null)
+          warn: /* @__PURE__ */ React3.createElement(WarnIcon, null),
+          loading: /* @__PURE__ */ React3.createElement(LoadingIcon, null)
         };
         return defaultIcons[variant];
       };
@@ -296,20 +317,12 @@ var init_Toast = __esm({
           className,
           style,
           role: "alert",
-          "aria-live": "polite"
+          "aria-live": "polite",
+          ...restProps
         },
         showIcon && /* @__PURE__ */ React3.createElement(IconWrapper, { $variant: variant, $hasDescription: hasDescription }, iconElement),
         /* @__PURE__ */ React3.createElement(ContentWrapper, { $hasDescription: hasDescription }, /* @__PURE__ */ React3.createElement(Message, null, message), description && /* @__PURE__ */ React3.createElement(Description, null, description)),
-        hasActions && /* @__PURE__ */ React3.createElement(ActionGroup, null, mainButtonText && onMainButtonClick && /* @__PURE__ */ React3.createElement(
-          Button,
-          {
-            variant: "text",
-            colorType: "guidance",
-            size: "small",
-            onClick: onMainButtonClick
-          },
-          mainButtonText
-        ), secondaryButtonText && onSecondaryButtonClick && /* @__PURE__ */ React3.createElement(
+        hasActions && /* @__PURE__ */ React3.createElement(ActionGroup, null, mainButtonText && onMainButtonClick && /* @__PURE__ */ React3.createElement(Button, { variant: "text", colorType: "guidance", size: "small", onClick: onMainButtonClick }, mainButtonText), secondaryButtonText && onSecondaryButtonClick && /* @__PURE__ */ React3.createElement(
           Button,
           {
             variant: "text",
@@ -510,6 +523,12 @@ var init_toastManager = __esm({
       warn(message, options) {
         return this.show({ ...options, variant: "warn", message });
       }
+      /**
+       * Show loading toast
+       */
+      loading(message, options) {
+        return this.show({ ...options, variant: "loading", message });
+      }
       /**
        * Destroy the toast container
        */
@@ -549,6 +568,7 @@ var init_toastManager = __esm({
       info: (message, options) => toastManager.info(message, options),
       error: (message, options) => toastManager.error(message, options),
       warn: (message, options) => toastManager.warn(message, options),
+      loading: (message, options) => toastManager.loading(message, options),
       destroy: () => toastManager.destroy()
     };
   }
@@ -2561,13 +2581,17 @@ var ToastContainer2 = ({
   const warn = useCallback((message, options) => {
     return showToast({ ...options, variant: "warn", message });
   }, [showToast]);
+  const loading = useCallback((message, options) => {
+    return showToast({ ...options, variant: "loading", message });
+  }, [showToast]);
   const contextValue = {
     showToast,
     hideToast,
     success,
     info,
     error,
-    warn
+    warn,
+    loading
   };
   return /* @__PURE__ */ React3.createElement(ToastContext.Provider, { value: contextValue }, children, /* @__PURE__ */ React3.createElement(ToastWrapper2, { $placement: placement }, toasts.map((toast2) => /* @__PURE__ */ React3.createElement(
     Toast,