@hanzogui/dialog 3.0.1 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzogui/dialog",
-  "version": "3.0.1",
+  "version": "7.0.0",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -30,33 +30,33 @@
     "access": "public"
   },
   "scripts": {
-    "build": "hanzo-gui-build",
-    "watch": "hanzo-gui-build --watch",
-    "clean": "hanzo-gui-build clean",
-    "clean:build": "hanzo-gui-build clean:build"
+    "build": "hanzogui-build",
+    "watch": "hanzogui-build --watch",
+    "clean": "hanzogui-build clean",
+    "clean:build": "hanzogui-build clean:build"
   },
   "dependencies": {
-    "@hanzogui/adapt": "3.0.0",
-    "@hanzogui/animate": "3.0.0",
-    "@hanzogui/animate-presence": "3.0.0",
-    "@hanzogui/compose-refs": "3.0.0",
-    "@hanzogui/constants": "3.0.0",
-    "@hanzogui/core": "3.0.0",
-    "@hanzogui/create-context": "3.0.0",
-    "@hanzogui/dismissable": "3.0.0",
-    "@hanzogui/focus-scope": "3.0.0",
-    "@hanzogui/helpers": "3.0.0",
-    "@hanzogui/polyfill-dev": "3.0.0",
-    "@hanzogui/portal": "3.0.0",
-    "@hanzogui/remove-scroll": "3.0.0",
-    "@hanzogui/sheet": "3.0.0",
-    "@hanzogui/stacks": "3.0.0",
-    "@hanzogui/text": "3.0.0",
-    "@hanzogui/use-controllable-state": "3.0.0",
-    "@hanzogui/z-index-stack": "3.0.0"
+    "@hanzogui/adapt": "^7.0.0",
+    "@hanzogui/animate": "^7.0.0",
+    "@hanzogui/animate-presence": "^7.0.0",
+    "@hanzogui/compose-refs": "^7.0.0",
+    "@hanzogui/constants": "^7.0.0",
+    "@hanzogui/core": "^7.0.0",
+    "@hanzogui/create-context": "^7.0.0",
+    "@hanzogui/dismissable": "^7.0.0",
+    "@hanzogui/focus-scope": "^7.0.0",
+    "@hanzogui/helpers": "^7.0.0",
+    "@hanzogui/polyfill-dev": "^7.0.0",
+    "@hanzogui/portal": "^7.0.0",
+    "@hanzogui/remove-scroll": "^7.0.0",
+    "@hanzogui/sheet": "^7.0.0",
+    "@hanzogui/stacks": "^7.0.0",
+    "@hanzogui/text": "^7.0.0",
+    "@hanzogui/use-controllable-state": "^7.0.0",
+    "@hanzogui/z-index-stack": "^7.0.0"
   },
   "devDependencies": {
-    "@hanzogui/build": "3.0.0",
+    "@hanzogui/build": "^7.0.0",
     "react": ">=19",
     "react-native": "0.83.2"
   },
@@ -65,4 +65,4 @@
     "react-native": "*"
   },
   "module:jsx": "dist/jsx"
-}
+}

package/src/Dialog.tsx

@@ -9,7 +9,7 @@ import {
 import { Animate } from '@hanzogui/animate'
 import { composeRefs, useComposedRefs } from '@hanzogui/compose-refs'
 import { isWeb, useIsomorphicLayoutEffect } from '@hanzogui/constants'
-import type { GetProps, GuiElement, ViewProps } from '@hanzogui/core'
+import type { GetProps, HanzoguiElement, ViewProps } from '@hanzogui/core'
 import {
   createStyledContext,
   getExpandedShorthand,
@@ -75,8 +75,8 @@ type DialogContextValue = {
   forceMount?: boolean
   keepChildrenMounted?: boolean
   disableRemoveScroll?: boolean
-  triggerRef: React.RefObject<GuiElement | null>
-  contentRef: React.RefObject<GuiElement | null>
+  triggerRef: React.RefObject<HanzoguiElement | null>
+  contentRef: React.RefObject<HanzoguiElement | null>
   contentId: string
   titleId: string
   descriptionId: string
@@ -98,6 +98,18 @@ export const DialogContext = createStyledContext<DialogContextValue>(
 export const { useStyledContext: useDialogContext, Provider: DialogProvider } =
   DialogContext
 
+/**
+ * Tracks whether the Sheet adapted from a Dialog has finished its slide-out
+ * animation. DialogSheetController owns the state; DialogContent reads it so
+ * it can hold adapted children mounted until the sheet is fully off-screen,
+ * instead of tearing them down the moment Dialog.open flips false.
+ *
+ * Default true so the value is "safe to unmount" if no provider is mounted
+ * (matches the historical behavior where adapted children unmount immediately
+ * on close in native).
+ */
+const DialogAdaptHiddenContext = React.createContext(true)
+
 /* -------------------------------------------------------------------------------------------------
  * DialogTrigger
  * -----------------------------------------------------------------------------------------------*/
@@ -176,7 +188,7 @@ export const DialogPortalFrame = styled(YStack, {
   } as const,
 
   defaultVariants: {
-    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
   },
 })
 
@@ -218,10 +230,10 @@ const DialogPortalItem = ({
   )
 }
 
-const DialogPortal = React.forwardRef<GuiElement, DialogPortalProps>(
+const DialogPortal = React.forwardRef<HanzoguiElement, DialogPortalProps>(
   (props, forwardRef) => {
     const { scope, forceMount, children, ...frameProps } = props
-    const dialogRef = React.useRef<GuiElement>(null)
+    const dialogRef = React.useRef<HanzoguiElement>(null)
     const ref = composeRefs(dialogRef, forwardRef)
 
     const context = useDialogContext(scope)
@@ -371,7 +383,7 @@ export const DialogOverlayFrame = styled(YStack, {
   } as const,
 
   defaultVariants: {
-    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
   },
 })
 
@@ -450,7 +462,7 @@ const DialogContentFrame = styled(ThemeableStack, {
 
   defaultVariants: {
     size: '$true',
-    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+    unstyled: process.env.HANZOGUI_HEADLESS === '1',
   },
 })
 
@@ -496,9 +508,9 @@ type DialogContentTypeProps = DialogContentImplProps & {
   context: DialogContextValue
 }
 
-const DialogContentModal = React.forwardRef<GuiElement, DialogContentTypeProps>(
+const DialogContentModal = React.forwardRef<HanzoguiElement, DialogContentTypeProps>(
   ({ children, context, ...props }, forwardedRef) => {
-    const contentRef = React.useRef<GuiElement>(null)
+    const contentRef = React.useRef<HanzoguiElement>(null)
     const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef)
 
     return (
@@ -543,7 +555,7 @@ const DialogContentModal = React.forwardRef<GuiElement, DialogContentTypeProps>(
 
 /* -----------------------------------------------------------------------------------------------*/
 
-const DialogContentNonModal = React.forwardRef<GuiElement, DialogContentTypeProps>(
+const DialogContentNonModal = React.forwardRef<HanzoguiElement, DialogContentTypeProps>(
   (props, forwardedRef) => {
     const hasInteractedOutsideRef = React.useRef(false)
 
@@ -615,7 +627,7 @@ type DialogContentImplExtraProps = Omit<DismissableProps, 'onDismiss'> & {
 
 type DialogContentImplProps = DialogContentFrameProps & DialogContentImplExtraProps
 
-const DialogContentImpl = React.forwardRef<GuiElement, DialogContentImplProps>(
+const DialogContentImpl = React.forwardRef<HanzoguiElement, DialogContentImplProps>(
   (props, forwardedRef) => {
     const {
       trapFocus,
@@ -630,14 +642,21 @@ const DialogContentImpl = React.forwardRef<GuiElement, DialogContentImplProps>(
       ...contentProps
     } = props
 
-    const contentRef = React.useRef<GuiElement>(null)
+    const contentRef = React.useRef<HanzoguiElement>(null)
     const composedRefs = useComposedRefs(forwardedRef, contentRef)
     const isAdapted = useAdaptIsActive(context.adaptScope)
 
     // TODO this will re-parent, ideally we would not change tree structure
 
+    // when adapted, the dialog's content is portaled into the Sheet via
+    // Adapt.Contents. hold children mounted until the sheet's slide-out
+    // animation is fully complete (DialogAdaptHiddenContext is flipped by
+    // DialogSheetController via SheetController.onAnimationComplete), then
+    // unmount. opt out with `keepChildrenMounted` if you need the old
+    // permanent-mount behavior.
+    const isAdaptFullyHidden = React.useContext(DialogAdaptHiddenContext)
     if (isAdapted) {
-      if (!isWeb && !context.open) {
+      if (!context.open && !context.keepChildrenMounted && isAdaptFullyHidden) {
         return null
       }
 
@@ -828,7 +847,7 @@ const TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {
 const DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning'
 
 type DescriptionWarningProps = {
-  contentRef: React.RefObject<GuiElement>
+  contentRef: React.RefObject<HanzoguiElement>
   descriptionId?: string
 }
 
@@ -889,8 +908,8 @@ const Dialog = withStaticProperties(
       const titleId = `${dialogId}-title`
       const descriptionId = `${dialogId}-description`
 
-      const triggerRef = React.useRef<GuiElement>(null)
-      const contentRef = React.useRef<GuiElement>(null)
+      const triggerRef = React.useRef<HanzoguiElement>(null)
+      const contentRef = React.useRef<HanzoguiElement>(null)
 
       const [open, setOpen] = useControllableState({
         prop: openProp,
@@ -969,6 +988,27 @@ const DialogSheetController = (
   const context = useDialogContext(props.scope)
   const isAdapted = useAdaptIsActive(context.adaptScope)
 
+  // tracks whether the adapted Sheet has finished its slide-out animation.
+  // starts true (= safe to unmount) when the dialog is closed; flips to
+  // false the moment the dialog opens; flips back to true when the sheet
+  // signals onAnimationComplete with open=false (i.e. slide-out finished).
+  const [isAdaptFullyHidden, setIsAdaptFullyHidden] = React.useState(!context.open)
+  // mirror context.open into the hidden flag during render — an opening
+  // dialog must immediately mark its children as not-hidden so they render
+  // for the enter animation.
+  if (context.open && isAdaptFullyHidden) {
+    setIsAdaptFullyHidden(false)
+  }
+
+  const handleSheetAnimationComplete = React.useCallback(
+    ({ open }: { open: boolean }) => {
+      if (!open) {
+        setIsAdaptFullyHidden(true)
+      }
+    },
+    []
+  )
+
   return (
     <SheetController
       onOpenChange={(val) => {
@@ -976,10 +1016,13 @@ const DialogSheetController = (
           props.onOpenChange?.(val)
         }
       }}
+      onAnimationComplete={handleSheetAnimationComplete}
       open={context.open}
       hidden={!isAdapted}
     >
-      {props.children}
+      <DialogAdaptHiddenContext.Provider value={isAdaptFullyHidden}>
+        {props.children}
+      </DialogAdaptHiddenContext.Provider>
     </SheetController>
   )
 }