elseware-ui 2.36.5 → 2.36.7

package/dist/index.d.mts

@@ -2204,6 +2204,7 @@ declare const ThemeSwitch: () => React__default.JSX.Element | null;
 
 declare const ShapeSwitch: () => React__default.JSX.Element;
 
+type AsyncLoadingType = "spinner" | "skeleton";
 interface AsyncComponentWrapperProps {
     children: React__default.ReactNode;
     isLoading?: boolean;
@@ -2215,22 +2216,29 @@ interface AsyncComponentWrapperProps {
     isEmpty?: boolean;
     loadingText?: string;
     fetchingText?: string;
+    emptyTitle?: string;
     emptyText?: string;
-    loadingType?: "spinner" | "skeleton";
+    errorTitle?: string;
+    retryText?: string;
+    loadingType?: AsyncLoadingType;
     skeletonCount?: number;
     skeletonClassName?: string;
+    skeletonWrapperClassName?: string;
     spinnerProps?: Partial<SpinnerProps>;
     fetchingSpinnerProps?: Partial<SpinnerProps>;
     loadingFallback?: React__default.ReactNode;
     emptyFallback?: React__default.ReactNode;
     errorFallback?: React__default.ReactNode | ((message: string) => React__default.ReactNode);
     showFetchingIndicator?: boolean;
+    showLoadingOnRetry?: boolean;
     onRetry?: () => void;
     errorFormatter?: (error: unknown) => string;
     className?: string;
     contentClassName?: string;
+    stateClassName?: string;
 }
-declare function AsyncComponentWrapper({ children, isLoading, isFetching, isSuccess, isError, isUninitialized, error, isEmpty, loadingText, fetchingText, emptyText, loadingType, skeletonCount, skeletonClassName, spinnerProps, fetchingSpinnerProps, loadingFallback, emptyFallback, errorFallback, showFetchingIndicator, onRetry, errorFormatter, className, contentClassName, }: AsyncComponentWrapperProps): React__default.JSX.Element | null;
+
+declare function AsyncComponentWrapper({ children, isLoading, isFetching, isSuccess, isError, isUninitialized, error, isEmpty, loadingText, fetchingText, emptyTitle, emptyText, errorTitle, retryText, loadingType, skeletonCount, skeletonClassName, skeletonWrapperClassName, spinnerProps, fetchingSpinnerProps, loadingFallback, emptyFallback, errorFallback, showFetchingIndicator, showLoadingOnRetry, onRetry, errorFormatter, className, contentClassName, stateClassName, }: AsyncComponentWrapperProps): React__default.JSX.Element | null;
 declare const _default: React__default.MemoExoticComponent<typeof AsyncComponentWrapper>;
 
 interface GlowWrapperProps {

package/dist/index.d.ts

@@ -2204,6 +2204,7 @@ declare const ThemeSwitch: () => React__default.JSX.Element | null;
 
 declare const ShapeSwitch: () => React__default.JSX.Element;
 
+type AsyncLoadingType = "spinner" | "skeleton";
 interface AsyncComponentWrapperProps {
     children: React__default.ReactNode;
     isLoading?: boolean;
@@ -2215,22 +2216,29 @@ interface AsyncComponentWrapperProps {
     isEmpty?: boolean;
     loadingText?: string;
     fetchingText?: string;
+    emptyTitle?: string;
     emptyText?: string;
-    loadingType?: "spinner" | "skeleton";
+    errorTitle?: string;
+    retryText?: string;
+    loadingType?: AsyncLoadingType;
     skeletonCount?: number;
     skeletonClassName?: string;
+    skeletonWrapperClassName?: string;
     spinnerProps?: Partial<SpinnerProps>;
     fetchingSpinnerProps?: Partial<SpinnerProps>;
     loadingFallback?: React__default.ReactNode;
     emptyFallback?: React__default.ReactNode;
     errorFallback?: React__default.ReactNode | ((message: string) => React__default.ReactNode);
     showFetchingIndicator?: boolean;
+    showLoadingOnRetry?: boolean;
     onRetry?: () => void;
     errorFormatter?: (error: unknown) => string;
     className?: string;
     contentClassName?: string;
+    stateClassName?: string;
 }
-declare function AsyncComponentWrapper({ children, isLoading, isFetching, isSuccess, isError, isUninitialized, error, isEmpty, loadingText, fetchingText, emptyText, loadingType, skeletonCount, skeletonClassName, spinnerProps, fetchingSpinnerProps, loadingFallback, emptyFallback, errorFallback, showFetchingIndicator, onRetry, errorFormatter, className, contentClassName, }: AsyncComponentWrapperProps): React__default.JSX.Element | null;
+
+declare function AsyncComponentWrapper({ children, isLoading, isFetching, isSuccess, isError, isUninitialized, error, isEmpty, loadingText, fetchingText, emptyTitle, emptyText, errorTitle, retryText, loadingType, skeletonCount, skeletonClassName, skeletonWrapperClassName, spinnerProps, fetchingSpinnerProps, loadingFallback, emptyFallback, errorFallback, showFetchingIndicator, showLoadingOnRetry, onRetry, errorFormatter, className, contentClassName, stateClassName, }: AsyncComponentWrapperProps): React__default.JSX.Element | null;
 declare const _default: React__default.MemoExoticComponent<typeof AsyncComponentWrapper>;
 
 interface GlowWrapperProps {

package/dist/index.js

@@ -21068,6 +21068,59 @@ function UnderConstructionBanner({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-5", children: /* @__PURE__ */ jsxRuntime.jsx(Info_default, { children: text ? text : "This component is currently under construction and will be made available soon" }) });
 }
+function AsyncStateCard({
+  type,
+  title,
+  message,
+  actionText,
+  actionLoading = false,
+  onAction,
+  className
+}) {
+  const isError = type === "error";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[240px] w-full items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Card_default,
+    {
+      bgVariant: "default",
+      borderVariant: isError ? "danger" : "secondary",
+      shape: "softRoundedSquare",
+      hoverAnimation: "softLift",
+      styles: cn("w-full max-w-xl", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(CardContent_default, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-5 px-4 py-8 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-12 w-12 items-center justify-center rounded-full text-xl font-bold",
+              isError ? "bg-eui-danger-500/10 text-eui-danger-500" : "bg-eui-secondary-500/10 text-eui-secondary-500"
+            ),
+            children: isError ? "!" : "\u2013"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-eui-dark-900 dark:text-eui-light-50", children: title }),
+          isError ? /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: message, variant: "danger" }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-eui-dark-500 dark:text-eui-light-400", children: message })
+        ] }),
+        onAction && actionText && /* @__PURE__ */ jsxRuntime.jsx(
+          Button_default,
+          {
+            type: "button",
+            text: actionText,
+            loading: actionLoading,
+            disabled: actionLoading,
+            onClick: onAction,
+            variant: isError ? "danger" : "primary",
+            appearance: "solid",
+            size: "sm"
+          }
+        )
+      ] }) })
+    }
+  ) });
+}
+var AsyncStateCard_default = React2__default.default.memo(AsyncStateCard);
+
+// src/components/utils/async-component-wrapper/asyncError.utils.ts
 var getDefaultErrorMessage = (error) => {
   if (!error) return "Something went wrong.";
   if (typeof error === "string") return error;
@@ -21102,37 +21155,44 @@ function AsyncComponentWrapper({
   isEmpty = false,
   loadingText = "Loading...",
   fetchingText = "Updating...",
+  emptyTitle = "No data found",
   emptyText = "No data available.",
+  errorTitle = "Something went wrong",
+  retryText = "Retry",
   loadingType = "spinner",
   skeletonCount = 3,
   skeletonClassName = "h-24 w-full rounded-md",
+  skeletonWrapperClassName = "flex flex-col gap-3 py-4",
   spinnerProps,
   fetchingSpinnerProps,
   loadingFallback,
   emptyFallback,
   errorFallback,
   showFetchingIndicator = true,
+  showLoadingOnRetry = true,
   onRetry,
   errorFormatter,
   className,
-  contentClassName
+  contentClassName,
+  stateClassName
 }) {
   const errorMessage = React2.useMemo(() => {
     if (!isError) return "";
     return errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error);
   }, [isError, error, errorFormatter]);
   const hasSuccess = isSuccess ?? (!isLoading && !isError && !isUninitialized);
+  const shouldShowLoading = isLoading || showLoadingOnRetry && isFetching && isError;
   const renderLoading = () => {
     if (loadingFallback) return loadingFallback;
     if (loadingType === "skeleton") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 py-4", children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: skeletonClassName }, index)) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(skeletonWrapperClassName), children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: skeletonClassName }, index)) });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Spinner_default,
       {
         centered: true,
         label: loadingText,
-        type: "border",
+        type: "bars",
         size: "md",
         variant: "primary",
         ...spinnerProps
@@ -21143,27 +21203,33 @@ function AsyncComponentWrapper({
     if (typeof errorFallback === "function") {
       return errorFallback(errorMessage);
     }
-    if (errorFallback) {
-      return errorFallback;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(FormResponse_default, { text: errorMessage, variant: "danger" }),
-      onRetry && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onRetry,
-          className: "mt-3 rounded-md border px-4 py-2",
-          children: "Retry"
-        }
-      )
-    ] });
+    if (errorFallback) return errorFallback;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AsyncStateCard_default,
+      {
+        type: "error",
+        title: errorTitle,
+        message: errorMessage,
+        actionText: onRetry ? retryText : void 0,
+        actionLoading: false,
+        onAction: onRetry,
+        className: stateClassName
+      }
+    );
   };
   const renderEmpty = () => {
     if (emptyFallback) return emptyFallback;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-10 text-center text-gray-500", children: emptyText });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AsyncStateCard_default,
+      {
+        type: "empty",
+        title: emptyTitle,
+        message: emptyText,
+        className: stateClassName
+      }
+    );
   };
-  if (isLoading) {
+  if (shouldShowLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "aria-live": "polite", children: renderLoading() });
   }
   if (isError) {
@@ -21176,12 +21242,12 @@ function AsyncComponentWrapper({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-gray-500", children: [
+    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-eui-dark-500 dark:text-eui-light-400", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Spinner_default,
         {
           size: "xs",
-          type: "border",
+          type: "bars",
           variant: "primary",
           showLabel: false,
           ariaLabel: fetchingText,