@greatapps/common 1.1.788 → 1.1.789

package/src/components/ui/overlay/Sheet.tsx

@@ -5,7 +5,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { IconX } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
 import { hideCrisp, showCrisp } from "../../embeds/CrispEmbed";
-import { DialogDepthContext, useDialogLayer } from "./layers";
+import { OverlayLayerContext, useDialogLayer, useOverlayLayer } from "./layers";
 
 function Sheet({ onOpenChange, modal = false, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   const handleOpenChange = React.useCallback((open: boolean) => {
@@ -14,16 +14,7 @@ function Sheet({ onOpenChange, modal = false, ...props }: React.ComponentProps<t
     onOpenChange?.(open);
   }, [onOpenChange]);
 
-  // Mesma faixa de z do `Dialog`: um `Dialog` aberto de dentro de um `Sheet` era
-  // profundidade 1, entao o overlay dele (1000) nascia sob o conteudo do sheet
-  // (1001). Somando aqui tambem, ele passa para a faixa de cima.
-  const depth = React.useContext(DialogDepthContext);
-
-  return (
-    <DialogDepthContext.Provider value={depth + 1}>
-      <SheetPrimitive.Root data-slot="sheet" modal={modal} onOpenChange={handleOpenChange} {...props} />
-    </DialogDepthContext.Provider>
-  );
+  return <SheetPrimitive.Root data-slot="sheet" modal={modal} onOpenChange={handleOpenChange} {...props} />;
 }
 
 function SheetTrigger({
@@ -71,58 +62,61 @@ function SheetContent({
   showCloseButton = true,
   noAnimation = false,
   ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
   noAnimation?: boolean;
 }) {
-  const layer = useDialogLayer();
+  const { layer, presenceRef } = useOverlayLayer();
   return (
-    <SheetPortal>
-      <SheetOverlay className={noAnimation ? "!animate-none" : undefined} />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        onInteractOutside={(e) => e.preventDefault()}
-        onPointerDownOutside={(e) => e.preventDefault()}
-        className={cn(
-          "bg-background fixed flex flex-col gap-4 shadow-lg",
-          layer.content,
-          !noAnimation &&
-            "data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          !noAnimation &&
+    <OverlayLayerContext.Provider value={layer}>
+      <SheetPortal>
+        <SheetOverlay className={noAnimation ? "!animate-none" : undefined} />
+        <SheetPrimitive.Content
+          ref={presenceRef}
+          data-slot="sheet-content"
+          onInteractOutside={(e) => e.preventDefault()}
+          onPointerDownOutside={(e) => e.preventDefault()}
+          className={cn(
+            "bg-background fixed flex flex-col gap-4 shadow-lg",
+            layer.content,
+            !noAnimation &&
+              "data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+            !noAnimation &&
+              side === "right" &&
+              "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+            !noAnimation &&
+              side === "left" &&
+              "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+            !noAnimation &&
+              side === "top" &&
+              "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+            !noAnimation &&
+              side === "bottom" &&
+              "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
             side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
-          !noAnimation &&
+              "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
             side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-          !noAnimation &&
-            side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          !noAnimation &&
-            side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          side === "right" &&
-            "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" && "inset-x-0 top-0 h-auto border-b",
-          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <SheetPrimitive.Close
-            data-slot="sheet-close"
-            className="absolute top-3 right-3 hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
-          >
-            <IconX className="size-[18px]" />
-            <span className="sr-only">Close</span>
-          </SheetPrimitive.Close>
-        )}
-      </SheetPrimitive.Content>
-    </SheetPortal>
+              "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            side === "top" && "inset-x-0 top-0 h-auto border-b",
+            side === "bottom" && "inset-x-0 bottom-0 h-auto border-t",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <SheetPrimitive.Close
+              data-slot="sheet-close"
+              className="absolute top-3 right-3 hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none"
+            >
+              <IconX className="size-[18px]" />
+              <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+          )}
+        </SheetPrimitive.Content>
+      </SheetPortal>
+    </OverlayLayerContext.Provider>
   );
 }
 

package/src/components/ui/overlay/layers.tsx

@@ -2,94 +2,66 @@
 
 import * as React from "react";
 
-/**
- * Escala unica de z-index para tudo que flutua sobre a pagina.
- *
- * Cada nivel de modal aninhado ganha uma faixa propria de 10 unidades, e dentro
- * da faixa a ordem e sempre a mesma:
- *
- *   base + 0  overlay do modal
- *   base + 1  conteudo do modal
- *   base + 2  dropdown portalizado aberto de dentro dele (Select, Popover)
- *   base + 3  tooltip portalizado aberto de dentro dele
- *
- * O ponto dos dois ultimos: `Select`, `Popover` e `Tooltip` renderizam num
- * portal para o `document.body`, entao no DOM eles sao irmaos do conteudo do
- * modal e a disputa de z e global. Com z fixo (`z-[1002]`) eles funcionavam so
- * no primeiro nivel: dentro de um modal aninhado o conteudo sobe para 1011 e o
- * dropdown fica preso em 1002, abrindo atras do modal. Derivar da mesma faixa
- * resolve em qualquer profundidade.
- *
- * O portal preserva o contexto React (so o alvo no DOM muda), por isso o
- * `useDialogLayer` de dentro do dropdown enxerga a profundidade do modal que o
- * abriu.
- *
- * Classes literais de proposito: o Tailwind so gera o que ve escrito.
- */
-const DIALOG_LAYERS = [
+export const OVERLAY_LAYERS = [
   { overlay: "z-[1000]", content: "z-[1001]", popover: "z-[1002]", tooltip: "z-[1003]" },
   { overlay: "z-[1010]", content: "z-[1011]", popover: "z-[1012]", tooltip: "z-[1013]" },
   { overlay: "z-[1020]", content: "z-[1021]", popover: "z-[1022]", tooltip: "z-[1023]" },
   { overlay: "z-[1030]", content: "z-[1031]", popover: "z-[1032]", tooltip: "z-[1033]" },
   { overlay: "z-[1040]", content: "z-[1041]", popover: "z-[1042]", tooltip: "z-[1043]" },
   { overlay: "z-[1050]", content: "z-[1051]", popover: "z-[1052]", tooltip: "z-[1053]" },
+  { overlay: "z-[1060]", content: "z-[1061]", popover: "z-[1062]", tooltip: "z-[1063]" },
+  { overlay: "z-[1070]", content: "z-[1071]", popover: "z-[1072]", tooltip: "z-[1073]" },
 ] as const;
 
-/**
- * Fora de qualquer modal. `overlay` e `content` nunca sao lidos aqui (so existem
- * dentro de um `Dialog`/`Sheet`, que ja somam 1), mas dropdown e tooltip sim, e
- * mantem exatamente os valores que tinham antes desta escala existir: o tooltip
- * segue no `z-50` do resto da pagina em vez de saltar para a faixa dos modais.
- */
-const ROOT_LAYER = { overlay: "z-[1000]", content: "z-[1001]", popover: "z-[1002]", tooltip: "z-50" } as const;
+export const ROOT_LAYER = { overlay: "z-[1000]", content: "z-[1001]", popover: "z-[1002]", tooltip: "z-50" } as const;
 
-export type DialogLayerClasses = (typeof DIALOG_LAYERS)[number] | typeof ROOT_LAYER;
+export type DialogLayerClasses = (typeof OVERLAY_LAYERS)[number] | typeof ROOT_LAYER;
 
-export const DialogDepthContext = React.createContext(0);
+const openOverlays = new Set<object>();
+const overlayListeners = new Set<() => void>();
+let saturationWarned = false;
 
-const saturationWarned = new Set<number>();
+function subscribeOverlays(onStoreChange: () => void) {
+  overlayListeners.add(onStoreChange);
+  return () => {
+    overlayListeners.delete(onStoreChange);
+  };
+}
 
-export function useDialogLayer(): DialogLayerClasses {
-  const depth = React.useContext(DialogDepthContext);
-  if (depth <= 0) return ROOT_LAYER;
+export const OverlayLayerContext = React.createContext<DialogLayerClasses>(ROOT_LAYER);
+
+export function useOverlayLayer() {
+  const token = React.useRef({});
+  const rank = React.useSyncExternalStore(
+    subscribeOverlays,
+    () => Math.max(Array.from(openOverlays).indexOf(token.current), 0),
+    () => 0,
+  );
 
-  if (depth > DIALOG_LAYERS.length && process.env.NODE_ENV !== "production" && !saturationWarned.has(depth)) {
-    saturationWarned.add(depth);
-    console.warn(
-      `[great-lib-common] ${depth} modais empilhados, mas a escala de z so tem ${DIALOG_LAYERS.length} faixas. ` +
-        `Deste nivel em diante todos dividem a ultima faixa e o overlay de cima cai sob o conteudo de baixo. ` +
-        `Se o empilhamento for legitimo, adicione uma faixa em ui/overlay/layers.tsx.`,
-    );
-  }
+  const presenceRef = React.useCallback(() => {
+    openOverlays.add(token.current);
+    overlayListeners.forEach((notify) => notify());
+    if (process.env.NODE_ENV !== "production" && openOverlays.size > OVERLAY_LAYERS.length && !saturationWarned) {
+      saturationWarned = true;
+      console.warn(
+        `[great-lib-common] ${openOverlays.size} overlays visiveis, mas a escala de z so tem ${OVERLAY_LAYERS.length} faixas. ` +
+          `Deste nivel em diante todos dividem a ultima faixa e o overlay de cima cai sob o conteudo de baixo. ` +
+          `Se o empilhamento for legitimo, adicione uma faixa em ui/overlay/layers.tsx.`,
+      );
+    }
+    return () => {
+      openOverlays.delete(token.current);
+      overlayListeners.forEach((notify) => notify());
+    };
+  }, []);
 
-  return DIALOG_LAYERS[Math.min(depth - 1, DIALOG_LAYERS.length - 1)];
+  return { layer: OVERLAY_LAYERS[Math.min(rank, OVERLAY_LAYERS.length - 1)], presenceRef };
+}
+
+export function useDialogLayer(): DialogLayerClasses {
+  return React.useContext(OverlayLayerContext);
 }
 
-/**
- * Sobe uma faixa para a subarvore, sem precisar de um modal no meio.
- *
- * A profundidade sai da arvore React, nao da ordem de abertura, entao dois
- * modais declarados como irmaos nascem os dois na mesma faixa e o de cima abre
- * atras do de baixo:
- *
- *   <>
- *     <Dialog>...</Dialog>
- *     <ConfirmDialog />      // mesma faixa do de cima
- *   </>
- *
- * Envolvendo o segundo, ele passa a valer um nivel a mais que o vizinho, e o
- * ajuste e relativo: continua correto se o conjunto inteiro for parar dentro de
- * outro modal.
- *
- *   <>
- *     <Dialog>...</Dialog>
- *     <DialogLayer><ConfirmDialog /></DialogLayer>
- *   </>
- *
- * E a alternativa ao `className="z-[1003]"` na mao, que trava o modal num numero
- * absoluto e quebra assim que ele e reaproveitado noutra profundidade.
- */
 export function DialogLayer({ children }: { children: React.ReactNode }) {
-  const depth = React.useContext(DialogDepthContext);
-  return <DialogDepthContext.Provider value={depth + 1}>{children}</DialogDepthContext.Provider>;
+  return children;
 }

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

@@ -8,7 +8,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../ui/overlay/Dialog'
-import { DialogLayer } from '../../ui/overlay/layers'
 import { Button } from '../../ui/buttons/Button'
 
 interface ImageTooSmallModalProps {
@@ -34,29 +33,27 @@ export function ImageTooSmallModal({
   const dimensionText = `${minWidth}x${minHeight}px`
 
   return (
-    <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>
+    <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>
-    </DialogLayer>
+        <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>
   )
 }

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

@@ -4,7 +4,6 @@ import { useRef } from 'react'
 import { useImageUpload } from '../../../modules/images/hooks/use-image-upload.hook'
 import { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../modules/images/constants/image.constants'
 import { ImageCropModal } from './ImageCropModal'
-import { DialogLayer } from '../../ui/overlay/layers'
 import { Button } from '../../ui/buttons/Button'
 import type { ImageConfig } from '../../../modules/images/types/image.type'
 
@@ -115,20 +114,17 @@ export function ImageUpload({
       )}
 
       {originalImage && (
-        // Abre por cima do que hospeda o widget, que normalmente e um modal.
-        <DialogLayer>
-          <ImageCropModal
-            open={showCropModal}
-            onOpenChange={setShowCropModal}
-            imageSrc={originalImage}
-            aspectRatio={config.aspectRatio}
-            onConfirm={handleCropConfirm}
-            minWidth={config.width}
-            minHeight={config.height}
-            fileName={fileName}
-            onSelectAnother={() => inputRef.current?.click()}
-          />
-        </DialogLayer>
+        <ImageCropModal
+          open={showCropModal}
+          onOpenChange={setShowCropModal}
+          imageSrc={originalImage}
+          aspectRatio={config.aspectRatio}
+          onConfirm={handleCropConfirm}
+          minWidth={config.width}
+          minHeight={config.height}
+          fileName={fileName}
+          onSelectAnother={() => inputRef.current?.click()}
+        />
       )}
     </div>
   )

package/src/index.ts

@@ -472,7 +472,7 @@ export {
   DialogTitle,
   DialogTrigger,
 } from "./components/ui/overlay/Dialog";
-export { DialogLayer, useDialogLayer } from "./components/ui/overlay/layers";
+export { DialogLayer, OverlayLayerContext, useDialogLayer, useOverlayLayer } from "./components/ui/overlay/layers";
 export {
   Popover,
   PopoverTrigger,