@iblai/web-containers 0.0.2 → 0.0.6

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./profile";
 export * from "./profile/invite-user";
 export * from "./profile/invited-users";
+export * from "./top-banner";
+export * from "./top-banner/types";

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/components/top-banner/index.d.ts

@@ -0,0 +1,3 @@
+import { TopBannerProps } from "./types";
+export declare function TopBanner({ parentContainerSelector, bannerText, loading, tooltipText, buttonLabel, buttonHandler, onLoad, onClose, }: TopBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export default TopBanner;

package/dist/components/top-banner/types.d.ts

@@ -0,0 +1,10 @@
+export interface TopBannerProps {
+    parentContainerSelector: string;
+    bannerText?: string;
+    loading?: boolean;
+    tooltipText?: string;
+    buttonHandler?: () => void;
+    buttonLabel?: string;
+    onLoad?: (bannerRef: HTMLDivElement) => void;
+    onClose?: () => void;
+}

package/dist/components/top-banner/use-top-banner.d.ts

@@ -0,0 +1,11 @@
+import { TopBannerProps } from "./types";
+export declare const useTopBanner: ({ parentContainerSelector, loading, onLoad, onClose, }: TopBannerProps) => {
+    visible: boolean;
+    setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    showTooltip: boolean;
+    setShowTooltip: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    bannerRef: import("react").RefObject<HTMLDivElement | null>;
+    parentElRef: import("react").RefObject<HTMLElement | null>;
+    isLoading: boolean | undefined;
+    setLoading: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
+};

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);
@@ -6594,8 +6594,9 @@ var hideOthers = function (originalTarget, parentNode, markerName) {
     if (!activeParentNode) {
         return function () { return null; };
     }
-    // we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10
-    targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]')));
+    // we should not hide aria-live elements - https://github.com/theKashey/aria-hidden/issues/10
+    // and script elements, as they have no impact on accessibility.
+    targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live], script')));
     return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden');
 };
 
@@ -6874,12 +6875,12 @@ var RemoveScroll = React.forwardRef(function (props, parentRef) {
         onWheelCapture: nothing,
         onTouchMoveCapture: nothing,
     }), callbacks = _a[0], setCallbacks = _a[1];
-    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
+    var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noRelative = props.noRelative, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, gapMode = props.gapMode, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noRelative", "noIsolation", "inert", "allowPinchZoom", "as", "gapMode"]);
     var SideCar = sideCar;
     var containerRef = useMergeRefs([ref, parentRef]);
     var containerProps = __assign(__assign({}, rest), callbacks);
     return (React.createElement(React.Fragment, null,
-        enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode: gapMode })),
+        enabled && (React.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noRelative: noRelative, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode: gapMode })),
         forwardProps ? (React.cloneElement(React.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (React.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children))));
 });
 RemoveScroll.defaultProps = {
@@ -7169,12 +7170,9 @@ var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll)
                 availableScrollTop += position;
             }
         }
-        if (target instanceof ShadowRoot) {
-            target = target.host;
-        }
-        else {
-            target = target.parentNode;
-        }
+        // we will "bubble" from ShadowDom in case we are, or just to the parent in normal case
+        // this is the same logic used in focus-lock
+        target = (target.parentNode.host || target.parentNode);
     } while (
     // portaled content
     (!targetInLock && target !== document.body) ||
@@ -7330,7 +7328,7 @@ function RemoveScrollSideCar(props) {
     var removeScrollBar = props.removeScrollBar, inert = props.inert;
     return (React.createElement(React.Fragment, null,
         inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
-        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: props.gapMode }) : null));
+        removeScrollBar ? React.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null));
 }
 function getOutermostShadowParent(node) {
     var shadowParent = null;
@@ -10112,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",
@@ -10127,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;
@@ -11051,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;
   }
@@ -11073,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;
     }
   }
@@ -11164,6 +11163,7 @@ const defaultFieldMeta = {
   isDirty: false,
   isPristine: true,
   isValid: true,
+  isDefaultValue: true,
   errors: [],
   errorMap: {},
   errorSourceMap: {}
@@ -11325,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(
@@ -11814,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
         };
       });
     };
@@ -11862,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];
@@ -11871,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;
@@ -11886,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;
@@ -11924,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)
@@ -11962,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 = {
@@ -11978,6 +11988,7 @@ class FormApi {
           isTouched,
           isBlurred,
           isPristine,
+          isDefaultValue,
           isDirty
         };
         const transformArray = ((_c = this.options.transform) == null ? void 0 : _c.deps) ?? [];
@@ -12094,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) {
@@ -14153,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, }) {
@@ -14194,8 +14259,104 @@ 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";
+const useTopBanner = ({ parentContainerSelector, loading, onLoad = () => { }, onClose = () => { }, }) => {
+    //const dispatch = useDispatch();
+    const [visible, setVisible] = useState(true);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [isLoading, setLoading] = useState(loading);
+    const bannerRef = useRef(null);
+    const prevParentHeight = useRef(null);
+    const parentElRef = useRef(null);
+    useEffect(() => {
+        setLoading(loading);
+    }, [loading]);
+    useEffect(() => {
+        if (visible && (bannerRef === null || bannerRef === void 0 ? void 0 : bannerRef.current)) {
+            onLoad(bannerRef.current);
+        }
+        return () => {
+            onClose();
+        };
+    }, [visible, bannerRef]);
+    useEffect(() => {
+        if (!visible)
+            return;
+        const parentEl = document.querySelector(parentContainerSelector);
+        if (!parentEl)
+            return;
+        parentElRef.current = parentEl;
+        function updateParentHeight() {
+            if (!bannerRef.current || !parentEl)
+                return;
+            const bannerHeight = bannerRef.current.offsetHeight;
+            parentEl.style.height = `calc(100vh - ${bannerHeight}px)`;
+        }
+        // Save previous height to restore on unmount
+        prevParentHeight.current = parentEl.style.height;
+        updateParentHeight();
+        // Listen for resize
+        const resizeObserver = new window.ResizeObserver(updateParentHeight);
+        if (bannerRef.current) {
+            resizeObserver.observe(bannerRef.current);
+        }
+        window.addEventListener("resize", updateParentHeight);
+        return () => {
+            if (resizeObserver && bannerRef.current) {
+                resizeObserver.unobserve(bannerRef.current);
+            }
+            window.removeEventListener("resize", updateParentHeight);
+            // Restore previous height
+            if (parentElRef.current && prevParentHeight.current !== null) {
+                parentElRef.current.style.height = prevParentHeight.current;
+            }
+        };
+    }, [parentContainerSelector, visible]);
+    return {
+        visible,
+        setVisible,
+        showTooltip,
+        setShowTooltip,
+        bannerRef,
+        parentElRef,
+        isLoading,
+        setLoading,
+    };
+};
+
+function TopBanner({ parentContainerSelector, bannerText = "", loading = false, tooltipText = "", buttonLabel = "", buttonHandler = () => { }, onLoad = () => { }, onClose = () => { }, }) {
+    const { visible, setVisible, showTooltip, setShowTooltip, bannerRef, isLoading, } = useTopBanner({
+        parentContainerSelector,
+        loading,
+        onLoad,
+        onClose,
+    });
+    if (!visible)
+        return null;
+    return (jsxs("div", { ref: bannerRef, id: "top-banner-component", className: "relative z-50 flex min-h-[48px] w-full items-center justify-center bg-gradient-to-r from-blue-700 to-blue-400 px-2 py-2 text-sm text-white", children: [jsxs("div", { className: "xs:max-w-[500px] mx-auto flex w-full items-center justify-center gap-2 pr-2 text-center md:pr-12", children: [jsxs("div", { className: "relative flex flex-shrink-0 items-center", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: [jsxs("svg", { className: "h-5 w-5 cursor-pointer text-white opacity-80", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), jsx("path", { d: "M12 16v-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "8.5", r: "1", fill: "currentColor" })] }), showTooltip && (jsx("div", { className: "absolute top-full left-1/2 z-50 mt-2 -translate-x-1/2 rounded bg-gray-900 px-3 py-1 text-xs whitespace-nowrap text-white shadow-lg", children: tooltipText }))] }), jsx("span", { className: "ml-2 max-w-[250px] font-medium break-words text-white sm:max-w-none", children: bannerText }), buttonLabel && (jsxs(Fragment, { children: [jsx("button", { className: "ml-4 block flex-shrink-0 rounded-full border border-white/70 bg-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-white transition hover:bg-white/10 sm:hidden", "aria-label": "Upgrade", onClick: isLoading ? () => { } : () => buttonHandler(), disabled: isLoading, style: {
+                                    position: "relative",
+                                    minWidth: "40px",
+                                    minHeight: "32px",
+                                }, children: loading ? (jsx("span", { className: "mx-auto flex h-5 w-5 items-center justify-center", children: jsxs("svg", { className: "animate-spin", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "white", strokeWidth: "4", opacity: "0.2" }), jsx("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "white", strokeWidth: "4", strokeLinecap: "round" })] }) })) : (jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14M12 5l7 7-7 7" }) })) }), jsx("button", { className: "ml-4 hidden flex-shrink-0 rounded-full border border-white/70 bg-transparent px-4 py-1 text-sm font-medium whitespace-nowrap text-white transition hover:bg-white/10 sm:block", onClick: isLoading ? () => { } : () => buttonHandler(), disabled: isLoading, style: {
+                                    position: "relative",
+                                    minWidth: "80px",
+                                    minHeight: "32px",
+                                }, children: loading ? (jsx("span", { className: "mx-auto flex h-5 w-5 items-center justify-center", children: jsxs("svg", { className: "animate-spin", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "white", strokeWidth: "4", opacity: "0.2" }), jsx("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "white", strokeWidth: "4", strokeLinecap: "round" })] }) })) : ("Upgrade") })] }))] }), jsx("button", { className: "absolute top-1/2 right-0 rounded-full p-1 transition hover:bg-white/20 md:right-4", "aria-label": "Close banner", onClick: () => {
+                    setVisible(false);
+                    onClose();
+                }, style: { transform: "translateY(-50%)" }, children: jsx("svg", { className: "h-5 w-5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }), jsx("style", { children: `
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        .animate-spin {
+          animation: spin 1s linear infinite;
+        }
+      ` })] }));
 }
 
-export { InviteUserDialog, InvitedUsersDialog, Profile, useIframeMessageHandler };
+export { InviteUserDialog, InvitedUsersDialog, Profile, TopBanner, useIframeMessageHandler };
 //# sourceMappingURL=index.esm.js.map