@uxf/data-grid 5.0.0-beta.9 → 10.0.0-beta.2

package/{DataGrid.d.ts → data-grid.d.ts}

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from "react";
 import { BaseGridType, DataGridProps } from "./types";
-export declare const DataGrid: <GridType extends BaseGridType, R = any>(props: DataGridProps<GridType, R>) => JSX.Element;
+export declare const DataGrid: <GridType extends BaseGridType, R = any>(props: DataGridProps<GridType, R>) => React.JSX.Element;

package/data-grid.js

@@ -0,0 +1,136 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = void 0;
+const react_1 = __importStar(require("react"));
+const reducer_1 = require("./store/reducer");
+const utils_1 = require("./utils");
+const react_data_grid_1 = __importDefault(require("react-data-grid"));
+const useColumns_1 = require("./hooks/useColumns");
+const footer_1 = require("./tailwindui/components/footer");
+const show_1 = require("./tailwindui/show");
+const actions_1 = require("./store/actions");
+const defaultKeyExtractor = (r) => {
+    return r.id;
+};
+// eslint-disable-next-line react/require-optimization
+const DataGrid = (props) => {
+    var _a, _b, _c, _d, _e;
+    const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
+    const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
+    const { LinearProgress, Container, FilterList, Pagination, PaginationCounts, PaginationRowsPerPageSelect, SelectedRowsToolbar, NoRowsFallback, SelectRowCheckbox, Toolbar, ToolbarControl, ToolbarCustoms, ToolbarTabs, } = props.ui;
+    const [state, dispatch] = (0, react_1.useReducer)(props.debug ? reducer_1.debugReducer : reducer_1.reducer, (0, reducer_1.getInitialState)(props.schema, props.initialState));
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    // TODO @vejvis - tady vyřešit problém se závislostma v useCallbacku
+    const schema = props.schema;
+    const gridName = props.gridName;
+    const loader = props.loader;
+    const onReload = (0, react_1.useCallback)(async () => {
+        try {
+            await dispatch(actions_1.dataGridActions.reload());
+            const request = (0, utils_1.createRequest)(state, schema.sort, schema.dir);
+            const response = await loader(gridName, request, (0, utils_1.encodeFilter)(request));
+            await dispatch(actions_1.dataGridActions.reloadDone(response));
+        }
+        catch (e) {
+            await dispatch(actions_1.dataGridActions.reloadFailed(e));
+            // eslint-disable-next-line no-console
+            console.error(e);
+        }
+    }, [state, schema, gridName, loader]);
+    if (props.callbackRef) {
+        props.callbackRef.current = {
+            reload: onReload,
+        };
+    }
+    (0, react_1.useEffect)(() => {
+        onReload();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        state.request.dir,
+        state.request.sort,
+        state.request.perPage,
+        state.request.page,
+        state.request.f,
+        state.request.search,
+        state.request.tab,
+    ]);
+    const onFilter = (0, react_1.useCallback)((value) => {
+        dispatch(actions_1.dataGridActions.filter(value));
+    }, [dispatch]);
+    const rows = (_d = (_c = state.response) === null || _c === void 0 ? void 0 : _c.result) !== null && _d !== void 0 ? _d : [];
+    const columns = (0, useColumns_1.useColumns)(props, onReload);
+    const contentHeight = typeof rowHeight === "function"
+        ? rows.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
+        : (rowHeight + 1) * rows.length;
+    const components = (0, react_1.useMemo)(() => {
+        return {
+            checkboxFormatter: SelectRowCheckbox,
+            noRowsFallback: react_1.default.createElement(NoRowsFallback, { error: state.error, loading: !!state.loading }),
+        };
+    }, [SelectRowCheckbox, NoRowsFallback, state.error, state.loading]);
+    const sortColumns = state.request.sort && state.request.dir
+        ? [{ columnKey: state.request.sort, direction: state.request.dir.toUpperCase() }]
+        : [];
+    // TODO @vejvis podívat se na onSortColumnChange metodu
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const onSortColumnChange = (sortColumns) => {
+        if (sortColumns.length > 0) {
+            const sc = sortColumns[0];
+            dispatch(actions_1.dataGridActions.sort(sc.columnKey, sc.direction.toLowerCase()));
+        }
+        else {
+            dispatch(actions_1.dataGridActions.sortClear());
+        }
+    };
+    const reactDataGridStyles = {
+        border: 0,
+        borderRadius: 4,
+        height: contentHeight + headerRowHeight + (rows.length === 0 ? 44 : 0) + 4,
+        overflowY: "hidden",
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Container, { noBorder: props.noBorder, className: props.className },
+            react_1.default.createElement(Toolbar, { noBorder: props.noBorder },
+                react_1.default.createElement(ToolbarTabs, { activeTab: state.request.tab, onChange: (tab) => dispatch(actions_1.dataGridActions.changeTab(tab)), schema: props.schema }),
+                react_1.default.createElement(ToolbarControl, { gridName: props.gridName, dispatch: dispatch, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder, schema: props.schema, filtersData: state.request.f, fulltextValue: state.request.search, onFulltextChange: (value) => dispatch(actions_1.dataGridActions.search(value)), showFulltext: props.schema.fullText }),
+                react_1.default.createElement(ToolbarCustoms, { buttons: props.customActions })),
+            react_1.default.createElement(LinearProgress, { loading: !!state.loading }),
+            react_1.default.createElement(FilterList, { gridName: props.gridName, onFilter: onFilter, filters: props.schema.filters, filtersData: state.request.f, filterHandlers: props.ui.FilterHandlers, noBorder: props.noBorder }),
+            react_1.default.createElement(show_1.Show, { when: mounted },
+                react_1.default.createElement(react_data_grid_1.default, { style: reactDataGridStyles, className: `uxf-data-grid__table ${props.mode === "light" ? "rdg-light" : props.mode === "dark" ? "rdg-dark" : ""}`, columns: columns, rows: rows, enableVirtualization: false, onSortColumnsChange: onSortColumnChange, sortColumns: sortColumns, rowHeight: rowHeight, headerRowHeight: headerRowHeight, rowClass: props.rowClass, rowKeyGetter: (_e = props.keyExtractor) !== null && _e !== void 0 ? _e : defaultKeyExtractor, selectedRows: props.selectedRows, onSelectedRowsChange: props.onChangeSelectedRows, components: components })),
+            react_1.default.createElement(footer_1.Footer, { noBorder: props.noBorder },
+                react_1.default.createElement(PaginationRowsPerPageSelect, { value: state.request.perPage, onChange: (value) => dispatch(actions_1.dataGridActions.changePerPage(value)) }),
+                react_1.default.createElement(PaginationCounts, { page: state.request.page, perPage: state.request.perPage, response: state.response }),
+                react_1.default.createElement(Pagination, { count: state.response ? Math.max(Math.ceil(state.response.count / state.request.perPage), 1) : 1, page: state.request.page + 1, onPageChange: (value) => dispatch(actions_1.dataGridActions.changePage(value - 1)), size: "sm" }))),
+        react_1.default.createElement(SelectedRowsToolbar, { selectedRows: props.selectedRows, onChangeSelectedRows: props.onChangeSelectedRows, Actions: props.ui.SelectedRowsToolbarActions, reload: onReload })));
+};
+exports.DataGrid = DataGrid;

package/data-grid.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: <GridType_1 extends import("./").BaseGridType, R = any>(props: import("./tailwindui").DataGridProps<GridType_1, R>) => React.JSX.Element;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;

package/data-grid.stories.js

@@ -0,0 +1,245 @@
+"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.Default = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = require("./");
+const tailwindui_1 = require("./tailwindui");
+exports.default = {
+    title: "DataGrid/Tailwind",
+    component: tailwindui_1.DataGrid,
+};
+const schema = {
+    columns: [
+        { name: "id", type: "number", label: "Id", sort: true },
+        { name: "text", type: "string", label: "Text", sort: true },
+        { name: "bool", type: "boolean", label: "Boolean" },
+        { name: "mail", type: "email", label: "E-mail" },
+        { name: "tel", type: "phone", label: "Phone" },
+        { name: "link", type: "url", label: "Link" },
+        { name: "day", type: "date", label: "Date" },
+        { name: "dayAndTime", type: "datetime", label: "Datetime" },
+    ],
+    filters: [
+        { name: "text", type: "text", label: "Text" },
+        { name: "bool", type: "boolean", label: "Boolean" },
+        { name: "ival", type: "interval", label: "Super interval" },
+        { name: "mail", type: "string", label: "E-mail" },
+        { name: "tel", type: "string", label: "Phone" },
+        { name: "link", type: "string", label: "Link" },
+        {
+            name: "sele",
+            type: "select",
+            label: "Select",
+            options: [
+                { id: "", label: "" },
+                { id: 1, label: "A" },
+                { id: 2, label: "B" },
+            ],
+        },
+        {
+            name: "seleBool",
+            type: "select",
+            label: "Select Boolean",
+            options: [
+                { id: "", label: "" },
+                { id: 1, label: "Ano" },
+                { id: 0, label: "Ne" },
+            ],
+        },
+    ],
+    tabs: [
+        { name: "all", label: "All" },
+        { name: "only-odd-ids", label: "Only odd ids blablabla" },
+        // { name: "only-odd-ids", label: "Only odd ids" },
+    ],
+    dir: "asc",
+    sort: "id",
+    perPage: 10,
+    fullText: true,
+};
+const data = [
+    {
+        id: 1,
+        text: "Red",
+        bool: undefined,
+        tel: null,
+        mail: "dev@uxf.cz",
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: null,
+    },
+    {
+        id: 2,
+        text: "Blue",
+        bool: null,
+        tel: undefined,
+        mail: "dev@uxf.cz",
+        link: undefined,
+        day: "2023-01-05",
+        dayAndTime: null,
+    },
+    {
+        id: 3,
+        text: "Green",
+        bool: true,
+        tel: "777888999",
+        mail: undefined,
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: undefined,
+    },
+    {
+        id: 4,
+        text: "Gray",
+        bool: false,
+        tel: "555777888",
+        mail: "dev@uxf.cz",
+        link: "https://www.uxf.cz",
+        day: "2023-01-05",
+        dayAndTime: undefined,
+    },
+    {
+        id: 5,
+        text: "Pink",
+        bool: false,
+        tel: "45654412",
+        mail: undefined,
+        link: undefined,
+        day: "2023-01-05",
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+    },
+    {
+        id: 6,
+        text: "Yellow",
+        bool: false,
+        tel: null,
+        mail: "root@uxf.cz",
+        link: "https://www.uxf.cz",
+        day: undefined,
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+    },
+    {
+        id: 7,
+        text: "Black",
+        bool: true,
+        tel: null,
+        mail: "dev@uxf.cz",
+        link: null,
+        day: "1998-09-15",
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+    },
+    {
+        id: 8,
+        text: "White",
+        bool: false,
+        tel: undefined,
+        mail: null,
+        link: "https://www.uxf.cz",
+        day: undefined,
+        dayAndTime: "2000-10-31T01:30:00.000-05:00",
+    },
+    {
+        id: 9,
+        text: "Liberty",
+        bool: false,
+        tel: "999888777",
+        mail: "dev@uxf.cz",
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+    },
+    {
+        id: 10,
+        text: "Blue",
+        bool: false,
+        tel: "777888999",
+        mail: "root@uxf.cz",
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2012-08-10T00:00:00.000-13:00",
+    },
+    {
+        id: 11,
+        text: "Purple",
+        bool: false,
+        tel: "777888999",
+        mail: null,
+        link: "https://google.com",
+        day: null,
+        dayAndTime: "2000-12-31T01:00:00.000-07:30",
+    },
+];
+const loader = async (_, request) => {
+    const { page = 1, perPage = 10, tab, sort, dir, f } = request;
+    // eslint-disable-next-line no-console
+    console.log("filter", f === null || f === void 0 ? void 0 : f.length);
+    const filteredData = data
+        .filter((item) => tab !== "only-odd-ids" || item.id % 2 === 0)
+        .filter((item) => { var _a; return (request.search ? (_a = item.text) === null || _a === void 0 ? void 0 : _a.match(new RegExp(request.search, "i")) : true); })
+        .sort((a, b) => {
+        if (!sort || !dir) {
+            return 1;
+        }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const first = a[sort];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const second = b[sort];
+        if (typeof first === "number") {
+            return dir === "asc" ? first - second : second - first;
+        }
+        return dir === "asc" ? first.localeCompare(second) : second.localeCompare(first);
+    });
+    // eslint-disable-next-line no-console
+    console.log("loader", request);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return {
+        count: filteredData.length,
+        totalCount: filteredData.length,
+        result: filteredData.slice(page * perPage, page * perPage + perPage),
+    };
+};
+function Default() {
+    const [hiddenColumns, setHiddenColumns] = (0, react_1.useState)([]);
+    const [selectedRows, setSelectedRows] = (0, react_1.useState)(new Set());
+    const callbackRef = (0, _1.useCallbackRef)();
+    return (react_1.default.createElement("div", { className: "min-h-screen bg-gray-50 p-4 dark:bg-gray-950" },
+        react_1.default.createElement(tailwindui_1.DataGrid, { callbackRef: callbackRef, schema: schema, title: "Test", noBorder: false, loader: loader, onChangeHiddenColumns: setHiddenColumns, hiddenColumns: hiddenColumns, onChangeSelectedRows: setSelectedRows, selectedRows: selectedRows, getOpenUrl: (row) => `https://www.uxf.cz/item-${row.id}`, onEdit: console.log, onRemove: console.log, initialState: "eyJzb3J0IjoiaWQiLCJkaXIiOiJhc2MiLCJwZXJQYWdlIjoxMCwicGFnZSI6MCwiZiI6W3sibmFtZSI6ImNvZGUiLCJ2YWx1ZSI6IkNaIn1dfQ==", defaultConfig: {
+                columns: {
+                    id: { width: 50, hidden: true },
+                    text: {},
+                    bool: { width: 50 },
+                },
+            }, 
+            //rowClass={row => ["bg-success-100", "bg-warning-100", "bg-error-100", "bg-primary-100"][(row.id - 1) % 4]}
+            // customActions={[
+            //     { label: "Do something", onClick: () => console.log("click") },
+            //     { label: "Do something else", href: "https://www.uxf.cz", variant: "text" },
+            // ]}
+            debug: true })));
+}
+exports.Default = Default;

package/hooks/useCallbackRef.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCallbackRef = void 0;
-var react_1 = require("react");
-var useCallbackRef = function () { return (0, react_1.useRef)(); };
+const react_1 = require("react");
+const useCallbackRef = () => (0, react_1.useRef)();
 exports.useCallbackRef = useCallbackRef;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlQ2FsbGJhY2tSZWYuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaG9va3MvdXNlQ2FsbGJhY2tSZWYudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsK0JBQStCO0FBR3hCLElBQU0sY0FBYyxHQUFHLGNBQU0sT0FBQSxJQUFBLGNBQU0sR0FBZSxFQUFyQixDQUFxQixDQUFDO0FBQTdDLFFBQUEsY0FBYyxrQkFBK0IifQ==

package/hooks/useColumns.js

@@ -22,79 +22,61 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColumns = void 0;
-var react_1 = __importStar(require("react"));
-var react_data_grid_1 = require("react-data-grid");
-var tailwindui_1 = require("../tailwindui");
-var utils_1 = require("../utils");
-var useColumns = function (props, reload) {
-    var onChangeSelectedRows = props.onChangeSelectedRows, schema = props.schema, hiddenColumns = props.hiddenColumns, defaultConfig = props.defaultConfig, ui = props.ui, onOpen = props.onOpen, onEdit = props.onEdit, getOpenUrl = props.getOpenUrl, getEditUrl = props.getEditUrl, onRemove = props.onRemove;
-    var ActionCell = ui.ActionCell, actionCellWidth = ui.actionCellWidth, BodyCells = ui.BodyCells;
-    var rdgActionColumn = (0, react_1.useMemo)(function () {
-        return (ActionCell && ActionCell !== tailwindui_1.ActionCellBase) || onOpen || onEdit || getOpenUrl || getEditUrl || onRemove
+const react_1 = __importStar(require("react"));
+const react_data_grid_1 = require("react-data-grid");
+const action_cell_base_1 = require("../tailwindui/components/action-cell-base");
+const utils_1 = require("../utils");
+const useColumns = (props, reload) => {
+    const { onChangeSelectedRows, schema, hiddenColumns, defaultConfig, ui, onOpen, onEdit, getOpenUrl, getEditUrl, onRemove, } = props;
+    const { actionCellWidth, BodyCells } = ui;
+    const rdgActionColumn = (0, react_1.useMemo)(() => {
+        return (props.ui.ActionCell && props.ui.ActionCell !== action_cell_base_1.ActionCellBase) ||
+            onOpen ||
+            onEdit ||
+            getOpenUrl ||
+            getEditUrl ||
+            onRemove
             ? {
                 key: "__action_column",
                 name: "",
                 resizable: false,
                 headerCellClass: "uxf-data-grid__action-cell",
                 cellClass: "uxf-data-grid__action-cell",
-                width: ActionCell
+                width: props.ui.ActionCell !== action_cell_base_1.ActionCellBase
                     ? actionCellWidth
-                    : [onRemove, onEdit !== null && onEdit !== void 0 ? onEdit : getEditUrl, onOpen !== null && onOpen !== void 0 ? onOpen : getOpenUrl].filter(function (i) { return i; }).length * 36 + 8 * 2,
-                formatter: function (p) {
-                    if (!ui.ActionCell) {
+                    : [onRemove, onEdit !== null && onEdit !== void 0 ? onEdit : getEditUrl, onOpen !== null && onOpen !== void 0 ? onOpen : getOpenUrl].filter((i) => i).length * 40 + 8 * 2,
+                formatter: (p) => {
+                    if (!props.ui.ActionCell) {
                         return null;
                     }
-                    return (react_1.default.createElement(ui.ActionCell, { row: p.row, reload: reload, onRemove: onRemove, onEdit: onEdit, getEditUrl: getEditUrl, onOpen: onOpen, getOpenUrl: getOpenUrl }));
+                    return (react_1.default.createElement(props.ui.ActionCell, { row: p.row, reload: reload, onRemove: onRemove, onEdit: onEdit, getEditUrl: getEditUrl, onOpen: onOpen, getOpenUrl: getOpenUrl }));
                 },
             }
             : null;
-    }, [ActionCell, actionCellWidth, getEditUrl, getOpenUrl, onEdit, onOpen, onRemove, reload, ui]);
-    var rdgColumns = (0, react_1.useMemo)(function () {
+    }, [actionCellWidth, getEditUrl, getOpenUrl, onEdit, onOpen, onRemove, props, reload]);
+    const rdgColumns = (0, react_1.useMemo)(() => {
         return schema.columns
-            .filter(function (c) { var _a; return !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.includes(c.name)) && !((_a = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _a === void 0 ? void 0 : _a.hidden); })
-            .map(function (c) {
-            var _a, _b;
+            .filter((c) => { var _a; return !(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.includes(c.name)) && !((_a = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _a === void 0 ? void 0 : _a.hidden); })
+            .map((c) => {
+            var _a, _b, _c, _d, _e, _f;
             return ({
                 key: c.name,
                 name: c.label,
-                headerCellClass: (0, utils_1.cx)("uxf-data-grid__cell", c.type),
+                headerCellClass: (0, utils_1.cx)("uxf-data-grid__cell", "uxf-data-grid__cell--header", `uxf-data-grid__cell--type-${c.type}`, `uxf-data-grid__cell--name-${c.name}`),
                 resizable: true,
                 sortable: c.sort,
                 width: (_a = c.width) !== null && _a !== void 0 ? _a : (_b = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _b === void 0 ? void 0 : _b.width,
-                minWidth: c.minWidth,
-                maxWidth: c.maxWidth,
-                cellClass: "uxf-data-grid__cell",
-                formatter: function (p) {
+                minWidth: (_c = c.minWidth) !== null && _c !== void 0 ? _c : (_d = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _d === void 0 ? void 0 : _d.minWidth,
+                maxWidth: (_e = c.maxWidth) !== null && _e !== void 0 ? _e : (_f = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns[c.name]) === null || _f === void 0 ? void 0 : _f.maxWidth,
+                cellClass: (0, utils_1.cx)("uxf-data-grid__cell", `uxf-data-grid__cell--type-${c.type}`, `uxf-data-grid__cell--name-${c.name}`),
+                formatter: (p) => {
                     var _a;
-                    var columnType = c.type;
-                    var BodyCell = (_a = BodyCells[columnType]) !== null && _a !== void 0 ? _a : BodyCells.default;
+                    const columnType = c.type;
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    const BodyCell = (_a = BodyCells[columnType]) !== null && _a !== void 0 ? _a : BodyCells.default;
+                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     if (!BodyCell) {
                         return null;
                     }
@@ -108,9 +90,8 @@ var useColumns = function (props, reload) {
             });
         });
     }, [BodyCells, defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.columns, hiddenColumns, reload, schema.columns]);
-    return (0, react_1.useMemo)(function () {
-        return __spreadArray(__spreadArray([onChangeSelectedRows ? react_data_grid_1.SelectColumn : null], __read(rdgColumns), false), [rdgActionColumn], false).filter(function (c) { return c !== null; });
+    return (0, react_1.useMemo)(() => {
+        return [onChangeSelectedRows ? react_data_grid_1.SelectColumn : null, ...rdgColumns, rdgActionColumn].filter((c) => c !== null);
     }, [onChangeSelectedRows, rdgActionColumn, rdgColumns]);
 };
 exports.useColumns = useColumns;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ob29rcy91c2VDb2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSw2Q0FBdUM7QUFDdkMsbURBQXVEO0FBRXZELDRDQUErQztBQUMvQyxrQ0FBOEI7QUFFdkIsSUFBTSxVQUFVLEdBQUcsVUFBQyxLQUE4QixFQUFFLE1BQTJCO0lBRTlFLElBQUEsb0JBQW9CLEdBVXBCLEtBQUsscUJBVmUsRUFDcEIsTUFBTSxHQVNOLEtBQUssT0FUQyxFQUNOLGFBQWEsR0FRYixLQUFLLGNBUlEsRUFDYixhQUFhLEdBT2IsS0FBSyxjQVBRLEVBQ2IsRUFBRSxHQU1GLEtBQUssR0FOSCxFQUNGLE1BQU0sR0FLTixLQUFLLE9BTEMsRUFDTixNQUFNLEdBSU4sS0FBSyxPQUpDLEVBQ04sVUFBVSxHQUdWLEtBQUssV0FISyxFQUNWLFVBQVUsR0FFVixLQUFLLFdBRkssRUFDVixRQUFRLEdBQ1IsS0FBSyxTQURHLENBQ0Y7SUFFRixJQUFBLFVBQVUsR0FBaUMsRUFBRSxXQUFuQyxFQUFFLGVBQWUsR0FBZ0IsRUFBRSxnQkFBbEIsRUFBRSxTQUFTLEdBQUssRUFBRSxVQUFQLENBQVE7SUFFdEQsSUFBTSxlQUFlLEdBQXVCLElBQUEsZUFBTyxFQUFDO1FBQ2hELE9BQU8sQ0FBQyxVQUFVLElBQUksVUFBVSxLQUFLLDJCQUFjLENBQUMsSUFBSSxNQUFNLElBQUksTUFBTSxJQUFJLFVBQVUsSUFBSSxVQUFVLElBQUksUUFBUTtZQUM1RyxDQUFDLENBQUM7Z0JBQ0ksR0FBRyxFQUFFLGlCQUFpQjtnQkFDdEIsSUFBSSxFQUFFLEVBQUU7Z0JBQ1IsU0FBUyxFQUFFLEtBQUs7Z0JBQ2hCLGVBQWUsRUFBRSw0QkFBNEI7Z0JBQzdDLFNBQVMsRUFBRSw0QkFBNEI7Z0JBQ3ZDLEtBQUssRUFB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

package/icons-config/index.js

@@ -2,12 +2,14 @@ const uiIcons = require("@uxf/ui/utils/icons-config");
 
 /** @type {import('@uxf/icons-generator/types').Config['icons']} */
 module.exports = {
+    caretDown: uiIcons.caretDown,
     check: uiIcons.check,
     chevronDown: uiIcons.chevronDown,
     chevronsLeft: uiIcons.chevronsLeft,
     chevronLeft: uiIcons.chevronLeft,
     chevronsRight: uiIcons.chevronsRight,
     chevronRight: uiIcons.chevronRight,
+    "ellipsis-vertical": uiIcons["ellipsis-vertical"],
     xmarkLarge: uiIcons.xmarkLarge,
     "circle-info": {
         width: 512,

package/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./DataGrid";
+export * from "./data-grid";
 export * from "./types";
 export * from "./hooks/useCallbackRef";
 export { decodeFilter, encodeFilter } from "./utils";

package/index.js

@@ -15,10 +15,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.encodeFilter = exports.decodeFilter = void 0;
-__exportStar(require("./DataGrid"), exports);
+__exportStar(require("./data-grid"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./hooks/useCallbackRef"), exports);
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "decodeFilter", { enumerable: true, get: function () { return utils_1.decodeFilter; } });
 Object.defineProperty(exports, "encodeFilter", { enumerable: true, get: function () { return utils_1.encodeFilter; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSw2Q0FBMkI7QUFDM0IsMENBQXdCO0FBQ3hCLHlEQUF1QztBQUV2QyxpQ0FBcUQ7QUFBNUMscUdBQUEsWUFBWSxPQUFBO0FBQUUscUdBQUEsWUFBWSxPQUFBIn0=

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uxf/data-grid",
-  "version": "5.0.0-beta.9",
-  "description": "Redux DataGrid",
+  "version": "10.0.0-beta.2",
+  "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
   "typings": "index.d.ts",
@@ -20,13 +20,10 @@
   ],
   "scripts": {
     "dev": "next dev",
-    "build": "npm run-script clean && npm run-script compile",
-    "clean": "rm -rf ./dist",
-    "compile": "tsc -P tsconfig.build.json",
+    "build": "tsc -P tsconfig.json",
     "gen:icons": "icons-gen",
     "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./**/*.ts*\"",
     "test": "npm run-script typecheck",
-    "test:update": "npm run-script typecheck && jest --coverage -u",
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "engines": {
@@ -40,34 +37,6 @@
   "dependencies": {
     "react-data-grid": "7.0.0-beta.13"
   },
-  "devDependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.2",
-    "@tailwindcss/line-clamp": "^0.4.2",
-    "@types/jest": "^26.0.19",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.11.0",
-    "@typescript-eslint/parser": "^5.11.0",
-    "@uxf/eslint-config": "^1.2.3",
-    "@uxf/icons-generator": "^1.3.0",
-    "@uxf/ui": "^1.0.0-beta.112",
-    "autoprefixer": "^10.4.13",
-    "babel-polyfill": "^6.26.0",
-    "dayjs": "^1.11.7",
-    "eslint": "^8.8.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "jest": "^26.6.3",
-    "next": "^13.0.4",
-    "postcss": "^8.4.19",
-    "postcss-import": "^15.0.0",
-    "prettier": "^1.18.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^4.1.3"
-  },
+  "devDependencies": {},
   "gitHead": "e4f21a15c3d50fb6614d70cdaf36685232de87e7"
-}
+}