Instrument picker (finos#923)

* make instrument-picker more generic

* refactor Table navigation, preparing for row highlighting

* fix broken import paths

* add empty inlined worker as vitext mocj fails otherwise

vuu-ui/.gitignore

@@ -1 +1 @@
-inlined-worker.js
+# inlined-worker.js

vuu-ui/packages/vuu-data/src/inlined-worker.js

@@ -0,0 +1 @@
+export const workerSourceCode = "";

vuu-ui/packages/vuu-datagrid-types/index.d.ts

@@ -43,6 +43,7 @@ export interface TableAttributes {
   columnDefaultWidth?: number;
   columnFormatHeader?: "capitalize" | "uppercase";
   columnSeparators?: boolean;
+  showHighlightedRow?: boolean;
   rowSeparators?: boolean;
   zebraStripes?: boolean;
 }

vuu-ui/packages/vuu-layout/src/toolbar/useKeyboardNavigation.ts

@@ -27,7 +27,7 @@ import {
 } from "@finos/vuu-utils";
 import { getIndexOfEditedItem } from "./toolbar-dom-utils";
 import { NavigationOutOfBoundsHandler } from "./Toolbar";
-import { PopupCloseCallback } from "packages/vuu-popups/src";
+import { PopupCloseCallback } from "@finos/vuu-popups";
 
 type directionType = "bwd" | "fwd" | "start" | "end";
 type directionMap = { [key: string]: directionType };

vuu-ui/packages/vuu-layout/src/toolbar/useToolbar.ts

@@ -1,6 +1,6 @@
 import type { OverflowItem, ToolbarProps } from "@finos/vuu-layout";
 import { isValidNumber } from "@finos/vuu-utils";
-import { PopupCloseCallback } from "packages/vuu-popups/src";
+import { PopupCloseCallback } from "@finos/vuu-popups";
 import {
   KeyboardEvent,
   MouseEvent as ReactMouseEvent,

vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnNameLabel.tsx

@@ -1,4 +1,4 @@
-import { ColumnDescriptor } from "packages/vuu-datagrid-types";
+import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
 import cx from "classnames";
 
 import {

vuu-ui/packages/vuu-table/src/table-next/TableNext.css

@@ -25,6 +25,10 @@
   --row-borderColor: var(--salt-separable-tertiary-borderColor);
 }
 
+.vuuTableNext-highlight .vuuTableNextRow:hover {
+  background-color: var(--vuu-color-pink-10-fade-20);
+}
+
 .vuuTableNext-scrollbarContainer {
   --scroll-content-width: 1100px;
   border-bottom: none !important;

vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx

@@ -26,6 +26,7 @@ export const TableNext = forwardRef(function TableNext(
     config,
     dataSource,
     id: idProp,
+    navigationStyle = "cell",
     onAvailableColumnsChange,
     onConfigChange,
     onFeatureEnabled,
@@ -69,6 +70,7 @@ export const TableNext = forwardRef(function TableNext(
     containerRef,
     dataSource,
     headerHeight,
+    navigationStyle,
     onAvailableColumnsChange,
     onConfigChange,
     onFeatureEnabled,
@@ -98,6 +100,7 @@ export const TableNext = forwardRef(function TableNext(
   const className = cx(classBase, classNameProp, {
     [`${classBase}-colLines`]: tableAttributes.columnSeparators,
     [`${classBase}-rowLines`]: tableAttributes.rowSeparators,
+    [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
     [`${classBase}-zebra`]: tableAttributes.zebraStripes,
     // [`${classBase}-loading`]: isDataLoading(tableProps.columns),
   });

vuu-ui/packages/vuu-table/src/table-next/useKeyboardNavigation.ts

@@ -15,20 +15,33 @@ import {
   getTableCell,
   headerCellQuery,
 } from "./table-dom-utils";
+import { TableNavigationStyle } from "../table/dataTableTypes";
 
-const navigationKeys = new Set<NavigationKey>([
+const rowNavigationKeys = new Set<NavigationKey>([
   "Home",
   "End",
   "PageUp",
   "PageDown",
   "ArrowDown",
-  "ArrowLeft",
-  "ArrowRight",
   "ArrowUp",
 ]);
 
-export const isNavigationKey = (key: string): key is NavigationKey => {
-  return navigationKeys.has(key as NavigationKey);
+const cellNavigationKeys = new Set(rowNavigationKeys);
+cellNavigationKeys.add("ArrowLeft");
+cellNavigationKeys.add("ArrowRight");
+
+export const isNavigationKey = (
+  key: string,
+  navigationStyle: TableNavigationStyle
+): key is NavigationKey => {
+  switch (navigationStyle) {
+    case "cell":
+      return cellNavigationKeys.has(key as NavigationKey);
+    case "row":
+      return rowNavigationKeys.has(key as NavigationKey);
+    default:
+      return false;
+  }
 };
 
 type ArrowKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
@@ -114,6 +127,7 @@ export interface NavigationHookProps {
   columnCount?: number;
   disableHighlightOnFocus?: boolean;
   label?: string;
+  navigationStyle: TableNavigationStyle;
   viewportRange: VuuRange;
   requestScroll?: ScrollRequestHandler;
   restoreLastFocus?: boolean;
@@ -126,6 +140,7 @@ export const useKeyboardNavigation = ({
   columnCount = 0,
   containerRef,
   disableHighlightOnFocus,
+  navigationStyle,
   requestScroll,
   rowCount = 0,
   viewportRowCount,
@@ -233,7 +248,6 @@ NavigationHookProps) => {
         // click handler.
         const focusedCell = getFocusedCell(document.activeElement);
         if (focusedCell) {
-          console.log({ focusedCell });
           focusedCellPos.current = getTableCellPos(focusedCell);
         }
       }
@@ -242,7 +256,6 @@ NavigationHookProps) => {
 
   const navigateChildItems = useCallback(
     async (key: NavigationKey) => {
-      console.log(`navigate child items ${key}`);
       const [nextRowIdx, nextColIdx] = isPagingKey(key)
         ? await nextPageItemIdx(key, activeCellPos.current)
         : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
@@ -258,13 +271,13 @@ NavigationHookProps) => {
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      if (rowCount > 0 && isNavigationKey(e.key)) {
+      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
         e.preventDefault();
         e.stopPropagation();
         void navigateChildItems(e.key);
       }
     },
-    [rowCount, navigateChildItems]
+    [rowCount, navigationStyle, navigateChildItems]
   );
 
   const handleClick = useCallback(

vuu-ui/packages/vuu-table/src/table-next/useTableNext.ts

@@ -67,6 +67,7 @@ export interface TableHookProps
       | "availableColumns"
       | "config"
       | "dataSource"
+      | "navigationStyle"
       | "onAvailableColumnsChange"
       | "onConfigChange"
       | "onFeatureEnabled"
@@ -98,6 +99,7 @@ export const useTable = ({
   containerRef,
   dataSource,
   headerHeight = 25,
+  navigationStyle,
   onAvailableColumnsChange,
   onConfigChange,
   onFeatureEnabled,
@@ -408,6 +410,7 @@ export const useTable = ({
   } = useKeyboardNavigation({
     columnCount: columns.filter((c) => c.hidden !== true).length,
     containerRef,
+    navigationStyle,
     requestScroll,
     rowCount: dataSource?.size,
     viewportRange: range,

vuu-ui/packages/vuu-table/src/table/dataTableTypes.ts

@@ -20,6 +20,8 @@ export type TableRowClickHandler = (row: VuuDataRow) => void;
 // TODO implement a Model object to represent a row data for better API
 export type TableRowSelectHandler = (row: DataSourceRow) => void;
 
+export type TableNavigationStyle = "none" | "cell" | "row";
+
 export interface TableProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
   Row?: FC<RowProps>;
@@ -32,6 +34,11 @@ export interface TableProps
   dataSource: DataSource;
   headerHeight?: number;
   height?: number;
+  /**
+   * Defined how focus navigation within data cells will be handled by table.
+   * Default is cell.
+   */
+  navigationStyle?: TableNavigationStyle;
   /**
    * required if a fully featured column picker is to be available.
    * Available columns can be changed by the addition or removal of

vuu-ui/packages/vuu-ui-controls/src/common-hooks/navigationTypes.ts

@@ -1,22 +1,20 @@
 import { FocusEvent, KeyboardEvent, RefObject } from "react";
-import { CollectionItem } from "./collectionTypes";
 
-export interface NavigationProps<Item = unknown> {
+export interface NavigationProps {
   cycleFocus?: boolean;
   defaultHighlightedIndex?: number;
   disableHighlightOnFocus?: boolean;
   focusOnHighlight?: boolean;
   focusVisible?: number;
   highlightedIndex?: number;
-  indexPositions: CollectionItem<Item>[];
   itemCount: number;
   onHighlight?: (idx: number) => void;
   onKeyboardNavigation?: (evt: KeyboardEvent, idx: number) => void;
   restoreLastFocus?: boolean;
   viewportItemCount: number;
 }
 
-export interface NavigationHookProps<Item> extends NavigationProps<Item> {
+export interface NavigationHookProps extends NavigationProps {
   containerRef: RefObject<HTMLElement>;
   label?: string;
   selected?: string[];

vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx

@@ -1,4 +1,5 @@
 import { TableSchema } from "@finos/vuu-data";
+import { DataSourceRow } from "@finos/vuu-data-types";
 import { useId } from "@finos/vuu-layout";
 import { TableNext, TableProps, TableRowSelectHandler } from "@finos/vuu-table";
 import { ColumnMap } from "@finos/vuu-utils";
@@ -17,6 +18,14 @@ export interface InstrumentPickerProps
   TableProps: Pick<TableProps, "config" | "dataSource">;
   columnMap: ColumnMap;
   disabled?: boolean;
+  /**
+   * Used to form the display value to render in input following selection. If
+   * not provided, default will be the values from rendered columns.
+   *
+   * @param row DataSourceRow
+   * @returns string
+   */
+  itemToString?: (row: DataSourceRow) => string;
   onSelect: TableRowSelectHandler;
   schema: TableSchema;
   searchColumns: string[];
@@ -30,6 +39,7 @@ export const InstrumentPicker = forwardRef(function InstrumentPicker(
     columnMap,
     disabled,
     id: idProp,
+    itemToString,
     onSelect,
     schema,
     searchColumns,
@@ -47,7 +57,16 @@ export const InstrumentPicker = forwardRef(function InstrumentPicker(
     onOpenChange,
     tableHandlers,
     value,
-  } = useInstrumentPicker({ columnMap, dataSource, onSelect, searchColumns });
+  } = useInstrumentPicker({
+    columnMap,
+    columns: TableProps.config.columns,
+    dataSource,
+    itemToString,
+    onSelect,
+    searchColumns,
+  });
+
+  console.log({ value });
 
   const endAdornment = useMemo(() => <span data-icon="chevron-down" />, []);
 

vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts

@@ -1,23 +1,36 @@
 import { DataSource } from "@finos/vuu-data";
+import { DataSourceRow } from "@finos/vuu-data-types";
+import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
 import { TableRowSelectHandler } from "@finos/vuu-table";
 import { ColumnMap } from "@finos/vuu-utils";
 import { ChangeEvent, useCallback, useMemo, useState } from "react";
 import { useControlled } from "../common-hooks";
+import { InstrumentPickerProps } from "./InstrumentPicker";
 
-export interface InstrumentPickerHookProps {
-  columnMap: ColumnMap;
+export interface InstrumentPickerHookProps
+  extends Pick<
+    InstrumentPickerProps,
+    "columnMap" | "itemToString" | "onSelect" | "searchColumns"
+  > {
+  columns: ColumnDescriptor[];
   dataSource: DataSource;
   defaultIsOpen?: boolean;
   isOpen?: boolean;
-  onSelect: TableRowSelectHandler;
-  searchColumns: string[];
 }
 
+const defaultItemToString =
+  (columns: ColumnDescriptor[], columnMap: ColumnMap) =>
+  (row: DataSourceRow) => {
+    return columns.map(({ name }) => row[columnMap[name]]).join(" ");
+  };
+
 export const useInstrumentPicker = ({
   columnMap,
+  columns,
   dataSource,
   defaultIsOpen,
   isOpen: isOpenProp,
+  itemToString = defaultItemToString(columns, columnMap),
   onSelect,
   searchColumns,
 }: InstrumentPickerHookProps) => {
@@ -65,13 +78,12 @@ export const useInstrumentPicker = ({
 
   const handleSelectRow = useCallback<TableRowSelectHandler>(
     (row) => {
-      const { name } = columnMap;
-      const { [name]: value } = row;
-      setValue(value as string);
+      const value = itemToString(row);
+      setValue(value);
       setIsOpen(false);
       onSelect(row);
     },
-    [columnMap, onSelect, setIsOpen]
+    [itemToString, onSelect, setIsOpen]
   );
 
   const inputProps = {

vuu-ui/packages/vuu-ui-controls/src/list/List.css

@@ -36,12 +36,13 @@
   overflow: auto;
 }
 
-.vuuListItemHeader {
+.vuuListHeader {
   --saltList-item-background: var(--list-item-header-background);
   color: var(--list-item-header-color);
+  font-weight: 600;
 }
 
-.vuuListItemHeader[data-sticky="true"] {
+.vuuListHeader[data-sticky="true"] {
   --saltList-item-background: var(--list-background);
   position: sticky;
   top: 0;

vuu-ui/packages/vuu-ui-controls/src/list/List.tsx

@@ -203,12 +203,12 @@ export const List = forwardRef(function List<
           focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value,
         })}
         aria-expanded={expanded}
-        data-idx={collapsibleHeaders ? idx.value : undefined}
         data-index={collapsibleHeaders ? idx.value : undefined}
         data-highlighted={idx.value === highlightedIndex || undefined}
         data-sticky={stickyHeaders}
         data-selectable={false}
         id={headerId}
+        itemHeight={getItemHeight(idx.value)}
         key={`header-${idx.value}`}
         label={title}
         // role="presentation"