@vuu-ui/vuu-table 0.13.112 → 0.13.113-alpha.2

package/package.json

@@ -1,22 +1,22 @@
 {
-  "version": "0.13.112",
+  "version": "0.13.113-alpha.2",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.13.112",
-    "@vuu-ui/vuu-table-types": "0.13.112",
-    "@vuu-ui/vuu-protocol-types": "0.13.112"
+    "@vuu-ui/vuu-data-types": "0.13.113-alpha.2",
+    "@vuu-ui/vuu-table-types": "0.13.113-alpha.2",
+    "@vuu-ui/vuu-protocol-types": "0.13.113-alpha.2"
   },
   "dependencies": {
-    "@salt-ds/core": "1.48.0",
+    "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "0.13.112",
-    "@vuu-ui/vuu-data-react": "0.13.112",
-    "@vuu-ui/vuu-popups": "0.13.112",
-    "@vuu-ui/vuu-table-extras": "0.13.112",
-    "@vuu-ui/vuu-ui-controls": "0.13.112",
-    "@vuu-ui/vuu-utils": "0.13.112"
+    "@vuu-ui/vuu-context-menu": "0.13.113-alpha.2",
+    "@vuu-ui/vuu-data-react": "0.13.113-alpha.2",
+    "@vuu-ui/vuu-popups": "0.13.113-alpha.2",
+    "@vuu-ui/vuu-table-extras": "0.13.113-alpha.2",
+    "@vuu-ui/vuu-ui-controls": "0.13.113-alpha.2",
+    "@vuu-ui/vuu-utils": "0.13.113-alpha.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/types/Row.d.ts

@@ -1,5 +1,2 @@
 import { RowProps } from "@vuu-ui/vuu-table-types";
-export declare const RowProxy: import("react").ForwardRefExoticComponent<{
-    height?: number;
-} & import("react").RefAttributes<HTMLDivElement>>;
 export declare const Row: import("react").MemoExoticComponent<({ className: classNameProp, classNameGenerator, columnMap, columns, groupToggleTarget, highlighted, row, offset, onCellEdit, onClick, onDataEdited, onToggleGroup, searchPattern, showBookends, virtualColSpan, zebraStripes, ...htmlAttributes }: RowProps) => import("react/jsx-runtime").JSX.Element>;

package/types/Table.d.ts

@@ -46,6 +46,11 @@ 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.
@@ -130,6 +135,10 @@ 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,
@@ -164,12 +173,6 @@ 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 torm down.
+     * the session table torn down.
      */
     sessionDs: DataSource;
     response?: RpcResponse;
@@ -16,5 +16,6 @@ export interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {
      */
     parentDs: DataSource;
     onValidationStatusChange: (isValid: boolean) => void;
+    width?: number;
 }
-export declare const BulkEditPanel: ({ className, columns, sessionDs, parentDs, onValidationStatusChange, style, ...htmlAttributes }: BulkEditPanelProps) => ReactElement;
+export declare const BulkEditPanel: ({ className, columns, sessionDs, parentDs, onValidationStatusChange, style, width, ...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, PageKey } from "@vuu-ui/vuu-utils";
+import { type ArrowKey, type 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,8 +12,6 @@ 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,7 +2,6 @@ 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;
@@ -12,8 +11,9 @@ 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, classBase, columns, customHeader, headings, onCheckBoxColumnHeaderClick, onHeightMeasured, onMoveColumn, onMoveGroupColumn, onRemoveGroupColumn, onResizeColumn, onSortColumn, showColumnHeaderMenus, tableConfig, tableId, virtualColSpan, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+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>;

package/types/useCellEditing.d.ts

@@ -1,8 +1,10 @@
 import { FocusEventHandler, KeyboardEvent as ReactKeyboardEvent, MouseEvent } from "react";
+import { FocusCell } from "./useCellFocus";
 export interface CellEditingHookProps {
+    focusCell: FocusCell;
     navigate: () => void;
 }
-export declare const useCellEditing: ({ navigate }: CellEditingHookProps) => {
+export declare const useCellEditing: ({ focusCell, 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, MutableRefObject, RefObject } from "react";
+import { KeyboardEvent, MouseEvent, 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: MutableRefObject<CellFocusState>;
+    cellFocusStateRef: RefObject<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 { VuuSortType } from "@vuu-ui/vuu-protocol-types";
+import type { RpcResult, 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" | "selectionBookendWidth" | "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" | "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, selectionBookendWidth, 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, 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<import("@vuu-ui/vuu-protocol-types").RpcResultSuccess | import("@vuu-ui/vuu-protocol-types").RpcResultError | undefined>;
+    onDataEdited: (editState: DataCellEditEvent) => Promise<RpcResult | undefined>;
     onHeaderHeightMeasured: (height: number, count: number) => void;
     onMoveColumn: ColumnMoveHandler;
     onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;
@@ -54,11 +54,13 @@ 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, PinLocation, ResizePhase, RuntimeColumnDescriptor, TableAttributes, TableConfig, TableHeadings, TableSelectionModel } from "@vuu-ui/vuu-table-types";
+import { ColumnDescriptor, ColumnLayout, 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,11 +33,6 @@ 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;
@@ -65,7 +60,7 @@ export interface ColumnActionTableConfig extends WithBaseFilter<WithFullConfig>
     confirmed?: boolean;
     type: "tableConfig";
 }
-export type TableModelAction = ColumnActionHide | ColumnActionInit | ColumnActionMove | ColumnActionPin | ColumnActionResize | ColumnActionSetTableSchema | ColumnActionShow | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionTableConfig;
+export type TableModelAction = ColumnActionHide | ColumnActionInit | ColumnActionMove | ColumnActionResize | ColumnActionSetTableSchema | ColumnActionShow | ColumnActionUpdate | ColumnActionUpdateProp | ColumnActionTableConfig;
 export type TableModelActionDispatch = (action: TableModelAction) => void;
 export interface TableModelHookProps {
     config: TableConfig;
@@ -79,11 +74,13 @@ 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>;

package/cjs/Row.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var rowCss = ".vuuTableRow {\n  background: var(--row-background, var(--table-background));\n  border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n  box-sizing: border-box;\n  color: var(--salt-content-secondary-foreground);\n  contain: layout;\n  /* contain-intrinsic-height: var(--row-height);\n  content-visibility: auto; */\n  height: var(--row-height);\n  line-height: var(--row-height);\n  position: absolute;\n  top: 0;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.vuuTableRow-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n\n.vuuTableRow-even {\n  --row-background: var(--row-background-even);\n}\n\n.vuuTableRow-highlighted {\n  background: var(--salt-selectable-background-hover);\n}\n\n\n.vuuTableRow[aria-selected=\"true\"] {\n  background-color: var(--VuuTableRow-selected-background, var(--salt-selectable-background-selected));\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\n  --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n  --cell-borderColor: transparent;\n  --vuu-selection-decorator-bg: transparent;\n  transform: none !important;\n  z-index: 1;\n}\n";
-
-module.exports = rowCss;
-//# sourceMappingURL=Row.css.js.map

package/cjs/Row.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Row.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/esm/Row.css.js

@@ -1,4 +0,0 @@
-var rowCss = ".vuuTableRow {\n  background: var(--row-background, var(--table-background));\n  border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n  box-sizing: border-box;\n  color: var(--salt-content-secondary-foreground);\n  contain: layout;\n  /* contain-intrinsic-height: var(--row-height);\n  content-visibility: auto; */\n  height: var(--row-height);\n  line-height: var(--row-height);\n  position: absolute;\n  top: 0;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.vuuTableRow-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n\n.vuuTableRow-even {\n  --row-background: var(--row-background-even);\n}\n\n.vuuTableRow-highlighted {\n  background: var(--salt-selectable-background-hover);\n}\n\n\n.vuuTableRow[aria-selected=\"true\"] {\n  background-color: var(--VuuTableRow-selected-background, var(--salt-selectable-background-selected));\n}\n\n.vuuTableRow[aria-expanded=\"true\"] {\n  --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n  --cell-borderColor: transparent;\n  --vuu-selection-decorator-bg: transparent;\n  transform: none !important;\n  z-index: 1;\n}\n";
-
-export { rowCss as default };
-//# sourceMappingURL=Row.css.js.map

package/esm/Row.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Row.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}