@rowsncolumns/grid 9.0.3 → 13.2.32

package/dist/esm/hooks/useEditable.js

@@ -0,0 +1,482 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { autoSizerCanvas, castToString, clampIndex, findNextCellWithinBounds, isEqualCells, isNull, } from "../helpers";
+import { Direction, KeyCodes } from "./../types";
+/**
+ * Default cell editor
+ * @param props
+ */
+const DefaultEditor = (props) => {
+    const { onChange, onSubmit, onCancel, position, cell, getNextFocusableCell, value = "", activeCell, autoFocus = true, onKeyDown, selections, scrollPosition, maxWidth, maxHeight, isFrozenRow, isFrozenColumn, frozenRowOffset, frozenColumnOffset, isNewValue, ...rest } = props;
+    const borderWidth = 2;
+    const padding = 10; /* 2 + 1 + 1 + 2 + 2 */
+    const inputRef = useRef(null);
+    const { x = 0, y = 0, width = 0, height = 0 } = position;
+    const getWidth = useCallback((text) => {
+        const textWidth = autoSizerCanvas.measureText(text)?.width || 0;
+        return Math.max(textWidth + padding, width + borderWidth / 2);
+    }, [width]);
+    useEffect(() => {
+        setInputWidth(getWidth(value));
+    }, [value]);
+    const [inputWidth, setInputWidth] = useState(() => getWidth(value));
+    useEffect(() => {
+        if (!inputRef.current)
+            return;
+        if (autoFocus)
+            inputRef.current.focus();
+        /* Focus cursor at the end */
+        inputRef.current.selectionStart = castToString(value)?.length ?? 0;
+    }, []);
+    const inputHeight = height;
+    return (React.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.createElement("textarea", { 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: (e) => {
+                onChange?.(e.target.value, cell);
+            }, onKeyDown: (e) => {
+                if (!inputRef.current)
+                    return;
+                const isShiftKey = e.nativeEvent.shiftKey;
+                const isMetaKey = e.nativeEvent.metaKey;
+                const value = inputRef.current.value;
+                const isCursorAtEnd = value.length === inputRef.current.selectionEnd;
+                const isNewCondition = isNewValue && !isShiftKey && !isMetaKey && isCursorAtEnd;
+                // Enter key
+                if (e.which === KeyCodes.Enter) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell?.(cell, isShiftKey ? Direction.Up : Direction.Down));
+                }
+                if (isNewCondition && e.which === KeyCodes.Right) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell?.(cell, Direction.Right));
+                }
+                if (isNewCondition && e.which === KeyCodes.Left) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell?.(cell, Direction.Left));
+                }
+                if (isNewCondition && e.which === KeyCodes.Up) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell?.(cell, Direction.Up));
+                }
+                if (isNewCondition && e.which === KeyCodes.Down) {
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell?.(cell, Direction.Down));
+                }
+                if (e.which === KeyCodes.Escape) {
+                    onCancel && onCancel(e);
+                }
+                if (e.which === KeyCodes.Tab) {
+                    e.preventDefault();
+                    onSubmit &&
+                        onSubmit(value, cell, getNextFocusableCell?.(cell, isShiftKey ? Direction.Left : Direction.Right));
+                }
+                onKeyDown?.(e);
+            }, ...rest })));
+};
+export const getDefaultEditor = (cell) => DefaultEditor;
+const defaultCanEdit = (cell) => true;
+const defaultIsHidden = (i) => 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
+ */
+const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, onSubmit, onCancel, onDelete, selections = [], activeCell, canEdit = defaultCanEdit, frozenRows = 0, frozenColumns = 0, hideOnBlur = true, isHiddenRow = defaultIsHidden, isHiddenColumn = defaultIsHidden, rowCount, columnCount, selectionTopBound = 0, selectionBottomBound = rowCount - 1, selectionLeftBound = 0, selectionRightBound = columnCount - 1, editorProps, onBeforeEdit, onKeyDown, sticky = false, }) => {
+    const [isEditorShown, setShowEditor] = useState(false);
+    const [value, setValue] = useState("");
+    const [position, setPosition] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    const currentActiveCellRef = useRef(null);
+    const initialActiveCell = useRef(undefined);
+    const [scrollPosition, setScrollPosition] = useState({
+        scrollLeft: 0,
+        scrollTop: 0,
+    });
+    const [autoFocus, setAutoFocus] = useState(true);
+    const isDirtyRef = useRef(false);
+    const isEnteringNewValue = useRef(false);
+    const currentValueRef = useRef(value);
+    const initialValueRef = useRef(undefined);
+    const maxEditorDimensionsRef = useRef(undefined);
+    const showEditor = useCallback(() => setShowEditor(true), []);
+    const hideEditor = useCallback(() => {
+        setShowEditor(false);
+        currentActiveCellRef.current = null;
+    }, []);
+    const focusGrid = useCallback(() => {
+        requestAnimationFrame(() => gridRef.current && gridRef.current.focus());
+    }, []);
+    /* Keep ref in sync */
+    useEffect(() => {
+        currentValueRef.current = value;
+    });
+    /**
+     * Make a cell editable
+     * @param coords
+     * @param initialValue
+     */
+    const makeEditable = useCallback((coords, initialValue, autoFocus = true) => {
+        if (!gridRef.current)
+            return;
+        /* Get actual coords for merged cells */
+        coords = gridRef.current.getActualCellCoords(coords);
+        /* Check if its the same cell */
+        if (isEqualCells(coords, currentActiveCellRef.current)) {
+            return;
+        }
+        /* Call on before edit */
+        if (canEdit(coords)) {
+            /* Let user modify coords before edit */
+            onBeforeEdit?.(coords);
+            /*  Focus */
+            gridRef.current?.scrollToCell(coords);
+            currentActiveCellRef.current = coords;
+            /* Get offsets */
+            const pos = gridRef.current.getCellOffsetFromCoords(coords);
+            if (isNull(pos)) {
+                return;
+            }
+            const scrollPosition = gridRef.current.getScrollPosition();
+            const cellValue = getValue?.(coords.rowIndex, coords.columnIndex);
+            const value = initialValue ?? cellValue ?? "";
+            const 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)
+                : pos;
+            /**
+             * Set max editor ref based on grid container
+             */
+            const { containerWidth, containerHeight } = gridRef.current.getDimensions();
+            maxEditorDimensionsRef.current = {
+                height: containerHeight - (cellPosition.y ?? 0),
+                width: containerWidth - (cellPosition.x ?? 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 ?? value;
+            /* Trigger onChange handlers */
+            setValue(value);
+            onChange?.(value, coords);
+            setAutoFocus(autoFocus);
+            setScrollPosition(scrollPosition);
+            setPosition(cellPosition);
+            showEditor();
+        }
+    }, [frozenRows, frozenColumns, onBeforeEdit, canEdit, sticky, getValue]);
+    /* Frozen flags */
+    const isFrozenRow = currentActiveCellRef.current &&
+        currentActiveCellRef.current?.rowIndex < frozenRows;
+    const isFrozenColumn = currentActiveCellRef.current &&
+        currentActiveCellRef.current?.columnIndex < frozenColumns;
+    /**
+     * Get current cell position based on scroll position
+     * @param position
+     * @param scrollPosition
+     */
+    const getCellPosition = (position, scrollPosition) => {
+        if (!currentActiveCellRef.current)
+            return { x: 0, y: 0, width: 0, height: 0 };
+        return {
+            ...position,
+            x: position.x -
+                (isFrozenColumn ? 0 : scrollPosition.scrollLeft),
+            y: position.y - (isFrozenRow ? 0 : scrollPosition.scrollTop),
+        };
+    };
+    /* Activate edit mode */
+    const handleDoubleClick = useCallback((e) => {
+        if (!gridRef.current)
+            return;
+        const coords = gridRef.current.getCellCoordsFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY);
+        if (!coords)
+            return;
+        const { rowIndex, columnIndex } = coords;
+        makeEditable({ rowIndex, columnIndex });
+    }, [makeEditable, frozenRows, frozenColumns]);
+    const isSelectionKey = useCallback((keyCode) => {
+        return ([
+            KeyCodes.Right,
+            KeyCodes.Left,
+            KeyCodes.Up,
+            KeyCodes.Down,
+            KeyCodes.Meta,
+            KeyCodes.Escape,
+            KeyCodes.Tab,
+            KeyCodes.Home,
+            KeyCodes.End,
+            KeyCodes.CapsLock,
+            KeyCodes.PageDown,
+            KeyCodes.PageUp,
+            KeyCodes.ScrollLock,
+            KeyCodes.NumLock,
+            KeyCodes.Insert,
+            KeyCodes.Pause,
+        ].indexOf(keyCode) !== -1 ||
+            // Exclude Function keys
+            (keyCode >= KeyCodes.F1 && keyCode <= KeyCodes.F12));
+    }, []);
+    /**
+     * Helper function to keep track of
+     * the first cell that the user started editing
+     * @param cell
+     */
+    const setInitialActiveCell = (cell) => {
+        initialActiveCell.current = cell;
+    };
+    const handleKeyDown = useCallback((e) => {
+        const keyCode = e.nativeEvent.keyCode;
+        const isEnter = keyCode === KeyCodes.Enter;
+        if (keyCode === 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 === KeyCodes.SPACE)) ||
+            e.nativeEvent.metaKey ||
+            e.nativeEvent.which === KeyCodes.ALT)
+            return;
+        /* If user has not made any selection yet */
+        if (!activeCell)
+            return;
+        const { rowIndex, columnIndex } = activeCell;
+        if (keyCode === KeyCodes.Delete || keyCode === KeyCodes.BackSpace) {
+            // TODO: onbefore  delete
+            onDelete && onDelete(activeCell, selections);
+            e.preventDefault();
+            return;
+        }
+        const initialValue = isEnter // Enter key
+            ? undefined
+            : e.nativeEvent.key;
+        /* Open the editor */
+        makeEditable({ rowIndex, columnIndex }, initialValue);
+        /* Prevent the first keystroke */
+        e.preventDefault();
+    }, [getValue, selections, activeCell, onDelete]);
+    /**
+     * Get next focusable cell
+     * Respects selection bounds
+     */
+    const getNextFocusableCell = useCallback((currentCell, direction = Direction.Right) => {
+        /* Next immediate cell */
+        const range = gridRef.current?.getCellBounds(currentCell);
+        if (!range)
+            return null;
+        let nextActiveCell;
+        switch (direction) {
+            case Direction.Right: {
+                const columnIndex = clampIndex(Math.min(range.endColumnIndex + 1, selectionRightBound), isHiddenColumn, direction);
+                nextActiveCell = {
+                    rowIndex: range.startRowIndex,
+                    columnIndex,
+                };
+                break;
+            }
+            case Direction.Up: {
+                const rowIndex = clampIndex(Math.max(range.startRowIndex - 1, selectionTopBound), isHiddenRow, direction);
+                nextActiveCell = {
+                    rowIndex,
+                    columnIndex: range.startColumnIndex,
+                };
+                break;
+            }
+            case Direction.Left: {
+                const columnIndex = clampIndex(Math.max(range.startColumnIndex - 1, selectionLeftBound), isHiddenColumn, direction);
+                nextActiveCell = {
+                    rowIndex: range.startRowIndex,
+                    columnIndex,
+                };
+                break;
+            }
+            case Direction.Down: {
+                // Down
+                const rowIndex = clampIndex(Math.min((initialActiveCell.current?.rowIndex ?? range.endRowIndex) + 1, selectionBottomBound), isHiddenRow, direction);
+                nextActiveCell = {
+                    rowIndex,
+                    columnIndex: initialActiveCell.current?.columnIndex ?? range.startColumnIndex,
+                };
+                break;
+            }
+        }
+        if (direction === Direction.Right && !initialActiveCell.current) {
+            setInitialActiveCell(currentCell);
+        }
+        if (direction === 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) {
+            const { range } = selections[selections.length - 1];
+            const activeCellBounds = gridRef.current.getCellBounds(currentCell);
+            const nextCell = findNextCellWithinBounds(activeCellBounds, range, direction);
+            if (nextCell)
+                nextActiveCell = nextCell;
+        }
+        return nextActiveCell;
+    }, [
+        selections,
+        isHiddenRow,
+        isHiddenColumn,
+        selectionBottomBound,
+        selectionTopBound,
+    ]);
+    /* Save the value */
+    const handleSubmit = useCallback((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 */
+    const handleCancel = useCallback((e) => {
+        hideEditor();
+        onCancel && onCancel(e);
+        /* Keep the focus back in the grid */
+        focusGrid();
+    }, [onCancel]);
+    const handleMouseDown = useCallback((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]);
+    const handleChange = useCallback((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?.(newValue, activeCell);
+    }, [value]);
+    const handleScroll = useCallback((scrollPos) => {
+        if (!currentActiveCellRef.current)
+            return;
+        setScrollPosition(scrollPos);
+    }, []);
+    /* Editor */
+    const editingCell = currentActiveCellRef.current;
+    const Editor = useMemo(() => {
+        return editingCell
+            ? getEditor(editingCell) || getDefaultEditor(editingCell)
+            : null;
+    }, [editingCell]);
+    const handleBlur = useCallback((e) => {
+        if (currentActiveCellRef.current) {
+            /* Keep the focus */
+            focusGrid();
+        }
+    }, []);
+    const finalCellPosition = useMemo(() => {
+        /**
+         * 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 */
+    const frozenRowOffset = useMemo(() => gridRef.current?.getRowOffset(frozenRows), [frozenRows]);
+    const frozenColumnOffset = useMemo(() => gridRef.current?.getColumnOffset(frozenColumns), [frozenColumns]);
+    const editorComponent = isEditorShown && Editor ? (React.createElement(Editor, { ...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: maxEditorDimensionsRef.current?.width, maxHeight: maxEditorDimensionsRef.current?.height, isFrozenRow: isFrozenRow, isFrozenColumn: isFrozenColumn, frozenRowOffset: frozenRowOffset, frozenColumnOffset: frozenColumnOffset })) : null;
+    return {
+        editorComponent,
+        onDoubleClick: handleDoubleClick,
+        onKeyDown: handleKeyDown,
+        getNextFocusableCell,
+        isEditInProgress: !!editingCell,
+        editingCell,
+        makeEditable,
+        setValue: handleChange,
+        hideEditor,
+        showEditor,
+        submitEditor: handleSubmit,
+        cancelEditor: handleCancel,
+        onMouseDown: handleMouseDown,
+        onScroll: handleScroll,
+    };
+};
+export default useEditable;

package/dist/esm/hooks/useFilter.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import type { AreaStyle, CellInterface, GridRange, GridRef } from "./../Grid";
+export interface FilterView {
+    bounds: GridRange;
+    filters?: Filter;
+    style?: AreaStyle;
+    title?: string;
+}
+export type Filter = Record<string, FilterDefinition>;
+export type FilterDefinition<T = string | number> = {
+    condition?: FilterConditionDefinition<T>;
+    equals?: T[];
+    sort?: SortDirection;
+};
+export type FilterOperators = ContainsTextOperators | DataValidationOperator;
+export type FilterConditionDefinition<T = string | number> = {
+    operator?: FilterOperators;
+    values?: T[];
+};
+export type SortDirection = "asc" | "desc";
+export type DataValidationOperator = "isEmpty" | "notIsEmpty" | "between" | "notBetween" | "equal" | "notEqual" | "greaterThan" | "lessThan" | "greaterThanOrEqual" | "lessThanOrEqual";
+export type ContainsTextOperators = "containsText" | "notContainsText" | "containsBlanks" | "notContainsBlanks" | "containsErrors" | "notContainsErrors" | "startsWithText" | "endsWithText" | "equalText";
+export interface FilterProps {
+    /**
+     * Returns filter component
+     */
+    getFilterComponent?: (cell: CellInterface | null) => React.ElementType | null;
+    /**
+     * Access grid methods
+     */
+    gridRef: React.MutableRefObject<GridRef | null>;
+    /**
+     * Get value of a cell
+     */
+    getValue: (cell: CellInterface) => any;
+    /**
+     * Width of the filter panel
+     */
+    width?: number;
+    offset?: number;
+    frozenRows?: number;
+    frozenColumns?: number;
+}
+export interface FilterResults {
+    /**
+     * Component to render filter
+     */
+    filterComponent: React.ReactNode;
+    /**
+     * Enable filter
+     */
+    showFilter: (cell: CellInterface, index: number, filterView: FilterView, filter?: FilterDefinition) => void;
+    /**
+     * Hide filter component
+     */
+    hideFilter: () => void;
+}
+export interface FilterState {
+    filterView: FilterView;
+    filter?: FilterDefinition;
+    index: number;
+}
+/**
+ * Use filter hook
+ * @param param0
+ */
+declare const useFilter: ({ getFilterComponent, gridRef, width, offset, getValue, frozenRows, frozenColumns, }: FilterProps) => FilterResults;
+export default useFilter;
+//# sourceMappingURL=useFilter.d.ts.map

package/dist/esm/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/{hooks → esm/hooks}/useFilter.js

@@ -1,30 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const helpers_1 = require("../helpers");
+import React, { useCallback, useMemo, useState } from "react";
+import { isNull } from "../helpers";
 /* Default filter component */
 const getDefaultFilerComponent = (cell) => null;
 /**
@@ -32,20 +7,22 @@ const getDefaultFilerComponent = (cell) => null;
  * @param param0
  */
 const useFilter = ({ getFilterComponent = getDefaultFilerComponent, gridRef, width = 220, offset = 20, getValue, frozenRows = 0, frozenColumns = 0, }) => {
-    const [filterCell, setFilterCell] = (0, react_1.useState)(null);
-    const [isFilterVisible, setIsFilterVisible] = (0, react_1.useState)(false);
-    const [currentFilter, setCurrentFilter] = (0, react_1.useState)(null);
-    const [position, setPosition] = (0, react_1.useState)({
+    const [filterCell, setFilterCell] = useState(null);
+    const [isFilterVisible, setIsFilterVisible] = useState(false);
+    const [currentFilter, setCurrentFilter] = useState(null);
+    const [position, setPosition] = useState({
         x: 0,
         y: 0,
+        width: 0,
+        height: 0,
     });
-    const FilterComponent = (0, react_1.useMemo)(() => {
+    const FilterComponent = useMemo(() => {
         return getFilterComponent(filterCell);
     }, [filterCell]);
     /**
      * Show filter panel
      */
-    const handleShowFilter = (0, react_1.useCallback)((coords, index, filterView, filter) => {
+    const handleShowFilter = useCallback((coords, index, filterView, filter) => {
         if (!gridRef.current)
             return;
         /* Get actual coords for merged cells */
@@ -57,12 +34,16 @@ const useFilter = ({ getFilterComponent = getDefaultFilerComponent, gridRef, wid
         /* Check if its frozen */
         const isFrozenColumn = coords.columnIndex < frozenColumns;
         const isFrozenRow = coords.rowIndex < frozenRows;
+        if (isNull(pos)) {
+            return;
+        }
         /* Set cell position */
-        setPosition(() => {
+        setPosition((prev) => {
             const left = pos.x;
             const top = pos.y;
             const cellWidth = pos.width;
             return {
+                ...prev,
                 x: left +
                     cellWidth -
                     (isFrozenColumn ? 0 : scrollPosition.scrollLeft) <
@@ -85,33 +66,32 @@ const useFilter = ({ getFilterComponent = getDefaultFilerComponent, gridRef, wid
         /* Show filter */
         showFilter();
     }, [frozenRows, frozenColumns]);
-    const hideFilter = (0, react_1.useCallback)(() => {
+    const hideFilter = useCallback(() => {
         setIsFilterVisible(false);
     }, []);
-    const showFilter = (0, react_1.useCallback)(() => {
+    const showFilter = useCallback(() => {
         setIsFilterVisible(true);
     }, []);
-    const values = (0, react_1.useMemo)(() => {
+    const values = useMemo(() => {
         if (!filterCell || !currentFilter)
             return [];
         const { filterView } = currentFilter;
         const { columnIndex } = filterCell;
         const { bounds } = filterView;
         const filterValues = new Set();
-        for (let i = bounds.top + 1; i <= bounds.bottom; i++) {
+        for (let i = bounds.startRowIndex + 1; i <= bounds.endRowIndex; i++) {
             const cell = { rowIndex: i, columnIndex };
             const text = getValue(cell);
-            const value = (0, helpers_1.isNull)(text) ? "" : text;
+            const value = isNull(text) ? "" : text;
             filterValues.add(value);
         }
         return Array.from(filterValues);
     }, [filterCell, currentFilter]);
-    const 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;
+    const filterComponent = isFilterVisible && FilterComponent ? (React.createElement(FilterComponent, { position: position, width: width, values: values, index: currentFilter?.index, filterView: currentFilter?.filterView, filter: currentFilter?.filter, columnIndex: filterCell?.columnIndex, rowIndex: filterCell?.rowIndex, onRequestClose: hideFilter, onRequestShow: handleShowFilter })) : null;
     return {
         filterComponent,
         showFilter: handleShowFilter,
         hideFilter,
     };
 };
-exports.default = useFilter;
-//# sourceMappingURL=useFilter.js.map
+export default useFilter;