Refactor the ContextMenu component a bit.

Author: miyukoc

src/app.css

@@ -233,26 +233,41 @@ body {
     }
 }
 
-.popover-menu-backdrop {
+.popover {
+    background: var(--color-popover-background);
+    border: 1px solid var(--color-border);
+    box-shadow:
+        rgb(0 0 0 / 0.25) 0 2px 4px,
+        rgb(0 0 0 / 0.125) 0 4px 8px;
+
+    &.fixed-positioning {
+        position: fixed;
+        width: max-content;
+    }
+
+    &.animate-enter {
+        animation: 0.1s ease fade-in;
+    }
+}
+
+.popover-backdrop {
     position: fixed;
-    z-index: 1000;
     inset: 0;
 }
 
-.popover-menu {
-    position: fixed;
-    z-index: 1001;
+.popover-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.menu-popover {
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    width: max-content;
     background: var(--color-menu-background);
-    border: 1px solid var(--color-border);
-    box-shadow:
-        rgb(0 0 0 / 0.25) 0 2px 4px,
-        rgb(0 0 0 / 0.125) 0 4px 8px;
     overflow: auto;
-    animation: 0.1s ease fade-in;
 
     --color-button-disabled-background: var(--color-button-background);
 

src/app.tsx

@@ -12,7 +12,7 @@ import { GlasgowFileSystem, type FileTreeNode } from './filesystem';
 import { PanelContainer } from './components/panel';
 import { TreeView } from './components/tree-view';
 
-import { onlyTruthy } from './helpers/truthy-filter';
+import { onlyTruthy } from './helpers/comparison';
 import { joinPath } from './helpers/path';
 
 import { GLASGOW_WHEEL_URL, HOME_DIRECTORY } from './config';

src/components/context-menu.tsx

@@ -1,18 +1,22 @@
-import { createComputed, createEffect, createMemo, createSignal, For, on, type JSX } from 'solid-js';
+import { createEffect, createSelector, createSignal, For, type JSX } from 'solid-js';
+import { Portal } from 'solid-js/web';
 import { computePosition, flip, shift, size } from '@floating-ui/dom';
 
 import { modulo } from '../helpers/modulo';
 import { cls } from '../helpers/class-names';
+import { equals } from '../helpers/comparison';
 
-export type TwoDim = [number, number];
+export type Point2D = [number, number];
 
 interface FocusTrapProps {
     returnFocus: () => void;
     children: JSX.Element;
 }
 
 const FocusTrap = (props: FocusTrapProps) => {
-    const trap = () => <div tabIndex={0} style={{ position: 'absolute' }} onFocus={props.returnFocus} />;
+    const trap = () => (
+        <div tabIndex={0} style={{ position: 'absolute' }} onFocus={props.returnFocus} />
+    );
 
     return (
         <>
@@ -25,92 +29,82 @@ const FocusTrap = (props: FocusTrapProps) => {
 
 interface ContextMenuItem {
     name: string;
-    action: (event: Event) => void;
+    action: () => void;
 }
 
 interface ContextMenuProps {
-    position: TwoDim;
+    anchor: Point2D;
     items: ContextMenuItem[];
     onCancel: () => void;
 }
 
 export const ContextMenu = (props: ContextMenuProps) => {
     let elementRef: HTMLDivElement;
+    let listElement: HTMLUListElement;
 
-    const [constrainedPosition, setConstrainedPosition] = createSignal<TwoDim>([0, 0]);
-    const [maxSize, setMaxSize] = createSignal<TwoDim>([0, 0]);
-    const needToRecalculatePosition = createMemo(on(() => props.position, () => ({ value: true })));
-    const [currentIndex, setCurrentIndex] = createSignal<number | null>(null);
-    const itemElements: HTMLElement[] = [];
+    const [constrainedPosition, setConstrainedPosition] = createSignal<Point2D>([0, 0]);
+    const [maxSize, setMaxSize] = createSignal<Point2D>([0, 0]);
+    const [lastAnchorPoint, setLastAnchorPoint] = createSignal<Point2D | null>(null);
 
-    createComputed(() => {
-        props.items;
-        setCurrentIndex(null);
-    });
+    const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null);
+    const isItemSelected = createSelector(selectedIndex);
 
     const handleBackdropClick = (event: MouseEvent) => {
         event.preventDefault();
         props.onCancel();
     };
 
     const handleMouseOut = (event: MouseEvent) => {
-        setCurrentIndex(null);
+        setSelectedIndex(null);
     };
 
     const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === 'Escape') {
             props.onCancel();
             event.stopPropagation();
         } else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-            let direction = event.key === 'ArrowDown' ? 1 : -1;
-            let newIndex;
-            if (currentIndex() !== null) {
-                newIndex = modulo(currentIndex()! + direction, props.items.length);
-            } else {
-                newIndex = direction === 1 ? 0 : props.items.length - 1;
-            }
-            setCurrentIndex(newIndex);
+            let delta = event.key === 'ArrowDown' ? 1 : -1;
+            let oldIndex = selectedIndex() ?? (delta > 0 ? -1 : props.items.length);
+            let newIndex = modulo(oldIndex + delta, props.items.length);
+            setSelectedIndex(newIndex);
             event.stopPropagation();
         }
     };
 
     const handleItemClick = (item: ContextMenuItem) => (event: MouseEvent) => {
-        item.action(event);
+        item.action();
         props.onCancel();
     };
 
     const handleItemKeyDown = (item: ContextMenuItem) => (event: KeyboardEvent) => {
         if (event.key === 'Enter' || event.key === ' ') {
-            item.action(event);
+            item.action();
             props.onCancel();
         }
     };
 
     const handleItemHover = (idx: number) => (event: MouseEvent) => {
-        setCurrentIndex(idx);
+        setSelectedIndex(idx);
     };
 
     createEffect(() => {
-        if (currentIndex() !== null) {
-            itemElements[currentIndex()!]?.focus();
-        } else {
-            elementRef.focus();
-        }
+        ((listElement.children[selectedIndex() ?? -1] ?? elementRef) as HTMLElement).focus();
     });
 
     createEffect(() => {
-        if (needToRecalculatePosition().value && elementRef) {
+        let anchorPoint = props.anchor;
+        if (!equals(lastAnchorPoint(), anchorPoint)) {
             const virtualReferenceElement = {
                 getBoundingClientRect() {
                     return {
                         width: 0,
                         height: 0,
-                        x: props.position[0],
-                        y: props.position[1],
-                        top: props.position[1],
-                        left: props.position[0],
-                        right: props.position[0],
-                        bottom: props.position[1],
+                        x: anchorPoint[0],
+                        y: anchorPoint[1],
+                        top: anchorPoint[1],
+                        left: anchorPoint[0],
+                        right: anchorPoint[0],
+                        bottom: anchorPoint[1],
                     };
                 },
             };
@@ -120,9 +114,7 @@ export const ContextMenu = (props: ContextMenuProps) => {
                 availableHeight: number;
             }>();
 
-            // Will be overridden on the next render
-            elementRef.style.maxWidth = '';
-            elementRef.style.maxHeight = '';
+            setMaxSize([0, 0]);
 
             computePosition(virtualReferenceElement, elementRef, {
                 placement: 'bottom-start',
@@ -142,54 +134,53 @@ export const ContextMenu = (props: ContextMenuProps) => {
             }).then(async (result) => {
                 const size = await sizeCalculation.promise;
 
-                setConstrainedPosition([result.x, result.y]);
-                setMaxSize([size.availableWidth, size.availableHeight]);
-
-                needToRecalculatePosition().value = false;
+                if (equals(props.anchor, anchorPoint)) {
+                    setConstrainedPosition([result.x, result.y]);
+                    setMaxSize([size.availableWidth, size.availableHeight]);
+                    setLastAnchorPoint(anchorPoint);
+                }
             });
         }
     });
 
     return (
-        <FocusTrap returnFocus={() => elementRef.focus()}>
-            <div
-                class="popover-menu-backdrop"
-                onClick={handleBackdropClick}
-                onMouseDown={handleBackdropClick}
-            />
-            <div
-                ref={(el) => elementRef = el}
-                class="popover-menu"
-                style={{
-                    'left': `${constrainedPosition()[0]}px`,
-                    'top': `${constrainedPosition()[1]}px`,
-                    'max-width': maxSize()[0] > 0 ? `${maxSize()[0]}px` : '',
-                    'max-height': maxSize()[1] > 0 ? `${maxSize()[1]}px` : '',
-                }}
-                tabIndex={0}
-                onMouseOut={handleMouseOut}
-                onKeyDown={handleKeyDown}
-            >
-                <ul class="menu-list">
-                    <For each={props.items}>
-                        {(item, idx) => (
-                            <li
-                                ref={(element) => {
-                                    if (element) itemElements[idx()] = element;
-                                    else delete itemElements[idx()];
-                                }}
-                                class={cls('menu-list-item', currentIndex() === idx() && 'focused')}
-                                tabIndex={currentIndex() === idx() ? 0 : -1}
-                                onClick={handleItemClick(item)}
-                                onKeyDown={handleItemKeyDown(item)}
-                                onMouseEnter={handleItemHover(idx())}
-                            >
-                                {item.name}
-                            </li>
-                        )}
-                    </For>
-                </ul>
-            </div>
-        </FocusTrap>
+        <Portal>
+            <FocusTrap returnFocus={() => elementRef.focus()}>
+                <div
+                    class="popover-backdrop"
+                    onClick={handleBackdropClick}
+                    onMouseDown={handleBackdropClick}
+                />
+                <div
+                    ref={(el) => elementRef = el}
+                    class="menu-popover popover fixed-positioning animate-enter"
+                    style={{
+                        'left': `${constrainedPosition()[0]}px`,
+                        'top': `${constrainedPosition()[1]}px`,
+                        'max-width': maxSize()[0] > 0 ? `${maxSize()[0]}px` : '',
+                        'max-height': maxSize()[1] > 0 ? `${maxSize()[1]}px` : '',
+                    }}
+                    tabIndex={0}
+                    onMouseOut={handleMouseOut}
+                    onKeyDown={handleKeyDown}
+                >
+                    <ul ref={(el) => listElement = el} class="menu-list">
+                        <For each={props.items}>
+                            {(item, idx) => (
+                                <li
+                                    class={cls('menu-list-item', isItemSelected(idx()) && 'focused')}
+                                    tabIndex={isItemSelected(idx()) ? 0 : -1}
+                                    onClick={handleItemClick(item)}
+                                    onKeyDown={handleItemKeyDown(item)}
+                                    onMouseEnter={handleItemHover(idx())}
+                                >
+                                    {item.name}
+                                </li>
+                            )}
+                        </For>
+                    </ul>
+                </div>
+            </FocusTrap>
+        </Portal>
     );
 };

src/components/panel.tsx

@@ -1,6 +1,6 @@
 import { createComputed, createSignal, For, onCleanup, Show, type JSX } from 'solid-js';
 
-import { ContextMenu, type TwoDim } from './context-menu';
+import { ContextMenu, type Point2D } from './context-menu';
 import { Icon } from './icon';
 import { IconMore } from './icon-more';
 
@@ -39,7 +39,7 @@ interface PanelAction {
     iconName?: string;
     iconOnly?: boolean;
     disabled: boolean;
-    handleAction: (event: Event) => void;
+    handleAction: () => void;
 }
 
 interface PanelActionsProps {
@@ -48,7 +48,7 @@ interface PanelActionsProps {
 
 const PanelActions = (props: PanelActionsProps) => {
     const [numberOfVisibleActions, setNumberOfVisibleActions] = createSignal(props.actions?.length ?? 0);
-    const [actionsMenuOpenAtPosition, setActionsMenuOpenAtPosition] = createSignal<TwoDim | null>(null);
+    const [actionsMenuOpenAtPosition, setActionsMenuOpenAtPosition] = createSignal<Point2D | null>(null);
 
     const visibleActionsWrapperRef = useResizeObserverRef((entry: ResizeObserverEntry) => {
         const wrapper = entry.target as HTMLElement;
@@ -116,10 +116,10 @@ const PanelActions = (props: PanelActionsProps) => {
             </div>
             {(props.actions && actionsMenuOpenAtPosition()) ? (
                 <ContextMenu
-                    position={actionsMenuOpenAtPosition()!}
+                    anchor={actionsMenuOpenAtPosition()!}
                     items={props.actions.slice(numberOfVisibleActions()).map((action) => ({
                         name: action.name,
-                        action: (event) => action.handleAction(event),
+                        action: () => action.handleAction(),
                     }))}
                     onCancel={() => setActionsMenuOpenAtPosition(null)}
                 />
@@ -213,7 +213,7 @@ export const PanelContainer = (props: PanelContainerProps) => {
                                         <span>{panel.name}</span>
                                     </h2>
                                     <Show when={panel.actions && panel.actions.length > 0}>
-                                        {(_) => <PanelActions actions={panel.actions} />}
+                                        <PanelActions actions={panel.actions} />
                                     </Show>
                                 </header>
                             </Show>