@uxf/data-grid 11.74.0 → 11.74.2

package/table/types.d.ts

@@ -0,0 +1,19 @@
+import { Nullish } from "@uxf/core/types";
+import { BodyCellComponents, DataGridActionCell, KeyExtractor, RowAccent, Schema } from "../types";
+import { DataGridControl } from "../use-data-grid-control";
+import { NoRowsFallbackComponent } from "./no-rows-fallback";
+export interface DataGridTableProps<Row> extends DataGridControl {
+    schema: Schema<any>;
+    data: Row[];
+    isLoading?: boolean;
+    error?: any | Nullish;
+    reload: () => Promise<any>;
+    rowHeight?: number | ((row: Row) => number);
+    headerRowHeight?: number;
+    rowClass?: (row: Row) => RowAccent;
+    keyExtractor?: KeyExtractor;
+    bodyCells?: BodyCellComponents;
+    actionCell?: DataGridActionCell<Row>;
+    NoRowsFallback?: NoRowsFallbackComponent;
+    isRowSelectable?: boolean;
+}

package/table/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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) {
+    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/body.d.ts

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

package/table-v2/components/body.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.Body = Body;
+const react_1 = __importDefault(require("react"));
+function Body(props) {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__body" }, props.children);
+}

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

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+import { Column } from "../../types";
+interface CellProps {
+    column: Column<any, any>;
+    children: ReactNode;
+}
+export declare function Cell(props: CellProps): React.JSX.Element;
+export {};

package/table-v2/components/cell.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.Cell = Cell;
+const react_1 = __importDefault(require("react"));
+function Cell(props) {
+    return react_1.default.createElement("div", { className: `uxf-dg-table__cell uxf-dg-table__cell--type-${props.column.type}` }, props.children);
+}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function HeaderActionCell(): React.JSX.Element;

package/table-v2/components/header-action-cell.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.HeaderActionCell = HeaderActionCell;
+const react_1 = __importDefault(require("react"));
+function HeaderActionCell() {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__action-cell uxf-dg-table__action-cell--header" });
+}

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

@@ -0,0 +1,10 @@
+import { Nullish } from "@uxf/core/types";
+import React from "react";
+import { Column, DataGridSort } from "../../types";
+export interface HeaderCellProps {
+    column: Column<any, any>;
+    onResizeStart: () => void;
+    sort: DataGridSort | Nullish;
+    onClick?: () => void;
+}
+export declare const HeaderCell: React.ForwardRefExoticComponent<HeaderCellProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,47 @@
+"use strict";
+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.HeaderCell = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importStar(require("react"));
+function HeaderCellComponent(props, ref) {
+    var _a, _b, _c, _d;
+    const iconName = !props.column.sort
+        ? null
+        : ((_a = props.sort) === null || _a === void 0 ? void 0 : _a.dir) === "asc"
+            ? "sort-up"
+            : ((_b = props.sort) === null || _b === void 0 ? void 0 : _b.dir) === "desc"
+                ? "sort-down"
+                : "sort";
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    react_1.default.createElement("div", { className: (0, cx_1.cx)(`uxf-dg-table__cell uxf-dg-table__cell--header uxf-dg-table__cell--type-${props.column.type}`, props.column.sort && "is-sortable", ((_c = props.sort) === null || _c === void 0 ? void 0 : _c.dir) === "asc" && "is-sorted-asc", ((_d = props.sort) === null || _d === void 0 ? void 0 : _d.dir) === "desc" && "is-sorted-desc"), onClick: props.onClick, ref: ref },
+        props.column.label,
+        iconName && react_1.default.createElement(icon_1.Icon, { className: "ml-auto", name: iconName }),
+        react_1.default.createElement("button", { className: "uxf-dg-table__column-resize-handle", onClick: (event) => event.stopPropagation(), onMouseDown: props.onResizeStart })));
+}
+exports.HeaderCell = (0, react_1.forwardRef)(HeaderCellComponent);
+exports.HeaderCell.displayName = "HeaderCell";

package/table-v2/components/header-select-all-rows-checkbox.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { KeyExtractor } from "../../types";
+import { DataGridTableProps } from "../types";
+interface SelectRowCheckboxProps extends Pick<DataGridTableProps<any>, "state" | "data" | "actions"> {
+    keyExtractor: KeyExtractor;
+}
+export declare function HeaderSelectAllRowsCheckbox(props: SelectRowCheckboxProps): React.JSX.Element;
+export {};

package/table-v2/components/header-select-all-rows-checkbox.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSelectAllRowsCheckbox = HeaderSelectAllRowsCheckbox;
+const translations_1 = require("@uxf/core-react/translations");
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const checkbox_input_1 = require("@uxf/ui/checkbox-input");
+const react_1 = __importDefault(require("react"));
+function HeaderSelectAllRowsCheckbox(props) {
+    var _a;
+    const t = (0, translations_1.useUxfTranslation)();
+    const selectedRows = (_a = props.state.selectedRows) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY;
+    const isAllRowsSelected = (0, is_not_empty_1.isNotEmpty)(props.data) &&
+        props.data.every((row) => selectedRows.find((selectedRow) => props.keyExtractor(row) === props.keyExtractor(selectedRow)));
+    const isIndeterminate = !isAllRowsSelected && (0, is_not_empty_1.isNotEmpty)(selectedRows);
+    const selectAllRowsHandler = () => {
+        props.actions.setSelectedRows(isAllRowsSelected ? [] : props.data);
+    };
+    return (react_1.default.createElement("div", { className: "uxf-dg-table__cell uxf-dg-table__cell--header uxf-dg-table__select-all-rows-cell" },
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { hiddenLabel: true, indeterminate: isIndeterminate, label: t("uxf-data-grid-checkboxes:select-all"), name: "select-all-rows", onChange: selectAllRowsHandler, value: isAllRowsSelected })));
+}

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

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

package/table-v2/components/header.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.Header = Header;
+const react_1 = __importDefault(require("react"));
+function Header(props) {
+    return react_1.default.createElement("div", { className: "uxf-dg-table__header" }, props.children);
+}

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

@@ -0,0 +1,21 @@
+import { ActionCell } from "./action-cell";
+import { ActionCellWrapper } from "./action-cell-wrapper";
+import { Body } from "./body";
+import { Cell } from "./cell";
+import { Header } from "./header";
+import { HeaderActionCell } from "./header-action-cell";
+import { HeaderSelectAllRowsCheckbox } from "./header-select-all-rows-checkbox";
+import { Row } from "./row";
+import { SelectRowCheckbox } from "./select-row-checkbox";
+export declare const Table: import("react").ForwardRefExoticComponent<import("./root").RootProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Body: typeof Body;
+    Row: typeof Row;
+    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;
+    HeaderSelectAllRowsCheckbox: typeof HeaderSelectAllRowsCheckbox;
+};

package/table-v2/components/index.js

@@ -0,0 +1,26 @@
+"use strict";
+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");
+const header_action_cell_1 = require("./header-action-cell");
+const header_cell_1 = require("./header-cell");
+const header_select_all_rows_checkbox_1 = require("./header-select-all-rows-checkbox");
+const root_1 = require("./root");
+const row_1 = require("./row");
+const select_row_checkbox_1 = require("./select-row-checkbox");
+exports.Table = Object.assign(root_1.Root, {
+    Body: body_1.Body,
+    Row: row_1.Row,
+    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,
+    HeaderSelectAllRowsCheckbox: header_select_all_rows_checkbox_1.HeaderSelectAllRowsCheckbox,
+});

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+export interface RootProps {
+    gridTemplateColumns: string;
+    gridTemplateRows?: string;
+    children: ReactNode;
+}
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;

package/table-v2/components/root.js

@@ -0,0 +1,31 @@
+"use strict";
+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.Root = void 0;
+const react_1 = __importStar(require("react"));
+function RootComponent(props, ref) {
+    return (react_1.default.createElement("div", { className: "uxf-dg-table", ref: ref, style: { gridTemplateColumns: props.gridTemplateColumns, gridTemplateRows: props.gridTemplateRows } }, props.children));
+}
+exports.Root = (0, react_1.forwardRef)(RootComponent);

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+interface RowProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function Row(props: RowProps): React.JSX.Element;
+export {};

package/table-v2/components/row.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = Row;
+const react_1 = __importDefault(require("react"));
+function Row(props) {
+    var _a;
+    return react_1.default.createElement("div", { className: `uxf-dg-table__row ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.children);
+}

package/table-v2/components/select-row-checkbox.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface SelectRowCheckboxProps {
+    isRowSelected: boolean;
+    onSelectRowChange: () => void;
+}
+export declare function SelectRowCheckbox(props: SelectRowCheckboxProps): React.JSX.Element;
+export {};

package/table-v2/components/select-row-checkbox.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectRowCheckbox = SelectRowCheckbox;
+const translations_1 = require("@uxf/core-react/translations");
+const checkbox_input_1 = require("@uxf/ui/checkbox-input");
+const react_1 = __importDefault(require("react"));
+function SelectRowCheckbox(props) {
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement("div", { className: "uxf-dg-table__cell uxf-dg-table__select-row-cell" },
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: "*:mt-0", hiddenLabel: true, label: t("uxf-data-grid-checkboxes:select"), name: "select-row", onChange: props.onSelectRowChange, value: props.isRowSelected })));
+}

package/table-v2/hooks/use-resizable-columns.d.ts

@@ -0,0 +1,9 @@
+import { Nullish } from "@uxf/core/types";
+import { Column } from "../../types";
+import { DataGridControl } from "../../use-data-grid-control";
+import { DataGridTableProps } from "../types";
+export declare function useResizableColumns(columns: Column<any, any>[], actionCell: DataGridTableProps<any>["actionCell"], actions: DataGridControl["actions"], selectRowsCellWidth: number | Nullish): {
+    tableRef: import("react").RefObject<HTMLDivElement>;
+    columnRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
+    onResizeStart(index: number): void;
+};

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizableColumns = useResizableColumns;
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const rem_1 = require("@uxf/styles/units/rem");
+const react_1 = require("react");
+const get_grid_template_columns_1 = require("../utils/get-grid-template-columns");
+const COLUMN_ABSOLUTE_MIN_WIDTH = 50;
+function useResizableColumns(columns, actionCell, actions, selectRowsCellWidth) {
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
+    const tableRef = (0, react_1.useRef)(null);
+    const columnRefs = (0, react_1.useRef)([]);
+    const actionCellWidth = actionCell === null || actionCell === void 0 ? void 0 : actionCell.width;
+    (0, react_1.useEffect)(() => {
+        let tempColumnSizes = [];
+        const onMouseMove = (e) => {
+            const gridColumns = columns.map((column, i) => {
+                var _a, _b, _c, _d, _e, _f;
+                const columnRef = columnRefs.current[i];
+                const columnMinWidth = (_b = (_a = column.config) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : COLUMN_ABSOLUTE_MIN_WIDTH;
+                if (i === activeIndex) {
+                    const tableScrollLeft = (_d = (_c = tableRef.current) === null || _c === void 0 ? void 0 : _c.scrollLeft) !== null && _d !== void 0 ? _d : 0;
+                    const columnOffsetLeft = (_e = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetLeft) !== null && _e !== void 0 ? _e : 0;
+                    const clickPositionX = e.clientX + tableScrollLeft;
+                    const width = clickPositionX - columnOffsetLeft;
+                    return width >= columnMinWidth ? width : columnMinWidth;
+                }
+                return (_f = columnRef === null || columnRef === void 0 ? void 0 : columnRef.offsetWidth) !== null && _f !== void 0 ? _f : columnMinWidth;
+            });
+            // TODO @vejvis - jak tohle udělat lépe??
+            tempColumnSizes = gridColumns;
+            if (tableRef.current) {
+                tableRef.current.style.gridTemplateColumns = (0, get_grid_template_columns_1.getGridTemplateColumns)({
+                    actionColumnWidth: actionCellWidth,
+                    columns: gridColumns.map((size) => ({
+                        width: (0, rem_1.rem)(size),
+                        minWidth: null,
+                    })),
+                    selectRowColumnWidth: selectRowsCellWidth,
+                });
+            }
+        };
+        const onMouseUp = () => {
+            setActiveIndex(null);
+            if (!(0, is_empty_1.isEmpty)(tempColumnSizes)) {
+                const userConfigColumns = {};
+                columns.forEach((column, index) => {
+                    userConfigColumns[column.name] = { width: tempColumnSizes[index] };
+                });
+                actions.updateUserConfig({ columns: userConfigColumns });
+            }
+        };
+        if (activeIndex !== null) {
+            window.addEventListener("mousemove", onMouseMove);
+            window.addEventListener("mouseup", onMouseUp);
+        }
+        return () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+    }, [columns, actions, actionCellWidth, activeIndex, selectRowsCellWidth]);
+    return {
+        tableRef,
+        columnRefs,
+        onResizeStart(index) {
+            setActiveIndex(index);
+        },
+    };
+}

package/table-v2/index.d.ts

@@ -0,0 +1 @@
+export * from "./table-v2";

package/table-v2/index.js

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./table-v2"), exports);

package/table-v2/no-rows-fallback.d.ts

@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from "react";
+export interface NoRowsFallbackProps {
+    error?: any;
+    isLoading: boolean;
+}
+export type NoRowsFallbackComponent = FunctionComponent<NoRowsFallbackProps>;
+export declare function NoRowsFallback(props: NoRowsFallbackProps): React.JSX.Element;

package/table-v2/no-rows-fallback.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoRowsFallback = NoRowsFallback;
+const translations_1 = require("@uxf/core-react/translations");
+const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+function NoRowsFallback(props) {
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dg-table__no-rows-fallback", props.isLoading && "is-loading", props.error && "is-error") }, props.isLoading ? (react_1.default.createElement(react_1.default.Fragment, null, t("uxf-data-grid-no-rows-fallback:loading"))) : props.error ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(icon_1.Icon, { name: "warning", size: 24 }),
+        react_1.default.createElement("p", null, t("uxf-data-grid-no-rows-fallback:error")))) : (react_1.default.createElement(react_1.default.Fragment, null, t("uxf-data-grid-no-rows-fallback:no-records")))));
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { DataGridTableProps } from "./types";
+export declare function DataGridTableV2(props: DataGridTableProps<any>): React.JSX.Element;

package/table-v2/table-v2.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridTableV2 = DataGridTableV2;
+const show_1 = require("@uxf/core-react/components/show");
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+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 format_css_value_1 = require("@uxf/styles/units/format-css-value");
+const rem_1 = require("@uxf/styles/units/rem");
+const react_1 = __importDefault(require("react"));
+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 no_rows_fallback_1 = require("./no-rows-fallback");
+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 = 32;
+const defaultKeyExtractor = (r) => r.id;
+const DefaultBodyCell = () => "Unknown body cell.";
+function DataGridTableV2(props) {
+    var _a, _b, _c, _d, _e, _f;
+    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 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 gridTemplateBasicColumns = visibleColumns
+        .map((column) => {
+        var _a;
+        const userColumnConfig = (_a = props.state.userConfig.columns) === null || _a === void 0 ? void 0 : _a[column.name];
+        const hasUserConfigWidthOrMinWidth = (userColumnConfig === null || userColumnConfig === void 0 ? void 0 : userColumnConfig.width) || (userColumnConfig === null || userColumnConfig === void 0 ? void 0 : userColumnConfig.minWidth);
+        return hasUserConfigWidthOrMinWidth ? userColumnConfig : column.config;
+    })
+        .map((columnConfig) => {
+        var _a;
+        return ({
+            width: (0, is_nil_1.isNil)(columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.width) ? "1fr" : ((_a = (0, format_css_value_1.formatCssValue)(columnConfig.width)) !== null && _a !== void 0 ? _a : ""),
+            minWidth: (0, is_nil_1.isNil)(columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.minWidth) ? null : (0, rem_1.rem)(columnConfig.minWidth),
+        });
+    });
+    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);
+        const newSelectedRows = isRowSelected
+            ? selectedRows.filter((row) => keyExtractor(row) !== rowId)
+            : [...selectedRows, props.data.find((row) => keyExtractor(row) === rowId)];
+        props.actions.setSelectedRows(newSelectedRows);
+    };
+    const NoRowsFallback = (_f = props.NoRowsFallback) !== null && _f !== void 0 ? _f : no_rows_fallback_1.NoRowsFallback;
+    return (react_1.default.createElement(components_1.Table, { gridTemplateColumns: gridTemplateColumns, gridTemplateRows: gridTemplateRows, ref: tableRef },
+        react_1.default.createElement(components_1.Table.Header, null,
+            react_1.default.createElement(components_1.Table.Row, null,
+                react_1.default.createElement(show_1.Show, { when: Boolean(props.isRowSelectable) },
+                    react_1.default.createElement(header_select_all_rows_checkbox_1.HeaderSelectAllRowsCheckbox, { actions: props.actions, data: props.data, keyExtractor: keyExtractor, state: props.state })),
+                visibleColumns.map((column, index) => {
+                    var _a;
+                    return (react_1.default.createElement(components_1.Table.HeaderCell, { column: column, key: column.name, onClick: column.sort ? () => props.actions.sort(column.name) : undefined, onResizeStart: () => onResizeStart(index), ref: (el) => {
+                            columnRefs.current[index] = el;
+                        }, sort: ((_a = props.state.request.s) === null || _a === void 0 ? void 0 : _a.name) === column.name ? props.state.request.s : null }));
+                }),
+                react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.actionCell) },
+                    react_1.default.createElement(components_1.Table.HeaderActionCell, null)))),
+        react_1.default.createElement(components_1.Table.Body, null, (0, is_empty_1.isEmpty)(props.data) ? (react_1.default.createElement(NoRowsFallback, { error: props.error, isLoading: Boolean(props.isLoading) })) : (props.data.map((row) => {
+            var _a, _b;
+            return (react_1.default.createElement(components_1.Table.Row, { className: `${(0, is_not_nil_1.isNotNil)(props.rowAccent) ? "uxf-dg-table__row--" + props.rowAccent(row) : ""} ${(_b = (_a = props.rowClassName) === null || _a === void 0 ? void 0 : _a.call(props, row)) !== null && _b !== void 0 ? _b : ""}`, key: keyExtractor(row) },
+                react_1.default.createElement(show_1.Show, { when: Boolean(props.isRowSelectable) },
+                    react_1.default.createElement(select_row_checkbox_1.SelectRowCheckbox, { isRowSelected: selectedRows.find((r) => keyExtractor(r) === keyExtractor(row)), onSelectRowChange: selectRowHandler(keyExtractor(row)) })),
+                visibleColumns.map((column) => {
+                    var _a, _b, _c, _d;
+                    const BodyCell = 
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    (_d = (_b = (_a = props.bodyCells) === null || _a === void 0 ? void 0 : _a[column.type]) !== null && _b !== void 0 ? _b : (_c = props.bodyCells) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : DefaultBodyCell;
+                    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(components_1.Table.ActionCellWrapper, null,
+                    react_1.default.createElement(props.actionCell.Component, { reload: props.reload, row: row })))));
+        })))));
+}

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;