chore: custom dialog zIndex

DistributedCollective · Jun 20, 2023 · cad0a8b · cad0a8b
1 parent d8bd0d1
commit cad0a8b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/hot-wombats-push.md b/.changeset/hot-wombats-push.md
@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+chore: custom dialog zIndex
diff --git a/packages/ui/src/2_molecules/Dialog/Dialog.tsx b/packages/ui/src/2_molecules/Dialog/Dialog.tsx
@@ -33,6 +33,7 @@ type DialogProps = {
   initialFocusRef?: React.RefObject<HTMLElement>;
   disableFocusTrap?: boolean;
   buttonCloseText?: string;
+  initialZIndex?: number;
 };
 
 export const Dialog: IDialogFunctionComponent<DialogProps> = ({
@@ -47,6 +48,7 @@ export const Dialog: IDialogFunctionComponent<DialogProps> = ({
   initialFocusRef,
   disableFocusTrap,
   buttonCloseText,
+  initialZIndex = 100,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -61,9 +63,9 @@ export const Dialog: IDialogFunctionComponent<DialogProps> = ({
     // make sure that multiple dialogs opened showing up in correct order.
     if (isOpen) {
       Dialog.index++;
-      setZIndex(100 + Dialog.index);
+      setZIndex(initialZIndex + Dialog.index);
     }
-  }, [isOpen]);
+  }, [isOpen, initialZIndex]);
 
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {