@uxf/data-grid 11.45.1 → 11.47.0

package/README.md

@@ -34,6 +34,7 @@ yarn upgrade @uxf/core@latest @uxf/ui@latest @uxf/data-grid@latest
 @import url("@uxf/ui/pagination/pagination.css");
 @import url("@uxf/ui/select/select.css");
 @import url("@uxf/ui/toggle/toggle.css");
+@import url("@uxf/ui/tabs/tabs.css");
 
 /* must be after component css files */
 @import url("@uxf/data-grid/styles.css");
@@ -79,11 +80,11 @@ import { useDataGridFetching } from "@uxf/data-grid/use-data-grid-fetching";
 
 function BasicExample() {
     const { state, actions } = useDataGridControl({ schema });
-    const { isLoading, error, data, onReload } = useDataGridFetching(loader, schema, "grid-name", state);
+    const { isLoading, error, data, reload } = useDataGridFetching(loader, schema, "grid-name", state);
 
     return (
         <DataGrid
-            onReload={onReload}
+            reload={reload}
             state={state}
             actions={actions}
             data={data}

package/_components/drawer.d.ts

@@ -1,9 +1,8 @@
 import React, { ReactNode } from "react";
 interface DrawerProps {
     title?: ReactNode;
-    children?: ReactNode;
-    isOpen: boolean;
     onClose: () => void;
+    children?: ReactNode;
 }
 export declare function Drawer(props: DrawerProps): React.JSX.Element | null;
 export {};

package/_components/drawer.js

@@ -4,18 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = Drawer;
-const react_1 = require("@floating-ui/react");
 const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
-const dialog_1 = require("@uxf/ui/dialog");
 const modal_header_1 = require("@uxf/ui/modal-header");
-const react_2 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 function Drawer(props) {
     const isMounted = (0, use_is_mounted_1.useIsMounted)();
     if (!isMounted) {
         return null;
     }
-    return (react_2.default.createElement(react_1.FloatingPortal, null,
-        react_2.default.createElement(dialog_1.Dialog, { className: "uxf-dg-modal", onClose: props.onClose, open: props.isOpen, variant: "drawer-right" },
-            react_2.default.createElement(modal_header_1.ModalHeader, { onClose: props.onClose, title: props.title }),
-            react_2.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(modal_header_1.ModalHeader, { onClose: props.onClose, title: props.title }),
+        react_1.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children)));
 }

package/data-grid-custom-example.stories.js

@@ -35,7 +35,7 @@ function DataGrid() {
     const toolbarCustomButtons = [];
     /** END implement me */
     const control = (0, use_data_grid_control_1.useDataGridControl)({ schema });
-    const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
+    const { isLoading, error, data, reload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
         loader: loader_1.loader,
         schema,
         state: control.state,
@@ -49,10 +49,10 @@ function DataGrid() {
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: toolbarCustomButtons })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: isLoading }),
             react_1.default.createElement(filter_list_1.DataGridFilterList, { ...control, filterHandlers: filterHandlers, schema: schema }),
-            react_1.default.createElement(table_v2_1.DataGridTableV2, { ...control, actionCell: actionCell, bodyCells: bodyCells, data: (_a = data === null || data === void 0 ? void 0 : data.result) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, error: error, isLoading: isLoading, onReload: onReload, schema: schema }),
+            react_1.default.createElement(table_v2_1.DataGridTableV2, { ...control, actionCell: actionCell, bodyCells: bodyCells, data: (_a = data === null || data === void 0 ? void 0 : data.result) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, error: error, isLoading: isLoading, reload: reload, schema: schema }),
             react_1.default.createElement(footer_1.DataGridFooter, null,
                 react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { ...control }),
                 react_1.default.createElement(row_counts_1.DataGridRowCounts, { ...control, count: (_b = data === null || data === void 0 ? void 0 : data.count) !== null && _b !== void 0 ? _b : 0, totalCount: (_c = data === null || data === void 0 ? void 0 : data.totalCount) !== null && _c !== void 0 ? _c : 0 }),
                 react_1.default.createElement(pagination_1.DataGridPagination, { ...control, count: (_d = data === null || data === void 0 ? void 0 : data.count) !== null && _d !== void 0 ? _d : 0 }))),
-        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { ...control })));
+        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { ...control, reload: reload })));
 }

package/data-grid-v2.js

@@ -33,10 +33,10 @@ function DataGridV2(props) {
                 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_v2_1.DataGridTableV2, { 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.isRowSelectable, keyExtractor: props.keyExtractor, onReload: props.onReload, rowClass: props.rowClass, rowHeight: props.rowHeight, schema: props.schema, state: props.state }),
+            react_1.default.createElement(table_v2_1.DataGridTableV2, { 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.isRowSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowClass: props.rowClass, 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, 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 })));
 }

package/data-grid-v2.stories.js

@@ -80,13 +80,13 @@ const FILTER_BEHAVIOR_OPTIONS = [
 function Default() {
     const [filterBehavior, setFilterBehavior] = (0, react_1.useState)("filtersPerTab");
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
-    const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
+    const { isLoading, error, data, reload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
         loader: loader_1.loader,
         schema: schema_1.schema,
         state,
     });
     return (react_1.default.createElement("div", { className: "p-10" },
         react_1.default.createElement(radio_group_1.RadioGroup, { label: "Chov\u00E1n\u00ED p\u0159ep\u00EDn\u00E1n\u00ED tab\u016F", name: "filterBehavior", onChange: (value) => setFilterBehavior(value), options: FILTER_BEHAVIOR_OPTIONS, value: filterBehavior }),
-        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, rowHeight: "auto", schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, reload: reload, rowHeight: "auto", schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/data-grid.js

@@ -33,10 +33,10 @@ function DataGrid(props) {
                 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.isRowSelectable, keyExtractor: props.keyExtractor, onReload: props.onReload, rowClass: props.rowClass, rowHeight: props.rowHeight === "auto" ? undefined : props.rowHeight, 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.isRowSelectable, keyExtractor: props.keyExtractor, reload: props.reload, rowClass: props.rowClass, rowHeight: props.rowHeight === "auto" ? undefined : 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, 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 })));
 }

package/data-grid.stories.js

@@ -94,13 +94,13 @@ function Default() {
             },
         },
     });
-    const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
+    const { isLoading, error, data, reload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
         loader: loader_1.loader,
         schema: schema_1.schema,
         state,
     });
     return (react_1.default.createElement("div", { className: "p-10" },
         react_1.default.createElement(radio_group_1.RadioGroup, { label: "Chov\u00E1n\u00ED p\u0159ep\u00EDn\u00E1n\u00ED tab\u016F", name: "filterBehavior", onChange: (value) => setFilterBehavior(value), options: FILTER_BEHAVIOR_OPTIONS, value: filterBehavior, variant: "row" }),
-        react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, reload: reload, schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/filter-handler/date.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,25 +31,52 @@ const is_nil_1 = require("@uxf/core/utils/is-nil");
 const chip_1 = require("@uxf/ui/chip");
 const date_picker_input_1 = require("@uxf/ui/date-picker-input");
 const dayjs_1 = __importDefault(require("dayjs"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const filterHandler = {
     Input(props) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const [date, setDate] = (0, react_1.useState)();
         const onChangeFrom = (value) => {
-            var _a;
-            return (0, is_nil_1.isNil)(value) && (0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.to)
-                ? props.onChange(undefined)
-                : props.onChange({ ...props.value, from: value !== null && value !== void 0 ? value : undefined });
+            var _a, _b;
+            if ((0, is_nil_1.isNil)(value) && (0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.to)) {
+                props.onChange(undefined);
+                setDate(null);
+            }
+            else {
+                if ((0, dayjs_1.default)(value, date_picker_input_1.OUTPUT_DATE_FORMAT, true).isValid()) {
+                    props.onChange({ ...props.value, from: value !== null && value !== void 0 ? value : undefined });
+                    setDate(null);
+                }
+                else {
+                    setDate({ from: value, to: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.to) || null });
+                    if ((0, is_nil_1.isNil)(value)) {
+                        props.onChange({ ...props.value, from: undefined });
+                    }
+                }
+            }
         };
         const onChangeTo = (value) => {
-            var _a;
-            return (0, is_nil_1.isNil)(value) && (0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.from)
-                ? props.onChange(undefined)
-                : props.onChange({ ...props.value, to: value !== null && value !== void 0 ? value : undefined });
+            var _a, _b;
+            if ((0, is_nil_1.isNil)(value) && (0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.from)) {
+                props.onChange(undefined);
+                setDate(null);
+            }
+            else {
+                if ((0, dayjs_1.default)(value, date_picker_input_1.OUTPUT_DATE_FORMAT, true).isValid()) {
+                    props.onChange({ ...props.value, to: value !== null && value !== void 0 ? value : undefined });
+                    setDate(null);
+                }
+                else {
+                    setDate({ from: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.from) || null, to: value });
+                    if ((0, is_nil_1.isNil)(value)) {
+                        props.onChange({ ...props.value, to: undefined });
+                    }
+                }
+            }
         };
         return (react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--date" },
-            react_1.default.createElement(date_picker_input_1.DatePickerInput, { isClearable: true, label: `${props.filter.label} (od)`, maxDate: (_a = props.value) === null || _a === void 0 ? void 0 : _a.to, name: props.filter.name, onChange: onChangeFrom, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder, value: (_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c.from) !== null && _d !== void 0 ? _d : null }),
-            react_1.default.createElement(date_picker_input_1.DatePickerInput, { isClearable: true, label: `${props.filter.label} (do)`, minDate: (_e = props.value) === null || _e === void 0 ? void 0 : _e.from, name: props.filter.name, onChange: onChangeTo, placeholder: (_f = props.filter.config) === null || _f === void 0 ? void 0 : _f.placeholder, value: (_h = (_g = props.value) === null || _g === void 0 ? void 0 : _g.to) !== null && _h !== void 0 ? _h : null })));
+            react_1.default.createElement(date_picker_input_1.DatePickerInput, { isClearable: true, label: `${props.filter.label} (od)`, maxDate: (_a = props.value) === null || _a === void 0 ? void 0 : _a.to, name: props.filter.name, onChange: onChangeFrom, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder, value: (_e = (_c = date === null || date === void 0 ? void 0 : date.from) !== null && _c !== void 0 ? _c : (_d = props.value) === null || _d === void 0 ? void 0 : _d.from) !== null && _e !== void 0 ? _e : null }),
+            react_1.default.createElement(date_picker_input_1.DatePickerInput, { isClearable: true, label: `${props.filter.label} (do)`, minDate: (_f = props.value) === null || _f === void 0 ? void 0 : _f.from, name: props.filter.name, onChange: onChangeTo, placeholder: (_g = props.filter.config) === null || _g === void 0 ? void 0 : _g.placeholder, value: (_k = (_h = date === null || date === void 0 ? void 0 : date.to) !== null && _h !== void 0 ? _h : (_j = props.value) === null || _j === void 0 ? void 0 : _j.to) !== null && _k !== void 0 ? _k : null })));
     },
     ListItem: function (props) {
         var _a, _b;

package/filters-button/filters-button.js

@@ -1,44 +1,27 @@
 "use strict";
 "use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridFiltersButton = DataGridFiltersButton;
 const button_1 = require("@uxf/ui/button");
+const dialog_1 = require("@uxf/ui/dialog/dialog");
 const icon_1 = require("@uxf/ui/icon");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const drawer_1 = require("../_components/drawer");
 const filters_1 = require("../filters");
 function DataGridFiltersButton(props) {
-    var _a;
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)();
     if (props.schema.filters.length === 0) {
         return null;
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__plugin-button", isIconButton: true, onClick: () => setIsOpen(true), size: "sm", title: "Filtrovat", variant: "secondary" },
+        react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__plugin-button", isIconButton: true, onClick: () => {
+                var _a;
+                return openDialog(react_1.default.createElement(drawer_1.Drawer, { onClose: closeDialog, title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Filtrování" },
+                    react_1.default.createElement(filters_1.DataGridFilters, { actions: props.actions, filterHandlers: props.filterHandlers, schema: props.schema, state: props.state })));
+            }, size: "sm", title: "Filtrovat", variant: "secondary" },
             react_1.default.createElement(icon_1.Icon, { name: "filter" })),
-        react_1.default.createElement(drawer_1.Drawer, { isOpen: isOpen, onClose: () => setIsOpen(false), title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Filtrování" },
-            react_1.default.createElement(filters_1.DataGridFilters, { actions: props.actions, filterHandlers: props.filterHandlers, schema: props.schema, state: props.state }))));
+        react_1.default.createElement(DialogProvider, { className: "uxf-dg-modal", variant: "drawer-right" })));
 }

package/hidden-columns-button/hidden-columns-button.js

@@ -1,41 +1,24 @@
 "use strict";
 "use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridHiddenColumnsButton = DataGridHiddenColumnsButton;
 const button_1 = require("@uxf/ui/button");
+const dialog_1 = require("@uxf/ui/dialog/dialog");
 const icon_1 = require("@uxf/ui/icon");
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const drawer_1 = require("../_components/drawer");
 const hidden_columns_1 = require("../hidden-columns");
 function DataGridHiddenColumnsButton(props) {
-    var _a;
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__plugin-button", isIconButton: true, onClick: () => setIsOpen(true), size: "sm", title: "Nastaven\u00ED sloupc\u016F", variant: "secondary" },
+        react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__plugin-button", isIconButton: true, onClick: () => {
+                var _a;
+                return openDialog(react_1.default.createElement(drawer_1.Drawer, { onClose: closeDialog, title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Sloupce" },
+                    react_1.default.createElement(hidden_columns_1.DataGridHiddenColumns, { actions: props.actions, schema: props.schema, state: props.state })));
+            }, size: "sm", title: "Nastaven\u00ED sloupc\u016F", variant: "secondary" },
             react_1.default.createElement(icon_1.Icon, { name: "table-columns" })),
-        react_1.default.createElement(drawer_1.Drawer, { isOpen: isOpen, onClose: () => setIsOpen(false), title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Sloupce" },
-            react_1.default.createElement(hidden_columns_1.DataGridHiddenColumns, { actions: props.actions, schema: props.schema, state: props.state }))));
+        react_1.default.createElement(DialogProvider, { className: "uxf-dg-modal", variant: "drawer-right" })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.45.1",
+    "version": "11.47.0",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -31,9 +31,9 @@
         "typecheck": "tsc --noEmit --skipLibCheck"
     },
     "dependencies": {
-        "@uxf/core": "11.45.0",
-        "@uxf/core-react": "11.45.0",
-        "@uxf/ui": "11.45.1",
+        "@uxf/core": "11.47.0",
+        "@uxf/core-react": "11.47.0",
+        "@uxf/ui": "11.47.0",
         "dayjs": "1.11.13",
         "deepmerge": "4.3.1",
         "fast-glob": "3.3.2",

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

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

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

@@ -26,6 +26,6 @@ function DataGridSelectedRowsToolbar(props) {
         react_1.default.createElement("div", { className: "uxf-data-grid__selected-rows-toolbar" },
             react_1.default.createElement("p", null, getText(props.state.selectedRows.length)),
             react_1.default.createElement("div", { className: "uxf-data-grid__selected-rows-toolbar-actions" },
-                props.Actions && (react_1.default.createElement(props.Actions, { actions: props.actions, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); }, state: props.state })),
+                props.Actions && (react_1.default.createElement(props.Actions, { actions: props.actions, reload: props.reload, state: props.state })),
                 react_1.default.createElement(button_1.Button, { onClick: () => props.actions.setSelectedRows([]) }, "Zru\u0161it v\u00FDb\u011Br")))));
 }

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

@@ -33,11 +33,12 @@ const use_data_grid_control_1 = require("../use-data-grid-control");
 const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
+    const reload = () => new Promise(() => null);
     (0, react_1.useEffect)(() => {
         actions.setSelectedRows([{ id: 1 }, { id: 2 }]);
     }, [actions]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { Actions: () => (react_1.default.createElement(button_1.Button, { isIconButton: true },
-                react_1.default.createElement(icon_1.Icon, { name: "camera" }))), actions: actions, state: state }),
+                react_1.default.createElement(icon_1.Icon, { name: "camera" }))), actions: actions, reload: reload, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/styles.css

@@ -148,7 +148,11 @@
         &--datetime,
         &--interval {
             display: grid;
-            gap: theme("spacing.4");
+            gap: theme("spacing.2") theme("spacing.4");
+        }
+
+        &--date,
+        &--interval {
             grid-template-columns: repeat(2, 1fr);
         }
     }

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

@@ -28,7 +28,7 @@ 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 { onReload, schema, isRowSelectable, bodyCells, actionCell } = props;
+    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;
@@ -66,7 +66,7 @@ function useReactDataGridColumns(props, state) {
                             label: p.column.name,
                             sort: p.column.sortable,
                             type: columnType,
-                        }, reload: () => onReload === null || onReload === void 0 ? void 0 : onReload(), row: p.row, value: p.row[p.column.key] }));
+                        }, reload: reload, row: p.row, value: p.row[p.column.key] }));
                 },
             });
         }
@@ -78,9 +78,9 @@ function useReactDataGridColumns(props, state) {
                 headerCellClass: "uxf-data-grid__action-cell",
                 cellClass: "uxf-data-grid__action-cell",
                 width: actionCell.width,
-                renderCell: (p) => react_1.default.createElement(actionCell.Component, { reload: async () => onReload === null || onReload === void 0 ? void 0 : onReload(), row: p.row }),
+                renderCell: (p) => react_1.default.createElement(actionCell.Component, { reload: reload, row: p.row }),
             });
         }
         return columns;
-    }, [userConfigColumns, actionCell, schema.columns, bodyCells, isRowSelectable, onReload, state.userConfig.columns]);
+    }, [userConfigColumns, actionCell, schema.columns, bodyCells, isRowSelectable, reload, state.userConfig.columns]);
 }

package/table/table.stories.js

@@ -13,7 +13,8 @@ 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, schema: schema_1.schema, state: state }),
+        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

@@ -9,7 +9,7 @@ export interface DataGridTableProps<Row> extends DataGridControl {
     data: Row[];
     isLoading?: boolean;
     error?: any | Nullish;
-    onReload?: () => void;
+    reload: () => Promise<any>;
     rowHeight?: number | ((row: Row) => number);
     headerRowHeight?: number;
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;

package/table-v2/table-v2.js

@@ -69,7 +69,7 @@ function DataGridTableV2(props) {
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 (_d = (_b = (_a = props.bodyCells) === null || _a === void 0 ? void 0 : _a[column.type]) !== null && _b !== void 0 ? _b : (_c = props.bodyCells) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : DefaultBodyCell;
                 return (react_1.default.createElement(components_1.Table.Cell, { column: column, key: column.name },
-                    react_1.default.createElement(BodyCell, { column: column, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); }, row: row, value: row[column.name] })));
+                    react_1.default.createElement(BodyCell, { column: column, reload: props.reload, row: row, value: row[column.name] })));
             }),
-            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(props.actionCell.Component, { reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); }, row: row }))))))));
+            (0, is_not_nil_1.isNotNil)(props.actionCell) && react_1.default.createElement(props.actionCell.Component, { reload: props.reload, row: row })))))));
 }

package/table-v2/table-v2.stories.js

@@ -14,8 +14,9 @@ const use_data_grid_control_1 = require("../use-data-grid-control");
 const table_v2_1 = require("./table-v2");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema, isDebug: true });
+    const reload = () => new Promise(() => null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: actions, schema: schema_1.schema, state: state }),
-        react_1.default.createElement(table_v2_1.DataGridTableV2, { actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") }, actions: actions, bodyCells: body_cell_1.BodyCells, data: data_1.data, error: undefined, isLoading: true, isRowSelectable: true, schema: schema_1.schema, state: state }),
+        react_1.default.createElement(table_v2_1.DataGridTableV2, { actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") }, 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-v2/types.d.ts

@@ -7,7 +7,7 @@ export interface DataGridTableProps<Row> extends DataGridControl {
     data: Row[];
     isLoading?: boolean;
     error?: any | Nullish;
-    onReload?: () => void;
+    reload: () => Promise<any>;
     rowHeight?: number | ((row: Row) => number) | "auto";
     headerRowHeight?: number;
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;

package/toolbar-customs/toolbar-customs.d.ts

@@ -1,10 +1,12 @@
 import { ButtonVariant } from "@uxf/ui/button";
+import { NextLink } from "@uxf/ui/utils/next-link";
 import React, { ReactElement } from "react";
 export interface DataGridToolbarCustomsProps {
     buttons?: {
         label: string | ReactElement;
         onClick?: () => void;
         href?: string;
+        as?: NextLink | "a";
         variant?: ButtonVariant;
     }[];
 }

package/toolbar-customs/toolbar-customs.js

@@ -15,6 +15,6 @@ function DataGridToolbarCustoms(props) {
     }
     const firstButton = props.buttons.at(0);
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs" },
-        react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-mobile" }, (0, is_not_nil_1.isNotNil)(firstButton) ? (react_1.default.createElement(button_1.Button, { href: firstButton.href, onClick: firstButton.onClick, size: "sm", variant: firstButton.variant }, firstButton.label)) : (react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, openButton: { variant: "secondary" }, size: "sm", visibleButtonsCount: 1 }))),
-        react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-desktop" }, props.buttons.map((button, index) => (react_1.default.createElement(button_1.Button, { href: button.href, key: index, onClick: button.onClick, size: "sm", variant: button.variant }, button.label))))));
+        react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-mobile" }, (0, is_not_nil_1.isNotNil)(firstButton) ? (react_1.default.createElement(button_1.Button, { as: firstButton.as, href: firstButton.href, onClick: firstButton.onClick, size: "sm", variant: firstButton.variant }, firstButton.label)) : (react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, openButton: { variant: "secondary" }, size: "sm", visibleButtonsCount: 1 }))),
+        react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-desktop" }, props.buttons.map((button, index) => (react_1.default.createElement(button_1.Button, { as: button.as, href: button.href, key: index, onClick: button.onClick, size: "sm", variant: button.variant }, button.label))))));
 }

package/types/components.d.ts

@@ -2,7 +2,7 @@ import { ComponentType, FC } from "react";
 import { BaseGridType, Columns, Filter } from "./schema";
 export interface ActionCellProps<R> {
     row: R;
-    reload: () => void;
+    reload: () => Promise<any>;
 }
 export type ActionCellComponent<R> = FC<ActionCellProps<R>>;
 export type DataGridActionCell<Row> = {
@@ -13,7 +13,7 @@ export interface BodyCellProps<C, R> {
     value: any;
     column: C;
     row: R;
-    reload: () => void;
+    reload: () => Promise<any>;
 }
 export type BodyCellComponent<C extends BaseGridType["columns"], R> = ComponentType<BodyCellProps<Columns<C>, R>>;
 export type BodyCellComponents<C, R> = {

package/types/core.d.ts

@@ -4,7 +4,7 @@ export type KeyExtractor = (row: ResultItem) => number;
 export type CsvDownloadHandler = (request: Request) => void;
 export type Loader = (gridName: string | undefined, request: Request, encodedRequest: string) => Promise<Response>;
 export type CallbackRef = {
-    reload: () => Promise<void>;
+    reload: () => Promise<any>;
 };
 export type Config<C extends BaseGridType["columns"]> = {
     columns: Partial<{

package/use-data-grid-fetching/use-data-grid-fetching.d.ts

@@ -12,7 +12,7 @@ export interface DataGridFetchingResult<Row> {
     isLoading: boolean;
     error?: any;
     data: Response<Row> | null;
-    onReload: () => void;
+    reload: () => Promise<any>;
 }
 export interface UseDataGridFetchingConfig {
     loader?: Loader;

package/use-data-grid-fetching/use-data-grid-fetching.js

@@ -14,7 +14,7 @@ function useDataGridFetching(config) {
         const stateRequest = JSON.parse(stringStateRequest);
         const request = (0, utils_1.createRequest)(stateRequest, { isWithTabCounts: config.isWithTabCounts });
         setIsLoading(true);
-        loader(config.schema.name, request, (0, utils_1.encodeFilter)(request))
+        return loader(config.schema.name, request, (0, utils_1.encodeFilter)(request))
             .then((response) => {
             setData(response);
             setError(null);
@@ -35,6 +35,6 @@ function useDataGridFetching(config) {
         data,
         isLoading,
         error,
-        onReload: reload,
+        reload,
     };
 }