@greatapps/common 1.1.769 → 1.1.771

package/src/components/modals/promo/AiCreditsOfferModal/AiCreditsOfferModal.tsx

@@ -26,6 +26,7 @@ import { readOfferStageCookie, writeOfferStageCookie } from '../../../../modules
 import { useAiCreditsOfferModal } from '../../../../store/useAiCreditsOfferModal';
 import { useModalManager } from '../../../../store/useModalManager';
 import { LoseOfferDialog } from './components/LoseOfferDialog';
+import { DialogLayer } from '../../../ui/overlay/layers';
 import { OfferIllustration } from './components/OfferIllustration';
 import { OfferPaymentField } from './components/OfferPaymentField';
 
@@ -388,14 +389,17 @@ export default function AiCreditsOfferModal() {
         </DialogContent>
       </Dialog>
 
-      <LoseOfferDialog
-        open={confirmingExit}
-        discountLabel={discountLabel}
-        creditsLabel={creditsLabel}
-        fullPriceLabel={fullPrice != null ? formatCurrencyNumber(fullPrice) : ''}
-        onKeep={() => setConfirmingExit(false)}
-        onLose={dismiss}
-      />
+      {/* Irmao do `Dialog` acima, entao nasceria na mesma faixa de z. */}
+      <DialogLayer>
+        <LoseOfferDialog
+          open={confirmingExit}
+          discountLabel={discountLabel}
+          creditsLabel={creditsLabel}
+          fullPriceLabel={fullPrice != null ? formatCurrencyNumber(fullPrice) : ''}
+          onKeep={() => setConfirmingExit(false)}
+          onLose={dismiss}
+        />
+      </DialogLayer>
     </>
   );
 }

package/src/components/modals/promo/AiCreditsOfferModal/components/LoseOfferDialog.tsx

@@ -52,8 +52,8 @@ export function LoseOfferDialog({
       <DialogContent
         showCloseButton={false}
         onOpenAutoFocus={(event) => event.preventDefault()}
-        overlayClassName="z-[1002] bg-black/40"
-        className="z-[1003] flex flex-col gap-0 p-0 max-[440px]:w-[calc(100%-32px)] md:w-[420px]! lg:w-[420px]! max-w-[420px]! data-[state=open]:animate-[gp-offer-confirm-in_260ms_cubic-bezier(0.16,1,0.3,1)]"
+        overlayClassName="bg-black/40"
+        className="flex flex-col gap-0 p-0 max-[440px]:w-[calc(100%-32px)] md:w-[420px]! lg:w-[420px]! max-w-[420px]! data-[state=open]:animate-[gp-offer-confirm-in_260ms_cubic-bezier(0.16,1,0.3,1)]"
       >
         <DialogHeader className="gap-3 p-5 text-left">
           <div className="flex w-fit items-center justify-center rounded-lg bg-red-50 p-2.5">

package/src/components/modals/promo/AiCreditsOfferModal/components/OfferPaymentField.tsx

@@ -56,8 +56,6 @@ export function OfferPaymentField({ cardId, onCardAdded }: OfferPaymentFieldProp
 
             <div className="flex shrink-0 items-center gap-2">
               <CardBrandIcon brand={card.brand} />
-              {/* `z-[1002]`: o tooltip nasce num portal e precisa passar por cima do
-                  `DialogContent` (z-1001), senão fica escondido atrás do modal. */}
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button
@@ -69,7 +67,7 @@ export function OfferPaymentField({ cardId, onCardAdded }: OfferPaymentFieldProp
                     <IconPencil size={18} />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side="top" sideOffset={6} className="z-[1002]">
+                <TooltipContent side="top" sideOffset={6}>
                   {translate('common.promo.aiCreditsOffer.editPayment')}
                 </TooltipContent>
               </Tooltip>

package/src/components/ui/form/PhoneInput.tsx

@@ -144,7 +144,7 @@ export default function PhoneInput({
               <IconChevronDown size={14} className={cn("text-zinc-500 transition-transform duration-200", open && "rotate-180")} />
             </button>
           </PopoverTrigger>
-          <PopoverContent className="w-72 p-0 z-[1010]" align="start" side="top">
+          <PopoverContent className="w-72 p-0" align="start" side="top">
             <div className="flex items-center gap-2 p-2 border-b border-zinc-100">
               <IconSearch size={14} className="text-zinc-400 shrink-0" />
               <input

package/src/components/ui/form/Select.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
+import { useDialogLayer } from "../overlay/layers";
 
 function Select({
   ...props
@@ -68,12 +69,15 @@ function SelectContent({
   align = "center",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  // Portaliza para o body, entao disputa z com o conteudo do modal que o abriu.
+  const layer = useDialogLayer();
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[1002] max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          layer.popover,
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,

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

@@ -4,23 +4,11 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { IconX } from '@tabler/icons-react';
 import { cn } from "../../../infra/utils/clsx";
+import { DialogDepthContext, useDialogLayer } from "./layers";
 
-// Cada `Dialog` aninhado sobe uma camada de z-index, para que o overlay do modal
-// de cima cubra o conteudo do modal de baixo. Classes literais para o Tailwind gerar.
-const DialogDepthContext = React.createContext(0);
-
-const DIALOG_LAYERS = [
-  { overlay: "z-[1000]", content: "z-[1001]" },
-  { overlay: "z-[1010]", content: "z-[1011]" },
-  { overlay: "z-[1020]", content: "z-[1021]" },
-  { overlay: "z-[1030]", content: "z-[1031]" },
-] as const;
-
-function useDialogLayer() {
-  const depth = React.useContext(DialogDepthContext);
-  const index = Math.min(Math.max(depth - 1, 0), DIALOG_LAYERS.length - 1);
-  return DIALOG_LAYERS[index];
-}
+// Cada `Dialog` aninhado sobe uma faixa de z-index, para que o overlay do modal
+// de cima cubra o conteudo do modal de baixo. A escala (e os dropdowns e
+// tooltips que precisam acompanhar) vive em `./layers`.
 
 function Dialog({
   ...props

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

@@ -5,6 +5,7 @@
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { cn } from "../../../infra/utils/clsx"
+import { useDialogLayer } from "./layers"
 
 function Popover({
   ...props
@@ -24,6 +25,8 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  // Portaliza para o body, entao disputa z com o conteudo do modal que o abriu.
+  const layer = useDialogLayer()
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
@@ -31,7 +34,8 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1002] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          layer.popover,
           className
         )}
         {...props}

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

@@ -5,6 +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";
 
 function Sheet({ onOpenChange, modal = false, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   const handleOpenChange = React.useCallback((open: boolean) => {
@@ -13,7 +14,16 @@ function Sheet({ onOpenChange, modal = false, ...props }: React.ComponentProps<t
     onOpenChange?.(open);
   }, [onOpenChange]);
 
-  return <SheetPrimitive.Root data-slot="sheet" modal={modal} onOpenChange={handleOpenChange} {...props} />;
+  // 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>
+  );
 }
 
 function SheetTrigger({
@@ -38,12 +48,14 @@ function SheetOverlay({
   className,
   ...props
 }: React.ComponentProps<"div">) {
+  const layer = useDialogLayer();
   return (
     <SheetPrimitive.Close tabIndex={-1} asChild>
       <div
         data-slot="sheet-overlay"
         className={cn(
-          "animate-in fade-in-0 fixed inset-0 z-[1000] bg-black/50 cursor-default",
+          "animate-in fade-in-0 fixed inset-0 bg-black/50 cursor-default",
+          layer.overlay,
           className,
         )}
         {...props}
@@ -64,6 +76,7 @@ function SheetContent({
   showCloseButton?: boolean;
   noAnimation?: boolean;
 }) {
+  const layer = useDialogLayer();
   return (
     <SheetPortal>
       <SheetOverlay className={noAnimation ? "!animate-none" : undefined} />
@@ -72,7 +85,8 @@ function SheetContent({
         onInteractOutside={(e) => e.preventDefault()}
         onPointerDownOutside={(e) => e.preventDefault()}
         className={cn(
-          "bg-background fixed z-[1001] flex flex-col gap-4 shadow-lg",
+          "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 &&

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

@@ -5,6 +5,7 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 import { cn } from "../../../infra/utils/clsx"
+import { useDialogLayer } from "./layers"
 
 function TooltipProvider({
   delayDuration = 0,
@@ -41,13 +42,17 @@ function TooltipContent({
   children,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  // Portaliza para o body. Fora de modal segue no `z-50` do resto da pagina;
+  // dentro de um, sobe para a faixa dele em vez de ser remendado no call site.
+  const layer = useDialogLayer()
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance pointer-events-none",
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance pointer-events-none",
+          layer.tooltip,
           className
         )}
         {...props}

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

@@ -0,0 +1,95 @@
+"use client";
+
+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 = [
+  { 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]" },
+] 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 type DialogLayerClasses = (typeof DIALOG_LAYERS)[number] | typeof ROOT_LAYER;
+
+export const DialogDepthContext = React.createContext(0);
+
+const saturationWarned = new Set<number>();
+
+export function useDialogLayer(): DialogLayerClasses {
+  const depth = React.useContext(DialogDepthContext);
+  if (depth <= 0) return ROOT_LAYER;
+
+  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.`,
+    );
+  }
+
+  return DIALOG_LAYERS[Math.min(depth - 1, DIALOG_LAYERS.length - 1)];
+}
+
+/**
+ * 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>;
+}

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

@@ -304,10 +304,9 @@ export function ImageCropModal({
       <DialogContent
         className={
           isTooSmall
-            ? 'w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'
-            : 'w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'
+            ? 'w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0'
+            : 'w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0'
         }
-        overlayClassName="z-[1002]!"
       >
         {isTooSmall ? (
           <>

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

@@ -35,8 +35,8 @@ export function ImageTooSmallModal({
   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]!"
+        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]!">

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

@@ -4,6 +4,7 @@ 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'
 
@@ -114,17 +115,20 @@ export function ImageUpload({
       )}
 
       {originalImage && (
-        <ImageCropModal
-          open={showCropModal}
-          onOpenChange={setShowCropModal}
-          imageSrc={originalImage}
-          aspectRatio={config.aspectRatio}
-          onConfirm={handleCropConfirm}
-          minWidth={config.width}
-          minHeight={config.height}
-          fileName={fileName}
-          onSelectAnother={() => inputRef.current?.click()}
-        />
+        // 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>
       )}
     </div>
   )

package/src/index.ts

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