update all types for table selection

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

@@ -44,6 +44,9 @@ export type DataItemCommitHandler<
   T extends VuuRowDataItemType = VuuRowDataItemType
 > = (value: T) => CommitResponse;
 
+export type TableRowSelectHandler = (row: DataSourceRowObject | null) => void;
+export type TableRowSelectHandlerInternal = (row: DataSourceRow | null) => void;
+
 /**
  * Fired when user clicks a row, returning the row object (DataSourceRowObject)
  */
@@ -52,7 +55,7 @@ export type TableRowClickHandler = (
   row: DataSourceRowObject
 ) => void;
 
-export type RowClickHandler = (
+export type TableRowClickHandlerInternal = (
   evt: MouseEvent<HTMLDivElement>,
   row: DataSourceRow,
   rangeSelect: boolean,

vuu-ui/packages/vuu-table/src/Row.tsx

@@ -2,7 +2,7 @@ import { DataSourceRow } from "@finos/vuu-data-types";
 import {
   DataCellEditHandler,
   RuntimeColumnDescriptor,
-  RowClickHandler,
+  TableRowClickHandlerInternal,
 } from "@finos/vuu-table-types";
 import {
   ColumnMap,
@@ -34,7 +34,7 @@ export interface RowProps {
   highlighted?: boolean;
   row: DataSourceRow;
   offset: number;
-  onClick?: RowClickHandler;
+  onClick?: TableRowClickHandlerInternal;
   onDataEdited?: DataCellEditHandler;
   onToggleGroup?: (row: DataSourceRow, column: RuntimeColumnDescriptor) => void;
   style?: CSSProperties;

vuu-ui/packages/vuu-table/src/Table.tsx

@@ -1,7 +1,5 @@
 import {
   DataSource,
-  DataSourceRow,
-  DataSourceRowObject,
   SchemaColumn,
   SelectionChangeHandler,
   VuuFeatureInvocationMessage,
@@ -11,6 +9,7 @@ import {
   TableConfig,
   TableConfigChangeHandler,
   TableRowClickHandler,
+  TableRowSelectHandler,
   TableSelectionModel,
 } from "@finos/vuu-table-types";
 import {
@@ -45,7 +44,6 @@ const classBase = "vuuTable";
 
 const { IDX, RENDER_IDX } = metadataKeys;
 
-export type TableRowSelectHandler = (row: DataSourceRowObject) => void;
 export type TableNavigationStyle = "none" | "cell" | "row";
 
 export interface TableProps

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

@@ -1,16 +1,16 @@
-import { RowClickHandler, TableSelectionModel } from "@finos/vuu-table-types";
+import {
+  TableRowClickHandlerInternal,
+  TableRowSelectHandlerInternal,
+  TableSelectionModel,
+} from "@finos/vuu-table-types";
 import {
   deselectItem,
   dispatchMouseEvent,
   isRowSelected,
   metadataKeys,
   selectItem,
 } from "@finos/vuu-utils";
-import {
-  DataSourceRow,
-  Selection,
-  SelectionChangeHandler,
-} from "@finos/vuu-data-types";
+import { Selection, SelectionChangeHandler } from "@finos/vuu-data-types";
 import {
   KeyboardEvent,
   KeyboardEventHandler,
@@ -29,7 +29,7 @@ export interface SelectionHookProps {
   highlightedIndexRef: MutableRefObject<number | undefined>;
   selectionKeys?: string[];
   selectionModel: TableSelectionModel;
-  onSelect?: (row: DataSourceRow) => void;
+  onSelect?: TableRowSelectHandlerInternal;
   onSelectionChange: SelectionChangeHandler;
 }
 
@@ -49,7 +49,7 @@ export const useSelection = ({
     [selectionKeys]
   );
 
-  const handleRowClick = useCallback<RowClickHandler>(
+  const handleRowClick = useCallback<TableRowClickHandlerInternal>(
     (evt, row, rangeSelect, keepExistingSelection) => {
       const { [IDX]: idx } = row;
       const { current: active } = lastActiveRef;

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

@@ -7,11 +7,12 @@ import {
 import {
   ColumnDescriptor,
   DataCellEditHandler,
-  RowClickHandler,
+  TableRowClickHandlerInternal,
   RuntimeColumnDescriptor,
   TableColumnResizeHandler,
   TableConfig,
   TableSelectionModel,
+  TableRowSelectHandlerInternal,
 } from "@finos/vuu-table-types";
 import { VuuRange, VuuSortType } from "@finos/vuu-protocol-types";
 import {
@@ -558,16 +559,33 @@ export const useTable = ({
     [dataSource, onSelectionChange]
   );
 
+  const handleSelect = useCallback<TableRowSelectHandlerInternal>(
+    (row) => {
+      if (onSelect) {
+        onSelect(row === null ? null : asDataSourceRowObject(row, columnMap));
+      }
+    },
+    [columnMap, onSelect]
+  );
+
   const {
     onKeyDown: selectionHookKeyDown,
     onRowClick: selectionHookOnRowClick,
   } = useSelection({
     highlightedIndexRef,
-    onSelect,
+    onSelect: handleSelect,
     onSelectionChange: handleSelectionChange,
     selectionModel,
   });
 
+  const handleRowClick = useCallback<TableRowClickHandlerInternal>(
+    (evt, row, rangeSelect, keepExistingSelection) => {
+      selectionHookOnRowClick(evt, row, rangeSelect, keepExistingSelection);
+      onRowClickProp?.(evt, asDataSourceRowObject(row, columnMap));
+    },
+    [columnMap, onRowClickProp, selectionHookOnRowClick]
+  );
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLElement>) => {
       navigationKeyDown(e);
@@ -581,14 +599,6 @@ export const useTable = ({
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
 
-  const handleRowClick = useCallback<RowClickHandler>(
-    (evt, row, rangeSelect, keepExistingSelection) => {
-      selectionHookOnRowClick(evt, row, rangeSelect, keepExistingSelection);
-      onRowClickProp?.(evt, asDataSourceRowObject(row, columnMap));
-    },
-    [columnMap, onRowClickProp, selectionHookOnRowClick]
-  );
-
   const onMoveColumn = useCallback(
     (columns: ColumnDescriptor[]) => {
       const newTableConfig = {

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

@@ -1,5 +1,5 @@
-import { DataSourceRow, TableSchema } from "@finos/vuu-data-types";
-import { Table, TableProps, TableRowSelectHandler } from "@finos/vuu-table";
+import { DataSourceRowObject, TableSchema } from "@finos/vuu-data-types";
+import { Table, TableProps } from "@finos/vuu-table";
 import { ColumnMap, useId } from "@finos/vuu-utils";
 import { Input } from "@salt-ds/core";
 import { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from "react";
@@ -16,7 +16,8 @@ if (typeof SearchCell !== "function") {
 }
 
 export interface InstrumentPickerProps
-  extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+  extends Omit<HTMLAttributes<HTMLElement>, "onSelect">,
+    Pick<TableProps, "onSelect"> {
   TableProps: Pick<TableProps, "config" | "dataSource">;
   columnMap: ColumnMap;
   disabled?: boolean;
@@ -27,10 +28,9 @@ export interface InstrumentPickerProps
    * @param row DataSourceRow
    * @returns string
    */
-  itemToString?: (row: DataSourceRow) => string;
+  itemToString?: (row: DataSourceRowObject) => string;
   onClose?: () => void;
   onOpenChange?: OpenChangeHandler;
-  onSelect: TableRowSelectHandler;
   schema: TableSchema;
   searchColumns: string[];
   width?: number;

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

@@ -1,10 +1,9 @@
-import { DataSource, DataSourceRow } from "@finos/vuu-data-types";
-import { ColumnDescriptor } from "@finos/vuu-table-types";
+import { DataSource, DataSourceRowObject } from "@finos/vuu-data-types";
 import {
+  ColumnDescriptor,
   TableRowSelectHandler,
-  useControlledTableNavigation,
-} from "@finos/vuu-table";
-import { ColumnMap } from "@finos/vuu-utils";
+} from "@finos/vuu-table-types";
+import { useControlledTableNavigation } from "@finos/vuu-table";
 import { ChangeEvent, useCallback, useMemo, useState } from "react";
 import { useControlled } from "../common-hooks";
 import { OpenChangeHandler } from "../dropdown";
@@ -21,19 +20,14 @@ export interface InstrumentPickerHookProps
   isOpen?: boolean;
 }
 
-const defaultItemToString =
-  (columns: ColumnDescriptor[], columnMap: ColumnMap) =>
-  (row: DataSourceRow) => {
-    return columns.map(({ name }) => row[columnMap[name]]).join(" ");
-  };
+const defaultItemToString = (row: DataSourceRowObject) =>
+  Object.values(row.data).join(" ");
 
 export const useInstrumentPicker = ({
-  columnMap,
-  columns,
   dataSource,
   defaultIsOpen,
   isOpen: isOpenProp,
-  itemToString = defaultItemToString(columns, columnMap),
+  itemToString = defaultItemToString,
   onOpenChange,
   onSelect,
   searchColumns,
@@ -85,9 +79,9 @@ export const useInstrumentPicker = ({
 
   const handleSelectRow = useCallback<TableRowSelectHandler>(
     (row) => {
-      const value = itemToString(row);
+      const value = row === null ? "" : itemToString(row);
       setValue(value);
-      onSelect(row);
+      onSelect?.(row);
       handleOpenChange?.(false, "select");
     },
     [handleOpenChange, itemToString, onSelect]

vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx

@@ -30,7 +30,7 @@ export const BasketSelectorRow = ({
     (evt: MouseEvent<HTMLDivElement>) => {
       const rangeSelect = evt.shiftKey;
       const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */
-      onClick?.(row, rangeSelect, keepExistingSelection);
+      onClick?.(evt, row, rangeSelect, keepExistingSelection);
     },
     [onClick, row]
   );

vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/useBasketSelector.ts

@@ -1,7 +1,6 @@
 import { TableRowClickHandler } from "@finos/vuu-table-types";
 import { TableProps } from "@finos/vuu-table";
 import { OpenChangeHandler, useControlled } from "@finos/vuu-ui-controls";
-import { buildColumnMap } from "@finos/vuu-utils";
 import { useCallback, useMemo, useRef } from "react";
 import { BasketSelectorProps } from "./BasketSelector";
 import { BasketSelectorRow } from "./BasketSelectorRow";
@@ -33,11 +32,6 @@ export const useBasketSelector = ({
     name: "useDropdownList",
   });
 
-  const columnMap = useMemo(
-    () => buildColumnMap(dataSourceBasketTradingSearch.columns),
-    [dataSourceBasketTradingSearch.columns]
-  );
-
   const handleOpenChange = useCallback<OpenChangeHandler>(
     (open, closeReason) => {
       setIsOpen(open);
@@ -55,12 +49,12 @@ export const useBasketSelector = ({
   );
 
   const handleRowClick = useCallback<TableRowClickHandler>(
-    (row) => {
-      const instanceId = row[columnMap.instanceId] as string;
+    (_evt, row) => {
+      const instanceId = row.data.instanceId as string;
       handleOpenChange(false, "select");
       onSelectBasket?.(instanceId);
     },
-    [columnMap.instanceId, handleOpenChange, onSelectBasket]
+    [handleOpenChange, onSelectBasket]
   );
 
   const handleClickAddBasket = useCallback(() => {

vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/NewBasketPanel.tsx

@@ -1,4 +1,8 @@
-import { DataSource, DataSourceRow, TableSchema } from "@finos/vuu-data-types";
+import {
+  DataSource,
+  DataSourceRowObject,
+  TableSchema,
+} from "@finos/vuu-data-types";
 import {
   DialogHeader,
   PopupComponent as Popup,
@@ -18,8 +22,6 @@ import "./NewBasketPanel.css";
 
 const classBase = "vuuBasketNewBasketPanel";
 
-const displayName = (key: number) => (row: DataSourceRow) => String(row[key]);
-
 export type BasketCreatedHandler = (
   basketName: string,
   basketId: string,
@@ -74,7 +76,7 @@ export const NewBasketPanel = ({
     [basketDataSource]
   );
 
-  const itemToString = displayName(columnMap.name);
+  const itemToString = (row: DataSourceRowObject) => row.data.name as string;
 
   const inputCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {
     setTimeout(() => {

vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts

@@ -1,7 +1,7 @@
 import { ViewportRpcResponse } from "@finos/vuu-data-types";
-import { TableRowSelectHandler } from "@finos/vuu-table";
 import { Commithandler, OpenChangeHandler } from "@finos/vuu-ui-controls";
 import { buildColumnMap, metadataKeys } from "@finos/vuu-utils";
+import { TableRowSelectHandler } from "packages/vuu-table-types";
 import { useCallback, useRef, useState } from "react";
 import { NewBasketPanelProps } from "./NewBasketPanel";
 
@@ -47,11 +47,12 @@ export const useNewBasketPanel = ({
   }, [basketDataSource, basketId, basketName, onBasketCreated]);
 
   const handleSelectBasket = useCallback<TableRowSelectHandler>((row) => {
-    const basketId = row[KEY] as string;
-    setBasketId(basketId);
-    setTimeout(() => {
-      saveButtonRef.current?.focus();
-    }, 60);
+    if (row) {
+      setBasketId(row.key);
+      setTimeout(() => {
+        saveButtonRef.current?.focus();
+      }, 60);
+    }
   }, []);
 
   const handleChangeBasketName = useCallback<Commithandler<string>>(

vuu-ui/showcase/src/examples/AppPatterns/CrossTableFiltering.examples.tsx

@@ -9,9 +9,12 @@ import {
   StackLayout,
   View,
 } from "@finos/vuu-layout";
-import { Table, TableRowSelectHandler } from "@finos/vuu-table";
-import { TableConfig, TableRowClickHandler } from "@finos/vuu-table-types";
-import { buildColumnMap } from "@finos/vuu-utils";
+import { Table } from "@finos/vuu-table";
+import {
+  TableConfig,
+  TableRowClickHandler,
+  TableRowSelectHandler,
+} from "@finos/vuu-table-types";
 import { useCallback, useMemo } from "react";
 
 let displaySequence = 1;
@@ -200,6 +203,7 @@ export const SimpleCrossTableFiltering = () => {
   const handleParentRowSelect = useCallback<TableRowSelectHandler>((row) => {
     console.log({ rowSelect: row });
   }, []);
+
   const handleParentRowSelectionChange = useCallback<SelectionChangeHandler>(
     (selection) => {
       console.log({ selection });