fix: close only the front window using the esc key

Author: JulianWielga

src/components/window/Window.tsx

@@ -12,10 +12,14 @@ export interface WindowProps {
 export const Window = forwardRef(({ data, contentGetter }: WindowProps, ref: RefObject<HTMLDivElement>): JSX.Element => {
   const { isResizable, isStatic, focusParent, id, order, shouldCloseOnEsc } = data;
 
-  const { focus: onFocus, close: onClose } = useWindowManager(id);
+  const { focus: onFocus, close: onClose, frontWindow } = useWindowManager(id);
   const [zoom, onToggleZoom] = useWindowZoom(data);
 
-  const onEscKey = useCallback(() => shouldCloseOnEsc && onClose(), [onClose, shouldCloseOnEsc]);
+  const onEscKey = useCallback(() => {
+    if (shouldCloseOnEsc && frontWindow === id) {
+      return onClose();
+    }
+  }, [frontWindow, id, onClose, shouldCloseOnEsc]);
 
   return (
     <WindowFrame

src/hooks/manager.ts

@@ -1,6 +1,6 @@
 import { useCallback, useContext, useMemo } from "react";
 import { WindowManagerContext } from "../context";
-import { closeWindow, focusWindow, getWindowsWithOrder, openWindow } from "../store";
+import { closeWindow, focusWindow, getOrder, getWindowsWithOrder, openWindow } from "../store";
 import { WindowId, WindowManagerState, WindowType } from "../types";
 import { ViewportContext, ViewportContextType } from "../ViewportContext";
 
@@ -43,6 +43,10 @@ export function useWindowManager<K extends number | string = any>(parent?: Windo
   );
 
   const windows = useMemo(() => getWindowsWithOrder(state), [state]);
+  const frontWindow = useMemo(() => {
+    const order = getOrder(state);
+    return order[order.length - 1];
+  }, [state]);
 
   const closeAll = useCallback(
     async (w = windows) => {
@@ -51,5 +55,5 @@ export function useWindowManager<K extends number | string = any>(parent?: Windo
     [close, windows],
   );
 
-  return { windows, open, focus, close, closeAll };
+  return { windows, open, focus, close, closeAll, frontWindow };
 }

src/store/selectors.ts

@@ -42,8 +42,7 @@ export const getTopmostModal = createSelector(getWindowsState, getWindowsById, (
 export const getWindowsWithOrder = createSelector(
   getWindows,
   getOrder,
-  getTopmostModal,
-  <K extends number | string = any>(windows: WindowType<K>[], order: WindowId[], topmostModal: WindowId): Array<WindowWithOrder<K>> =>
+  <K extends number | string = any>(windows: WindowType<K>[], order: WindowId[]): Array<WindowWithOrder<K>> =>
     windows.map((data) => ({
       ...data,
       order: order.findIndex((id) => data.id === id),