bulk editing enhancements

vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.css

@@ -2,12 +2,12 @@
   --filter-borderColor: var(--salt-separable-secondary-borderColor);
   --filter-color: var(--salt-content-primary-foreground-disabled);
   --filter-padding: 1px 1px 1px 0;
-  --filter-content-height: 22px;
+  --item-content-height: 22px;
   height: var(--salt-size-base);
 
-  .vuuInlineFilter-filter:has(input:focus) {
+  .vuuInlineFilterCell:has(input:focus) {
     --filter-borderColor: transparent;
-    --filter-content-height: 20px;
+    --item-content-height: 20px;
 
     outline-width: 2px;
     outline-offset: -2px;
@@ -32,17 +32,18 @@
     }
   }
 
-  .vuuInlineFilter-filter:focus {
+  .vuuInlineFilterCell:focus {
     --filter-borderColor: transparent;
-    --filter-content-height: 20px;
+    --item-content-height: 20px;
     /* the padding ensures the outline is not clipped */
     --filter-padding: 0 2px;
     /* prevents shift when we apply the padding */
     --saltInput-paddingLeft: 2px;
   }
 
-  .vuuInlineFilter-filter {
-    --saltInput-minHeight: var(--filter-content-height);
+  .vuuInlineFilterCell {
+    --saltInput-minHeight: var(--item-content-height);
+    --saltPillInput-minHeight: var(--item-content-height);
     align-items: center;
     display: inline-flex;
     height: 100%;
@@ -53,22 +54,20 @@
       border-color: var(--filter-borderColor);
       border-width: 1px;
       border-radius: 0;
-    }
-
-    .vuuTypeaheadInput {
-      height: var(--filter-content-height);
+      height: var(--item-content-height);
       input::placeholder {
         color: var(--filter-color);
       }
     }
 
+
     .saltInput-primary.vuuInput {
       border-style: solid;
       border-color: var(--filter-borderColor);
       border-width: 1px;
       border-radius: 0;
-      height: var(--filter-content-height);
-      min-height: var(--filter-content-height);
+      height: var(--item-content-height);
+      min-height: var(--item-content-height);
       input::placeholder {
         color: var(--filter-color);
       }

vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx

@@ -1,25 +1,16 @@
 import { getDataItemEditControl } from "@finos/vuu-data-react";
-import { VirtualColSpan, useHeaderProps } from "@finos/vuu-table";
-import {
-  CommitHandler,
-  FilterAggregator,
-  getFieldName,
-} from "@finos/vuu-utils";
+import { VirtualColSpan } from "@finos/vuu-table";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import {
-  HTMLAttributes,
-  KeyboardEventHandler,
-  useCallback,
-  useMemo,
-} from "react";
+import { HTMLAttributes } from "react";
 import cx from "clsx";
 
 import inlineFilteCss from "./InlineFilter.css";
 import { InputProps } from "@salt-ds/core";
 import { TableSchemaTable } from "@finos/vuu-data-types";
 import { VuuFilter } from "@finos/vuu-protocol-types";
 import { BaseRowProps } from "@finos/vuu-table-types";
+import { useInlineFilter } from "./useInlineFilter";
 
 const classBase = "vuuInlineFilter";
 
@@ -55,50 +46,23 @@ export const InlineFilter = ({
     window: targetWindow,
   });
 
-  const filterAggregator = useMemo(() => new FilterAggregator(), []);
-  const { columns = [], virtualColSpan = 0 } = useHeaderProps();
-
-  const onCommit = useCallback<
-    CommitHandler<HTMLElement, string | number | undefined>
-  >(
-    (evt, value = "") => {
-      const fieldName = getFieldName(evt.target);
-      const column = columns.find((c) => c.name === fieldName);
-      if (column) {
-        if (value === "") {
-          if (filterAggregator.removeFilter(column)) {
-            onChange(filterAggregator.filter);
-          }
-        } else {
-          filterAggregator.addFilter(column, value);
-          onChange(filterAggregator.filter);
-        }
-      }
-    },
-    [columns, filterAggregator, onChange],
-  );
-
-  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
-    (evt) => {
-      if (evt.key === "Enter") {
-        const el = evt.target as HTMLElement;
-        const inputElement = el.querySelector("input");
-        inputElement?.focus();
-      }
-    },
-    [],
-  );
+  const { columns, onCommit, onKeyDown, virtualColSpan } = useInlineFilter({
+    onChange,
+  });
 
   return (
     <div {...htmlAttributes} className={classBase} role={ariaRole}>
       <VirtualColSpan width={virtualColSpan} />
       {columns.map((column, i) => (
         <div
           aria-colindex={i + 1}
-          className={cx(`${classBase}-filter`, "vuuTableCell")}
+          className={cx(`${classBase}Cell`, "vuuTableCell", {
+            "vuuTableCell-right": column.align === "right",
+          })}
           data-field={column.name}
-          onKeyDown={handleKeyDown}
+          onKeyDown={onKeyDown}
           key={column.name}
+          role="cell"
           style={{ width: column.width }}
         >
           {getDataItemEditControl({

vuu-ui/packages/vuu-filters/src/inline-filter/useInlineFilter.ts

@@ -0,0 +1,46 @@
+import { useEditableCell, useHeaderProps } from "@finos/vuu-table";
+import {
+  CommitHandler,
+  FilterAggregator,
+  getFieldName,
+} from "@finos/vuu-utils";
+import { useCallback, useMemo } from "react";
+import { FilterValueChangeHandler } from "./InlineFilter";
+
+export const useInlineFilter = ({
+  onChange,
+}: {
+  onChange: FilterValueChangeHandler;
+}) => {
+  const filterAggregator = useMemo(() => new FilterAggregator(), []);
+  const { columns = [], virtualColSpan = 0 } = useHeaderProps();
+
+  const handleCommit = useCallback<
+    CommitHandler<HTMLElement, string | number | undefined>
+  >(
+    (evt, value = "") => {
+      const fieldName = getFieldName(evt.target);
+      const column = columns.find((c) => c.name === fieldName);
+      if (column) {
+        if (value === "") {
+          if (filterAggregator.removeFilter(column)) {
+            onChange(filterAggregator.filter);
+          }
+        } else {
+          filterAggregator.addFilter(column, value);
+          onChange(filterAggregator.filter);
+        }
+      }
+    },
+    [columns, filterAggregator, onChange],
+  );
+
+  const { onKeyDown } = useEditableCell();
+
+  return {
+    columns,
+    onCommit: handleCommit,
+    onKeyDown,
+    virtualColSpan,
+  };
+};

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

@@ -438,14 +438,3 @@ export declare type CustomHeader = CustomHeaderComponent | CustomHeaderElement;
  * [rowIndex, colIndex]
  */
 export declare type CellPos = [number, number];
-
-/**
- * Used to track the Table cell (if any) with focus.
- */
-export declare type CellFocusState = {
-  el: HTMLElement | null;
-  outsideViewport: "above" | "below" | false;
-  placeholderEl: HTMLDivElement | null;
-  pos: { top: number } | undefined;
-  cellPos: CellPos | undefined;
-};

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

@@ -0,0 +1,40 @@
+import { CellPos } from "@finos/vuu-table-types";
+import { getAriaCellPos } from "./table-dom-utils";
+
+/**
+ * Used to track the Table cell (if any) with focus.
+ */
+export interface ICellFocusState {
+  el: HTMLElement | null;
+  outsideViewport: "above" | "below" | false;
+  placeholderEl: HTMLDivElement | null;
+  pos: { top: number } | undefined;
+  cellPos: CellPos | undefined;
+}
+
+export class CellFocusState implements ICellFocusState {
+  #cellPos: CellPos | undefined = undefined;
+  #el: HTMLElement | null = null;
+  outsideViewport: "above" | "below" | false = false;
+  placeholderEl: HTMLDivElement | null = null;
+  pos: { top: number } | undefined = undefined;
+
+  set cell(cell: HTMLDivElement) {
+    this.#el = cell;
+    this.#cellPos = getAriaCellPos(cell);
+  }
+
+  get cellPos() {
+    return this.#cellPos;
+  }
+  set cellPos(cellPos) {
+    this.#cellPos = cellPos;
+  }
+
+  get el() {
+    return this.#el;
+  }
+  set el(el) {
+    this.#el = el;
+  }
+}

vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanel.css

@@ -2,12 +2,14 @@
   background-color: var(--salt-container-secondary-background);
   display: flex;
   flex-direction: column;
-  padding-top: var(--salt-spacing-300);
 
   .vuuTable {
-    --vuuTableCell-padding: 0;
     --table-background: var(--salt-container-secondary-background);
   }
+
+  .vuuTableCell-editable {
+    --vuuTableCell-padding: 0;
+  }
 }
 
 .vuuBulkEditPanel-toolbar {
@@ -21,5 +23,4 @@
 .vuuBulkEditPanel-table {
   align-items: center;
   flex: 1 1 auto;
-  padding: 10px;
 }