js-spread-grid 0.2.7 → 1.1.0

package/src/core/scroll.js

@@ -0,0 +1,219 @@
+/** @import * as Types from "../typings.js"; */
+
+/**
+ * @param {Types.ScrollSpeedStep[]} speed
+ * @param {number} distance
+ * @returns {Types.ScrollSpeed}
+ */
+function getSpeedValue(speed, distance) {
+    const absDistance = Math.abs(distance);
+    for (const entry of speed) {
+        if (absDistance <= entry.maxDistance)
+            return entry.scrollSpeed;
+    }
+
+    return 'auto';
+}
+
+
+/**
+ * @param {Types.Context} context
+ */
+function cancelScrollAnimation(context) {
+    const element = context.element;
+
+    if (context.scrollAnimationId) {
+        cancelAnimationFrame(context.scrollAnimationId);
+        context.scrollAnimationId = null;
+        element.scrollTop = element.scrollTop;
+        element.scrollLeft = element.scrollLeft;
+    }
+}
+
+/**
+ * @param {number} diff
+ * @param {number} speed
+ * @param {number} dt
+ * @param {number} fractionalProgress
+ * @returns {number}
+ */
+function getStep(diff, speed, dt, fractionalProgress) {
+    return diff > 0
+        ? Math.min(diff, speed * dt + fractionalProgress)
+        : Math.max(diff, -speed * dt + fractionalProgress);
+}
+
+/**
+ * @param {number} target
+ * @param {number} clientSize
+ * @param {number} scrollSize
+ * @returns {number}
+ */
+function clipTarget(target, clientSize, scrollSize) {
+    return Math.max(0, Math.min(target, scrollSize - clientSize - 1));
+}
+
+/**
+ * @param {'top' | 'left'} axis
+ * @param {number} dt
+ * @param {number} currentPosition
+ * @param {number} target
+ * @param {number} clientSize
+ * @param {number} scrollSize
+ * @param {number} previousTarget
+ * @param {number} previousOffset
+ * @param {Types.ScrollSpeedStep[]} speedSteps
+ * @param {number} fractionalProgress
+ * @param {boolean} snap
+ * @returns {ScrollToOptions & {behavior?: 'auto'} | null}
+ */
+function getOptions(axis, dt, currentPosition, target, clientSize, scrollSize, previousTarget, previousOffset, speedSteps, fractionalProgress, snap) {
+    if (target === null)
+        return null;
+
+    const diff = target - currentPosition;
+
+    if (Math.abs(diff) < 1)
+        return null;
+
+    if (diff < 0 && currentPosition === 0)
+        return null;
+
+    if (diff > 0 && currentPosition >= scrollSize - clientSize - 1)
+        return null;
+
+    const speed = getSpeedValue(speedSteps, diff);
+
+    if (snap || speed === 'auto')
+        return { [axis]: target, behavior: 'auto' };
+
+    if (typeof speed === 'number')
+        return { [axis]: currentPosition + getStep(diff, speed, dt, fractionalProgress), behavior: 'auto' };
+
+    if (previousTarget !== target || previousOffset === currentPosition)
+        return { [axis]: target };
+
+    return null;
+}
+
+/**
+ * @param {Types.Context} context
+ * @param {number} dt
+ * @param {ScrollToOptions} previousTarget
+ * @param {Types.ScrollOffset} previousOffset
+ * @param {number} fractionalProgress
+ * @param {boolean} snap
+ * @returns {ScrollToOptions & {behavior?: 'auto'}}
+ */
+function getVerticalOptions(context, dt, previousTarget, previousOffset, fractionalProgress, snap) {
+    const element = context.element;
+    const scrollState = context.state.scrollState;
+    const target = scrollState.verticalTarget;
+    const currentPosition = element.scrollTop;
+    const clientSize = element.clientHeight;
+    const scrollSize = element.scrollHeight;
+
+    return getOptions('top', dt, currentPosition, target, clientSize, scrollSize, previousTarget?.top, previousOffset.top, scrollState.verticalSpeed, fractionalProgress, snap);
+}
+
+/**
+ * @param {Types.Context} context
+ * @param {number} dt
+ * @param {ScrollToOptions} previousTarget
+ * @param {Types.ScrollOffset} previousOffset
+ * @param {number} fractionalProgress
+ * @param {boolean} snap
+ * @returns {ScrollToOptions & {behavior?: 'auto'}}
+ */
+function getHorizontalOptions(context, dt, previousTarget, previousOffset, fractionalProgress, snap) {
+    const element = context.element;
+    const scrollState = context.state.scrollState;
+    const target = scrollState.horizontalTarget;
+    const currentPosition = element.scrollLeft;
+    const clientSize = element.clientWidth;
+    const scrollSize = element.scrollWidth;
+
+    return getOptions('left', dt, currentPosition, target, clientSize, scrollSize, previousTarget?.left, previousOffset.left, scrollState.horizontalSpeed, fractionalProgress, snap);
+}
+
+/**
+ * @param {Types.Context} context
+ */
+export default function scroll(context) {
+    const element = context.element;
+    const scrollState = context.state.scrollState;
+    const targetV = scrollState.verticalTarget;
+    const targetH = scrollState.horizontalTarget;
+
+    if (targetV === null && targetH === null || !element.isConnected) {
+        cancelScrollAnimation(context);
+        return;
+    }
+
+    if (context.scrollAnimationId) {
+        return;
+    }
+
+    let lastTime = performance.now();
+    let previousOptionsH = /** @type {ScrollToOptions|null} */ (null);
+    let previousOptionsV = /** @type {ScrollToOptions|null} */ (null);
+    let previousOffset = { top: element.scrollTop, left: element.scrollLeft };
+    let fractionalVerticalProgress = 0;
+    let fractionalHorizontalProgress = 0;
+
+    /** @param {number} now */
+    const animate = (now) => {
+        const targetV = context.state.scrollState.verticalTarget;
+        const targetH = context.state.scrollState.horizontalTarget;
+
+        if (targetV === null && targetH === null || !element.isConnected) {
+            cancelScrollAnimation(context);
+            return;
+        }
+
+        if (targetV === null)
+            previousOptionsV = null;
+        if (targetH === null)
+            previousOptionsH = null;
+
+        const dt = (now - lastTime) / 1000;
+        lastTime = now;
+
+        const snap = context.lastScrollClientSizeVersion !== context.state.scrollState.clientSizeVersion;
+        context.lastScrollClientSizeVersion = context.state.scrollState.clientSizeVersion;
+
+        const newOptionsV = getVerticalOptions(context, dt, previousOptionsV, previousOffset, fractionalVerticalProgress, snap);
+        const newOptionsH = getHorizontalOptions(context, dt, previousOptionsH, previousOffset, fractionalHorizontalProgress, snap);
+        const newOptions = {
+            ...previousOptionsV,
+            ...previousOptionsH,
+            behavior: /** @type {Types.ScrollBehavior} */('smooth'),
+            ...newOptionsV,
+            ...newOptionsH
+        };
+
+        if (newOptionsV || newOptionsH) {
+            element.scrollTo(newOptions);
+        }
+
+        if (newOptionsV && newOptions.behavior === 'auto') {
+            fractionalVerticalProgress = newOptions.top - element.scrollTop;
+        } else {
+            fractionalVerticalProgress = 0;
+        }
+
+        if (newOptionsH && newOptions.behavior === 'auto') {
+            fractionalHorizontalProgress = newOptions.left - element.scrollLeft;
+        } else {
+            fractionalHorizontalProgress = 0;
+        }
+
+        previousOptionsV = newOptionsV || previousOptionsV;
+        previousOptionsH = newOptionsH || previousOptionsH;
+        previousOffset = { top: element.scrollTop, left: element.scrollLeft };
+
+        context.scrollAnimationId = requestAnimationFrame(animate);
+    };
+
+    animate(lastTime);
+}

package/src/core/state.js

@@ -1,3 +1,5 @@
+/** @import * as Types from "../typings.js"; */
+
 import getEditableCells from "../state-utils/getEditableCells.js";
 import getDataFormatting from "../state-utils/getDataFormatting.js";
 import getInputFormatting from "../state-utils/getInputFormatting.js";
@@ -28,6 +30,7 @@ import getMeasureFormatting from "../state-utils/getMeasureFormatting.js";
 import { getMeasuredColumns, getMeasuredRows } from "../state-utils/getMeasured.js";
 import getKeys from "../state-utils/getKeys.js";
 import getSortingFormatting from "../state-utils/getSortingFormatting.js";
+import getSortOrderFormatting from "../state-utils/getSortOrderFormatting.js";
 import getSortingRules from "../state-utils/getSortingRules.js";
 import { getSortedColumns, getSortedRows } from "../state-utils/getSorted.js";
 import { getResizableColumn, getResizableRow } from "../state-utils/getResizable.js";
@@ -38,13 +41,107 @@ import getContextFormatting from "../state-utils/getContextFormatting.js";
 import getTooltip from "../state-utils/getTooltip.js";
 import getTooltipPlacement from "../state-utils/getTooltipPlacement.js";
 import getOrder from "../state-utils/getOrder.js";
-import getOrdered from "../state-utils/getOrdered.js";
+import { getOrderedColumns, getOrderedRows } from "../state-utils/getOrdered.js";
+import { getStaticColumns, getStaticRows } from "../state-utils/getStatic.js";
+import getPinning from "../state-utils/getPinning.js";
+import getClientSize from "../state-utils/getClientSize.js";
+import getScrollOffset from "../state-utils/getScrollOffset.js";
+import getInternalPosition from "../state-utils/getInternalPosition.js";
+import stringifyId from "../core-utils/stringifyId.js";
+import { getHorizontalScrollTarget, getVerticalScrollTarget } from "../state-utils/getScrollTarget.js";
+import getResolvedScrollSpeed from "../state-utils/getResolvedScrollSpeed.js";
+import getScrollState from "../state-utils/getScrollState.js";
+import getStyleState from "../state-utils/getStyleState.js";
+import getRenderState from "../state-utils/getRenderState.js";
+import getInputState from "../state-utils/getInputState.js";
+import getCursorState from "../state-utils/getCursorState.js";
+import getTooltipState from "../state-utils/getTooltipState.js";
+import getDynamicRowHeight from "../state-utils/getDynamicRowHeight.js";
+
+/**
+ * @param {Types.Position} a
+ * @param {Types.Position} b
+ * @returns {boolean}
+ */
+function comparePositions(a, b) {
+    if (!a && !b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.x === b.x && a.y === b.y;
+}
+
+/**
+ * @param {Types.ClientSize} a
+ * @param {Types.ClientSize} b
+ * @returns {boolean}
+ */
+function compareClientSizes(a, b) {
+    if (!a && !b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.width === b.width && a.height === b.height;
+}
+
+/**
+ * @param {Types.ScrollOffset} a
+ * @param {Types.ScrollOffset} b
+ * @returns {boolean}
+ */
+function compareScrollOffsets(a, b) {
+    if (!a && !b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.left === b.left && a.top === b.top;
+}
+
+/**
+ * @param {Types.Rect} a
+ * @param {Types.Rect} b
+ * @returns {boolean}
+ */
+function compareRects(a, b) {
+    if (!a && !b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
+}
+
+/**
+ * @param {Types.CellId} a
+ * @param {Types.CellId} b
+ * @returns {boolean}
+ */
+function compareCellIds(a, b) {
+    if (!a && !b)
+        return true;
+    if (!a || !b)
+        return false;
+    return stringifyId(a.rowId) === stringifyId(b.rowId) && stringifyId(a.columnId) === stringifyId(b.columnId);
+}
+
+/**
+ * @param {Types.StyleState} a
+ * @param {Types.StyleState} b
+ * @returns {boolean}
+ */
+function compareStyleStates(a, b) {
+    if (!a && !b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.scrollbarWidth === b.scrollbarWidth;
+}
+
 
 // TODO: write some test to check if the cache is working properly
 /**
- * @param {Context} context
+ * @param {Types.Context} context
  */
-function updateStateInternal(context) {
+export default function updateState(context) {
     // console.count('updateState');
 
     const options = { ...context.localOptions, ...context.externalOptions };
@@ -57,53 +154,46 @@ function updateStateInternal(context) {
 
     // TODO: Move to utils
     /**
-     * @template {keyof Memory} K
+     * @template {keyof Types.Memory} K
      * @template {Array<*>} U
      * @param {K} key
-     * @param {(...args: U) => Memory[K]['value']} func
+     * @param {(...args: U) => Types.Memory[K]['value']} func
      * @param {U} dependencies
-     * @returns {Memory[K]['value']}
+     * @param {(a: Types.Memory[K]['value'], b: Types.Memory[K]['value']) => boolean} [comparator]
+     * @returns {Types.Memory[K]['value']}
      */
-    function cache(key, func, dependencies) {
+    function cache(key, func, dependencies, comparator = (a, b) => a === b) {
         const previousDependencies = memory[key] && memory[key].dependencies;
         if (!previousDependencies || dependencies.some((dependency, index) => dependency !== previousDependencies[index])) {
-            memory[key] = /** @type {Memory[K]} */ ({ value: func(...dependencies), dependencies });
-            stateChanges.push(key);
-        }
-        return memory[key].value;
-    }
-
-    /**
-     * @template {keyof Memory} K
-     * @param {K} key
-     * @param {Memory[K]['value']} value
-     * @returns {Memory[K]['value']}
-     */
-    function cache_value_deep(key, value) {
-        const previousValue = memory[key] && memory[key].value;
-        if (JSON.stringify(previousValue) !== JSON.stringify(value)) {
-            memory[key] = /** @type {Memory[K]} */ ({ value });
-            stateChanges.push(key);
+            const previousValue = memory[key] && memory[key].value;
+            const previousVersion = memory[key] && memory[key].version || 0;
+            const newValue = func(...dependencies);
+            if (!comparator(previousValue, newValue)) {
+                memory[key] = /** @type {Types.Memory[K]} */ ({ value: newValue, dependencies, version: previousVersion + 1 });
+                stateChanges.push(key);
+            } else {
+                memory[key] = /** @type {Types.Memory[K]} */ ({ value: previousValue, dependencies, version: previousVersion });
+            }
         }
         return memory[key].value;
     }
 
     /**
-     * @template {keyof Memory} K
+     * @template {keyof Types.Memory} K
      * @param {K} key
-     * @param {Memory[K]['value']} value
-     * @param {(value: Memory[K]['value']) => void} callback
+     * @param {Types.Memory[K]['value']} value
+     * @param {(value: Types.Memory[K]['value']) => void} callback
      */
     function invoke_change_callback(key, value, callback) {
         const previousValue = memory[key] && memory[key].value;
         if (previousValue !== value) {
-            memory[key] = /** @type {Memory[K]} */ ({ value });
+            memory[key] = /** @type {Types.Memory[K]} */ ({ value });
             callback(value);
         }
     }
 
-    const devicePixelRatio = window.devicePixelRatio; // TODO: Trigger update on devicePixelRatio change
-    const borderWidth = options.borderWidth / devicePixelRatio;
+    const devicePixelRatio = /** @type {number} */ cache('devicePixelRatio', v => v, [window.devicePixelRatio]);
+    const borderWidth = /** @type {number} */ cache('borderWidth', v => v, [options.borderWidth / devicePixelRatio]);
     const data = options.data;
     const text = context.input.value;
     const sortBy = cache('sortBy', getResolvedSortBy, [options.sortBy]);
@@ -114,22 +204,25 @@ function updateStateInternal(context) {
     const edition = cache('edition', getEdition, [editedCellsAndFilters]);
     const invokedColumns = cache('invokedColumns', getGeneratedColumns, [options.columns, data]);
     const invokedRows = cache('invokedRows', getGeneratedRows, [options.rows, data]);
+    const mousePosition = cache('mousePosition', v => v, [context.mousePosition], comparePositions);
     // TODO: throw on duplicate ids
     // TODO: throw on duplicate row/column filter ids
 
     // Resolving
     const unfoldedColumns = cache('unfoldedColumns', getUnfoldedColumns, [invokedColumns, data]);
     const unfoldedRows = cache('unfoldedRows', getUnfoldedRows, [invokedRows, data]);
-    const unfilteredColumns = cache('unfilteredColumns', getResolvedColumns, [unfoldedColumns, options.pinnedLeft, options.pinnedRight, options.columnWidths]);
-    const unfilteredRows = cache('unfilteredRows', getResolvedRows, [unfoldedRows, options.pinnedTop, options.pinnedBottom, options.rowHeights]);
+    const dynamicColumnWidth = 150;
+    const dynamicRowHeight = cache('dynamicRowHeight', getDynamicRowHeight, [textResolver]);
+    const unfilteredColumns = cache('unfilteredColumns', getResolvedColumns, [unfoldedColumns, options.columnWidths, borderWidth, devicePixelRatio, dynamicColumnWidth]);
+    const unfilteredRows = cache('unfilteredRows', getResolvedRows, [unfoldedRows, options.rowHeights, borderWidth, devicePixelRatio, dynamicRowHeight]);
     const unfilteredColumnKeys = cache('unfilteredColumnKeys', getKeys, [unfilteredColumns]);
     const unfilteredRowKeys = cache('unfilteredRowKeys', getKeys, [unfilteredRows]);
 
     // Ordering
     const columnsOrder = cache('columnsOrder', getOrder, [options.columnsOrder]);
     const rowsOrder = cache('rowsOrder', getOrder, [options.rowsOrder]);
-    const orderedColumns = cache('orderedColumns', getOrdered, [unfilteredColumns, columnsOrder]);
-    const orderedRows = cache('orderedRows', getOrdered, [unfilteredRows, rowsOrder]);
+    const orderedColumns = cache('orderedColumns', getOrderedColumns, [unfilteredColumns, columnsOrder]);
+    const orderedRows = cache('orderedRows', getOrderedRows, [unfilteredRows, rowsOrder]);
 
     // Filtering
     const filterFormatting = cache('filterFormatting', getFilterFormatting, [dataFormatting]);
@@ -145,9 +238,10 @@ function updateStateInternal(context) {
     const sortedColumns = cache('sortedColumns', getSortedColumns, [sortBy, sortingRules, sortingFormattingRules, data, filteredRows, filteredColumns, edition]);
     const sortedRows = cache('sortedRows', getSortedRows, [sortBy, sortingRules, sortingFormattingRules, data, filteredRows, filteredColumns, edition]);
 
-    // Shaping
+    // Shaping finalization
     const shapedColumns = sortedColumns;
     const shapedRows = sortedRows;
+    const pinning = cache('pinning', getPinning, [shapedColumns, shapedRows, options.pinnedTop, options.pinnedBottom, options.pinnedLeft, options.pinnedRight]);
 
     // Measuring
     const measureFormatting = cache('measureFormatting', getMeasureFormatting, [dataFormatting]);
@@ -155,24 +249,39 @@ function updateStateInternal(context) {
     const measureFormatResolver = cache('measureFormatResolver', getFormatResolver, [measureFormattingRules, data, shapedRows, shapedColumns, edition]);
     const columnWidthCache = context.columnWidthCache;
     const rowHeightCache = context.rowHeightCache;
-    const measuredColumns = cache('measuredColumns', getMeasuredColumns, [shapedColumns, shapedRows, textResolver, measureFormatResolver, columnWidthCache, unfilteredColumnKeys]);
-    const measuredRows = cache('measuredRows', getMeasuredRows, [shapedColumns, shapedRows, textResolver, measureFormatResolver, rowHeightCache, unfilteredRowKeys]);
+    const measuredColumns = cache('measuredColumns', getMeasuredColumns, [shapedColumns, shapedRows, textResolver, measureFormatResolver, columnWidthCache, unfilteredColumnKeys, devicePixelRatio]);
+    const measuredRows = cache('measuredRows', getMeasuredRows, [shapedColumns, shapedRows, textResolver, measureFormatResolver, rowHeightCache, unfilteredRowKeys, devicePixelRatio]);
+
+    // Scrolling
+    const fixedSize = cache('fixedSize', getFixedSize, [measuredColumns, measuredRows, pinning, borderWidth]);
+    const totalSize = cache('totalSize', getTotalSize, [measuredColumns, measuredRows, borderWidth]);
+    const clientSize = cache('clientSize', v => v, [getClientSize(element)], compareClientSizes);
+    const boundingClientSize = cache('boundingClientSize', v => v, [getClientSize(element)], compareClientSizes);
+    const scrollOffset = cache('scrollOffset', v => v, [getScrollOffset(element)], compareScrollOffsets);
+    const internalMousePosition = cache('internalMousePosition', getInternalPosition, [mousePosition, clientSize, scrollOffset, fixedSize, totalSize], comparePositions);
+    const scrollRect = cache('scrollRect', getScrollRect, [previousState?.renderState?.scrollRect, scrollOffset, totalSize, fixedSize, boundingClientSize], compareRects);
+    const horizontalScrollTarget = cache('horizontalScrollTarget', getHorizontalScrollTarget, [options.horizontalScrollTarget, options.disableScrollOnHover, measuredColumns, pinning, internalMousePosition, fixedSize, totalSize, clientSize, borderWidth]);
+    const verticalScrollTarget = cache('verticalScrollTarget', getVerticalScrollTarget, [options.verticalScrollTarget, options.disableScrollOnHover, measuredRows, pinning, internalMousePosition, fixedSize, totalSize, clientSize, borderWidth]);
+    const horizontalScrollSpeed = cache('horizontalScrollSpeed', getResolvedScrollSpeed, [options.horizontalScrollSpeed]);
+    const verticalScrollSpeed = cache('verticalScrollSpeed', getResolvedScrollSpeed, [options.verticalScrollSpeed]);
+
+    // Dynamic allocation
+    const staticColumns = cache('staticColumns', getStaticColumns, [data, measuredColumns, pinning, scrollRect, fixedSize, borderWidth]);
+    const staticRows = cache('staticRows', getStaticRows, [data, measuredRows, pinning, scrollRect, fixedSize, borderWidth]);
 
     // Placement
-    const columns = cache('columns', getPlacedColumns, [measuredColumns, devicePixelRatio, borderWidth]);
-    const rows = cache('rows', getPlacedRows, [measuredRows, devicePixelRatio, borderWidth]);
+    const columns = cache('columns', getPlacedColumns, [staticColumns, pinning, borderWidth]);
+    const rows = cache('rows', getPlacedRows, [staticRows, pinning, borderWidth]);
     const columnLookup = cache('columnLookup', getLookup, [columns]);
     const rowLookup = cache('rowLookup', getLookup, [rows]);
     const focusedCell = options.focusedCell;
     const sections = cache('sections', getSections, [columns, rows]);
     const selectedCells = options.selectedCells;
-    const fixedSize = cache('fixedSize', getFixedSize, [sections.top.height, sections.bottom.height, sections.left.width, sections.right.width]);
-    const totalSize = cache('totalSize', getTotalSize, [columns, rows]);
-    const hoveredCell = cache_value_deep('hoveredCell', getHoveredCell(element, context.mousePosition, rows, columns, fixedSize, totalSize));
+    const hoveredCell = cache('hoveredCell', getHoveredCell, [internalMousePosition, rows, columns, fixedSize, totalSize], compareCellIds);
     const isReordering = context.isReordering;
     // TODO: this does not seem to be cached properly (see onStateChange)
-    const resizableColumn = context.resizingColumn || cache('resizableColumn', getResizableColumn, [columns, columnLookup, rowLookup, hoveredCell, element, context.mousePosition, isReordering, fixedSize, totalSize]);
-    const resizableRow = context.resizingRow || cache('resizableRow', getResizableRow, [rows, columnLookup, rowLookup, hoveredCell, element, context.mousePosition, isReordering, fixedSize, totalSize]);
+    const resizableColumn = context.resizingColumn || cache('resizableColumn', getResizableColumn, [columns, columnLookup, rowLookup, hoveredCell, internalMousePosition, isReordering]);
+    const resizableRow = context.resizingRow || cache('resizableRow', getResizableRow, [rows, columnLookup, rowLookup, hoveredCell, internalMousePosition, isReordering]);
     const isMouseDown = context.isMouseDown;
     const canHighlight = !resizableColumn && !resizableRow && !context.didReorder;
     const highlightedCells = cache('highlightedCells', getHighlightedCells, [isMouseDown, canHighlight, focusedCell, hoveredCell, columns, rows, columnLookup, rowLookup]);
@@ -182,6 +291,9 @@ function updateStateInternal(context) {
     const renderFormatting = cache('renderFormatting', getRenderFormatting, [dataFormatting, hoveredCell, focusedCell, selection, highlight, edition, sortBy, resizableColumn, resizableRow, options.borderWidth, isReordering, context.reorderedColumn, context.reorderedRow]);
     const renderFormattingRules = cache('renderFormattingRules', getFormattingRules, [renderFormatting]);
     const renderFormatResolver = cache('renderFormatResolver', getFormatResolver, [renderFormattingRules, data, rows, columns, edition]);
+    const sortOrderFormatting = cache('sortOrderFormatting', getSortOrderFormatting, [dataFormatting]);
+    const sortOrderFormattingRules = cache('sortOrderFormattingRules', getFormattingRules, [sortOrderFormatting]);
+    const sortOrderFormatResolver = cache('sortOrderFormatResolver', getFormatResolver, [sortOrderFormattingRules, data, rows, columns, edition]);
     const inputFormatting = cache('inputFormatting', getInputFormatting, [dataFormatting]);
     const inputFormattingRules = cache('inputFormattingRules', getFormattingRules, [inputFormatting]);
     const inputFormatResolver = cache('inputFormatResolver', getFormatResolver, [inputFormattingRules, data, rows, columns, edition]);
@@ -192,8 +304,17 @@ function updateStateInternal(context) {
     const contextFormattingRules = cache('contextFormattingRules', getFormattingRules, [contextFormatting]);
     const contextFormatResolver = cache('contextFormatResolver', getFormatResolver, [contextFormattingRules, data, rows, columns, edition]);
     const tooltip = cache('tooltip', getTooltip, [hoveredCell, contextFormatResolver, columnLookup, rowLookup]);
-    const tooltipPlacement = cache('tooltipPlacement', getTooltipPlacement, [tooltip, context.mousePosition]);
-    const scrollRect = cache_value_deep('scrollRect', getScrollRect(previousState?.scrollRect, totalSize, fixedSize, element));
+    const tooltipPlacement = cache('tooltipPlacement', getTooltipPlacement, [tooltip, mousePosition]);
+
+    // Sub-states
+    const renderState = cache('renderState', getRenderState, [sections, devicePixelRatio, scrollRect, renderFormatResolver, borderWidth, textResolver]);
+    const inputState = cache('inputState', getInputState, [inputPlacement, isTextValid]);
+    const cursorState = cache('cursorState', getCursorState, [resizableColumn, resizableRow, context.isReordering]);
+    const tooltipState = cache('tooltipState', getTooltipState, [tooltip, tooltipPlacement]);
+    const scrollState = cache('scrollState', getScrollState, [verticalScrollTarget, horizontalScrollTarget, verticalScrollSpeed, horizontalScrollSpeed, memory.clientSize.version]);
+
+    // Style
+    const styleState = cache('styleState', getStyleState, [options.style], compareStyleStates);
 
     // callbacks
     const activeColumns = cache('activeColumns', getActiveColumns, [columns]);
@@ -207,42 +328,26 @@ function updateStateInternal(context) {
 
     context.state = {
         options,
-        devicePixelRatio,
-        borderWidth,
         edition,
         columns,
         rows,
-        sections,
         hoveredCell,
         focusedCell,
-        renderFormatResolver,
         inputFormatResolver,
         fixedSize,
         totalSize,
-        textResolver,
-        scrollRect,
+        clientSize,
+        scrollOffset,
         highlightedCells,
-        inputPlacement,
         columnLookup,
         rowLookup,
         text,
-        isTextValid,
-        resizableColumn,
-        resizableRow,
-        tooltip,
-        tooltipPlacement,
+        scrollState,
+        styleState,
+        sortOrderFormatResolver,
+        renderState,
+        inputState,
+        cursorState,
+        tooltipState,
     };
-}
-
-/**
- * @param {Context} context
- */
-export default function updateState(context) {
-    if (!context.error) {
-        try {
-            updateStateInternal(context);
-        } catch (error) {
-            context.error = error;
-        }
-    }
 }

package/src/core/style.js

@@ -0,0 +1,26 @@
+/** @import * as Types from "../typings.js"; */
+
+/**
+ * @param {Types.Context} context
+ */
+export default function style(context) {
+    // console.log('style', context.state.styleState);
+
+    const state = context.state.styleState;
+    const element = context.element;
+    const style = `
+        max-width: 100vw;
+        max-height: 100vh;
+        overflow: auto;
+        display: grid;
+        position: relative;
+        grid-template-columns: fit-content(0) fit-content(0) fit-content(0);
+        grid-template-rows: fit-content(0) fit-content(0) fit-content(0);
+        outline: none;
+        user-select: none;
+        touch-action: manipulation;
+        scrollbar-width: ${state.scrollbarWidth};
+    `
+
+    element.setAttribute('style', style);
+}

package/src/core/tooltip.js

@@ -0,0 +1,33 @@
+/** @import * as Types from "../typings.js"; */
+
+/**
+ * @param {Types.Context} context
+ */
+export default function showTooltip(context) {
+    const element = context.element;
+    const tooltipElement = context.tooltip;
+    const tooltipState = context.state.tooltipState;
+    const content = tooltipState.tooltip;
+    const placement = tooltipState.tooltipPlacement;
+
+    if (!placement) {
+        if (tooltipElement.parentElement)
+            tooltipElement.parentElement.removeChild(tooltipElement);
+        return;
+    }
+
+    if (tooltipElement.innerHTML !== content) {
+        tooltipElement.innerHTML = content;
+    }
+
+    tooltipElement.style.left = `calc(anchor(left) + ${placement.left}px)`;
+    tooltipElement.style.top = `calc(anchor(top) + ${placement.top}px)`;
+
+    if (!tooltipElement.parentElement) {
+        element.appendChild(tooltipElement);
+        // @ts-ignore
+        tooltipElement.showPopover({
+            source: element,
+        });
+    }
+}