@uxf/data-grid 11.35.0 → 11.36.0

package/components.d.ts

@@ -1,19 +1,19 @@
+import * as dataGridStories from "./data-grid.stories";
 import * as dataGridCustomExampleStories from "./data-grid-custom-example.stories";
 import * as dataGridV2Stories from "./data-grid-v2.stories";
-import * as dataGridStories from "./data-grid.stories";
 import * as exportButtonStories from "./export-button/export-button.stories";
 import * as filterListStories from "./filter-list/filter-list.stories";
-import * as filtersButtonStories from "./filters-button/filters-button.stories";
 import * as filtersStories from "./filters/filters.stories";
+import * as filtersButtonStories from "./filters-button/filters-button.stories";
 import * as fulltextInputStories from "./fulltext-input/fulltext-input.stories";
-import * as hiddenColumnsButtonStories from "./hidden-columns-button/hidden-columns-button.stories";
 import * as hiddenColumnsStories from "./hidden-columns/hidden-columns.stories";
+import * as hiddenColumnsButtonStories from "./hidden-columns-button/hidden-columns-button.stories";
 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 tableV2Stories from "./table-v2/table-v2.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";
 import * as toolbarTabsStories from "./toolbar-tabs/toolbar-tabs.stories";
@@ -22,14 +22,14 @@ export declare const components: {
         readonly title: "DataGrid";
         readonly stories: typeof dataGridStories;
     };
-    readonly "data-grid-v2": {
-        readonly title: "DataGridV2";
-        readonly stories: typeof dataGridV2Stories;
-    };
     readonly "data-grid-custom-example": {
         readonly title: "DataGridCustomExample";
         readonly stories: typeof dataGridCustomExampleStories;
     };
+    readonly "data-grid-v2": {
+        readonly title: "DataGridV2";
+        readonly stories: typeof dataGridV2Stories;
+    };
     readonly "export-button": {
         readonly title: "ExportButton";
         readonly stories: typeof exportButtonStories;

package/components.js

@@ -25,100 +25,100 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.components = void 0;
 // generated file
+const dataGridStories = __importStar(require("./data-grid.stories"));
 const dataGridCustomExampleStories = __importStar(require("./data-grid-custom-example.stories"));
 const dataGridV2Stories = __importStar(require("./data-grid-v2.stories"));
-const dataGridStories = __importStar(require("./data-grid.stories"));
 const exportButtonStories = __importStar(require("./export-button/export-button.stories"));
 const filterListStories = __importStar(require("./filter-list/filter-list.stories"));
-const filtersButtonStories = __importStar(require("./filters-button/filters-button.stories"));
 const filtersStories = __importStar(require("./filters/filters.stories"));
+const filtersButtonStories = __importStar(require("./filters-button/filters-button.stories"));
 const fulltextInputStories = __importStar(require("./fulltext-input/fulltext-input.stories"));
-const hiddenColumnsButtonStories = __importStar(require("./hidden-columns-button/hidden-columns-button.stories"));
 const hiddenColumnsStories = __importStar(require("./hidden-columns/hidden-columns.stories"));
+const hiddenColumnsButtonStories = __importStar(require("./hidden-columns-button/hidden-columns-button.stories"));
 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 tableV2Stories = __importStar(require("./table-v2/table-v2.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"));
 const toolbarTabsStories = __importStar(require("./toolbar-tabs/toolbar-tabs.stories"));
 exports.components = {
     "data-grid": {
         title: "DataGrid",
-        stories: dataGridStories,
-    },
-    "data-grid-v2": {
-        title: "DataGridV2",
-        stories: dataGridV2Stories,
+        stories: dataGridStories
     },
     "data-grid-custom-example": {
         title: "DataGridCustomExample",
-        stories: dataGridCustomExampleStories,
+        stories: dataGridCustomExampleStories
+    },
+    "data-grid-v2": {
+        title: "DataGridV2",
+        stories: dataGridV2Stories
     },
     "export-button": {
         title: "ExportButton",
-        stories: exportButtonStories,
+        stories: exportButtonStories
     },
     "filter-list": {
         title: "FilterList",
-        stories: filterListStories,
+        stories: filterListStories
     },
-    filters: {
+    "filters": {
         title: "Filters",
-        stories: filtersStories,
+        stories: filtersStories
     },
     "filters-button": {
         title: "FiltersButton",
-        stories: filtersButtonStories,
+        stories: filtersButtonStories
     },
     "fulltext-input": {
         title: "FulltextInput",
-        stories: fulltextInputStories,
+        stories: fulltextInputStories
     },
     "hidden-columns": {
         title: "HiddenColumns",
-        stories: hiddenColumnsStories,
+        stories: hiddenColumnsStories
     },
     "hidden-columns-button": {
         title: "HiddenColumnsButton",
-        stories: hiddenColumnsButtonStories,
+        stories: hiddenColumnsButtonStories
     },
-    pagination: {
+    "pagination": {
         title: "Pagination",
-        stories: paginationStories,
+        stories: paginationStories
     },
     "row-counts": {
         title: "RowCounts",
-        stories: rowCountsStories,
+        stories: rowCountsStories
     },
     "rows-per-page-select": {
         title: "RowsPerPageSelect",
-        stories: rowsPerPageSelectStories,
+        stories: rowsPerPageSelectStories
     },
     "selected-rows-toolbar": {
         title: "SelectedRowsToolbar",
-        stories: selectedRowsToolbarStories,
+        stories: selectedRowsToolbarStories
     },
-    table: {
+    "table": {
         title: "Table",
-        stories: tableStories,
+        stories: tableStories
     },
     "table-v2": {
         title: "TableV2",
-        stories: tableV2Stories,
+        stories: tableV2Stories
     },
     "toolbar-control": {
         title: "ToolbarControl",
-        stories: toolbarControlStories,
+        stories: toolbarControlStories
     },
     "toolbar-customs": {
         title: "ToolbarCustoms",
-        stories: toolbarCustomsStories,
+        stories: toolbarCustomsStories
     },
     "toolbar-tabs": {
         title: "ToolbarTabs",
-        stories: toolbarTabsStories,
+        stories: toolbarTabsStories
     },
 };

package/package.json

@@ -1,55 +1,55 @@
 {
-  "name": "@uxf/data-grid",
-  "version": "11.35.0",
-  "description": "UXF DataGrid",
-  "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
-  "main": "index.js",
-  "bin": {
-    "uxf-data-grid-generator": "bin/uxf-data-grid-generator.js"
-  },
-  "typings": "index.d.ts",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/uxf-npm/data-grid.git"
-  },
-  "license": "MIT",
-  "keywords": [
-    "data-table",
-    "data-grid",
-    "uxf"
-  ],
-  "scripts": {
-    "dev": "next dev",
-    "build": "tsc -P tsconfig.json",
-    "gen:icons": "icons-gen",
-    "gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/__generator_tests__/data-grid-schema -o _generator/__generator_tests__/data-grid --requiredLoader",
-    "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./**/*.ts*\"",
-    "test": "npm run-script typecheck",
-    "typecheck": "tsc --noEmit --skipLibCheck"
-  },
-  "dependencies": {
-    "@uxf/core": "11.35.0",
-    "@uxf/core-react": "11.35.0",
-    "@uxf/ui": "11.35.0",
-    "dayjs": "1.11.13",
-    "deepmerge": "4.3.1",
-    "fast-glob": "3.3.2",
-    "qs": "6.13.0",
-    "react-data-grid": "7.0.0-beta.39",
-    "yargs": "17.7.2"
-  },
-  "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
-  "gitHead": "e4f21a15c3d50fb6614d70cdaf36685232de87e7"
-}
+    "name": "@uxf/data-grid",
+    "version": "11.36.0",
+    "description": "UXF DataGrid",
+    "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
+    "main": "index.js",
+    "bin": {
+        "uxf-data-grid-generator": "bin/uxf-data-grid-generator.js"
+    },
+    "typings": "index.d.ts",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://gitlab.com/uxf-npm/data-grid.git"
+    },
+    "license": "MIT",
+    "keywords": [
+        "data-table",
+        "data-grid",
+        "uxf"
+    ],
+    "scripts": {
+        "dev": "next dev",
+        "build": "tsc -P tsconfig.json",
+        "gen:icons": "icons-gen",
+        "gen:data-grid": "node bin/uxf-data-grid-generator.js -s _generator/__generator_tests__/data-grid-schema -o _generator/__generator_tests__/data-grid --requiredLoader",
+        "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./**/*.ts*\"",
+        "test": "npm run-script typecheck",
+        "typecheck": "tsc --noEmit --skipLibCheck"
+    },
+    "dependencies": {
+        "@uxf/core": "11.35.0",
+        "@uxf/core-react": "11.36.0",
+        "@uxf/ui": "11.36.0",
+        "dayjs": "1.11.13",
+        "deepmerge": "4.3.1",
+        "fast-glob": "3.3.2",
+        "qs": "6.13.0",
+        "react-data-grid": "7.0.0-beta.39",
+        "yargs": "17.7.2"
+    },
+    "peerDependencies": {
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "18.3.5",
+        "@types/react-dom": "18.3.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+    },
+    "gitHead": "e4f21a15c3d50fb6614d70cdaf36685232de87e7"
+}

package/styles.css

@@ -489,17 +489,17 @@
     }
 
     &__hidden-columns-empty-box {
-        background-color: var(--uxf-color-warning-surface-muted);
-        border: theme("borderWidth.DEFAULT") solid var(--uxf-color-warning-border);
+        background-color: theme("colors.warning_surface_muted");
+        border: theme("borderWidth.DEFAULT") solid theme("colors.warning_border");
         border-radius: theme("borderRadius.lg");
-        color: var(--uxf-color-base-text-high-emphasis);
+        color: theme("colors.base_text_high_emphasis");
         display: flex;
         gap: 12px;
         margin: 8px 0;
         padding: 8px 16px;
 
         .uxf-icon {
-            color: var(--uxf-color-warning-icon-on-muted);
+            color: theme("colors.warning_icon_on_muted");
             margin-top: 4px;
         }
     }

package/table-v2/hooks/use-resizable-columns.js

@@ -2,17 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResizableColumns = useResizableColumns;
 const is_empty_1 = require("@uxf/core/utils/is-empty");
-const is_nil_1 = require("@uxf/core/utils/is-nil");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = require("react");
-function mapColumnSizesToGridTemplateColumns(columnSizes, actionCellWidth, selectRowCheckboxWidth) {
-    const normalizedColumnSizes = columnSizes.map((size) => ((0, is_not_nil_1.isNotNil)(size) ? (0, rem_1.rem)(size) : "1fr"));
-    const columnSizesWithSelectRows = (0, is_not_nil_1.isNotNil)(selectRowCheckboxWidth)
-        ? `${(0, rem_1.rem)(selectRowCheckboxWidth)} ${normalizedColumnSizes.join(" ")}`
-        : normalizedColumnSizes.join(" ");
-    return (0, is_nil_1.isNil)(actionCellWidth) ? columnSizesWithSelectRows : `${columnSizesWithSelectRows} ${(0, rem_1.rem)(actionCellWidth)}`;
-}
+const get_grid_template_columns_1 = require("../utils/get-grid-template-columns");
 function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth) {
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
     const tableRef = (0, react_1.useRef)(null);
@@ -36,7 +29,7 @@ function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth)
             // TODO @vejvis - jak tohle udělat lépe??
             tempColumnSizes = gridColumns;
             if (tableRef.current) {
-                tableRef.current.style.gridTemplateColumns = mapColumnSizesToGridTemplateColumns(gridColumns, actionCellWidth, selectRowsCellWidth);
+                tableRef.current.style.gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)(gridColumns.map((size) => ((0, is_not_nil_1.isNotNil)(size) ? (0, rem_1.rem)(size) : "1fr")), actionCellWidth, selectRowsCellWidth);
             }
         };
         const onMouseUp = () => {

package/table-v2/styles.css

@@ -48,6 +48,12 @@
         }
     }
 
+    /* TODO tohle by asi nemělo mít classu uxf-data-grid */
+    .uxf-data-grid__action-cell-wrapper {
+        justify-content: flex-end;
+        padding: 0 theme("spacing.2");
+    }
+
     &__row {
         display: contents;
     }

package/table-v2/table-v2.js

@@ -15,6 +15,7 @@ const components_1 = require("./components");
 const header_select_all_rows_checkbox_1 = require("./components/header-select-all-rows-checkbox");
 const select_row_checkbox_1 = require("./components/select-row-checkbox");
 const use_resizable_columns_1 = require("./hooks/use-resizable-columns");
+const get_grid_template_columns_1 = require("./utils/get-grid-template-columns");
 const get_grid_template_rows_1 = require("./utils/get-grid-template-rows");
 const SELECT_ROWS_CELL_WIDTH = 40;
 const defaultKeyExtractor = (r) => r.id;
@@ -26,18 +27,13 @@ function TableV2(props) {
     const visibleColumns = props.schema.columns
         .filter((column) => !column.hidden)
         .filter((column) => { var _a, _b, _c, _d; return !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden); });
-    const { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, props.isRowSelectable ? SELECT_ROWS_CELL_WIDTH : null);
+    const selectedRowColumnWidth = props.isRowSelectable ? SELECT_ROWS_CELL_WIDTH : null;
+    const { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, selectedRowColumnWidth);
     const gridTemplateRows = (0, get_grid_template_rows_1.getGridTemplateRows)(props.data, (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36, (_c = props.rowHeight) !== null && _c !== void 0 ? _c : 44);
-    const gridTemplateColumnsWithoutAction = visibleColumns
+    const gridTemplateBasicColumns = visibleColumns
         .map((column) => { var _a, _b, _c, _d; return (_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.width; })
-        .map((width) => ((0, is_nil_1.isNil)(width) ? "1fr" : (0, rem_1.rem)(width)))
-        .join(" ");
-    const gridTemplateColumnsWithoutSelectable = (0, is_nil_1.isNil)((_d = props.actionCell) === null || _d === void 0 ? void 0 : _d.width)
-        ? gridTemplateColumnsWithoutAction
-        : `${gridTemplateColumnsWithoutAction} ${(0, rem_1.rem)(props.actionCell.width)}`;
-    const gridTemplateColumns = props.isRowSelectable
-        ? `${(0, rem_1.rem)(SELECT_ROWS_CELL_WIDTH)} ${gridTemplateColumnsWithoutSelectable}`
-        : gridTemplateColumnsWithoutSelectable;
+        .map((width) => ((0, is_nil_1.isNil)(width) ? "1fr" : (0, rem_1.rem)(width)));
+    const gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)(gridTemplateBasicColumns, selectedRowColumnWidth, (_d = props.actionCell) === null || _d === void 0 ? void 0 : _d.width);
     const selectedRows = (_e = props.state.selectedRows) !== null && _e !== void 0 ? _e : empty_array_1.EMPTY_ARRAY;
     const selectRowHandler = (rowId) => () => {
         const isRowSelected = selectedRows.find((r) => keyExtractor(r) === rowId);

package/table-v2/utils/get-grid-template-columns.d.ts

@@ -0,0 +1,2 @@
+import { Nullish } from "@uxf/core/types";
+export declare function getGridTemplateColumns(columns: string[], selectRowColumnWidth: number | Nullish, actionColumnWidth: number | Nullish): string;

package/table-v2/utils/get-grid-template-columns.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridTemplateColumns = getGridTemplateColumns;
+const buildArray_1 = require("@uxf/core/utils/buildArray");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const rem_1 = require("@uxf/styles/units/rem");
+function getGridTemplateColumns(columns, selectRowColumnWidth, actionColumnWidth) {
+    return (0, buildArray_1.buildArray)()
+        .when((0, is_not_nil_1.isNotNil)(selectRowColumnWidth), (0, rem_1.rem)(selectRowColumnWidth !== null && selectRowColumnWidth !== void 0 ? selectRowColumnWidth : 0))
+        .add(columns.join(" "))
+        .when((0, is_not_nil_1.isNotNil)(actionColumnWidth), `minmax(${(0, rem_1.rem)(actionColumnWidth !== null && actionColumnWidth !== void 0 ? actionColumnWidth : 0)}, auto)`)
+        .join(" ");
+}