@iblai/web-containers 0.0.5 → 0.0.6

package/dist/components/profile/invite-user.d.ts

@@ -1,5 +1,6 @@
-export declare function InviteUserDialog({ tenant, onSeeAllInvitedUsersClick, onClose, }: {
+export declare function InviteUserDialog({ tenant, onSeeAllInvitedUsersClick, onClose, isOpen, }: {
     tenant: string;
     onSeeAllInvitedUsersClick: () => void;
     onClose: () => void;
+    isOpen: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-import "./global.css";
 export * from "./hooks";
 export * from "./components";

package/dist/index.esm.js

@@ -3889,7 +3889,7 @@ const oppositeAlignmentMap = {
 function clamp(start, value, end) {
   return max(start, min(value, end));
 }
-function evaluate(value, param) {
+function evaluate$1(value, param) {
   return typeof value === 'function' ? value(param) : value;
 }
 function getSide(placement) {
@@ -4171,7 +4171,7 @@ async function detectOverflow(state, options) {
     elementContext = 'floating',
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state);
+  } = evaluate$1(options, state);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === 'floating' ? 'reference' : 'floating';
   const element = elements[altBoundary ? altContext : elementContext];
@@ -4231,7 +4231,7 @@ const arrow$3 = options => ({
     const {
       element,
       padding = 0
-    } = evaluate(options, state) || {};
+    } = evaluate$1(options, state) || {};
     if (element == null) {
       return {};
     }
@@ -4322,7 +4322,7 @@ const flip$2 = function (options) {
         fallbackAxisSideDirection = 'none',
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state);
+      } = evaluate$1(options, state);
 
       // If a reset by the arrow was caused due to an alignment offset being
       // added, we should skip any logic now since `flip()` has already done its
@@ -4452,7 +4452,7 @@ const hide$2 = function (options) {
       const {
         strategy = 'referenceHidden',
         ...detectOverflowOptions
-      } = evaluate(options, state);
+      } = evaluate$1(options, state);
       switch (strategy) {
         case 'referenceHidden':
           {
@@ -4506,7 +4506,7 @@ async function convertValueToCoords(state, options) {
   const isVertical = getSideAxis(placement) === 'y';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = evaluate(options, state);
+  const rawValue = evaluate$1(options, state);
 
   // eslint-disable-next-line prefer-const
   let {
@@ -4609,7 +4609,7 @@ const shift$2 = function (options) {
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state);
+      } = evaluate$1(options, state);
       const coords = {
         x,
         y
@@ -4673,7 +4673,7 @@ const limitShift$2 = function (options) {
         offset = 0,
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true
-      } = evaluate(options, state);
+      } = evaluate$1(options, state);
       const coords = {
         x,
         y
@@ -4682,7 +4682,7 @@ const limitShift$2 = function (options) {
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
-      const rawOffset = evaluate(offset, state);
+      const rawOffset = evaluate$1(offset, state);
       const computedOffset = typeof rawOffset === 'number' ? {
         mainAxis: rawOffset,
         crossAxis: 0
@@ -4745,7 +4745,7 @@ const size$2 = function (options) {
       const {
         apply = () => {},
         ...detectOverflowOptions
-      } = evaluate(options, state);
+      } = evaluate$1(options, state);
       const overflow = await detectOverflow(state, detectOverflowOptions);
       const side = getSide(placement);
       const alignment = getAlignment(placement);
@@ -10110,7 +10110,7 @@ var Close$1 = ToastClose$1;
 const ToastProvider = Provider;
 const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (jsx(Viewport, { ref: ref, className: cn("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", className), ...props })));
 ToastViewport.displayName = Viewport.displayName;
-const toastVariants = cva("group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", {
+const toastVariants = cva("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", {
     variants: {
         variant: {
             default: "border bg-background text-foreground",
@@ -10125,11 +10125,11 @@ const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
     return (jsx(Root2, { ref: ref, className: cn(toastVariants({ variant }), className), ...props }));
 });
 Toast.displayName = Root2.displayName;
-const ToastAction = React.forwardRef(({ className, ...props }, ref) => (jsx(Action, { ref: ref, className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", className), ...props })));
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => (jsx(Action, { ref: ref, className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", className), ...props })));
 ToastAction.displayName = Action.displayName;
-const ToastClose = React.forwardRef(({ className, ...props }, ref) => (jsx(Close$1, { ref: ref, className: cn("absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className), "toast-close": "", ...props, children: jsx(X, { className: "h-4 w-4" }) })));
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => (jsx(Close$1, { ref: ref, className: cn("absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className), "toast-close": "", ...props, children: jsx(X, { className: "h-4 w-4" }) })));
 ToastClose.displayName = Close$1.displayName;
-const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(Title$1, { ref: ref, className: cn("text-sm font-semibold [&+div]:text-xs", className), ...props })));
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(Title$1, { ref: ref, className: cn("text-sm font-semibold", className), ...props })));
 ToastTitle.displayName = Title$1.displayName;
 const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (jsx(Description$1, { ref: ref, className: cn("text-sm opacity-90", className), ...props })));
 ToastDescription.displayName = Description$1.displayName;
@@ -11049,7 +11049,7 @@ function getSyncValidatorArray(cause, options) {
 const isGlobalFormValidationError = (error) => {
   return !!error && typeof error === "object" && "fields" in error;
 };
-function shallow$1(objA, objB) {
+function evaluate(objA, objB) {
   if (Object.is(objA, objB)) {
     return true;
   }
@@ -11071,11 +11071,12 @@ function shallow$1(objA, objB) {
     return true;
   }
   const keysA = Object.keys(objA);
-  if (keysA.length !== Object.keys(objB).length) {
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
     return false;
   }
-  for (let i = 0; i < keysA.length; i++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+  for (const key of keysA) {
+    if (!keysB.includes(key) || !evaluate(objA[key], objB[key])) {
       return false;
     }
   }
@@ -11162,6 +11163,7 @@ const defaultFieldMeta = {
   isDirty: false,
   isPristine: true,
   isValid: true,
+  isDefaultValue: true,
   errors: [],
   errorMap: {},
   errorSourceMap: {}
@@ -11323,8 +11325,8 @@ class FormApi {
       const shouldUpdateReeval = !!((_b = (_a2 = options.transform) == null ? void 0 : _a2.deps) == null ? void 0 : _b.some(
         (val, i) => val !== this.prevTransformArray[i]
       ));
-      const shouldUpdateValues = options.defaultValues && !shallow$1(options.defaultValues, oldOptions.defaultValues) && !this.state.isTouched;
-      const shouldUpdateState = !shallow$1(options.defaultState, oldOptions.defaultState) && !this.state.isTouched;
+      const shouldUpdateValues = options.defaultValues && !evaluate(options.defaultValues, oldOptions.defaultValues) && !this.state.isTouched;
+      const shouldUpdateState = !evaluate(options.defaultState, oldOptions.defaultState) && !this.state.isTouched;
       if (!shouldUpdateValues && !shouldUpdateState && !shouldUpdateReeval) return;
       batch(() => {
         this.baseStore.setState(
@@ -11812,10 +11814,7 @@ class FormApi {
             ...prev.fieldMetaBase,
             [field]: defaultFieldMeta
           },
-          values: {
-            ...prev.values,
-            [field]: this.options.defaultValues && this.options.defaultValues[field]
-          }
+          values: this.options.defaultValues ? setBy(prev.values, field, getBy(this.options.defaultValues, field)) : prev.values
         };
       });
     };
@@ -11860,7 +11859,7 @@ class FormApi {
     this.fieldMetaDerived = new Derived({
       deps: [this.baseStore],
       fn: ({ prevDepVals, currDepVals, prevVal: _prevVal }) => {
-        var _a2;
+        var _a2, _b, _c;
         const prevVal = _prevVal;
         const prevBaseStore = prevDepVals == null ? void 0 : prevDepVals[0];
         const currBaseStore = currDepVals[0];
@@ -11869,12 +11868,13 @@ class FormApi {
         for (const fieldName of Object.keys(
           currBaseStore.fieldMetaBase
         )) {
-          const currBaseVal = currBaseStore.fieldMetaBase[fieldName];
-          const prevBaseVal = prevBaseStore == null ? void 0 : prevBaseStore.fieldMetaBase[fieldName];
+          const currBaseMeta = currBaseStore.fieldMetaBase[fieldName];
+          const prevBaseMeta = prevBaseStore == null ? void 0 : prevBaseStore.fieldMetaBase[fieldName];
           const prevFieldInfo = prevVal == null ? void 0 : prevVal[fieldName];
+          const curFieldVal = getBy(currBaseStore.values, fieldName);
           let fieldErrors = prevFieldInfo == null ? void 0 : prevFieldInfo.errors;
-          if (!prevBaseVal || currBaseVal.errorMap !== prevBaseVal.errorMap) {
-            fieldErrors = Object.values(currBaseVal.errorMap ?? {}).filter(
+          if (!prevBaseMeta || currBaseMeta.errorMap !== prevBaseMeta.errorMap) {
+            fieldErrors = Object.values(currBaseMeta.errorMap ?? {}).filter(
               (val) => val !== void 0
             );
             const fieldInstance = (_a2 = this.getFieldInfo(fieldName)) == null ? void 0 : _a2.instance;
@@ -11884,18 +11884,27 @@ class FormApi {
               );
             }
           }
-          const isFieldPristine = !currBaseVal.isDirty;
           const isFieldValid = !isNonEmptyArray(fieldErrors ?? []);
-          if (prevFieldInfo && prevFieldInfo.isPristine === isFieldPristine && prevFieldInfo.isValid === isFieldValid && prevFieldInfo.errors === fieldErrors && currBaseVal === prevBaseVal) {
+          const isFieldPristine = !currBaseMeta.isDirty;
+          const isDefaultValue = evaluate(
+            curFieldVal,
+            getBy(this.options.defaultValues, fieldName)
+          ) || evaluate(
+            curFieldVal,
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            (_c = (_b = this.getFieldInfo(fieldName)) == null ? void 0 : _b.instance) == null ? void 0 : _c.options.defaultValue
+          );
+          if (prevFieldInfo && prevFieldInfo.isPristine === isFieldPristine && prevFieldInfo.isValid === isFieldValid && prevFieldInfo.isDefaultValue === isDefaultValue && prevFieldInfo.errors === fieldErrors && currBaseMeta === prevBaseMeta) {
             fieldMeta[fieldName] = prevFieldInfo;
             originalMetaCount++;
             continue;
           }
           fieldMeta[fieldName] = {
-            ...currBaseVal,
+            ...currBaseMeta,
             errors: fieldErrors,
             isPristine: isFieldPristine,
-            isValid: isFieldValid
+            isValid: isFieldValid,
+            isDefaultValue
           };
         }
         if (!Object.keys(currBaseStore.fieldMetaBase).length) return fieldMeta;
@@ -11922,6 +11931,9 @@ class FormApi {
         const isFieldsValid = fieldMetaValues.every((field) => field.isValid);
         const isTouched = fieldMetaValues.some((field) => field.isTouched);
         const isBlurred = fieldMetaValues.some((field) => field.isBlurred);
+        const isDefaultValue = fieldMetaValues.every(
+          (field) => field.isDefaultValue
+        );
         const shouldInvalidateOnMount = (
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
           isTouched && ((_a2 = currBaseStore.errorMap) == null ? void 0 : _a2.onMount)
@@ -11960,7 +11972,7 @@ class FormApi {
           );
           errorMap = Object.assign(errorMap, { onMount: void 0 });
         }
-        if (prevVal && prevBaseStore && prevVal.errorMap === errorMap && prevVal.fieldMeta === this.fieldMetaDerived.state && prevVal.errors === errors && prevVal.isFieldsValidating === isFieldsValidating && prevVal.isFieldsValid === isFieldsValid && prevVal.isFormValid === isFormValid && prevVal.isValid === isValid && prevVal.canSubmit === canSubmit && prevVal.isTouched === isTouched && prevVal.isBlurred === isBlurred && prevVal.isPristine === isPristine && prevVal.isDirty === isDirty && shallow$1(prevBaseStore, currBaseStore)) {
+        if (prevVal && prevBaseStore && prevVal.errorMap === errorMap && prevVal.fieldMeta === this.fieldMetaDerived.state && prevVal.errors === errors && prevVal.isFieldsValidating === isFieldsValidating && prevVal.isFieldsValid === isFieldsValid && prevVal.isFormValid === isFormValid && prevVal.isValid === isValid && prevVal.canSubmit === canSubmit && prevVal.isTouched === isTouched && prevVal.isBlurred === isBlurred && prevVal.isPristine === isPristine && prevVal.isDefaultValue === isDefaultValue && prevVal.isDirty === isDirty && evaluate(prevBaseStore, currBaseStore)) {
           return prevVal;
         }
         let state = {
@@ -11976,6 +11988,7 @@ class FormApi {
           isTouched,
           isBlurred,
           isPristine,
+          isDefaultValue,
           isDirty
         };
         const transformArray = ((_c = this.options.transform) == null ? void 0 : _c.deps) ?? [];
@@ -12092,13 +12105,46 @@ class FormApi {
    * Updates the form's errorMap
    */
   setErrorMap(errorMap) {
-    this.baseStore.setState((prev) => ({
-      ...prev,
-      errorMap: {
-        ...prev.errorMap,
-        ...errorMap
-      }
-    }));
+    batch(() => {
+      Object.entries(errorMap).forEach(([key, value]) => {
+        const errorMapKey = key;
+        if (isGlobalFormValidationError(value)) {
+          const { formError, fieldErrors } = normalizeError$1(value);
+          for (const fieldName of Object.keys(
+            this.fieldInfo
+          )) {
+            const fieldMeta = this.getFieldMeta(fieldName);
+            if (!fieldMeta) continue;
+            this.setFieldMeta(fieldName, (prev) => ({
+              ...prev,
+              errorMap: {
+                ...prev.errorMap,
+                [errorMapKey]: fieldErrors == null ? void 0 : fieldErrors[fieldName]
+              },
+              errorSourceMap: {
+                ...prev.errorSourceMap,
+                [errorMapKey]: "form"
+              }
+            }));
+          }
+          this.baseStore.setState((prev) => ({
+            ...prev,
+            errorMap: {
+              ...prev.errorMap,
+              [errorMapKey]: formError
+            }
+          }));
+        } else {
+          this.baseStore.setState((prev) => ({
+            ...prev,
+            errorMap: {
+              ...prev.errorMap,
+              [errorMapKey]: value
+            }
+          }));
+        }
+      });
+    });
   }
 }
 function normalizeError$1(rawError) {
@@ -14151,26 +14197,47 @@ const getUserName = () => {
     return (_a = JSON.parse(localStorage.getItem("userData"))) === null || _a === void 0 ? void 0 : _a.user_nicename;
 };
 
-function InviteUserDialog({ tenant, onSeeAllInvitedUsersClick, onClose, }) {
+function InviteUserDialog({ tenant, onSeeAllInvitedUsersClick, onClose, isOpen, }) {
     const [inviteUser] = useInviteUserMutation();
     const [email, setEmail] = useState("");
-    const [isOpen, setIsOpen] = useState(true);
+    const containerRef = useRef(null);
+    const { toast } = useToast();
+    useEffect(() => {
+        containerRef.current = document.getElementById("invite-user-dialog-container");
+    }, []);
     const handleInviteUser = async () => {
-        await inviteUser([
-            {
-                email,
-                platform_key: tenant,
-                redirect_to: window.location.href,
-                source: getUserName(),
-            },
-        ]);
+        try {
+            await inviteUser([
+                {
+                    email,
+                    platform_key: tenant,
+                    redirect_to: window.location.href,
+                    source: getUserName(),
+                },
+            ]);
+            setEmail("");
+            toast({
+                title: "Success",
+                description: `Invited user {email} successfully`,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
     };
-    return (jsx(Fragment, { children: jsx(Dialog, { open: isOpen, onOpenChange: (open) => {
-                if (!open) {
-                    setIsOpen(open);
-                    onClose();
-                }
-            }, children: jsx(DialogPortal, { children: jsxs(DialogContent, { className: "max-w-sm rounded-2xl px-6 py-8 pointer-events-auto", children: [jsxs(DialogHeader, { className: "relative flex-row justify-between", children: [jsx(DialogTitle, { className: "text-blue-600 text-xl font-semibold", children: "Invite New User" }), jsx(DialogDescription$1, { children: jsx("span", { onClick: onSeeAllInvitedUsersClick, className: "text-blue-500 text-sm cursor-pointer hover:underline", children: "See All" }) })] }), jsxs("div", { className: "mt-4 space-y-1", children: [jsx("label", { className: "text-gray-700 text-sm font-medium", children: "Email" }), jsx("p", { className: "text-gray-500 text-sm", children: "A confirmation link would be sent" }), jsx(Input, { value: email, onChange: (event) => setEmail(event.target.value), placeholder: "Enter email address", className: "mt-2" })] }), jsx(Button, { onClick: handleInviteUser, className: "bg-[#2563EB] hover:bg-blue-600 text-white mt-6", children: "Submit" })] }) }) }) }));
+    return (jsxs(Fragment, { children: [jsx("div", { id: "invite-user-dialog-container" }), jsx(Dialog, { open: isOpen, onOpenChange: (open) => {
+                    if (!open) {
+                        onClose();
+                    }
+                }, children: jsx(DialogPortal, { container: containerRef.current || undefined, children: jsxs(DialogContent, { onInteractOutside: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }, onEscapeKeyDown: (e) => {
+                            // Stop propagation to prevent both dialogs from closing
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onClose();
+                        }, className: "max-w-sm rounded-2xl px-6 py-8 pointer-events-auto", children: [jsxs(DialogHeader, { className: "relative flex-row justify-between", children: [jsx(DialogTitle, { className: "text-blue-600 text-xl font-semibold", children: "Invite New User" }), jsx(DialogDescription, { children: jsx("span", { onClick: onSeeAllInvitedUsersClick, className: "text-blue-500 text-sm cursor-pointer hover:underline", children: "See All" }) })] }), jsxs("div", { className: "mt-4 space-y-1", children: [jsx("label", { className: "text-gray-700 text-sm font-medium", children: "Email" }), jsx("p", { className: "text-gray-500 text-sm", children: "A confirmation link would be sent" }), jsx(Input, { value: email, onChange: (event) => setEmail(event.target.value), placeholder: "Enter email address", className: "mt-2" })] }), jsx(Button, { onClick: handleInviteUser, className: "bg-[#2563EB] hover:bg-blue-600 text-white mt-6", children: "Submit" })] }) }) })] }));
 }
 
 function InvitedUsersDialog({ tenant, onClose, }) {
@@ -14192,7 +14259,7 @@ function InvitedUsersDialog({ tenant, onClose, }) {
                 setOpen(_open);
                 onClose();
             }
-        }, children: jsx(DialogPortal, { children: jsxs(DialogContent, { className: "max-w-sm rounded-2xl px-6 py-8 pointer-events-auto", children: [jsx(DialogHeader, { className: "relative flex-row justify-between", children: jsx(DialogTitle, { className: "text-blue-600 text-xl font-semibold", children: "Invited Users" }) }), jsxs("div", { className: "mt-4 space-y-1", children: [jsx("p", { className: "text-gray-500 text-sm", children: "Showing list of invited users pending confirmation" }), jsx("form", { children: jsx(Input, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search Invited Users", className: "mt-2" }) })] }), jsxs("div", { children: [jsx("h2", { className: "text-lg font-semibold", children: "Email" }), invitedUsers === null || invitedUsers === void 0 ? void 0 : invitedUsers.results.map((user) => (jsx("div", { className: "border-b-gray-50 pb-2 mb-4", children: user.email }))), (invitedUsers === null || invitedUsers === void 0 ? void 0 : invitedUsers.results.length) === 0 && (jsx("p", { className: "text-gray", children: "No records found" }))] })] }) }) }));
+        }, children: jsx(DialogPortal, { forceMount: true, children: jsxs(DialogContent, { className: "max-w-sm rounded-2xl px-6 py-8 pointer-events-auto", children: [jsx(DialogHeader, { className: "relative flex-row justify-between", children: jsx(DialogTitle, { className: "text-blue-600 text-xl font-semibold", children: "Invited Users" }) }), jsxs("div", { className: "mt-4 space-y-1", children: [jsx("p", { className: "text-gray-500 text-sm", children: "Showing list of invited users pending confirmation" }), jsx("form", { children: jsx(Input, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search Invited Users", className: "mt-2" }) })] }), jsxs("div", { children: [jsx("h2", { className: "text-lg font-semibold", children: "Email" }), invitedUsers === null || invitedUsers === void 0 ? void 0 : invitedUsers.results.map((user) => (jsx("div", { className: "border-b-gray-50 pb-2 mb-4", children: user.email }))), (invitedUsers === null || invitedUsers === void 0 ? void 0 : invitedUsers.results.length) === 0 && (jsx("p", { className: "text-gray", children: "No records found" }))] })] }) }) }));
 }
 
 //import { useDispatch } from "react-redux";