@absreim/react-bootstrap-data-grid-pro 2.4.0

package/grid/styling/types.d.ts

@@ -0,0 +1,62 @@
+import { RowId } from "../types";
+export interface SharedTableStyleModel {
+    table?: string[];
+    tbody?: string[];
+    thead?: string[];
+    theadTr?: string[];
+    theadTh?: (colIndex: number) => string[];
+    caption?: string[];
+}
+export type TableStyleModel = SharedTableStyleModel & {
+    tbodyTr?: (rowId: RowId, displayIndex: number) => string[];
+    tbodyTd?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[];
+    tbodyTdInput?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[];
+    editColTh?: string[];
+    editColTd?: (rowId: RowId, displayIndex: number) => string[];
+    editStartButton?: (rowId: RowId, displayIndex: number) => string[];
+    editDeleteButton?: (rowId: RowId, displayIndex: number) => string[];
+    editSaveButton?: (rowId: RowId, displayIndex: number) => string[];
+    editCancelButton?: (rowId: RowId, displayIndex: number) => string[];
+    rowSelectColTh?: string[];
+    rowSelectColTd?: (rowId: RowId, displayIndex: number) => string[];
+    rowSelectInput?: (rowId: RowId, displayIndex: number) => string[];
+};
+export type FilterInputTableStyleModel = SharedTableStyleModel & {
+    tbodyTr?: (rowIndex: number) => string[];
+    tbodyTd?: (rowIndex: number, colIndex: number) => string[];
+    enablementInput?: (rowIndex: number) => string[];
+    schemeSelectionInput?: (rowIndex: number) => string[];
+    searchStringInput?: (rowIndex: number) => string[];
+    numberInput?: (rowIndex: number) => string[];
+    startDateInput?: (rowIndex: number) => string[];
+    endDateInput?: (rowIndex: number) => string[];
+    submitButton?: string[];
+    form?: string[];
+};
+export interface AdditionalComponentsStyleModel {
+    topLevelDiv?: string[];
+    filterInputsDiv?: string[];
+    tableAndPaginationDiv?: string[];
+    filterUiToggleButton?: string[];
+    paginationUiDiv?: string[];
+}
+export interface ToolbarStyleModel {
+    activeButton?: string[];
+    inactiveButton?: string[];
+    toolbar?: string[];
+    interfaceContainer?: string[];
+}
+export interface ExportFormStyleModel {
+    legend?: string[];
+    radioContainer?: string[];
+    radioInput?: string[];
+    radioLabel?: string[];
+    submitButton?: string[];
+}
+export interface StyleModel {
+    mainTableStyleModel?: TableStyleModel;
+    filterInputTableStyleModel?: FilterInputTableStyleModel;
+    additionalComponentsStyleModel?: AdditionalComponentsStyleModel;
+    toolbarStyleModel?: ToolbarStyleModel;
+    exportFormStyleModel?: ExportFormStyleModel;
+}

package/grid/styling/types.js

@@ -0,0 +1 @@
+export {};

package/grid/toolbar/Toolbar.d.ts

@@ -0,0 +1,12 @@
+import { ToolbarOption } from "./types";
+import { FC } from "react";
+export interface ToolbarProps {
+    enabledFeatures: Partial<Record<ToolbarOption, boolean>>;
+    option: ToolbarOption | null;
+    setOption: (option: ToolbarOption | null) => void;
+    toolbarClasses?: string[];
+    activeClasses?: string[];
+    inactiveClasses?: string[];
+}
+declare const Toolbar: FC<ToolbarProps>;
+export default Toolbar;

package/grid/toolbar/Toolbar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+var buttonSpecs = {
+    filtering: {
+        label: "Filtering",
+        icon: (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" }) })),
+    },
+    exporting: {
+        label: "Export",
+        icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" }), _jsx("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" })] })),
+    },
+};
+// TODO: figure out tabindex and accessibility
+var Toolbar = function (_a) {
+    var enabledFeatures = _a.enabledFeatures, option = _a.option, setOption = _a.setOption, toolbarClasses = _a.toolbarClasses, activeClasses = _a.activeClasses, inactiveClasses = _a.inactiveClasses;
+    return (_jsx("div", { className: classNames(toolbarClasses || ["hstack", "gap-2", "justify-content-start", "px-2"]), role: "toolbar", children: Object.keys(buttonSpecs)
+            .filter(function (toolbarOption) { return !!enabledFeatures[toolbarOption]; })
+            .map(function (toolbarOption) { return (_jsx("button", { "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": "Grouped toggle button to show/hide ".concat(toolbarOption, " UI"), "aria-pressed": option === toolbarOption, className: classNames.apply(void 0, (option === toolbarOption
+                ? activeClasses || ["btn", "btn-outline-secondary", "active"]
+                : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: function () {
+                setOption(option === toolbarOption
+                    ? null
+                    : toolbarOption);
+            }, children: buttonSpecs[toolbarOption].icon }, toolbarOption)); }) }));
+};
+export default Toolbar;

package/grid/toolbar/ToolbarContainer.d.ts

@@ -0,0 +1,9 @@
+import { ToolbarInterfaces } from "./types";
+import { FC } from "react";
+import { ToolbarStyleModel } from "../styling/types";
+interface ToolbarContainerProps {
+    interfaces: ToolbarInterfaces;
+    styleModel?: ToolbarStyleModel;
+}
+declare const ToolbarContainer: FC<ToolbarContainerProps>;
+export default ToolbarContainer;

package/grid/toolbar/ToolbarContainer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Toolbar from "./Toolbar";
+import classNames from "classnames";
+var ToolbarContainer = function (_a) {
+    var interfaces = _a.interfaces, styleModel = _a.styleModel;
+    var _b = useState(null), option = _b[0], setOption = _b[1];
+    var enabledFeatures = Object.keys(interfaces).reduce(function (prev, toolbarOption) {
+        prev[toolbarOption] =
+            !!interfaces[toolbarOption];
+        return prev;
+    }, {});
+    // TODO: mention in documentation that Bootstrap 5.3 is required due to the
+    // use of the z-index utility
+    return (_jsxs("div", { className: "vstack", "data-testid": "toolbar container", children: [_jsx(Toolbar, { enabledFeatures: enabledFeatures, option: option, setOption: setOption, toolbarClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbar, activeClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.activeButton, inactiveClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.inactiveButton }), _jsx("div", { className: "position-relative", children: option !== null && (_jsx("div", { "data-testid": "toolbar feature interface content container", className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.interfaceContainer) || [
+                        "position-absolute",
+                        "z-1",
+                        "bg-body",
+                        "border",
+                        "shadow",
+                        "p-2",
+                    ]), children: interfaces[option] })) })] }));
+};
+export default ToolbarContainer;

package/grid/toolbar/types.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+export type ToolbarOption = "filtering" | "exporting";
+export type ToolbarInterfaces = Partial<Record<ToolbarOption, ReactNode>>;

package/grid/toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/grid/toolbar/useInterfaces.d.ts

@@ -0,0 +1,9 @@
+import { FilterOptionsTableProps } from "../filtering/FilterOptionsTable";
+import { ToolbarInterfaces } from "./types";
+import { ExportFormProps } from "../export/ExportForm";
+export interface InterfaceParams {
+    filtering?: FilterOptionsTableProps;
+    exporting?: ExportFormProps;
+}
+declare const useInterfaces: (params: InterfaceParams) => ToolbarInterfaces;
+export default useInterfaces;

package/grid/toolbar/useInterfaces.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import FilterOptionsTable from "../filtering/FilterOptionsTable";
+import { useMemo } from "react";
+import ExportForm from "../export/ExportForm";
+var useInterfaces = function (_a) {
+    var filtering = _a.filtering, exporting = _a.exporting;
+    return useMemo(function () { return ({
+        filtering: filtering ? _jsx(FilterOptionsTable, __assign({}, filtering)) : undefined,
+        exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
+    }); }, [exporting, filtering]);
+};
+export default useInterfaces;

package/grid/types.d.ts

@@ -0,0 +1,63 @@
+import { CellData, EditModel } from "./editing/types";
+import { GridPaginationState } from "./pagination/types";
+import { ColSortModel, TableSortModel } from "./sorting/types";
+import { FilterModel } from "./filtering/types";
+import { SelectModel } from "./selection/types";
+import { StyleModel } from "./styling/types";
+export type ColDataType = string | number | Date;
+export type ColDataTypeStrings = "string" | "number" | "date" | "datetime";
+export interface ColDefBase<ValueType = any> {
+    type: ColDataTypeStrings;
+    name: string;
+    label: string;
+    formatter?: (value: ValueType) => string;
+    sortable?: boolean;
+}
+export type ColDef<ValueType = any> = ColDefBase<ValueType> & {
+    width?: number;
+};
+type ValidRowData = Record<string, any>;
+export type RowData<Data extends ValidRowData = ValidRowData> = Data;
+export type RowId = string | number;
+export interface RowDef<Data extends ValidRowData = ValidRowData> {
+    id: RowId;
+    data: RowData<Data>;
+}
+export interface FormattedRow {
+    contents: CellData[];
+    id: RowId;
+}
+export type AugCellData = CellData & {
+    width?: number;
+};
+export type AugFormattedRow = Omit<FormattedRow, "contents"> & {
+    contents: AugCellData[];
+};
+export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
+export type Size = "small" | "medium" | "large";
+export type DisplayMode = "table" | "block";
+export interface GridProps {
+    rows: RowDef[];
+    cols: ColDef[];
+    pagination?: GridPaginationState;
+    sortModel?: TableSortModel;
+    filterModel?: FilterModel;
+    selectModel?: SelectModel;
+    editModel?: EditModel;
+    caption?: string;
+    styleModel?: StyleModel;
+    useToolbar?: boolean;
+    responsive?: boolean;
+    displayMode?: DisplayMode;
+}
+export type BaseGridProps = Omit<GridProps, "cols"> & {
+    cols: ColDefBase[];
+};
+export interface ColHeaderCellProps {
+    label: string;
+    sortModel?: ColSortModel;
+    ariaColIndex: number;
+    additionalClasses?: string[];
+    width?: number;
+}
+export {};

package/grid/types.js

@@ -0,0 +1 @@
+export {};

package/grid/util/datetime.d.ts

@@ -0,0 +1,2 @@
+export declare const dateToInputStr: (date: Date) => string;
+export declare const dateToDatetimeInputStr: (date: Date) => string;

package/grid/util/datetime.js

@@ -0,0 +1,5 @@
+import dayjs from "dayjs";
+export var dateToInputStr = function (date) { return dayjs(date).format("YYYY-MM-DD"); };
+export var dateToDatetimeInputStr = function (date) {
+    return dayjs(date).format("YYYY-MM-DDTHH:mm");
+};

package/grid/util/getWidthStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from "react";
+declare const getWidthStyle: (width: number | undefined) => CSSProperties | undefined;
+export default getWidthStyle;

package/grid/util/getWidthStyle.js

@@ -0,0 +1,9 @@
+var getWidthStyle = function (width) {
+    return width === undefined
+        ? undefined
+        : {
+            minWidth: width,
+            maxWidth: width,
+        };
+};
+export default getWidthStyle;

package/grid/util/isSubset.d.ts

@@ -0,0 +1,2 @@
+declare const isSubset: <T>(subset: T[], superSet: T[]) => boolean;
+export default isSubset;

package/grid/util/isSubset.js

@@ -0,0 +1,11 @@
+var isSubset = function (subset, superSet) {
+    var supersetSet = new Set(superSet);
+    for (var _i = 0, subset_1 = subset; _i < subset_1.length; _i++) {
+        var member = subset_1[_i];
+        if (!supersetSet.has(member)) {
+            return false;
+        }
+    }
+    return true;
+};
+export default isSubset;

package/grid/util/useControlledHover.d.ts

@@ -0,0 +1,9 @@
+import { MouseEventHandler } from "react";
+export interface UseControlledHoverHook<T> {
+    isHovering: boolean;
+    setIsHovering: (isHovering: boolean) => void;
+    handleMouseOver: MouseEventHandler<T>;
+    handleMouseOut: MouseEventHandler<T>;
+}
+declare const useControlledHover: <T>() => UseControlledHoverHook<T>;
+export default useControlledHover;

package/grid/util/useControlledHover.js

@@ -0,0 +1,13 @@
+import { useState } from "react";
+var useControlledHover = function () {
+    var _a = useState(false), isHovering = _a[0], setIsHovering = _a[1];
+    var handleMouseOver = function () { return setIsHovering(true); };
+    var handleMouseOut = function () { return setIsHovering(false); };
+    return {
+        isHovering: isHovering,
+        setIsHovering: setIsHovering,
+        handleMouseOver: handleMouseOver,
+        handleMouseOut: handleMouseOut,
+    };
+};
+export default useControlledHover;

package/grid-pro/ColHeaderCellPro.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ColHeaderCellProProps } from "./types";
+declare const ColHeaderCellPro: FC<ColHeaderCellProProps>;
+export default ColHeaderCellPro;

package/grid-pro/ColHeaderCellPro.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, } from "react";
+import classNames from "classnames";
+import getWidthStyle from "../grid/util/getWidthStyle";
+import useSortHeaderStates from "../grid/main/ColHeaderCell/useSortHeaderStates";
+var setWidthStyle = function (cells, width) {
+    cells.forEach(function (cell) {
+        cell.style.minWidth = "".concat(width, "px");
+        cell.style.maxWidth = "".concat(width, "px");
+    });
+};
+var ColHeaderCellPro = function (_a) {
+    var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex, additionalClasses = _a.additionalClasses, width = _a.width, displayMode = _a.displayMode, setWidth = _a.setWidth, minResizeWidth = _a.minResizeWidth, maxResizeWidth = _a.maxResizeWidth, keyboardResizeStep = _a.keyboardResizeStep;
+    var resizeable = setWidth !== undefined;
+    var cellIsClickable = !!(resizeable && sortModel);
+    var sortDivClickable = resizeable && sortModel;
+    var _b = useSortHeaderStates(sortModel), handleClick = _b.handleClick, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut, sortSymbol = _b.sortSymbol;
+    var defaultMinResizeWidth = sortModel ? 64 : 32;
+    var effectiveMinResizeWidth = minResizeWidth || defaultMinResizeWidth;
+    var effectiveKbdResizeStep = keyboardResizeStep || 10;
+    var clickToSortCellContents = useMemo(function () {
+        if (!width || displayMode === "table") {
+            // Testing has shown that content gets cut off in a table cell only if
+            // the table "display" property is "block" and both "min-width" and
+            // "max-width" are specified on all cells in the column.
+            return (_jsxs("div", { children: [label, sortSymbol] }));
+        }
+        return (_jsx("div", { className: classNames("flex-shrink-1", "overflow-x-hidden", {
+                "rbdg-sort-toggler": sortDivClickable,
+                "text-truncate": displayMode === "block",
+                "d-flex": !!sortModel,
+                "justify-content-between": !!sortModel,
+            }), onClick: sortDivClickable ? handleClick : undefined, onMouseOver: sortDivClickable ? handleMouseOver : undefined, onMouseOut: sortDivClickable ? handleMouseOut : undefined, children: sortModel ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-truncate", children: label }), _jsx("div", { children: sortSymbol })] })) : (label) }));
+    }, [
+        displayMode,
+        handleClick,
+        handleMouseOut,
+        handleMouseOver,
+        label,
+        sortDivClickable,
+        sortModel,
+        sortSymbol,
+        width,
+    ]);
+    var onKeyDown = useCallback(function (e) {
+        if (setWidth === undefined || width === undefined) {
+            return;
+        }
+        if (e.code === "ArrowLeft") {
+            setWidth(Math.max(effectiveMinResizeWidth, width - effectiveKbdResizeStep));
+            return;
+        }
+        if (e.code === "ArrowRight") {
+            setWidth(Math.min(maxResizeWidth || Number.MAX_VALUE, width + effectiveKbdResizeStep));
+            return;
+        }
+    }, [
+        effectiveKbdResizeStep,
+        effectiveMinResizeWidth,
+        maxResizeWidth,
+        setWidth,
+        width,
+    ]);
+    var thRef = useRef(null);
+    var onPointerDown = useCallback(function (event) {
+        if (event.button === 2) {
+            return;
+        }
+        if (thRef.current === null ||
+            setWidth === undefined ||
+            width === undefined) {
+            return;
+        }
+        // Note: as it stands, if a rerender happens while the user is resizing a
+        // cell, it may override the width of the cell until the user moves the
+        // mouse again.
+        // This behavior can be prevented by storing the current width of the cell
+        // in a ref and having this component conditionally render based on the
+        // value of the ref. I.e., if the ref has a value, use that value for the
+        // width instead of the "width" prop.
+        var target = event.target;
+        target.setPointerCapture(event.pointerId);
+        var table = thRef.current.parentElement.parentElement
+            .parentElement;
+        var tds = table.querySelectorAll(":scope > tbody > tr > td:nth-child(".concat(ariaColIndex, ")"));
+        var cellsToUpdate = Array.from(tds).concat(thRef.current);
+        var origX = event.clientX;
+        var onPointerMove = function (event) {
+            var diff = event.clientX - origX;
+            var newWidth = Math.max(effectiveMinResizeWidth, width + diff);
+            if (maxResizeWidth) {
+                newWidth = Math.min(maxResizeWidth, newWidth);
+            }
+            setWidthStyle(cellsToUpdate, newWidth);
+        };
+        target.addEventListener("pointermove", onPointerMove);
+        var removePointerMove = function () {
+            return target.removeEventListener("pointermove", onPointerMove);
+        };
+        var onKeyDown = function (event) {
+            if (event.code === "Escape") {
+                setWidthStyle(cellsToUpdate, width);
+                removePointerMove();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown, { once: true });
+        var onPointerUp = function () {
+            if (thRef.current !== null) {
+                var newWidth = Number(thRef.current.style.minWidth.replace("px", ""));
+                setWidth(newWidth);
+            }
+            removePointerMove();
+            document.removeEventListener("keydown", onKeyDown);
+        };
+        target.addEventListener("pointerup", onPointerUp, { once: true });
+    }, [ariaColIndex, effectiveMinResizeWidth, maxResizeWidth, setWidth, width]);
+    var cellContents = useMemo(function () {
+        if (!resizeable) {
+            return clickToSortCellContents;
+        }
+        var dragHandleIcon = (_jsx("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", className: "rdbg-drag-marker", children: _jsx("path", { d: "M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" }) }));
+        return (_jsxs("div", { className: "d-flex justify-content-between", children: [clickToSortCellContents, _jsx("div", { className: "rdbg-drag-marker-container", onPointerDown: onPointerDown, role: "separator", tabIndex: 0, "aria-label": "Resize column", "aria-valuenow": width, "aria-valuemin": minResizeWidth, "aria-valuemax": maxResizeWidth, onKeyDown: onKeyDown, onClick: function (e) { return e.stopPropagation(); }, children: dragHandleIcon })] }));
+    }, [
+        clickToSortCellContents,
+        maxResizeWidth,
+        minResizeWidth,
+        onKeyDown,
+        onPointerDown,
+        resizeable,
+        width,
+    ]);
+    return (_jsx("th", { ref: thRef, className: classNames({
+            "rbdg-sort-toggler": cellIsClickable,
+            "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
+        }, additionalClasses || []), onClick: cellIsClickable ? handleClick : undefined, onMouseOver: cellIsClickable ? handleMouseOver : undefined, onMouseOut: cellIsClickable ? handleMouseOut : undefined, "aria-description": sortModel
+            ? "Column header"
+            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, style: getWidthStyle(width), children: cellContents }));
+};
+export default ColHeaderCellPro;

package/grid-pro/GridPro.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { GridProProps } from "./types";
+declare const GridPro: FC<GridProProps>;
+export default GridPro;

package/grid-pro/GridPro.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import useCombinedPipeline from "../grid/pipeline/useCombinedPipeline";
+import InternalGrid from "../grid/InternalGrid";
+import ColHeaderCellPro from "./ColHeaderCellPro";
+import useGridSelectionFns from "../grid/pipeline/useGridSelectionFns";
+import useUnwrappedGridStyles from "../grid/pipeline/useUnwrappedGridStyles";
+import useGetInputStrSubmitCallback from "../grid/pipeline/useGetInputStrSubmitCallback";
+import useAugFormattedRows from "../grid/pipeline/useAugFormattedRows";
+import useResizeModel from "./resize/useResizeModel";
+import BodyRows from "../grid/main/BodyRows";
+var GridPro = function (props) {
+    var rows = props.rows, cols = props.cols, editModel = props.editModel, filterModel = props.filterModel, sortModel = props.sortModel, pagination = props.pagination, selectModel = props.selectModel, styleModel = props.styleModel, displayMode = props.displayMode;
+    var combinedPipelineOutput = useCombinedPipeline({
+        rows: rows,
+        cols: cols,
+        filterModel: filterModel,
+        sortModel: sortModel,
+        pagination: pagination,
+        selectModel: selectModel,
+    });
+    var _a = combinedPipelineOutput.sortedRowsOutput, sortColDef = _a.sortColDef, setSortColDef = _a.setSortColDef, sortingEnabled = _a.sortingEnabled, showSelectCol = combinedPipelineOutput.showSelectCol, displayRows = combinedPipelineOutput.displayRows;
+    var gridSelectionFns = useGridSelectionFns(selectModel, rows);
+    var unwrappedStyles = useUnwrappedGridStyles(styleModel);
+    var getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
+    var resizeModel = useResizeModel(cols, displayMode);
+    var colNameToWidth = useMemo(function () {
+        return Object.keys(resizeModel).reduce(function (prev, fieldName) {
+            prev[fieldName] = resizeModel[fieldName].width;
+            return prev;
+        }, {});
+    }, [resizeModel]);
+    var augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
+    var colHeaderCells = cols.map(function (_a, index) {
+        var _b;
+        var name = _a.name, label = _a.label, sortable = _a.sortable, minResizeWidth = _a.minResizeWidth, maxResizeWidth = _a.maxResizeWidth, keyboardResizeStep = _a.keyboardResizeStep;
+        var colSortModel = sortingEnabled && sortable
+            ? {
+                sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
+                setSortOrder: function (order) {
+                    setSortColDef && setSortColDef(order && { name: name, order: order });
+                },
+            }
+            : undefined;
+        return (_jsx(ColHeaderCellPro, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _b === void 0 ? void 0 : _b.theadTh) &&
+                styleModel.mainTableStyleModel.theadTh(index), width: resizeModel[name].width, displayMode: displayMode, setWidth: resizeModel[name].setWidth, minResizeWidth: minResizeWidth, maxResizeWidth: maxResizeWidth, keyboardResizeStep: keyboardResizeStep }, name));
+    });
+    var bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback }));
+    return (_jsx(InternalGrid, { gridProps: props, hooks: {
+            pipelineOutput: combinedPipelineOutput,
+            selectFns: gridSelectionFns,
+            unwrappedStyles: unwrappedStyles,
+        }, slots: { colHeaderCells: colHeaderCells, bodyRows: bodyRows } }));
+};
+export default GridPro;

package/grid-pro/index.d.ts

@@ -0,0 +1,3 @@
+export * from "../grid";
+export { default } from "./GridPro";
+export * from "./types";

package/grid-pro/index.js

@@ -0,0 +1,3 @@
+export * from "../grid";
+export { default } from "./GridPro";
+export * from "./types";

package/grid-pro/resize/types.d.ts

@@ -0,0 +1,5 @@
+export interface ColResizeModel {
+    width: number | undefined;
+    setWidth: ((width: number) => void) | undefined;
+}
+export type ResizeModel<ColName extends string = string> = Record<ColName, ColResizeModel>;

package/grid-pro/resize/types.js

@@ -0,0 +1 @@
+export {};

package/grid-pro/resize/useResizeModel.d.ts

@@ -0,0 +1,5 @@
+import { ProColDef } from "../types";
+import { DisplayMode } from "../../grid";
+import { ResizeModel } from "./types";
+declare const useResizeModel: (cols: Pick<ProColDef, "resizeable" | "width" | "name">[], display: DisplayMode | undefined) => ResizeModel;
+export default useResizeModel;

package/grid-pro/resize/useResizeModel.js

@@ -0,0 +1,65 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useMemo, useState } from "react";
+var useResizeModel = function (cols, display) {
+    var getInitWidthByName = function () {
+        return cols.reduce(function (prev, _a) {
+            var width = _a.width, name = _a.name;
+            var getEffectiveWidth = function () {
+                if (typeof width === "object") {
+                    return width.width;
+                }
+                if (width === undefined) {
+                    return 100;
+                }
+                return width;
+            };
+            prev[name] = getEffectiveWidth();
+            return prev;
+        }, {});
+    };
+    var _a = useState(getInitWidthByName()), widthByName = _a[0], setWidthByName = _a[1];
+    return useMemo(function () {
+        return cols.reduce(function (prev, _a) {
+            var resizeable = _a.resizeable, width = _a.width, name = _a.name;
+            var getEffectiveWidth = function () {
+                if (typeof width === "object") {
+                    return width.width;
+                }
+                if (display === "block" && resizeable) {
+                    return widthByName[name];
+                }
+                return width;
+            };
+            var getWidthSetter = function () {
+                if (display !== "block" || !resizeable) {
+                    return undefined;
+                }
+                if (typeof width === "object") {
+                    return width.setWidth;
+                }
+                return function (newWidth) {
+                    return setWidthByName(function (prevState) {
+                        var _a;
+                        return (__assign(__assign({}, prevState), (_a = {}, _a[name] = newWidth, _a)));
+                    });
+                };
+            };
+            prev[name] = {
+                width: getEffectiveWidth(),
+                setWidth: getWidthSetter(),
+            };
+            return prev;
+        }, {});
+    }, [cols, display, widthByName]);
+};
+export default useResizeModel;

package/grid-pro/types.d.ts

@@ -0,0 +1,18 @@
+import { ColDef, ColDefBase, ColHeaderCellProps, GridProps } from "../grid";
+export type ProColDef<ValueType = any> = ColDefBase<ValueType> & {
+    resizeable?: boolean;
+    width?: ColDef["width"] | WidthModel;
+    minResizeWidth?: number;
+    maxResizeWidth?: number;
+    keyboardResizeStep?: number;
+};
+export type GridProProps = Omit<GridProps, "cols"> & {
+    cols: ProColDef[];
+};
+export type ColHeaderCellProProps = ColHeaderCellProps & Pick<GridProps, "displayMode"> & {
+    setWidth?: (width: number) => void;
+} & Pick<ProColDef, "minResizeWidth" | "maxResizeWidth" | "keyboardResizeStep">;
+export interface WidthModel {
+    width: number;
+    setWidth: (width: number) => void;
+}

package/grid-pro/types.js

@@ -0,0 +1 @@
+export {};