Merge branch 'master' into alyssa-starter

1 files changed, 26 insertions, 26 deletions

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 285598600..a60cd98ac 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -1,10 +1,9 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { DivHeight, returnAll, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnNone, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
-import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc';
+import ResizeObserver from 'resize-observer-polyfill';
+import { DivHeight, returnAll, returnEmptyFilter, returnFalse, returnNone, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
+import { Doc, DocListCast, Opt, returnEmptyDoclist, StrListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { listSpec } from '../../../fields/Schema';
@@ -19,21 +18,20 @@ import { dropActionType } from '../../util/DropActionTypes';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
-import { undoBatch, UndoManager } from '../../util/UndoManager';
+import { undoable, undoBatch, UndoManager } from '../../util/UndoManager';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { EditableView } from '../EditableView';
 import { DocumentView } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { StyleProp } from '../StyleProp';
+import { returnEmptyDocViewList } from '../StyleProvider';
 import { CollectionFreeFormView } from './collectionFreeForm';
-import { CollectionSubView } from './CollectionSubView';
+import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import './CollectionTreeView.scss';
 import { TreeViewType } from './CollectionTreeViewType';
 import { TreeView } from './TreeView';
 
-const _global = (window /* browser */ || global) /* node */ as any;
-
 export type collectionTreeViewProps = {
     treeViewExpandedView?: 'fields' | 'layout' | 'links' | 'data';
     treeViewOpen?: boolean;
@@ -55,10 +53,10 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
     private _titleRef?: HTMLDivElement | HTMLInputElement | null;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _isDisposing = false; // notes that instance is in process of being disposed
-    private refList: Set<any> = new Set(); // list of tree view items to monitor for height changes
-    private observer: any; // observer for monitoring tree view items.
+    private refList: Set<HTMLElement> = new Set(); // list of tree view items to monitor for height changes
+    private observer: ResizeObserver | undefined; // observer for monitoring tree view items.
 
-    constructor(props: any) {
+    constructor(props: SubCollectionViewProps & collectionTreeViewProps) {
         super(props);
         makeObservable(this);
     }
@@ -113,14 +111,14 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
             !this._props.dontRegisterView && this._props.setHeight?.(bodyHeight + titleHeight);
         }
     };
-    unobserveHeight = (ref: any) => {
+    unobserveHeight = (ref: HTMLElement) => {
         this.refList.delete(ref);
         this.layoutDoc.layout_autoHeight && this.computeHeight();
     };
-    observeHeight = (ref: any) => {
+    observeHeight = (ref: HTMLElement) => {
         if (ref) {
             this.refList.add(ref);
-            this.observer = new _global.ResizeObserver(() => {
+            this.observer = new ResizeObserver(() => {
                 if (this.layoutDoc.layout_autoHeight && ref && this.refList.size && !SnappingManager.IsDragging) {
                     this.computeHeight();
                 }
@@ -216,7 +214,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
         ContextMenu.Instance.addItem({ description: 'Options...', subitems: layoutItems, icon: 'eye' });
         if (!Doc.noviceMode) {
             const existingOnClick = ContextMenu.Instance.findByDescription('OnClick...');
-            const onClicks: ContextMenuProps[] = existingOnClick && 'subitems' in existingOnClick ? existingOnClick.subitems : [];
+            const onClicks: ContextMenuProps[] = existingOnClick?.subitems ?? [];
             onClicks.push({ description: 'Edit onChecked Script', event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.Document, undefined, 'onCheckedClick'), 'edit onCheckedClick'), icon: 'edit' });
             !existingOnClick && ContextMenu.Instance.addItem({ description: 'OnClick...', noexpand: true, subitems: onClicks, icon: 'mouse-pointer' });
         }
@@ -229,16 +227,16 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
     get editableTitle() {
         return (
             <EditableView
-                contents={this.dataDoc.title}
+                contents={StrCast(this.dataDoc.title)}
                 display="block"
                 maxHeight={72}
                 height="auto"
                 GetValue={() => StrCast(this.dataDoc.title)}
-                SetValue={undoBatch((value: string, shift: boolean, enter: boolean) => {
+                SetValue={undoable((value: string, shift: boolean, enter: boolean) => {
                     if (enter && this.Document.treeView_Type === TreeViewType.outline) this.makeTextCollection(this.treeChildren);
                     this.dataDoc.title = value;
                     return true;
-                })}
+                }, 'set doc title')}
             />
         );
     }
@@ -285,7 +283,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
     @observable _renderCount = 1;
     @computed get treeViewElements() {
         TraceMobx();
-        const dragAction = StrCast(this.Document.childDragAction) as any as dropActionType;
+        const dragAction = StrCast(this.Document.childDragAction) as dropActionType;
         const treeAddDoc = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => this.addDoc(doc, relativeTo, before);
         const moveDoc = (d: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this._props.moveDocument?.(d, target, addDoc) || false;
         if (this._renderCount < this.treeChildren.length)
@@ -333,9 +331,11 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
         return this.dataDoc === null ? null : (
             <div
                 className="collectionTreeView-titleBar"
-                ref={action((r: any) => {
-                    (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this.ScreenToLocalBoxXf().Scale);
-                })}
+                ref={r =>
+                    runInAction(() => {
+                        (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this.ScreenToLocalBoxXf().Scale);
+                    })
+                }
                 key={this.Document[Id]}
                 style={!this.outlineMode ? { marginLeft: this.marginX(), paddingTop: this.marginTop() } : {}}>
                 {this.outlineMode ? this.documentTitle : this.editableTitle}
@@ -370,7 +370,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
                     renderDepth={this._props.renderDepth + 1}
                     focus={emptyFunction}
                     styleProvider={this._props.styleProvider}
-                    containerViewPath={returnEmptyDoclist}
+                    containerViewPath={returnEmptyDocViewList}
                     whenChildContentsActiveChanged={emptyFunction}
                     childFilters={this._props.childFilters}
                     childFiltersByRanges={this._props.childFiltersByRanges}
@@ -410,8 +410,8 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
 
     @observable _headerHeight = 0;
     @computed get content() {
-        const background = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor);
-        const color = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.Color);
+        const background = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) as string;
+        const color = () => this._props.styleProvider?.(this.Document, this._props, StyleProp.Color) as string;
         const pointerEvents = () => (this._props.isContentActive() === false ? 'none' : undefined);
         const titleBar = this._props.treeViewHideTitle || this.Document.treeView_HideTitle ? null : this.titleBar;
         return (