update bulk-edit-panel

vuu-ui/packages/vuu-data-react/src/data-editing/edit-rule-validation-checker.ts

@@ -19,7 +19,7 @@ export function getEditValidationRules(
 ) {
   if (isTypeDescriptor(descriptor.type)) {
     return editPhase === "*"
-      ? descriptor.type.rules
+      ? (descriptor.type.rules ?? [])
       : (descriptor.type.rules?.filter(
           ({ phase: a = "commit" }) => a === editPhase,
         ) ?? NO_VALIDATION_RULES);

vuu-ui/packages/vuu-data-react/src/hooks/useVuuMenuActions.tsx

@@ -210,7 +210,7 @@ export const useVuuMenuActions = ({
             dataSource={sessionDs}
             onSubmit={handleSubmit}
             parentDs={dataSource}
-            handleChange={handleChange}
+            onStateChange={handleChange}
           />,
           "Multi Row Edit",
           [

vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx

@@ -1,4 +1,4 @@
-import { TableCellProps } from "@finos/vuu-table-types";
+import { TableCellRendererProps } from "@finos/vuu-table-types";
 import {
   dataAndColumnUnchanged,
   DOWN1,
@@ -46,7 +46,7 @@ export const BackgroundCell = memo(function BackgroundCell({
   column,
   columnMap,
   row,
-}: TableCellProps) {
+}: TableCellRendererProps) {
   //TODO what about click handling
 
   const targetWindow = useWindow();

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

@@ -1,12 +1,10 @@
 import type {
+  DataSourceRow,
   DataSourceRowObject,
   DataValueDescriptor,
   DataValueTypeSimple,
-  EditValidationRule,
-} from "@finos/vuu-data-types";
-import type {
   DataValueValidationChecker,
-  DataSourceRow,
+  EditValidationRule,
 } from "@finos/vuu-data-types";
 import type { Filter } from "@finos/vuu-filter-types";
 import type {
@@ -16,6 +14,7 @@ import type {
   VuuSortType,
   VuuTable,
 } from "@finos/vuu-protocol-types";
+import { CellPos } from "@finos/vuu-table/src/table-dom-utils";
 import type {
   ColumnMap,
   DateTimePattern,
@@ -28,7 +27,6 @@ import type {
   MouseEvent,
   ReactElement,
 } from "react";
-import { CellPos } from "@finos/vuu-table/src/table-dom-utils";
 
 export declare type GroupToggleTarget = "toggle-icon" | "group-column";
 
@@ -46,7 +44,7 @@ export declare type ValueFormatter = (value: unknown) => string;
 export interface EditEventState {
   editType?: EditType;
   isValid?: boolean;
-  value: unknown;
+  // value: unknown;
   previousValue?: VuuRowDataItemType;
   value: VuuRowDataItemType;
 }
@@ -61,6 +59,7 @@ export declare type DataCellEditNotification = (
 ) => void;
 
 export interface TableCellProps {
+  ariaColIndex: number;
   className?: string;
   column: RuntimeColumnDescriptor;
   columnMap: ColumnMap;
@@ -101,7 +100,7 @@ export declare type TableRowClickHandlerInternal = (
 ) => void;
 
 export interface TableCellRendererProps
-  extends Omit<TableCellProps, "onDataEdited"> {
+  extends Omit<TableCellProps, "ariaColIndex" | "onDataEdited"> {
   onEdit?: DataItemEditHandler;
 }
 
@@ -420,6 +419,7 @@ export interface RowProps extends BaseRowProps {
 
 export interface HeaderCellProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+  ariaColIndex: number;
   classBase?: string;
   column: RuntimeColumnDescriptor;
   onClick?: (evt: React.MouseEvent | React.KeyboardEvent) => void;

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

@@ -1,17 +1,17 @@
 import { RowProps, RuntimeColumnDescriptor } from "@finos/vuu-table-types";
 import {
+  RowSelected,
   isGroupColumn,
   isJsonColumn,
   isJsonGroup,
   isNotHidden,
   metadataKeys,
   queryClosest,
-  RowSelected,
 } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
-import { forwardRef, memo, MouseEvent, useCallback } from "react";
+import { MouseEvent, forwardRef, memo, useCallback } from "react";
 import { TableCell, TableGroupCell } from "./table-cell";
 
 import rowCss from "./Row.css";
@@ -146,13 +146,14 @@ export const Row = memo(
           <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />
         ) : null}
         <VirtualColSpan width={virtualColSpan} />
-        {columns.filter(isNotHidden).map((column) => {
+        {columns.filter(isNotHidden).map((column, i) => {
           const isGroup = isGroupColumn(column);
           const isJsonCell = isJsonColumn(column);
           const Cell = isGroup && !isJsonCell ? TableGroupCell : TableCell;
 
           return (
             <Cell
+              ariaColIndex={i + 1}
               column={column}
               columnMap={columnMap}
               key={column.name}

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

@@ -10,7 +10,7 @@ import { hasValidationRules, isTypeDescriptor } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
-import { HTMLAttributes, useMemo, useRef } from "react";
+import { HTMLAttributes, useCallback, useMemo, useState } from "react";
 import { Table } from "../Table";
 import { BulkEditRow, type EditValueChangeHandler } from "./BulkEditRow";
 import { useBulkEditPanel } from "./useBulkEditPanel";
@@ -25,7 +25,7 @@ export interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {
   response?: RpcResponse;
   mainTableName?: string;
   parentDs: DataSource;
-  handleChange: (val: boolean) => void;
+  onStateChange: (val: boolean) => void;
 }
 
 const addRenderer = (
@@ -45,7 +45,7 @@ export const BulkEditPanel = ({
   columns,
   dataSource,
   parentDs,
-  handleChange,
+  onStateChange,
   ...htmlAttributes
 }: BulkEditPanelProps): JSX.Element => {
   const targetWindow = useWindow();
@@ -81,7 +81,16 @@ export const BulkEditPanel = ({
     };
   }, [columns, dataSource.columns]);
 
-  const bulkRowValidRef = useRef(true);
+  const [rowState, setRowState] = useState(true);
+
+  const handleRowChange = useCallback(
+    (isValid: boolean) => {
+      if (isValid !== rowState) {
+        setRowState(isValid);
+      }
+    },
+    [rowState],
+  );
 
   const bulkEditRow = useMemo(() => {
     const handleBulkChange: EditValueChangeHandler = (column, value) => {
@@ -97,24 +106,23 @@ export const BulkEditPanel = ({
       <BulkEditRow
         dataSource={parentDs}
         onBulkChange={handleBulkChange}
-        bulkRowValidRef={bulkRowValidRef}
+        onRowChange={handleRowChange}
       />
     );
-  }, [dataSource, parentDs]);
+  }, [dataSource, handleRowChange, parentDs]);
 
-  const { fieldContainerRef, onChange, onFocus } = useBulkEditPanel({
+  const { onDataEdited } = useBulkEditPanel({
     columnDescriptors: config.columns,
     dataSource,
-    bulkRowValidRef,
-    handleChange,
+    onChange: onStateChange,
+    rowState,
   });
 
   return (
     <div
       {...htmlAttributes}
       className={cx(classBase, className)}
       style={{ display: "flex", flexDirection: "column" }}
-      ref={fieldContainerRef}
     >
       <div className={`${classBase}-toolbar`} />
       <div className={`${classBase}-table`}>
@@ -127,8 +135,7 @@ export const BulkEditPanel = ({
           width={600}
           showColumnHeaderMenus={false}
           selectionModel="none"
-          onChange={onChange}
-          onFocus={onFocus}
+          onDataEdited={onDataEdited}
         />
       </div>
     </div>

vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanelDialog.tsx

@@ -32,10 +32,8 @@ export const BulkEditPanelDialog = ({
   });
 
   const [valid, setValid] = useState(true);
-  const handleChange = useCallback((isValid: boolean) => {
-    //   console.log("setting to: ", isValid);
+  const handleStateChange = useCallback((isValid: boolean) => {
     setValid(isValid);
-    //   console.log("current valid value: ", valid);
   }, []);
 
   const handleSubmit = () => {
@@ -50,7 +48,7 @@ export const BulkEditPanelDialog = ({
         dataSource={sessionDs}
         onSubmit={handleSubmit}
         parentDs={parentDs}
-        handleChange={handleChange}
+        onStateChange={handleStateChange}
       />
       <DialogActions>
         <Button key="cancel" onClick={closeDialog}>

vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx

@@ -1,32 +1,35 @@
 import { getDataItemEditControl } from "@finos/vuu-data-react";
 import { DataSource } from "@finos/vuu-data-types";
-import { ColumnDescriptor } from "@finos/vuu-table-types";
+import { BaseRowProps, ColumnDescriptor } from "@finos/vuu-table-types";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { HTMLAttributes, MutableRefObject } from "react";
+import { HTMLAttributes } from "react";
 import { VirtualColSpan } from "../VirtualColSpan";
 import { useHeaderProps } from "../table-header";
 import { useBulkEditRow } from "./useBulkEditRow";
 
 import bulkEditRowCss from "./BulkEditRow.css";
+import { VuuRowDataItemType } from "@finos/vuu-protocol-types";
 
 const classBase = "vuuBulkEditRow";
 
 export type EditValueChangeHandler = (
   column: ColumnDescriptor,
-  value: string,
+  value: VuuRowDataItemType,
 ) => void;
 export interface BulkEditProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  extends Partial<BaseRowProps>,
+    Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   dataSource: DataSource;
   onBulkChange: EditValueChangeHandler;
-  bulkRowValidRef: MutableRefObject<boolean>;
+  onRowChange: (isValid: boolean) => void;
 }
 
 export const BulkEditRow = ({
+  ariaRole,
   dataSource,
   onBulkChange,
-  bulkRowValidRef,
+  onRowChange,
   ...htmlAttributes
 }: BulkEditProps) => {
   const targetWindow = useWindow();
@@ -42,7 +45,7 @@ export const BulkEditRow = ({
     useBulkEditRow({
       descriptors: columns,
       onBulkChange,
-      bulkRowValidRef,
+      onRowChange,
     });
 
   return (
@@ -51,6 +54,7 @@ export const BulkEditRow = ({
       className={classBase}
       onFocus={onFocus}
       ref={formFieldsContainerRef}
+      role={ariaRole}
     >
       <VirtualColSpan width={virtualColSpan} />
       {columns.map((column, i) => {