(core) Import redesign

Summary: New UI design for incremental imports.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3945

app/client/lib/FocusLayer.ts

@@ -10,7 +10,7 @@
 import * as Mousetrap from 'app/client/lib/Mousetrap';
 import {arrayRemove} from 'app/common/gutil';
 import {RefCountMap} from 'app/common/RefCountMap';
-import {Disposable, dom} from 'grainjs';
+import {Disposable, dom, DomMethod} from 'grainjs';
 
 /**
  * The default focus is organized into layers. A layer determines when focus should move to the
@@ -136,6 +136,17 @@ export class FocusLayer extends Disposable implements FocusLayerOptions {
     _focusLayerManager.get(null)?.grabFocus();
   }
 
+  /**
+   * Creates a new FocusLayer and attaches it to the given element. The layer will be disposed
+   * automatically when the element is removed from the DOM.
+   */
+  public static attach(options: Partial<FocusLayerOptions>): DomMethod<HTMLElement> {
+    return (element: HTMLElement) => {
+      const layer = FocusLayer.create(null, {defaultFocusElem: element, ...options});
+      dom.autoDisposeElem(element, layer);
+    };
+  }
+
   public defaultFocusElem: HTMLElement;
   public allowFocus: (elem: Element) => boolean;
   public _onDefaultFocus?: () => void;