@vuu-ui/vuu-table-types 0.9.1 → 0.9.3

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,19 +14,20 @@ 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,
   RowClassNameGenerator,
 } from "@vuu-ui/vuu-utils";
 import type {
+  ComponentType,
   CSSProperties,
   FunctionComponent,
+  FunctionComponentElement,
   HTMLAttributes,
   MouseEvent,
-  ReactElement,
 } from "react";
-import { CellPos } from "@vuu-ui/vuu-table/src/table-dom-utils";
 
 export declare type GroupToggleTarget = "toggle-icon" | "group-column";
 
@@ -43,11 +42,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;
@@ -60,9 +70,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,
@@ -88,7 +101,7 @@ export declare type TableRowClickHandlerInternal = (
 
 export interface TableCellRendererProps
   extends Omit<TableCellProps, "onDataEdited"> {
-  onCommit?: DataItemCommitHandler;
+  onEdit?: DataItemEditHandler;
 }
 
 /**
@@ -255,6 +268,13 @@ export interface ColumnDescriptor extends DataValueDescriptor {
   pin?: PinLocation;
   resizeable?: boolean;
   sortable?: boolean;
+  /**
+   * 'client' columns will not receive data from dataSource.
+   * They can be used with a custom renderer, e.g to render
+   * action buttons.
+   * default is 'server'
+   */
+  source?: "client" | "server";
   width?: number;
 }
 
@@ -267,6 +287,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>;
@@ -277,8 +298,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;
@@ -395,6 +414,7 @@ export interface RowProps extends BaseRowProps {
   groupToggleTarget?: GroupToggleTarget;
   highlighted?: boolean;
   offset: number;
+  onCellEdit?: CellEditHandler;
   onClick?: TableRowClickHandlerInternal;
   onDataEdited?: DataCellEditHandler;
   onToggleGroup?: (row: DataSourceRow, column: RuntimeColumnDescriptor) => void;
@@ -414,8 +434,9 @@ export interface HeaderCellProps
 
 export declare type TableConfigChangeHandler = (config: TableConfig) => void;
 
-export declare type CustomHeaderComponent = FC<BaseRowProps>;
-export declare type CustomHeaderElement = ReactElement;
+export declare type CustomHeaderComponent = ComponentType<BaseRowProps>;
+export declare type CustomHeaderElement =
+  FunctionComponentElement<BaseRowProps>;
 export declare type CustomHeader = CustomHeaderComponent | CustomHeaderElement;
 
 /**
@@ -423,14 +444,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.1",
+  "version": "0.9.3",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.9.1",
-    "@vuu-ui/vuu-filter-types": "0.9.1",
-    "@vuu-ui/vuu-protocol-types": "0.9.1"
+    "@vuu-ui/vuu-data-types": "0.9.3",
+    "@vuu-ui/vuu-filter-types": "0.9.3",
+    "@vuu-ui/vuu-protocol-types": "0.9.3"
   },
   "author": "heswell",
   "license": "Apache-2.0",