Split curtains code.

demo/DemoCurtain.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {useCurtain} from "../src/Components/Curtains/Curtains";
+import {useCurtain} from "../src/Components/Curtains/CurtainInstance";
 import {X} from "@phosphor-icons/react";
 
 /**

src/Components/Curtains/CurtainInstance.tsx

@@ -0,0 +1,79 @@
+import React, {useCallback, useContext, useMemo, useRef} from "react";
+import {CurtainUuidType, useCurtains} from "./Curtains";
+import {classes} from "../../Utils";
+
+/**
+ * Current curtain data and functions.
+ */
+export interface CurtainContextState
+{
+	/**
+	 * Curtain UUID.
+	 */
+	uuid: CurtainUuidType;
+
+	/**
+	 * Close the curtain.
+	 */
+	close: () => void;
+
+	/**
+	 * True if the curtain is closed (while transitioning out).
+	 */
+	closed: boolean;
+}
+
+/**
+ * Current curtain context.
+ */
+const CurtainContext = React.createContext<CurtainContextState>({
+	// Empty values.
+	uuid: "",
+	close: () => {},
+	closed: false,
+});
+
+/**
+ * Hook to access current curtain data and functions.
+ */
+export function useCurtain(): CurtainContextState
+{
+	return useContext(CurtainContext);
+}
+
+/**
+ * Component of an opened curtain instance.
+ */
+export function CurtainInstance({uuid, children}: React.PropsWithChildren<{
+	/**
+	 * Curtain UUID.
+	 */
+	uuid: string;
+}>)
+{
+	// Get close curtain function.
+	const {close, isClosed} = useCurtains();
+
+	// Initialize close curtain function.
+	const closeCurtain = useRef<() => void>();
+	closeCurtain.current = useCallback(() => {
+		// Close the current curtain.
+		close(uuid);
+	}, [uuid, close]);
+
+	// Initialize context state from action functions.
+	const contextState = useMemo(() => ({
+		uuid: uuid,
+		close: () => closeCurtain.current(),
+		closed: isClosed(uuid),
+	}), [uuid, closeCurtain, isClosed]);
+
+	return (
+		<CurtainContext.Provider value={contextState}>
+			<div className={classes("curtain", isClosed(uuid) ? "closed" : undefined)}>
+				{children}
+			</div>
+		</CurtainContext.Provider>
+	);
+}
+

src/Components/Curtains/Curtains.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from "react";
 import ReactDOM from "react-dom";
 import {v4 as uuidv4} from "uuid";
-import {classes} from "../../Utils";
+import {CurtainInstance} from "./CurtainInstance";
 
 /**
  * Curtain UUID type.
@@ -203,80 +203,3 @@ function CurtainsPortal({curtains}: {
 		</CurtainInstance>
 	)), document.body);
 }
-
-
-
-/**
- * Current curtain data and functions.
- */
-export interface CurtainContextState
-{
-	/**
-	 * Curtain UUID.
-	 */
-	uuid: CurtainUuidType;
-
-	/**
-	 * Close the curtain.
-	 */
-	close: () => void;
-
-	/**
-	 * True if the curtain is closed (while transitioning out).
-	 */
-	closed: boolean;
-}
-
-/**
- * Current curtain context.
- */
-const CurtainContext = React.createContext<CurtainContextState>({
-	// Empty values.
-	uuid: "",
-	close: () => {},
-	closed: false,
-});
-
-/**
- * Hook to access current curtain data and functions.
- */
-export function useCurtain(): CurtainContextState
-{
-	return useContext(CurtainContext);
-}
-
-/**
- * Component of an opened curtain instance.
- */
-function CurtainInstance({uuid, children}: React.PropsWithChildren<{
-	/**
-	 * Curtain UUID.
-	 */
-	uuid: string;
-}>)
-{
-	// Get close curtain function.
-	const {close, isClosed} = useCurtains();
-
-	// Initialize close curtain function.
-	const closeCurtain = useRef<() => void>();
-	closeCurtain.current = useCallback(() => {
-		// Close the current curtain.
-		close(uuid);
-	}, [uuid, close]);
-
-	// Initialize context state from action functions.
-	const contextState = useMemo(() => ({
-		uuid: uuid,
-		close: () => closeCurtain.current(),
-		closed: isClosed(uuid),
-	}), [uuid, closeCurtain, isClosed]);
-
-	return (
-		<CurtainContext.Provider value={contextState}>
-			<div className={classes("curtain", isClosed(uuid) ? "closed" : undefined)}>
-				{children}
-			</div>
-		</CurtainContext.Provider>
-	);
-}

src/Components/Modals/Modals.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import {X} from "@phosphor-icons/react";
-import {useCurtains, useCurtain, useCallableCurtain} from "../Curtains/Curtains";
+import {useCurtains, useCallableCurtain} from "../Curtains/Curtains";
 import {classes, Modify} from "../../Utils";
 import {ModalType, ModalTypeIcon} from "./ModalsTypes";
+import {useCurtain} from "../Curtains/CurtainInstance";
 
 /**
  * More natural name of useCurtains for modals.

src/Components/Subapps/Subapps.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import {X} from "@phosphor-icons/react";
-import {useCurtain, useCallableCurtain, useCurtains} from "../Curtains/Curtains";
+import {useCallableCurtain, useCurtains} from "../Curtains/Curtains";
 import {classes, Modify} from "../../Utils";
+import {useCurtain} from "../Curtains/CurtainInstance";
 
 /**
  * More natural name of useCurtains for subapps.