Cherry-pick DH-12970 Table Input (deephaven#762) (deephaven#771)

__mocks__/dh-core.js

@@ -686,6 +686,16 @@ class Table extends DeephavenObject {
     return viewportData;
   }
 
+  findColumns(names) {
+    return names.map(name => {
+      const column = this.columns.find(col => col.name === name);
+      if (column === undefined) {
+        throw new Error(`Column ${name} not found`);
+      }
+      return column;
+    });
+  }
+
   fireViewportUpdate() {
     const viewportData = this.makeViewportData();
     if (viewportData != null) {

package.json

@@ -156,6 +156,7 @@
     "@deephaven/grid": "file:packages/grid",
     "@deephaven/icons": "file:packages/icons",
     "@deephaven/iris-grid": "file:packages/iris-grid",
+    "@deephaven/jsapi-components": "file:packages/jsapi-components",
     "@deephaven/jsapi-shim": "file:packages/jsapi-shim",
     "@deephaven/jsapi-utils": "file:packages/jsapi-utils",
     "@deephaven/log": "file:packages/log",

packages/code-studio/tsconfig.json

@@ -5,9 +5,7 @@
     "noEmit": true,
     "emitDeclarationOnly": false
   },
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "references": [
     {
       "path": "../chart"
@@ -55,4 +53,4 @@
       "path": "../filters"
     }
   ]
-}
+}

packages/components/src/SearchInput.tsx

@@ -7,9 +7,11 @@ import './SearchInput.scss';
 interface SearchInputProps {
   value: string;
   placeholder: string;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
   onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
   className: string;
+  disabled?: boolean;
   matchCount: number;
   id: string;
   'data-testid'?: string;
@@ -42,8 +44,10 @@ class SearchInput extends PureComponent<SearchInputProps> {
     const {
       value,
       placeholder,
+      onBlur,
       onChange,
       className,
+      disabled,
       matchCount,
       id,
       onKeyDown,
@@ -54,9 +58,11 @@ class SearchInput extends PureComponent<SearchInputProps> {
         <input
           type="search"
           value={value}
+          onBlur={onBlur}
           onChange={onChange}
           onKeyDown={onKeyDown}
           className="form-control"
+          disabled={disabled}
           placeholder={placeholder}
           ref={this.inputField}
           id={id}

packages/components/src/SelectValueList.tsx

@@ -22,6 +22,7 @@ type SelectValueListProps<T> = {
   offset: number;
   items: SelectItem<T>[];
 
+  onBlur?: React.FocusEventHandler<Element>;
   onSelect(itemIndex: number, value: T | null): void;
   onViewportChange(topRow: number, bottomRow: number): void;
 
@@ -36,12 +37,14 @@ class SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {
   static defaultProps = {
     disabled: false,
     rowHeight: 21,
+    onBlur: (): void => undefined,
     'data-testid': undefined,
   };
 
   constructor(props: SelectValueListProps<T>) {
     super(props);
 
+    this.handleBlur = this.handleBlur.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
 
@@ -80,7 +83,8 @@ class SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {
       const text = displayValue != null ? displayValue : value;
 
       return (
-        <li className="value-list-item" style={style} key={key}>
+        // Tab index is needed so the item could be a related target in the blur event details
+        <li className="value-list-item" style={style} key={key} tabIndex={-1}>
           <Checkbox
             checked={isSelected}
             disabled={disabled}
@@ -123,6 +127,19 @@ class SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {
     { max: 1 }
   );
 
+  handleBlur(e: React.FocusEvent): void {
+    if (
+      !e.relatedTarget ||
+      (this.list.current &&
+        e.relatedTarget instanceof HTMLElement &&
+        !this.list.current.contains(e.relatedTarget))
+    ) {
+      // Next focused element is outside of the list
+      const { onBlur } = this.props;
+      onBlur?.(e);
+    }
+  }
+
   handleScroll(): void {
     this.sendViewportUpdate();
   }
@@ -158,6 +175,19 @@ class SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {
     }
   }
 
+  getElement(itemIndex: number): Element | null {
+    if (this.list.current == null) {
+      return null;
+    }
+    const elements = this.list.current.querySelectorAll('.value-list-item');
+    return elements[itemIndex];
+  }
+
+  scrollIntoView(index: number): void {
+    const element = this.getElement(index);
+    element?.scrollIntoView({ block: 'center' });
+  }
+
   render(): JSX.Element {
     const {
       className,
@@ -183,6 +213,7 @@ class SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {
           { 'is-invalid': isInvalid },
           className
         )}
+        onBlur={this.handleBlur}
         onScroll={this.handleScroll}
         ref={this.list}
         data-testid={dataTestId}

packages/jsapi-components/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.vscode
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.project
+.settings/
+.eslintcache
+.stylelintcache
+
+/public/vs
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+src/**/*.css

packages/jsapi-components/README.md

@@ -0,0 +1,17 @@
+# @deephaven/jsapi-components
+
+This is a component library of Deephaven React components dependent on JSAPI. See [./src/index.ts](./src/index.ts) for a list of components that can be imported into your package.
+
+## Install
+
+```bash
+npm install --save @deephaven/jsapi-components
+```
+
+## Usage
+
+```javascript
+import { TableInput } from '@deephaven/jsapi-components';
+
+<TableInput table={table} />
+```