@vuu-ui/vuu-table-types 0.9.0 → 0.9.2

package/index.d.ts

@@ -1,12 +1,10 @@
 import type {
+  DataSourceRow,
   DataSourceRowObject,
   DataValueDescriptor,
   DataValueTypeSimple,
-  EditValidationRule,
-} from "@vuu-ui/vuu-data-types";
-import type {
   DataValueValidationChecker,
-  DataSourceRow,
+  EditValidationRule,
 } from "@vuu-ui/vuu-data-types";
 import type { Filter } from "@vuu-ui/vuu-filter-types";
 import type {
@@ -16,6 +14,7 @@ import type {
   VuuSortType,
   VuuTable,
 } from "@vuu-ui/vuu-protocol-types";
+import { CellPos } from "@vuu-ui/vuu-table/src/table-dom-utils";
 import type {
   ColumnMap,
   DateTimePattern,
@@ -28,7 +27,8 @@ import type {
   MouseEvent,
   ReactElement,
 } from "react";
-import { CellPos } from "@vuu-ui/vuu-table/src/table-dom-utils";
+
+export declare type GroupToggleTarget = "toggle-icon" | "group-column";
 
 export declare type TableSelectionModel =
   | "none"
@@ -41,11 +41,22 @@ export declare type TableHeadings = TableHeading[][];
 
 export declare type ValueFormatter = (value: unknown) => string;
 
-export declare type DataCellEditHandler = (
-  row: DataSourceRow,
-  columnName: string,
-  value: VuuRowDataItemType,
-) => Promise<string | true>;
+export interface EditEventState {
+  editType?: EditType;
+  isValid?: boolean;
+  // value: unknown;
+  previousValue?: VuuRowDataItemType;
+  value: VuuRowDataItemType;
+}
+
+export interface DataCellEditEvent extends EditEventState {
+  row: DataSourceRow;
+  columnName: string;
+}
+
+export declare type DataCellEditNotification = (
+  editEvent: DataCellEditEvent,
+) => void;
 
 export interface TableCellProps {
   className?: string;
@@ -58,9 +69,12 @@ export interface TableCellProps {
 
 export declare type CommitResponse = Promise<true | string>;
 
-export declare type DataItemCommitHandler<
-  T extends VuuRowDataItemType = VuuRowDataItemType,
-> = (value: T) => CommitResponse;
+export declare type EditType = "commit" | "change" | "cancel";
+
+declare type DataItemEditHandler<T extends EditType = EditType> = (
+  editState: EditEventState,
+  editPhase: T,
+) => T extends "commit" ? Promise<string | true> : void;
 
 export declare type TableRowSelectHandler = (
   row: DataSourceRowObject | null,
@@ -86,7 +100,7 @@ export declare type TableRowClickHandlerInternal = (
 
 export interface TableCellRendererProps
   extends Omit<TableCellProps, "onDataEdited"> {
-  onCommit?: DataItemCommitHandler;
+  onEdit?: DataItemEditHandler;
 }
 
 /**
@@ -234,6 +248,11 @@ export interface ColumnDescriptor extends DataValueDescriptor {
   colHeaderContentRenderer?: string;
   colHeaderLabelRenderer?: string;
   flex?: number;
+  /**
+   * Only used when the column is included in a grouby clause.
+   * The icon will be displayed alongside the group label
+   */
+  getIcon?: (row: DataSourceRow) => string | undefined;
   /**
    Optional additional level(s) of heading to display above label.
    May span multiple columns, if multiple adjacent columns declare
@@ -260,6 +279,7 @@ export interface ColumnDescriptorCustomRenderer
  * definitin with internal state values. */
 export interface RuntimeColumnDescriptor extends ColumnDescriptor {
   align?: "left" | "right";
+  ariaColIndex: number;
   CellRenderer?: FunctionComponent<TableCellRendererProps>;
   HeaderCellLabelRenderer?: FunctionComponent<HeaderCellProps>;
   HeaderCellContentRenderer?: FunctionComponent<HeaderCellProps>;
@@ -270,8 +290,6 @@ export interface RuntimeColumnDescriptor extends ColumnDescriptor {
   filter?: Filter;
   flex?: number;
   heading?: [...string[]];
-  /** A 1 based index for aria-colindex */
-  index?: number;
   isGroup?: boolean;
   isSystemColumn?: boolean;
   label: string;
@@ -385,12 +403,15 @@ export interface BaseRowProps {
 export interface RowProps extends BaseRowProps {
   classNameGenerator?: RowClassNameGenerator;
   columnMap: ColumnMap;
+  groupToggleTarget?: GroupToggleTarget;
   highlighted?: boolean;
-  row: DataSourceRow;
   offset: number;
+  onCellEdit?: CellEditHandler;
   onClick?: TableRowClickHandlerInternal;
   onDataEdited?: DataCellEditHandler;
   onToggleGroup?: (row: DataSourceRow, column: RuntimeColumnDescriptor) => void;
+  row: DataSourceRow;
+  showBookends?: boolean;
   zebraStripes?: boolean;
 }
 
@@ -414,14 +435,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;
-};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@vuu-ui/vuu-table-types",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.9.0",
-    "@vuu-ui/vuu-filter-types": "0.9.0",
-    "@vuu-ui/vuu-protocol-types": "0.9.0"
+    "@vuu-ui/vuu-data-types": "0.9.2",
+    "@vuu-ui/vuu-filter-types": "0.9.2",
+    "@vuu-ui/vuu-protocol-types": "0.9.2"
   },
   "author": "heswell",
   "license": "Apache-2.0",