@trackunit/react-modal 1.3.200 → 1.3.202

package/index.cjs.js

@@ -2,11 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var react$1 = require('@floating-ui/react');
 var reactComponents = require('@trackunit/react-components');
-var reactCoreHooks = require('@trackunit/react-core-hooks');
-var react = require('react');
+var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
-var usePortal = require('react-useportal');
+var react = require('react');
+var reactCoreHooks = require('@trackunit/react-core-hooks');
 
 var defaultTranslations = {
 	
@@ -83,34 +84,9 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
     "invisible",
     "opacity-0",
     "transition-all",
-], {
-    variants: {
-        show: {
-            true: "",
-            false: "",
-        },
-        noShadow: {
-            true: "",
-            false: "bg-black/50",
-        },
-        isFastOpen: {
-            true: "",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            show: true,
-            isFastOpen: true,
-            class: "animate-modal-fade-fast",
-        },
-        {
-            show: true,
-            isFastOpen: false,
-            class: "animate-modal-fade",
-        },
-    ],
-});
+    "bg-black/50",
+    "animate-modal-fade",
+]);
 
 /**
  * The Backdrop for the modal.
@@ -118,10 +94,10 @@ const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {ReactElement} ModalBackdrop component
  */
-const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) => {
+const ModalBackdrop = ({ children, onClick }) => {
     const ref = react.useRef(null);
-    return (jsxRuntime.jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow, isFastOpen }), onMouseDown: e => {
-            // only react on click on backdrop - accessing first child to get around styled element element
+    return (jsxRuntime.jsx("div", { className: cvaModalBackdrop(), onMouseDown: e => {
+            // only react on click on backdrop - accessing first child to get around styled element
             if (ref.current !== null && e.target === ref.current.children[0]) {
                 onClick();
             }
@@ -132,11 +108,52 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) =
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
  * - Modals interrupt a user's workflow by design.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
+ *
+ * - Modals should be used with the `useModal` hook.
+ * - const modal = useModal();
+ * - <Modal {...modal} />
+ */
+const Modal = ({ children, isOpen, role, dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
+    const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
+    return (jsxRuntime.jsx(reactComponents.Portal, { root: rootElement, children: isOpen ? (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, children: jsxRuntime.jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: uiDesignTokens.zIndex.overlay }, ...getFloatingProps(), children: jsxRuntime.jsx(ModalBackdrop, { onClick: onBackdropClick, children: jsxRuntime.jsx("div", { className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) }) }) }) })) : null }));
+};
+Modal.displayName = "Modal";
+
+/**
+ * A hook to handle the state and configuration of Modal components.
+ *
+ * - `useModal` should be used with the `Modal` component.
+ * - const modal = useModal();
+ * - <Modal {...modal} />
  */
-const Modal = ({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, isFastOpen = false, onDismissClick = () => {
-    return;
-}, ref, }) => {
+const useModal = (props = {}) => {
+    const [isOpen, setIsOpen] = react.useState(Boolean(props.isOpen));
+    return useModalInner({
+        ...props,
+        setIsOpen,
+        isOpen: typeof props.isOpen === "boolean" ? props.isOpen : isOpen,
+    });
+};
+const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOutsideClick = true, closeOnEsc = true, onClose, onOpen, ref: customRef, }) => {
+    const ref = react.useRef(null);
     const { openModal, closeModal } = reactCoreHooks.useModalDialogContext();
+    const { refs, floatingStyles, context } = react$1.useFloating({
+        open: isOpen,
+        onOpenChange: (bool, event, openChangeReason) => {
+            if (onOpenChange) {
+                return onOpenChange(bool, event, openChangeReason);
+            }
+            setIsOpen(bool);
+        },
+        whileElementsMounted: react$1.autoUpdate,
+        middleware: [react$1.shift()],
+    });
+    const dismiss = react$1.useDismiss(context, {
+        escapeKey: closeOnEsc,
+        outsidePress: closeOnOutsideClick,
+    });
+    const { getFloatingProps } = react$1.useInteractions([dismiss]);
+    // Handles closing and opening the modal outside of Iris apps/outside an iframe.
     react.useEffect(() => {
         if (isOpen) {
             openModal();
@@ -149,51 +166,62 @@ const Modal = ({ isOpen, children, dataTestId, className, containerClassName, ro
             closeModal();
         };
     }, [isOpen, openModal, closeModal]);
-    return (jsxRuntime.jsx(ModalBackdrop, { isFastOpen: isFastOpen, isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsxRuntime.jsx(reactComponents.Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
-};
-Modal.displayName = "Modal";
-
-/**
- * The useModal component should be used to inform the user of important information.
- *
- * @param {UseModalProps} props - The props for the useModal hook
- * @returns {*} useModal return
- */
-const useModal = ({ closeOnOutsideClick, bindTo, closeOnEsc = true } = {}) => {
-    const modalRef = react.useRef(null);
-    const { isOpen, togglePortal, openPortal, closePortal, Portal } = usePortal({
-        closeOnOutsideClick,
-        closeOnEsc,
-        onPortalClick: ({ target }) => {
-            if (!closeOnOutsideClick) {
-                return;
+    const open = react.useCallback((...args) => {
+        for (const arg of args) {
+            if (!arg) {
+                continue;
             }
-            // eslint-disable-next-line local-rules/no-typescript-assertion
-            const clickingOutsideModal = !modalRef.current?.contains(target);
-            if (clickingOutsideModal) {
-                closePortal();
+            // @ts-ignore
+            if ("preventDefault" in arg) {
+                arg.preventDefault();
             }
+            // @ts-ignore
+            if ("stopPropagation" in arg) {
+                arg.stopPropagation();
+            }
+        }
+        onOpen?.(...args);
+        setIsOpen(true);
+    }, [onOpen, setIsOpen]);
+    const close = react.useCallback((...args) => {
+        onClose?.(...args);
+        setIsOpen(false);
+    }, [onClose, setIsOpen]);
+    const toggle = react.useCallback((...args) => {
+        if (isOpen) {
+            return close(...args);
+        }
+        return open(...args);
+    }, [close, isOpen, open]);
+    return react.useMemo(() => ({
+        isOpen,
+        closeOnOutsideClick,
+        toggle,
+        open,
+        close,
+        ref: customRef ?? ref,
+        // @ts-ignore TOnCloseArgs could be instantiated with a different subtype of constraint BaseUseModalActionArgs
+        onBackdropClick: () => (closeOnOutsideClick ? close() : null),
+        floatingUi: {
+            refs,
+            rootElement,
+            floatingStyles,
+            context,
+            getFloatingProps,
         },
-        bindTo,
-    });
-    const WrappedModal = react.useCallback(({ children, ...props }) => (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Modal, { isOpen: isOpen, ref: modalRef, ...props, children: children }) })), [Portal, isOpen, modalRef]);
-    WrappedModal.displayName = "Modal";
-    return {
-        Modal: WrappedModal,
-        toggleModal: (e) => {
-            togglePortal(e);
-        },
-        openModal: (e) => {
-            openPortal(e);
-        },
-        closeModal: (e) => {
-            e?.stopPropagation();
-            e?.preventDefault();
-            closePortal(e);
-        },
-        // eslint-disable-next-line local-rules/no-typescript-assertion
-        isOpen: isOpen,
-    };
+    }), [
+        close,
+        closeOnOutsideClick,
+        context,
+        customRef,
+        floatingStyles,
+        getFloatingProps,
+        isOpen,
+        open,
+        refs,
+        rootElement,
+        toggle,
+    ]);
 };
 
 /*

package/index.esm.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
-import { Card } from '@trackunit/react-components';
-import { useModalDialogContext } from '@trackunit/react-core-hooks';
-import { useRef, useEffect, useCallback } from 'react';
+import { FloatingFocusManager, useFloating, autoUpdate, shift, useDismiss, useInteractions } from '@floating-ui/react';
+import { Portal, Card } from '@trackunit/react-components';
+import { zIndex } from '@trackunit/ui-design-tokens';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
-import usePortal from 'react-useportal';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { useModalDialogContext } from '@trackunit/react-core-hooks';
 
 var defaultTranslations = {
 	
@@ -81,34 +82,9 @@ const cvaModalBackdrop = cvaMerge([
     "invisible",
     "opacity-0",
     "transition-all",
-], {
-    variants: {
-        show: {
-            true: "",
-            false: "",
-        },
-        noShadow: {
-            true: "",
-            false: "bg-black/50",
-        },
-        isFastOpen: {
-            true: "",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            show: true,
-            isFastOpen: true,
-            class: "animate-modal-fade-fast",
-        },
-        {
-            show: true,
-            isFastOpen: false,
-            class: "animate-modal-fade",
-        },
-    ],
-});
+    "bg-black/50",
+    "animate-modal-fade",
+]);
 
 /**
  * The Backdrop for the modal.
@@ -116,10 +92,10 @@ const cvaModalBackdrop = cvaMerge([
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {ReactElement} ModalBackdrop component
  */
-const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) => {
+const ModalBackdrop = ({ children, onClick }) => {
     const ref = useRef(null);
-    return (jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow, isFastOpen }), onMouseDown: e => {
-            // only react on click on backdrop - accessing first child to get around styled element element
+    return (jsx("div", { className: cvaModalBackdrop(), onMouseDown: e => {
+            // only react on click on backdrop - accessing first child to get around styled element
             if (ref.current !== null && e.target === ref.current.children[0]) {
                 onClick();
             }
@@ -130,11 +106,52 @@ const ModalBackdrop = ({ children, isVisible, onClick, noShadow, isFastOpen }) =
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
  * - Modals interrupt a user's workflow by design.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
+ *
+ * - Modals should be used with the `useModal` hook.
+ * - const modal = useModal();
+ * - <Modal {...modal} />
  */
-const Modal = ({ isOpen, children, dataTestId, className, containerClassName, role = "", noBackdropShadow = false, isFastOpen = false, onDismissClick = () => {
-    return;
-}, ref, }) => {
+const Modal = ({ children, isOpen, role, dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }) => {
+    const { rootElement, refs, floatingStyles, context, getFloatingProps } = floatingUi;
+    return (jsx(Portal, { root: rootElement, children: isOpen ? (jsx(FloatingFocusManager, { context: context, children: jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: zIndex.overlay }, ...getFloatingProps(), children: jsx(ModalBackdrop, { onClick: onBackdropClick, children: jsx("div", { className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) }) }) }) })) : null }));
+};
+Modal.displayName = "Modal";
+
+/**
+ * A hook to handle the state and configuration of Modal components.
+ *
+ * - `useModal` should be used with the `Modal` component.
+ * - const modal = useModal();
+ * - <Modal {...modal} />
+ */
+const useModal = (props = {}) => {
+    const [isOpen, setIsOpen] = useState(Boolean(props.isOpen));
+    return useModalInner({
+        ...props,
+        setIsOpen,
+        isOpen: typeof props.isOpen === "boolean" ? props.isOpen : isOpen,
+    });
+};
+const useModalInner = ({ isOpen, setIsOpen, onOpenChange, rootElement, closeOnOutsideClick = true, closeOnEsc = true, onClose, onOpen, ref: customRef, }) => {
+    const ref = useRef(null);
     const { openModal, closeModal } = useModalDialogContext();
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: (bool, event, openChangeReason) => {
+            if (onOpenChange) {
+                return onOpenChange(bool, event, openChangeReason);
+            }
+            setIsOpen(bool);
+        },
+        whileElementsMounted: autoUpdate,
+        middleware: [shift()],
+    });
+    const dismiss = useDismiss(context, {
+        escapeKey: closeOnEsc,
+        outsidePress: closeOnOutsideClick,
+    });
+    const { getFloatingProps } = useInteractions([dismiss]);
+    // Handles closing and opening the modal outside of Iris apps/outside an iframe.
     useEffect(() => {
         if (isOpen) {
             openModal();
@@ -147,51 +164,62 @@ const Modal = ({ isOpen, children, dataTestId, className, containerClassName, ro
             closeModal();
         };
     }, [isOpen, openModal, closeModal]);
-    return (jsx(ModalBackdrop, { isFastOpen: isFastOpen, isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsx("div", { className: cvaModalContainer({ className: containerClassName }), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
-};
-Modal.displayName = "Modal";
-
-/**
- * The useModal component should be used to inform the user of important information.
- *
- * @param {UseModalProps} props - The props for the useModal hook
- * @returns {*} useModal return
- */
-const useModal = ({ closeOnOutsideClick, bindTo, closeOnEsc = true } = {}) => {
-    const modalRef = useRef(null);
-    const { isOpen, togglePortal, openPortal, closePortal, Portal } = usePortal({
-        closeOnOutsideClick,
-        closeOnEsc,
-        onPortalClick: ({ target }) => {
-            if (!closeOnOutsideClick) {
-                return;
+    const open = useCallback((...args) => {
+        for (const arg of args) {
+            if (!arg) {
+                continue;
             }
-            // eslint-disable-next-line local-rules/no-typescript-assertion
-            const clickingOutsideModal = !modalRef.current?.contains(target);
-            if (clickingOutsideModal) {
-                closePortal();
+            // @ts-ignore
+            if ("preventDefault" in arg) {
+                arg.preventDefault();
             }
+            // @ts-ignore
+            if ("stopPropagation" in arg) {
+                arg.stopPropagation();
+            }
+        }
+        onOpen?.(...args);
+        setIsOpen(true);
+    }, [onOpen, setIsOpen]);
+    const close = useCallback((...args) => {
+        onClose?.(...args);
+        setIsOpen(false);
+    }, [onClose, setIsOpen]);
+    const toggle = useCallback((...args) => {
+        if (isOpen) {
+            return close(...args);
+        }
+        return open(...args);
+    }, [close, isOpen, open]);
+    return useMemo(() => ({
+        isOpen,
+        closeOnOutsideClick,
+        toggle,
+        open,
+        close,
+        ref: customRef ?? ref,
+        // @ts-ignore TOnCloseArgs could be instantiated with a different subtype of constraint BaseUseModalActionArgs
+        onBackdropClick: () => (closeOnOutsideClick ? close() : null),
+        floatingUi: {
+            refs,
+            rootElement,
+            floatingStyles,
+            context,
+            getFloatingProps,
         },
-        bindTo,
-    });
-    const WrappedModal = useCallback(({ children, ...props }) => (jsx(Portal, { children: jsx(Modal, { isOpen: isOpen, ref: modalRef, ...props, children: children }) })), [Portal, isOpen, modalRef]);
-    WrappedModal.displayName = "Modal";
-    return {
-        Modal: WrappedModal,
-        toggleModal: (e) => {
-            togglePortal(e);
-        },
-        openModal: (e) => {
-            openPortal(e);
-        },
-        closeModal: (e) => {
-            e?.stopPropagation();
-            e?.preventDefault();
-            closePortal(e);
-        },
-        // eslint-disable-next-line local-rules/no-typescript-assertion
-        isOpen: isOpen,
-    };
+    }), [
+        close,
+        closeOnOutsideClick,
+        context,
+        customRef,
+        floatingStyles,
+        getFloatingProps,
+        isOpen,
+        open,
+        refs,
+        rootElement,
+        toggle,
+    ]);
 };
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "1.3.200",
+  "version": "1.3.202",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,12 +8,14 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "react-useportal": "1.0.19",
-    "@trackunit/react-components": "1.4.183",
-    "@trackunit/react-core-hooks": "1.3.164",
-    "@trackunit/css-class-variance-utilities": "1.3.150",
-    "@trackunit/i18n-library-translation": "1.3.171",
-    "@trackunit/react-test-setup": "1.0.40"
+    "@trackunit/react-components": "1.4.185",
+    "@trackunit/react-core-hooks": "1.3.165",
+    "@trackunit/css-class-variance-utilities": "1.3.151",
+    "@trackunit/i18n-library-translation": "1.3.172",
+    "@trackunit/react-test-setup": "1.0.41",
+    "@floating-ui/react": "^0.26.25",
+    "@floating-ui/react-dom": "2.1.2",
+    "@trackunit/ui-design-tokens": "1.3.149"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/modal/Modal.d.ts

@@ -1,49 +1,21 @@
-import { CommonProps } from "@trackunit/react-components";
-import { ReactNode, Ref } from "react";
-export interface ModalProps extends CommonProps {
-    /**
-     * Whether modal is open or not.
-     */
-    isOpen?: boolean;
-    /**
-     * Function to be called when the modal is clicked outside of it.
-     */
-    onDismissClick?: () => void;
-    /**
-     * Child elements to be rendered inside the modal.
-     */
-    children: ReactNode;
-    /**
-     * Test id to be applied to the modal.
-     */
-    dataTestId?: string;
-    /**
-     * Aria role to be applied to element
-     */
+import { PropsWithChildren } from "react";
+import { BaseUseModalActionArgs, UseModalReturnValue } from "./useModal";
+export type ModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []> = {
     role?: string;
-    /**
-     * Whether modal has backdrop shadow or not
-     */
-    noBackdropShadow?: boolean;
-    /**
-     * A custom class name to be attached to modal container
-     */
+    className?: string;
     containerClassName?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLDivElement>;
-    /**
-     * Whether modal should open with a fast animation or not.
-     */
-    isFastOpen?: boolean;
-}
+    dataTestId?: string;
+} & PropsWithChildren<UseModalReturnValue<TOnCloseFnArgs, TOnOpenFnArgs>>;
 /**
  * - Modals are used to present critical information or request user input needed to complete a user's workflow.
  * - Modals interrupt a user's workflow by design.
  * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
+ *
+ * - Modals should be used with the `useModal` hook.
+ * - const modal = useModal();
+ * - <Modal {...modal} />
  */
 export declare const Modal: {
-    ({ isOpen, children, dataTestId, className, containerClassName, role, noBackdropShadow, isFastOpen, onDismissClick, ref, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    <TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []>({ children, isOpen, role, dataTestId, className, containerClassName, onBackdropClick, floatingUi, ref, }: ModalProps<TOnCloseFnArgs, TOnOpenFnArgs>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/src/modal/Modal.variants.d.ts

@@ -1,7 +1,3 @@
 export declare const cvaModalContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaModalCard: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaModalBackdrop: (props?: ({
-    show?: boolean | null | undefined;
-    noShadow?: boolean | null | undefined;
-    isFastOpen?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaModalBackdrop: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/modal/ModalBackdrop.d.ts

@@ -1,9 +1,7 @@
+import { ReactNode } from "react";
 export interface ModalBackdropProps {
     onClick: () => void;
-    children: React.ReactNode;
-    isVisible?: boolean;
-    noShadow?: boolean;
-    isFastOpen?: boolean;
+    children: ReactNode;
 }
 /**
  * The Backdrop for the modal.
@@ -11,4 +9,4 @@ export interface ModalBackdropProps {
  * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
  * @returns {ReactElement} ModalBackdrop component
  */
-export declare const ModalBackdrop: ({ children, isVisible, onClick, noShadow, isFastOpen }: ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalBackdrop: ({ children, onClick }: ModalBackdropProps) => import("react/jsx-runtime").JSX.Element;

package/src/modal/useModal.d.ts

@@ -1,22 +1,44 @@
-import { BaseSyntheticEvent, ReactElement } from "react";
-import { ModalProps } from "./Modal";
-export interface UseModalProps {
-    closeOnOutsideClick?: boolean;
-    bindTo?: HTMLElement;
+import { UseFloatingOptions, UseFloatingReturn } from "@floating-ui/react";
+import { UseFloatingReturn as UseFloatingReturn_Dom } from "@floating-ui/react-dom";
+import { UseInteractionsReturn } from "@floating-ui/react/dist/floating-ui.react";
+import { MouseEvent, Ref } from "react";
+type BaseUseModalActionArg = string | number | boolean | null | undefined | [] | object | MouseEvent;
+export type BaseUseModalActionArgs = {} & Array<BaseUseModalActionArg>;
+type OnCloseFn<TOnCloseFnArgs extends BaseUseModalActionArgs> = (...args: TOnCloseFnArgs) => void;
+type OnOpenFn<TOnOpenFnArgs extends BaseUseModalActionArgs> = (...args: TOnOpenFnArgs) => void;
+export type UseModalProps<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []> = {
+    isOpen?: boolean;
+    onClose?: OnCloseFn<TOnCloseFnArgs>;
+    onOpen?: OnOpenFn<TOnOpenFnArgs>;
+    onOpenChange?: UseFloatingOptions["onOpenChange"];
+    rootElement?: HTMLElement;
     closeOnEsc?: boolean;
-}
+    closeOnOutsideClick?: boolean;
+    ref?: Ref<HTMLDivElement>;
+};
+type FloatingUiProps = {
+    refs: UseFloatingReturn_Dom["refs"];
+    floatingStyles: UseFloatingReturn_Dom["floatingStyles"];
+    rootElement?: HTMLElement;
+    context: UseFloatingReturn["context"];
+    getFloatingProps: UseInteractionsReturn["getFloatingProps"];
+};
+export type UseModalReturnValue<TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []> = {
+    ref: Ref<HTMLDivElement>;
+    isOpen: boolean;
+    closeOnOutsideClick: boolean;
+    onBackdropClick: () => void;
+    open: OnOpenFn<TOnOpenFnArgs>;
+    toggle: (...args: TOnOpenFnArgs | TOnCloseFnArgs) => void;
+    close: OnCloseFn<TOnCloseFnArgs>;
+    floatingUi: FloatingUiProps;
+};
 /**
- * The useModal component should be used to inform the user of important information.
+ * A hook to handle the state and configuration of Modal components.
  *
- * @param {UseModalProps} props - The props for the useModal hook
- * @returns {*} useModal return
+ * - `useModal` should be used with the `Modal` component.
+ * - const modal = useModal();
+ * - <Modal {...modal} />
  */
-export declare const useModal: ({ closeOnOutsideClick, bindTo, closeOnEsc }?: UseModalProps) => {
-    Modal: ((props: ModalProps) => ReactElement) & {
-        displayName?: string;
-    };
-    toggleModal: (e?: BaseSyntheticEvent) => void;
-    openModal: (e?: BaseSyntheticEvent) => void;
-    closeModal: (e?: BaseSyntheticEvent) => void;
-    isOpen: boolean;
-};
+export declare const useModal: <TOnCloseFnArgs extends BaseUseModalActionArgs = [], TOnOpenFnArgs extends BaseUseModalActionArgs = []>(props?: UseModalProps<TOnCloseFnArgs, TOnOpenFnArgs>) => UseModalReturnValue<TOnCloseFnArgs, TOnOpenFnArgs>;
+export {};