fix

comps/form/Form.tsx

@@ -1,14 +1,13 @@
+import { getPathname } from "lib/utils/pathname";
+import { sofDeleteField as softDeleteField } from "lib/utils/soft-del-rel";
 import { useLocal } from "lib/utils/use-local";
 import { FC, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { Toaster } from "sonner";
+import { Toaster } from "../ui/toast";
 import { FMInternal, FMProps } from "./typings";
 import { editorFormData } from "./utils/ed-data";
 import { formInit } from "./utils/init";
 import { formReload } from "./utils/reload";
-import { getPathname } from "lib/utils/pathname";
-import { sofDeleteField as softDeleteField } from "lib/utils/soft-del-rel";
-import { toast } from "../ui/toast";
 
 export const editorFormWidth = {} as Record<string, { w: number; f: any }>;
 
@@ -86,7 +85,7 @@ export const Form: FC<FMProps> = (props) => {
   const ref = useRef({
     el: null as null | HTMLFormElement,
     rob: new ResizeObserver(([e]) => {
-      if (e.contentRect.width > 0) {
+      if (e.contentRect.width > 0 && fm.size && fm.props) {
         fm.size.height = e.contentRect.height;
         fm.size.width = e.contentRect.width;
 
@@ -188,8 +187,7 @@ export const Form: FC<FMProps> = (props) => {
         "form c-flex-1 c-w-full c-h-full c-relative c-overflow-auto"
       )}
     >
-      {toaster_el &&
+      {toaster_el && createPortal(<Toaster />, toaster_el)}
-        createPortal(<Toaster position={toast.position} cn={cx} />, toaster_el)}
       <div
         ref={form_inner_ref}
         className={cx(
@@ -211,7 +209,7 @@ export const Form: FC<FMProps> = (props) => {
         )}
       >
         <>
-          {fm.status !== "init" && fm.size.width > 0 && (
+          {fm.status !== "init" && (fm.size?.width || 0) > 0 && (
             <PassProp fm={fm} submit={fm.submit}>
               {!fm.data ? <>NO DATA</> : body}
             </PassProp>

comps/form/base/BaseForm.tsx

@@ -1,10 +1,10 @@
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { Toaster } from "sonner";
 import { editorFormWidth } from "../Form";
 import { FMLocal } from "../typings";
 import { createFm } from "./utils/create-fm";
 import { DivForm } from "./utils/DivForm";
+import { Toaster } from "lib/exports";
 
 export type BaseFormProps<T> = {
   name: string;
@@ -93,7 +93,7 @@ export const BaseForm = <T extends Record<string, any>>({
         className
       )}
     >
-      {toaster_el && createPortal(<Toaster cn={cx} />, toaster_el)}
+      {toaster_el && createPortal(<Toaster />, toaster_el)}
 
       <div
         className={cx(

comps/list/TableList.tsx

@@ -24,16 +24,15 @@ import DataGrid, {
   ColumnOrColumnGroup,
   RenderCellProps,
   Row,
-  SortColumn
+  SortColumn,
 } from "react-data-grid";
 import "react-data-grid/lib/styles.css";
 import { createPortal } from "react-dom";
-import { Toaster } from "sonner";
 import { filterWhere } from "../filter/parser/filter-where";
 import { getFilter } from "../filter/utils/get-filter";
 import { MDLocal } from "../md/utils/typings";
 import { Skeleton } from "../ui/skeleton";
-import { toast } from "../ui/toast";
+import { toast, Toaster } from "../ui/toast";
 import { TLList } from "./TLList";
 import { TLSlider } from "./TLSlider";
 import { sortTree } from "./utils/sort-tree";
@@ -225,7 +224,10 @@ export const TableList: FC<TableListProp> = ({
                   }
                 }, 10);
               });
-              if (Array.isArray(md?.params?.links) && md?.params?.links?.length) {
+              if (
+                Array.isArray(md?.params?.links) &&
+                md?.params?.links?.length
+              ) {
                 const last = md.params.links[md.params.links.length - 1];
 
                 if (last && last.where) {
@@ -238,78 +240,80 @@ export const TableList: FC<TableListProp> = ({
               }
             }
 
-          call_prasi_events("tablelist", "where", [__props?.gen__table, where]);
+            call_prasi_events("tablelist", "where", [
+              __props?.gen__table,
+              where,
+            ]);
 
-          const load_args: any = {
+            const load_args: any = {
-            async reload() {},
+              async reload() {},
-            orderBy,
+              orderBy,
-            where,
+              where,
-            paging: {
+              paging: {
-              take: local.paging.take > 0 ? local.paging.take : undefined,
+                take: local.paging.take > 0 ? local.paging.take : undefined,
-              skip: local.paging.skip,
+                skip: local.paging.skip,
-            },
+              },
-          };
+            };
 
-          if (id_parent) {
+            if (id_parent) {
-            load_args.paging = {};
+              load_args.paging = {};
-          }
-          const result = on_load({ ...load_args, mode: "query" });
-          const callback = (data: any[]) => {
-            if (
-              id_parent ||
-              !local.paging ||
-              (local.paging && !local.paging.take) ||
-              local.paging.skip === 0
-            ) {
-              local.data = data;
-            } else {
-              local.data = [...local.data, ...data];
             }
-
+            const result = on_load({ ...load_args, mode: "query" });
-            local.paging.last_length = local.data.length;
+            const callback = (data: any[]) => {
-
-            local.status = "ready";
-            local.reloading = null;
-            local.render();
-
-            done();
-            setTimeout(() => {
               if (
-                local.grid_ref &&
+                id_parent ||
-                !id_parent &&
+                !local.paging ||
-                (paging !== undefined || paging)
+                (local.paging && !local.paging.take) ||
+                local.paging.skip === 0
               ) {
-                local.paging.scroll(local.grid_ref);
+                local.data = data;
+              } else {
+                local.data = [...local.data, ...data];
               }
-            }, 100);
-          };
 
-          if (result instanceof Promise) {
+              local.paging.last_length = local.data.length;
-            (async () => {
+
-              try {
+              local.status = "ready";
-                callback(await result);
+              local.reloading = null;
-              } catch (e) {
+              local.render();
-                console.error(e);
+
-                local.status = "error";
+              done();
-                toast.dismiss();
+              setTimeout(() => {
-                toast.error(
+                if (
-                  <div className="c-flex c-text-red-600 c-items-center">
+                  local.grid_ref &&
-                    <AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
+                  !id_parent &&
-                    Failed to load data
+                  (paging !== undefined || paging)
-                  </div>,
+                ) {
-                  {
+                  local.paging.scroll(local.grid_ref);
-                    dismissible: true,
+                }
-                    className: css`
+              }, 100);
-                      background: #ffecec;
+            };
-                      border: 2px solid red;
+
-                    `,
+            if (result instanceof Promise) {
-                  }
+              (async () => {
-                );
+                try {
-              }
+                  callback(await result);
-            })();
+                } catch (e) {
-          } else callback(result);
+                  console.error(e);
+                  local.status = "error";
+                  toast.dismiss();
+                  toast.error(
+                    <div className="c-flex c-text-red-600 c-items-center">
+                      <AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
+                      Failed to load data
+                    </div>,
+                    {
+                      dismissible: true,
+                      className: css`
+                        background: #ffecec;
+                        border: 2px solid red;
+                      `,
+                    }
+                  );
+                }
+              })();
+            } else callback(result);
           }
-
         });
 
         return local.reloading;
@@ -853,11 +857,7 @@ export const TableList: FC<TableListProp> = ({
               if (e) local.height = e.offsetHeight;
             }}
           >
-            {toaster_el &&
+            {toaster_el && createPortal(<Toaster />, toaster_el)}
-              createPortal(
-                <Toaster position={toast.position} cn={cn} />,
-                toaster_el
-              )}
             {local.status === "init" ? (
               <DataGrid
                 style={{ opacity: 0 }}
@@ -980,11 +980,7 @@ export const TableList: FC<TableListProp> = ({
   } else if (mode === "list") {
     return (
       <>
-        {toaster_el &&
+        {toaster_el && createPortal(<Toaster />, toaster_el)}
-          createPortal(
-            <Toaster position={toast.position} cn={cn} />,
-            toaster_el
-          )}
         {list.type !== "slider" && list.type !== "grid" && (
           <TLList
             row_click={row_click}

comps/ui/sonner.tsx

@@ -1,29 +0,0 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="c-toaster c-group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }