@uxf/data-grid 11.35.0 → 11.37.0

package/pagination/pagination.d.ts

@@ -2,15 +2,11 @@ import { Nullish } from "@uxf/core/types";
 import { PaginationSizes } from "@uxf/ui/pagination/theme";
 import React from "react";
 import { DataGridControl } from "../use-data-grid-control";
-/** @deprecated Use DataGridPaginationProps */
-interface PaginationProps extends DataGridControl {
+interface DataGridPaginationProps extends DataGridControl {
     count: number | Nullish;
     showFirstButton?: boolean;
     showLastButton?: boolean;
     size?: keyof PaginationSizes;
 }
-export type DataGridPaginationProps = PaginationProps;
-/** @deprecated Use DataGridPagination */
-export declare function Pagination(props: PaginationProps): React.JSX.Element;
-export declare const DataGridPagination: typeof Pagination;
+export declare function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element;
 export {};

package/pagination/pagination.js

@@ -3,16 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridPagination = void 0;
-exports.Pagination = Pagination;
+exports.DataGridPagination = DataGridPagination;
 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) {
+function DataGridPagination(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)
         : 1;
     return (react_1.default.createElement(pagination_1.Pagination, { count: pageCount, onPageChange: (value) => props.actions.changePage(value - 1), page: props.state.request.page + 1, showFirstButton: props.showFirstButton, showLastButton: props.showLastButton, size: props.size }));
 }
-exports.DataGridPagination = Pagination;

package/root/root.d.ts

@@ -1,8 +1,6 @@
 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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridRoot = DataGridRoot;
 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));
+    return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid", props.className) }, props.children);
 }

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

@@ -1,12 +1,8 @@
 import React from "react";
 import { DataGridControl } from "../use-data-grid-control";
-/** @deprecated Use DataGridRowCountsProps */
-export interface RowCountsProps {
+export interface DataGridRowCountsProps {
     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;
+export declare function DataGridRowCounts(props: DataGridRowCountsProps): React.JSX.Element;

package/row-counts/row-counts.js

@@ -3,12 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridRowCounts = void 0;
-exports.RowCounts = RowCounts;
+exports.DataGridRowCounts = DataGridRowCounts;
 const show_1 = require("@uxf/core-react/components/show");
 const react_1 = __importDefault(require("react"));
-/** @deprecated Use DataGridRowCounts */
-function RowCounts(props) {
+function DataGridRowCounts(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);
     return (react_1.default.createElement("p", { className: "uxf-data-grid__pagination-counts" },
@@ -23,4 +21,3 @@ function RowCounts(props) {
             props.totalCount,
             ")")));
 }
-exports.DataGridRowCounts = RowCounts;

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

@@ -1,5 +1,3 @@
 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;
+export declare function DataGridRowsPerPageSelect(props: DataGridControl): React.JSX.Element;

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

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

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

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

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

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

package/styles.css

@@ -35,10 +35,6 @@
     border: 1px solid var(--rdg-border-color);
     border-radius: theme("borderRadius.DEFAULT");
 
-    &.no-border {
-        border-style: none;
-    }
-
     &__action-cell {
         background-color: var(--rdg-background-color);
         border-inline-start: 1px solid var(--rdg-border-color);
@@ -321,10 +317,6 @@
         justify-content: flex-end;
         padding: theme("spacing.2");
 
-        &.no-border {
-            padding-right: 0;
-        }
-
         :root .dark & {
             border-bottom-color: theme("colors.darkBorder");
         }
@@ -489,17 +481,17 @@
     }
 
     &__hidden-columns-empty-box {
-        background-color: var(--uxf-color-warning-surface-muted);
-        border: theme("borderWidth.DEFAULT") solid var(--uxf-color-warning-border);
+        background-color: theme("colors.warning_surface_muted");
+        border: theme("borderWidth.DEFAULT") solid theme("colors.warning_border");
         border-radius: theme("borderRadius.lg");
-        color: var(--uxf-color-base-text-high-emphasis);
+        color: theme("colors.base_text_high_emphasis");
         display: flex;
         gap: 12px;
         margin: 8px 0;
         padding: 8px 16px;
 
         .uxf-icon {
-            color: var(--uxf-color-warning-icon-on-muted);
+            color: theme("colors.warning_icon_on_muted");
             margin-top: 4px;
         }
     }

package/table/hooks/use-react-data-grid-columns.d.ts

@@ -1,4 +1,4 @@
 import { Column } from "react-data-grid";
 import { DataGridState } from "../../types";
-import { TableProps } from "../types";
-export declare function useReactDataGridColumns(props: TableProps<any>, state: DataGridState<any>): Column<any>[];
+import { DataGridTableProps } from "../types";
+export declare function useReactDataGridColumns(props: DataGridTableProps<any>, state: DataGridState<any>): Column<any>[];

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

@@ -46,7 +46,7 @@ function useReactDataGridColumns(props, state) {
                 continue;
             }
             columns.push({
-                key: schemaColumn.name, // TODO
+                key: schemaColumn.name,
                 name: schemaColumn.label,
                 headerCellClass: (0, cx_1.cx)("uxf-data-grid__cell", "uxf-data-grid__cell--header", `uxf-data-grid__cell--type-${schemaColumn.type}`, `uxf-data-grid__cell--name-${schemaColumn.name}`),
                 resizable: true,

package/table/table.d.ts

@@ -1,6 +1,4 @@
 import React from "react";
 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;
+export declare function DataGridTable(props: DataGridTableProps<any>): React.JSX.Element;

package/table/table.js

@@ -26,8 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridTable = void 0;
-exports.Table = Table;
+exports.DataGridTable = DataGridTable;
 const show_1 = require("@uxf/core-react/components/show");
 const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
 const empty_array_1 = require("@uxf/core/constants/empty-array");
@@ -41,7 +40,7 @@ const no_rows_fallback_1 = require("./no-rows-fallback");
 const defaultKeyExtractor = (r) => r.id;
 const DefaultNoRowsFallback = no_rows_fallback_1.NoRowsFallback;
 /** @deprecated will be remove, use DataGridTableV2 */
-function Table(props) {
+function DataGridTable(props) {
     var _a, _b, _c, _d, _e, _f, _g;
     const isMounted = (0, use_is_mounted_1.useIsMounted)();
     const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
@@ -91,5 +90,3 @@ function Table(props) {
     return (react_1.default.createElement(show_1.Show, { when: isMounted },
         react_1.default.createElement(react_data_grid_1.default, { className: rdgVisuals.className, columns: columns, enableVirtualization: false, headerRowHeight: rdgVisuals.headerRowHeight, onSelectedRowsChange: onSelectRows, onSortColumnsChange: onSortColumnChange, ref: rdgVisuals.ref, renderers: components, rowClass: props.rowClass, rowHeight: rdgVisuals.rowHeight, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, rows: props.data, selectedRows: new Set((_g = (_f = props.state.selectedRows) === null || _f === void 0 ? void 0 : _f.map(keyExtractor)) !== null && _g !== void 0 ? _g : empty_array_1.EMPTY_ARRAY), sortColumns: sortColumns, style: reactDataGridStyles })));
 }
-/** @deprecated will be remove, use DataGridTableV2 */
-exports.DataGridTable = Table;

package/table/types.d.ts

@@ -4,8 +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 {
+export interface DataGridTableProps<Row> extends DataGridControl {
     schema: Schema<any>;
     data: Row[];
     isLoading?: boolean;
@@ -20,4 +19,3 @@ export interface TableProps<Row> extends DataGridControl {
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;
 }
-export type DataGridTableProps<Row> = TableProps<Row>;

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

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

package/table-v2/styles.css

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

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

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

package/table-v2/table-v2.js

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridTableV2 = void 0;
-exports.TableV2 = TableV2;
+exports.DataGridTableV2 = DataGridTableV2;
 const show_1 = require("@uxf/core-react/components/show");
 const empty_array_1 = require("@uxf/core/constants/empty-array");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
@@ -15,29 +14,28 @@ const components_1 = require("./components");
 const header_select_all_rows_checkbox_1 = require("./components/header-select-all-rows-checkbox");
 const select_row_checkbox_1 = require("./components/select-row-checkbox");
 const use_resizable_columns_1 = require("./hooks/use-resizable-columns");
+const get_grid_template_columns_1 = require("./utils/get-grid-template-columns");
 const get_grid_template_rows_1 = require("./utils/get-grid-template-rows");
 const SELECT_ROWS_CELL_WIDTH = 40;
 const defaultKeyExtractor = (r) => r.id;
 const DefaultBodyCell = () => "Unknown body cell.";
-/** @deprecated Use DataGridTableV2 */
-function TableV2(props) {
+function DataGridTableV2(props) {
     var _a, _b, _c, _d, _e;
     const keyExtractor = (_a = props.keyExtractor) !== null && _a !== void 0 ? _a : defaultKeyExtractor;
     const visibleColumns = props.schema.columns
         .filter((column) => !column.hidden)
         .filter((column) => { var _a, _b, _c, _d; return !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.isHidden); });
-    const { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, props.isRowSelectable ? SELECT_ROWS_CELL_WIDTH : null);
+    const selectedRowColumnWidth = props.isRowSelectable ? SELECT_ROWS_CELL_WIDTH : null;
+    const { tableRef, columnRefs, onResizeStart } = (0, use_resizable_columns_1.useResizableColumns)(visibleColumns, props.actionCell, props.actions, selectedRowColumnWidth);
     const gridTemplateRows = (0, get_grid_template_rows_1.getGridTemplateRows)(props.data, (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36, (_c = props.rowHeight) !== null && _c !== void 0 ? _c : 44);
-    const gridTemplateColumnsWithoutAction = visibleColumns
+    const gridTemplateBasicColumns = visibleColumns
         .map((column) => { var _a, _b, _c, _d; return (_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : (_d = column.config) === null || _d === void 0 ? void 0 : _d.width; })
-        .map((width) => ((0, is_nil_1.isNil)(width) ? "1fr" : (0, rem_1.rem)(width)))
-        .join(" ");
-    const gridTemplateColumnsWithoutSelectable = (0, is_nil_1.isNil)((_d = props.actionCell) === null || _d === void 0 ? void 0 : _d.width)
-        ? gridTemplateColumnsWithoutAction
-        : `${gridTemplateColumnsWithoutAction} ${(0, rem_1.rem)(props.actionCell.width)}`;
-    const gridTemplateColumns = props.isRowSelectable
-        ? `${(0, rem_1.rem)(SELECT_ROWS_CELL_WIDTH)} ${gridTemplateColumnsWithoutSelectable}`
-        : gridTemplateColumnsWithoutSelectable;
+        .map((width) => ((0, is_nil_1.isNil)(width) ? "1fr" : (0, rem_1.rem)(width)));
+    const gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)({
+        columns: gridTemplateBasicColumns,
+        selectRowColumnWidth: selectedRowColumnWidth,
+        actionColumnWidth: (_d = props.actionCell) === null || _d === void 0 ? void 0 : _d.width,
+    });
     const selectedRows = (_e = props.state.selectedRows) !== null && _e !== void 0 ? _e : empty_array_1.EMPTY_ARRAY;
     const selectRowHandler = (rowId) => () => {
         const isRowSelected = selectedRows.find((r) => keyExtractor(r) === rowId);
@@ -73,4 +71,3 @@ function TableV2(props) {
             (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCell, null,
                 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 })))))))));
 }
-exports.DataGridTableV2 = TableV2;

package/table-v2/types.d.ts

@@ -4,8 +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 {
+export interface DataGridTableProps<Row> extends DataGridControl {
     schema: Schema<any>;
     data: Row[];
     isLoading?: boolean;
@@ -23,4 +22,3 @@ export interface TableProps<Row> extends DataGridControl {
     NoRowsFallback?: NoRowsFallbackComponent;
     isRowSelectable?: boolean;
 }
-export type DataGridTableProps<Row> = TableProps<Row>;

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

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

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

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

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

@@ -1,2 +1,2 @@
-import { TableProps } from "../types";
-export declare function getGridTemplateRows(rows: any[], headerRowHeight: number, rowHeight: TableProps<any>["rowHeight"]): string | undefined;
+import { DataGridTableProps } from "../types";
+export declare function getGridTemplateRows(rows: any[], headerRowHeight: number, rowHeight: DataGridTableProps<any>["rowHeight"]): string | undefined;

package/toolbar/toolbar.d.ts

@@ -1,6 +1,5 @@
 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

@@ -4,9 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridToolbar = DataGridToolbar;
-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);
+    return react_1.default.createElement("div", { className: "uxf-data-grid__toolbar" }, props.children);
 }

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

@@ -3,14 +3,10 @@ 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 {
+export interface DataGridToolbarControlProps extends DataGridControl {
     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;
+export declare function DataGridToolbarControl(props: DataGridToolbarControlProps): React.JSX.Element;

package/toolbar-control/toolbar-control.js

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridToolbarControl = void 0;
-exports.ToolbarControl = ToolbarControl;
+exports.DataGridToolbarControl = DataGridToolbarControl;
 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"));
@@ -12,8 +11,7 @@ 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) {
+function DataGridToolbarControl(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.DataGridFulltextInput, { actions: props.actions, state: props.state })),
@@ -21,4 +19,3 @@ function ToolbarControl(props) {
         react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: props.actions, schema: props.schema, state: props.state }),
         react_1.default.createElement(filters_button_1.DataGridFiltersButton, { actions: props.actions, filterHandlers: props.filterHandlers, schema: props.schema, state: props.state })));
 }
-exports.DataGridToolbarControl = ToolbarControl;

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

@@ -1,7 +1,6 @@
 import { ButtonVariant } from "@uxf/ui/button";
 import React, { ReactElement } from "react";
-/** @deprecated Use DataGridToolbarCustomsProps */
-export interface ToolbarCustomsProps {
+export interface DataGridToolbarCustomsProps {
     buttons?: {
         label: string | ReactElement;
         onClick?: () => void;
@@ -9,7 +8,4 @@ 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;
+export declare function DataGridToolbarCustoms(props: DataGridToolbarCustomsProps): React.JSX.Element | null;

package/toolbar-customs/toolbar-customs.js

@@ -3,14 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridToolbarCustoms = void 0;
-exports.ToolbarCustoms = ToolbarCustoms;
+exports.DataGridToolbarCustoms = DataGridToolbarCustoms;
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 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) {
+function DataGridToolbarCustoms(props) {
     if (!props.buttons) {
         return null;
     }
@@ -19,4 +17,3 @@ function ToolbarCustoms(props) {
         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))))));
 }
-exports.DataGridToolbarCustoms = ToolbarCustoms;

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

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

package/toolbar-tabs/toolbar-tabs.js

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridToolbarTabs = void 0;
-exports.ToolbarTabs = ToolbarTabs;
+exports.DataGridToolbarTabs = DataGridToolbarTabs;
 const show_1 = require("@uxf/core-react/components/show");
 const cx_1 = require("@uxf/core/utils/cx");
 const button_1 = require("@uxf/ui/button");
@@ -14,25 +13,24 @@ 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) {
+function DataGridToolbarTabs(props) {
     var _a, _b, _c, _d;
     return (react_1.default.createElement(show_1.Show, { when: Boolean((_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.length) },
         react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs" },
-            react_1.default.createElement("nav", { "aria-label": "Tabs", className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { isActive: props.state.request.tab === t.name, key: t.name, onClick: () => props.actions.changeTab(t), title: t.label })))),
+            react_1.default.createElement("nav", { "aria-label": "Tabs", className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((tab) => (react_1.default.createElement(Tab, { isActive: props.state.request.tab === tab.name, key: tab.name, onClick: () => { var _a; return props.actions.changeTab(tab, (_a = props.changeTabFilterBehavior) !== null && _a !== void 0 ? _a : "filtersPerTab"); }, title: tab.label })))),
             react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--mobile" },
                 react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-button", onClick: () => {
                         var _a;
                         return (0, modal_service_1.openModal)({
-                            children: (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs-modal-content" }, (_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.map((item) => (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-modal-button", key: item.name, onClick: () => {
-                                    props.actions.changeTab(item);
+                            children: (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs-modal-content" }, (_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.map((tab) => (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-modal-button", key: tab.name, onClick: () => {
+                                    var _a;
+                                    props.actions.changeTab(tab, (_a = props.changeTabFilterBehavior) !== null && _a !== void 0 ? _a : "filtersPerTab");
                                     (0, modal_service_1.closeModal)();
                                 }, size: "xl", variant: "text" },
-                                item.name === props.state.request.tab && (react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-modal-active-tab-icon", name: "check", size: 20 })),
-                                react_1.default.createElement("span", { className: "uxf-data-grid__toolbar-tabs-modal-button-text" }, item.label)))))),
+                                tab.name === props.state.request.tab && (react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-modal-active-tab-icon", name: "check", size: 20 })),
+                                react_1.default.createElement("span", { className: "uxf-data-grid__toolbar-tabs-modal-button-text" }, tab.label)))))),
                         });
                     }, size: "sm", variant: "text" },
                     react_1.default.createElement("span", { className: "uxf-data-grid__toolbar-tabs-nav-text" }, (_d = (_c = props.schema.tabs) === null || _c === void 0 ? void 0 : _c.find((t) => t.name === props.state.request.tab)) === null || _d === void 0 ? void 0 : _d.label),
                     react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-button-icon", name: "caretDown", size: 16 }))))));
 }
-exports.DataGridToolbarTabs = ToolbarTabs;

package/types/components.d.ts

@@ -28,3 +28,4 @@ export interface FilterProps<StateValue> {
     onChange: (value: StateValue | undefined, op?: string) => void;
     onClear: () => void;
 }
+export type ChangeTabFilterBehavior = "sharedFilters" | "filtersPerTab";