xmlui 0.11.4 → 0.11.6

package/dist/scripts/src/components/Table/TableNative.js

@@ -1,670 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultProps = exports.Table = exports.CheckboxToleranceValues = exports.TablePaginationControlsLocationValues = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const react_table_1 = require("@tanstack/react-table");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const react_virtual_1 = require("@tanstack/react-virtual");
-const lodash_es_1 = require("lodash-es");
-const classnames_1 = __importDefault(require("classnames"));
-const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
-require("./react-table-config.d.ts");
-const constants_1 = require("../../components-core/constants");
-const misc_1 = require("../../components-core/utils/misc");
-const hooks_1 = require("../../components-core/utils/hooks");
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const transformThemeVars_1 = require("../../components-core/theming/transformThemeVars");
-const SpinnerNative_1 = require("../Spinner/SpinnerNative");
-const Toggle_1 = require("../Toggle/Toggle");
-const IconNative_1 = require("../Icon/IconNative");
-const useRowSelection_1 = __importDefault(require("./useRowSelection"));
-const PaginationNative_1 = require("../Pagination/PaginationNative");
-exports.TablePaginationControlsLocationValues = ["top", "bottom", "both"];
-exports.CheckboxToleranceValues = ["none", "compact", "comfortable", "spacious"];
-function defaultIsRowDisabled(_) {
-    return false;
-}
-const SELECT_COLUMN_WIDTH = 42;
-const DEFAULT_PAGE_SIZES = [10];
-/**
- * Maps checkbox tolerance values to pixel values
- * @param tolerance - The tolerance level
- * @returns The number of pixels for the tolerance
- */
-const getCheckboxTolerancePixels = (tolerance) => {
-    switch (tolerance) {
-        case "none":
-            return 0;
-        case "compact":
-            return 8;
-        case "comfortable":
-            return 12;
-        case "spacious":
-            return 16;
-        default:
-            return 8; // fallback to compact
-    }
-};
-/**
- * Helper function to check if a point is within the checkbox boundary
- * @param pointX - X coordinate of the point to check
- * @param pointY - Y coordinate of the point to check
- * @param checkboxRect - Bounding rectangle of the checkbox
- * @param tolerancePixels - Number of pixels to extend the boundary
- * @returns true if the point is within the checkbox or within tolerancePixels of its boundary
- */
-const isWithinCheckboxBoundary = (pointX, pointY, checkboxRect, tolerancePixels) => {
-    // Calculate distance from point to checkbox boundaries
-    const distanceToLeft = Math.abs(pointX - checkboxRect.left);
-    const distanceToRight = Math.abs(pointX - checkboxRect.right);
-    const distanceToTop = Math.abs(pointY - checkboxRect.top);
-    const distanceToBottom = Math.abs(pointY - checkboxRect.bottom);
-    // Check if point is within the checkbox bounds or within boundary pixels of any edge
-    const withinHorizontalBounds = pointX >= checkboxRect.left && pointX <= checkboxRect.right;
-    const withinVerticalBounds = pointY >= checkboxRect.top && pointY <= checkboxRect.bottom;
-    const withinCheckbox = withinHorizontalBounds && withinVerticalBounds;
-    const nearHorizontalBoundary = (withinVerticalBounds && (distanceToLeft <= tolerancePixels || distanceToRight <= tolerancePixels));
-    const nearVerticalBoundary = (withinHorizontalBounds && (distanceToTop <= tolerancePixels || distanceToBottom <= tolerancePixels));
-    return withinCheckbox || nearHorizontalBoundary || nearVerticalBoundary;
-};
-//These are the important styles to make sticky column pinning work!
-//Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.
-//View the index.css file for more needed styles such as border-collapse: separate
-const getCommonPinningStyles = (column) => {
-    const isPinned = column.getIsPinned();
-    // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
-    // const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
-    return {
-        // boxShadow: isLastLeftPinnedColumn
-        //   ? "-4px 0 4px -4px gray inset"
-        //   : isFirstRightPinnedColumn
-        //   ? "4px 0 4px -4px gray inset"
-        //   : undefined,
-        left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
-        right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
-        opacity: isPinned ? 0.95 : undefined,
-        position: isPinned ? "sticky" : "relative",
-        backgroundColor: isPinned ? "inherit" : undefined,
-        zIndex: isPinned ? 1 : undefined,
-    };
-};
-// eslint-disable-next-line react/display-name
-exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var _b, _c, _d, _e, _f;
-    var { data = exports.defaultProps.data, columns = exports.defaultProps.columns, isPaginated = exports.defaultProps.isPaginated, loading = exports.defaultProps.loading, headerHeight, rowsSelectable = exports.defaultProps.rowsSelectable, enableMultiRowSelection = exports.defaultProps.enableMultiRowSelection, initiallySelected = exports.defaultProps.initiallySelected, syncWithAppState, pageSizeOptions = exports.defaultProps.pageSizeOptions, pageSize = (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) || DEFAULT_PAGE_SIZES[0], currentPageIndex = 0, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = exports.defaultProps.sortingDirection, iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, className, noDataRenderer, autoFocus = exports.defaultProps.autoFocus, hideHeader = exports.defaultProps.hideHeader, hideNoDataView = exports.defaultProps.hideNoDataView, alwaysShowSelectionHeader = exports.defaultProps.alwaysShowSelectionHeader, registerComponentApi, onSelectionDidChange, noBottomBorder = exports.defaultProps.noBottomBorder, paginationControlsLocation = exports.defaultProps.paginationControlsLocation, cellVerticalAlign = exports.defaultProps.cellVerticalAlign, buttonRowPosition = exports.defaultProps.buttonRowPosition, pageSizeSelectorPosition = exports.defaultProps.pageSizeSelectorPosition, pageInfoPosition = exports.defaultProps.pageInfoPosition, showCurrentPage = exports.defaultProps.showCurrentPage, showPageInfo = exports.defaultProps.showPageInfo, showPageSizeSelector = exports.defaultProps.showPageSizeSelector, checkboxTolerance = exports.defaultProps.checkboxTolerance } = _a, rest = __rest(_a, ["data", "columns", "isPaginated", "loading", "headerHeight", "rowsSelectable", "enableMultiRowSelection", "initiallySelected", "syncWithAppState", "pageSizeOptions", "pageSize", "currentPageIndex", "rowDisabledPredicate", "sortBy", "sortingDirection", "iconSortAsc", "iconSortDesc", "iconNoSort", "sortingDidChange", "willSort", "style", "className", "noDataRenderer", "autoFocus", "hideHeader", "hideNoDataView", "alwaysShowSelectionHeader", "registerComponentApi", "onSelectionDidChange", "noBottomBorder", "paginationControlsLocation", "cellVerticalAlign", "buttonRowPosition", "pageSizeSelectorPosition", "pageInfoPosition", "showCurrentPage", "showPageInfo", "showPageSizeSelector", "checkboxTolerance"])
-    // cols
-    ;
-    const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    const safeData = Array.isArray(data) ? data : constants_1.EMPTY_ARRAY;
-    const wrapperRef = (0, react_1.useRef)(null);
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(wrapperRef, forwardedRef) : wrapperRef;
-    const tableRef = (0, react_1.useRef)(null);
-    const estimatedHeightRef = (0, react_1.useRef)(null);
-    const safeColumns = (0, react_1.useMemo)(() => {
-        if (columns) {
-            return columns;
-        }
-        if (!safeData.length) {
-            return constants_1.EMPTY_ARRAY;
-        }
-        return Object.keys(safeData[0]).map((key) => ({ header: key, accessorKey: key }));
-    }, [columns, safeData]);
-    (0, react_1.useEffect)(() => {
-        if (autoFocus) {
-            wrapperRef.current.focus();
-        }
-    }, [autoFocus]);
-    // --- Keep track of visible table rows
-    const [visibleItems, setVisibleItems] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
-    // --- Track which row should show forced hover for checkbox
-    const [hoveredRowId, setHoveredRowId] = (0, react_1.useState)(null);
-    // --- Track if the header checkbox should show forced hover
-    const [headerCheckboxHovered, setHeaderCheckboxHovered] = (0, react_1.useState)(false);
-    // --- Calculate tolerance pixels from the prop
-    const tolerancePixels = getCheckboxTolerancePixels(checkboxTolerance);
-    // --- Get the operations to manage selected rows in a table
-    const { toggleRow, checkAllRows, focusedIndex, onKeyDown, selectedRowIdMap, idKey, selectionApi, } = (0, useRowSelection_1.default)({
-        items: safeData,
-        visibleItems,
-        rowsSelectable,
-        enableMultiRowSelection,
-        rowDisabledPredicate,
-        onSelectionDidChange,
-        initiallySelected,
-        syncWithAppState,
-    });
-    // --- Create data with order information whenever the items in the table change
-    const dataWithOrder = (0, react_1.useMemo)(() => {
-        return safeData.map((item, index) => {
-            return Object.assign(Object.assign({}, item), { order: index + 1 });
-        });
-    }, [safeData]);
-    // --- Local or external sorting of data
-    const [_sortBy, _setSortBy] = (0, react_1.useState)(sortBy);
-    const [_sortingDirection, _setSortingDirection] = (0, react_1.useState)(sortingDirection);
-    (0, react_1.useLayoutEffect)(() => {
-        _setSortBy(sortBy);
-    }, [sortBy]);
-    (0, react_1.useLayoutEffect)(() => {
-        _setSortingDirection(sortingDirection);
-    }, [sortingDirection]);
-    const sortedData = (0, react_1.useMemo)(() => {
-        if (!_sortBy) {
-            return dataWithOrder;
-        }
-        return (0, lodash_es_1.orderBy)(dataWithOrder, _sortBy, _sortingDirection === "ascending" ? "asc" : "desc");
-    }, [_sortBy, _sortingDirection, dataWithOrder]);
-    const _updateSorting = (0, react_1.useCallback)((accessorKey) => __awaiter(void 0, void 0, void 0, function* () {
-        let newDirection = "ascending";
-        let newSortBy = accessorKey;
-        // The current key is the same as the last -> the user clicked on the same header twice
-        if (_sortBy === accessorKey) {
-            // The last sorting direction was ascending -> make it descending
-            if (_sortingDirection === "ascending") {
-                newDirection = "descending";
-                // The last sorting direction was descending -> remove the sorting from the current key
-            }
-            else {
-                newSortBy = undefined;
-            }
-        }
-        // --- Check if sorting is allowed
-        const result = yield (willSort === null || willSort === void 0 ? void 0 : willSort(newSortBy, newDirection));
-        if (result === false) {
-            return;
-        }
-        _setSortingDirection(newDirection);
-        _setSortBy(newSortBy);
-        // External callback function is always called.
-        // Even if sorting is internal, we can notify other components through this callback
-        sortingDidChange === null || sortingDidChange === void 0 ? void 0 : sortingDidChange(newSortBy, newDirection);
-    }), [_sortBy, willSort, sortingDidChange, _sortingDirection]);
-    // --- Prepare column renderers according to columns defined in the table
-    const columnsWithCustomCell = (0, react_1.useMemo)(() => {
-        return safeColumns.map((col, idx) => {
-            var _a, _b;
-            // --- Obtain column width information
-            const { width, starSizedWidth } = getColumnWidth(col.width, true, "width");
-            const { width: minWidth } = getColumnWidth(col.minWidth, false, "minWidth");
-            const { width: maxWidth } = getColumnWidth(col.maxWidth, false, "maxWidth");
-            const customColumn = Object.assign(Object.assign({}, col), { header: (_b = (_a = col.header) !== null && _a !== void 0 ? _a : col.accessorKey) !== null && _b !== void 0 ? _b : " ", id: "col_" + idx, size: width, minSize: minWidth, maxSize: maxWidth, enableResizing: col.canResize, enableSorting: col.canSort && !!col.accessorKey, enablePinning: col.pinTo !== undefined, meta: {
-                    starSizedWidth,
-                    pinTo: col.pinTo,
-                    style: col.style,
-                    className: col.className,
-                    accessorKey: col.accessorKey,
-                    cellRenderer: col.cellRenderer,
-                } });
-            return customColumn;
-            function getColumnWidth(colWidth, allowStarSize, propName) {
-                let starSizedWidth;
-                let width;
-                const resolvedWidth = (0, transformThemeVars_1.isThemeVarName)(colWidth) ? getThemeVar(colWidth) : colWidth;
-                if (typeof resolvedWidth === "number") {
-                    width = resolvedWidth;
-                }
-                else if (typeof resolvedWidth === "string") {
-                    const oneStarSizedWidthMatch = resolvedWidth.match(/^\s*\*\s*$/);
-                    if (allowStarSize && oneStarSizedWidthMatch) {
-                        starSizedWidth = "1*";
-                    }
-                    else {
-                        const starSizedWidthMatch = resolvedWidth.match(/^\s*(\d+)\s*\*\s*$/);
-                        if (allowStarSize && starSizedWidthMatch) {
-                            starSizedWidth = starSizedWidthMatch[1] + "*";
-                        }
-                        else {
-                            const pixelWidthMatch = resolvedWidth.match(/^\s*(\d+)\s*(px)?\s*$/);
-                            if (pixelWidthMatch) {
-                                width = Number(pixelWidthMatch[1]);
-                            }
-                            else {
-                                throw new Error(`Invalid TableColumnDef '${propName}' value: ${resolvedWidth}`);
-                            }
-                        }
-                    }
-                }
-                if (width === undefined && starSizedWidth === undefined && allowStarSize) {
-                    starSizedWidth = "1*";
-                }
-                return { width, starSizedWidth };
-            }
-        });
-    }, [getThemeVar, safeColumns]);
-    // --- Prepare column renderers according to columns defined in the table supporting optional row selection
-    const columnsWithSelectColumn = (0, react_1.useMemo)(() => {
-        // --- Extend the columns with a selection checkbox (indeterminate)
-        const selectColumn = {
-            id: "select",
-            size: SELECT_COLUMN_WIDTH,
-            enableResizing: false,
-            enablePinning: true,
-            meta: {
-                pinTo: "left",
-            },
-            header: ({ table }) => enableMultiRowSelection ? ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: (0, classnames_1.default)(Table_module_scss_1.default.checkBoxWrapper, {
-                    [Table_module_scss_1.default.showInHeader]: alwaysShowSelectionHeader,
-                    [Table_module_scss_1.default.forceHoverWrapper]: headerCheckboxHovered,
-                }),
-                value: table.getIsAllRowsSelected(),
-                indeterminate: table.getIsSomeRowsSelected(),
-                forceHover: headerCheckboxHovered,
-                onDidChange: () => {
-                    const allSelected = table
-                        .getRowModel()
-                        .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
-                    checkAllRows(!allSelected);
-                } })) : null,
-            cell: ({ row }) => ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: (0, classnames_1.default)(Table_module_scss_1.default.checkBoxWrapper, {
-                    [Table_module_scss_1.default.forceHoverWrapper]: hoveredRowId === row.id,
-                }),
-                value: row.getIsSelected(),
-                indeterminate: row.getIsSomeSelected(),
-                forceHover: hoveredRowId === row.id,
-                onDidChange: () => {
-                    toggleRow(row.original, { metaKey: true });
-                } })),
-        };
-        return rowsSelectable ? [selectColumn, ...columnsWithCustomCell] : columnsWithCustomCell;
-    }, [
-        rowsSelectable,
-        columnsWithCustomCell,
-        enableMultiRowSelection,
-        alwaysShowSelectionHeader,
-        checkAllRows,
-        toggleRow,
-        rowDisabledPredicate,
-        hoveredRowId,
-        headerCheckboxHovered,
-    ]);
-    // --- Set up page information (using the first page size option)
-    // const [pagination, setPagination] = useState<PaginationState>();
-    const [pagination, setPagination] = (0, react_1.useState)({
-        pageSize: isPaginated ? pageSize : Number.MAX_VALUE,
-        pageIndex: currentPageIndex,
-    });
-    const prevIsPaginated = (0, hooks_1.usePrevious)(isPaginated);
-    (0, react_1.useEffect)(() => {
-        if (!prevIsPaginated && isPaginated) {
-            setPagination((prev) => {
-                return Object.assign(Object.assign({}, prev), { pageSize: pageSize, pageIndex: 0 });
-            });
-        }
-        if (prevIsPaginated && !isPaginated) {
-            setPagination(() => {
-                return {
-                    pageIndex: 0,
-                    pageSize: Number.MAX_VALUE,
-                };
-            });
-        }
-    }, [isPaginated, pageSizeOptions, prevIsPaginated, pageSize]);
-    const [columnSizing, setColumnSizing] = (0, react_1.useState)({});
-    const columnPinning = (0, react_1.useMemo)(() => {
-        const left = [];
-        const right = [];
-        columnsWithSelectColumn.forEach((col) => {
-            var _a, _b;
-            if (((_a = col.meta) === null || _a === void 0 ? void 0 : _a.pinTo) === "right") {
-                right.push(col.id);
-            }
-            if (((_b = col.meta) === null || _b === void 0 ? void 0 : _b.pinTo) === "left") {
-                left.push(col.id);
-            }
-        });
-        return {
-            left,
-            right,
-        };
-    }, [columnsWithSelectColumn]);
-    // --- Use the @tanstack/core-table component that manages a table
-    const table = (0, react_table_1.useReactTable)({
-        columns: columnsWithSelectColumn,
-        data: sortedData,
-        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
-        getPaginationRowModel: isPaginated ? (0, react_table_1.getPaginationRowModel)() : undefined,
-        enableRowSelection: rowsSelectable,
-        enableMultiRowSelection,
-        columnResizeMode: "onChange",
-        getRowId: (0, react_1.useCallback)((originalRow) => {
-            return originalRow[idKey] + "";
-        }, [idKey]),
-        state: (0, react_1.useMemo)(() => ({
-            pagination,
-            rowSelection: selectedRowIdMap,
-            columnSizing,
-            columnPinning,
-        }), [columnPinning, columnSizing, pagination, selectedRowIdMap]),
-        onColumnSizingChange: setColumnSizing,
-        onPaginationChange: setPagination,
-    });
-    // --- Select the set of visible rows whenever the table rows change
-    const rows = table.getRowModel().rows;
-    (0, react_1.useEffect)(() => {
-        setVisibleItems(rows.map((row) => row.original));
-    }, [rows]);
-    const scrollParent = (0, hooks_1.useScrollParent)((_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.parentElement);
-    const scrollRef = (0, react_1.useRef)(scrollParent);
-    scrollRef.current = scrollParent;
-    const hasHeight = (0, hooks_1.useHasExplicitHeight)(wrapperRef);
-    const hasOutsideScroll = scrollRef.current && !hasHeight;
-    const startMargin = (0, hooks_1.useStartMargin)(hasOutsideScroll, wrapperRef, scrollRef);
-    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
-        count: rows.length,
-        getScrollElement: (0, react_1.useCallback)(() => {
-            return hasOutsideScroll && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) ? scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current : wrapperRef.current;
-        }, [scrollRef, hasOutsideScroll]),
-        scrollMargin: startMargin,
-        estimateSize: (0, react_1.useCallback)(() => {
-            return estimatedHeightRef.current || 30;
-        }, []),
-        overscan: 5,
-    });
-    const paddingTop = rowVirtualizer.getVirtualItems().length > 0
-        ? ((_d = (_c = rowVirtualizer.getVirtualItems()) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.start) - startMargin || 0
-        : 0;
-    const paddingBottom = rowVirtualizer.getVirtualItems().length > 0
-        ? rowVirtualizer.getTotalSize() -
-            (((_f = (_e = rowVirtualizer.getVirtualItems()) === null || _e === void 0 ? void 0 : _e[rowVirtualizer.getVirtualItems().length - 1]) === null || _f === void 0 ? void 0 : _f.end) -
-                startMargin || 0)
-        : 0;
-    const hasData = safeData.length !== 0;
-    const touchedSizesRef = (0, react_1.useRef)({});
-    const columnSizeTouched = (0, react_1.useCallback)((id) => {
-        touchedSizesRef.current[id] = true;
-    }, []);
-    const recalculateStarSizes = (0, misc_1.useEvent)(() => {
-        if (!tableRef.current) {
-            return;
-        }
-        let availableWidth = tableRef.current.clientWidth - 1;
-        // -1 to prevent horizontal scroll in scaled browsers (when you zoom in)
-        const widths = {};
-        const columnsWithoutSize = [];
-        const numberOfUnitsById = {};
-        table.getAllColumns().forEach((column) => {
-            var _a, _b;
-            if (column.columnDef.size !== undefined || touchedSizesRef.current[column.id]) {
-                availableWidth -= columnSizing[column.id] || column.columnDef.size || 0;
-            }
-            else {
-                columnsWithoutSize.push(column);
-                let units;
-                if ((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.starSizedWidth) {
-                    units = Number((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.starSizedWidth.replace("*", "").trim()) || 1;
-                }
-                else {
-                    units = 1;
-                }
-                numberOfUnitsById[column.id] = units;
-            }
-        });
-        const numberOfAllUnits = Object.values(numberOfUnitsById).reduce((acc, val) => acc + val, 0);
-        columnsWithoutSize.forEach((column) => {
-            widths[column.id] = Math.floor(availableWidth * (numberOfUnitsById[column.id] / numberOfAllUnits));
-        });
-        (0, react_dom_1.flushSync)(() => {
-            setColumnSizing((prev) => {
-                return Object.assign(Object.assign({}, prev), widths);
-            });
-        });
-    });
-    (0, hooks_1.useResizeObserver)(tableRef, recalculateStarSizes);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        queueMicrotask(() => {
-            recalculateStarSizes();
-        });
-    }, [recalculateStarSizes, safeColumns]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        registerComponentApi(selectionApi);
-    }, [registerComponentApi, selectionApi]);
-    const paginationControls = ((0, jsx_runtime_1.jsx)(PaginationNative_1.PaginationNative, { pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, itemCount: safeData.length, pageSizeOptions: pageSizeOptions, onPageDidChange: (page) => table.setPageIndex(page), onPageSizeDidChange: (size) => table.setPageSize(size), showCurrentPage: showCurrentPage, showPageInfo: showPageInfo, showPageSizeSelector: showPageSizeSelector, buttonRowPosition: buttonRowPosition, pageInfoPosition: pageInfoPosition, pageSizeSelectorPosition: pageSizeSelectorPosition }));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(Table_module_scss_1.default.wrapper, className, { [Table_module_scss_1.default.noScroll]: hasOutsideScroll }), tabIndex: -1, onKeyDown: onKeyDown, ref: ref, style: style, children: [isPaginated &&
-                hasData &&
-                rows.length > 0 &&
-                pagination &&
-                (paginationControlsLocation === "top" || paginationControlsLocation === "both") &&
-                paginationControls, (0, jsx_runtime_1.jsxs)("table", { className: Table_module_scss_1.default.table, ref: tableRef, children: [!hideHeader && ((0, jsx_runtime_1.jsx)("thead", { style: { height: headerHeight }, className: Table_module_scss_1.default.headerWrapper, children: table.getHeaderGroups().map((headerGroup, headerGroupIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, classnames_1.default)(Table_module_scss_1.default.headerRow, {
-                                [Table_module_scss_1.default.allSelected]: table.getIsAllRowsSelected(),
-                            }), onClick: (event) => {
-                                const target = event.target;
-                                const headerCell = target.closest('th');
-                                // Only handle clicks for the select column header
-                                if (headerCell && rowsSelectable && enableMultiRowSelection) {
-                                    const header = headerGroup.headers.find(h => {
-                                        const headerElement = headerCell;
-                                        return (headerElement === null || headerElement === void 0 ? void 0 : headerElement.getAttribute('data-column-id')) === h.id || h.id === 'select';
-                                    });
-                                    if (header && header.id === 'select') {
-                                        const clickX = event.clientX;
-                                        const clickY = event.clientY;
-                                        const checkbox = headerCell.querySelector('input[type=\"checkbox\"]');
-                                        if (checkbox) {
-                                            const checkboxRect = checkbox.getBoundingClientRect();
-                                            if (isWithinCheckboxBoundary(clickX, clickY, checkboxRect, tolerancePixels)) {
-                                                // Prevent the default click and manually trigger the checkbox
-                                                event.preventDefault();
-                                                event.stopPropagation();
-                                                const allSelected = table
-                                                    .getRowModel()
-                                                    .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
-                                                checkAllRows(!allSelected);
-                                            }
-                                        }
-                                    }
-                                }
-                            }, onMouseMove: (event) => {
-                                if (rowsSelectable && enableMultiRowSelection) {
-                                    const target = event.target;
-                                    const headerCell = target.closest('th');
-                                    if (headerCell) {
-                                        const header = headerGroup.headers.find(h => {
-                                            const headerElement = headerCell;
-                                            return (headerElement === null || headerElement === void 0 ? void 0 : headerElement.getAttribute('data-column-id')) === h.id || h.id === 'select';
-                                        });
-                                        if (header && header.id === 'select') {
-                                            const mouseX = event.clientX;
-                                            const mouseY = event.clientY;
-                                            const checkbox = headerCell.querySelector('input[type=\"checkbox\"]');
-                                            if (checkbox) {
-                                                const checkboxRect = checkbox.getBoundingClientRect();
-                                                const shouldShowHover = isWithinCheckboxBoundary(mouseX, mouseY, checkboxRect, tolerancePixels);
-                                                if (shouldShowHover && !headerCheckboxHovered) {
-                                                    setHeaderCheckboxHovered(true);
-                                                    event.currentTarget.style.cursor = 'pointer';
-                                                }
-                                                else if (!shouldShowHover && headerCheckboxHovered) {
-                                                    setHeaderCheckboxHovered(false);
-                                                    event.currentTarget.style.cursor = '';
-                                                }
-                                            }
-                                        }
-                                        else if (headerCheckboxHovered) {
-                                            setHeaderCheckboxHovered(false);
-                                            event.currentTarget.style.cursor = '';
-                                        }
-                                    }
-                                }
-                            }, onMouseLeave: (event) => {
-                                if (headerCheckboxHovered) {
-                                    setHeaderCheckboxHovered(false);
-                                    event.currentTarget.style.cursor = '';
-                                }
-                            }, children: headerGroup.headers.map((header, headerIndex) => {
-                                var _a, _b, _c;
-                                const _d = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _d, style = __rest(_d, ["width"]);
-                                const size = header.getSize();
-                                const alignmentClass = cellVerticalAlign === "top"
-                                    ? Table_module_scss_1.default.alignTop
-                                    : cellVerticalAlign === "bottom"
-                                        ? Table_module_scss_1.default.alignBottom
-                                        : Table_module_scss_1.default.alignCenter;
-                                return ((0, jsx_runtime_1.jsxs)("th", { "data-column-id": header.id, className: (0, classnames_1.default)(Table_module_scss_1.default.columnCell, alignmentClass), colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting &&
-                                                !!((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey), updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: (0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.accessorKey) === _sortBy
-                                                                ? _sortingDirection
-                                                                : undefined }) }))] }) }), header.column.getCanResize() && ((0, jsx_runtime_1.jsx)("div", { onDoubleClick: () => {
-                                                touchedSizesRef.current[header.column.id] = false;
-                                                if (header.column.columnDef.size !== undefined) {
-                                                    header.column.resetSize();
-                                                }
-                                                else {
-                                                    recalculateStarSizes();
-                                                }
-                                            },
-                                            onMouseDown: (event) => {
-                                                columnSizeTouched(header.column.id);
-                                                header.getResizeHandler()(event);
-                                            },
-                                            onTouchStart: (event) => {
-                                                columnSizeTouched(header.column.id);
-                                                header.getResizeHandler()(event);
-                                            },
-                                            className: (0, classnames_1.default)(Table_module_scss_1.default.resizer, {
-                                                [Table_module_scss_1.default.isResizing]: header.column.getIsResizing(),
-                                            }) }))] }, `${header.id}-${headerIndex}`));
-                            }) }, `${headerGroup.id}-${headerGroupIndex}`))) })), hasData && ((0, jsx_runtime_1.jsxs)("tbody", { className: Table_module_scss_1.default.tableBody, children: [paddingTop > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { style: { height: `${paddingTop}px` } }) })), rowVirtualizer.getVirtualItems().map((virtualRow) => {
-                                const rowIndex = virtualRow.index;
-                                const row = rows[rowIndex];
-                                return ((0, jsx_runtime_1.jsx)("tr", { "data-index": rowIndex, className: (0, classnames_1.default)(Table_module_scss_1.default.row, {
-                                        [Table_module_scss_1.default.selected]: row.getIsSelected(),
-                                        [Table_module_scss_1.default.focused]: focusedIndex === rowIndex,
-                                        [Table_module_scss_1.default.disabled]: rowDisabledPredicate(row.original),
-                                        [Table_module_scss_1.default.noBottomBorder]: noBottomBorder,
-                                    }), ref: (el) => {
-                                        if (el && estimatedHeightRef.current === null) {
-                                            estimatedHeightRef.current = Math.round(el.getBoundingClientRect().height);
-                                        }
-                                        rowVirtualizer.measureElement(el);
-                                    }, onClick: (event) => {
-                                        if (event === null || event === void 0 ? void 0 : event.defaultPrevented) {
-                                            return;
-                                        }
-                                        const target = event.target;
-                                        if (target.tagName.toLowerCase() === "input") {
-                                            return;
-                                        }
-                                        // Check if click is within checkbox boundary
-                                        const currentRow = event.currentTarget;
-                                        const checkbox = currentRow.querySelector('input[type="checkbox"]');
-                                        if (checkbox) {
-                                            const checkboxRect = checkbox.getBoundingClientRect();
-                                            const clickX = event.clientX;
-                                            const clickY = event.clientY;
-                                            if (isWithinCheckboxBoundary(clickX, clickY, checkboxRect, tolerancePixels)) {
-                                                // Toggle the checkbox when clicking within the boundary
-                                                toggleRow(row.original, { metaKey: true });
-                                                return;
-                                            }
-                                        }
-                                        toggleRow(row.original, event);
-                                    }, onMouseMove: (event) => {
-                                        // Change cursor and hover state when within checkbox boundary
-                                        const currentRow = event.currentTarget;
-                                        const checkbox = currentRow.querySelector('input[type="checkbox"]');
-                                        if (checkbox) {
-                                            const checkboxRect = checkbox.getBoundingClientRect();
-                                            const mouseX = event.clientX;
-                                            const mouseY = event.clientY;
-                                            const shouldShowHover = isWithinCheckboxBoundary(mouseX, mouseY, checkboxRect, tolerancePixels);
-                                            // Update hover state and cursor based on proximity to checkbox
-                                            if (shouldShowHover) {
-                                                setHoveredRowId(row.id);
-                                                currentRow.style.cursor = 'pointer';
-                                            }
-                                            else {
-                                                setHoveredRowId(null);
-                                                currentRow.style.cursor = '';
-                                            }
-                                        }
-                                    }, onMouseLeave: (event) => {
-                                        // Reset cursor and hover state when leaving the row
-                                        const currentRow = event.currentTarget;
-                                        currentRow.style.cursor = '';
-                                        setHoveredRowId(null);
-                                    }, children: row.getVisibleCells().map((cell, i) => {
-                                        var _a, _b;
-                                        const cellRenderer = (_b = (_a = cell.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.cellRenderer;
-                                        const size = cell.column.getSize();
-                                        const alignmentClass = cellVerticalAlign === "top"
-                                            ? Table_module_scss_1.default.alignTop
-                                            : cellVerticalAlign === "bottom"
-                                                ? Table_module_scss_1.default.alignBottom
-                                                : Table_module_scss_1.default.alignCenter;
-                                        return ((0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(Table_module_scss_1.default.cell, alignmentClass), style: Object.assign({ 
-                                                // width: size,
-                                                width: size }, getCommonPinningStyles(cell.column)), children: (0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.cellContent, children: cellRenderer
-                                                    ? cellRenderer(cell.row.original, rowIndex, i, cell === null || cell === void 0 ? void 0 : cell.getValue())
-                                                    : (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }) }, `${cell.id}-${i}`));
-                                    }) }, `${row.id}-${rowIndex}`));
-                            }), paddingBottom > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { style: { height: `${paddingBottom}px` } }) }))] }))] }), loading && !hasData && ((0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !hideNoDataView &&
-                !loading &&
-                !hasData &&
-                (noDataRenderer ? (noDataRenderer()) : ((0, jsx_runtime_1.jsx)("div", { className: Table_module_scss_1.default.noRows, children: "No data available" }))), isPaginated &&
-                hasData &&
-                rows.length > 0 &&
-                pagination &&
-                (paginationControlsLocation === "bottom" || paginationControlsLocation === "both") &&
-                paginationControls] })));
-});
-function ClickableHeader({ hasSorting, updateSorting, children }) {
-    return hasSorting ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: Table_module_scss_1.default.clickableHeader, onClick: updateSorting, children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
-}
-function ColumnOrderingIndicator({ direction, iconSortAsc = "sortasc:Table", iconSortDesc = "sortdesc:Table", iconNoSort = "nosort:Table", }) {
-    if (direction === "ascending") {
-        return (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconSortAsc, fallback: "sortasc", size: "12" }); //sortasc
-    }
-    else if (direction === "descending") {
-        return (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconSortDesc, fallback: "sortdesc", size: "12" }); //sortdesc
-    }
-    return iconNoSort !== "-" ? ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconNoSort, fallback: "nosort", size: "12" })) : ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconNoSort, size: "12" })); //nosort
-}
-exports.defaultProps = {
-    data: constants_1.EMPTY_ARRAY,
-    columns: constants_1.EMPTY_ARRAY,
-    isPaginated: false,
-    loading: false,
-    rowsSelectable: false,
-    enableMultiRowSelection: true,
-    initiallySelected: constants_1.EMPTY_ARRAY,
-    pageSizeOptions: [5, 10, 15],
-    sortingDirection: "ascending",
-    autoFocus: false,
-    hideHeader: false,
-    hideNoDataView: false,
-    alwaysShowSelectionHeader: false,
-    noBottomBorder: false,
-    paginationControlsLocation: "bottom",
-    cellVerticalAlign: "center",
-    showPageInfo: true,
-    showPageSizeSelector: true,
-    showCurrentPage: true,
-    buttonRowPosition: "center",
-    pageSizeSelectorPosition: "start",
-    pageInfoPosition: "end",
-    checkboxTolerance: "compact",
-};