elseware-ui 2.36.4 → 2.36.6

package/dist/index.mjs

@@ -21040,16 +21040,70 @@ function UnderConstructionBanner({
 }) {
   return /* @__PURE__ */ jsx("div", { className: "my-5", children: /* @__PURE__ */ 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,
+  onAction,
+  className
+}) {
+  const isError = type === "error";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[220px] w-full items-center justify-center rounded-xl border p-6",
+        "border-eui-dark-300/10 bg-white/70 shadow-sm",
+        "dark:border-eui-light-400/10 dark:bg-eui-dark-900/40",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [
+        /* @__PURE__ */ 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-dark-500/10 text-eui-dark-500 dark:bg-eui-light-500/10 dark:text-eui-light-400"
+            ),
+            children: isError ? "!" : "\u2013"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-eui-dark-900 dark:text-eui-light-50", children: title }),
+          isError ? /* @__PURE__ */ jsx(FormResponse_default, { text: message, variant: "danger" }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-eui-dark-500 dark:text-eui-light-400", children: message })
+        ] }),
+        onAction && actionText && /* @__PURE__ */ 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.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;
   if (error instanceof Error) return error.message;
   if (typeof error === "object") {
     const anyErr = error;
-    if (anyErr?.data?.message && typeof anyErr.data.message === "string") {
+    if (typeof anyErr?.data?.message === "string") {
       return anyErr.data.message;
     }
-    if (anyErr?.message && typeof anyErr.message === "string") {
+    if (typeof anyErr?.message === "string") {
       return anyErr.message;
     }
     if (anyErr?.status) {
@@ -21065,20 +21119,118 @@ var getDefaultErrorMessage = (error) => {
 };
 function AsyncComponentWrapper({
   children,
-  isLoading,
-  isSuccess = true,
-  isError,
+  isLoading = false,
+  isFetching = false,
+  isSuccess,
+  isError = false,
+  isUninitialized = false,
   error,
-  errorFormatter
+  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,
+  onRetry,
+  errorFormatter,
+  className,
+  contentClassName,
+  stateClassName
 }) {
-  const errorMessage = isError && error ? errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error) : void 0;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    isLoading && /* @__PURE__ */ jsx("div", { className: "flex w-full py-10 items-center justify-center", children: /* @__PURE__ */ jsx(AiOutlineLoading, { className: "animate-spin" }) }),
-    isError && errorMessage && /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsx(FormResponse_default, { text: errorMessage, variant: "danger" }) }),
-    !isLoading && !isError && isSuccess && /* @__PURE__ */ jsx("div", { children })
+  const errorMessage = useMemo(() => {
+    if (!isError) return "";
+    return errorFormatter ? errorFormatter(error) : getDefaultErrorMessage(error);
+  }, [isError, error, errorFormatter]);
+  const hasSuccess = isSuccess ?? (!isLoading && !isError && !isUninitialized);
+  const renderLoading = () => {
+    if (loadingFallback) return loadingFallback;
+    if (loadingType === "skeleton") {
+      return /* @__PURE__ */ jsx("div", { className: cn(skeletonWrapperClassName), children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: skeletonClassName }, index)) });
+    }
+    return /* @__PURE__ */ jsx(
+      Spinner_default,
+      {
+        centered: true,
+        label: loadingText,
+        type: "bars",
+        size: "md",
+        variant: "primary",
+        ...spinnerProps
+      }
+    );
+  };
+  const renderError = () => {
+    if (typeof errorFallback === "function") {
+      return errorFallback(errorMessage);
+    }
+    if (errorFallback) return errorFallback;
+    return /* @__PURE__ */ jsx(
+      AsyncStateCard_default,
+      {
+        type: "error",
+        title: errorTitle,
+        message: errorMessage,
+        actionText: onRetry ? retryText : void 0,
+        actionLoading: isFetching,
+        onAction: onRetry,
+        className: stateClassName
+      }
+    );
+  };
+  const renderEmpty = () => {
+    if (emptyFallback) return emptyFallback;
+    return /* @__PURE__ */ jsx(
+      AsyncStateCard_default,
+      {
+        type: "empty",
+        title: emptyTitle,
+        message: emptyText,
+        className: stateClassName
+      }
+    );
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, "aria-live": "polite", children: renderLoading() });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx("div", { className, "aria-live": "polite", children: renderError() });
+  }
+  if (hasSuccess && isEmpty) {
+    return /* @__PURE__ */ jsx("div", { className, "aria-live": "polite", children: renderEmpty() });
+  }
+  if (!hasSuccess) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    showFetchingIndicator && isFetching && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 text-sm text-eui-dark-500 dark:text-eui-light-400", children: [
+      /* @__PURE__ */ jsx(
+        Spinner_default,
+        {
+          size: "xs",
+          type: "bars",
+          variant: "primary",
+          showLabel: false,
+          ariaLabel: fetchingText,
+          ...fetchingSpinnerProps
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: fetchingText })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children })
   ] });
 }
-var AsyncComponentWrapper_default = AsyncComponentWrapper;
+var AsyncComponentWrapper_default = React2.memo(AsyncComponentWrapper);
 function Modal({
   title,
   show = false,