@uxf/data-grid 11.19.3 → 11.21.0

package/README.md

@@ -16,14 +16,23 @@ yarn upgrade @uxf/core@latest @uxf/ui@latest @uxf/data-grid@latest
 @import url("tailwindcss/components.css");
 @import url("@uxf/data-grid/styles.css");
 @import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/button-list/button-list.css");
+@import url("@uxf/ui/calendar/calendar.css");
+@import url("@uxf/ui/checkbox/checkbox.css");
+@import url("@uxf/ui/chip/chip.css");
 @import url("@uxf/ui/dropdown/dropdown.css");
-@import url("@uxf/ui/form-component/form-component.css");
 @import url("@uxf/ui/icon/icon.css");
-@import url("@uxf/ui/input/input.css");
-@import url("@uxf/ui/input/input-basic.css");
 @import url("@uxf/ui/label/label.css");
+@import url("@uxf/ui/form-component/form-component.css");
+@import url("@uxf/ui/input/input-basic.css");
+@import url("@uxf/ui/input/input.css");
+@import url("@uxf/ui/_input-with-popover/input-with-popover.css");
+@import url("@uxf/ui/combobox/combobox.css");
+@import url("@uxf/ui/multi-select/multi-select.css");
+@import url("@uxf/ui/multi-combobox/multi-combobox.css");
 @import url("@uxf/ui/pagination/pagination.css");
-@import url("@uxf/ui/_select-base/select-base.css");
+@import url("@uxf/ui/select/select.css");
+@import url("@uxf/ui/toggle/toggle.css");
 ```
 
 ## State and actions of data-grid
@@ -80,4 +89,4 @@ function BasicExample() {
         />
     );
 }
-```
+```

package/_components/drawer.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
 const react_1 = require("@floating-ui/react");
-const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_2 = __importDefault(require("react"));
 const Drawer = (props) => {
-    const isMounted = (0, useIsMounted_1.useIsMounted)();
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
     if (!isMounted) {
         return null;
     }

package/components.d.ts

@@ -1,4 +1,5 @@
 import * as dataGridStories from "./data-grid.stories";
+import * as dataGridCustomExampleStories from "./data-grid-custom-example.stories";
 import * as exportButtonStories from "./export-button/export-button.stories";
 import * as filterListStories from "./filter-list/filter-list.stories";
 import * as filtersStories from "./filters/filters.stories";
@@ -20,6 +21,10 @@ export declare const components: {
         readonly title: "DataGrid";
         readonly stories: typeof dataGridStories;
     };
+    readonly "data-grid-custom-example": {
+        readonly title: "DataGridCustomExample";
+        readonly stories: typeof dataGridCustomExampleStories;
+    };
     readonly "export-button": {
         readonly title: "ExportButton";
         readonly stories: typeof exportButtonStories;

package/components.js

@@ -26,6 +26,7 @@ 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 exportButtonStories = __importStar(require("./export-button/export-button.stories"));
 const filterListStories = __importStar(require("./filter-list/filter-list.stories"));
 const filtersStories = __importStar(require("./filters/filters.stories"));
@@ -47,6 +48,10 @@ exports.components = {
         title: "DataGrid",
         stories: dataGridStories
     },
+    "data-grid-custom-example": {
+        title: "DataGridCustomExample",
+        stories: dataGridCustomExampleStories
+    },
     "export-button": {
         title: "ExportButton",
         stories: exportButtonStories

package/data-grid-custom-example.stories.d.ts

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

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

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = void 0;
+const react_1 = __importDefault(require("react"));
+const loader_1 = require("./_story-utils/loader");
+const schema_1 = require("./_story-utils/schema");
+const body_cell_1 = require("./body-cell");
+const filter_handler_1 = require("./filter-handler");
+const filter_list_1 = require("./filter-list");
+const footer_1 = require("./footer");
+const linear_progress_1 = require("./linear-progress");
+const pagination_1 = require("./pagination");
+const root_1 = require("./root");
+const row_counts_1 = require("./row-counts");
+const rows_per_page_select_1 = require("./rows-per-page-select");
+const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
+const table_1 = require("./table");
+const toolbar_1 = require("./toolbar");
+const toolbar_control_1 = require("./toolbar-control");
+const toolbar_customs_1 = require("./toolbar-customs");
+const toolbar_tabs_1 = require("./toolbar-tabs");
+const use_data_grid_control_1 = require("./use-data-grid-control");
+const use_data_grid_fetching_1 = require("./use-data-grid-fetching");
+function DataGrid() {
+    var _a, _b, _c, _d;
+    /** implement me - can be given by props */
+    const schema = schema_1.schema;
+    const filterHandlers = filter_handler_1.defaultFilterHandlers;
+    const bodyCells = body_cell_1.BodyCells;
+    const actionCell = undefined;
+    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)({
+        loader: loader_1.loader,
+        schema,
+        state: control.state,
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(root_1.DataGridRoot, null,
+            react_1.default.createElement(toolbar_1.DataGridToolbar, null,
+                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { ...control, schema: schema }),
+                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { ...control, schema: schema, filterHandlers: filterHandlers }),
+                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, schema: schema, filterHandlers: filterHandlers }),
+            react_1.default.createElement(table_1.DataGridTable, { ...control, schema: schema, data: (_a = data === null || data === void 0 ? void 0 : data.result) !== null && _a !== void 0 ? _a : [], isLoading: isLoading, error: error, bodyCells: bodyCells, actionCell: actionCell, onReload: onReload }),
+            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 })));
+}
+exports.DataGrid = DataGrid;

package/data-grid.js

@@ -4,18 +4,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGrid = void 0;
-const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const body_cell_1 = require("./body-cell");
 const filter_handler_1 = require("./filter-handler");
 const filter_list_1 = require("./filter-list");
+const footer_1 = require("./footer");
 const linear_progress_1 = require("./linear-progress");
 const pagination_1 = require("./pagination");
+const root_1 = require("./root");
 const row_counts_1 = require("./row-counts");
 const rows_per_page_select_1 = require("./rows-per-page-select");
 const selected_rows_toolbar_1 = require("./selected-rows-toolbar");
 const table_1 = require("./table");
 const no_rows_fallback_1 = require("./table/no-rows-fallback");
+const toolbar_1 = require("./toolbar");
 const toolbar_control_1 = require("./toolbar-control");
 const toolbar_customs_1 = require("./toolbar-customs");
 const toolbar_tabs_1 = require("./toolbar-tabs");
@@ -24,18 +26,18 @@ const DefaultSelectedRowsToolbarActions = () => null;
 function DataGrid(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid", props.noBorder && classes_1.NO_BORDER_CLASS, props.className) },
-            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__toolbar", props.noBorder && classes_1.NO_BORDER_CLASS) },
-                react_1.default.createElement(toolbar_tabs_1.ToolbarTabs, { state: props.state, actions: props.actions, schema: props.schema }),
-                react_1.default.createElement(toolbar_control_1.ToolbarControl, { state: props.state, actions: props.actions, gridName: props.gridName, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, schema: props.schema, onCsvDownload: props.onCsvDownload }),
-                react_1.default.createElement(toolbar_customs_1.ToolbarCustoms, { buttons: props.customActions })),
-            react_1.default.createElement(linear_progress_1.LinearProgress, { isLoading: props.isLoading }),
-            react_1.default.createElement(filter_list_1.FilterList, { state: props.state, actions: props.actions, schema: props.schema, gridName: props.gridName, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, className: props.noBorder ? classes_1.NO_BORDER_CLASS : undefined }),
-            react_1.default.createElement(table_1.Table, { state: props.state, actions: props.actions, schema: props.schema, data: (_d = (_c = props.data) === null || _c === void 0 ? void 0 : _c.result) !== null && _d !== void 0 ? _d : [], isLoading: props.isLoading, error: props.error, rowClass: props.rowClass, keyExtractor: props.keyExtractor, rowHeight: props.rowHeight, headerRowHeight: props.headerRowHeight, bodyCells: (_e = props.bodyCells) !== null && _e !== void 0 ? _e : body_cell_1.BodyCells, NoRowsFallback: (_f = props.NoRowsFallback) !== null && _f !== void 0 ? _f : no_rows_fallback_1.NoRowsFallback, actionCell: props.actionCell, onReload: props.onReload, isRowSelectable: props.isRowSelectable }),
-            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__footer", props.noBorder && classes_1.NO_BORDER_CLASS) },
-                react_1.default.createElement(rows_per_page_select_1.RowsPerPageSelect, { state: props.state, actions: props.actions }),
-                react_1.default.createElement(row_counts_1.RowCounts, { state: props.state, count: (_h = (_g = props.data) === null || _g === void 0 ? void 0 : _g.count) !== null && _h !== void 0 ? _h : 0, 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.Pagination, { state: props.state, actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0 }))),
-        react_1.default.createElement(selected_rows_toolbar_1.SelectedRowsToolbar, { state: props.state, actions: props.actions, Actions: (_o = props.SelectedRowsToolbarActions) !== null && _o !== void 0 ? _o : DefaultSelectedRowsToolbarActions })));
+        react_1.default.createElement(root_1.DataGridRoot, { noBorder: props.noBorder, className: props.className },
+            react_1.default.createElement(toolbar_1.DataGridToolbar, { noBorder: props.noBorder },
+                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { state: props.state, actions: props.actions, schema: props.schema }),
+                react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { state: props.state, actions: props.actions, schema: props.schema, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, onCsvDownload: props.onCsvDownload }),
+                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, { state: props.state, actions: props.actions, schema: props.schema, filterHandlers: (_b = props.filterHandlers) !== null && _b !== void 0 ? _b : filter_handler_1.defaultFilterHandlers, className: props.noBorder ? classes_1.NO_BORDER_CLASS : undefined }),
+            react_1.default.createElement(table_1.DataGridTable, { state: props.state, actions: props.actions, schema: props.schema, data: (_d = (_c = props.data) === null || _c === void 0 ? void 0 : _c.result) !== null && _d !== void 0 ? _d : [], isLoading: props.isLoading, error: props.error, rowClass: props.rowClass, keyExtractor: props.keyExtractor, rowHeight: props.rowHeight, headerRowHeight: props.headerRowHeight, bodyCells: (_e = props.bodyCells) !== null && _e !== void 0 ? _e : body_cell_1.BodyCells, NoRowsFallback: (_f = props.NoRowsFallback) !== null && _f !== void 0 ? _f : no_rows_fallback_1.NoRowsFallback, actionCell: props.actionCell, onReload: props.onReload, isRowSelectable: props.isRowSelectable }),
+            react_1.default.createElement(footer_1.DataGridFooter, { noBorder: props.noBorder },
+                react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { state: props.state, actions: props.actions }),
+                react_1.default.createElement(row_counts_1.DataGridRowCounts, { state: props.state, count: (_h = (_g = props.data) === null || _g === void 0 ? void 0 : _g.count) !== null && _h !== void 0 ? _h : 0, 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, { state: props.state, actions: props.actions, count: (_m = (_l = props.data) === null || _l === void 0 ? void 0 : _l.count) !== null && _m !== void 0 ? _m : 0 }))),
+        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { state: props.state, actions: props.actions, Actions: (_o = props.SelectedRowsToolbarActions) !== null && _o !== void 0 ? _o : DefaultSelectedRowsToolbarActions })));
 }
 exports.DataGrid = DataGrid;

package/data-grid.stories.js

@@ -50,7 +50,6 @@ function Default() {
     const { isLoading, error, data, onReload } = (0, use_data_grid_fetching_1.useDataGridFetching)({
         loader: loader_1.loader,
         schema: schema_1.schema,
-        gridName: "grid-name",
         state,
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/export-button/export-button.d.ts

@@ -2,9 +2,10 @@ import React from "react";
 import { CsvDownloadHandler } from "../types/core";
 import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
-interface ExportButtonProps extends DataGridControl {
+export interface DataGridExportButtonProps extends DataGridControl {
     onCsvDownload: CsvDownloadHandler;
     schema: Schema<any>;
 }
-export declare function ExportButton(props: ExportButtonProps): React.JSX.Element;
-export {};
+/** @deprecated Use DataGridExportButton */
+export declare function ExportButton(props: DataGridExportButtonProps): React.JSX.Element;
+export declare const DataGridExportButton: typeof ExportButton;

package/export-button/export-button.js

@@ -3,13 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExportButton = void 0;
+exports.DataGridExportButton = exports.ExportButton = void 0;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
+/** @deprecated Use DataGridExportButton */
 function ExportButton(props) {
     return (react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", onClick: () => props.onCsvDownload((0, utils_1.createRequest)(props.state.request)), title: "St\u00E1hnout CSV", className: "uxf-data-grid__plugin-button" },
         react_1.default.createElement(icon_1.Icon, { name: "file-arrow-down" })));
 }
 exports.ExportButton = ExportButton;
+exports.DataGridExportButton = ExportButton;

package/export-button/export-button.stories.js

@@ -12,7 +12,7 @@ const export_button_1 = require("./export-button");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(export_button_1.ExportButton, { state: state, actions: actions, schema: schema_1.schema, onCsvDownload: console.log }),
+        react_1.default.createElement(export_button_1.DataGridExportButton, { state: state, actions: actions, schema: schema_1.schema, onCsvDownload: console.log }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/filter-handler/entity-multi-select.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
 const chip_1 = require("@uxf/ui/chip");
 const multi_combobox_1 = require("@uxf/ui/multi-combobox");
 const react_1 = __importDefault(require("react"));
@@ -12,11 +14,13 @@ const filterHandler = {
         return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { loadOptions: (term) => { var _a; return (0, _api_1.dataGridAutocomplete)((_a = props.filter.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, label: props.filter.label, value: props.value, onChange: (value) => props.onChange(value), name: props.filter.name }));
     },
     ListItem(props) {
-        var _a;
+        if ((0, is_nil_1.isNil)(props.value) || (0, is_empty_1.isEmpty)(props.value)) {
+            return null;
+        }
         return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
             props.filter.label,
-            ":\u00A0", (_a = props.value) === null || _a === void 0 ? void 0 :
-            _a.map((item) => item.label).join(", ")));
+            ":\u00A0",
+            props.value.map((item) => item.label).join(", ")));
     },
 };
 exports.default = filterHandler;

package/filter-list/filter-list.d.ts

@@ -2,10 +2,13 @@ import React from "react";
 import { FilterHandlers } from "../filter-handler";
 import { Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
+/** @deprecated Use DataGridFilterListProps */
 export interface FilterListProps extends DataGridControl {
-    gridName?: string;
     filterHandlers: FilterHandlers;
     className?: string;
     schema: Schema<any>;
 }
+export type DataGridFilterListProps = FilterListProps;
+/** @deprecated Use DataGridFilterList */
 export declare function FilterList(props: FilterListProps): React.JSX.Element | null;
+export declare const DataGridFilterList: typeof FilterList;

package/filter-list/filter-list.js

@@ -3,11 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterList = void 0;
+exports.DataGridFilterList = exports.FilterList = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const react_1 = __importDefault(require("react"));
 const create_filter_component_props_1 = require("../utils/create-filter-component-props");
+/** @deprecated Use DataGridFilterList */
 function FilterList(props) {
     const renderedFilters = props.state.request.f
         .map((filterRequest) => {
@@ -20,7 +21,7 @@ function FilterList(props) {
         if (!FilterListItem) {
             return null;
         }
-        return (react_1.default.createElement(FilterListItem, { key: filterRequest.name, ...(0, create_filter_component_props_1.createFilterComponentProps)(props.gridName, filter, props.state, props.actions) }));
+        return (react_1.default.createElement(FilterListItem, { key: filterRequest.name, ...(0, create_filter_component_props_1.createFilterComponentProps)(props.schema.name, filter, props.state, props.actions) }));
     })
         .filter((item) => !!item);
     if (renderedFilters.length === 0) {
@@ -29,3 +30,4 @@ function FilterList(props) {
     return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__filter-list", props.className) }, renderedFilters);
 }
 exports.FilterList = FilterList;
+exports.DataGridFilterList = FilterList;

package/filter-list/filter-list.stories.js

@@ -13,7 +13,7 @@ const filter_list_1 = require("./filter-list");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(filter_list_1.FilterList, { state: state, actions: actions, schema: schema_1.schema, gridName: "grid-name", filterHandlers: filter_handler_1.defaultFilterHandlers }),
+        react_1.default.createElement(filter_list_1.DataGridFilterList, { state: state, actions: actions, schema: schema_1.schema, filterHandlers: filter_handler_1.defaultFilterHandlers }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/filters/filters.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import { FilterHandlers } from "../filter-handler";
 import { Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
-interface FiltersProps extends DataGridControl {
-    gridName: string | undefined;
+export interface DataGridFiltersProps extends DataGridControl {
     schema: Schema<any>;
     filterHandlers: FilterHandlers;
 }
-export declare function Filters(props: FiltersProps): React.JSX.Element;
-export {};
+/** @deprecated Use DataGridFilters */
+export declare function Filters(props: DataGridFiltersProps): React.JSX.Element;
+export declare const DataGridFilters: typeof Filters;

package/filters/filters.js

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Filters = void 0;
+exports.DataGridFilters = exports.Filters = void 0;
 const react_1 = __importDefault(require("react"));
 const create_filter_component_props_1 = require("../utils/create-filter-component-props");
+/** @deprecated Use DataGridFilters */
 function Filters(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__filters" }, props.schema.filters.map((filter) => {
         const filterHandler = props.filterHandlers[filter.type];
@@ -16,7 +17,8 @@ function Filters(props) {
             console.warn(`Unknown filter "${filter.type}".`);
             return null;
         }
-        return (react_1.default.createElement(FilterInput, { key: filter.name, ...(0, create_filter_component_props_1.createFilterComponentProps)(props.gridName, filter, props.state, props.actions) }));
+        return (react_1.default.createElement(FilterInput, { key: filter.name, ...(0, create_filter_component_props_1.createFilterComponentProps)(props.schema.name, filter, props.state, props.actions) }));
     })));
 }
 exports.Filters = Filters;
+exports.DataGridFilters = Filters;

package/filters/filters.stories.js

@@ -13,7 +13,7 @@ const filters_1 = require("./filters");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(filters_1.Filters, { state: state, actions: actions, schema: schema_1.schema, gridName: "grid-name", filterHandlers: filter_handler_1.defaultFilterHandlers }),
+        react_1.default.createElement(filters_1.DataGridFilters, { state: state, actions: actions, schema: schema_1.schema, filterHandlers: filter_handler_1.defaultFilterHandlers }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/filters-button/filters-button.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import { FilterHandlers } from "../filter-handler";
 import { Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
-interface FiltersButtonProps extends DataGridControl {
-    gridName: string | undefined;
+export interface DataGridFiltersButtonProps extends DataGridControl {
     schema: Schema<any>;
     filterHandlers: FilterHandlers;
 }
-export declare function FiltersButton(props: FiltersButtonProps): React.JSX.Element | null;
-export {};
+/** @deprecated Use DataGridFiltersButton */
+export declare function FiltersButton(props: DataGridFiltersButtonProps): React.JSX.Element | null;
+export declare const DataGridFiltersButton: typeof FiltersButton;

package/filters-button/filters-button.js

@@ -23,12 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FiltersButton = void 0;
+exports.DataGridFiltersButton = exports.FiltersButton = void 0;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importStar(require("react"));
 const drawer_1 = require("../_components/drawer");
 const filters_1 = require("../filters");
+/** @deprecated Use DataGridFiltersButton */
 function FiltersButton(props) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     if (props.schema.filters.length === 0) {
@@ -38,6 +39,7 @@ function FiltersButton(props) {
         react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setIsOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-button" },
             react_1.default.createElement(icon_1.Icon, { name: "filter" })),
         react_1.default.createElement(drawer_1.Drawer, { open: isOpen, onClose: () => setIsOpen(false) },
-            react_1.default.createElement(filters_1.Filters, { state: props.state, actions: props.actions, gridName: props.gridName, schema: props.schema, filterHandlers: props.filterHandlers }))));
+            react_1.default.createElement(filters_1.DataGridFilters, { state: props.state, actions: props.actions, schema: props.schema, filterHandlers: props.filterHandlers }))));
 }
 exports.FiltersButton = FiltersButton;
+exports.DataGridFiltersButton = FiltersButton;

package/filters-button/filters-button.stories.js

@@ -13,7 +13,7 @@ const filters_button_1 = require("./filters-button");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(filters_button_1.FiltersButton, { state: state, actions: actions, schema: schema_1.schema, gridName: "grid-name", filterHandlers: filter_handler_1.defaultFilterHandlers }),
+        react_1.default.createElement(filters_button_1.DataGridFiltersButton, { state: state, actions: actions, schema: schema_1.schema, filterHandlers: filter_handler_1.defaultFilterHandlers }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/footer/footer.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+export interface DataGridFooterProps {
+    /** @deprecated will be remove, create custom data grid https://fe.uxf.dev/docs/data-grid/data-grid-custom-example */
+    noBorder?: boolean;
+    children: ReactNode;
+}
+export declare function DataGridFooter(props: DataGridFooterProps): React.JSX.Element;

package/footer/footer.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridFooter = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const classes_1 = require("../utils/classes");
+function DataGridFooter(props) {
+    return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__footer", props.noBorder && classes_1.NO_BORDER_CLASS) }, props.children);
+}
+exports.DataGridFooter = DataGridFooter;

package/footer/index.d.ts

@@ -0,0 +1 @@
+export * from "./footer";

package/footer/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./footer"), exports);

package/fulltext-input/fulltext-input.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { DataGridControl } from "../use-data-grid-control";
-type FulltextInputProps = DataGridControl;
-export declare function FulltextInput(props: FulltextInputProps): React.JSX.Element;
-export {};
+export type DataGridFulltextInputProps = DataGridControl;
+/** @deprecated Use DataGridFulltextInput */
+export declare function FulltextInput(props: DataGridFulltextInputProps): React.JSX.Element;
+export declare const DataGridFulltextInput: typeof FulltextInput;

package/fulltext-input/fulltext-input.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FulltextInput = void 0;
+exports.DataGridFulltextInput = exports.FulltextInput = void 0;
 const icon_1 = require("@uxf/ui/icon");
 const text_input_1 = require("@uxf/ui/text-input");
 const react_1 = __importDefault(require("react"));
+/** @deprecated Use DataGridFulltextInput */
 function FulltextInput(props) {
     return (react_1.default.createElement(text_input_1.TextInput, { value: props.state.request.search, onChange: props.actions.search, 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, name: "fulltext" }));
 }
 exports.FulltextInput = FulltextInput;
+exports.DataGridFulltextInput = FulltextInput;

package/fulltext-input/fulltext-input.stories.js

@@ -12,7 +12,7 @@ const fulltext_input_1 = require("./fulltext-input");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(fulltext_input_1.FulltextInput, { state: state, actions: actions }),
+        react_1.default.createElement(fulltext_input_1.DataGridFulltextInput, { state: state, actions: actions }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/hidden-columns/hidden-columns.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
-interface HiddenColumnsProps extends DataGridControl {
+export interface DataGridHiddenColumnsProps extends DataGridControl {
     schema: Schema<any>;
 }
-export declare function HiddenColumns(props: HiddenColumnsProps): React.JSX.Element;
-export {};
+/** @deprecated Use DataGridHiddenColumns */
+export declare function HiddenColumns(props: DataGridHiddenColumnsProps): React.JSX.Element;
+export declare const DataGridHiddenColumns: typeof HiddenColumns;

package/hidden-columns/hidden-columns.js

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HiddenColumns = void 0;
+exports.DataGridHiddenColumns = exports.HiddenColumns = void 0;
 const toggle_1 = require("@uxf/ui/toggle");
 const react_1 = __importDefault(require("react"));
+/** @deprecated Use DataGridHiddenColumns */
 function HiddenColumns(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" }, props.schema.columns.map((column) => {
         var _a, _b, _c, _d;
@@ -13,3 +14,4 @@ function HiddenColumns(props) {
     })));
 }
 exports.HiddenColumns = HiddenColumns;
+exports.DataGridHiddenColumns = HiddenColumns;

package/hidden-columns/hidden-columns.stories.js

@@ -12,7 +12,7 @@ const hidden_columns_1 = require("./hidden-columns");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(hidden_columns_1.HiddenColumns, { state: state, actions: actions, schema: schema_1.schema }),
+        react_1.default.createElement(hidden_columns_1.DataGridHiddenColumns, { state: state, actions: actions, schema: schema_1.schema }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/hidden-columns-button/hidden-columns-button.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
-interface HiddenColumnsButtonProps extends DataGridControl {
+export interface DataGridHiddenColumnsButtonProps extends DataGridControl {
     schema: Schema<any>;
 }
-export declare function HiddenColumnsButton(props: HiddenColumnsButtonProps): React.JSX.Element;
-export {};
+/** @deprecated Use DataGridHiddenColumnsButton */
+export declare function HiddenColumnsButton(props: DataGridHiddenColumnsButtonProps): React.JSX.Element;
+export declare const DataGridHiddenColumnsButton: typeof HiddenColumnsButton;

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

@@ -23,12 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HiddenColumnsButton = void 0;
+exports.DataGridHiddenColumnsButton = exports.HiddenColumnsButton = void 0;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importStar(require("react"));
 const drawer_1 = require("../_components/drawer");
 const hidden_columns_1 = require("../hidden-columns");
+/** @deprecated Use DataGridHiddenColumnsButton */
 function HiddenColumnsButton(props) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -38,3 +39,4 @@ function HiddenColumnsButton(props) {
             react_1.default.createElement(hidden_columns_1.HiddenColumns, { state: props.state, actions: props.actions, schema: props.schema }))));
 }
 exports.HiddenColumnsButton = HiddenColumnsButton;
+exports.DataGridHiddenColumnsButton = HiddenColumnsButton;

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

@@ -12,7 +12,7 @@ const hidden_columns_button_1 = require("./hidden-columns-button");
 function Default() {
     const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(hidden_columns_button_1.HiddenColumnsButton, { state: state, actions: actions, schema: schema_1.schema }),
+        react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { state: state, actions: actions, schema: schema_1.schema }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;