@rowsncolumns/grid 9.0.3 → 13.2.32

package/dist/cjs/hooks/useEditable.js

@@ -0,0 +1,491 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultEditor = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var helpers_1 = require("../helpers");
+var types_1 = require("./../types");
+/**
+ * Default cell editor
+ * @param props
+ */
+var DefaultEditor = function (props) {
+    var onChange = props.onChange, onSubmit = props.onSubmit, onCancel = props.onCancel, position = props.position, cell = props.cell, getNextFocusableCell = props.getNextFocusableCell, _a = props.value, value = _a === void 0 ? "" : _a, activeCell = props.activeCell, _b = props.autoFocus, autoFocus = _b === void 0 ? true : _b, onKeyDown = props.onKeyDown, selections = props.selections, scrollPosition = props.scrollPosition, maxWidth = props.maxWidth, maxHeight = props.maxHeight, isFrozenRow = props.isFrozenRow, isFrozenColumn = props.isFrozenColumn, frozenRowOffset = props.frozenRowOffset, frozenColumnOffset = props.frozenColumnOffset, isNewValue = props.isNewValue, rest = tslib_1.__rest(props, ["onChange", "onSubmit", "onCancel", "position", "cell", "getNextFocusableCell", "value", "activeCell", "autoFocus", "onKeyDown", "selections", "scrollPosition", "maxWidth", "maxHeight", "isFrozenRow", "isFrozenColumn", "frozenRowOffset", "frozenColumnOffset", "isNewValue"]);
+    var borderWidth = 2;
+    var padding = 10; /* 2 + 1 + 1 + 2 + 2 */
+    var inputRef = (0, react_1.useRef)(null);
+    var _c = position.x, x = _c === void 0 ? 0 : _c, _d = position.y, y = _d === void 0 ? 0 : _d, _e = position.width, width = _e === void 0 ? 0 : _e, _f = position.height, height = _f === void 0 ? 0 : _f;
+    var getWidth = (0, react_1.useCallback)(function (text) {
+        var _a;
+        var textWidth = ((_a = helpers_1.autoSizerCanvas.measureText(text)) === null || _a === void 0 ? void 0 : _a.width) || 0;
+        return Math.max(textWidth + padding, width + borderWidth / 2);
+    }, [width]);
+    (0, react_1.useEffect)(function () {
+        setInputWidth(getWidth(value));
+    }, [value]);
+    var _g = tslib_1.__read((0, react_1.useState)(function () { return getWidth(value); }), 2), inputWidth = _g[0], setInputWidth = _g[1];
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (!inputRef.current)
+            return;
+        if (autoFocus)
+            inputRef.current.focus();
+        /* Focus cursor at the end */
+        inputRef.current.selectionStart = (_b = (_a = (0, helpers_1.castToString)(value)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    }, []);
+    var inputHeight = height;
+    return (react_1.default.createElement("div", { style: {
+            top: y - borderWidth / 2,
+            left: x,
+            position: "absolute",
+            width: inputWidth,
+            height: inputHeight + borderWidth,
+            padding: borderWidth,
+            boxShadow: "0 2px 6px 2px rgba(60,64,67,.15)",
+            border: "2px #1a73e8 solid",
+            background: "white",
+        } },
+        react_1.default.createElement("textarea", tslib_1.__assign({ rows: 1, cols: 1, ref: inputRef, value: value, style: {
+                font: "12px Arial",
+                lineHeight: 1.2,
+                width: "100%",
+                height: "100%",
+                padding: "0 1px",
+                margin: 0,
+                boxSizing: "border-box",
+                borderWidth: 0,
+                outline: "none",
+                resize: "none",
+                overflow: "hidden",
+                verticalAlign: "top",
+                background: "transparent",
+            }, onChange: function (e) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, cell);
+            }, onKeyDown: function (e) {
+                if (!inputRef.current)
+                    return;
+                var isShiftKey = e.nativeEvent.shiftKey;
+                var isMetaKey = e.nativeEvent.metaKey;
+                var value = inputRef.current.value;
+                var isCursorAtEnd = value.length === inputRef.current.selectionEnd;
+                var isNewCondition = isNewValue && !isShiftKey && !isMetaKey && isCursorAtEnd;
+                // Enter key
+                if (e.which === types_1.KeyCodes.Enter) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell === null || getNextFocusableCell === void 0 ? void 0 : getNextFocusableCell(cell, isShiftKey ? types_1.Direction.Up : types_1.Direction.Down));
+                }
+                if (isNewCondition && e.which === types_1.KeyCodes.Right) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell === null || getNextFocusableCell === void 0 ? void 0 : getNextFocusableCell(cell, types_1.Direction.Right));
+                }
+                if (isNewCondition && e.which === types_1.KeyCodes.Left) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell === null || getNextFocusableCell === void 0 ? void 0 : getNextFocusableCell(cell, types_1.Direction.Left));
+                }
+                if (isNewCondition && e.which === types_1.KeyCodes.Up) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell === null || getNextFocusableCell === void 0 ? void 0 : getNextFocusableCell(cell, types_1.Direction.Up));
+                }
+                if (isNewCondition && e.which === types_1.KeyCodes.Down) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell === null || getNextFocusableCell === void 0 ? void 0 : getNextFocusableCell(cell, types_1.Direction.Down));
+                }
+                if (e.which === types_1.KeyCodes.Escape) {
+                    onCancel && onCancel(e);
+                }
+                if (e.which === types_1.KeyCodes.Tab) {
+                    e.preventDefault();
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell === null || getNextFocusableCell === void 0 ? void 0 : getNextFocusableCell(cell, isShiftKey ? types_1.Direction.Left : types_1.Direction.Right));
+                }
+                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+            } }, rest))));
+};
+var getDefaultEditor = function (cell) { return DefaultEditor; };
+exports.getDefaultEditor = getDefaultEditor;
+var defaultCanEdit = function (cell) { return true; };
+var defaultIsHidden = function (i) { return false; };
+/**
+ * Hook to make grid editable
+ * @param param
+ *
+ * TODO:
+ * 1. Edit a cell
+ * 2. Tab to next cell
+ * 3. Enter a value
+ * 4. Press down key
+ *
+ * Moves to incorrect cell
+ */
+var useEditable = function (_a) {
+    var _b, _c, _d, _e;
+    var _f = _a.getEditor, getEditor = _f === void 0 ? exports.getDefaultEditor : _f, gridRef = _a.gridRef, getValue = _a.getValue, onChange = _a.onChange, onSubmit = _a.onSubmit, onCancel = _a.onCancel, onDelete = _a.onDelete, _g = _a.selections, selections = _g === void 0 ? [] : _g, activeCell = _a.activeCell, _h = _a.canEdit, canEdit = _h === void 0 ? defaultCanEdit : _h, _j = _a.frozenRows, frozenRows = _j === void 0 ? 0 : _j, _k = _a.frozenColumns, frozenColumns = _k === void 0 ? 0 : _k, _l = _a.hideOnBlur, hideOnBlur = _l === void 0 ? true : _l, _m = _a.isHiddenRow, isHiddenRow = _m === void 0 ? defaultIsHidden : _m, _o = _a.isHiddenColumn, isHiddenColumn = _o === void 0 ? defaultIsHidden : _o, rowCount = _a.rowCount, columnCount = _a.columnCount, _p = _a.selectionTopBound, selectionTopBound = _p === void 0 ? 0 : _p, _q = _a.selectionBottomBound, selectionBottomBound = _q === void 0 ? rowCount - 1 : _q, _r = _a.selectionLeftBound, selectionLeftBound = _r === void 0 ? 0 : _r, _s = _a.selectionRightBound, selectionRightBound = _s === void 0 ? columnCount - 1 : _s, editorProps = _a.editorProps, onBeforeEdit = _a.onBeforeEdit, onKeyDown = _a.onKeyDown, _t = _a.sticky, sticky = _t === void 0 ? false : _t;
+    var _u = tslib_1.__read((0, react_1.useState)(false), 2), isEditorShown = _u[0], setShowEditor = _u[1];
+    var _v = tslib_1.__read((0, react_1.useState)(""), 2), value = _v[0], setValue = _v[1];
+    var _w = tslib_1.__read((0, react_1.useState)({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    }), 2), position = _w[0], setPosition = _w[1];
+    var currentActiveCellRef = (0, react_1.useRef)(null);
+    var initialActiveCell = (0, react_1.useRef)(undefined);
+    var _x = tslib_1.__read((0, react_1.useState)({
+        scrollLeft: 0,
+        scrollTop: 0,
+    }), 2), scrollPosition = _x[0], setScrollPosition = _x[1];
+    var _y = tslib_1.__read((0, react_1.useState)(true), 2), autoFocus = _y[0], setAutoFocus = _y[1];
+    var isDirtyRef = (0, react_1.useRef)(false);
+    var isEnteringNewValue = (0, react_1.useRef)(false);
+    var currentValueRef = (0, react_1.useRef)(value);
+    var initialValueRef = (0, react_1.useRef)(undefined);
+    var maxEditorDimensionsRef = (0, react_1.useRef)(undefined);
+    var showEditor = (0, react_1.useCallback)(function () { return setShowEditor(true); }, []);
+    var hideEditor = (0, react_1.useCallback)(function () {
+        setShowEditor(false);
+        currentActiveCellRef.current = null;
+    }, []);
+    var focusGrid = (0, react_1.useCallback)(function () {
+        requestAnimationFrame(function () { return gridRef.current && gridRef.current.focus(); });
+    }, []);
+    /* Keep ref in sync */
+    (0, react_1.useEffect)(function () {
+        currentValueRef.current = value;
+    });
+    /**
+     * Make a cell editable
+     * @param coords
+     * @param initialValue
+     */
+    var makeEditable = (0, react_1.useCallback)(function (coords, initialValue, autoFocus) {
+        var _a, _b, _c, _d;
+        if (autoFocus === void 0) { autoFocus = true; }
+        if (!gridRef.current)
+            return;
+        /* Get actual coords for merged cells */
+        coords = gridRef.current.getActualCellCoords(coords);
+        /* Check if its the same cell */
+        if ((0, helpers_1.isEqualCells)(coords, currentActiveCellRef.current)) {
+            return;
+        }
+        /* Call on before edit */
+        if (canEdit(coords)) {
+            /* Let user modify coords before edit */
+            onBeforeEdit === null || onBeforeEdit === void 0 ? void 0 : onBeforeEdit(coords);
+            /*  Focus */
+            (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.scrollToCell(coords);
+            currentActiveCellRef.current = coords;
+            /* Get offsets */
+            var pos = gridRef.current.getCellOffsetFromCoords(coords);
+            if ((0, helpers_1.isNull)(pos)) {
+                return;
+            }
+            var scrollPosition_1 = gridRef.current.getScrollPosition();
+            var cellValue = getValue === null || getValue === void 0 ? void 0 : getValue(coords.rowIndex, coords.columnIndex);
+            var value_1 = (_b = initialValue !== null && initialValue !== void 0 ? initialValue : cellValue) !== null && _b !== void 0 ? _b : "";
+            var cellPosition = sticky
+                ? // Editor is rendered outside the <Grid /> component
+                    // If the user has scrolled down, and then activate the editor, we will need to adjust the position
+                    // of the sticky editor accordingly
+                    // Subsequent scroll events has no effect, cos of sticky option
+                    getCellPosition(pos, scrollPosition_1)
+                : pos;
+            /**
+             * Set max editor ref based on grid container
+             */
+            var _e = gridRef.current.getDimensions(), containerWidth = _e.containerWidth, containerHeight = _e.containerHeight;
+            maxEditorDimensionsRef.current = {
+                height: containerHeight - ((_c = cellPosition.y) !== null && _c !== void 0 ? _c : 0),
+                width: containerWidth - ((_d = cellPosition.x) !== null && _d !== void 0 ? _d : 0),
+            };
+            /**
+             * If the user has entered a value in the cell, mark it as dirty
+             * So that during mousedown, onSubmit gets called
+             */
+            isEnteringNewValue.current =
+                initialValue !== void 0 || cellValue === void 0;
+            isDirtyRef.current = !!initialValue;
+            initialValueRef.current = initialValue !== null && initialValue !== void 0 ? initialValue : value_1;
+            /* Trigger onChange handlers */
+            setValue(value_1);
+            onChange === null || onChange === void 0 ? void 0 : onChange(value_1, coords);
+            setAutoFocus(autoFocus);
+            setScrollPosition(scrollPosition_1);
+            setPosition(cellPosition);
+            showEditor();
+        }
+    }, [frozenRows, frozenColumns, onBeforeEdit, canEdit, sticky, getValue]);
+    /* Frozen flags */
+    var isFrozenRow = currentActiveCellRef.current &&
+        ((_b = currentActiveCellRef.current) === null || _b === void 0 ? void 0 : _b.rowIndex) < frozenRows;
+    var isFrozenColumn = currentActiveCellRef.current &&
+        ((_c = currentActiveCellRef.current) === null || _c === void 0 ? void 0 : _c.columnIndex) < frozenColumns;
+    /**
+     * Get current cell position based on scroll position
+     * @param position
+     * @param scrollPosition
+     */
+    var getCellPosition = function (position, scrollPosition) {
+        if (!currentActiveCellRef.current)
+            return { x: 0, y: 0, width: 0, height: 0 };
+        return tslib_1.__assign(tslib_1.__assign({}, position), { x: position.x -
+                (isFrozenColumn ? 0 : scrollPosition.scrollLeft), y: position.y - (isFrozenRow ? 0 : scrollPosition.scrollTop) });
+    };
+    /* Activate edit mode */
+    var handleDoubleClick = (0, react_1.useCallback)(function (e) {
+        if (!gridRef.current)
+            return;
+        var coords = gridRef.current.getCellCoordsFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY);
+        if (!coords)
+            return;
+        var rowIndex = coords.rowIndex, columnIndex = coords.columnIndex;
+        makeEditable({ rowIndex: rowIndex, columnIndex: columnIndex });
+    }, [makeEditable, frozenRows, frozenColumns]);
+    var isSelectionKey = (0, react_1.useCallback)(function (keyCode) {
+        return ([
+            types_1.KeyCodes.Right,
+            types_1.KeyCodes.Left,
+            types_1.KeyCodes.Up,
+            types_1.KeyCodes.Down,
+            types_1.KeyCodes.Meta,
+            types_1.KeyCodes.Escape,
+            types_1.KeyCodes.Tab,
+            types_1.KeyCodes.Home,
+            types_1.KeyCodes.End,
+            types_1.KeyCodes.CapsLock,
+            types_1.KeyCodes.PageDown,
+            types_1.KeyCodes.PageUp,
+            types_1.KeyCodes.ScrollLock,
+            types_1.KeyCodes.NumLock,
+            types_1.KeyCodes.Insert,
+            types_1.KeyCodes.Pause,
+        ].indexOf(keyCode) !== -1 ||
+            // Exclude Function keys
+            (keyCode >= types_1.KeyCodes.F1 && keyCode <= types_1.KeyCodes.F12));
+    }, []);
+    /**
+     * Helper function to keep track of
+     * the first cell that the user started editing
+     * @param cell
+     */
+    var setInitialActiveCell = function (cell) {
+        initialActiveCell.current = cell;
+    };
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        var keyCode = e.nativeEvent.keyCode;
+        var isEnter = keyCode === types_1.KeyCodes.Enter;
+        if (keyCode === types_1.KeyCodes.Tab && !initialActiveCell.current) {
+            setInitialActiveCell(activeCell);
+        }
+        // if (isArrowKey(keyCode)) {
+        //   setInitialActiveCell(null);
+        // }
+        if (isSelectionKey(keyCode) ||
+            e.nativeEvent.ctrlKey ||
+            (e.nativeEvent.shiftKey &&
+                (e.nativeEvent.key === "Shift" ||
+                    e.nativeEvent.which === types_1.KeyCodes.SPACE)) ||
+            e.nativeEvent.metaKey ||
+            e.nativeEvent.which === types_1.KeyCodes.ALT)
+            return;
+        /* If user has not made any selection yet */
+        if (!activeCell)
+            return;
+        var rowIndex = activeCell.rowIndex, columnIndex = activeCell.columnIndex;
+        if (keyCode === types_1.KeyCodes.Delete || keyCode === types_1.KeyCodes.BackSpace) {
+            // TODO: onbefore  delete
+            onDelete && onDelete(activeCell, selections);
+            e.preventDefault();
+            return;
+        }
+        var initialValue = isEnter // Enter key
+            ? undefined
+            : e.nativeEvent.key;
+        /* Open the editor */
+        makeEditable({ rowIndex: rowIndex, columnIndex: columnIndex }, initialValue);
+        /* Prevent the first keystroke */
+        e.preventDefault();
+    }, [getValue, selections, activeCell, onDelete]);
+    /**
+     * Get next focusable cell
+     * Respects selection bounds
+     */
+    var getNextFocusableCell = (0, react_1.useCallback)(function (currentCell, direction) {
+        var _a, _b, _c, _d, _e;
+        if (direction === void 0) { direction = types_1.Direction.Right; }
+        /* Next immediate cell */
+        var range = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getCellBounds(currentCell);
+        if (!range)
+            return null;
+        var nextActiveCell;
+        switch (direction) {
+            case types_1.Direction.Right: {
+                var columnIndex = (0, helpers_1.clampIndex)(Math.min(range.endColumnIndex + 1, selectionRightBound), isHiddenColumn, direction);
+                nextActiveCell = {
+                    rowIndex: range.startRowIndex,
+                    columnIndex: columnIndex,
+                };
+                break;
+            }
+            case types_1.Direction.Up: {
+                var rowIndex = (0, helpers_1.clampIndex)(Math.max(range.startRowIndex - 1, selectionTopBound), isHiddenRow, direction);
+                nextActiveCell = {
+                    rowIndex: rowIndex,
+                    columnIndex: range.startColumnIndex,
+                };
+                break;
+            }
+            case types_1.Direction.Left: {
+                var columnIndex = (0, helpers_1.clampIndex)(Math.max(range.startColumnIndex - 1, selectionLeftBound), isHiddenColumn, direction);
+                nextActiveCell = {
+                    rowIndex: range.startRowIndex,
+                    columnIndex: columnIndex,
+                };
+                break;
+            }
+            case types_1.Direction.Down: {
+                // Down
+                var rowIndex = (0, helpers_1.clampIndex)(Math.min(((_c = (_b = initialActiveCell.current) === null || _b === void 0 ? void 0 : _b.rowIndex) !== null && _c !== void 0 ? _c : range.endRowIndex) + 1, selectionBottomBound), isHiddenRow, direction);
+                nextActiveCell = {
+                    rowIndex: rowIndex,
+                    columnIndex: (_e = (_d = initialActiveCell.current) === null || _d === void 0 ? void 0 : _d.columnIndex) !== null && _e !== void 0 ? _e : range.startColumnIndex,
+                };
+                break;
+            }
+        }
+        if (direction === types_1.Direction.Right && !initialActiveCell.current) {
+            setInitialActiveCell(currentCell);
+        }
+        if (direction === types_1.Direction.Down) {
+            /* Move to the next row + cell */
+            setInitialActiveCell(null);
+        }
+        /* If user has selected some cells and active cell is within this selection */
+        if (selections.length && currentCell && gridRef.current) {
+            var range_1 = selections[selections.length - 1].range;
+            var activeCellBounds = gridRef.current.getCellBounds(currentCell);
+            var nextCell = (0, helpers_1.findNextCellWithinBounds)(activeCellBounds, range_1, direction);
+            if (nextCell)
+                nextActiveCell = nextCell;
+        }
+        return nextActiveCell;
+    }, [
+        selections,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionBottomBound,
+        selectionTopBound,
+    ]);
+    /* Save the value */
+    var handleSubmit = (0, react_1.useCallback)(function (value, activeCell, nextActiveCell) {
+        /**
+         * Hide the editor first, so that we can handle onBlur events
+         * 1. Editor hides -> Submit
+         * 2. If user clicks outside the grid, onBlur is called, if there is a activeCell, we do another submit
+         */
+        hideEditor();
+        /* Save the new value */
+        onSubmit && onSubmit(value, activeCell, nextActiveCell);
+        /* Keep the focus */
+        focusGrid();
+    }, [onSubmit]);
+    /* When the input is blurred out */
+    var handleCancel = (0, react_1.useCallback)(function (e) {
+        hideEditor();
+        onCancel && onCancel(e);
+        /* Keep the focus back in the grid */
+        focusGrid();
+    }, [onCancel]);
+    var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        /* Persistent input, hides only during Enter key or during submit or cancel calls */
+        if (!hideOnBlur) {
+            return;
+        }
+        if (currentActiveCellRef.current) {
+            if (isDirtyRef.current) {
+                handleSubmit(currentValueRef.current, currentActiveCellRef.current);
+            }
+            else {
+                handleCancel();
+            }
+        }
+        setInitialActiveCell(null);
+    }, [hideOnBlur, handleSubmit, handleCancel]);
+    var handleChange = (0, react_1.useCallback)(function (newValue, activeCell) {
+        /**
+         * Make sure we dont call onChange if initialValue is set
+         * This is to accomodate for editor that fire onChange during initialvalue
+         * Eg: Slate  <Editor value='' onChange />
+         */
+        if (initialValueRef.current !== void 0 &&
+            initialValueRef.current === newValue) {
+            initialValueRef.current = void 0;
+            return;
+        }
+        if (!currentActiveCellRef.current)
+            return;
+        /* Check if the value has changed. Used to conditionally submit if editor is not in focus */
+        isDirtyRef.current = newValue !== value;
+        setValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, activeCell);
+    }, [value]);
+    var handleScroll = (0, react_1.useCallback)(function (scrollPos) {
+        if (!currentActiveCellRef.current)
+            return;
+        setScrollPosition(scrollPos);
+    }, []);
+    /* Editor */
+    var editingCell = currentActiveCellRef.current;
+    var Editor = (0, react_1.useMemo)(function () {
+        return editingCell
+            ? getEditor(editingCell) || (0, exports.getDefaultEditor)(editingCell)
+            : null;
+    }, [editingCell]);
+    var handleBlur = (0, react_1.useCallback)(function (e) {
+        if (currentActiveCellRef.current) {
+            /* Keep the focus */
+            focusGrid();
+        }
+    }, []);
+    var finalCellPosition = (0, react_1.useMemo)(function () {
+        /**
+         * Since the editor is sticky,
+         * we dont need to adjust the position,
+         * as scrollposition wont move the editor
+         *
+         * When the editor is first active, in makeEditable,
+         * we accomodate for the initial scrollPosition
+         */
+        if (sticky) {
+            return position;
+        }
+        /**
+         * If editor is not sticky, keep adjusting
+         * its position to accomodate for scroll
+         */
+        return getCellPosition(position, scrollPosition);
+    }, [sticky, position, scrollPosition, frozenColumns, frozenRows]);
+    /* Get offset of frozen rows and columns */
+    var frozenRowOffset = (0, react_1.useMemo)(function () { var _a; return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getRowOffset(frozenRows); }, [frozenRows]);
+    var frozenColumnOffset = (0, react_1.useMemo)(function () { var _a; return (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.getColumnOffset(frozenColumns); }, [frozenColumns]);
+    var editorComponent = isEditorShown && Editor ? (react_1.default.createElement(Editor, tslib_1.__assign({}, editorProps === null || editorProps === void 0 ? void 0 : editorProps(), { 
+        /* This is the cell that is currently being edited */
+        cell: editingCell, activeCell: activeCell, autoFocus: autoFocus, value: value, isNewValue: isEnteringNewValue.current, selections: selections, onChange: handleChange, onSubmit: handleSubmit, onCancel: handleCancel, position: finalCellPosition, scrollPosition: scrollPosition, getNextFocusableCell: getNextFocusableCell, onBlur: handleBlur, onKeyDown: onKeyDown, maxWidth: (_d = maxEditorDimensionsRef.current) === null || _d === void 0 ? void 0 : _d.width, maxHeight: (_e = maxEditorDimensionsRef.current) === null || _e === void 0 ? void 0 : _e.height, isFrozenRow: isFrozenRow, isFrozenColumn: isFrozenColumn, frozenRowOffset: frozenRowOffset, frozenColumnOffset: frozenColumnOffset }))) : null;
+    return {
+        editorComponent: editorComponent,
+        onDoubleClick: handleDoubleClick,
+        onKeyDown: handleKeyDown,
+        getNextFocusableCell: getNextFocusableCell,
+        isEditInProgress: !!editingCell,
+        editingCell: editingCell,
+        makeEditable: makeEditable,
+        setValue: handleChange,
+        hideEditor: hideEditor,
+        showEditor: showEditor,
+        submitEditor: handleSubmit,
+        cancelEditor: handleCancel,
+        onMouseDown: handleMouseDown,
+        onScroll: handleScroll,
+    };
+};
+exports.default = useEditable;

package/dist/{hooks → cjs/hooks}/useFilter.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { CellInterface, GridRef, AreaProps, AreaStyle } from "./../Grid";
+import type { AreaStyle, CellInterface, GridRange, GridRef } from "./../Grid";
 export interface FilterView {
-    bounds: AreaProps;
+    bounds: GridRange;
     filters?: Filter;
     style?: AreaStyle;
     title?: string;
@@ -66,3 +66,4 @@ export interface FilterState {
  */
 declare const useFilter: ({ getFilterComponent, gridRef, width, offset, getValue, frozenRows, frozenColumns, }: FilterProps) => FilterResults;
 export default useFilter;
+//# sourceMappingURL=useFilter.d.ts.map

package/dist/cjs/hooks/useFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilter.d.ts","sourceRoot":"","sources":["../../../hooks/useFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EAEb,SAAS,EACT,OAAO,EACR,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,IAAI;IAClD,SAAS,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;AAC7E,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,IAAI;IAC3D,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;CACd,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3C,MAAM,MAAM,sBAAsB,GAC9B,SAAS,GACT,YAAY,GACZ,SAAS,GACT,YAAY,GACZ,OAAO,GACP,UAAU,GACV,aAAa,GACb,UAAU,GACV,oBAAoB,GACpB,iBAAiB,CAAC;AAEtB,MAAM,MAAM,qBAAqB,GAC7B,cAAc,GACd,iBAAiB,GACjB,gBAAgB,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,mBAAmB,GACnB,gBAAgB,GAChB,cAAc,GACd,WAAW,CAAC;AAEhB,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;IAC9E;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAChD;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,GAAG,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,UAAU,EAAE,CACV,IAAI,EAAE,aAAa,EACnB,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,UAAU,EACtB,MAAM,CAAC,EAAE,gBAAgB,KACtB,IAAI,CAAC;IACV;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAKD,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,GAAI,sFAQhB,WAAW,KAAG,aA0HhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/cjs/hooks/useFilter.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var helpers_1 = require("../helpers");
+/* Default filter component */
+var getDefaultFilerComponent = function (cell) { return null; };
+/**
+ * Use filter hook
+ * @param param0
+ */
+var useFilter = function (_a) {
+    var _b = _a.getFilterComponent, getFilterComponent = _b === void 0 ? getDefaultFilerComponent : _b, gridRef = _a.gridRef, _c = _a.width, width = _c === void 0 ? 220 : _c, _d = _a.offset, offset = _d === void 0 ? 20 : _d, getValue = _a.getValue, _e = _a.frozenRows, frozenRows = _e === void 0 ? 0 : _e, _f = _a.frozenColumns, frozenColumns = _f === void 0 ? 0 : _f;
+    var _g = tslib_1.__read((0, react_1.useState)(null), 2), filterCell = _g[0], setFilterCell = _g[1];
+    var _h = tslib_1.__read((0, react_1.useState)(false), 2), isFilterVisible = _h[0], setIsFilterVisible = _h[1];
+    var _j = tslib_1.__read((0, react_1.useState)(null), 2), currentFilter = _j[0], setCurrentFilter = _j[1];
+    var _k = tslib_1.__read((0, react_1.useState)({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    }), 2), position = _k[0], setPosition = _k[1];
+    var FilterComponent = (0, react_1.useMemo)(function () {
+        return getFilterComponent(filterCell);
+    }, [filterCell]);
+    /**
+     * Show filter panel
+     */
+    var handleShowFilter = (0, react_1.useCallback)(function (coords, index, filterView, filter) {
+        if (!gridRef.current)
+            return;
+        /* Get actual coords for merged cells */
+        coords = gridRef.current.getActualCellCoords(coords);
+        /* Get scroll position */
+        var scrollPosition = gridRef.current.getScrollPosition();
+        /* Get cell position */
+        var pos = gridRef.current.getCellOffsetFromCoords(coords);
+        /* Check if its frozen */
+        var isFrozenColumn = coords.columnIndex < frozenColumns;
+        var isFrozenRow = coords.rowIndex < frozenRows;
+        if ((0, helpers_1.isNull)(pos)) {
+            return;
+        }
+        /* Set cell position */
+        setPosition(function (prev) {
+            var left = pos.x;
+            var top = pos.y;
+            var cellWidth = pos.width;
+            return tslib_1.__assign(tslib_1.__assign({}, prev), { x: left +
+                    cellWidth -
+                    (isFrozenColumn ? 0 : scrollPosition.scrollLeft) <
+                    width
+                    ? left +
+                        cellWidth -
+                        offset -
+                        (isFrozenColumn ? 0 : scrollPosition.scrollLeft)
+                    : left +
+                        cellWidth -
+                        (isFrozenColumn ? 0 : scrollPosition.scrollLeft) -
+                        width, y: top - (isFrozenRow ? 0 : scrollPosition.scrollTop) + offset });
+        });
+        /* Set filter cell */
+        setFilterCell(coords);
+        /* set current filter */
+        setCurrentFilter({ filter: filter, filterView: filterView, index: index });
+        /* Show filter */
+        showFilter();
+    }, [frozenRows, frozenColumns]);
+    var hideFilter = (0, react_1.useCallback)(function () {
+        setIsFilterVisible(false);
+    }, []);
+    var showFilter = (0, react_1.useCallback)(function () {
+        setIsFilterVisible(true);
+    }, []);
+    var values = (0, react_1.useMemo)(function () {
+        if (!filterCell || !currentFilter)
+            return [];
+        var filterView = currentFilter.filterView;
+        var columnIndex = filterCell.columnIndex;
+        var bounds = filterView.bounds;
+        var filterValues = new Set();
+        for (var i = bounds.startRowIndex + 1; i <= bounds.endRowIndex; i++) {
+            var cell = { rowIndex: i, columnIndex: columnIndex };
+            var text = getValue(cell);
+            var value = (0, helpers_1.isNull)(text) ? "" : text;
+            filterValues.add(value);
+        }
+        return Array.from(filterValues);
+    }, [filterCell, currentFilter]);
+    var filterComponent = isFilterVisible && FilterComponent ? (react_1.default.createElement(FilterComponent, { position: position, width: width, values: values, index: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.index, filterView: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.filterView, filter: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.filter, columnIndex: filterCell === null || filterCell === void 0 ? void 0 : filterCell.columnIndex, rowIndex: filterCell === null || filterCell === void 0 ? void 0 : filterCell.rowIndex, onRequestClose: hideFilter, onRequestShow: handleShowFilter })) : null;
+    return {
+        filterComponent: filterComponent,
+        showFilter: handleShowFilter,
+        hideFilter: hideFilter,
+    };
+};
+exports.default = useFilter;

package/dist/{hooks → cjs/hooks}/useImage.d.ts

@@ -10,3 +10,4 @@ export interface UseImageResults {
 }
 declare const useImage: ({ url, crossOrigin }: UseImageProps) => UseImageResults;
 export default useImage;
+//# sourceMappingURL=useImage.d.ts.map

package/dist/cjs/hooks/useImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImage.d.ts","sourceRoot":"","sources":["../../../hooks/useImage.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAmDD,QAAA,MAAM,QAAQ,GAAI,sBAAsB,aAAa,oBAgDpD,CAAC;AAEF,eAAe,QAAQ,CAAC"}