@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.1

package/esm/useTable.js

@@ -1,740 +0,0 @@
-import { useColumnActions } from '@vuu-ui/vuu-table-extras';
-import { useDragDrop } from '@vuu-ui/vuu-ui-controls';
-import { useEditSession, useStableReference, useLayoutEffectSkipFirst, updateColumn, logUnhandledMessage, toggleOrApplySort, isValidNumber, getAllCellsInColumn, getPinStateFromElement, isJsonGroup, isGroupColumn, getAriaRowIndex, metadataKeys } from '@vuu-ui/vuu-utils';
-import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
-import { useCellBlockSelection } from './cell-block/useCellBlockSelection.js';
-import { CellFocusState } from './CellFocusState.js';
-import { updateTableConfig } from './table-config.js';
-import { getHeaderCell } from './table-dom-utils.js';
-import { useCellEditing } from './useCellEditing.js';
-import { useCellFocus } from './useCellFocus.js';
-import { useDataSource } from './table-data-source/useDataSource.js';
-import { useKeyboardNavigation } from './useKeyboardNavigation.js';
-import { useRowClassNameGenerators } from './useRowClassNameGenerators.js';
-import { useSelection } from './useSelection.js';
-import { useTableContextMenu } from './useTableContextMenu.js';
-import { useTableModel } from './useTableModel.js';
-import { useTableScroll } from './useTableScroll.js';
-import { useTableViewport } from './useTableViewport.js';
-
-const nullHeaderState = {
-  height: -1,
-  count: -1
-};
-const zeroHeaderState = {
-  height: 0,
-  count: 0
-};
-const { IS_EXPANDED, IS_LEAF } = metadataKeys;
-const NULL_DRAG_DROP = {
-  draggable: void 0,
-  onMouseDown: void 0
-};
-const useNullDragDrop = () => NULL_DRAG_DROP;
-const useTable = ({
-  allowCellBlockSelection,
-  allowSelectCheckboxRow,
-  allowDragDrop = false,
-  autoSelectFirstRow,
-  autoSelectRowKey,
-  // colHeaderRowHeight,
-  config,
-  containerRef,
-  dataSource,
-  disableFocus,
-  highlightedIndex: highlightedIndexProp,
-  id,
-  navigationStyle = "cell",
-  onConfigChange,
-  // onDataEdited: onDataEditedProp,
-  onDragStart,
-  onDrop,
-  onHighlight,
-  onRowClick: onRowClickProp,
-  onSelect,
-  onSelectCellBlock,
-  onSelectionChange,
-  renderBufferSize = 0,
-  revealSelected,
-  rowHeight,
-  scrollingApiRef,
-  selectionModel,
-  showColumnHeaders,
-  showPaginationControls,
-  size
-}) => {
-  const tableConfigRef = useRef(config);
-  const scrollTopRef = useRef(0);
-  const requestScrollRef = useRef(void 0);
-  useMemo(() => {
-    tableConfigRef.current = config;
-  }, [config]);
-  const editSession = useEditSession();
-  const initialState = useMemo(() => new CellFocusState(), []);
-  const cellFocusStateRef = useRef(initialState);
-  const focusCellRef = useRef(void 0);
-  const [headerState, setHeaderState] = useState(
-    showColumnHeaders ? nullHeaderState : zeroHeaderState
-  );
-  const [rowCount, setRowCount] = useState(dataSource.size);
-  if (dataSource === void 0) {
-    throw Error("no data source provided to Vuu Table");
-  }
-  const onDataRowcountChange = useCallback((size2) => {
-    setRowCount(size2);
-  }, []);
-  const { selectionBookendWidth = 4 } = config;
-  const virtualContentHeight = rowHeight * rowCount;
-  const viewportBodyHeight = size.height - (headerState.height === -1 ? 0 : headerState.height);
-  const verticalScrollbarWidth = virtualContentHeight > viewportBodyHeight ? 10 : 0;
-  const availableWidth = size.width - (verticalScrollbarWidth + 2 * selectionBookendWidth);
-  const rowClassNameGenerator = useRowClassNameGenerators(config);
-  const useRowDragDrop = allowDragDrop ? useDragDrop : useNullDragDrop;
-  const {
-    columns,
-    dispatchTableModelAction,
-    headings,
-    tableAttributes,
-    tableConfig
-  } = useTableModel({ config, dataSource, selectionModel, availableWidth });
-  const columnsRef = useStableReference(columns);
-  useLayoutEffectSkipFirst(() => {
-    dispatchTableModelAction({
-      availableWidth,
-      selectionModel,
-      type: "init",
-      tableConfig: tableConfigRef.current,
-      dataSource
-    });
-  }, [
-    availableWidth,
-    config,
-    dataSource,
-    dispatchTableModelAction,
-    selectionModel
-  ]);
-  const applyTableConfigChange = useCallback(
-    (config2, changeType) => {
-      dispatchTableModelAction({
-        availableWidth,
-        selectionModel,
-        type: "init",
-        tableConfig: config2,
-        dataSource
-      });
-      tableConfigRef.current = config2;
-      onConfigChange?.(config2, changeType);
-    },
-    [
-      availableWidth,
-      dataSource,
-      dispatchTableModelAction,
-      onConfigChange,
-      selectionModel
-    ]
-  );
-  const handleSelectionChange = useCallback(
-    (selectRequest) => {
-      dataSource.select?.(selectRequest);
-      onSelectionChange?.(selectRequest);
-    },
-    [dataSource, onSelectionChange]
-  );
-  const handleSelect = useCallback(
-    (dataRow) => {
-      if (onSelect) {
-        onSelect(dataRow);
-      }
-    },
-    [onSelect]
-  );
-  const onSubscribed = useCallback(
-    ({ tableSchema }) => {
-      if (tableSchema) {
-        dispatchTableModelAction({
-          type: "setTableSchema",
-          tableSchema
-        });
-      } else {
-        console.log("subscription message with no schema");
-      }
-    },
-    [dispatchTableModelAction]
-  );
-  const {
-    getRowAtPosition,
-    getRowOffset,
-    setInSituRowOffset: viewportHookSetInSituRowOffset,
-    setScrollTop: viewportHookSetScrollTop,
-    ...viewportMeasurements
-  } = useTableViewport({
-    columns,
-    headerHeight: headerState.height,
-    rowCount,
-    rowHeight,
-    selectionEndSize: selectionBookendWidth,
-    size,
-    showPaginationControls
-  });
-  const {
-    dataRows,
-    dataRowsRef,
-    getSelectedRows,
-    range,
-    // removeColumnDataFromCache,
-    setRange
-  } = useDataSource({
-    autoSelectFirstRow,
-    autoSelectRowKey,
-    dataSource,
-    renderBufferSize,
-    revealSelected,
-    onSelect: handleSelect,
-    onSizeChange: onDataRowcountChange,
-    onSubscribed,
-    selectionModel
-  });
-  const { requestScroll, scrollTop, ...scrollProps } = useTableScroll({
-    cellFocusStateRef,
-    columns,
-    getRowAtPosition,
-    rowHeight,
-    scrollingApiRef,
-    setRange,
-    showPaginationControls,
-    onVerticalScroll: viewportHookSetScrollTop,
-    onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
-    viewportMeasurements
-  });
-  scrollTopRef.current = scrollTop;
-  requestScrollRef.current = requestScroll;
-  const handleConfigChange = useCallback(
-    (config2, _range, confirmed, changes) => {
-      const scrollSensitiveChanges = changes?.filterChanged || changes?.groupByChanged;
-      if (scrollSensitiveChanges && scrollTopRef.current > 0) {
-        setRange(range.reset);
-        requestScrollRef.current?.({
-          type: "scroll-top",
-          scrollPos: 0,
-          instant: true
-        });
-      }
-      dispatchTableModelAction({
-        type: "tableConfig",
-        ...config2,
-        confirmed
-      });
-    },
-    [dispatchTableModelAction, range, setRange]
-  );
-  useEffect(() => {
-    dataSource.on("config", handleConfigChange);
-    return () => {
-      dataSource.removeListener("config", handleConfigChange);
-    };
-  }, [dataSource, dispatchTableModelAction, handleConfigChange]);
-  const removeColumn = useCallback(
-    (action) => {
-      const { column } = action;
-      const newTableConfig = {
-        ...tableConfig,
-        columns: tableConfig.columns.filter((col) => col.name !== column.name)
-      };
-      applyTableConfigChange(newTableConfig, {
-        type: "column-removed",
-        column
-      });
-    },
-    [applyTableConfigChange, tableConfig]
-  );
-  const hideColumns = useCallback(
-    (action) => {
-      const { columns: columns2 } = action;
-      const hiddenColumns = columns2.map((c) => c.name);
-      const newTableConfig = {
-        ...tableConfig,
-        columns: tableConfig.columns.map(
-          (col) => hiddenColumns.includes(col.name) ? { ...col, hidden: true } : col
-        )
-      };
-      applyTableConfigChange(newTableConfig, {
-        type: "columns-hidden",
-        columns: columns2
-      });
-    },
-    [tableConfig, applyTableConfigChange]
-  );
-  const pinColumn = useCallback(
-    ({ column, pin }) => {
-      applyTableConfigChange(
-        {
-          ...tableConfig,
-          columns: updateColumn(tableConfig.columns, {
-            ...column,
-            pin
-          })
-        },
-        {
-          type: "column-pinned",
-          column
-        }
-      );
-    },
-    [tableConfig, applyTableConfigChange]
-  );
-  const handleColumnDisplayAction = useCallback(
-    (action) => {
-      const { type } = action;
-      switch (type) {
-        case "hideColumn":
-          return hideColumns({
-            type: "hideColumns",
-            columns: [action.column]
-          });
-        case "removeColumn":
-          return removeColumn({
-            type: "removeColumn",
-            column: action.column
-          });
-        case "pinColumn":
-          return pinColumn(action);
-        default:
-          logUnhandledMessage(type, "[vuu-table] handleColumnDisplayAction");
-      }
-    },
-    [hideColumns, pinColumn, removeColumn]
-  );
-  const handleColumnAction = useColumnActions({
-    dataSource,
-    onColumnDisplayAction: handleColumnDisplayAction
-  });
-  const handleSort = useCallback(
-    (column, extendSort = false, sortType) => {
-      if (dataSource) {
-        dataSource.sort = toggleOrApplySort(
-          dataSource.sort,
-          column,
-          extendSort,
-          sortType
-        );
-      }
-    },
-    [dataSource]
-  );
-  const cellResizeState = useRef(void 0);
-  const onResizeColumn = useCallback(
-    (phase, columnName, width = 0) => {
-      if (phase === "resize") {
-        cellResizeState.current?.cells.forEach((cell) => {
-          cell.style.width = `${width}px`;
-        });
-        if (cellResizeState.current?.pinState) {
-          const { pinState, startWidth } = cellResizeState.current;
-          const { cell: pinnedCell, pinnedWidth } = pinState;
-          const diff = width - startWidth;
-          if (pinState.pinnedCells) {
-            pinState.pinnedCells.forEach((cell) => {
-              cell.style.left = `${parseInt(cell.style.left) + diff}px`;
-            });
-          }
-          pinnedCell.style.setProperty(
-            "--pin-width",
-            `${pinnedWidth + diff}px`
-          );
-        }
-      } else {
-        const column = columnsRef.current.find(
-          (column2) => column2.name === columnName
-        );
-        if (column) {
-          if (phase === "end") {
-            cellResizeState.current = void 0;
-            if (isValidNumber(width)) {
-              dispatchTableModelAction({
-                type: "resizeColumn",
-                phase,
-                column,
-                width
-              });
-              onConfigChange?.(
-                updateTableConfig(tableConfig, {
-                  type: "col-size",
-                  column,
-                  columns,
-                  width
-                }),
-                {
-                  type: "column-resized",
-                  column,
-                  width
-                }
-              );
-            }
-          } else if (phase === "begin") {
-            cellResizeState.current = {
-              cells: getAllCellsInColumn(
-                containerRef.current,
-                column.ariaColIndex
-              ),
-              startWidth: column.width
-            };
-            const [headerCell] = cellResizeState.current.cells;
-            cellResizeState.current.pinState = getPinStateFromElement(headerCell);
-            dispatchTableModelAction({
-              type: "resizeColumn",
-              phase,
-              column,
-              width
-            });
-            onConfigChange?.(
-              updateTableConfig(tableConfig, {
-                type: "col-size",
-                column,
-                columns,
-                width
-              }),
-              {
-                type: "column-resized",
-                column,
-                width
-              }
-            );
-          }
-        } else {
-          throw Error(
-            `useDataTable.handleColumnResize, column ${columnName} not found`
-          );
-        }
-      }
-    },
-    [
-      columnsRef,
-      dispatchTableModelAction,
-      onConfigChange,
-      tableConfig,
-      columns,
-      containerRef
-    ]
-  );
-  const onToggleGroup = useCallback(
-    (dataRow, column) => {
-      const isJson = isJsonGroup(column, dataRow);
-      const { key } = dataRow;
-      if (dataRow.isExpanded) {
-        dataSource.closeTreeNode(key, true);
-        if (isJson) {
-          const idx = columns.indexOf(column);
-          const rows = dataSource.getRowsAtDepth?.(idx + 1);
-          if (rows && !rows.some((row) => row[IS_EXPANDED] || row[IS_LEAF])) {
-            dispatchTableModelAction({
-              type: "hideColumns",
-              columns: columns.slice(idx + 2)
-            });
-          }
-        }
-      } else {
-        dataSource.openTreeNode(key);
-        if (isJson) {
-          const childRows = dataSource.getChildRows?.(key);
-          const idx = columns.indexOf(column) + 1;
-          const columnsToShow = [columns[idx]];
-          if (childRows && childRows.some((row) => row[IS_LEAF])) {
-            columnsToShow.push(columns[idx + 1]);
-          }
-          if (columnsToShow.some((col) => col.hidden)) {
-            dispatchTableModelAction({
-              type: "showColumns",
-              columns: columnsToShow
-            });
-          }
-        }
-      }
-    },
-    [columns, dataSource, dispatchTableModelAction]
-  );
-  const handleToggleGroup = useCallback(
-    (treeNodeOperation, rowIdx) => {
-      if (treeNodeOperation === "expand") {
-        dataSource.openTreeNode(rowIdx);
-      } else {
-        dataSource.closeTreeNode(rowIdx);
-      }
-    },
-    [dataSource]
-  );
-  const {
-    focusCell,
-    focusCellPlaceholderKeyDown,
-    focusCellPlaceholderRef,
-    setTableBodyRef: tableBodyRef
-  } = useCellFocus({
-    cellFocusStateRef,
-    containerRef,
-    disableFocus,
-    requestScroll
-  });
-  focusCellRef.current = focusCell;
-  const columnCount = columns.filter((c) => c.hidden !== true).length;
-  const {
-    highlightedIndexRef,
-    navigateCell: navigate,
-    onFocus: navigationFocus,
-    onKeyDown: navigationKeyDown,
-    ...containerProps
-  } = useKeyboardNavigation({
-    cellFocusStateRef,
-    columnCount,
-    containerRef,
-    disableFocus,
-    editSessionInProgress: editSession?.inEditMode,
-    focusCell,
-    headerCount: headerState.count,
-    highlightedIndex: highlightedIndexProp,
-    navigationStyle,
-    requestScroll,
-    rowCount,
-    onHighlight,
-    onToggleGroup: handleToggleGroup,
-    viewportRange: range,
-    viewportRowCount: viewportMeasurements.rowCount
-  });
-  const {
-    onBlur: editingBlur,
-    onDoubleClick: editingDoubleClick,
-    onKeyDown: editingKeyDown,
-    onFocus: editingFocus
-  } = useCellEditing({
-    navigate
-  });
-  const handleFocus = useCallback(
-    (e) => {
-      navigationFocus();
-      if (!e.defaultPrevented) {
-        editingFocus(e);
-      }
-    },
-    [editingFocus, navigationFocus]
-  );
-  const onContextMenu = useTableContextMenu({
-    columns,
-    dataRows,
-    dataSource,
-    getSelectedRows,
-    headerCount: headerState.count
-  });
-  const onMoveGroupColumn = useCallback(
-    (columns2) => {
-      dataSource.groupBy = columns2.map((col) => col.name);
-    },
-    [dataSource]
-  );
-  const onRemoveGroupColumn = useCallback(
-    (column) => {
-      if (isGroupColumn(column)) {
-        dataSource.groupBy = [];
-      } else {
-        if (dataSource && dataSource.groupBy?.includes(column.name)) {
-          dataSource.groupBy = dataSource.groupBy.filter(
-            (columnName) => columnName !== column.name
-          );
-        }
-      }
-    },
-    [dataSource]
-  );
-  const {
-    allRowsSelected,
-    onCheckBoxColumnHeaderClick,
-    onKeyDown: selectionHookKeyDown,
-    onRowClick: selectionHookOnRowClick
-  } = useSelection({
-    allowSelectCheckboxRow,
-    containerRef,
-    dataSource,
-    highlightedIndexRef,
-    onSelect: handleSelect,
-    onSelectionChange: handleSelectionChange,
-    selectionModel
-  });
-  const handleSelectCellBlock = useCallback(
-    (cellBlock2) => {
-      handleSelectionChange({
-        type: "DESELECT_ALL"
-      });
-      onSelectCellBlock?.(cellBlock2);
-    },
-    [handleSelectionChange, onSelectCellBlock]
-  );
-  const {
-    onMouseDown: cellBlockHookMouseDown,
-    cellBlock,
-    onKeyDown: cellBlockSelectionKeyDown
-  } = useCellBlockSelection({
-    allowCellBlockSelection,
-    columnCount,
-    containerRef,
-    onSelectCellBlock: handleSelectCellBlock,
-    rowCount
-  });
-  const handleRowClick = useCallback(
-    (evt, dataRow, rangeSelect, keepExistingSelection) => {
-      selectionHookOnRowClick?.(
-        evt,
-        dataRow,
-        rangeSelect,
-        keepExistingSelection
-      );
-      onRowClickProp?.(evt, dataRow);
-    },
-    [onRowClickProp, selectionHookOnRowClick]
-  );
-  const handleKeyDown = useCallback(
-    (e) => {
-      cellBlockSelectionKeyDown?.(e);
-      if (!e.defaultPrevented) {
-        navigationKeyDown(e);
-      }
-      if (!e.defaultPrevented) {
-        editingKeyDown(e);
-      }
-      if (!e.defaultPrevented) {
-        selectionHookKeyDown(e);
-      }
-    },
-    [
-      cellBlockSelectionKeyDown,
-      navigationKeyDown,
-      editingKeyDown,
-      selectionHookKeyDown
-    ]
-  );
-  const onMoveColumn = useCallback(
-    (columnName, columns2) => {
-      const newTableConfig = {
-        ...tableConfig,
-        columns: columns2
-      };
-      tableConfigRef.current = newTableConfig;
-      dispatchTableModelAction({
-        availableWidth,
-        type: "init",
-        tableConfig: newTableConfig,
-        dataSource
-      });
-      onConfigChange?.(newTableConfig, {
-        columnName,
-        columns: columns2,
-        type: "column-moved"
-      });
-      setTimeout(() => {
-        const headerCell = getHeaderCell(containerRef, columnName);
-        if (headerCell) {
-          const { ariaColIndex } = headerCell;
-          const { ariaRowIndex } = headerCell.parentElement;
-          const col = parseInt(ariaColIndex ?? "-1");
-          const row = parseInt(ariaRowIndex ?? "-1");
-          if (!isNaN(col) && col !== -1 && !isNaN(row) && row !== -1) {
-            focusCell([row, col]);
-          }
-        }
-      }, 300);
-    },
-    [
-      availableWidth,
-      containerRef,
-      dataSource,
-      dispatchTableModelAction,
-      focusCell,
-      onConfigChange,
-      tableConfig
-    ]
-  );
-  const handleDropRow = useCallback(
-    // TODO - this should be GlobalDropHandler
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (dragDropState) => {
-      onDrop?.(dragDropState);
-    },
-    [onDrop]
-  );
-  const handleDragStartRow = useCallback(
-    (dragDropState) => {
-      const { initialDragElement } = dragDropState;
-      const rowIndex = getAriaRowIndex(initialDragElement) - headerState.count - 1;
-      const row = dataRowsRef.current.find((row2) => row2.index === rowIndex);
-      if (row) {
-        dragDropState.setPayload(row);
-      }
-      onDragStart?.(dragDropState);
-    },
-    [dataRowsRef, headerState.count, onDragStart]
-  );
-  const onHeaderHeightMeasured = useCallback(
-    (height, count) => {
-      setHeaderState({ height, count });
-    },
-    []
-  );
-  const { onMouseDown: rowDragMouseDown, draggable: draggableRow } = useRowDragDrop({
-    allowDragDrop,
-    containerRef,
-    draggableClassName: `vuuTable`,
-    id,
-    onDragStart: handleDragStartRow,
-    onDrop: handleDropRow,
-    orientation: "vertical",
-    itemQuery: ".vuuTableRow"
-  });
-  const handleMouseDown = useCallback(
-    (evt) => {
-      rowDragMouseDown?.(evt);
-      if (!evt.isPropagationStopped()) {
-        cellBlockHookMouseDown?.(evt);
-      }
-    },
-    [rowDragMouseDown, cellBlockHookMouseDown]
-  );
-  return {
-    ...containerProps,
-    allRowsSelected,
-    "aria-rowcount": dataSource.size,
-    cellBlock,
-    columns,
-    dataRows,
-    draggableRow,
-    editSessionInProgress: editSession?.inEditMode,
-    focusCellPlaceholderKeyDown,
-    focusCellPlaceholderRef,
-    getRowOffset,
-    handleColumnAction,
-    headerState,
-    headings,
-    highlightedIndex: highlightedIndexRef.current,
-    onBlur: editingBlur,
-    onCheckBoxColumnHeaderClick,
-    onDoubleClick: editingDoubleClick,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    onMouseDown: handleMouseDown,
-    onContextMenu,
-    // onDataEdited: handleDataEdited,
-    onHeaderHeightMeasured,
-    onMoveColumn,
-    onMoveGroupColumn,
-    onRemoveGroupColumn,
-    onRowClick: handleRowClick,
-    onSortColumn: handleSort,
-    onResizeColumn,
-    onToggleGroup,
-    rowClassNameGenerator,
-    scrollProps,
-    // TODO don't think we need these ...
-    tableAttributes,
-    tableBodyRef,
-    tableConfig,
-    viewportMeasurements
-  };
-};
-
-export { useTable };
-//# sourceMappingURL=useTable.js.map