@uxf/data-grid 11.90.0 → 11.91.0

package/components.d.ts

@@ -12,7 +12,6 @@ import * as paginationStories from "./pagination/pagination.stories";
 import * as rowCountsStories from "./row-counts/row-counts.stories";
 import * as rowsPerPageSelectStories from "./rows-per-page-select/rows-per-page-select.stories";
 import * as selectedRowsToolbarStories from "./selected-rows-toolbar/selected-rows-toolbar.stories";
-import * as tableStories from "./table/table.stories";
 import * as tableV2Stories from "./table-v2/table-v2.stories";
 import * as toolbarControlStories from "./toolbar-control/toolbar-control.stories";
 import * as toolbarCustomsStories from "./toolbar-customs/toolbar-customs.stories";
@@ -74,10 +73,6 @@ export declare const components: {
         readonly title: "SelectedRowsToolbar";
         readonly stories: typeof selectedRowsToolbarStories;
     };
-    readonly table: {
-        readonly title: "Table";
-        readonly stories: typeof tableStories;
-    };
     readonly "table-v2": {
         readonly title: "TableV2";
         readonly stories: typeof tableV2Stories;

package/components.js

@@ -49,7 +49,6 @@ const paginationStories = __importStar(require("./pagination/pagination.stories"
 const rowCountsStories = __importStar(require("./row-counts/row-counts.stories"));
 const rowsPerPageSelectStories = __importStar(require("./rows-per-page-select/rows-per-page-select.stories"));
 const selectedRowsToolbarStories = __importStar(require("./selected-rows-toolbar/selected-rows-toolbar.stories"));
-const tableStories = __importStar(require("./table/table.stories"));
 const tableV2Stories = __importStar(require("./table-v2/table-v2.stories"));
 const toolbarControlStories = __importStar(require("./toolbar-control/toolbar-control.stories"));
 const toolbarCustomsStories = __importStar(require("./toolbar-customs/toolbar-customs.stories"));
@@ -111,10 +110,6 @@ exports.components = {
         title: "SelectedRowsToolbar",
         stories: selectedRowsToolbarStories
     },
-    "table": {
-        title: "Table",
-        stories: tableStories
-    },
     "table-v2": {
         title: "TableV2",
         stories: tableV2Stories

package/data-grid-v2.js

@@ -22,6 +22,7 @@ const toolbar_control_1 = require("./toolbar-control");
 const toolbar_customs_1 = require("./toolbar-customs");
 const toolbar_tabs_1 = require("./toolbar-tabs");
 const DefaultSelectedRowsToolbarActions = () => null;
+// TODO remove (DataGrid is now identical with DataGridV2)
 function DataGridV2(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/data-grid.js

@@ -16,27 +16,26 @@ const root_1 = require("./root");
 const row_counts_1 = require("./row-counts");
 const rows_per_page_select_1 = require("./rows-per-page-select");
 const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
-const table_1 = require("./table");
-const no_rows_fallback_1 = require("./table/no-rows-fallback");
+const table_v2_1 = require("./table-v2");
 const toolbar_1 = require("./toolbar");
 const toolbar_control_1 = require("./toolbar-control");
 const toolbar_customs_1 = require("./toolbar-customs");
 const toolbar_tabs_1 = require("./toolbar-tabs");
 const DefaultSelectedRowsToolbarActions = () => null;
 function DataGrid(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(root_1.DataGridRoot, { className: props.className },
             react_1.default.createElement(toolbar_1.DataGridToolbar, null,
-                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state }),
+                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state, variant: props.tabsVariant }),
                 react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),
             react_1.default.createElement(filter_list_1.DataGridFilterList, { actions: props.actions, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, schema: props.schema, state: props.state }),
-            react_1.default.createElement(table_1.DataGridTable, { NoRowsFallback: (_c = props.NoRowsFallback) !== null && _c !== void 0 ? _c : no_rows_fallback_1.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_d = props.bodyCells) !== null && _d !== void 0 ? _d : body_cell_1.BodyCells, data: (_f = (_e = props.data) === null || _e === void 0 ? void 0 : _e.result) !== null && _f !== void 0 ? _f : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectable: props.isRowsSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowClass: props.rowAccent, rowHeight: props.rowHeight === "auto" ? undefined : props.rowHeight, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_v2_1.DataGridTableV2, { NoRowsFallback: props.NoRowsFallback, actionCell: props.actionCell, actions: props.actions, bodyCells: (_c = props.bodyCells) !== null && _c !== void 0 ? _c : body_cell_1.BodyCells, data: (_e = (_d = props.data) === null || _d === void 0 ? void 0 : _d.result) !== null && _e !== void 0 ? _e : empty_array_1.EMPTY_ARRAY, error: props.error, headerRowHeight: props.headerRowHeight, isLoading: props.isLoading, isRowSelectDisabled: props.isRowSelectDisabled, isRowsSelectable: props.isRowsSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowAccent: props.rowAccent, rowClassName: props.rowClassName, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
             react_1.default.createElement(footer_1.DataGridFooter, null,
                 react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { actions: props.actions, state: props.state }),
-                react_1.default.createElement(row_counts_1.DataGridRowCounts, { count: (_h = (_g = props.data) === null || _g === void 0 ? void 0 : _g.count) !== null && _h !== void 0 ? _h : 0, state: props.state, totalCount: (_k = (_j = props.data) === null || _j === void 0 ? void 0 : _j.totalCount) !== null && _k !== void 0 ? _k : 0 }),
-                react_1.default.createElement(pagination_1.DataGridPagination, { actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0, showFirstButton: true, showLastButton: true, size: "sm", state: props.state }))),
-        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: (_o = props.SelectedRowsToolbarActions) !== null && _o !== void 0 ? _o : DefaultSelectedRowsToolbarActions, actions: props.actions, reload: props.reload, state: props.state })));
+                react_1.default.createElement(row_counts_1.DataGridRowCounts, { count: (_g = (_f = props.data) === null || _f === void 0 ? void 0 : _f.count) !== null && _g !== void 0 ? _g : 0, state: props.state, totalCount: (_j = (_h = props.data) === null || _h === void 0 ? void 0 : _h.totalCount) !== null && _j !== void 0 ? _j : 0 }),
+                react_1.default.createElement(pagination_1.DataGridPagination, { actions: props.actions, count: (_l = (_k = props.data) === null || _k === void 0 ? void 0 : _k.count) !== null && _l !== void 0 ? _l : 0, showFirstButton: true, showLastButton: true, size: "sm", state: props.state }))),
+        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: (_m = props.SelectedRowsToolbarActions) !== null && _m !== void 0 ? _m : DefaultSelectedRowsToolbarActions, actions: props.actions, reload: props.reload, state: props.state })));
 }

package/data-grid.stories.js

@@ -41,7 +41,7 @@ const json_renderer_1 = require("./_story-utils/json-renderer");
 const loader_1 = require("./_story-utils/loader");
 const schema_1 = require("./_story-utils/schema");
 const data_grid_1 = require("./data-grid");
-const table_1 = require("./table");
+const action_cell_1 = require("./table-v2/components/action-cell");
 const use_data_grid_control_1 = require("./use-data-grid-control");
 const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
 const merge_schema_with_config_1 = require("./utils/merge-schema-with-config");
@@ -65,7 +65,7 @@ const actionCell = {
             label: "Reload",
             onClick: console.log,
         });
-        return react_1.default.createElement(table_1.ActionCell, { buttons: actionCellActions, visibleButtonsCount: 1 });
+        return react_1.default.createElement(action_cell_1.ActionCell, { buttons: actionCellActions, visibleButtonsCount: 1 });
     },
 };
 const schemaWithFrontendConfig = (0, merge_schema_with_config_1.mergeSchemaWithConfig)(schema_1.schema, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.90.0",
+    "version": "11.91.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -31,14 +31,13 @@
         "typecheck": "tsc --noEmit --skipLibCheck"
     },
     "dependencies": {
-        "@uxf/core": "11.90.0",
-        "@uxf/core-react": "11.90.0",
-        "@uxf/ui": "11.90.0",
+        "@uxf/core": "11.91.0",
+        "@uxf/core-react": "11.91.0",
+        "@uxf/ui": "11.91.0",
         "dayjs": "1.11.19",
         "deepmerge": "4.3.1",
         "fast-glob": "3.3.3",
         "qs": "6.14.0",
-        "react-data-grid": "7.0.0-beta.39",
         "yargs": "18.0.0"
     },
     "peerDependencies": {

package/styles.css

@@ -1,66 +1,8 @@
-@import url("react-data-grid/lib/styles.css");
 @import url("./table-v2/styles.css");
 
-/* stylelint-disable-next-line layer-name-pattern */
-@layer rdg.Root {
-    .uxf-data-grid__table {
-        --rdg-color-scheme: light;
-        --rdg-color: theme("colors.lightHigh");
-        --rdg-border-color: theme("colors.lightBorder");
-        --rdg-summary-border-color: theme("colors.lightBorder");
-        --rdg-background-color: theme("colors.white");
-        --rdg-header-background-color: theme("colors.gray.50");
-        --rdg-row-hover-background-color: theme("colors.gray.50");
-        --rdg-row-selected-background-color: theme("colors.gray.100/.75");
-        --rdg-row-selected-hover-background-color: theme("colors.gray.200/.75");
-        --rdg-selection-color: theme("colors.lightBorder");
-        --rdg-font-size: 14px;
-
-        :root .dark & {
-            --rdg-color-scheme: dark;
-            --rdg-color: theme("colors.darkHigh");
-            --rdg-border-color: theme("colors.darkBorder");
-            --rdg-summary-border-color: theme("colors.darkBorder");
-            --rdg-background-color: theme("colors.gray.950");
-            --rdg-header-background-color: theme("colors.gray.900");
-            --rdg-row-hover-background-color: theme("colors.gray.950");
-            --rdg-row-selected-background-color: theme("colors.gray.900/.75");
-            --rdg-row-selected-hover-background-color: theme("colors.gray.800/.75");
-            --rdg-selection-color: theme("colors.darkBorder");
-            --rdg-font-size: 14px;
-        }
-    }
-}
-
 .uxf-data-grid {
     border-radius: theme("borderRadius.DEFAULT");
 
-    &__action-cell {
-        background-color: var(--rdg-background-color);
-        border-inline-start: 1px solid var(--rdg-border-color);
-        position: sticky;
-        right: 0;
-    }
-
-    &__action-cell-wrapper {
-        @apply space-x-2;
-
-        align-items: center;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        text-align: center;
-        width: 100%;
-
-        .uxf-icon {
-            color: theme("colors.lightMedium");
-
-            :root .dark & {
-                color: theme("colors.darkMedium");
-            }
-        }
-    }
-
     &__body-cell {
         &--boolean {
             align-items: center;
@@ -135,15 +77,6 @@ o
         }
     }
 
-    &__fallback {
-        align-items: center;
-        color: theme("colors.gray.600"); /* ?? */
-        display: flex;
-        grid-column: 1/-1;
-        justify-content: center;
-        text-align: center;
-    }
-
     &__filter {
         &--date,
         &--datetime,

package/types/data-grid-props.d.ts

@@ -1,8 +1,8 @@
 import { Nullish } from "@uxf/core/types";
 import { FilterHandlers } from "../filter-handler";
 import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
-import { NoRowsFallbackComponent } from "../table/no-rows-fallback";
-import { DataGridTableProps } from "../table/types";
+import { NoRowsFallbackComponent } from "../table-v2/no-rows-fallback";
+import { DataGridTableProps } from "../table-v2/types";
 import { DataGridToolbarCustomsProps } from "../toolbar-customs";
 import { DataGridControl } from "../use-data-grid-control";
 import { DataGridFetchingResult } from "../use-data-grid-fetching";

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

@@ -1,6 +0,0 @@
-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

@@ -1,67 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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

@@ -1,7 +0,0 @@
-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

@@ -1,13 +0,0 @@
-"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

@@ -1,3 +0,0 @@
-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

@@ -1,50 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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

@@ -1,16 +0,0 @@
-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

@@ -1,46 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,96 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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

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

package/table/index.js

@@ -1,19 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,16 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

@@ -1,101 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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

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

package/table/table.stories.js

@@ -1,20 +0,0 @@
-"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 })));
-}

package/table/types.d.ts

@@ -1,19 +0,0 @@
-import { Nullish } from "@uxf/core/types";
-import { BodyCellComponents, DataGridActionCell, KeyExtractor, RowAccent, Schema } from "../types";
-import { DataGridControl } from "../use-data-grid-control";
-import { NoRowsFallbackComponent } from "./no-rows-fallback";
-export interface DataGridTableProps<Row> extends DataGridControl {
-    schema: Schema<any>;
-    data: Row[];
-    isLoading?: boolean;
-    error?: any | Nullish;
-    reload: () => Promise<any>;
-    rowHeight?: number | ((row: Row) => number);
-    headerRowHeight?: number;
-    rowClass?: (row: Row) => RowAccent;
-    keyExtractor?: KeyExtractor;
-    bodyCells?: BodyCellComponents;
-    actionCell?: DataGridActionCell<Row>;
-    NoRowsFallback?: NoRowsFallbackComponent;
-    isRowSelectable?: boolean;
-}

package/table/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });