@uxf/data-grid 11.88.0 → 11.88.2

package/data-grid-v2.js

@@ -27,7 +27,7 @@ function DataGridV2(props) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(root_1.DataGridRoot, { className: props.className },
             react_1.default.createElement(toolbar_1.DataGridToolbar, null,
-                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state }),
+                react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: props.actions, changeTabFilterBehavior: props.changeTabFilterBehavior, schema: props.schema, state: props.state, variant: props.tabsVariant }),
                 react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { actions: props.actions, filterHandlers: (_a = props.filterHandlers) !== null && _a !== void 0 ? _a : filter_handler_1.defaultFilterHandlers, getCsvDownloadUrl: props.getCsvDownloadUrl, schema: props.schema, state: props.state }),
                 react_1.default.createElement(toolbar_customs_1.DataGridToolbarCustoms, { buttons: props.customActions })),
             react_1.default.createElement(linear_progress_1.DataGridLinearProgress, { isLoading: props.isLoading }),

package/data-grid-v2.stories.js

@@ -104,6 +104,6 @@ function Default() {
     });
     return (react_1.default.createElement("div", { className: "p-10" },
         react_1.default.createElement(radio_group_1.RadioGroup, { label: "Chov\u00E1n\u00ED p\u0159ep\u00EDn\u00E1n\u00ED tab\u016F", name: "filterBehavior", onChange: (value) => setFilterBehavior(value), options: FILTER_BEHAVIOR_OPTIONS, value: filterBehavior, variant: "row" }),
-        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, getCsvDownloadUrl: () => ``, isLoading: isLoading, isRowSelectDisabled: (row) => row.id === 6, isRowsSelectable: true, reload: reload, rowAccent: (row) => (row.id === 2 ? "success" : undefined), rowClassName: (row) => (row.id === 3 ? "some-custom-classname" : undefined), rowHeight: "auto", schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(data_grid_v2_1.DataGridV2, { actionCell: actionCell, actions: actions, changeTabFilterBehavior: filterBehavior !== null && filterBehavior !== void 0 ? filterBehavior : "filtersPerTab", data: data, error: error, getCsvDownloadUrl: () => ``, isLoading: isLoading, isRowSelectDisabled: (row) => row.id === 6, isRowsSelectable: true, reload: reload, rowAccent: (row) => (row.id === 2 ? "success" : undefined), rowClassName: (row) => (row.id === 3 ? "some-custom-classname" : undefined), rowHeight: "auto", schema: schemaWithFrontendConfig, state: state, tabsVariant: "segmented" }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.88.0",
+    "version": "11.88.2",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",
@@ -33,7 +33,7 @@
     "dependencies": {
         "@uxf/core": "11.88.0",
         "@uxf/core-react": "11.88.0",
-        "@uxf/ui": "11.88.0",
+        "@uxf/ui": "11.88.2",
         "dayjs": "1.11.19",
         "deepmerge": "4.3.1",
         "fast-glob": "3.3.3",

package/styles.css

@@ -376,6 +376,34 @@ o
         display: flex;
         flex: 1;
 
+        &--variant-segmented {
+            .uxf-data-grid__toolbar-tabs {
+                &-nav {
+                    background-color: theme("colors.neutral.100");
+                    gap: 4px;
+                    margin-block: 4px;
+                    padding: 2px;
+
+                    :root .dark & {
+                        background-color: theme("colors.neutral.900");
+                    }
+                }
+            }
+
+            .uxf-data-grid__toolbar-tab {
+                border-bottom-style: none;
+                padding: 8px 16px;
+
+                &.is-active {
+                    background-color: theme("colors.white");
+
+                    :root .dark & {
+                        background-color: theme("colors.black");
+                    }
+                }
+            }
+        }
+
         &-nav {
             &--desktop {
                 display: none;

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

@@ -7,5 +7,6 @@ export interface DataGridToolbarTabsProps extends DataGridControl {
     changeTabFilterBehavior?: ChangeTabFilterBehavior;
     schema: Schema<any>;
     tabCounts?: Record<string, number> | Nullish;
+    variant?: "default" | "segmented";
 }
 export declare function DataGridToolbarTabs(props: DataGridToolbarTabsProps): React.JSX.Element;

package/toolbar-tabs/toolbar-tabs.js

@@ -18,10 +18,10 @@ function Tab(props) {
         props.tabCount ? " (" + props.tabCount + ")" : ""));
 }
 function DataGridToolbarTabs(props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     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((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"); }, tabCount: props.tabCounts ? props.tabCounts[tab.name] : undefined, title: tab.label })))),
+        react_1.default.createElement("div", { className: `uxf-data-grid__toolbar-tabs uxf-data-grid__toolbar-tabs--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}` },
+            react_1.default.createElement("nav", { "aria-label": "Tabs", className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop" }, (_c = props.schema.tabs) === null || _c === void 0 ? void 0 : _c.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"); }, tabCount: props.tabCounts ? props.tabCounts[tab.name] : undefined, 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;
@@ -36,6 +36,6 @@ function DataGridToolbarTabs(props) {
                                     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("span", { className: "uxf-data-grid__toolbar-tabs-nav-text" }, (_e = (_d = props.schema.tabs) === null || _d === void 0 ? void 0 : _d.find((t) => t.name === props.state.request.tab)) === null || _e === void 0 ? void 0 : _e.label),
                     react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-button-icon", name: "caretDown", size: 16 }))))));
 }

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

@@ -12,24 +12,25 @@ import { BaseGridType, Schema } from "./schema";
 export type DataGridControlProps = DataGridControl;
 export type DataGridDataProps<Row> = DataGridFetchingResult<Row>;
 export type DataGridBaseProps<GridType extends BaseGridType, Row> = {
-    schema: Schema<GridType>;
-    gridName?: string;
-    keyExtractor?: KeyExtractor;
-    getCsvDownloadUrl?: CsvDownloadGetUrl;
-    rowHeight?: number | ((row: Row) => number) | "auto";
-    headerRowHeight?: number;
-    rowAccent?: (row: Row) => RowAccent;
-    rowClassName?: (row: Row) => string | Nullish;
-    className?: string;
-    customActions?: DataGridToolbarCustomsProps["buttons"];
+    NoRowsFallback?: NoRowsFallbackComponent;
+    SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
     actionCell?: DataGridTableProps<Row>["actionCell"];
     bodyCells?: BodyCellComponents;
+    changeTabFilterBehavior?: ChangeTabFilterBehavior;
+    className?: string;
+    customActions?: DataGridToolbarCustomsProps["buttons"];
     filterHandlers?: FilterHandlers;
-    NoRowsFallback?: NoRowsFallbackComponent;
-    SelectedRowsToolbarActions?: SelectedRowsToolbarActionsComponent;
-    isRowsSelectable?: boolean;
-    isRowSelectDisabled?: (row: Row) => boolean;
+    getCsvDownloadUrl?: CsvDownloadGetUrl;
+    gridName?: string;
+    headerRowHeight?: number;
     isDebug?: boolean;
-    changeTabFilterBehavior?: ChangeTabFilterBehavior;
+    isRowSelectDisabled?: (row: Row) => boolean;
+    isRowsSelectable?: boolean;
+    keyExtractor?: KeyExtractor;
+    rowAccent?: (row: Row) => RowAccent;
+    rowClassName?: (row: Row) => string | Nullish;
+    rowHeight?: number | ((row: Row) => number) | "auto";
+    schema: Schema<GridType>;
+    tabsVariant?: "default" | "segmented";
 };
 export type DataGridProps<GridType extends BaseGridType, Row> = DataGridBaseProps<GridType, Row> & DataGridDataProps<Row> & DataGridControlProps;