Record selector bug fixes and UX improvements

mathesar_ui/src/App.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
   import { ToastPresenter, Confirmation } from '@mathesar-component-library';
   import { toast } from '@mathesar/stores/toast';
-  import { setNewRecordSelectorControllerInContext } from '@mathesar/systems/record-selector/RecordSelectorController';
+  import {
+    RecordSelectorController,
+    setRecordSelectorControllerInContext,
+  } from '@mathesar/systems/record-selector/RecordSelectorController';
   import { confirmationController } from '@mathesar/stores/confirmation';
   import { modal } from './stores/modal';
   import ModalRecordSelector from './systems/record-selector/ModalRecordSelector.svelte';
   import RootRoute from './routes/RootRoute.svelte';
 
   const recordSelectorModal = modal.spawnModalController();
-  const recordSelectorController = setNewRecordSelectorControllerInContext({
+  const recordSelectorController = new RecordSelectorController({
     onOpen: () => recordSelectorModal.open(),
     onClose: () => recordSelectorModal.close(),
     nestingLevel: 0,
   });
+  setRecordSelectorControllerInContext(recordSelectorController);
 </script>
 
 <ToastPresenter entries={toast.entries} />
@@ -96,8 +100,6 @@
     --border-radius-s: 0.142rem; //2px
     --border-radius-m: 0.285rem; //4px
     --border-radius-l: 0.571rem; //8px
-    --modal-z-index: 50;
-    --modal-record-selector-z-index: 50;
   }
 
   body {
@@ -145,6 +147,11 @@
     --header-height: 4.285rem;
 
     color: var(--slate-400);
+
+    --modal-z-index: 1;
+    --dropdown-z-index: 1;
+    --cell-errors-z-index: 1;
+    --toast-z-index: 2;
   }
 
   h1 {
@@ -166,6 +173,7 @@
     font-size: inherit;
     font-weight: inherit;
     text-align: inherit;
+    text-decoration: inherit;
     margin: 0;
     padding: 0;
   }

mathesar_ui/src/component-library/button/Button.scss

@@ -1,4 +1,4 @@
-button.btn {
+.btn {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
@@ -39,7 +39,8 @@ button.btn {
     color: var(--white);
 
     &:not(:disabled) {
-      &:hover {
+      &:hover,
+      &.hover {
         background: var(--brand-600);
         border-color: var(--brand-600);
       }
@@ -56,7 +57,8 @@ button.btn {
     border-color: var(--slate-100);
 
     &:not(:disabled) {
-      &:hover {
+      &:hover,
+      &.hover {
         background: var(--slate-300);
         border-color: var(--slate-300);
       }
@@ -85,12 +87,14 @@ button.btn {
   &.btn-default,
   &.btn-plain {
     &:not(:disabled) {
-      &:hover {
+      &:hover,
+      &.hover {
         background: #f3f4f5;
       }
 
       &:active,
-      &:focus {
+      &:focus,
+      &.focus {
         box-shadow: 0 0 0 2px #2087e633 !important;
       }
 

mathesar_ui/src/component-library/date-time-picker/DateTimePicker.scss

@@ -47,6 +47,7 @@
   display: -ms-flexbox;
   display: flex;
   position: relative;
+  isolation: isolate;
 }
 .flatpickr-months .flatpickr-month {
   background: transparent;

mathesar_ui/src/component-library/dropdown/AccompanyingElements.ts

@@ -28,13 +28,18 @@ export class AccompanyingElements implements Readable<Set<HTMLElement>> {
     this.parent = parent;
   }
 
-  add(el: HTMLElement): void {
+  /**
+   * @returns a function to remove the element, which should be called to avoid
+   * memory leaks
+   */
+  add(el: HTMLElement): () => void {
     this.elements.update((elements) => {
       const s = new Set(elements);
       s.add(el);
       return s;
     });
     this.parent?.add(el);
+    return () => this.delete(el);
   }
 
   delete(el: HTMLElement): void {

mathesar_ui/src/component-library/dropdown/Dropdown.scss

@@ -35,7 +35,7 @@ button.dropdown.trigger {
     rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
   border-radius: var(--border-radius-l);
   background: #fff;
-  z-index: 100;
+  z-index: var(--dropdown-z-index, 100);
   max-height: calc(100vh - 5em);
   overflow: auto;
 

mathesar_ui/src/component-library/dropdown/index.ts

@@ -1,2 +1,3 @@
 export { default as Dropdown } from './Dropdown.svelte';
 export { default as AttachableDropdown } from './AttachableDropdown.svelte';
+export * from './AccompanyingElements';

mathesar_ui/src/component-library/index.ts

@@ -22,7 +22,6 @@ export { default as Help } from './help/Help.svelte';
 export { default as Icon } from './icon/Icon.svelte';
 export { InputGroup, InputGroupText } from './input-group';
 export { default as LabeledInput } from './labeled-input/LabeledInput.svelte';
-export { default as MatchHighlighter } from './match-highlighter/MatchHighlighter.svelte';
 export {
   NumberInput,
   StringifiedNumberInput,
@@ -43,7 +42,6 @@ export { default as TextInput } from './text-input/TextInput.svelte';
 export { default as TextInputWithPrefix } from './text-input/TextInputWithPrefix.svelte';
 
 // Compound Components (Ordered)
-export { AttachableDropdown, Dropdown } from './dropdown';
 export { DatePicker, InlineDateTimePicker } from './date-time-picker';
 export { default as DropdownMenu } from './dropdown-menu/DropdownMenu.svelte';
 export { default as DataTypeBasedInput } from './data-type-based-input/DataTypeBasedInput.svelte';
@@ -60,6 +58,8 @@ export { default as Window } from './window/Window.svelte';
 // Systems
 export * from './label';
 export * from './confirmation';
+export * from './dropdown';
+export * from './match-highlighter';
 export * from './menu';
 export * from './modal';
 export * from './toast';

mathesar_ui/src/component-library/input-group/InputGroup.scss

@@ -3,6 +3,7 @@
   display: flex;
   flex-wrap: nowrap;
   align-items: stretch;
+  isolation: isolate;
 
   .input-group-text {
     display: flex;
@@ -24,7 +25,7 @@
   .input-element,
   button {
     &:focus {
-      z-index: 10;
+      z-index: 1;
     }
   }
 

mathesar_ui/src/component-library/match-highlighter/MatchHighlighter.svelte

@@ -1,20 +1,13 @@
 <script lang="ts">
   import { splitMatchParts } from './matchHighlighterUtils';
-  import Match from './Match.svelte';
+  import type Match from './Match.svelte';
+  import PrecomputedMatchHighlighter from './PrecomputedMatchHighlighter.svelte';
 
   export let text: string;
   export let substring = '';
-  export let matchComponent = Match;
+  export let matchComponent: typeof Match | undefined = undefined;
 
   $: matchParts = splitMatchParts(text, substring);
 </script>
 
-<span class="match-highlighter">
-  {#each matchParts as part}
-    {#if part.isMatch}
-      <svelte:component this={matchComponent}>{part.text}</svelte:component>
-    {:else}
-      {part.text}
-    {/if}
-  {/each}
-</span>
+<PrecomputedMatchHighlighter {matchParts} {matchComponent} />

mathesar_ui/src/component-library/match-highlighter/PrecomputedMatchHighlighter.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Match from './Match.svelte';
+  import type { MatchPart } from './matchHighlighterTypes';
+
+  export let matchParts: MatchPart[];
+  export let matchComponent: typeof Match | undefined = undefined;
+
+  /**
+   * This line is only necessary because I couldn't figure out how to appease
+   * TypeScript with the `matchComponent` prop.
+   */
+  $: match = matchComponent ?? Match;
+</script>
+
+<span class="match-highlighter">
+  {#each matchParts as part}
+    {#if part.isMatch}
+      <svelte:component this={match}>{part.text}</svelte:component>
+    {:else}
+      {part.text}
+    {/if}
+  {/each}
+</span>

mathesar_ui/src/component-library/match-highlighter/index.ts

@@ -0,0 +1,6 @@
+export { default as MatchHighlighter } from './MatchHighlighter.svelte';
+export { default as PrecomputedMatchHighlighter } from './PrecomputedMatchHighlighter.svelte';
+export {
+  splitMatchParts,
+  getValueComparisonOutcome,
+} from './matchHighlighterUtils';

mathesar_ui/src/component-library/match-highlighter/matchHighlighterTypes.ts

@@ -2,3 +2,8 @@ export interface MatchPart {
   text: string;
   isMatch: boolean;
 }
+
+export type ValueComparisonOutcome =
+  | 'exactMatch'
+  | 'substringMatch'
+  | 'noMatch';

mathesar_ui/src/component-library/match-highlighter/matchHighlighterUtils.ts

@@ -1,5 +1,8 @@
 import { toAsciiLowerCase } from '@mathesar-component-library-dir/common/utils';
-import type { MatchPart } from './matchHighlighterTypes';
+import type {
+  MatchPart,
+  ValueComparisonOutcome,
+} from './matchHighlighterTypes';
 
 export function match(text: string): MatchPart {
   return { text, isMatch: true };
@@ -38,3 +41,15 @@ export function splitMatchParts(text: string, substring: string): MatchPart[] {
   }
   return matchParts;
 }
+
+export function getValueComparisonOutcome(
+  matchParts: MatchPart[],
+): ValueComparisonOutcome | undefined {
+  if (matchParts.length === 0) {
+    return undefined;
+  }
+  if (matchParts.length === 1) {
+    return matchParts[0].isMatch ? 'exactMatch' : 'noMatch';
+  }
+  return 'substringMatch';
+}

mathesar_ui/src/component-library/notification/Notification.scss

@@ -1,7 +1,6 @@
 .notification {
   display: flex;
   flex-direction: column;
-  z-index: 10;
 
   &.danger {
     background: #393939;

mathesar_ui/src/component-library/select/Select.svelte

@@ -15,7 +15,12 @@
   type $$Props = SelectProps<Option>;
   type DefinedProps = Required<$$Props>;
 
-  const dispatch = createEventDispatcher<{ change: Option | undefined }>();
+  const dispatch = createEventDispatcher<{
+    change: Option | undefined;
+    input: Option | undefined;
+    artificialChange: Option | undefined;
+    artificialInput: Option | undefined;
+  }>();
 
   export let id: DefinedProps['id'] = getGloballyUniqueId();
   export let disabled: DefinedProps['disabled'] = false;
@@ -79,6 +84,9 @@
   function setValueFromArray(values: (Option | undefined)[]) {
     [value] = values;
     dispatch('change', value);
+    dispatch('input', value);
+    dispatch('artificialChange', value);
+    dispatch('artificialInput', value);
   }
 
   function setValueOnOptionChange(opts: Option[]) {
@@ -144,6 +152,8 @@
     on:open={() => api.open()}
     on:close={() => api.close()}
     on:keydown={(e) => api.handleKeyDown(e)}
+    on:focus
+    on:blur
   >
     <svelte:fragment slot="trigger">
       {#if $$slots.default}

mathesar_ui/src/component-library/tabs/TabContainer.scss

@@ -6,6 +6,7 @@
     align-items: center;
     display: flex;
     position: relative;
+    isolation: isolate;
     flex-direction: row;
     margin: 0;
     padding: 0;
@@ -93,5 +94,6 @@
     border-top: none;
     border-radius: 0px 0px 2px 2px;
     position: relative;
+    isolation: isolate;
   }
 }

mathesar_ui/src/component-library/toast/ToastPresenter.scss

@@ -7,5 +7,5 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
-  z-index: 9999;
+  z-index: var(--toast-z-index, 999);
 }

mathesar_ui/src/component-library/types.ts

@@ -18,3 +18,4 @@ export * from './text-area/TextAreaTypes';
 export * from './select/SelectTypes';
 export * from './number-input/NumberInputTypes';
 export * from './date-time-picker/DateTimePickerTypes';
+export * from './match-highlighter/matchHighlighterTypes';

mathesar_ui/src/component-library/window/Window.scss

@@ -7,6 +7,8 @@
   display: grid;
   grid-template: auto 1fr auto / auto;
   box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
+  position: relative;
+  isolation: isolate;
 
   .title-bar {
     grid-row: 1;
@@ -33,9 +35,15 @@
     background: #f3f6f8;
   }
 
-  > .body,
+  &.has-body-padding > .body {
+    padding: 1em;
+  }
   > .footer {
     padding: 1em;
+  }
+
+  > .body,
+  > .footer {
     overflow: hidden;
     &:empty {
       display: none;

mathesar_ui/src/component-library/window/Window.svelte

@@ -10,13 +10,18 @@
   export let title: string | undefined = undefined;
   export let hasCloseButton = true;
   export let canScrollBody = true;
+  export let hasBodyPadding = true;
 
   function handleCloseButtonClick() {
     dispatch('close');
   }
 </script>
 
-<div class="window" class:can-scroll-body={canScrollBody}>
+<div
+  class="window"
+  class:can-scroll-body={canScrollBody}
+  class:has-body-padding={hasBodyPadding}
+>
   {#if $$slots.title || title || hasCloseButton}
     <div class="title-bar">
       <div class="title">