@uxf/data-grid 11.74.0 → 11.74.2

package/rows-per-page-select/rows-per-page-select.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridRowsPerPageSelect = DataGridRowsPerPageSelect;
+const translations_1 = require("@uxf/core-react/translations");
+const select_1 = require("@uxf/ui/select");
+const react_1 = __importDefault(require("react"));
+const PER_PAGE_OPTIONS = [
+    { id: 10, label: "10" },
+    { id: 25, label: "25" },
+    { id: 50, label: "50" },
+    { id: 100, label: "100" },
+];
+function DataGridRowsPerPageSelect(props) {
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__rows-per-page" },
+        react_1.default.createElement("label", { htmlFor: "uxf-data-grid--select-per-page" }, t("uxf-data-grid-rows-per-page-select:rows-count-label")),
+        react_1.default.createElement(select_1.Select, { hiddenLabel: true, id: "uxf-data-grid--select-per-page", label: t("uxf-data-grid-rows-per-page-select:rows-count-label"), name: "rows-per-page", onChange: (value) => props.actions.changePerPage(value !== null && value !== void 0 ? value : 10), options: PER_PAGE_OPTIONS, size: "small", value: props.state.request.perPage })));
+}

package/rows-per-page-select/rows-per-page-select.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/rows-per-page-select/rows-per-page-select.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const json_renderer_1 = require("../_story-utils/json-renderer");
+const schema_1 = require("../_story-utils/schema");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const rows_per_page_select_1 = require("./rows-per-page-select");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { actions: actions, state: state }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}

package/selected-rows-toolbar/index.d.ts

@@ -0,0 +1 @@
+export * from "./selected-rows-toolbar";

package/selected-rows-toolbar/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./selected-rows-toolbar"), exports);

package/selected-rows-toolbar/selected-rows-toolbar.d.ts

@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from "react";
+import { DataGridControl } from "../use-data-grid-control";
+export interface SelectedRowsToolbarActionsProps extends DataGridControl {
+    reload: () => Promise<any>;
+}
+export type SelectedRowsToolbarActionsComponent = FunctionComponent<SelectedRowsToolbarActionsProps>;
+export interface DataGridSelectedRowsToolbarProps extends DataGridControl {
+    Actions?: SelectedRowsToolbarActionsComponent;
+    reload: () => Promise<any>;
+}
+export declare function DataGridSelectedRowsToolbar(props: DataGridSelectedRowsToolbarProps): React.JSX.Element | null;

package/selected-rows-toolbar/selected-rows-toolbar.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridSelectedRowsToolbar = DataGridSelectedRowsToolbar;
+const translations_1 = require("@uxf/core-react/translations");
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const getText = (count, t) => {
+    if (count === 1) {
+        return t("uxf-data-grid-selected-rows-toolbar:selected-one");
+    }
+    if (count < 5) {
+        return t("uxf-data-grid-selected-rows-toolbar:selected-few", { count });
+    }
+    return t("uxf-data-grid-selected-rows-toolbar:selected-many", { count });
+};
+function DataGridSelectedRowsToolbar(props) {
+    const t = (0, translations_1.useUxfTranslation)();
+    if (!props.state.selectedRows) {
+        return null;
+    }
+    if (props.state.selectedRows.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__selected-rows-toolbar-wrapper", style: { paddingLeft: 240 } },
+        react_1.default.createElement("div", { className: "uxf-data-grid__selected-rows-toolbar" },
+            react_1.default.createElement("p", null, getText(props.state.selectedRows.length, t)),
+            react_1.default.createElement("div", { className: "uxf-data-grid__selected-rows-toolbar-actions" },
+                props.Actions && (react_1.default.createElement(props.Actions, { actions: props.actions, reload: props.reload, state: props.state })),
+                react_1.default.createElement(button_1.Button, { onClick: () => props.actions.setSelectedRows([]) }, t("uxf-data-grid-selected-rows-toolbar:cancel-selection"))))));
+}

package/selected-rows-toolbar/selected-rows-toolbar.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/selected-rows-toolbar/selected-rows-toolbar.stories.js

@@ -0,0 +1,44 @@
+"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 });
+exports.Default = Default;
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importStar(require("react"));
+const json_renderer_1 = require("../_story-utils/json-renderer");
+const schema_1 = require("../_story-utils/schema");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    const reload = () => new Promise(() => null);
+    (0, react_1.useEffect)(() => {
+        actions.setSelectedRows([{ id: 1 }, { id: 2 }]);
+    }, [actions]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: () => (react_1.default.createElement(button_1.Button, { isIconButton: true },
+                react_1.default.createElement(icon_1.Icon, { name: "camera" }))), actions: actions, reload: reload, state: state }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}

package/table/components/action-cell-wrapper.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+interface ActionCellWrapperProps {
+    children?: ReactNode;
+}
+export declare function ActionCellWrapper(props: ActionCellWrapperProps): React.JSX.Element;
+export {};

package/table/components/action-cell-wrapper.js

@@ -0,0 +1,57 @@
+"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 });
+exports.ActionCellWrapper = ActionCellWrapper;
+const react_1 = __importStar(require("react"));
+function ActionCellWrapper(props) {
+    const innerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        let scrollLeft = 0;
+        let grid = null;
+        const node = innerRef.current;
+        if (!node) {
+            return;
+        }
+        const scrollHandler = () => {
+            grid === null || grid === void 0 ? void 0 : grid.scrollTo({ left: scrollLeft });
+            grid === null || grid === void 0 ? void 0 : grid.removeEventListener("scroll", scrollHandler);
+        };
+        const focusHandler = () => {
+            grid = node.closest(".rdg");
+            if (grid) {
+                scrollLeft = grid.scrollLeft;
+                grid.addEventListener("scroll", scrollHandler);
+            }
+        };
+        (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.addEventListener("focus", focusHandler, { capture: true });
+        return () => {
+            var _a;
+            grid === null || grid === void 0 ? void 0 : grid.removeEventListener("scroll", scrollHandler);
+            (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeEventListener("focus", focusHandler);
+        };
+    }, []);
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__action-cell-wrapper", ref: innerRef }, props.children));
+}

package/table/components/action-cell.d.ts

@@ -0,0 +1,7 @@
+import { ButtonListProps } from "@uxf/ui/button-list";
+import React from "react";
+export interface ActionCellProps {
+    buttons: ButtonListProps["buttons"];
+    visibleButtonsCount: ButtonListProps["visibleButtonsCount"];
+}
+export declare function ActionCell(props: ActionCellProps): React.JSX.Element;

package/table/components/action-cell.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCell = ActionCell;
+const button_list_1 = require("@uxf/ui/button-list");
+const react_1 = __importDefault(require("react"));
+const action_cell_wrapper_1 = require("./action-cell-wrapper");
+function ActionCell(props) {
+    return (react_1.default.createElement(action_cell_wrapper_1.ActionCellWrapper, null,
+        react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, size: "sm", variant: "secondary", visibleButtonsCount: props.visibleButtonsCount })));
+}

package/table/components/select-row-checkbox.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { RenderCheckboxProps } from "react-data-grid";
+export declare function SelectRowCheckbox(props: RenderCheckboxProps): React.JSX.Element;

package/table/components/select-row-checkbox.js

@@ -0,0 +1,40 @@
+"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 });
+exports.SelectRowCheckbox = SelectRowCheckbox;
+const checkbox_1 = require("@uxf/ui/checkbox");
+const react_1 = __importStar(require("react"));
+function SelectRowCheckbox(props) {
+    var _a;
+    const handleChange = (value, e) => {
+        if (typeof value !== "undefined") {
+            const shiftKey = (e === null || e === void 0 ? void 0 : e.nativeEvent) && e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false;
+            props.onChange(value, shiftKey);
+        }
+    };
+    const id = (0, react_1.useId)();
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__select-row-checkbox-wrapper" },
+        react_1.default.createElement(checkbox_1.Checkbox, { ...props, name: id, onChange: handleChange, value: (_a = props.checked) !== null && _a !== void 0 ? _a : false })));
+}

package/table/hooks/use-rdg-visuals.d.ts

@@ -0,0 +1,16 @@
+import { DataGridHandle } from "react-data-grid";
+import { BaseGridType, DataGridBaseProps } from "../../types";
+export declare function useRdgVisuals(props: {
+    headerRowHeight?: DataGridBaseProps<BaseGridType, any>["headerRowHeight"];
+    rowHeight?: Exclude<DataGridBaseProps<BaseGridType, any>["rowHeight"], "auto">;
+    rows: any[];
+}): {
+    className: string;
+    headerRowHeight: number;
+    ready: boolean;
+    ref: import("react").RefObject<DataGridHandle>;
+    rowHeight: number | ((row: any) => number);
+    style: {
+        height: number | undefined;
+    };
+};

package/table/hooks/use-rdg-visuals.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRdgVisuals = useRdgVisuals;
+const react_1 = require("react");
+function useRdgVisuals(props) {
+    var _a, _b;
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setMounted(true), []);
+    const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
+    const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
+    const contentHeight = typeof rowHeight === "function"
+        ? props.rows.reduce((prev, curr) => prev + rowHeight(curr))
+        : rowHeight * props.rows.length;
+    const ref = (0, react_1.useRef)(null);
+    const size = {
+        contentHeight,
+        headerRowHeight,
+        rowsCount: props.rows.length,
+    };
+    const storedSize = (0, react_1.useRef)(size);
+    storedSize.current = size;
+    const [height, setHeight] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const node = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.element;
+        if (!(mounted && node)) {
+            return;
+        }
+        const observer = new MutationObserver((mutations) => mutations.forEach(() => {
+            const currentSize = storedSize.current;
+            const scrollbarHeight = node.scrollWidth > node.clientWidth ? 8 : 0;
+            const emptyRowHeight = currentSize.rowsCount === 0 ? 44 : 0;
+            setHeight(currentSize.headerRowHeight + currentSize.contentHeight + emptyRowHeight + scrollbarHeight);
+        }));
+        observer.observe(node, { attributes: true, attributeFilter: ["style"] });
+        return () => observer.disconnect();
+    }, [mounted, storedSize]);
+    return {
+        className: "uxf-data-grid__table rdg-light",
+        headerRowHeight,
+        ready: mounted,
+        ref,
+        rowHeight,
+        style: { height },
+    };
+}

package/table/hooks/use-react-data-grid-columns.d.ts

@@ -0,0 +1,4 @@
+import { Column } from "react-data-grid";
+import { DataGridState } from "../../types";
+import { DataGridTableProps } from "../types";
+export declare function useReactDataGridColumns(props: DataGridTableProps<any>, state: DataGridState<any>): Column<any>[];

package/table/hooks/use-react-data-grid-columns.js

@@ -0,0 +1,86 @@
+"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 });
+exports.useReactDataGridColumns = useReactDataGridColumns;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const react_data_grid_1 = require("react-data-grid");
+function useReactDataGridColumns(props, state) {
+    const { reload, schema, isRowSelectable, bodyCells, actionCell } = props;
+    const userConfigColumns = state.userConfig.columns;
+    return (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const columns = [];
+        if (isRowSelectable) {
+            columns.push(react_data_grid_1.SelectColumn);
+        }
+        for (const schemaColumn of schema.columns) {
+            if (schemaColumn.hidden) {
+                continue;
+            }
+            const isHidden = (_b = (_a = userConfigColumns === null || userConfigColumns === void 0 ? void 0 : userConfigColumns[schemaColumn.name]) === null || _a === void 0 ? void 0 : _a.isHidden) !== null && _b !== void 0 ? _b : (_c = schemaColumn.config) === null || _c === void 0 ? void 0 : _c.isHidden;
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (isHidden) {
+                continue;
+            }
+            columns.push({
+                key: schemaColumn.name,
+                name: schemaColumn.label,
+                headerCellClass: (0, cx_1.cx)("uxf-data-grid__cell", "uxf-data-grid__cell--header", `uxf-data-grid__cell--type-${schemaColumn.type}`, `uxf-data-grid__cell--name-${schemaColumn.name}`),
+                resizable: true,
+                sortable: schemaColumn.sort,
+                width: (_f = (_e = (_d = state.userConfig.columns) === null || _d === void 0 ? void 0 : _d[schemaColumn.name]) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : (_g = schemaColumn.config) === null || _g === void 0 ? void 0 : _g.width,
+                minWidth: (_k = (_j = (_h = state.userConfig.columns) === null || _h === void 0 ? void 0 : _h[schemaColumn.name]) === null || _j === void 0 ? void 0 : _j.minWidth) !== null && _k !== void 0 ? _k : (_l = schemaColumn.config) === null || _l === void 0 ? void 0 : _l.minWidth,
+                cellClass: (0, cx_1.cx)("uxf-data-grid__cell", `uxf-data-grid__cell--type-${schemaColumn.type}`, `uxf-data-grid__cell--name-${schemaColumn.name}`),
+                renderCell: (p) => {
+                    var _a;
+                    const columnType = schemaColumn.type;
+                    const BodyCell = (_a = bodyCells === null || bodyCells === void 0 ? void 0 : bodyCells[columnType]) !== null && _a !== void 0 ? _a : bodyCells === null || bodyCells === void 0 ? void 0 : bodyCells.default;
+                    if (!BodyCell) {
+                        return null;
+                    }
+                    return (react_1.default.createElement(BodyCell, { column: {
+                            name: p.column.key,
+                            label: p.column.name,
+                            sort: p.column.sortable,
+                            type: columnType,
+                        }, reload: reload, row: p.row, value: p.row[p.column.key] }));
+                },
+            });
+        }
+        if (actionCell) {
+            columns.push({
+                key: "__action_column",
+                name: "",
+                resizable: false,
+                headerCellClass: "uxf-data-grid__action-cell",
+                cellClass: "uxf-data-grid__action-cell",
+                width: actionCell.width,
+                renderCell: (p) => react_1.default.createElement(actionCell.Component, { reload: reload, row: p.row }),
+            });
+        }
+        return columns;
+    }, [userConfigColumns, actionCell, schema.columns, bodyCells, isRowSelectable, reload, state.userConfig.columns]);
+}

package/table/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components/action-cell";
+export * from "./components/action-cell-wrapper";
+export * from "./table";

package/table/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/action-cell"), exports);
+__exportStar(require("./components/action-cell-wrapper"), exports);
+__exportStar(require("./table"), exports);

package/table/no-rows-fallback.d.ts

@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from "react";
+export interface NoRowsFallbackProps {
+    error?: any;
+    isLoading: boolean;
+}
+export type NoRowsFallbackComponent = FunctionComponent<NoRowsFallbackProps>;
+export declare function NoRowsFallback(props: NoRowsFallbackProps): React.JSX.Element;

package/table/no-rows-fallback.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoRowsFallback = NoRowsFallback;
+const translations_1 = require("@uxf/core-react/translations");
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+function NoRowsFallback(props) {
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__fallback", props.isLoading && "is-loading", props.error && "is-error") }, props.isLoading ? (react_1.default.createElement(react_1.default.Fragment, null, t("uxf-data-grid-no-rows-fallback:loading"))) : props.error ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(icon_1.Icon, { name: "warning", size: 24 }),
+        react_1.default.createElement("p", null, t("uxf-data-grid-no-rows-fallback:error")))) : (react_1.default.createElement(react_1.default.Fragment, null, t("uxf-data-grid-no-rows-fallback:no-records")))));
+}

package/table/table.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DataGridTableProps } from "./types";
+/** @deprecated will be remove, use DataGridTableV2 */
+export declare function DataGridTable(props: DataGridTableProps<any>): React.JSX.Element;

package/table/table.js

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridTable = DataGridTable;
+const show_1 = require("@uxf/core-react/components/show");
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importStar(require("react"));
+const react_data_grid_1 = __importDefault(require("react-data-grid"));
+const select_row_checkbox_1 = require("./components/select-row-checkbox");
+const use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
+const use_react_data_grid_columns_1 = require("./hooks/use-react-data-grid-columns");
+const no_rows_fallback_1 = require("./no-rows-fallback");
+const defaultKeyExtractor = (r) => r.id;
+const DefaultNoRowsFallback = no_rows_fallback_1.NoRowsFallback;
+/** @deprecated will be remove, use DataGridTableV2 */
+function DataGridTable(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
+    const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
+    const keyExtractor = (_c = props.keyExtractor) !== null && _c !== void 0 ? _c : defaultKeyExtractor;
+    const contentHeight = typeof rowHeight === "function"
+        ? props.data.reduce((prev, curr) => prev + rowHeight(curr))
+        : (rowHeight + 1) * props.data.length;
+    const reactDataGridStyles = {
+        height: contentHeight + headerRowHeight + (props.data.length === 0 ? 44 : 0) + 4,
+        overflowY: "hidden",
+    };
+    const NoRowsFallback = (_d = props.NoRowsFallback) !== null && _d !== void 0 ? _d : DefaultNoRowsFallback;
+    const isLoading = Boolean(props.isLoading);
+    const error = props.error;
+    const components = (0, react_1.useMemo)(() => ({
+        renderCheckbox: (args) => react_1.default.createElement(select_row_checkbox_1.SelectRowCheckbox, { ...args }),
+        noRowsFallback: react_1.default.createElement(NoRowsFallback, { error: error, isLoading: isLoading }),
+    }), [NoRowsFallback, error, isLoading]);
+    const columns = (0, use_react_data_grid_columns_1.useReactDataGridColumns)(props, props.state);
+    const onSelectRows = (value) => {
+        const selectedRows = Array.from(value).map((id) => {
+            var _a, _b;
+            return (_b = (_a = props.state.selectedRows) === null || _a === void 0 ? void 0 : _a.find((row) => keyExtractor(row) === id)) !== null && _b !== void 0 ? _b : props.data.find((row) => keyExtractor(row) === id);
+        });
+        props.actions.setSelectedRows(selectedRows);
+    };
+    const onSortColumnChange = (sortColumns) => {
+        const firstSortColumn = sortColumns.at(0);
+        if ((0, is_not_nil_1.isNotNil)(firstSortColumn)) {
+            props.actions.sort(firstSortColumn.columnKey, firstSortColumn.direction.toLowerCase());
+        }
+        else {
+            props.actions.sortClear();
+        }
+    };
+    const sortColumns = props.state.request.s
+        ? [{ columnKey: props.state.request.s.name, direction: props.state.request.s.dir.toUpperCase() }]
+        : empty_array_1.EMPTY_ARRAY;
+    const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
+        headerRowHeight: props.headerRowHeight,
+        rowHeight: props.rowHeight,
+        rows: props.data,
+    });
+    return (react_1.default.createElement(show_1.Show, { when: isMounted },
+        react_1.default.createElement(react_data_grid_1.default, { className: rdgVisuals.className, columns: columns, enableVirtualization: false, headerRowHeight: rdgVisuals.headerRowHeight, onSelectedRowsChange: onSelectRows, onSortColumnsChange: onSortColumnChange, ref: rdgVisuals.ref, renderers: components, rowClass: props.rowClass, rowHeight: rdgVisuals.rowHeight, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, rows: props.data, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : empty_array_1.EMPTY_ARRAY), sortColumns: sortColumns, style: reactDataGridStyles })));
+}

package/table/table.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/table/table.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const data_1 = require("../_story-utils/data");
+const json_renderer_1 = require("../_story-utils/json-renderer");
+const schema_1 = require("../_story-utils/schema");
+const body_cell_1 = require("../body-cell");
+const use_data_grid_control_1 = require("../use-data-grid-control");
+const table_1 = require("./table");
+function Default() {
+    const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    const reload = () => new Promise(() => null);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(table_1.DataGridTable, { actions: actions, bodyCells: body_cell_1.BodyCells, data: data_1.data, error: undefined, isLoading: true, isRowSelectable: true, reload: reload, schema: schema_1.schema, state: state }),
+        react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
+}