fix: toc fab sheet close transition

Signed-off-by: Innei <[email protected]>

src/components/modules/toc/TocFAB.tsx

@@ -28,15 +28,15 @@ export const TocFAB = () => {
     })
   }, [])
   const presentToc = useCallback(() => {
-    const dispose = present({
+    present({
       title: '文章目录',
       clickOutsideToDismiss: true,
-      content: () => (
+      content: ({ dismiss }) => (
         <TocTree
           $headings={$headings!}
           className="max-h-full space-y-3 overflow-y-auto [&>li]:py-1"
           onItemClick={() => {
-            dispose()
+            dismiss()
           }}
           scrollInNextTick
         />

src/components/ui/modal/stacked/modal.tsx

@@ -22,6 +22,7 @@ import { nextFrame, stopPropagation } from '~/lib/dom'
 import { clsxm } from '~/lib/helper'
 import { jotaiStore } from '~/lib/store'
 
+import type { SheetRef } from '../../sheet'
 import { PresentSheet, sheetStackAtom } from '../../sheet'
 import { MODAL_STACK_Z_INDEX, modalMontionConfig } from './constants'
 import type {
@@ -145,7 +146,10 @@ export const ModalInternal: Component<{
   const modalContentRef = useRef<HTMLDivElement>(null)
   const ModalProps: ModalContentPropsInternal = useMemo(
     () => ({
-      dismiss: close,
+      dismiss: () => {
+        sheetRef.current?.dismiss()
+        close()
+      },
     }),
     [close],
   )
@@ -165,12 +169,15 @@ export const ModalInternal: Component<{
 
   const edgeElementRef = useRef<HTMLDivElement>(null)
 
+  const sheetRef = useRef<SheetRef>(null)
+
   if (isMobile) {
     const drawerLength = jotaiStore.get(sheetStackAtom).length
 
     return (
       <Wrapper>
         <PresentSheet
+          ref={sheetRef}
           title={title}
           defaultOpen
           zIndex={1000 + drawerLength}

src/components/ui/sheet/Sheet.tsx

@@ -1,6 +1,12 @@
 import { atom, useStore } from 'jotai'
 import type { FC, PropsWithChildren, ReactNode } from 'react'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
 import { Drawer } from 'vaul'
 
 import { SheetContext } from './context'
@@ -19,9 +25,14 @@ export interface PresentSheetProps {
 
 export const sheetStackAtom = atom([] as HTMLDivElement[])
 
-export const PresentSheet: FC<PropsWithChildren<PresentSheetProps>> = (
-  props,
-) => {
+export type SheetRef = {
+  dismiss: () => void
+}
+
+export const PresentSheet = forwardRef<
+  SheetRef,
+  PropsWithChildren<PresentSheetProps>
+>((props, ref) => {
   const {
     content,
     children,
@@ -34,6 +45,12 @@ export const PresentSheet: FC<PropsWithChildren<PresentSheetProps>> = (
 
   const [isOpen, setIsOpen] = useState(props.open ?? defaultOpen)
 
+  useImperativeHandle(ref, () => ({
+    dismiss: () => {
+      setIsOpen(false)
+    },
+  }))
+
   const nextRootProps = useMemo(() => {
     const nextProps = {
       onOpenChange: setIsOpen,
@@ -124,4 +141,4 @@ export const PresentSheet: FC<PropsWithChildren<PresentSheetProps>> = (
       </Drawer.Portal>
     </Root>
   )
-}
+})