@uxf/data-grid 11.28.4 → 11.30.0

package/_components/drawer.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 interface DrawerProps {
-    title?: string;
+    title?: ReactNode;
     children?: ReactNode;
     open: boolean;
     onClose: () => void;

package/_components/drawer.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
 const react_1 = require("@floating-ui/react");
 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 modal_header_1 = require("@uxf/ui/modal-header");
 const react_2 = __importDefault(require("react"));
 const Drawer = (props) => {
     const isMounted = (0, use_is_mounted_1.useIsMounted)();
@@ -18,9 +17,7 @@ const Drawer = (props) => {
         react_2.default.createElement("div", { className: `uxf-data-grid__drawer uxf-data-grid__drawer--${props.open ? "open" : "closed"}` },
             react_2.default.createElement("div", { className: `uxf-data-grid__drawer-body-wrapper ${props.open ? "uxf-data-grid__drawer-body-wrapper--open" : ""}` },
                 react_2.default.createElement("div", { className: "uxf-data-grid__drawer-body" },
-                    react_2.default.createElement(button_1.Button, { isIconButton: true, onClick: props.onClose, variant: "text", className: "uxf-data-grid__drawer-close-button" },
-                        react_2.default.createElement(icon_1.Icon, { name: "xmarkLarge" })),
-                    react_2.default.createElement("header", { className: "uxf-data-grid__drawer-header" }, props.title),
+                    react_2.default.createElement(modal_header_1.ModalHeader, { title: props.title, onClose: props.onClose }),
                     react_2.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children))),
             react_2.default.createElement("section", { className: "uxf-data-grid__drawer-backdrop", onClick: props.onClose }))));
 };

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

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

package/filters-button/filters-button.js

@@ -31,6 +31,7 @@ const drawer_1 = require("../_components/drawer");
 const filters_1 = require("../filters");
 /** @deprecated Use DataGridFiltersButton */
 function FiltersButton(props) {
+    var _a;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     if (props.schema.filters.length === 0) {
         return null;
@@ -38,7 +39,7 @@ function FiltersButton(props) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "secondary", 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(drawer_1.Drawer, { title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Filtrování", open: isOpen, onClose: () => setIsOpen(false) },
             react_1.default.createElement(filters_1.DataGridFilters, { state: props.state, actions: props.actions, schema: props.schema, filterHandlers: props.filterHandlers }))));
 }
 exports.FiltersButton = FiltersButton;

package/hidden-columns/hidden-columns.js

@@ -4,16 +4,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridHiddenColumns = exports.HiddenColumns = void 0;
+const show_1 = require("@uxf/core-react/components/show");
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const icon_1 = require("@uxf/ui/icon");
+const text_link_1 = require("@uxf/ui/text-link");
 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
-        .filter((column) => !column.hidden)
-        .map((column) => {
-        var _a, _b, _c, _d;
-        return (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", value: !((_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), onChange: (value) => value ? props.actions.showColumn(column.name) : props.actions.hideColumn(column.name), name: column.name }));
-    })));
+    const columns = props.schema.columns.filter((c) => !c.hidden);
+    const visibleColumns = columns.filter((c) => { var _a, _b, _c, _d; return !((_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[c.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = c.config) === null || _d === void 0 ? void 0 : _d.isHidden); });
+    const hiddenColumns = columns.filter((c) => { var _a, _b, _c, _d; return (_c = (_b = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[c.name]) === null || _b === void 0 ? void 0 : _b.isHidden) !== null && _c !== void 0 ? _c : (_d = c.config) === null || _d === void 0 ? void 0 : _d.isHidden; });
+    const onToggleChange = (columnName) => (value) => value ? props.actions.showColumn(columnName) : props.actions.hideColumn(columnName);
+    const onChangeAll = (value) => () => {
+        columns.forEach((column) => {
+            value ? props.actions.showColumn(column.name) : props.actions.hideColumn(column.name);
+        });
+    };
+    return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control-columns" },
+        react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-title" },
+            react_1.default.createElement("div", null, "Zobrazen\u00E9 sloupce"),
+            react_1.default.createElement(text_link_1.TextLink, { disabled: (0, is_empty_1.isEmpty)(visibleColumns), onClick: onChangeAll(false), variant: "text" }, "skr\u00FDt v\u0161e")),
+        visibleColumns.map((column) => (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", name: column.name, onChange: onToggleChange(column.name), size: "sm", value: true, variant: "reversed" }))),
+        react_1.default.createElement(show_1.Show, { when: (0, is_empty_1.isEmpty)(visibleColumns) },
+            react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-empty-box" },
+                react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation-solid", size: 20 }),
+                "Tabulka m\u00E1 v\u0161echny sloupce skryt\u00E9. Pro zobrazen\u00ED vyberte sloupec n\u00ED\u017Ee.")),
+        react_1.default.createElement(show_1.Show, { when: (0, is_not_empty_1.isNotEmpty)(hiddenColumns) },
+            react_1.default.createElement("div", { className: "uxf-data-grid__hidden-columns-title" },
+                react_1.default.createElement("div", null, "Skryt\u00E9 sloupce"),
+                react_1.default.createElement(text_link_1.TextLink, { onClick: onChangeAll(true), variant: "text" }, "zobrazit v\u0161e")),
+            hiddenColumns.map((column) => (react_1.default.createElement(toggle_1.Toggle, { key: column.name, label: typeof column.label === "string" ? column.label : "", name: column.name, onChange: onToggleChange(column.name), size: "sm", value: false, variant: "reversed" }))))));
 }
 exports.HiddenColumns = HiddenColumns;
 exports.DataGridHiddenColumns = HiddenColumns;

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

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { Schema } from "../types";
 import { DataGridControl } from "../use-data-grid-control";
 export interface DataGridHiddenColumnsButtonProps extends DataGridControl {
+    drawerTitle?: ReactNode;
     schema: Schema<any>;
 }
 /** @deprecated Use DataGridHiddenColumnsButton */

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

@@ -31,11 +31,12 @@ const drawer_1 = require("../_components/drawer");
 const hidden_columns_1 = require("../hidden-columns");
 /** @deprecated Use DataGridHiddenColumnsButton */
 function HiddenColumnsButton(props) {
+    var _a;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "secondary", size: "sm", onClick: () => setIsOpen(true), title: "Nastaven\u00ED sloupc\u016F", className: "uxf-data-grid__plugin-button" },
             react_1.default.createElement(icon_1.Icon, { name: "table-columns" })),
-        react_1.default.createElement(drawer_1.Drawer, { open: isOpen, onClose: () => setIsOpen(false), title: "Nastaven\u00ED sloupc\u016F" },
+        react_1.default.createElement(drawer_1.Drawer, { open: isOpen, onClose: () => setIsOpen(false), title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Sloupce" },
             react_1.default.createElement(hidden_columns_1.HiddenColumns, { state: props.state, actions: props.actions, schema: props.schema }))));
 }
 exports.HiddenColumnsButton = HiddenColumnsButton;

package/package.json

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

package/styles.css

@@ -75,6 +75,8 @@
     }
 
     &__drawer {
+        --uxf-dg-drawer-max-w: 400px;
+
         @apply ease-in-out;
 
         background-color: theme("colors.gray.900/.25");
@@ -107,7 +109,7 @@
             background-color: theme("colors.white");
             box-shadow: theme("boxShadow.xl");
             height: 100%;
-            max-width: theme("maxWidth.sm");
+            max-width: var(--uxf-dg-drawer-max-w);
             position: absolute;
             right: 0;
             transform: translateX(100%);
@@ -122,8 +124,8 @@
             display: flex;
             flex-direction: column;
             height: 100%;
-            max-width: theme("maxWidth.sm");
-            overflow-y: scroll;
+            max-width: var(--uxf-dg-drawer-max-w);
+            overflow-y: auto;
             padding-bottom: theme("spacing.10");
             position: relative;
             width: 100%;
@@ -134,17 +136,6 @@
             }
         }
 
-        &-close-button {
-            margin-left: auto;
-            margin-right: theme("spacing.4");
-            margin-top: theme("spacing.4") !important;
-        }
-
-        &-header {
-            font-weight: theme("fontWeight.bold");
-            padding: theme("spacing.8") theme("spacing.4") theme("spacing.4");
-        }
-
         &-content {
             padding: theme("spacing.4");
         }
@@ -495,6 +486,46 @@
         }
     }
 
+    &__toolbar-control-columns {
+        font-size: theme("fontSize.body2");
+        font-weight: theme("fontWeight.medium");
+    }
+
+    &__hidden-columns-title {
+        display: flex;
+        gap: 8px;
+        justify-content: space-between;
+        padding: 24px 0 12px;
+
+        div {
+            text-transform: uppercase;
+        }
+
+        a {
+            text-decoration: underline;
+        }
+
+        &:first-child {
+            margin-top: -16px;
+        }
+    }
+
+    &__hidden-columns-empty-box {
+        background-color: var(--uxf-color-warning-surface-muted);
+        border: theme("borderWidth.DEFAULT") solid var(--uxf-color-warning-border);
+        border-radius: theme("borderRadius.lg");
+        color: var(--uxf-color-base-text-high-emphasis);
+        display: flex;
+        gap: 12px;
+        margin: 8px 0;
+        padding: 8px 16px;
+
+        .uxf-icon {
+            color: var(--uxf-color-warning-icon-on-muted);
+            margin-top: 4px;
+        }
+    }
+
     &__toolbar-customs {
         align-items: center;
         display: flex;