@vuu-ui/vuu-table 0.13.111-alpha.2 → 0.13.111

package/types/Table.d.ts

@@ -46,11 +46,6 @@ export interface TableProps extends Omit<MeasuredContainerProps, "onDragStart" |
      * required if a fully featured column picker is to be available
      */
     availableColumns?: SchemaColumn[];
-    /**
-     * Pixel height of header cells. If specified here, this will take precedence over CSS
-     * values and Table will not respond to density changes.
-     */
-    colHeaderRowHeight?: number;
     /**
      * Provide configuration settings for Table. At minimun, column
      * descriptors must be provided.
@@ -135,10 +130,6 @@ export interface TableProps extends Omit<MeasuredContainerProps, "onDragStart" |
      * provide a 'Delete' or 'Cancel' button. Implement this functionality in a rowActionHandler.
      */
     rowActionHandlers?: Record<string, RowActionHandler>;
-    /**
-     * Allows opt-in to a predefined style pattern that renders a border around a row selection block.
-     */
-    rowSelectionBorder?: boolean;
     /**
      * When a row is selected and onSelect provided, onSelect will be invoked with a
      * DataSourceRowObject, derived from the internal representation of a data row,
@@ -173,6 +164,12 @@ export interface TableProps extends Omit<MeasuredContainerProps, "onDragStart" |
      * Will be used to highlight matching text.
      */
     searchPattern?: string;
+    /**
+     * Selection Bookends style the left and right edge of a selection block.
+     * They are optional, value currently defaults to 4.
+     * TODO this should just live in CSS
+     */
+    selectionBookendWidth?: number;
     /**
      * Selection behaviour for Table:
      * `none` selection disabled

package/types/bulk-edit/BulkEditPanel.d.ts

@@ -6,7 +6,7 @@ export interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The session dataSource. This is where the edits will be processed until final
      * confirmation, at which point edits will be applied to parent dataSource and
-     * the session table torn down.
+     * the session table torm down.
      */
     sessionDs: DataSource;
     response?: RpcResponse;
@@ -16,6 +16,5 @@ export interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {
      */
     parentDs: DataSource;
     onValidationStatusChange: (isValid: boolean) => void;
-    width?: number;
 }
-export declare const BulkEditPanel: ({ className, columns, sessionDs, parentDs, onValidationStatusChange, style, width, ...htmlAttributes }: BulkEditPanelProps) => ReactElement;
+export declare const BulkEditPanel: ({ className, columns, sessionDs, parentDs, onValidationStatusChange, style, ...htmlAttributes }: BulkEditPanelProps) => ReactElement;

package/types/table-dom-utils.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from "react";
 import { ScrollDirection } from "./useTableScroll";
-import { type ArrowKey, type PageKey } from "@vuu-ui/vuu-utils";
+import type { ArrowKey, PageKey } from "@vuu-ui/vuu-utils";
 import type { CellPos } from "@vuu-ui/vuu-table-types";
 export type NavigationKey = PageKey | ArrowKey;
 export declare const headerCellQuery: (colIdx: number) => string;
@@ -12,6 +12,8 @@ export declare const getFocusedCell: (el: HTMLElement | Element | null) => HTMLD
 export declare const cellIsEditable: (cell: HTMLDivElement | null) => boolean | undefined;
 export declare const cellDropdownShowing: (cell: HTMLDivElement | null) => boolean;
 export declare const cellIsTextInput: (cell: HTMLElement) => boolean;
+export declare const getAriaRowIndex: (rowElement: HTMLElement | null) => number;
+export declare const getAriaColIndex: (cellElement: HTMLElement | null) => number;
 export declare const getRowElementByAriaIndex: (container: HTMLDivElement | EventTarget, rowIndex: number) => HTMLElement | null;
 export declare const getIndexFromCellElement: (cellElement: HTMLElement | null) => number;
 export declare const getAriaCellPos: (tableCell: HTMLDivElement) => CellPos;

package/types/table-header/TableHeader.d.ts

@@ -2,6 +2,7 @@ import { VuuSortType } from "@vuu-ui/vuu-protocol-types";
 import { ColumnDescriptor, ColumnMoveHandler, CustomHeader, HeaderCellProps, RuntimeColumnDescriptor, TableColumnResizeHandler, TableConfig, TableHeadings } from "@vuu-ui/vuu-table-types";
 export type ColumnSortHandler = (column: ColumnDescriptor, addToExistingSort: boolean, sortType?: VuuSortType) => void;
 export interface TableHeaderProps extends Pick<HeaderCellProps, "allRowsSelected" | "allowDragColumnHeader" | "allowSelectAll" | "onCheckBoxColumnHeaderClick" | "showColumnHeaderMenus"> {
+    classBase?: string;
     columns: RuntimeColumnDescriptor[];
     customHeader?: CustomHeader | CustomHeader[];
     headings: TableHeadings;
@@ -11,9 +12,8 @@ export interface TableHeaderProps extends Pick<HeaderCellProps, "allRowsSelected
     onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;
     onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;
     onSortColumn: ColumnSortHandler;
-    showBookends?: boolean;
     tableConfig: TableConfig;
     tableId: string;
     virtualColSpan?: number;
 }
-export declare const TableHeader: import("react").MemoExoticComponent<({ allowDragColumnHeader, allowSelectAll, allRowsSelected, columns, customHeader, headings, onCheckBoxColumnHeaderClick, onHeightMeasured, onMoveColumn, onMoveGroupColumn, onRemoveGroupColumn, onResizeColumn, onSortColumn, showBookends, showColumnHeaderMenus, tableConfig, tableId, virtualColSpan, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TableHeader: import("react").MemoExoticComponent<({ allowDragColumnHeader, allowSelectAll, allRowsSelected, classBase, columns, customHeader, headings, onCheckBoxColumnHeaderClick, onHeightMeasured, onMoveColumn, onMoveGroupColumn, onRemoveGroupColumn, onResizeColumn, onSortColumn, showColumnHeaderMenus, tableConfig, tableId, virtualColSpan, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element>;

package/types/useCellEditing.d.ts

@@ -1,10 +1,8 @@
 import { FocusEventHandler, KeyboardEvent as ReactKeyboardEvent, MouseEvent } from "react";
-import { FocusCell } from "./useCellFocus";
 export interface CellEditingHookProps {
-    focusCell: FocusCell;
     navigate: () => void;
 }
-export declare const useCellEditing: ({ focusCell, navigate, }: CellEditingHookProps) => {
+export declare const useCellEditing: ({ navigate }: CellEditingHookProps) => {
     onBlur: FocusEventHandler;
     onDoubleClick: (e: MouseEvent<HTMLElement>) => void;
     onFocus: FocusEventHandler;

package/types/useKeyboardNavigation.d.ts

@@ -1,6 +1,6 @@
 import { VuuRange } from "@vuu-ui/vuu-protocol-types";
 import { PageKey } from "@vuu-ui/vuu-utils";
-import { KeyboardEvent, MouseEvent, RefObject } from "react";
+import { KeyboardEvent, MouseEvent, MutableRefObject, RefObject } from "react";
 import { TableNavigationStyle } from "./Table";
 import { NavigationKey } from "./table-dom-utils";
 import { ScrollRequestHandler } from "./useTableScroll";
@@ -10,7 +10,7 @@ export declare const isNavigationKey: (key: string, navigationStyle: TableNaviga
 export declare const isPagingKey: (key: string) => key is PageKey;
 export type GroupToggleHandler = (treeNodeOperation: "expand" | "collapse", rowIndex: number) => void;
 export interface NavigationHookProps {
-    cellFocusStateRef: RefObject<CellFocusState>;
+    cellFocusStateRef: MutableRefObject<CellFocusState>;
     containerRef: RefObject<HTMLElement | null>;
     columnCount?: number;
     headerCount: number;

package/types/useTable.d.ts

@@ -1,5 +1,5 @@
 import type { DataSourceRow } from "@vuu-ui/vuu-data-types";
-import type { RpcResult, VuuSortType } from "@vuu-ui/vuu-protocol-types";
+import type { VuuSortType } from "@vuu-ui/vuu-protocol-types";
 import type { ColumnDescriptor, ColumnMoveHandler, DataCellEditEvent, RuntimeColumnDescriptor, TableColumnResizeHandler, TableConfig, TableRowClickHandlerInternal, TableSelectionModel } from "@vuu-ui/vuu-table-types";
 import { MeasuredProps, MeasuredSize } from "@vuu-ui/vuu-ui-controls";
 import { FocusEvent, KeyboardEvent, MouseEventHandler, RefObject } from "react";
@@ -8,13 +8,13 @@ type HeaderState = {
     height: number;
     count: number;
 };
-export interface TableHookProps extends MeasuredProps, Pick<TableProps, "allowCellBlockSelection" | "allowDragDrop" | "allowSelectCheckboxRow" | "autoSelectFirstRow" | "autoSelectRowKey" | "availableColumns" | "config" | "dataSource" | "disableFocus" | "highlightedIndex" | "id" | "navigationStyle" | "onAvailableColumnsChange" | "onConfigChange" | "onDataEdited" | "onDragStart" | "onDrop" | "onHighlight" | "onSelect" | "onSelectCellBlock" | "onSelectionChange" | "onRowClick" | "renderBufferSize" | "revealSelected" | "rowToObject" | "scrollingApiRef" | "showColumnHeaderMenus" | "showColumnHeaders" | "showPaginationControls"> {
+export interface TableHookProps extends MeasuredProps, Pick<TableProps, "allowCellBlockSelection" | "allowDragDrop" | "allowSelectCheckboxRow" | "autoSelectFirstRow" | "autoSelectRowKey" | "availableColumns" | "config" | "dataSource" | "disableFocus" | "highlightedIndex" | "id" | "navigationStyle" | "onAvailableColumnsChange" | "onConfigChange" | "onDataEdited" | "onDragStart" | "onDrop" | "onHighlight" | "onSelect" | "onSelectCellBlock" | "onSelectionChange" | "onRowClick" | "renderBufferSize" | "revealSelected" | "rowToObject" | "scrollingApiRef" | "selectionBookendWidth" | "showColumnHeaderMenus" | "showColumnHeaders" | "showPaginationControls"> {
     containerRef: RefObject<HTMLDivElement | null>;
     rowHeight: number;
     selectionModel: TableSelectionModel;
     size: MeasuredSize;
 }
-export declare const useTable: ({ allowCellBlockSelection, allowSelectCheckboxRow, allowDragDrop, autoSelectFirstRow, autoSelectRowKey, availableColumns, config, containerRef, dataSource, disableFocus, highlightedIndex: highlightedIndexProp, id, navigationStyle, onAvailableColumnsChange, onConfigChange, onDataEdited: onDataEditedProp, onDragStart, onDrop, onHighlight, onRowClick: onRowClickProp, onSelect, onSelectCellBlock, onSelectionChange, renderBufferSize, revealSelected, rowHeight, rowToObject, scrollingApiRef, selectionModel, showColumnHeaderMenus, showColumnHeaders, showPaginationControls, size, }: TableHookProps) => {
+export declare const useTable: ({ allowCellBlockSelection, allowSelectCheckboxRow, allowDragDrop, autoSelectFirstRow, autoSelectRowKey, availableColumns, config, containerRef, dataSource, disableFocus, highlightedIndex: highlightedIndexProp, id, navigationStyle, onAvailableColumnsChange, onConfigChange, onDataEdited: onDataEditedProp, onDragStart, onDrop, onHighlight, onRowClick: onRowClickProp, onSelect, onSelectCellBlock, onSelectionChange, renderBufferSize, revealSelected, rowHeight, rowToObject, scrollingApiRef, selectionBookendWidth, selectionModel, showColumnHeaderMenus, showColumnHeaders, showPaginationControls, size, }: TableHookProps) => {
     allRowsSelected: boolean;
     "aria-rowcount": number;
     cellBlock: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
@@ -36,7 +36,7 @@ export declare const useTable: ({ allowCellBlockSelection, allowSelectCheckboxRo
     onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
     onMouseDown: MouseEventHandler;
     onContextMenu: ((evt: import("react").MouseEvent<HTMLElement>) => void) | undefined;
-    onDataEdited: (editState: DataCellEditEvent) => Promise<RpcResult | undefined>;
+    onDataEdited: (editState: DataCellEditEvent) => Promise<import("@vuu-ui/vuu-protocol-types").RpcResultSuccess | import("@vuu-ui/vuu-protocol-types").RpcResultError | undefined>;
     onHeaderHeightMeasured: (height: number, count: number) => void;
     onMoveColumn: ColumnMoveHandler;
     onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;
@@ -54,13 +54,11 @@ export declare const useTable: ({ allowCellBlockSelection, allowSelectCheckboxRo
     };
     tableAttributes: {
         availableWidth: number;
-        checkboxColumnWidth?: number;
         columnDefaultWidth?: number;
         columnFormatHeader?: "capitalize" | "uppercase";
         columnLayout?: import("@vuu-ui/vuu-table-types").ColumnLayout;
         columnSeparators?: boolean;
         rowSeparators?: boolean;
-        selectionBookendWidth?: number;
         zebraStripes?: boolean;
     };
     tableBodyRef: import("react").RefCallback<HTMLDivElement>;

package/types/useTableModel.d.ts

@@ -1,5 +1,5 @@
 import { DataSource, TableSchema, WithBaseFilter, WithFullConfig } from "@vuu-ui/vuu-data-types";
-import { ColumnDescriptor, ColumnLayout, ResizePhase, RuntimeColumnDescriptor, TableAttributes, TableConfig, TableHeadings, TableSelectionModel } from "@vuu-ui/vuu-table-types";
+import { ColumnDescriptor, ColumnLayout, PinLocation, ResizePhase, RuntimeColumnDescriptor, TableAttributes, TableConfig, TableHeadings, TableSelectionModel } from "@vuu-ui/vuu-table-types";
 /**
  * TableModel represents state used internally to manage Table. It is
  * derived initially from the TableConfig provided by user, along with the
@@ -33,6 +33,11 @@ export interface ColumnActionMove {
     column: RuntimeColumnDescriptor;
     moveBy?: 1 | -1;
 }
+export interface ColumnActionPin {
+    type: "pinColumn";
+    column: ColumnDescriptor;
+    pin: PinLocation | false;
+}
 export interface ColumnActionResize {
     type: "resizeColumn";
     column: RuntimeColumnDescriptor;
@@ -60,7 +65,7 @@ export interface ColumnActionTableConfig extends WithBaseFilter<WithFullConfig>
     confirmed?: boolean;
     type: "tableConfig";
 }
-export type TableModelAction = ColumnActionHide | ColumnActionInit | ColumnActionMove | ColumnActionResize | ColumnActionSetTableSchema | ColumnActionShow | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionTableConfig;
+export type TableModelAction = ColumnActionHide | ColumnActionInit | ColumnActionMove | ColumnActionPin | ColumnActionResize | ColumnActionSetTableSchema | ColumnActionShow | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionTableConfig;
 export type TableModelActionDispatch = (action: TableModelAction) => void;
 export interface TableModelHookProps {
     config: TableConfig;
@@ -74,13 +79,11 @@ export declare const useTableModel: ({ config: tableConfigProp, dataSource, sele
     headings: TableHeadings;
     tableAttributes: {
         availableWidth: number;
-        checkboxColumnWidth?: number;
         columnDefaultWidth?: number;
         columnFormatHeader?: "capitalize" | "uppercase";
         columnLayout?: ColumnLayout;
         columnSeparators?: boolean;
         rowSeparators?: boolean;
-        selectionBookendWidth?: number;
         zebraStripes?: boolean;
     };
     tableConfig: Readonly<TableConfig>;