@uxf/data-grid 11.47.1 → 11.48.0

package/_components/grid-dialog.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+interface Props {
+    isOpen: boolean;
+    children: ReactNode;
+    close: () => void;
+}
+/** @deprecated Remove me @Škodík */
+export declare function GridDialog(props: Props): React.JSX.Element;
+export {};

package/_components/grid-dialog.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridDialog = GridDialog;
+const react_1 = require("@floating-ui/react");
+const use_latest_1 = require("@uxf/core-react/hooks/use-latest");
+const dialog_1 = require("@uxf/ui/dialog");
+const react_2 = __importDefault(require("react"));
+/** @deprecated Remove me @Škodík */
+function GridDialog(props) {
+    const { refs, context } = (0, react_1.useFloating)({
+        open: props.isOpen,
+        onOpenChange(nextOpen, event, reason) {
+            if (reason === "outside-press") {
+                props.close();
+            }
+        },
+    });
+    const click = (0, react_1.useClick)(context);
+    const role = (0, react_1.useRole)(context);
+    const dismiss = (0, react_1.useDismiss)(context, { outsidePressEvent: "mousedown" });
+    const { getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
+    const latestContext = (0, use_latest_1.useLatest)(context);
+    return (react_2.default.createElement(dialog_1.Dialog, { className: "uxf-dg-modal", context: latestContext.current, forwardedRef: refs.setFloating, getFloatingProps: getFloatingProps, isBackdropCloseDisabled: false, isOpen: props.isOpen, variant: "drawer-right" }, props.children));
+}

package/data-grid-v2.stories.js

@@ -86,7 +86,7 @@ function Default() {
         state,
     });
     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 }),
+        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, isLoading: isLoading, isRowSelectable: true, onCsvDownload: console.log, reload: reload, rowHeight: "auto", schema: schemaWithFrontendConfig, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }

package/filters-button/filters-button.js

@@ -1,27 +1,44 @@
 "use strict";
 "use client";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridFiltersButton = DataGridFiltersButton;
-const button_1 = require("@uxf/ui/button");
-const dialog_1 = require("@uxf/ui/dialog/dialog");
-const icon_1 = require("@uxf/ui/icon");
-const react_1 = __importDefault(require("react"));
+const icon_button_1 = require("@uxf/ui/icon-button");
+const react_1 = __importStar(require("react"));
 const drawer_1 = require("../_components/drawer");
+const grid_dialog_1 = require("../_components/grid-dialog");
 const filters_1 = require("../filters");
 function DataGridFiltersButton(props) {
-    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)();
+    var _a;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     if (props.schema.filters.length === 0) {
         return null;
     }
     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: () => {
-                var _a;
-                return openDialog(react_1.default.createElement(drawer_1.Drawer, { onClose: closeDialog, 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 })));
-            }, size: "sm", title: "Filtrovat", variant: "secondary" },
-            react_1.default.createElement(icon_1.Icon, { name: "filter" })),
-        react_1.default.createElement(DialogProvider, { className: "uxf-dg-modal", variant: "drawer-right" })));
+        react_1.default.createElement(icon_button_1.IconButton, { className: "uxf-data-grid__plugin-button", iconName: "filter", label: "Filtry", onClick: () => setIsOpen(true), size: "sm", title: "Filtrovat", variant: "secondary" }),
+        react_1.default.createElement(grid_dialog_1.GridDialog, { close: () => setIsOpen(false), isOpen: isOpen },
+            react_1.default.createElement(drawer_1.Drawer, { 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 })))));
 }

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

@@ -1,24 +1,41 @@
 "use strict";
 "use client";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridHiddenColumnsButton = DataGridHiddenColumnsButton;
-const button_1 = require("@uxf/ui/button");
-const dialog_1 = require("@uxf/ui/dialog/dialog");
-const icon_1 = require("@uxf/ui/icon");
-const react_1 = __importDefault(require("react"));
+const icon_button_1 = require("@uxf/ui/icon-button");
+const react_1 = __importStar(require("react"));
 const drawer_1 = require("../_components/drawer");
+const grid_dialog_1 = require("../_components/grid-dialog");
 const hidden_columns_1 = require("../hidden-columns");
 function DataGridHiddenColumnsButton(props) {
-    const { openDialog, DialogProvider, closeDialog } = (0, dialog_1.useDialog)();
+    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: () => {
-                var _a;
-                return openDialog(react_1.default.createElement(drawer_1.Drawer, { onClose: closeDialog, 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 })));
-            }, size: "sm", title: "Nastaven\u00ED sloupc\u016F", variant: "secondary" },
-            react_1.default.createElement(icon_1.Icon, { name: "table-columns" })),
-        react_1.default.createElement(DialogProvider, { className: "uxf-dg-modal", variant: "drawer-right" })));
+        react_1.default.createElement(icon_button_1.IconButton, { className: "uxf-data-grid__plugin-button", iconName: "table-columns", label: "Nastaven\u00ED sloupc\u016F", onClick: () => setIsOpen(true), size: "sm", variant: "secondary" }),
+        react_1.default.createElement(grid_dialog_1.GridDialog, { close: () => setIsOpen(false), isOpen: isOpen },
+            react_1.default.createElement(drawer_1.Drawer, { 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 })))));
 }

package/package.json

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

package/table-v2/components/action-cell-wrapper.d.ts

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

package/table-v2/components/action-cell-wrapper.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCellWrapper = ActionCellWrapper;
+const react_1 = __importDefault(require("react"));
+function ActionCellWrapper(props) {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__action-cell" }, props.children);
+}

package/table-v2/components/action-cell.d.ts

@@ -1,7 +1,8 @@
 import { ButtonListProps } from "@uxf/ui/button-list";
-import React from "react";
+import React, { ReactNode } from "react";
 export interface ActionCellProps {
-    buttons: ButtonListProps["buttons"];
-    visibleButtonsCount: ButtonListProps["visibleButtonsCount"];
+    children?: ReactNode;
+    buttons?: ButtonListProps["buttons"];
+    visibleButtonsCount?: ButtonListProps["visibleButtonsCount"];
 }
 export declare function ActionCell(props: ActionCellProps): React.JSX.Element;

package/table-v2/components/action-cell.js

@@ -4,9 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionCell = ActionCell;
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const button_list_1 = require("@uxf/ui/button-list");
 const react_1 = __importDefault(require("react"));
 function ActionCell(props) {
-    return (react_1.default.createElement("div", { className: "uxf-dg-table__action-cell" },
-        react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, size: "sm", variant: "secondary", visibleButtonsCount: props.visibleButtonsCount })));
+    var _a;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        (0, is_not_nil_1.isNotNil)(props.buttons) && (0, is_not_empty_1.isNotEmpty)(props.buttons) && (react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, size: "sm", variant: "secondary", visibleButtonsCount: (_a = props.visibleButtonsCount) !== null && _a !== void 0 ? _a : 0 })),
+        props.children));
 }

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

@@ -1,4 +1,5 @@
 import { ActionCell } from "./action-cell";
+import { ActionCellWrapper } from "./action-cell-wrapper";
 import { Body } from "./body";
 import { Cell } from "./cell";
 import { Header } from "./header";
@@ -12,6 +13,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<import("./
     HeaderCell: import("react").ForwardRefExoticComponent<import("./header-cell").HeaderCellProps & import("react").RefAttributes<HTMLDivElement>>;
     Cell: typeof Cell;
     ActionCell: typeof ActionCell;
+    ActionCellWrapper: typeof ActionCellWrapper;
     HeaderActionCell: typeof HeaderActionCell;
     Header: typeof Header;
     SelectRowCheckbox: typeof SelectRowCheckbox;

package/table-v2/components/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
 const action_cell_1 = require("./action-cell");
+const action_cell_wrapper_1 = require("./action-cell-wrapper");
 const body_1 = require("./body");
 const cell_1 = require("./cell");
 const header_1 = require("./header");
@@ -17,6 +18,7 @@ exports.Table = Object.assign(root_1.Root, {
     HeaderCell: header_cell_1.HeaderCell,
     Cell: cell_1.Cell,
     ActionCell: action_cell_1.ActionCell,
+    ActionCellWrapper: action_cell_wrapper_1.ActionCellWrapper,
     HeaderActionCell: header_action_cell_1.HeaderActionCell,
     Header: header_1.Header,
     SelectRowCheckbox: select_row_checkbox_1.SelectRowCheckbox,

package/table-v2/table-v2.js

@@ -71,5 +71,6 @@ function DataGridTableV2(props) {
                 return (react_1.default.createElement(components_1.Table.Cell, { column: column, key: column.name },
                     react_1.default.createElement(BodyCell, { column: column, reload: props.reload, row: row, value: row[column.name] })));
             }),
-            (0, is_not_nil_1.isNotNil)(props.actionCell) && react_1.default.createElement(props.actionCell.Component, { reload: props.reload, row: row })))))));
+            (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCellWrapper, null,
+                react_1.default.createElement(props.actionCell.Component, { reload: props.reload, row: row })))))))));
 }

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

@@ -11,12 +11,13 @@ const schema_1 = require("../_story-utils/schema");
 const body_cell_1 = require("../body-cell");
 const hidden_columns_button_1 = require("../hidden-columns-button");
 const use_data_grid_control_1 = require("../use-data-grid-control");
+const action_cell_1 = require("./components/action-cell");
 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 });
     const reload = () => new Promise(() => null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: actions, schema: schema_1.schema, state: state }),
-        react_1.default.createElement(table_v2_1.DataGridTableV2, { actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") }, actions: actions, bodyCells: body_cell_1.BodyCells, data: data_1.data, error: undefined, isLoading: true, isRowSelectable: true, reload: reload, schema: schema_1.schema, state: state }),
+        react_1.default.createElement(table_v2_1.DataGridTableV2, { actionCell: { width: 150, Component: () => react_1.default.createElement(action_cell_1.ActionCell, null, "Action cell") }, actions: actions, bodyCells: body_cell_1.BodyCells, data: data_1.data, error: undefined, isLoading: true, isRowSelectable: true, reload: reload, schema: schema_1.schema, state: state }),
         react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
 }