@inertiaui/modal-react 3.0.1 → 3.1.1

package/dist/inertiauiModal.d.ts

@@ -1,11 +1,11 @@
 import { getConfig, putConfig, resetConfig } from './config';
-import { useModalIndex } from './ModalRenderer';
-import { useModalStack, ModalRoot, ModalStackProvider, renderApp, initFromPageProps, modalPropNames, prefetch } from './ModalRoot';
-import { default as useModal } from './useModal';
 import { default as Deferred } from './Deferred';
 import { default as HeadlessModal } from './HeadlessModal';
 import { default as Modal } from './Modal';
 import { default as ModalLink } from './ModalLink';
+import { useModalIndex } from './ModalRenderer';
+import { useModalStack, ModalRoot, ModalStackProvider, renderApp, initFromPageProps, modalPropNames, prefetch } from './ModalRoot';
+import { default as useModal } from './useModal';
 import { default as WhenVisible } from './WhenVisible';
 import * as dialogUtils from '@inertiaui/vanilla';
 export type { Modal as ModalInstance, ModalConfig, ModalResponseData, ModalStackContextValue, VisitOptions, ReloadOptions, EventCallback, ComponentResolver, HttpMethod, PageProps, ModalRootProps, ModalRendererProps, LocalModal, PrefetchOption, PrefetchOptions, } from './types';

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType, ReactNode } from 'react';
 import { RequestPayload, HttpResponse, Method } from '@inertiajs/core';
+import { ComponentType, ReactNode } from 'react';
 import { ModalTypeConfig } from './config';
 export type HttpMethod = Method;
 export interface ModalResponseData {

package/package.json

@@ -1,67 +1,41 @@
 {
-    "name": "@inertiaui/modal-react",
-    "author": "Pascal Baljet <pascal@protone.media>",
-    "version": "3.0.1",
-    "private": false,
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/inertiaui/modal.git",
-        "directory": "react"
-    },
-    "type": "module",
-    "files": [
-        "dist",
-        "src"
-    ],
-    "module": "./dist/inertiaui-modal.js",
-    "main": "./dist/inertiaui-modal.umd.cjs",
-    "types": "./dist/inertiaui-modal.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/inertiaui-modal.d.ts",
-            "import": "./dist/inertiaui-modal.js",
-            "require": "./dist/inertiaui-modal.umd.cjs"
-        }
-    },
-    "scripts": {
-        "dev": "NODE_ENV=development vite build --watch",
-        "build": "vite build",
-        "build-watch": "NODE_ENV=development vite build --watch",
-        "lint": "eslint src/",
-        "eslint": "eslint src/",
-        "prettier": "prettier -w src/",
-        "test": "vitest"
-    },
-    "devDependencies": {
-        "@heroicons/react": "^2.1.4",
-        "@inertiajs/react": "^3.0.0",
-        "@inertiaui/vanilla": "^0.3.0",
-        "@testing-library/react": "^16.0.0",
-        "@types/react": "^19.0.0",
-        "@types/react-dom": "^19.0.0",
-        "@typescript-eslint/eslint-plugin": "^8.0.0",
-        "@typescript-eslint/parser": "^8.0.0",
-        "@vitejs/plugin-react": "^4.3.1",
-        "@vitest/coverage-v8": "^4.0.0",
-        "@vitest/ui": "^4.0.0",
-        "clsx": "^2.1.1",
-        "eslint": "^9.0.0",
-        "happy-dom": "^20.0.0",
-        "prettier": "^3.2.4",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "typescript": "^5.7.0",
-        "vite": "^7.3.1",
-        "vite-plugin-dts": "^4.5.0",
-        "vitest": "^4.0.0"
-    },
-    "dependencies": {
-        "@inertiaui/vanilla": "^0.3.0"
-    },
-    "peerDependencies": {
-        "@inertiajs/react": "^3.0.0",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+  "name": "@inertiaui/modal-react",
+  "author": "Pascal Baljet <pascal@protone.media>",
+  "version": "3.1.1",
+  "private": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inertiaui/modal.git",
+    "directory": "react"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "module": "./dist/inertiaui-modal.js",
+  "main": "./dist/inertiaui-modal.umd.cjs",
+  "types": "./dist/inertiaui-modal.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/inertiaui-modal.d.ts",
+      "import": "./dist/inertiaui-modal.js",
+      "require": "./dist/inertiaui-modal.umd.cjs"
     }
-}
+  },
+  "dependencies": {
+    "@inertiaui/vanilla": "^1.0.2"
+  },
+  "peerDependencies": {
+    "@inertiajs/react": "^3.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "scripts": {
+    "dev": "NODE_ENV=development vite build --watch",
+    "build": "vite build",
+    "build-watch": "NODE_ENV=development vite build --watch",
+    "test": "vitest"
+  }
+}

package/src/CloseButton.tsx

@@ -4,26 +4,10 @@ interface CloseButtonProps {
 
 export default function CloseButton({ onClick }: CloseButtonProps) {
     return (
-        <button
-            type="button"
-            className="im-close-button text-gray-400 hover:text-gray-500"
-            onClick={onClick}
-        >
+        <button type="button" className="im-close-button text-gray-400 hover:text-gray-500" onClick={onClick}>
             <span className="sr-only">Close</span>
-            <svg
-                className="size-6"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth="2"
-                stroke="currentColor"
-                aria-hidden="true"
-            >
-                <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M6 18L18 6M6 6l12 12"
-                />
+            <svg className="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
         </button>
     )

package/src/Deferred.tsx

@@ -1,5 +1,6 @@
 // See: https://github.com/inertiajs/inertia/blob/48bcd21fb7daf467d0df1bfde2408f161f94a579/packages/react/src/Deferred.ts
 import { useEffect, useState, ReactNode } from 'react'
+
 import useModal from './useModal'
 
 interface DeferredProps {

package/src/HeadlessModal.tsx

@@ -1,8 +1,9 @@
 import { useMemo, useState, forwardRef, useImperativeHandle, useEffect, useRef, ReactNode } from 'react'
+
 import { getConfig, getConfigByType } from './config'
 import { useModalIndex } from './ModalRenderer'
-import { useModalStack } from './ModalRoot'
 import ModalRenderer from './ModalRenderer'
+import { useModalStack } from './ModalRoot'
 import type { Modal, ModalConfig, ReloadOptions } from './types'
 
 interface HeadlessModalConfig {
@@ -71,168 +72,163 @@ export interface HeadlessModalRef {
     readonly shouldRender: boolean | undefined
 }
 
-const HeadlessModal = forwardRef<HeadlessModalRef, HeadlessModalProps>(
-    (allProps, ref) => {
-        const { name, children, onFocus, onBlur, onClose, onSuccess, ...props } = allProps as HeadlessModalBaseProps & Record<string, unknown>
-        const modalIndex = useModalIndex()
-        const { stack, registerLocalModal, removeLocalModal } = useModalStack()
-
-        const [localModalContext, setLocalModalContext] = useState<Modal | null>(null)
-        const modalContext = useMemo(
-            () => (name ? localModalContext : stack[modalIndex]),
-            [name, localModalContext, modalIndex, stack],
-        )
-
-        const nextIndex = useMemo(() => {
-            return stack.find((m) => m.shouldRender && m.index > (modalContext?.index ?? -1))?.index
-        }, [modalIndex, stack])
-
-        const configSlideover = useMemo(
-            () => modalContext?.config.slideover ?? props.slideover ?? getConfig('type') === 'slideover',
-            [props.slideover, modalContext?.config.slideover],
-        )
-
-        const config: HeadlessModalConfig = useMemo(
-            () => ({
-                slideover: configSlideover as boolean,
-                closeButton: (props.closeButton ?? getConfigByType(configSlideover as boolean, 'closeButton')) as boolean,
-                closeExplicitly: (props.closeExplicitly ?? getConfigByType(configSlideover as boolean, 'closeExplicitly')) as boolean,
-                closeOnClickOutside: (props.closeOnClickOutside ?? getConfigByType(configSlideover as boolean, 'closeOnClickOutside')) as boolean,
-                maxWidth: (props.maxWidth ?? getConfigByType(configSlideover as boolean, 'maxWidth')) as string,
-                paddingClasses: (props.paddingClasses ?? getConfigByType(configSlideover as boolean, 'paddingClasses')) as string,
-                panelClasses: (props.panelClasses ?? getConfigByType(configSlideover as boolean, 'panelClasses')) as string,
-                position: (props.position ?? getConfigByType(configSlideover as boolean, 'position')) as string,
-                ...modalContext?.config,
-            }),
-            [props, modalContext?.config, configSlideover],
-        )
-
-        useEffect(() => {
-            if (name) {
-                let removeListeners: (() => void) | null = null
-
-                registerLocalModal(name as string, (localContext) => {
-                    removeListeners = localContext.registerEventListenersFromProps(props as Record<string, unknown>)
-                    setLocalModalContext(localContext)
-                })
-
-                return () => {
-                    removeListeners?.()
-                    removeListeners = null
-                    removeLocalModal(name as string)
-                }
+const HeadlessModal = forwardRef<HeadlessModalRef, HeadlessModalProps>((allProps, ref) => {
+    const { name, children, onFocus, onBlur, onClose, onSuccess, ...props } = allProps as HeadlessModalBaseProps & Record<string, unknown>
+    const modalIndex = useModalIndex()
+    const { stack, registerLocalModal, removeLocalModal } = useModalStack()
+
+    const [localModalContext, setLocalModalContext] = useState<Modal | null>(null)
+    const modalContext = useMemo(() => (name ? localModalContext : stack[modalIndex]), [name, localModalContext, modalIndex, stack])
+
+    const nextIndex = useMemo(() => {
+        return stack.find((m) => m.shouldRender && m.index > (modalContext?.index ?? -1))?.index
+    }, [modalIndex, stack])
+
+    const configSlideover = useMemo(
+        () => modalContext?.config.slideover ?? props.slideover ?? getConfig('type') === 'slideover',
+        [props.slideover, modalContext?.config.slideover],
+    )
+
+    const config: HeadlessModalConfig = useMemo(
+        () => ({
+            slideover: configSlideover as boolean,
+            closeButton: (props.closeButton ?? getConfigByType(configSlideover as boolean, 'closeButton')) as boolean,
+            closeExplicitly: (props.closeExplicitly ?? getConfigByType(configSlideover as boolean, 'closeExplicitly')) as boolean,
+            closeOnClickOutside: (props.closeOnClickOutside ?? getConfigByType(configSlideover as boolean, 'closeOnClickOutside')) as boolean,
+            maxWidth: (props.maxWidth ?? getConfigByType(configSlideover as boolean, 'maxWidth')) as string,
+            paddingClasses: (props.paddingClasses ?? getConfigByType(configSlideover as boolean, 'paddingClasses')) as string,
+            panelClasses: (props.panelClasses ?? getConfigByType(configSlideover as boolean, 'panelClasses')) as string,
+            position: (props.position ?? getConfigByType(configSlideover as boolean, 'position')) as string,
+            ...modalContext?.config,
+        }),
+        [props, modalContext?.config, configSlideover],
+    )
+
+    useEffect(() => {
+        if (name) {
+            let removeListeners: (() => void) | null = null
+
+            registerLocalModal(name as string, (localContext) => {
+                removeListeners = localContext.registerEventListenersFromProps(props as Record<string, unknown>)
+                setLocalModalContext(localContext)
+            })
+
+            return () => {
+                removeListeners?.()
+                removeListeners = null
+                removeLocalModal(name as string)
             }
+        }
 
-            return modalContext?.registerEventListenersFromProps(props as Record<string, unknown>)
-        }, [name])
-
-        // Store the latest modalContext in a ref to maintain reference
-        const modalContextRef = useRef(modalContext)
-
-        // Update the ref whenever modalContext changes
-        useEffect(() => {
-            modalContextRef.current = modalContext
-        }, [modalContext])
-
-        // Track previous isOpen value to only emit close when transitioning from true to false
-        const previousIsOpenRef = useRef<boolean | undefined>(undefined)
-
-        useEffect(() => {
-            if (modalContext != null) {
-                if (modalContext.isOpen) {
-                    onSuccess?.()
-                } else if (previousIsOpenRef.current === true) {
-                    // Only call onClose when transitioning from open to closed,
-                    // not when the component first mounts with isOpen undefined/false
-                    onClose?.()
-                }
-                previousIsOpenRef.current = modalContext.isOpen
-            }
-        }, [modalContext?.isOpen])
+        return modalContext?.registerEventListenersFromProps(props as Record<string, unknown>)
+    }, [name])
 
-        const [rendered, setRendered] = useState(false)
+    // Store the latest modalContext in a ref to maintain reference
+    const modalContextRef = useRef(modalContext)
 
-        useEffect(() => {
-            if (rendered && modalContext != null && modalContext.isOpen) {
-                if (modalContext.onTopOfStack) {
-                    onFocus?.()
-                } else {
-                    onBlur?.()
-                }
+    // Update the ref whenever modalContext changes
+    useEffect(() => {
+        modalContextRef.current = modalContext
+    }, [modalContext])
+
+    // Track previous isOpen value to only emit close when transitioning from true to false
+    const previousIsOpenRef = useRef<boolean | undefined>(undefined)
+
+    useEffect(() => {
+        if (modalContext != null) {
+            if (modalContext.isOpen) {
+                onSuccess?.()
+            } else if (previousIsOpenRef.current === true) {
+                // Only call onClose when transitioning from open to closed,
+                // not when the component first mounts with isOpen undefined/false
+                onClose?.()
             }
+            previousIsOpenRef.current = modalContext.isOpen
+        }
+    }, [modalContext?.isOpen])
 
-            setRendered(true)
-        }, [modalContext?.onTopOfStack])
-
-        useImperativeHandle(
-            ref,
-            () => ({
-                afterLeave: () => modalContextRef.current?.afterLeave(),
-                close: () => modalContextRef.current?.close(),
-                emit: (...args: [string, ...unknown[]]) => modalContextRef.current?.emit(...args),
-                getChildModal: () => modalContextRef.current?.getChildModal(),
-                getParentModal: () => modalContextRef.current?.getParentModal(),
-                reload: (options?: ReloadOptions) => modalContextRef.current?.reload(options),
-                setOpen: (open: boolean) => modalContextRef.current?.setOpen(open),
-
-                get id() {
-                    return modalContextRef.current?.id
-                },
-                get index() {
-                    return modalContextRef.current?.index
-                },
-                get isOpen() {
-                    return modalContextRef.current?.isOpen
-                },
-                get config() {
-                    return modalContextRef.current?.config
-                },
-                get modalContext() {
-                    return modalContextRef.current
-                },
-                get onTopOfStack() {
-                    return modalContextRef.current?.onTopOfStack
-                },
-                get shouldRender() {
-                    return modalContextRef.current?.shouldRender
-                },
-            }),
-            [modalContext],
-        )
-
-        if (!modalContext?.shouldRender) {
-            return null
+    const [rendered, setRendered] = useState(false)
+
+    useEffect(() => {
+        if (rendered && modalContext != null && modalContext.isOpen) {
+            if (modalContext.onTopOfStack) {
+                onFocus?.()
+            } else {
+                onBlur?.()
+            }
         }
 
-        return (
-            <>
-                {typeof children === 'function'
-                    ? children({
-                          // Spread props first so they can be overridden by built-in props
-                          ...modalContext.props,
-                          afterLeave: modalContext.afterLeave,
-                          close: modalContext.close,
-                          config,
-                          emit: modalContext.emit,
-                          getChildModal: modalContext.getChildModal,
-                          getParentModal: modalContext.getParentModal,
-                          id: modalContext.id,
-                          index: modalContext.index,
-                          isOpen: modalContext.isOpen,
-                          modalContext,
-                          onTopOfStack: modalContext.onTopOfStack,
-                          reload: modalContext.reload,
-                          setOpen: modalContext.setOpen,
-                          shouldRender: modalContext.shouldRender,
-                      })
-                    : children}
-
-                {/* Next modal in the stack */}
-                {nextIndex !== undefined && <ModalRenderer index={nextIndex} />}
-            </>
-        )
-    },
-)
+        setRendered(true)
+    }, [modalContext?.onTopOfStack])
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            afterLeave: () => modalContextRef.current?.afterLeave(),
+            close: () => modalContextRef.current?.close(),
+            emit: (...args: [string, ...unknown[]]) => modalContextRef.current?.emit(...args),
+            getChildModal: () => modalContextRef.current?.getChildModal(),
+            getParentModal: () => modalContextRef.current?.getParentModal(),
+            reload: (options?: ReloadOptions) => modalContextRef.current?.reload(options),
+            setOpen: (open: boolean) => modalContextRef.current?.setOpen(open),
+
+            get id() {
+                return modalContextRef.current?.id
+            },
+            get index() {
+                return modalContextRef.current?.index
+            },
+            get isOpen() {
+                return modalContextRef.current?.isOpen
+            },
+            get config() {
+                return modalContextRef.current?.config
+            },
+            get modalContext() {
+                return modalContextRef.current
+            },
+            get onTopOfStack() {
+                return modalContextRef.current?.onTopOfStack
+            },
+            get shouldRender() {
+                return modalContextRef.current?.shouldRender
+            },
+        }),
+        [modalContext],
+    )
+
+    if (!modalContext?.shouldRender) {
+        return null
+    }
+
+    return (
+        <>
+            {typeof children === 'function'
+                ? children({
+                      // Spread props first so they can be overridden by built-in props
+                      ...modalContext.props,
+                      afterLeave: modalContext.afterLeave,
+                      close: modalContext.close,
+                      config,
+                      emit: modalContext.emit,
+                      getChildModal: modalContext.getChildModal,
+                      getParentModal: modalContext.getParentModal,
+                      id: modalContext.id,
+                      index: modalContext.index,
+                      isOpen: modalContext.isOpen,
+                      modalContext,
+                      onTopOfStack: modalContext.onTopOfStack,
+                      reload: modalContext.reload,
+                      setOpen: modalContext.setOpen,
+                      shouldRender: modalContext.shouldRender,
+                  })
+                : children}
+
+            {/* Next modal in the stack */}
+            {nextIndex !== undefined && <ModalRenderer index={nextIndex} />}
+        </>
+    )
+})
 
 HeadlessModal.displayName = 'HeadlessModal'
 export default HeadlessModal