@uxf/data-grid 11.19.3 → 11.20.0

package/package.json

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

package/pagination/pagination.d.ts

@@ -1,8 +1,12 @@
 import { Nullish } from "@uxf/core/types";
 import React from "react";
 import { DataGridControl } from "../use-data-grid-control";
+/** @deprecated Use DataGridPaginationProps */
 interface PaginationProps extends DataGridControl {
     count: number | Nullish;
 }
+export type DataGridPaginationProps = PaginationProps;
+/** @deprecated Use DataGridPagination */
 export declare function Pagination(props: PaginationProps): React.JSX.Element;
+export declare const DataGridPagination: typeof Pagination;
 export {};

package/pagination/pagination.js

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
+exports.DataGridPagination = exports.Pagination = void 0;
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const pagination_1 = require("@uxf/ui/pagination");
 const react_1 = __importDefault(require("react"));
+/** @deprecated Use DataGridPagination */
 function Pagination(props) {
     const pageCount = (0, is_not_nil_1.isNotNil)(props.count) && props.count > 0
         ? Math.max(Math.ceil(props.count / props.state.request.perPage), 1)
@@ -14,3 +15,4 @@ function Pagination(props) {
     return (react_1.default.createElement(pagination_1.Pagination, { count: pageCount, page: props.state.request.page + 1, onPageChange: (value) => props.actions.changePage(value - 1) }));
 }
 exports.Pagination = Pagination;
+exports.DataGridPagination = Pagination;

package/pagination/pagination.stories.js

@@ -12,7 +12,7 @@ const pagination_1 = require("./pagination");
 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(pagination_1.Pagination, { state: state, actions: actions, count: 100 }),
+        react_1.default.createElement(pagination_1.DataGridPagination, { state: state, actions: actions, count: 100 }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/root/index.d.ts

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

package/root/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("./root"), exports);

package/root/root.d.ts

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

package/root/root.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.DataGridRoot = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const classes_1 = require("../utils/classes");
+function DataGridRoot(props) {
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid", props.noBorder && classes_1.NO_BORDER_CLASS, props.className) }, props.children));
+}
+exports.DataGridRoot = DataGridRoot;

package/row-counts/row-counts.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
 import { DataGridControl } from "../use-data-grid-control";
+/** @deprecated Use DataGridRowCountsProps */
 export interface RowCountsProps {
     state: DataGridControl["state"];
     totalCount: number;
     count: number;
 }
+export type DataGridRowCountsProps = RowCountsProps;
+/** @deprecated Use DataGridRowCounts */
 export declare function RowCounts(props: RowCountsProps): React.JSX.Element;
+export declare const DataGridRowCounts: typeof RowCounts;

package/row-counts/row-counts.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.RowCounts = void 0;
-const show_1 = require("@uxf/core/components/show");
+exports.DataGridRowCounts = exports.RowCounts = void 0;
+const show_1 = require("@uxf/core-react/components/show");
 const react_1 = __importDefault(require("react"));
+/** @deprecated Use DataGridRowCounts */
 function RowCounts(props) {
     const fromNumber = props.state.request.page * props.state.request.perPage + 1;
     const toNumber = Math.min(props.state.request.page * props.state.request.perPage + props.state.request.perPage, props.totalCount);
@@ -22,3 +23,4 @@ function RowCounts(props) {
             ")")));
 }
 exports.RowCounts = RowCounts;
+exports.DataGridRowCounts = RowCounts;

package/row-counts/row-counts.stories.js

@@ -10,6 +10,6 @@ const use_data_grid_control_1 = require("../use-data-grid-control");
 const row_counts_1 = require("./row-counts");
 function Default() {
     const { state } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
-    return react_1.default.createElement(row_counts_1.RowCounts, { state: state, totalCount: 150, count: 100 });
+    return react_1.default.createElement(row_counts_1.DataGridRowCounts, { state: state, totalCount: 150, count: 100 });
 }
 exports.Default = Default;

package/rows-per-page-select/rows-per-page-select.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
 import { DataGridControl } from "../use-data-grid-control";
+/** @deprecated Use DataGridRowsPerPageSelect */
 export declare function RowsPerPageSelect(props: DataGridControl): React.JSX.Element;
+export declare const DataGridRowsPerPageSelect: typeof RowsPerPageSelect;

package/rows-per-page-select/rows-per-page-select.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowsPerPageSelect = void 0;
+exports.DataGridRowsPerPageSelect = exports.RowsPerPageSelect = void 0;
 const select_1 = require("@uxf/ui/select");
 const react_1 = __importDefault(require("react"));
 const PER_PAGE_OPTIONS = [
@@ -12,9 +12,11 @@ const PER_PAGE_OPTIONS = [
     { id: 50, label: "50" },
     { id: 100, label: "100" },
 ];
+/** @deprecated Use DataGridRowsPerPageSelect */
 function RowsPerPageSelect(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__rows-per-page" },
         react_1.default.createElement("label", { htmlFor: "uxf-data-grid--select-per-page" }, "Po\u010Det \u0159\u00E1dk\u016F"),
         react_1.default.createElement(select_1.Select, { id: "uxf-data-grid--select-per-page", value: props.state.request.perPage, onChange: (value) => props.actions.changePerPage(value !== null && value !== void 0 ? value : 10), options: PER_PAGE_OPTIONS, size: "small", label: "Po\u010Det \u0159\u00E1dk\u016F", hiddenLabel: true, name: "rows-per-page" })));
 }
 exports.RowsPerPageSelect = RowsPerPageSelect;
+exports.DataGridRowsPerPageSelect = RowsPerPageSelect;

package/rows-per-page-select/rows-per-page-select.stories.js

@@ -12,7 +12,7 @@ const rows_per_page_select_1 = require("./rows-per-page-select");
 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(rows_per_page_select_1.RowsPerPageSelect, { state: state, actions: actions }),
+        react_1.default.createElement(rows_per_page_select_1.DataGridRowsPerPageSelect, { state: state, actions: actions }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

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

@@ -4,8 +4,12 @@ export interface SelectedRowsToolbarActionsProps extends DataGridControl {
     reload: () => void;
 }
 export type SelectedRowsToolbarActionsComponent = FC<SelectedRowsToolbarActionsProps>;
+/** @deprecated Use DataGridSelectedRowsToolbarProps */
 export interface SelectedRowsToolbarProps extends DataGridControl {
     Actions?: SelectedRowsToolbarActionsComponent;
     onReload?: () => void;
 }
+export type DataGridSelectedRowsToolbarProps = SelectedRowsToolbarProps;
+/** @deprecated Use DataGridSelectedRowsToolbar */
 export declare function SelectedRowsToolbar(props: SelectedRowsToolbarProps): React.JSX.Element | null;
+export declare const DataGridSelectedRowsToolbar: typeof SelectedRowsToolbar;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedRowsToolbar = void 0;
+exports.DataGridSelectedRowsToolbar = exports.SelectedRowsToolbar = void 0;
 const button_1 = require("@uxf/ui/button");
 const react_1 = __importDefault(require("react"));
 const getText = (count) => {
@@ -15,6 +15,7 @@ const getText = (count) => {
     }
     return `Vybráno ${count} záznamů`;
 };
+/** @deprecated Use DataGridSelectedRowsToolbar */
 function SelectedRowsToolbar(props) {
     if (!props.state.selectedRows) {
         return null;
@@ -30,3 +31,4 @@ function SelectedRowsToolbar(props) {
                 react_1.default.createElement(button_1.Button, { onClick: () => props.actions.setSelectedRows([]) }, "Zru\u0161it v\u00FDb\u011Br")))));
 }
 exports.SelectedRowsToolbar = SelectedRowsToolbar;
+exports.DataGridSelectedRowsToolbar = SelectedRowsToolbar;

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

@@ -37,7 +37,7 @@ function Default() {
         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.SelectedRowsToolbar, { state: state, actions: actions, Actions: () => (react_1.default.createElement(button_1.Button, { isIconButton: true },
+        react_1.default.createElement(selected_rows_toolbar_1.DataGridSelectedRowsToolbar, { state: state, actions: actions, Actions: () => (react_1.default.createElement(button_1.Button, { isIconButton: true },
                 react_1.default.createElement(icon_1.Icon, { name: "camera" }))) }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/table/table.d.ts

@@ -1,3 +1,6 @@
 import React from "react";
-import { TableProps } from "./types";
-export declare function Table(props: TableProps<any>): React.JSX.Element;
+import { DataGridTableProps } from "./types";
+/** @deprecated will be remove, use DataGridTableV2 */
+export declare function Table(props: DataGridTableProps<any>): React.JSX.Element;
+/** @deprecated will be remove, use DataGridTableV2 */
+export declare const DataGridTable: typeof Table;

package/table/table.js

@@ -26,9 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
-const show_1 = require("@uxf/core/components/show");
-const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
+exports.DataGridTable = exports.Table = void 0;
+const show_1 = require("@uxf/core-react/components/show");
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
 const react_1 = __importStar(require("react"));
 const react_data_grid_1 = __importDefault(require("react-data-grid"));
 const select_row_checkbox_1 = require("./components/select-row-checkbox");
@@ -36,9 +36,10 @@ const use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
 const use_react_data_grid_columns_1 = require("./hooks/use-react-data-grid-columns");
 const defaultKeyExtractor = (r) => r.id;
 const DefaultNoRowsFallback = () => react_1.default.createElement("div", null, "no rows");
+/** @deprecated will be remove, use DataGridTableV2 */
 function Table(props) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const isMounted = (0, useIsMounted_1.useIsMounted)();
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
     const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
     const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
     const keyExtractor = (_c = props.keyExtractor) !== null && _c !== void 0 ? _c : defaultKeyExtractor;
@@ -86,3 +87,5 @@ function Table(props) {
         react_1.default.createElement(react_data_grid_1.default, { ref: rdgVisuals.ref, style: reactDataGridStyles, className: rdgVisuals.className, columns: columns, rows: props.data, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rdgVisuals.rowHeight, headerRowHeight: rdgVisuals.headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : []), onSelectedRowsChange: onSelectRows, renderers: components })));
 }
 exports.Table = Table;
+/** @deprecated will be remove, use DataGridTableV2 */
+exports.DataGridTable = Table;

package/table/table.stories.js

@@ -14,7 +14,7 @@ const table_1 = require("./table");
 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(table_1.Table, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true }),
+        react_1.default.createElement(table_1.DataGridTable, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/table/types.d.ts

@@ -4,6 +4,7 @@ import { KeyExtractor } from "../types/core";
 import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
 import { NoRowsFallbackComponent } from "./no-rows-fallback";
+/** @deprecated Use DataGridTableProps */
 export interface TableProps<Row> extends DataGridControl {
     schema: Schema<any>;
     data: Row[];
@@ -22,3 +23,4 @@ export interface TableProps<Row> extends DataGridControl {
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;
 }
+export type DataGridTableProps<Row> = TableProps<Row>;

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

@@ -21,17 +21,16 @@ function useResizableColumns(columns, actionCell, actions) {
         let tempColumnSizes = [];
         const onMouseMove = (e) => {
             const gridColumns = columns.map((_, i) => {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d;
                 const columnRef = columnRefs.current[i];
                 if (i === activeIndex) {
-                    const tableLeft = (_b = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) !== null && _b !== void 0 ? _b : 0;
-                    const tableScrollLeft = (_d = (_c = tableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _d !== void 0 ? _d : 0;
-                    const columnOffsetLeft = (_e = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetLeft) !== null && _e !== void 0 ? _e : 0;
+                    const tableScrollLeft = (_b = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+                    const columnOffsetLeft = (_c = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetLeft) !== null && _c !== void 0 ? _c : 0;
                     const clickPositionX = e.clientX + tableScrollLeft;
-                    const width = clickPositionX - columnOffsetLeft - tableLeft;
+                    const width = clickPositionX - columnOffsetLeft;
                     return width >= 50 ? width : 50;
                 }
-                return (_f = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetWidth) !== null && _f !== void 0 ? _f : 50;
+                return (_d = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetWidth) !== null && _d !== void 0 ? _d : 50;
             });
             // TODO @vejvis - jak tohle udělat lépe??
             tempColumnSizes = gridColumns;

package/table-v2/table-v2.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
-import { TableProps } from "./types";
-export declare function TableV2(props: TableProps<any>): React.JSX.Element;
+import { DataGridTableProps } from "./types";
+/** @deprecated Use DataGridTableV2 */
+export declare function TableV2(props: DataGridTableProps<any>): React.JSX.Element;
+export declare const DataGridTableV2: typeof TableV2;

package/table-v2/table-v2.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableV2 = void 0;
-const show_1 = require("@uxf/core/components/show");
+exports.DataGridTableV2 = exports.TableV2 = void 0;
+const show_1 = require("@uxf/core-react/components/show");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const rem_1 = require("@uxf/styles/units/rem");
@@ -14,6 +14,7 @@ const use_resizable_columns_1 = require("./hooks/use-resizable-columns");
 const get_grid_template_rows_1 = require("./utils/get-grid-template-rows");
 const defaultKeyExtractor = (r) => r.id;
 const DefaultBodyCell = () => "Unknown body cell.";
+/** @deprecated Use DataGridTableV2 */
 function TableV2(props) {
     var _a, _b, _c, _d;
     const keyExtractor = (_a = props.keyExtractor) !== null && _a !== void 0 ? _a : defaultKeyExtractor;
@@ -49,3 +50,4 @@ function TableV2(props) {
                 react_1.default.createElement(props.actionCell.Component, { row: row, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } })))))))));
 }
 exports.TableV2 = TableV2;
+exports.DataGridTableV2 = TableV2;

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

@@ -15,8 +15,8 @@ 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 });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(hidden_columns_button_1.HiddenColumnsButton, { schema: schema_1.schema, state: state, actions: actions }),
-        react_1.default.createElement(table_v2_1.TableV2, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true, actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") } }),
+        react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { schema: schema_1.schema, state: state, actions: actions }),
+        react_1.default.createElement(table_v2_1.DataGridTableV2, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true, actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") } }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

package/table-v2/types.d.ts

@@ -4,6 +4,7 @@ import { KeyExtractor } from "../types/core";
 import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
 import { NoRowsFallbackComponent } from "./no-rows-fallback";
+/** @deprecated Use DataGridTableProps */
 export interface TableProps<Row> extends DataGridControl {
     schema: Schema<any>;
     data: Row[];
@@ -22,3 +23,4 @@ export interface TableProps<Row> extends DataGridControl {
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;
 }
+export type DataGridTableProps<Row> = TableProps<Row>;

package/toolbar/index.d.ts

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

package/toolbar/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("./toolbar"), exports);

package/toolbar/toolbar.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+export interface DataGridToolbarProps {
+    children: ReactNode;
+    noBorder?: boolean;
+}
+export declare function DataGridToolbar(props: DataGridToolbarProps): React.JSX.Element;

package/toolbar/toolbar.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.DataGridToolbar = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const classes_1 = require("../utils/classes");
+function DataGridToolbar(props) {
+    return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__toolbar", props.noBorder && classes_1.NO_BORDER_CLASS) }, props.children);
+}
+exports.DataGridToolbar = DataGridToolbar;

package/toolbar-control/toolbar-control.d.ts

@@ -3,11 +3,14 @@ import React from "react";
 import { FilterHandlers } from "../filter-handler";
 import { CsvDownloadHandler, Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
+/** @deprecated Use DataGridToolbarControlProps */
 export interface ToolbarControlProps extends DataGridControl {
-    gridName: string | undefined;
     schema: Schema<any>;
     filterHandlers: FilterHandlers;
     onCsvDownload?: CsvDownloadHandler;
     isBorderHidden?: boolean | Nullish;
 }
+export type DataGridToolbarControlProps = ToolbarControlProps;
+/** @deprecated Use DataGridToolbarControl */
 export declare function ToolbarControl(props: ToolbarControlProps): React.JSX.Element;
+export declare const DataGridToolbarControl: typeof ToolbarControl;

package/toolbar-control/toolbar-control.js

@@ -3,20 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarControl = void 0;
-const hide_1 = require("@uxf/core/components/hide");
+exports.DataGridToolbarControl = exports.ToolbarControl = void 0;
+const hide_1 = require("@uxf/core-react/components/hide");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importDefault(require("react"));
 const export_button_1 = require("../export-button");
 const filters_button_1 = require("../filters-button");
 const fulltext_input_1 = require("../fulltext-input");
 const hidden_columns_button_1 = require("../hidden-columns-button");
+/** @deprecated Use DataGridToolbarControl */
 function ToolbarControl(props) {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(hide_1.Hide, { when: !props.schema.fullText },
-            react_1.default.createElement(fulltext_input_1.FulltextInput, { state: props.state, actions: props.actions })),
-        (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.ExportButton, { state: props.state, actions: props.actions, schema: props.schema, onCsvDownload: props.onCsvDownload })),
-        react_1.default.createElement(hidden_columns_button_1.HiddenColumnsButton, { state: props.state, actions: props.actions, schema: props.schema }),
-        react_1.default.createElement(filters_button_1.FiltersButton, { state: props.state, actions: props.actions, gridName: props.gridName, schema: props.schema, filterHandlers: props.filterHandlers })));
+            react_1.default.createElement(fulltext_input_1.DataGridFulltextInput, { state: props.state, actions: props.actions })),
+        (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.DataGridExportButton, { state: props.state, actions: props.actions, schema: props.schema, onCsvDownload: props.onCsvDownload })),
+        react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { state: props.state, actions: props.actions, schema: props.schema }),
+        react_1.default.createElement(filters_button_1.DataGridFiltersButton, { state: props.state, actions: props.actions, schema: props.schema, filterHandlers: props.filterHandlers })));
 }
 exports.ToolbarControl = ToolbarControl;
+exports.DataGridToolbarControl = ToolbarControl;

package/toolbar-control/toolbar-control.stories.js

@@ -14,7 +14,7 @@ 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("div", { className: "flex flex-row" },
-            react_1.default.createElement(toolbar_control_1.ToolbarControl, { state: state, actions: actions, schema: schema_1.schema, filterHandlers: filter_handler_1.defaultFilterHandlers, gridName: "grid-name", onCsvDownload: console.log })),
+            react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { state: state, actions: actions, schema: schema_1.schema, filterHandlers: filter_handler_1.defaultFilterHandlers, onCsvDownload: console.log })),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

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

@@ -1,5 +1,6 @@
 import { ButtonVariant } from "@uxf/ui/button";
 import React, { ReactElement } from "react";
+/** @deprecated Use DataGridToolbarCustomsProps */
 export interface ToolbarCustomsProps {
     buttons?: {
         label: string | ReactElement;
@@ -8,4 +9,7 @@ export interface ToolbarCustomsProps {
         variant?: ButtonVariant;
     }[];
 }
+export type DataGridToolbarCustomsProps = ToolbarCustomsProps;
+/** @deprecated Use DataGridToolbarCustoms */
 export declare function ToolbarCustoms(props: ToolbarCustomsProps): React.JSX.Element | null;
+export declare const DataGridToolbarCustoms: typeof ToolbarCustoms;

package/toolbar-customs/toolbar-customs.js

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarCustoms = void 0;
+exports.DataGridToolbarCustoms = exports.ToolbarCustoms = void 0;
 const button_1 = require("@uxf/ui/button");
 const button_list_1 = require("@uxf/ui/button-list");
 const react_1 = __importDefault(require("react"));
+/** @deprecated Use DataGridToolbarCustoms */
 function ToolbarCustoms(props) {
     if (!props.buttons) {
         return null;
@@ -16,3 +17,4 @@ function ToolbarCustoms(props) {
         react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-desktop" }, props.buttons.map((button, index) => (react_1.default.createElement(button_1.Button, { key: index, href: button.href, onClick: button.onClick, size: "sm", variant: button.variant }, button.label))))));
 }
 exports.ToolbarCustoms = ToolbarCustoms;
+exports.DataGridToolbarCustoms = ToolbarCustoms;

package/toolbar-customs/toolbar-customs.stories.js

@@ -7,7 +7,7 @@ exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const toolbar_customs_1 = require("./toolbar-customs");
 function Default() {
-    return (react_1.default.createElement(toolbar_customs_1.ToolbarCustoms, { buttons: [
+    return (react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: [
             { label: "Default", href: "/", variant: "default" },
             { label: "Text", href: "/", variant: "text" },
             { label: "Outlined", href: "/", variant: "outlined" },

package/toolbar-tabs/toolbar-tabs.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
 import { Schema } from "../types/schema";
 import { DataGridControl } from "../use-data-grid-control";
+/** @deprecated Use DataGridToolbarTabsProps */
 export interface ToolbarTabsProps extends DataGridControl {
     schema: Schema<any>;
 }
-export declare function ToolbarTabs(props: ToolbarTabsProps): React.JSX.Element;
+export type DataGridToolbarTabsProps = ToolbarTabsProps;
+/** @deprecated Use DataGridToolbarTabs */
+export declare function ToolbarTabs(props: DataGridToolbarTabsProps): React.JSX.Element;
+export declare const DataGridToolbarTabs: typeof ToolbarTabs;

package/toolbar-tabs/toolbar-tabs.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarTabs = void 0;
-const show_1 = require("@uxf/core/components/show");
+exports.DataGridToolbarTabs = exports.ToolbarTabs = void 0;
+const show_1 = require("@uxf/core-react/components/show");
 const cx_1 = require("@uxf/core/utils/cx");
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
@@ -13,6 +13,7 @@ const react_1 = __importDefault(require("react"));
 function Tab(props) {
     return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-data-grid__toolbar-tab", props.isActive && "is-active"), onClick: props.onClick }, props.title));
 }
+/** @deprecated Use DataGridToolbarTabs */
 function ToolbarTabs(props) {
     var _a, _b, _c, _d;
     return (react_1.default.createElement(show_1.Show, { when: !!((_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.length) },
@@ -34,3 +35,4 @@ function ToolbarTabs(props) {
                     react_1.default.createElement(icon_1.Icon, { name: "caretDown", className: "uxf-data-grid__toolbar-tabs-button-icon", size: 16 }))))));
 }
 exports.ToolbarTabs = ToolbarTabs;
+exports.DataGridToolbarTabs = ToolbarTabs;

package/toolbar-tabs/toolbar-tabs.stories.js

@@ -12,7 +12,7 @@ const toolbar_tabs_1 = require("./toolbar-tabs");
 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(toolbar_tabs_1.ToolbarTabs, { state: state, actions: actions, schema: schema_1.schema }),
+        react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { state: state, actions: actions, schema: schema_1.schema }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }
 exports.Default = Default;

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

@@ -1,8 +1,8 @@
 import { FilterHandlers } from "../filter-handler";
 import { SelectedRowsToolbarActionsComponent } from "../selected-rows-toolbar";
 import { NoRowsFallbackComponent } from "../table/no-rows-fallback";
-import { TableProps } from "../table/types";
-import { ToolbarCustomsProps } from "../toolbar-customs";
+import { DataGridTableProps } from "../table/types";
+import { DataGridToolbarCustomsProps } from "../toolbar-customs";
 import { DataGridControl } from "../use-data-grid-control";
 import { DataGridFetchingResult } from "../use-data-grid-fetching";
 import { BodyCellComponents } from "./components";
@@ -15,13 +15,14 @@ export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
     gridName?: string;
     keyExtractor?: KeyExtractor;
     onCsvDownload?: CsvDownloadHandler;
+    /** @deprecated will be remove, create custom data grid https://fe.uxf.dev/docs/data-grid/data-grid-custom-example */
     noBorder?: boolean;
     rowHeight?: number | ((row: Row) => number);
     headerRowHeight?: number;
     rowClass?: (row: Row) => "success" | "warning" | "error" | "primary" | "secondary" | string | null | undefined;
     className?: string;
-    customActions?: ToolbarCustomsProps["buttons"];
-    actionCell?: TableProps<Row>["actionCell"];
+    customActions?: DataGridToolbarCustomsProps["buttons"];
+    actionCell?: DataGridTableProps<Row>["actionCell"];
     bodyCells?: BodyCellComponents<GridType["columns"], Row>;
     filterHandlers?: FilterHandlers;
     NoRowsFallback?: NoRowsFallbackComponent;