@uxf/data-grid 10.0.0-beta.9 → 10.0.0

package/data-grid.js

@@ -28,27 +28,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGrid = void 0;
 const react_1 = __importStar(require("react"));
-const reducer_1 = require("./store/reducer");
-const utils_1 = require("./utils");
 const react_data_grid_1 = __importDefault(require("react-data-grid"));
+const use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
 const useColumns_1 = require("./hooks/useColumns");
+const actions_1 = require("./store/actions");
+const reducer_1 = require("./store/reducer");
 const footer_1 = require("./tailwindui/components/footer");
 const show_1 = require("./tailwindui/show");
-const actions_1 = require("./store/actions");
+const utils_1 = require("./utils");
 const defaultKeyExtractor = (r) => {
     return r.id;
 };
 // eslint-disable-next-line react/require-optimization
 const DataGrid = (props) => {
-    var _a, _b, _c, _d, _e;
-    const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
-    const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
+    var _a, _b, _c;
     const { LinearProgress, Container, FilterList, Pagination, PaginationCounts, PaginationRowsPerPageSelect, SelectedRowsToolbar, NoRowsFallback, SelectRowCheckbox, Toolbar, ToolbarControl, ToolbarCustoms, ToolbarTabs, } = props.ui;
     const [state, dispatch] = (0, react_1.useReducer)(props.debug ? reducer_1.debugReducer : reducer_1.reducer, (0, reducer_1.getInitialState)(props.schema, props.initialState));
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        setMounted(true);
-    }, []);
     // TODO @vejvis - tady vyřešit problém se závislostma v useCallbacku
     const schema = props.schema;
     const gridName = props.gridName;
@@ -86,14 +81,11 @@ const DataGrid = (props) => {
     const onFilter = (0, react_1.useCallback)((value) => {
         dispatch(actions_1.dataGridActions.filter(value));
     }, [dispatch]);
-    const rows = (_d = (_c = state.response) === null || _c === void 0 ? void 0 : _c.result) !== null && _d !== void 0 ? _d : [];
+    const rows = (_b = (_a = state.response) === null || _a === void 0 ? void 0 : _a.result) !== null && _b !== void 0 ? _b : [];
     const columns = (0, useColumns_1.useColumns)(props, onReload);
-    const contentHeight = typeof rowHeight === "function"
-        ? rows.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
-        : (rowHeight + 1) * rows.length;
     const components = (0, react_1.useMemo)(() => {
         return {
-            checkboxFormatter: SelectRowCheckbox,
+            renderCheckbox: (args) => react_1.default.createElement(SelectRowCheckbox, { ...args }),
             noRowsFallback: react_1.default.createElement(NoRowsFallback, { error: state.error, loading: !!state.loading }),
         };
     }, [SelectRowCheckbox, NoRowsFallback, state.error, state.loading]);
@@ -111,22 +103,22 @@ const DataGrid = (props) => {
             dispatch(actions_1.dataGridActions.sortClear());
         }
     };
-    const reactDataGridStyles = {
-        border: 0,
-        borderRadius: 4,
-        height: contentHeight + headerRowHeight + (rows.length === 0 ? 44 : 0) + 4,
-        overflowY: "hidden",
-    };
+    const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
+        headerRowHeight: props.headerRowHeight,
+        mode: props.mode,
+        rowHeight: props.rowHeight,
+        rows,
+    });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Container, { noBorder: props.noBorder, className: props.className },
             react_1.default.createElement(Toolbar, { noBorder: props.noBorder },
                 react_1.default.createElement(ToolbarTabs, { activeTab: state.request.tab, onChange: (tab) => dispatch(actions_1.dataGridActions.changeTab(tab)), schema: props.schema }),
-                react_1.default.createElement(ToolbarControl, { gridName: props.gridName, dispatch: dispatch, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder, schema: props.schema, filtersData: state.request.f, fulltextValue: state.request.search, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText }),
+                react_1.default.createElement(ToolbarControl, { gridName: props.gridName, dispatch: dispatch, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder, schema: props.schema, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText, hiddenColumns: props.hiddenColumns, onChangeHiddenColumns: props.onChangeHiddenColumns, onCsvDownload: props.onCsvDownload, state: state }),
                 react_1.default.createElement(ToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(LinearProgress, { loading: !!state.loading }),
             react_1.default.createElement(FilterList, { gridName: props.gridName, onFilter: onFilter, filters: props.schema.filters, filtersData: state.request.f, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder }),
-            react_1.default.createElement(show_1.Show, { when: mounted },
-                react_1.default.createElement(react_data_grid_1.default, { style: reactDataGridStyles, className: `uxf-data-grid__table ${props.mode === "light" ? "rdg-light" : props.mode === "dark" ? "rdg-dark" : ""}`, columns: columns, rows: rows, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rowHeight, headerRowHeight: headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: props.selectedRows, onSelectedRowsChange: props.onChangeSelectedRows, components: components })),
+            react_1.default.createElement(show_1.Show, { when: rdgVisuals.ready },
+                react_1.default.createElement(react_data_grid_1.default, { className: rdgVisuals.className, columns: columns, enableVirtualization: false, headerRowHeight: rdgVisuals.headerRowHeight, onSelectedRowsChange: props.onChangeSelectedRows, onSortColumnsChange: onSortColumnChange, ref: rdgVisuals.ref, renderers: components, rowClass: props.rowClass, rowHeight: rdgVisuals.rowHeight, rowKeyGetter: (_c = props.keyExtractor) !== null && _c !== void 0 ? _c : defaultKeyExtractor, rows: rows, selectedRows: props.selectedRows, sortColumns: sortColumns, style: rdgVisuals.style })),
             react_1.default.createElement(footer_1.Footer, { noBorder: props.noBorder },
                 react_1.default.createElement(PaginationRowsPerPageSelect, { value: state.request.perPage, onChange: (value) => dispatch(actions_1.dataGridActions.changePerPage(value)) }),
                 react_1.default.createElement(PaginationCounts, { page: state.request.page, perPage: state.request.perPage, response: state.response }),

package/data-grid.stories.js

@@ -75,7 +75,7 @@ const schema = {
         { name: "only-odd-ids", label: "Only odd ids blablabla" },
         // { name: "only-odd-ids", label: "Only odd ids" },
     ],
-    dir: "asc",
+    dir: _1.DataGridSortDir.Asc,
     sort: "id",
     perPage: 10,
     fullText: true,
@@ -223,23 +223,24 @@ const loader = async (_, request) => {
         result: filteredData.slice(page * perPage, page * perPage + perPage),
     };
 };
+const onCsvDownload = (request) => {
+    // eslint-disable-next-line no-console
+    console.log(request);
+};
 function Default() {
     const [hiddenColumns, setHiddenColumns] = (0, react_1.useState)([]);
     const [selectedRows, setSelectedRows] = (0, react_1.useState)(new Set());
     const callbackRef = (0, _1.useCallbackRef)();
     return (react_1.default.createElement("div", { className: "min-h-screen bg-gray-50 p-4 dark:bg-gray-950" },
-        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: console.log, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", defaultConfig: {
+        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: (row, reload) => {
+                console.log(row, reload);
+                reload();
+            }, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", onCsvDownload: onCsvDownload, defaultConfig: {
                 columns: {
                     id: { width: 50, hidden: true },
                     text: {},
                     bool: { width: 50 },
                 },
-            }, 
-            //rowClass={row => ["bg-success-100", "bg-warning-100", "bg-error-100", "bg-primary-100"][(row.id - 1) % 4]}
-            // customActions={[
-            //     { label: "Do something", onClick: () => console.log("click") },
-            //     { label: "Do something else", href: "https://www.uxf.cz", variant: "text" },
-            // ]}
-            debug: true })));
+            }, debug: true })));
 }
 exports.Default = Default;

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

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

package/hooks/use-rdg-visuals.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRdgVisuals = void 0;
+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({ type: "ROW", row: 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 ${props.mode === "light" ? "rdg-light" : props.mode === "dark" ? "rdg-dark" : ""}`,
+        headerRowHeight,
+        ready: mounted,
+        ref,
+        rowHeight,
+        style: { height },
+    };
+}
+exports.useRdgVisuals = useRdgVisuals;

package/hooks/useColumns.js

@@ -47,7 +47,7 @@ const useColumns = (props, reload) => {
                 width: props.ui.ActionCell !== action_cell_base_1.ActionCellBase
                     ? actionCellWidth
                     : [onRemove, onEdit !== null && onEdit !== void 0 ? onEdit : getEditUrl, onOpen !== null && onOpen !== void 0 ? onOpen : getOpenUrl].filter((i) => i).length * 40 + 8 * 2,
-                formatter: (p) => {
+                renderCell: (p) => {
                     if (!props.ui.ActionCell) {
                         return null;
                     }
@@ -71,7 +71,7 @@ const useColumns = (props, reload) => {
                 minWidth: (_c = c.minWidth) !== null && _c !== void 0 ? _c : (_d = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _d === void 0 ? void 0 : _d.minWidth,
                 maxWidth: (_e = c.maxWidth) !== null && _e !== void 0 ? _e : (_f = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _f === void 0 ? void 0 : _f.maxWidth,
                 cellClass: (0, utils_1.cx)("uxf-data-grid__cell", `uxf-data-grid__cell--type-${c.type}`, `uxf-data-grid__cell--name-${c.name}`),
-                formatter: (p) => {
+                renderCell: (p) => {
                     var _a;
                     const columnType = c.type;
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./data-grid";
-export * from "./types";
 export * from "./hooks/useCallbackRef";
+export * from "./types";
 export { decodeFilter, encodeFilter } from "./utils";

package/index.js

@@ -16,8 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.encodeFilter = exports.decodeFilter = void 0;
 __exportStar(require("./data-grid"), exports);
-__exportStar(require("./types"), exports);
 __exportStar(require("./hooks/useCallbackRef"), exports);
+__exportStar(require("./types"), exports);
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "decodeFilter", { enumerable: true, get: function () { return utils_1.decodeFilter; } });
 Object.defineProperty(exports, "encodeFilter", { enumerable: true, get: function () { return utils_1.encodeFilter; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "10.0.0-beta.9",
+  "version": "10.0.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -26,18 +26,20 @@
     "test": "npm run-script typecheck",
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
-  "engines": {
-    "node": ">=8.9"
+  "dependencies": {
+    "@uxf/ui": "10.0.0",
+    "dayjs": "1.11.10",
+    "react-data-grid": "7.0.0-beta.39"
   },
   "peerDependencies": {
-    "@uxf/ui": "10.0.0-beta.9",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "dayjs": "^1.11.7"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
-  "dependencies": {
-    "react-data-grid": "7.0.0-beta.13"
+  "devDependencies": {
+    "@types/react": "18.2.27",
+    "@types/react-dom": "18.2.12",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
-  "devDependencies": {},
   "gitHead": "e4f21a15c3d50fb6614d70cdaf36685232de87e7"
 }

package/store/actions.d.ts

@@ -1,4 +1,4 @@
-import { RequestFilter, Response, SortDirection } from "../types";
+import { DataGridSortDir, RequestFilter, Response } from "../types";
 export declare const dataGridActions: {
     filter: (filterValue: RequestFilter) => {
         type: string;
@@ -34,10 +34,10 @@ export declare const dataGridActions: {
         type: string;
         search: string;
     };
-    sort: (columnName: string, direction: SortDirection) => {
+    sort: (columnName: string, direction: DataGridSortDir) => {
         type: string;
         columnName: string;
-        direction: SortDirection;
+        direction: DataGridSortDir;
     };
     sortClear: () => {
         type: string;

package/store/reducer.d.ts

@@ -1,5 +1,5 @@
 import { Reducer } from "react";
-import { Schema, Request, DataGridState } from "../types";
+import { DataGridState, Request, Schema } from "../types";
 export declare const getInitialState: (schema: Schema<any>, init?: Request | string) => DataGridState;
 export declare const reducer: Reducer<DataGridState, any>;
 export declare const debugReducer: Reducer<DataGridState, any>;

package/tailwindui/body-cell/body-cell-boolean.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyCellBoolean = void 0;
-const react_1 = __importDefault(require("react"));
 const checkbox_1 = require("@uxf/ui/checkbox");
+const react_1 = __importDefault(require("react"));
 const BodyCellBoolean = (props) => {
     if (typeof props.value !== "boolean") {
         return null;

package/tailwindui/body-cell/body-cell-date.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyCellDate = void 0;
-const react_1 = __importDefault(require("react"));
 const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importDefault(require("react"));
 const BodyCellDate = (props) => {
     if (typeof props.value !== "string") {
         return null;

package/tailwindui/body-cell/body-cell-datetime.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyCellDateTime = void 0;
-const react_1 = __importDefault(require("react"));
 const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importDefault(require("react"));
 const BodyCellDateTime = (props) => {
     if (typeof props.value !== "string") {
         return null;

package/tailwindui/body-cell/body-cell-email.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyCellEmail = void 0;
-const react_1 = __importDefault(require("react"));
 const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importDefault(require("react"));
 const BodyCellEmail = (props) => {
     if (typeof props.value !== "string") {
         return null;

package/tailwindui/body-cell/body-cell-phone.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyCellPhone = void 0;
-const react_1 = __importDefault(require("react"));
 const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importDefault(require("react"));
 const BodyCellPhone = (props) => {
     if (typeof props.value !== "string") {
         return null;

package/tailwindui/body-cell/body-cell-url.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyCellUrl = void 0;
-const react_1 = __importDefault(require("react"));
 const text_link_1 = require("@uxf/ui/text-link");
+const react_1 = __importDefault(require("react"));
 const BodyCellUrl = (props) => {
     if (typeof props.value !== "string") {
         return null;

package/tailwindui/body-cell/index.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyCells = void 0;
-const body_cell_default_1 = require("./body-cell-default");
 const body_cell_boolean_1 = require("./body-cell-boolean");
 const body_cell_date_1 = require("./body-cell-date");
 const body_cell_datetime_1 = require("./body-cell-datetime");
-const body_cell_to_one_1 = require("./body-cell-to-one");
-const body_cell_to_many_1 = require("./body-cell-to-many");
+const body_cell_default_1 = require("./body-cell-default");
 const body_cell_email_1 = require("./body-cell-email");
 const body_cell_phone_1 = require("./body-cell-phone");
+const body_cell_to_many_1 = require("./body-cell-to-many");
+const body_cell_to_one_1 = require("./body-cell-to-one");
 const body_cell_url_1 = require("./body-cell-url");
 exports.BodyCells = {
     boolean: body_cell_boolean_1.BodyCellBoolean,

package/tailwindui/components/action-cell-base.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionCellBase = exports.ActionCellWrapper = void 0;
-const react_1 = __importStar(require("react"));
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importStar(require("react"));
 const ActionCellWrapper = (props) => {
     const innerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -74,9 +74,11 @@ const Button = (props) => {
     return null;
 };
 const ActionCellBase = (props) => {
+    const onRemove = props.onRemove;
+    const handleRemove = onRemove ? () => onRemove(props.row, props.reload) : undefined;
     return (react_1.default.createElement(exports.ActionCellWrapper, null,
-        react_1.default.createElement(Button, { row: props.row, onClick: props.onRemove, getUrl: undefined, icon: "trash", title: "Smazat" }),
+        react_1.default.createElement(Button, { row: props.row, onClick: props.onOpen, getUrl: props.getOpenUrl, icon: "circle-info", title: "Detail" }),
         react_1.default.createElement(Button, { row: props.row, onClick: props.onEdit, getUrl: props.getEditUrl, icon: "pen", title: "Upravit" }),
-        react_1.default.createElement(Button, { row: props.row, onClick: props.onOpen, getUrl: props.getOpenUrl, icon: "circle-info", title: "Detail" })));
+        react_1.default.createElement(Button, { row: props.row, onClick: handleRemove, getUrl: undefined, icon: "trash", title: "Smazat" })));
 };
 exports.ActionCellBase = ActionCellBase;

package/tailwindui/components/drawer.js

@@ -4,17 +4,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
-const react_1 = __importDefault(require("react"));
-const icon_1 = require("@uxf/ui/icon");
+const react_1 = require("@floating-ui/react");
+const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
 const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+const react_2 = __importDefault(require("react"));
 const Drawer = (props) => {
-    return (react_1.default.createElement("main", { className: `uxf-data-grid__drawer uxf-data-grid__drawer--${props.open ? "open" : "closed"}` },
-        react_1.default.createElement("section", { className: `uxf-data-grid__drawer-body-wrapper ${props.open ? "uxf-data-grid__drawer-body-wrapper--open" : ""}` },
-            react_1.default.createElement("article", { className: "uxf-data-grid__drawer-body" },
-                react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: props.onClose, variant: "text", className: "uxf-data-grid__drawer-close-button" },
-                    react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge" })),
-                react_1.default.createElement("header", { className: "uxf-data-grid__drawer-header" }, props.title),
-                react_1.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children))),
-        react_1.default.createElement("section", { className: "uxf-data-grid__drawer-backdrop", onClick: props.onClose })));
+    const isMounted = (0, useIsMounted_1.useIsMounted)();
+    if (!isMounted) {
+        return null;
+    }
+    return (react_2.default.createElement(react_1.FloatingPortal, null,
+        react_2.default.createElement("div", { className: `uxf-data-grid__drawer uxf-data-grid__drawer--${props.open ? "open" : "closed"}` },
+            react_2.default.createElement("div", { className: `uxf-data-grid__drawer-body-wrapper ${props.open ? "uxf-data-grid__drawer-body-wrapper--open" : ""}` },
+                react_2.default.createElement("div", { className: "uxf-data-grid__drawer-body" },
+                    react_2.default.createElement(button_1.Button, { isIconButton: true, onClick: props.onClose, variant: "text", className: "uxf-data-grid__drawer-close-button" },
+                        react_2.default.createElement(icon_1.Icon, { name: "xmarkLarge" })),
+                    react_2.default.createElement("header", { className: "uxf-data-grid__drawer-header" }, props.title),
+                    react_2.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children))),
+            react_2.default.createElement("section", { className: "uxf-data-grid__drawer-backdrop", onClick: props.onClose }))));
 };
 exports.Drawer = Drawer;

package/tailwindui/components/no-rows-fallback.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoRowsFallback = void 0;
-const react_1 = __importDefault(require("react"));
 const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../utils");
 const NoRowsFallback = (props) => {
     return (react_1.default.createElement("div", { className: (0, utils_1.cx)("uxf-data-grid__fallback", props.loading && "is-loading", props.error && "is-error") }, props.loading ? (react_1.default.createElement(react_1.default.Fragment, null, "Na\u010D\u00EDt\u00E1m...")) : props.error ? (react_1.default.createElement(react_1.default.Fragment, null,

package/tailwindui/components/pagination-rows-per-page-select.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaginationRowsPerPageSelect = void 0;
-const react_1 = __importDefault(require("react"));
 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" },

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

@@ -24,18 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectRowCheckbox = void 0;
-const react_1 = __importStar(require("react"));
 const checkbox_1 = require("@uxf/ui/checkbox");
-const SelectRowComponent = (props, ref) => {
+const react_1 = __importStar(require("react"));
+const SelectRowComponent = (props) => {
     var _a;
     const handleChange = (value, e) => {
-        var _a;
         if (typeof value !== "undefined") {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            props.onChange(value, (_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.shiftKey);
+            const shiftKey = (e === null || e === void 0 ? void 0 : e.nativeEvent) && e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false;
+            props.onChange(value, shiftKey);
         }
     };
     return (react_1.default.createElement("div", { className: "uxf-data-grid__select-row-checkbox-wrapper" },
-        react_1.default.createElement(checkbox_1.Checkbox, { ref: ref, ...props, value: (_a = props.checked) !== null && _a !== void 0 ? _a : false, onChange: handleChange })));
+        react_1.default.createElement(checkbox_1.Checkbox, { ...props, value: (_a = props.checked) !== null && _a !== void 0 ? _a : false, onChange: handleChange })));
 };
 exports.SelectRowCheckbox = (0, react_1.forwardRef)(SelectRowComponent);

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedRowsToolbar = void 0;
-const react_1 = __importDefault(require("react"));
 const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
 const getText = (count) => {
     if (count === 1) {
         return "Vybrán 1 záznam";

package/tailwindui/components/toolbar-control.js

@@ -24,14 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarControl = void 0;
-const react_1 = __importStar(require("react"));
+const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const text_input_1 = require("@uxf/ui/text-input");
-const button_1 = require("@uxf/ui/button");
-const drawer_1 = require("./drawer");
 const toggle_1 = require("@uxf/ui/toggle");
+const react_1 = __importStar(require("react"));
 const actions_1 = require("../../store/actions");
+const utils_1 = require("../../utils");
 const show_1 = require("../show");
+const drawer_1 = require("./drawer");
 function Filters(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
         var _a, _b;
@@ -47,21 +48,38 @@ function Filters(props) {
     })));
 }
 function Columns(props) {
-    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: true, onChange: () => null })))));
+    const onHideColumn = (columnName) => {
+        var _a, _b;
+        (_a = props.onChangeHiddenColumns) === null || _a === void 0 ? void 0 : _a.call(props, [...((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), columnName]);
+    };
+    const onShowColumn = (columnName) => {
+        var _a, _b;
+        (_a = props.onChangeHiddenColumns) === null || _a === void 0 ? void 0 : _a.call(props, [...((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : [])].filter((v) => v !== columnName));
+    };
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => {
+        var _a;
+        return (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: !((_a = props.hiddenColumns) === null || _a === void 0 ? void 0 : _a.includes(column.name)), onChange: (value) => (value ? onShowColumn(column.name) : onHideColumn(column.name)) }));
+    })));
 }
 const ToolbarControl = (props) => {
     const [isFiltersOpen, setFiltersOpen] = (0, react_1.useState)(false);
     const [isColumnsOpen, setColumnsOpen] = (0, react_1.useState)(false);
+    const fulltextValue = props.state.request.search;
+    const filtersData = props.state.request.f;
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(show_1.Show, { when: props.showFulltext },
-            react_1.default.createElement(text_input_1.TextInput, { value: props.fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }) })),
-        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-filter" },
-            react_1.default.createElement(icon_1.Icon, { name: "filter" })),
+            react_1.default.createElement(text_input_1.TextInput, { value: fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }), label: "Vyhled\u00E1v\u00E1n\u00ED", hiddenLabel: true })),
+        react_1.default.createElement(show_1.Show, { when: props.schema.filters.length !== 0 },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-button" },
+                react_1.default.createElement(icon_1.Icon, { name: "filter" }))),
         react_1.default.createElement(show_1.Show, { when: props.onChangeHiddenColumns && props.hiddenColumns },
-            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F" },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F", className: "uxf-data-grid__plugin-button" },
                 react_1.default.createElement(icon_1.Icon, { name: "table-columns" }))),
+        react_1.default.createElement(show_1.Show, { when: props.onCsvDownload },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => { var _a; return (_a = props.onCsvDownload) === null || _a === void 0 ? void 0 : _a.call(props, (0, utils_1.createRequest)(props.state, props.schema.sort, props.schema.dir)); }, title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
+                react_1.default.createElement(icon_1.Icon, { name: "file-arrow-down" }))),
         react_1.default.createElement(drawer_1.Drawer, { open: isFiltersOpen, onClose: () => setFiltersOpen(false), title: "Filtry" },
-            react_1.default.createElement(Filters, { gridName: props.gridName, schema: props.schema, dispatch: props.dispatch, filtersData: props.filtersData, filterHandlers: props.filterHandlers, noBorder: props.noBorder })),
+            react_1.default.createElement(Filters, { gridName: props.gridName, schema: props.schema, dispatch: props.dispatch, filtersData: filtersData, filterHandlers: props.filterHandlers, noBorder: props.noBorder })),
         react_1.default.createElement(drawer_1.Drawer, { open: isColumnsOpen, onClose: () => setColumnsOpen(false), title: "Nastaven\u00ED sloupc\u016F" },
             react_1.default.createElement(Columns, { schema: props.schema, onChangeHiddenColumns: props.onChangeHiddenColumns, hiddenColumns: props.hiddenColumns }))));
 };

package/tailwindui/components/toolbar-customs.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarCustoms = void 0;
-const react_1 = __importDefault(require("react"));
 const button_1 = require("@uxf/ui/button");
 const button_list_1 = require("@uxf/ui/button-list");
+const react_1 = __importDefault(require("react"));
 const ToolbarCustoms = (props) => {
     if (!props.buttons) {
         return null;

package/tailwindui/components/toolbar-tabs.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarTabs = void 0;
-const react_1 = __importDefault(require("react"));
-const show_1 = require("../show");
-const utils_1 = require("../../utils");
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const modal_service_1 = require("@uxf/ui/modal/modal-service");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../utils");
+const show_1 = require("../show");
 function Tab(props) {
     return (react_1.default.createElement("button", { className: (0, utils_1.cx)("uxf-data-grid__toolbar-tab", props.isActive && "is-active"), onClick: props.onClick }, props.title));
 }

package/tailwindui/data-grid.d.ts

@@ -1,5 +1,5 @@
-import { BaseGridType, DataGridBaseProps, UIComponents } from "../types";
 import React from "react";
+import { BaseGridType, DataGridBaseProps, UIComponents } from "../types";
 export type DataGridProps<GridType extends BaseGridType, R> = DataGridBaseProps<GridType, R> & {
     ui?: Partial<UIComponents<GridType, R>>;
 };