Merge fixes

Author: zackkrida

mathesar_ui/src/App.svelte

@@ -130,8 +130,8 @@
 
     color: var(--color-fg-base);
 
-    --modal-z-index: 1;
-    --dropdown-z-index: 1;
+    --modal-z-index: 2;
+    --dropdown-z-index: 2;
     --cell-errors-z-index: 1;
     --new-item-highlighter-z-index: 1;
     --toast-z-index: 3;

mathesar_ui/src/AppContext.svelte

@@ -20,7 +20,12 @@
     rowSeekerContext,
   } from '@mathesar/systems/row-seeker/AttachableRowSeekerController';
   import type { CommonData } from '@mathesar/utils/preloadData';
-  import { Confirmation, ToastPresenter } from '@mathesar-component-library';
+  import {
+    Confirmation,
+    ContextMenu,
+    ContextMenuController,
+    ToastPresenter,
+  } from '@mathesar-component-library';
 
   import ControlledFileDetailDropdown from './components/file-attachments/file-detail-dropdown/ControlledFileDetailDropdown.svelte';
   import {
@@ -35,6 +40,7 @@
     LightboxController,
     lightboxContext,
   } from './components/file-attachments/lightbox/LightboxController';
+  import { contextMenuContext } from './contexts/contextMenuContext';
 
   export let commonData: CommonData;
 
@@ -77,6 +83,9 @@
   const modalFileAttachmentUploader = new ModalFileAttachmentUploadController();
   modalFileAttachmentUploadContext.set(modalFileAttachmentUploader);
 
+  const contextMenu = new ContextMenuController();
+  contextMenuContext.set(contextMenu);
+
   const clipboardHandlerStore = setNewClipboardHandlerStoreInContext();
   $: clipboardHandler = $clipboardHandlerStore;
 
@@ -123,5 +132,6 @@
 <ControlledLightbox controller={lightboxController} />
 <ControlledFileDetailDropdown controller={fileDetailDropdownController} />
 <ModalFileAttachmentUploader controller={modalFileAttachmentUploader} />
+<ContextMenu controller={contextMenu} />
 
 <slot />

mathesar_ui/src/component-library/common/actions/clickOffBounds.ts

@@ -1,10 +1,11 @@
+import { some } from 'iter-tools';
 import type { ActionReturn } from 'svelte/action';
 import { type Readable, get } from 'svelte/store';
 
 type CallbackFn = (e: Event) => void;
 interface Options {
   callback: CallbackFn;
-  references?: Readable<(HTMLElement | undefined)[]>;
+  references?: Readable<Iterable<HTMLElement | undefined>>;
 }
 
 export default function clickOffBounds(
@@ -13,17 +14,21 @@ export default function clickOffBounds(
 ): ActionReturn {
   let { callback, references } = options;
 
-  function outOfBoundsListener(event: Event) {
-    const isWithinReferenceElement =
-      references &&
-      get(references)?.some(
-        (reference) => reference?.contains?.(event.target as Node) ?? false,
-      );
-    if (!isWithinReferenceElement && !node.contains(event.target as Node)) {
-      callback(event);
+  function* getReferenceElements(): Generator<HTMLElement> {
+    if (!references) return;
+    for (const element of get(references)) {
+      if (!element) continue;
+      yield element;
     }
   }
 
+  function outOfBoundsListener(event: Event) {
+    const target = event.target as Node;
+    if (some((ref) => ref.contains(target), getReferenceElements())) return;
+    if (node.contains(target)) return;
+    callback(event);
+  }
+
   /**
    * When the browser supports pointer events, we use the pointerdown event
    * which is fired for all mouse buttons and touches. However, older Safari

mathesar_ui/src/component-library/common/actions/focusTrap.ts

@@ -1,94 +1,46 @@
 import { tick } from 'svelte';
 import type { ActionReturn } from 'svelte/action';
 
-import { focusElement, hasProperty } from '../utils';
-
-function getTabIndex(element: unknown): number | undefined {
-  return hasProperty(element, 'tabIndex') &&
-    typeof element.tabIndex === 'number'
-    ? element.tabIndex
-    : undefined;
-}
-
-/**
- * Yields focusable elements within a container. The elements are yielded in DOM
- * order (depth first, pre-order).
- */
-function* getFocusableElementsInDomOrder(
-  container: Element,
-): Generator<{ element: Element; tabIndex: number }> {
-  // Cast a wide net with selector for potentially focusable elements
-  const selectors = [
-    'input',
-    'button',
-    'select',
-    'textarea',
-    'a[href]',
-    'area[href]',
-    'iframe',
-    'object',
-    'embed',
-    '[tabindex]',
-    '[contenteditable="true"]',
-    '[contenteditable=""]',
-    'audio[controls]',
-    'video[controls]',
-    'details',
-    'summary',
-  ];
-  const potentiallyFocusable = container.querySelectorAll(selectors.join(', '));
-
-  for (const element of potentiallyFocusable) {
-    // Narrow the net by checking additional properties of each element...
-
-    const tabIndex = getTabIndex(element);
-
-    // Filter out elements which don't have a tabIndex property at all
-    if (tabIndex === undefined) continue;
-
-    // Filter out elements with negative tabIndex, e.g. div
-    if (tabIndex < 0) continue;
-
-    // Filter out disabled elements
-    if (hasProperty(element, 'disabled') && element.disabled) continue;
-
-    // Filter out elements that are not visible
-    const { display, visibility } = getComputedStyle(element);
-    if (display === 'none' || visibility === 'hidden') continue;
-
-    // Filter out hidden input elements
-    if (hasProperty(element, 'type') && element.type === 'hidden') continue;
-
-    // Yield most elements with a valid tabIndex
-    yield { element, tabIndex };
-  }
+import { focusElement, getFocusableDescendants, hasMethod } from '../utils';
+
+interface FocusTrapOptions {
+  /**
+   * Automatically focus the first focusable element when opening. True by
+   * default.
+   */
+  autoFocus?: boolean;
+  /**
+   * Automatically re-focus the last-focused element when closing. True by
+   * default.
+   */
+  autoRestore?: boolean;
 }
 
-/**
- * Returns the focusable elements within a container. The elements are returned
- * sorted in tab order (i.e. the order of their tabIndex values primarily, and
- * then in DOM when their tabIndex values are equal).
- */
-function getFocusableElements(container: Element): Element[] {
-  const elements = Array.from(getFocusableElementsInDomOrder(container));
-
-  // Sort elements by tabIndex only, assuming stable sort keeps DOM order
-  elements.sort((a, b) => a.tabIndex - b.tabIndex);
+export default function focusTrap(
+  container: HTMLElement,
+  options: FocusTrapOptions = {},
+): ActionReturn {
+  let previouslyFocusedElement: Element | null;
 
-  return elements.map(({ element }) => element);
-}
+  const fullOptions = {
+    autoFocus: true,
+    autoRestore: true,
+    ...options,
+  };
 
-export default function focusTrap(container: HTMLElement): ActionReturn {
   function handleKeyDown(event: KeyboardEvent) {
     if (event.key !== 'Tab') return;
     if (event.altKey || event.ctrlKey || event.metaKey) return;
 
+    event.preventDefault();
+
     // We are re-computing the list of focusable elements any time Tab or
     // Shift+Tab is pressed. This is a somewhat expensive operation. But it's
     // necessary because the list of focusable elements can change as state
     // changes (e.g. elements being added/removed from the DOM or state like
     // "disabled" being toggled).
-    const elements = getFocusableElements(container);
+    const elements = getFocusableDescendants(container);
+    if (!elements.length) return;
 
     function wrap(index: number): number {
       return ((index % elements.length) + elements.length) % elements.length;
@@ -100,39 +52,56 @@ export default function focusTrap(container: HTMLElement): ActionReturn {
     const targetElement = elements.at(targetIndex);
     if (!targetElement) return;
 
-    event.preventDefault();
     focusElement(targetElement);
   }
 
-  async function autoFocusFirstElement() {
-    await tick(); // Wait, in case Svelte has more to render (e.g. children)
-    const firstElement = getFocusableElements(container).at(0);
-    if (firstElement) {
-      /*
-       * When the element is immediately focused, keydown events seem to get triggered
-       * on the element. This results in cases like lightboxes closing immediately after
-       * being opened when opened via an 'enter' keydown event.
-       *
-       * My hunch is that this bug has to do something with the way transitions/animations
-       * are executed by svelte/transition.
-       *
-       * Moving the focus task to a macrotask such as setTimeout seems to prevent this
-       * bug from occurring.
-       *
-       * The exact root cause / race condition is not entirely figured out.
-       */
-      setTimeout(() => {
-        focusElement(firstElement);
-      }, 10);
+  async function initializeFocus() {
+    // Wait, in case Svelte has more to render (e.g. children) or in case custom
+    // imperative focus logic has been applied (e.g. focusing the first cell
+    // when clicking on a column header)
+    await tick();
+
+    previouslyFocusedElement = document.activeElement;
+
+    if (fullOptions.autoFocus) {
+      const firstElement = getFocusableDescendants(container).at(0);
+      if (firstElement) {
+        /*
+         * When the element is immediately focused, keydown events seem to get
+         * triggered on the element. This results in cases like the lightbox
+         * closing immediately after being opened when opened via an 'enter'
+         * keydown event.
+         *
+         * My hunch is that this bug has to do something with the way
+         * transitions/animations are executed by svelte/transition.
+         *
+         * Moving the focus task to a macrotask such as setTimeout seems to
+         * prevent this bug from occurring.
+         *
+         * The exact root cause / race condition is not entirely figured out.
+         */
+        setTimeout(() => {
+          focusElement(firstElement);
+        }, 10);
+      }
+    } else if (
+      previouslyFocusedElement &&
+      hasMethod(previouslyFocusedElement, 'blur')
+    ) {
+      previouslyFocusedElement.blur();
     }
   }
 
-  container.addEventListener('keydown', handleKeyDown);
-  void autoFocusFirstElement();
+  void initializeFocus();
+
+  window.addEventListener('keydown', handleKeyDown);
 
   return {
     destroy() {
-      container.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keydown', handleKeyDown);
+      if (fullOptions.autoRestore) {
+        focusElement(previouslyFocusedElement);
+      }
     },
   };
 }

mathesar_ui/src/component-library/common/actions/popper.ts

@@ -8,6 +8,19 @@ import type {
 } from '@popperjs/core/lib/types';
 import type { ActionReturn } from 'svelte/action';
 
+interface CustomModifierOptions {
+  /**
+   * By default, we ensure that the popper content width is no smaller than the
+   * width of its trigger element — unless the trigger element is wider than
+   * 250px, in which case it ensures that the popper content width is no smaller
+   * than 250px.
+   *
+   * This option controls that threshold. Set it to 0 if you want to disable
+   * this min-width behavior, allowing the popper content to be quite narrow.
+   */
+  matchTriggerWidthPxUpTo?: number;
+}
+
 interface Parameters {
   reference?: VirtualElement;
   options?: Partial<Options>;
@@ -16,6 +29,7 @@ interface Parameters {
    * resizes.
    */
   autoReposition?: boolean;
+  customModifierOptions?: CustomModifierOptions;
 }
 
 /**
@@ -25,7 +39,11 @@ interface Parameters {
  */
 function buildModifiers(
   suppliedModifiers: Options['modifiers'],
+  modifierOptions: CustomModifierOptions = {},
 ): Options['modifiers'] {
+  const matchTriggerWidthPxUpTo =
+    modifierOptions.matchTriggerWidthPxUpTo ?? 250;
+
   const defaultModifiers: Options['modifiers'] = [
     {
       name: 'flip',
@@ -50,14 +68,16 @@ function buildModifiers(
       phase: 'beforeWrite',
       requires: ['computeStyles'],
       fn: (obj: ModifierArguments<Record<string, unknown>>): void => {
-        // TODO: Make the default value configurable
-        const widthToSet = Math.min(250, obj.state.rects.reference.width);
+        const widthToSet = Math.min(
+          matchTriggerWidthPxUpTo,
+          obj.state.rects.reference.width,
+        );
         // eslint-disable-next-line no-param-reassign
         obj.state.styles.popper.minWidth = `${widthToSet}px`;
       },
       effect: (obj: ModifierArguments<Record<string, unknown>>): void => {
         const width = (obj.state.elements.reference as HTMLElement).offsetWidth;
-        const widthToSet = Math.min(250, width);
+        const widthToSet = Math.min(matchTriggerWidthPxUpTo, width);
         // eslint-disable-next-line no-param-reassign
         obj.state.elements.popper.style.minWidth = `${widthToSet}px`;
       },
@@ -91,7 +111,10 @@ export default function popper(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     popperInstance = createPopper(reference, node, {
       placement: options?.placement || 'bottom-start',
-      modifiers: buildModifiers(options?.modifiers ?? []),
+      modifiers: buildModifiers(
+        options?.modifiers ?? [],
+        actionOpts.customModifierOptions,
+      ),
     }) as Instance;
 
     if (autoReposition) {
@@ -140,3 +163,24 @@ export default function popper(
     destroy,
   };
 }
+
+export function getVirtualReferenceElement(pointerPosition: {
+  clientX: number;
+  clientY: number;
+}) {
+  const x = pointerPosition.clientX;
+  const y = pointerPosition.clientY;
+  return {
+    getBoundingClientRect: () => ({
+      width: 0,
+      height: 0,
+      x,
+      y,
+      top: y,
+      right: x,
+      bottom: y,
+      left: x,
+      toJSON: () => ({ x, y }),
+    }),
+  };
+}