feat: update modal

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

demo/app/layout.tsx

@@ -2,15 +2,14 @@ import "@/styles/globals.css"
 
 import { Metadata } from "next"
 import { clsxm } from "~/lib/helper"
-import { MobileDetector } from "rc-modal-sheet/src/helpers/mobile-detector"
-import { ModalStackContainer } from "rc-modal-sheet/src/helpers/motion"
+import { MobileDetector } from "rc-modal-sheet/mobile-detector"
+import { ModalStackContainer } from "rc-modal-sheet/motion"
 
 import "./index.css"
 
 import type { SVGProps } from "react"
 import Script from "next/script"
 import { PresentSheet } from "~/sheet"
-import { GeistMono } from "geist/font/mono"
 import { GeistSans } from "geist/font/sans"
 
 import { siteConfig } from "@/config/site"
@@ -81,7 +80,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
  <ThemeProvider>
  <div className="relative flex min-h-screen flex-col">
  <SiteHeader />
- <ModalStackContainer clickOutsideToDismiss>
+ <ModalStackContainer overlay={false} clickOutsideToDismiss>
  <MobileDetector />
  <div className="flex-1">
  <Hero />

demo/next.config.mjs

@@ -7,7 +7,6 @@ import remarkMdxFrontmatter from "remark-mdx-frontmatter"
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: false,
- transpilePackages: ["rc-modal-sheet"],
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
  output: process.env.NODE_ENV === "production" ? "export" : "standalone",
 }

demo/package.json

@@ -2,7 +2,6 @@
  "name": "next-template",
  "version": "0.0.2",
  "private": true,
- "type": "module",
  "scripts": {
  "dev": "next dev",
  "build": "next build",

package.json

@@ -8,62 +8,51 @@
  "type": "git",
  "url": "https://github.com/Innei/rc-modal"
  },
- "main": "./src/index.ts",
- "exports": {
- ".": {
- "import": "./src/index.ts"
- },
- "./src/*": {
- "import": "./src/*"
- }
- },
  "files": [
  "dist",
  "readme.md",
  "tsconfig.json",
  "src",
  "styles.d.ts"
  ],
- "publishConfig": {
- "main": "dist/index.js",
- "module": "dist/index.mjs",
- "types": "dist/index.d.ts",
- "exports": {
- ".": {
- "require": "./dist/index.js",
- "import": "./dist/index.mjs"
- },
- "./index.css": {
- "require": {
- "type": "./styles.d.ts",
- "default": "./dist/index.css"
- },
- "import": {
- "type": "./styles.d.ts",
- "default": "./dist/index.css"
- }
- },
- "./motion": {
- "require": "./dist/helpers/motion.js",
- "import": "./dist/helpers/motion.mjs"
- },
- "./m": {
- "require": "./dist/helpers/m.js",
- "import": "./dist/helpers/m.mjs"
- },
- "./mobile-detector": {
- "require": "./dist/helpers/mobile-detector.js",
- "import": "./dist/helpers/mobile-detector.mjs"
- },
- "./dist/*": {
- "require": "./dist/*",
- "import": "./dist/*"
+ "main": "dist/index.js",
+ "module": "dist/index.mjs",
+ "types": "dist/index.d.ts",
+ "exports": {
+ ".": {
+ "require": "./dist/index.js",
+ "import": "./dist/index.mjs"
+ },
+ "./index.css": {
+ "require": {
+ "type": "./styles.d.ts",
+ "default": "./dist/index.css"
  },
- "./*": [
- "./*",
- "./*.d.ts"
- ]
- }
+ "import": {
+ "type": "./styles.d.ts",
+ "default": "./dist/index.css"
+ }
+ },
+ "./motion": {
+ "require": "./dist/helpers/motion.js",
+ "import": "./dist/helpers/motion.mjs"
+ },
+ "./m": {
+ "require": "./dist/helpers/m.js",
+ "import": "./dist/helpers/m.mjs"
+ },
+ "./mobile-detector": {
+ "require": "./dist/helpers/mobile-detector.js",
+ "import": "./dist/helpers/mobile-detector.mjs"
+ },
+ "./dist/*": {
+ "require": "./dist/*",
+ "import": "./dist/*"
+ },
+ "./*": [
+ "./*",
+ "./*.d.ts"
+ ]
  },
  "typesVersions": {
  "*": {
@@ -96,7 +85,8 @@
  "prebuild": "rm -rf lib && rm -rf esm",
  "build": "vite build && tailwindcss -i src/tw.css -o dist/index.css",
  "prepare": "husky install",
- "release": "bump"
+ "release": "bump",
+ "dev": "vite build --watch"
  },
  "devDependencies": {
  "@innei/bump-version": "1.5.10",
@@ -106,6 +96,7 @@
  "@radix-ui/react-dialog": "1.0.5",
  "@types/node": "20.14.8",
  "@types/react": "18.3.3",
+ "@types/react-dom": "^18.3.0",
  "@vitejs/plugin-react": "4.3.1",
  "dts-bundle-generator": "^9.5.1",
  "esbuild": "0.21.5",
@@ -117,6 +108,7 @@
  "postcss-nested": "6.0.1",
  "prettier": "3.3.2",
  "react": "18.3.1",
+ "react-dom": "^18.3.1",
  "rollup-plugin-preserve-directives": "0.4.0",
  "tailwindcss": "3.4.4",
  "tsc-alias": "1.8.10",
@@ -141,4 +133,4 @@
  "tailwind-merge": "^2.3.0",
  "vaul": "^0.9.1"
  }
-}
+}

src/modal/constants.ts

@@ -0,0 +1 @@
+export const MODAL_STACK_Z_INDEX = 100

src/modal/container.tsx

@@ -15,7 +15,9 @@ import {
  useSetIsMobile,
 } from '~/providers'
 
+import { MODAL_STACK_Z_INDEX } from './constants'
 import { Modal } from './modal'
+import { ModalOverlay } from './overlay'
 
 export const ModalStackContainer: FC<
  ModalStackContainerProps & PropsWithChildren
@@ -61,11 +63,23 @@ const SetMobile: FC<{ m: boolean }> = ({ m }) => {
 const ModalStack = memo(() => {
  const stack = useModalStackInternal()
 
+ const forceOverlay = stack.some((item) => item.overlay)
+
  return (
  <AnimatePresence mode="popLayout">
  {stack.map((item, index) => {
- return <Modal key={item.id} item={item} index={index} />
+ return (
+ <Modal
+ isTop={index === stack.length - 1}
+ key={item.id}
+ item={item}
+ index={index}
+ />
+ )
  })}
+ {stack.length > 0 && forceOverlay && (
+ <ModalOverlay zIndex={MODAL_STACK_Z_INDEX + stack.length - 1} />
+ )}
  </AnimatePresence>
  )
 })

src/modal/declarative-modal.tsx

@@ -8,7 +8,9 @@ import type { ModalProps } from './types'
 import { clsxm } from '~/lib/helper'
 import { useModalStackInternal } from '~/providers'
 
+import { MODAL_STACK_Z_INDEX } from './constants'
 import { Modal } from './modal'
+import { ModalOverlay } from './overlay'
 
 export interface DeclarativeModalProps extends Omit<ModalProps, 'content'> {
  open?: boolean
@@ -41,9 +43,12 @@ const DeclarativeModalImpl: FC<DeclarativeModalProps> = ({
  return (
  <AnimatePresence>
  {open && (
- <Modal onClose={onOpenChange} index={index} item={item}>
- {children}
- </Modal>
+ <>
+ <ModalOverlay zIndex={MODAL_STACK_Z_INDEX - 10 + index} />
+ <Modal onClose={onOpenChange} isTop index={index} item={item}>
+ {children}
+ </Modal>
+ </>
  )}
  </AnimatePresence>
  )

src/modal/hooks.tsx

@@ -17,15 +17,29 @@ export const useModalStack = (options?: ModalStackOptions) => {
  return {
  present: useCallback(
  (props: ModalProps & { id?: string }) => {
- const modalId = `${id}-${++currentCount.current}`
- setModalStack((p) => {
+ const fallbackModelId = `${id}-${++currentCount.current}`
+ const modalId = props.id ?? fallbackModelId
+
+ setModalStack((currentStack) => {
+ const existingModal = currentStack.find((item) => item.id === modalId)
+
+ if (existingModal) {
+ // Move to top
+ const index = currentStack.indexOf(existingModal)
+ return [
+ ...currentStack.slice(0, index),
+ ...currentStack.slice(index + 1),
+ existingModal,
+ ]
+ }
+
  const modalProps = {
  ...props,
  id: props.id ?? modalId,
  wrapper,
  }
  modalIdToPropsMap[modalProps.id] = modalProps
- return p.concat(modalProps)
+ return currentStack.concat(modalProps)
  })
 
  return () => {