@greatapps/common 1.1.776 → 1.1.778

package/src/components/modals/ModalManager.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { ComponentType } from 'react';
+import { ComponentType, useContext } from 'react';
 import { useModalManager } from '../../store/useModalManager';
+import { DialogDepthContext } from '../ui/overlay/layers';
 
 interface ModalManagerProps {
   registry: Record<string, ComponentType>;
@@ -9,12 +10,17 @@ interface ModalManagerProps {
 
 export function ModalManager({ registry }: ModalManagerProps) {
   const { modalStack } = useModalManager();
+  const depth = useContext(DialogDepthContext);
 
   if (modalStack.length === 0) return null;
 
+  // Modais da pilha nascem irmaos na arvore React: sem isso, todos cairiam na
+  // mesma profundidade e na mesma faixa de z-index (ver layers.tsx). A
+  // posicao na pilha vira a profundidade, relativa a onde o ModalManager
+  // esta montado.
   return (
     <>
-      {modalStack.map((modal) => {
+      {modalStack.map((modal, index) => {
         const ModalComponent = registry[modal.key];
 
         if (!ModalComponent) {
@@ -22,7 +28,11 @@ export function ModalManager({ registry }: ModalManagerProps) {
           return null;
         }
 
-        return <ModalComponent key={modal.key} />;
+        return (
+          <DialogDepthContext.Provider value={depth + index} key={modal.key}>
+            <ModalComponent />
+          </DialogDepthContext.Provider>
+        );
       })}
     </>
   );

package/src/components/widgets/ImageUpload/ImageTooSmallModal.tsx

@@ -8,6 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../ui/overlay/Dialog'
+import { DialogLayer } from '../../ui/overlay/layers'
 import { Button } from '../../ui/buttons/Button'
 
 interface ImageTooSmallModalProps {
@@ -33,30 +34,30 @@ export function ImageTooSmallModal({
   const dimensionText = `${minWidth}x${minHeight}px`
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className="w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]"
-        overlayClassName="z-[1002]"
-      >
-        <DialogHeader className="p-5">
-          <DialogTitle className="text-center text-[16px]!">
-            {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}
-          </DialogTitle>
-        </DialogHeader>
+    // Abre por cima do modal/uploader que a disparou.
+    <DialogLayer>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0">
+          <DialogHeader className="p-5">
+            <DialogTitle className="text-center text-[16px]!">
+              {translate('common.imageUpload.tooSmallTitleWithDimension', { dimensionText })}
+            </DialogTitle>
+          </DialogHeader>
 
-        <div className="px-5 pb-5">
-          <p className="paragraph-small-regular text-zinc-600 text-center">
-            {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}
-          </p>
-        </div>
+          <div className="px-5 pb-5">
+            <p className="paragraph-small-regular text-zinc-600 text-center">
+              {translate('common.imageUpload.tooSmallBodyFileWithDimension', { fileName, dimensionText })}
+            </p>
+          </div>
 
-        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-          <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>
-          <Button variant="secondary" onClick={onCancel}>
-            {translate('common.actions.cancel')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+          <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+            <Button onClick={onSelectAnother}>{translate('common.imageUpload.sendAnother')}</Button>
+            <Button variant="secondary" onClick={onCancel}>
+              {translate('common.actions.cancel')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DialogLayer>
   )
 }