@uxf/data-grid 11.32.0 → 11.33.0

package/README.md

@@ -14,12 +14,12 @@ yarn upgrade @uxf/core@latest @uxf/ui@latest @uxf/data-grid@latest
 
 ```css
 @import url("tailwindcss/components.css");
-@import url("@uxf/data-grid/styles.css");
 @import url("@uxf/ui/button/button.css");
 @import url("@uxf/ui/button-list/button-list.css");
 @import url("@uxf/ui/calendar/calendar.css");
 @import url("@uxf/ui/checkbox/checkbox.css");
 @import url("@uxf/ui/chip/chip.css");
+@import url("@uxf/ui/dialog/dialog.css");
 @import url("@uxf/ui/dropdown/dropdown.css");
 @import url("@uxf/ui/icon/icon.css");
 @import url("@uxf/ui/label/label.css");
@@ -28,11 +28,15 @@ yarn upgrade @uxf/core@latest @uxf/ui@latest @uxf/data-grid@latest
 @import url("@uxf/ui/input/input.css");
 @import url("@uxf/ui/_input-with-popover/input-with-popover.css");
 @import url("@uxf/ui/combobox/combobox.css");
+@import url("@uxf/ui/modal-header/modal-header.css");
 @import url("@uxf/ui/multi-select/multi-select.css");
 @import url("@uxf/ui/multi-combobox/multi-combobox.css");
 @import url("@uxf/ui/pagination/pagination.css");
 @import url("@uxf/ui/select/select.css");
 @import url("@uxf/ui/toggle/toggle.css");
+
+/* must be after component css files */
+@import url("@uxf/data-grid/styles.css");
 ```
 
 ## State and actions of data-grid

package/_components/drawer.d.ts

@@ -2,8 +2,8 @@ import React, { ReactNode } from "react";
 interface DrawerProps {
     title?: ReactNode;
     children?: ReactNode;
-    open: boolean;
+    isOpen: boolean;
     onClose: () => void;
 }
-export declare const Drawer: React.FC<DrawerProps>;
+export declare function Drawer(props: DrawerProps): React.JSX.Element | null;
 export {};

package/_components/drawer.js

@@ -3,22 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Drawer = void 0;
+exports.Drawer = Drawer;
 const react_1 = require("@floating-ui/react");
 const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const dialog_1 = require("@uxf/ui/dialog");
 const modal_header_1 = require("@uxf/ui/modal-header");
 const react_2 = __importDefault(require("react"));
-const Drawer = (props) => {
+function Drawer(props) {
     const isMounted = (0, use_is_mounted_1.useIsMounted)();
     if (!isMounted) {
         return null;
     }
     return (react_2.default.createElement(react_1.FloatingPortal, null,
-        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(modal_header_1.ModalHeader, { onClose: props.onClose, title: props.title }),
-                    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 }))));
-};
-exports.Drawer = Drawer;
+        react_2.default.createElement(dialog_1.Dialog, { className: "uxf-dg-modal", onClose: props.onClose, open: props.isOpen, variant: "drawer-right" },
+            react_2.default.createElement(modal_header_1.ModalHeader, { onClose: props.onClose, title: props.title }),
+            react_2.default.createElement("div", { className: "uxf-data-grid__drawer-content" }, props.children))));
+}

package/data-grid.stories.js

@@ -87,6 +87,6 @@ function Default() {
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(toggle_1.Toggle, { label: "No border", name: "noBorder", onChange: (value) => setNoBorder(Boolean(value)), value: noBorder }),
-        react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, data: data, error: error, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
+        react_1.default.createElement(data_grid_1.DataGrid, { actionCell: actionCell, actions: actions, data: data, error: error, isLoading: isLoading, isRowSelectable: true, noBorder: noBorder, onCsvDownload: console.log, onReload: onReload, schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/export-button/export-button.js

@@ -11,7 +11,7 @@ const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
 /** @deprecated Use DataGridExportButton */
 function ExportButton(props) {
-    return (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__plugin-button", isIconButton: true, onClick: () => props.onCsvDownload((0, utils_1.createRequest)(props.state.request)), title: "St\u00E1hnout CSV", variant: "secondary" },
+    return (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__plugin-button", isIconButton: true, onClick: () => props.onCsvDownload((0, utils_1.createRequest)(props.state.request)), size: "sm", title: "St\u00E1hnout CSV", variant: "secondary" },
         react_1.default.createElement(icon_1.Icon, { name: "file-arrow-down" })));
 }
 exports.DataGridExportButton = ExportButton;

package/filters-button/filters-button.js

@@ -40,7 +40,7 @@ function FiltersButton(props) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__plugin-button", isIconButton: true, onClick: () => setIsOpen(true), size: "sm", title: "Filtrovat", variant: "secondary" },
             react_1.default.createElement(icon_1.Icon, { name: "filter" })),
-        react_1.default.createElement(drawer_1.Drawer, { onClose: () => setIsOpen(false), open: isOpen, title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Filtrování" },
+        react_1.default.createElement(drawer_1.Drawer, { isOpen: isOpen, onClose: () => setIsOpen(false), title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Filtrování" },
             react_1.default.createElement(filters_1.DataGridFilters, { actions: props.actions, filterHandlers: props.filterHandlers, schema: props.schema, state: props.state }))));
 }
 exports.DataGridFiltersButton = FiltersButton;

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

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

package/hidden-columns/hidden-columns.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.DataGridHiddenColumns = void 0;
-exports.HiddenColumns = HiddenColumns;
+exports.DataGridHiddenColumns = DataGridHiddenColumns;
 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");
@@ -12,8 +11,7 @@ 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) {
+function DataGridHiddenColumns(props) {
     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; });
@@ -22,7 +20,7 @@ function HiddenColumns(props) {
     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")),
+            react_1.default.createElement(text_link_1.TextLink, { isDisabled: (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" },
@@ -34,4 +32,3 @@ function HiddenColumns(props) {
                 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.DataGridHiddenColumns = HiddenColumns;

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

@@ -5,6 +5,4 @@ export interface DataGridHiddenColumnsButtonProps extends DataGridControl {
     drawerTitle?: ReactNode;
     schema: Schema<any>;
 }
-/** @deprecated Use DataGridHiddenColumnsButton */
-export declare function HiddenColumnsButton(props: DataGridHiddenColumnsButtonProps): React.JSX.Element;
-export declare const DataGridHiddenColumnsButton: typeof HiddenColumnsButton;
+export declare function DataGridHiddenColumnsButton(props: DataGridHiddenColumnsButtonProps): React.JSX.Element;

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

@@ -23,21 +23,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGridHiddenColumnsButton = void 0;
-exports.HiddenColumnsButton = HiddenColumnsButton;
+exports.DataGridHiddenColumnsButton = DataGridHiddenColumnsButton;
 const button_1 = require("@uxf/ui/button");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importStar(require("react"));
 const drawer_1 = require("../_components/drawer");
 const hidden_columns_1 = require("../hidden-columns");
-/** @deprecated Use DataGridHiddenColumnsButton */
-function HiddenColumnsButton(props) {
+function DataGridHiddenColumnsButton(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, { className: "uxf-data-grid__plugin-button", isIconButton: true, onClick: () => setIsOpen(true), size: "sm", title: "Nastaven\u00ED sloupc\u016F", variant: "secondary" },
             react_1.default.createElement(icon_1.Icon, { name: "table-columns" })),
-        react_1.default.createElement(drawer_1.Drawer, { onClose: () => setIsOpen(false), open: isOpen, title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Sloupce" },
-            react_1.default.createElement(hidden_columns_1.HiddenColumns, { actions: props.actions, schema: props.schema, state: props.state }))));
+        react_1.default.createElement(drawer_1.Drawer, { isOpen: isOpen, onClose: () => setIsOpen(false), title: (_a = props.drawerTitle) !== null && _a !== void 0 ? _a : "Sloupce" },
+            react_1.default.createElement(hidden_columns_1.DataGridHiddenColumns, { actions: props.actions, schema: props.schema, state: props.state }))));
 }
-exports.DataGridHiddenColumnsButton = HiddenColumnsButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "11.32.0",
+  "version": "11.33.0",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@uxf/core": "11.32.0",
-    "@uxf/core-react": "11.32.0",
-    "@uxf/ui": "11.32.0",
+    "@uxf/core-react": "11.33.0",
+    "@uxf/ui": "11.33.0",
     "dayjs": "1.11.13",
     "deepmerge": "4.3.1",
     "fast-glob": "3.3.2",

package/styles.css

@@ -75,9 +75,7 @@
     }
 
     &__drawer {
-        --uxf-dg-drawer-max-w: 400px;
-
-        @apply ease-in-out;
+        /* @apply ease-in-out; TODO animate
 
         background-color: theme("colors.gray.900/.25");
         inset: 0;
@@ -104,12 +102,13 @@
         }
 
         &-body-wrapper {
+            --panel-max-w: 400px;
+
             @apply transition-all duration-500 ease-in-out;
 
-            background-color: theme("colors.white");
-            box-shadow: theme("boxShadow.xl");
+            !* background-color: theme("colors.white"); *!
             height: 100%;
-            max-width: var(--uxf-dg-drawer-max-w);
+            max-width: var(--panel-max-w);
             position: absolute;
             right: 0;
             transform: translateX(100%);
@@ -118,26 +117,10 @@
             &--open {
                 transform: translateX(0);
             }
-        }
-
-        &-body {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            max-width: var(--uxf-dg-drawer-max-w);
-            overflow-y: auto;
-            padding-bottom: theme("spacing.10");
-            position: relative;
-            width: 100%;
-
-            :root .dark & {
-                background-color: theme("colors.gray.950");
-                color: theme("colors.gray.100");
-            }
-        }
+        } */
 
         &-content {
-            padding: theme("spacing.4");
+            padding: theme("spacing.4") theme("spacing.4") theme("spacing.14");
         }
 
         &-backdrop {
@@ -560,6 +543,10 @@
     }
 }
 
+.uxf-dg-modal {
+    --panel-max-w: 400px;
+}
+
 /* TODO: tohle je imo k ničemu, že Vejvis? */
 
 /* .rdg-cell.action {

package/table-v2/styles.css

@@ -1,21 +1,24 @@
 :root {
     --uxf-dg-table-font-size: theme("fontSize.sm");
     --uxf-dg-table-cell-padding: theme("spacing.2");
-    --uxf-dg-table-action-cell-bg-color: theme("colors.white");
-    --uxf-dg-table-action-cell-left-divider-color: theme("colors.lightBorder");
     --uxf-dg-table-action-cell-left-divider-size: 1px;
     --uxf-dg-table-row-divider-size: 1px;
-    --uxf-dg-table-row-divider-color: theme("colors.lightBorder");
-    --uxf-dg-table-row-bg-color-odd: theme("colors.white");
-    --uxf-dg-table-row-bg-color-even: theme("colors.white");
-    --uxf-dg-table-header-action-cell-bg-color: theme("colors.neutral.50");
-    --uxf-dg-table-header-bg-color: theme("colors.neutral.50");
-    --uxf-dg-table-header-color: theme("colors.neutral.400");
-    --uxf-dg-table-header-divider-size: var(--uxf-dg-table-row-divider-size);
-    --uxf-dg-table-header-divider-color: var(--uxf-dg-table-row-divider-color);
 }
 
 .uxf-dg-table {
+    --uxf-dg-table-text-color: var(--uxf-color-base-text-high-emphasis);
+    --uxf-dg-table-action-cell-left-divider-color: var(--uxf-color-base-border-border);
+    --uxf-dg-table-row-divider-color: var(--uxf-color-base-border-border);
+    --uxf-dg-table-action-cell-bg-color: var(--uxf-color-base-surface-main);
+    --uxf-dg-table-row-bg-color-odd: var(--uxf-color-base-surface-main);
+    --uxf-dg-table-row-bg-color-even: var(--uxf-color-base-surface-main);
+    --uxf-dg-table-header-action-cell-bg-color: var(--uxf-color-base-surface-background);
+    --uxf-dg-table-header-bg-color: var(--uxf-color-base-surface-background);
+    --uxf-dg-table-header-color: var(--uxf-color-base-text-disabled);
+    --uxf-dg-table-header-divider-size: var(--uxf-dg-table-row-divider-size);
+    --uxf-dg-table-header-divider-color: var(--uxf-dg-table-row-divider-color);
+
+    color: var(--uxf-dg-table-text-color);
     display: grid;
     font-size: var(--uxf-dg-table-font-size);
     overflow-x: auto;
@@ -70,6 +73,10 @@
                 width: 12px;
             }
         }
+
+        span {
+            @apply truncate;
+        }
     }
 
     &__action-cell {
@@ -96,7 +103,7 @@
         z-index: 2;
 
         &::before {
-            background-color: theme("colors.lightBorder");
+            background-color: var(--uxf-color-base-border-border);
             bottom: 0;
             content: "";
             position: absolute;