@cerberus-design/react 0.10.4-next-4e536c0 → 0.10.4-next-10ee67c

package/build/modern/_tsup-dts-rollup.d.ts

@@ -2485,9 +2485,16 @@ export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }
 
 /**
- * Provides a hook for using a custom modal.
+ * Provides a hook for using a custom modal via the native dialog element
+ * methods.
+ *
+ * Cerberus modals use the native dialog element. This hook
+ * does not control the modal via React state but rather by calling the
+ * native dialog element's `showModal` and `close` methods.
+ *
  * @memberof module:Modal
- * @returns The modal hook.
+ * @see https://cerberus.digitalu.design/react/modal
+ * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
  */
 declare function useModal(): UseModalReturnValue;
 export { useModal }
@@ -2510,6 +2517,10 @@ declare interface UseModalReturnValue {
      * Closes the modal.
      */
     close: () => void;
+    /**
+     * Whether the modal is open based on the show and close methods.
+     */
+    isOpen: boolean;
 }
 
 /**

package/build/modern/{chunk-OW62FLJ6.js → chunk-7T3JIGM7.js}

@@ -1,23 +1,27 @@
 // src/hooks/useModal.ts
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 function useModal() {
   const modalRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
   const show = useCallback(() => {
     modalRef.current?.showModal();
+    setIsOpen(true);
   }, []);
   const close = useCallback(() => {
     modalRef.current?.close();
+    setIsOpen(false);
   }, []);
   return useMemo(() => {
     return {
       modalRef,
       show,
-      close
+      close,
+      isOpen
     };
-  }, [modalRef, show, close]);
+  }, [modalRef, show, close, isOpen]);
 }
 
 export {
   useModal
 };
-//# sourceMappingURL=chunk-OW62FLJ6.js.map
+//# sourceMappingURL=chunk-7T3JIGM7.js.map

package/build/modern/chunk-7T3JIGM7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useModal.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useRef, useState, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\ninterface UseModalReturnValue {\n  /**\n   * The ref for the modal.\n   */\n  modalRef: RefObject<HTMLDialogElement>\n  /**\n   * Shows the modal.\n   */\n  show: () => void\n  /**\n   * Closes the modal.\n   */\n  close: () => void\n  /**\n   * Whether the modal is open based on the show and close methods.\n   */\n  isOpen: boolean\n}\n\n/**\n * Provides a hook for using a custom modal via the native dialog element\n * methods.\n *\n * Cerberus modals use the native dialog element. This hook\n * does not control the modal via React state but rather by calling the\n * native dialog element's `showModal` and `close` methods.\n *\n * @memberof module:Modal\n * @see https://cerberus.digitalu.design/react/modal\n * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n */\nexport function useModal(): UseModalReturnValue {\n  const modalRef = useRef<HTMLDialogElement | null>(null)\n  const [isOpen, setIsOpen] = useState<boolean>(false)\n\n  const show = useCallback(() => {\n    modalRef.current?.showModal()\n    setIsOpen(true)\n  }, [])\n\n  const close = useCallback(() => {\n    modalRef.current?.close()\n    setIsOpen(false)\n  }, [])\n\n  return useMemo(() => {\n    return {\n      modalRef,\n      show,\n      close,\n      isOpen,\n    }\n  }, [modalRef, show, close, isOpen])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,QAAQ,gBAAgC;AAsChE,SAAS,WAAgC;AAC9C,QAAM,WAAW,OAAiC,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AAEnD,QAAM,OAAO,YAAY,MAAM;AAC7B,aAAS,SAAS,UAAU;AAC5B,cAAU,IAAI;AAAA,EAChB,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,SAAS,MAAM;AACxB,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,MAAM;AACnB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,OAAO,MAAM,CAAC;AACpC;","names":[]}

package/build/modern/{chunk-BGBCJ2W2.js → chunk-BDNY6R3H.js}

@@ -30,7 +30,7 @@ import {
 } from "./chunk-NBG2OSYI.js";
 import {
   useModal
-} from "./chunk-OW62FLJ6.js";
+} from "./chunk-7T3JIGM7.js";
 
 // src/context/confirm-modal.tsx
 import {
@@ -176,4 +176,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-BGBCJ2W2.js.map
+//# sourceMappingURL=chunk-BDNY6R3H.js.map

package/build/modern/{chunk-77LI5SP3.js → chunk-ZBRG3FQV.js}

@@ -39,7 +39,7 @@ import {
 } from "./chunk-NBG2OSYI.js";
 import {
   useModal
-} from "./chunk-OW62FLJ6.js";
+} from "./chunk-7T3JIGM7.js";
 
 // src/context/prompt-modal.tsx
 import {
@@ -229,4 +229,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-77LI5SP3.js.map
+//# sourceMappingURL=chunk-ZBRG3FQV.js.map

package/build/modern/context/confirm-modal.js

@@ -2,7 +2,7 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-BGBCJ2W2.js";
+} from "../chunk-BDNY6R3H.js";
 import "../chunk-GLY7GU5S.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
@@ -15,7 +15,7 @@ import "../chunk-JIZQFTW6.js";
 import "../chunk-NBG2OSYI.js";
 import "../chunk-BDCFYW34.js";
 import "../chunk-CP7OUC2Q.js";
-import "../chunk-OW62FLJ6.js";
+import "../chunk-7T3JIGM7.js";
 export {
   ConfirmModal,
   useConfirmModal

package/build/modern/context/prompt-modal.js

@@ -2,7 +2,7 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-77LI5SP3.js";
+} from "../chunk-ZBRG3FQV.js";
 import "../chunk-GLY7GU5S.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
@@ -18,7 +18,7 @@ import "../chunk-JIZQFTW6.js";
 import "../chunk-NBG2OSYI.js";
 import "../chunk-BDCFYW34.js";
 import "../chunk-CP7OUC2Q.js";
-import "../chunk-OW62FLJ6.js";
+import "../chunk-7T3JIGM7.js";
 export {
   PromptModal,
   usePromptModal

package/build/modern/hooks/useModal.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useModal
-} from "../chunk-OW62FLJ6.js";
+} from "../chunk-7T3JIGM7.js";
 export {
   useModal
 };

package/build/modern/index.js

@@ -5,7 +5,7 @@ import {
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-77LI5SP3.js";
+} from "./chunk-ZBRG3FQV.js";
 import {
   ThemeProvider,
   useThemeContext
@@ -25,7 +25,7 @@ import {
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-BGBCJ2W2.js";
+} from "./chunk-BDNY6R3H.js";
 import {
   Spinner
 } from "./chunk-7SYJFI5E.js";
@@ -187,7 +187,7 @@ import "./chunk-BDCFYW34.js";
 import "./chunk-CP7OUC2Q.js";
 import {
   useModal
-} from "./chunk-OW62FLJ6.js";
+} from "./chunk-7T3JIGM7.js";
 
 // src/index.ts
 export * from "@dnd-kit/core";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.10.4-next-4e536c0",
+  "version": "0.10.4-next-10ee67c",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.10.4-next-4e536c0"
+    "@cerberus-design/styled-system": "0.10.4-next-10ee67c"
   },
   "publishConfig": {
     "access": "public"

package/src/hooks/useModal.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useRef, type RefObject } from 'react'
+import { useCallback, useMemo, useRef, useState, type RefObject } from 'react'
 
 /**
  * This module provides a hook for using a custom modal.
@@ -20,22 +20,36 @@ interface UseModalReturnValue {
    * Closes the modal.
    */
   close: () => void
+  /**
+   * Whether the modal is open based on the show and close methods.
+   */
+  isOpen: boolean
 }
 
 /**
- * Provides a hook for using a custom modal.
+ * Provides a hook for using a custom modal via the native dialog element
+ * methods.
+ *
+ * Cerberus modals use the native dialog element. This hook
+ * does not control the modal via React state but rather by calling the
+ * native dialog element's `showModal` and `close` methods.
+ *
  * @memberof module:Modal
- * @returns The modal hook.
+ * @see https://cerberus.digitalu.design/react/modal
+ * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
  */
 export function useModal(): UseModalReturnValue {
   const modalRef = useRef<HTMLDialogElement | null>(null)
+  const [isOpen, setIsOpen] = useState<boolean>(false)
 
   const show = useCallback(() => {
     modalRef.current?.showModal()
+    setIsOpen(true)
   }, [])
 
   const close = useCallback(() => {
     modalRef.current?.close()
+    setIsOpen(false)
   }, [])
 
   return useMemo(() => {
@@ -43,6 +57,7 @@ export function useModal(): UseModalReturnValue {
       modalRef,
       show,
       close,
+      isOpen,
     }
-  }, [modalRef, show, close])
+  }, [modalRef, show, close, isOpen])
 }

package/build/modern/chunk-OW62FLJ6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hooks/useModal.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useRef, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\ninterface UseModalReturnValue {\n  /**\n   * The ref for the modal.\n   */\n  modalRef: RefObject<HTMLDialogElement>\n  /**\n   * Shows the modal.\n   */\n  show: () => void\n  /**\n   * Closes the modal.\n   */\n  close: () => void\n}\n\n/**\n * Provides a hook for using a custom modal.\n * @memberof module:Modal\n * @returns The modal hook.\n */\nexport function useModal(): UseModalReturnValue {\n  const modalRef = useRef<HTMLDialogElement | null>(null)\n\n  const show = useCallback(() => {\n    modalRef.current?.showModal()\n  }, [])\n\n  const close = useCallback(() => {\n    modalRef.current?.close()\n  }, [])\n\n  return useMemo(() => {\n    return {\n      modalRef,\n      show,\n      close,\n    }\n  }, [modalRef, show, close])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,cAA8B;AA2BtD,SAAS,WAAgC;AAC9C,QAAM,WAAW,OAAiC,IAAI;AAEtD,QAAM,OAAO,YAAY,MAAM;AAC7B,aAAS,SAAS,UAAU;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,MAAM;AACnB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,KAAK,CAAC;AAC5B;","names":[]}