@uxf/data-grid 10.0.0-beta.69 → 10.0.0-beta.70

package/data-grid.js

@@ -35,20 +35,15 @@ 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 use_rdg_visuals_1 = require("./hooks/use-rdg-visuals");
 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;
+    var _a, _b, _c;
     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;
@@ -86,11 +81,8 @@ const DataGrid = (props) => {
     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 rows = (_b = (_a = state.response) === null || _a === void 0 ? void 0 : _a.result) !== null && _b !== void 0 ? _b : [];
     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,
@@ -111,12 +103,12 @@ const DataGrid = (props) => {
             dispatch(actions_1.dataGridActions.sortClear());
         }
     };
-    const reactDataGridStyles = {
-        border: 0,
-        borderRadius: 4,
-        height: contentHeight + headerRowHeight + (rows.length === 0 ? 44 : 0) + 4,
-        overflowY: "hidden",
-    };
+    const rdgVisuals = (0, use_rdg_visuals_1.useRdgVisuals)({
+        headerRowHeight: props.headerRowHeight,
+        mode: props.mode,
+        rowHeight: props.rowHeight,
+        rows,
+    });
     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 },
@@ -125,8 +117,8 @@ const DataGrid = (props) => {
                 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(show_1.Show, { when: rdgVisuals.ready },
+                react_1.default.createElement(react_data_grid_1.default, { className: rdgVisuals.className, columns: columns, enableVirtualization: false, headerRowHeight: rdgVisuals.headerRowHeight, onSelectedRowsChange: props.onChangeSelectedRows, onSortColumnsChange: onSortColumnChange, ref: rdgVisuals.ref, renderers: components, rowClass: props.rowClass, rowHeight: rdgVisuals.rowHeight, rowKeyGetter: (_c = props.keyExtractor) !== null && _c !== void 0 ? _c : defaultKeyExtractor, rows: rows, selectedRows: props.selectedRows, sortColumns: sortColumns, style: rdgVisuals.style })),
             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 }),

package/hooks/use-rdg-visuals.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { DataGridHandle } from "react-data-grid";
+import { BaseGridType, DataGridBaseProps } from "../types";
+export declare function useRdgVisuals(props: {
+    headerRowHeight?: DataGridBaseProps<BaseGridType, any>["headerRowHeight"];
+    mode?: DataGridBaseProps<BaseGridType, any>["mode"];
+    rowHeight?: DataGridBaseProps<BaseGridType, any>["rowHeight"];
+    rows: any[];
+}): {
+    className: string;
+    headerRowHeight: number;
+    ready: boolean;
+    ref: import("react").RefObject<DataGridHandle>;
+    rowHeight: number | ((row: any) => number);
+    style: {
+        height: number | undefined;
+    };
+};

package/hooks/use-rdg-visuals.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRdgVisuals = void 0;
+const react_1 = require("react");
+function useRdgVisuals(props) {
+    var _a, _b;
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setMounted(true), []);
+    const rowHeight = (_a = props.rowHeight) !== null && _a !== void 0 ? _a : 44;
+    const headerRowHeight = (_b = props.headerRowHeight) !== null && _b !== void 0 ? _b : 36;
+    const contentHeight = typeof rowHeight === "function"
+        ? props.rows.reduce((prev, curr) => prev + rowHeight({ type: "ROW", row: curr }))
+        : rowHeight * props.rows.length;
+    const ref = (0, react_1.useRef)(null);
+    const size = {
+        contentHeight,
+        headerRowHeight,
+        rowsCount: props.rows.length,
+    };
+    const storedSize = (0, react_1.useRef)(size);
+    storedSize.current = size;
+    const [height, setHeight] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const node = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.element;
+        if (!(mounted && node)) {
+            return;
+        }
+        const observer = new MutationObserver((mutations) => mutations.forEach(() => {
+            const currentSize = storedSize.current;
+            const scrollbarHeight = node.scrollWidth > node.clientWidth ? 8 : 0;
+            const emptyRowHeight = currentSize.rowsCount === 0 ? 44 : 0;
+            setHeight(currentSize.headerRowHeight + currentSize.contentHeight + emptyRowHeight + scrollbarHeight);
+        }));
+        observer.observe(node, { attributes: true, attributeFilter: ["style"] });
+        return () => observer.disconnect();
+    }, [mounted, storedSize]);
+    return {
+        className: `uxf-data-grid__table ${props.mode === "light" ? "rdg-light" : props.mode === "dark" ? "rdg-dark" : ""}`,
+        headerRowHeight,
+        ready: mounted,
+        ref,
+        rowHeight,
+        style: { height },
+    };
+}
+exports.useRdgVisuals = useRdgVisuals;

package/hooks/useColumns.js

@@ -47,7 +47,7 @@ const useColumns = (props, reload) => {
                 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((i) => i).length * 40 + 8 * 2,
-                formatter: (p) => {
+                renderCell: (p) => {
                     if (!props.ui.ActionCell) {
                         return null;
                     }
@@ -71,7 +71,7 @@ const useColumns = (props, reload) => {
                 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) => {
+                renderCell: (p) => {
                     var _a;
                     const columnType = c.type;
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/data-grid",
-  "version": "10.0.0-beta.69",
+  "version": "10.0.0-beta.70",
   "description": "UXF DataGrid",
   "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
   "main": "index.js",
@@ -36,7 +36,7 @@
     "dayjs": "^1.11.7"
   },
   "dependencies": {
-    "react-data-grid": "7.0.0-beta.13"
+    "react-data-grid": "7.0.0-beta.39"
   },
   "devDependencies": {},
   "gitHead": "e4f21a15c3d50fb6614d70cdaf36685232de87e7"

package/tailwindui/components/toolbar-control.js

@@ -69,8 +69,9 @@ const ToolbarControl = (props) => {
     return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
         react_1.default.createElement(show_1.Show, { when: props.showFulltext },
             react_1.default.createElement(text_input_1.TextInput, { value: fulltextValue, onChange: props.onFulltextChange, placeholder: "Pi\u0161te pro hled\u00E1n\u00ED", className: "uxf-data-grid__plugin-fulltext", size: "small", leftElement: react_1.default.createElement(icon_1.Icon, { name: "search", size: 16 }), label: "Vyhled\u00E1v\u00E1n\u00ED", hiddenLabel: true })),
-        react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-button" },
-            react_1.default.createElement(icon_1.Icon, { name: "filter" })),
+        react_1.default.createElement(show_1.Show, { when: props.schema.filters.length !== 0 },
+            react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setFiltersOpen(true), title: "Filtrovat", className: "uxf-data-grid__plugin-button" },
+                react_1.default.createElement(icon_1.Icon, { name: "filter" }))),
         react_1.default.createElement(show_1.Show, { when: props.onChangeHiddenColumns && props.hiddenColumns },
             react_1.default.createElement(button_1.Button, { isIconButton: true, variant: "white", size: "sm", onClick: () => setColumnsOpen(true), title: "Nastaven\u00ED sloupc\u016F", className: "uxf-data-grid__plugin-button" },
                 react_1.default.createElement(icon_1.Icon, { name: "table-columns" }))),

package/tailwindui/styles.css

@@ -1,86 +1,179 @@
+@import url("react-data-grid/lib/styles.css");
+
+@layer rdg.Root {
+    .uxf-data-grid__table {
+        --rdg-color-scheme: light;
+        --rdg-color: theme("colors.lightHigh");
+        --rdg-border-color: theme("colors.lightBorder");
+        --rdg-summary-border-color: theme("colors.lightBorder");
+        --rdg-background-color: theme("colors.white");
+        --rdg-header-background-color: theme("colors.gray.50");
+        --rdg-row-hover-background-color: theme("colors.gray.50");
+        --rdg-row-selected-background-color: theme("colors.gray.100/.75");
+        --row-selected-hover-background-color: theme("colors.gray.200/.75");
+        --rdg-selection-color: theme("colors.lightBorder");
+        --rdg-font-size: 14px;
+
+        :root .dark & {
+            --rdg-color-scheme: dark;
+            --rdg-color: theme("colors.darkHigh");
+            --rdg-border-color: theme("colors.darkBorder");
+            --rdg-summary-border-color: theme("colors.darkBorder");
+            --rdg-background-color: theme("colors.gray.950");
+            --rdg-header-background-color: theme("colors.gray.900");
+            --rdg-row-hover-background-color: theme("colors.gray.950");
+            --rdg-row-selected-background-color: theme("colors.gray.900/.75");
+            --row-selected-hover-background-color: theme("colors.gray.800/.75");
+            --rdg-selection-color: theme("colors.darkBorder");
+            --rdg-font-size: 14px;
+        }
+    }
+}
+
 .uxf-data-grid {
-    @apply rounded border border-gray-300 dark:border-gray-700;
+    border: 1px solid var(--rdg-border-color);
+    border-radius: theme("borderRadius.DEFAULT");
 
     &.no-border {
-        @apply border-0;
+        border-style: none;
     }
 
     &__action-cell {
-        @apply sticky right-0;
-
-        border-inline-start: 1px solid theme("colors.gray.200");
-
-        :root .dark & {
-            border-inline-start: 1px solid theme("colors.gray.700");
-        }
+        background-color: var(--rdg-background-color);
+        border-inline-start: 1px solid var(--rdg-border-color);
+        position: sticky;
+        right: 0;
     }
 
     &__action-cell-wrapper {
-        @apply flex h-full w-full items-center justify-center space-x-2 text-center;
+        @apply space-x-2;
+
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        text-align: center;
+        width: 100%;
 
         .uxf-icon {
-            @apply text-gray-400 dark:text-gray-500;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__body-cell {
         &--boolean {
-            @apply flex h-full w-full items-center;
+            align-items: center;
+            display: flex;
+            height: 100%;
+            width: 100%;
         }
     }
 
     &__drawer {
-        @apply fixed inset-0 z-10 transform overflow-hidden bg-gray-900 bg-opacity-25 ease-in-out dark:bg-opacity-75;
+        @apply ease-in-out;
+
+        background-color: theme("colors.gray.900/.25");
+        inset: 0;
+        overflow: hidden;
+        position: fixed;
+        z-index: theme("zIndex.modal");
+
+        :root .dark & {
+            background-color: theme("colors.gray.900/.75");
+        }
 
         &--open {
-            @apply translate-x-0 opacity-100 transition-opacity duration-500;
+            @apply transition-opacity duration-500;
+
+            opacity: 100;
+            transform: translateX(0);
         }
 
         &--closed {
-            @apply translate-x-full opacity-0 transition-all delay-500;
+            @apply transition-all delay-500;
+
+            opacity: 0;
+            transform: translateX(100%);
         }
 
         &-body-wrapper {
-            @apply absolute right-0 h-full w-11/12 max-w-sm translate-x-full transform bg-white shadow-xl transition-all duration-500 ease-in-out;
+            @apply transition-all duration-500 ease-in-out;
+
+            background-color: theme("colors.white");
+            box-shadow: theme("boxShadow.xl");
+            height: 100%;
+            max-width: theme("maxWidth.sm");
+            position: absolute;
+            right: 0;
+            transform: translateX(100%);
+            width: theme("width.11/12");
 
             &--open {
-                @apply translate-x-0;
+                transform: translateX(0);
             }
         }
 
         &-body {
-            @apply relative flex h-full w-full max-w-sm flex-col overflow-y-scroll pb-10 dark:bg-gray-950 dark:text-gray-100;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            max-width: theme("maxWidth.sm");
+            overflow-y: scroll;
+            padding-bottom: theme("spacing.10");
+            position: relative;
+            width: 100%;
+
+            :root .dark & {
+                background-color: theme("colors.gray.950");
+                color: theme("colors.gray.100");
+            }
         }
 
         &-close-button {
-            @apply !mt-4 ml-auto mr-4;
+            margin-left: auto;
+            margin-right: theme("spacing.4");
+            margin-top: theme("spacing.4") !important;
         }
 
         &-header {
-            @apply p-4 pt-8 text-lg font-bold;
+            font-weight: theme("fontWeight.bold");
+            padding: theme("spacing.8") theme("spacing.4") theme("spacing.4");
         }
 
         &-content {
-            @apply p-4;
+            padding: theme("spacing.4");
         }
 
         &-backdrop {
-            @apply h-full w-screen cursor-pointer;
+            cursor: pointer;
+            height: 100%;
+            width: 100vw;
         }
     }
 
     &__fallback {
+        align-items: center;
+        color: theme("colors.gray.600"); /* ?? */
+        display: flex;
         grid-column: 1/-1;
-
-        @apply flex items-center justify-center text-center text-gray-600; /* ?? */
+        justify-content: center;
+        text-align: center;
     }
 
     &__filter {
         &--interval {
-            @apply grid grid-cols-[1fr_min-content_1fr] gap-4;
+            display: grid;
+            gap: theme("spacing.4");
+            grid-template-columns: 1fr min-content 1fr;
 
             .uxf-data-grid__filter-gap {
-                @apply flex items-center pt-5;
+                align-items: center;
+                display: flex;
+                padding-top: theme("spacing.5");
             }
         }
     }
@@ -90,14 +183,21 @@
     }
 
     &__filter-list {
-        @apply space-x-2 p-2;
+        @apply space-x-2;
+
+        padding: theme("spacing.2");
     }
 
     &__footer {
-        @apply flex flex-wrap items-center justify-end gap-4 p-2;
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.4");
+        justify-content: flex-end;
+        padding: theme("spacing.2");
 
         &.no-border {
-            @apply px-0;
+            padding-inline: 0;
         }
     }
 
@@ -113,7 +213,7 @@
         &.is-loading::before {
             animation: datagridlineanim 1s linear infinite;
             background-color: theme("colors.dataGridSecondary");
-            border-radius: 20px;
+            border-radius: inherit;
             content: "";
             height: 3px;
             left: -50%;
@@ -123,132 +223,304 @@
     }
 
     &__linear-progress-wrapper {
-        @apply relative;
+        position: relative;
     }
 
     &__pagination-counts {
-        @apply text-sm text-lightLow;
+        @apply text-sm;
+
+        color: theme("colors.lightLow");
     }
 
     &__plugin-fulltext {
-        @apply my-2 w-full text-gray-400 sm:w-auto;
+        color: theme("colors.gray.400");
+        margin: theme("spacing.2") 0;
+        width: 100%;
+
+        @screen sm {
+            width: auto;
+        }
 
         .uxf-icon {
-            @apply text-gray-400;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__plugin-button {
-        @apply my-2 shrink-0;
+        flex-shrink: 0;
+        margin: theme("spacing.2") 0;
 
         .uxf-icon {
-            @apply text-gray-400;
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__rows-per-page {
-        @apply flex flex-wrap items-center gap-2 text-sm text-lightLow;
+        @apply text-sm;
+
+        align-items: center;
+        color: theme("colors.lightLow");
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
 
         .uxf-select {
-            @apply w-28;
+            width: theme("width.28");
         }
     }
 
     &__select-row-checkbox-wrapper {
-        @apply flex h-full w-full items-center justify-center text-white;
+        align-items: center;
+        color: theme("colors.white");
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
     }
 
     &__selected-rows-toolbar-wrapper {
-        @apply fixed bottom-8 left-0 right-0 flex flex-row items-center justify-center;
+        align-items: center;
+        bottom: theme("spacing.8");
+        display: flex;
+        justify-content: center;
+        position: fixed;
+        right: 0;
     }
 
     &__selected-rows-toolbar {
-        @apply flex items-center justify-center rounded-full border border-gray-100 bg-dataGridPrimary px-6 py-2 text-sm text-white drop-shadow-xl dark:border-gray-800;
+        @apply text-sm drop-shadow-xl;
+
+        align-items: center;
+        background-color: theme("colors.dataGridPrimary");
+        border: 1px solid theme("colors.lightBorder");
+        border-radius: 999px;
+        color: theme("colors.white");
+        display: flex;
+        justify-content: center;
+        padding: theme("spacing.2") theme("spacing.6");
+
+        :root .dark & {
+            border-color: theme("colors.darkBorder");
+        }
     }
 
     &__selected-rows-toolbar-actions {
-        @apply space-x-2 pl-4;
+        @apply space-x-2;
+
+        padding-left: theme("spacing.4");
     }
 
     &__table {
-        @apply rounded-none;
+        overflow-y: hidden;
+
+        &::-webkit-scrollbar {
+            height: 8px;
+            width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: theme("colors.lightLow");
+            border-radius: 999px;
+
+            :root .dark & {
+                background-color: theme("colors.darkLow");
+            }
+        }
     }
 
     &__toolbar {
-        @apply flex flex-wrap items-center justify-end gap-2 border-b border-b-gray-300 px-2 py-2 dark:border-b-gray-700 md:py-0 md:pl-0;
+        align-items: center;
+        border-bottom: 1px solid theme("colors.lightBorder");
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.2");
+        justify-content: flex-end;
+        padding: theme("spacing.2");
+
+        :root .dark & {
+            border-bottom-color: theme("colors.darkBorder");
+        }
+
+        @screen md {
+            padding-block: 0;
+            padding-left: 0;
+        }
     }
 
     &__toolbar-tab {
-        @apply inline-flex items-center whitespace-nowrap border-b-2 border-transparent p-4 text-sm font-medium text-gray-500 hover:text-gray-700;
+        @apply text-sm;
+
+        align-items: center;
+        border-bottom: 2px solid transparent;
+        color: theme("colors.lightMedium");
+        display: inline-flex;
+        font-weight: theme("fontWeight.medium");
+        padding: theme("spacing.4");
+        white-space: nowrap;
+
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
+
+        &:hover {
+            color: theme("colors.lightHigh");
+
+            :root .dark & {
+                color: theme("colors.darkHigh");
+            }
+        }
 
         &.is-active {
-            @apply border-dataGridPrimary text-dataGridPrimary;
+            border-bottom-color: currentcolor;
+            color: theme("colors.dataGridPrimary");
         }
     }
 
     &__toolbar-tabs {
-        @apply flex flex-1 self-stretch;
+        align-self: stretch;
+        display: flex;
+        flex: 1;
 
         &-nav {
             &--desktop {
-                @apply -mb-px hidden space-x-4;
+                @apply space-x-4;
+
+                display: none;
+                margin-bottom: -1px;
 
                 @screen md {
-                    @apply flex;
+                    display: flex;
                 }
             }
 
             &--mobile {
-                @apply z-10 flex w-max items-center;
+                align-items: center;
+                display: flex;
+                width: max-content;
+                z-index: theme("zIndex.10");
 
                 @screen md {
-                    @apply hidden;
+                    display: none;
                 }
 
                 .uxf-data-grid__toolbar-tabs-button {
-                    @apply m-0 flex items-center;
+                    align-items: center;
+                    display: flex;
+                    margin: 0;
 
                     &-icon {
-                        @apply ml-1 text-lightHigh dark:text-darkHigh;
+                        color: theme("colors.lightHigh");
+                        margin-left: theme("spacing.1");
+
+                        :root .dark & {
+                            color: theme("colors.darkHigh");
+                        }
                     }
                 }
             }
 
             &-text {
-                @apply text-lightHigh dark:text-darkHigh;
+                color: theme("colors.lightHigh");
+
+                :root .dark & {
+                    color: theme("colors.darkHigh");
+                }
             }
         }
 
         &-modal-content {
-            @apply flex flex-col items-start divide-y divide-lightBorder pb-4 pt-1 text-left dark:divide-darkBorder;
+            @apply divide-y divide-lightBorder dark:divide-darkBorder;
+
+            align-items: flex-start;
+            display: flex;
+            flex-direction: column;
+            padding-bottom: theme("spacing.4");
+            padding-top: theme("spacing.1");
+            text-align: left;
         }
 
         &-modal-button {
-            @apply w-full justify-start;
+            border-radius: 0;
+            justify-content: flex-start;
+            width: 100%;
         }
 
         &-modal-button-text {
-            @apply text-lightHigh dark:text-darkHigh;
+            color: theme("colors.lightHigh");
+
+            :root .dark & {
+                color: theme("colors.darkHigh");
+            }
         }
 
         &-modal-active-tab-icon {
-            @apply mr-3 text-lightMedium dark:text-darkMedium;
+            color: theme("colors.lightMedium");
+            margin-right: theme("spacing.3");
+
+            :root .dark & {
+                color: theme("colors.darkMedium");
+            }
         }
     }
 
     &__toolbar-control {
-        @apply order-3 flex w-full flex-row items-center justify-between gap-2 xs:order-2 xs:w-auto;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: theme("spacing.2");
+        justify-content: space-between;
+        order: 3;
+        width: 100%;
+
+        @screen xs {
+            order: 2;
+            width: auto;
+        }
     }
 
     &__toolbar-customs {
-        @apply order-2 flex flex-row items-center gap-2 xs:order-3 md:my-2;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: theme("spacing.2");
+        order: 2;
+
+        @screen xs {
+            order: 2;
+        }
+
+        @screen md {
+            margin-block: theme("spacing.2");
+        }
 
         &-mobile {
-            @apply md:hidden;
+            display: flex;
+
+            @screen md {
+                display: none;
+            }
         }
 
         &-desktop {
-            @apply hidden md:block;
+            display: none;
+
+            @screen md {
+                display: flex;
+                gap: theme("spacing.2");
+            }
         }
     }
 }
@@ -265,17 +537,22 @@
 }
 
 .rdg-header-row {
-    @apply bg-gray-200 font-medium text-gray-400 dark:bg-gray-800 dark:text-gray-600;
+    color: theme("colors.lightLow");
+    font-weight: theme("fontWeight.normal");
+
+    :root .dark & {
+        color: theme("colors.darkLow");
+    }
 
     .rdg-cell {
-        @apply rounded-none bg-gray-50 dark:bg-gray-900 dark:text-darkMedium;
+        background-color: var(--rdg-header-background-color);
 
-        &:not(:first-child) {
-            border-inline-start: 1px solid theme("colors.gray.200");
+        :root .dark & {
+            color: theme("colors.darkMedium");
+        }
 
-            :root .dark & {
-                border-inline-start: 1px solid theme("colors.gray.700");
-            }
+        &:not(:first-child) {
+            border-inline-start: 1px solid var(--rdg-border-color);
         }
     }
 }
@@ -286,47 +563,13 @@
 }
 
 .rdg-cell {
+    border-block-end-width: 1px;
+    border-color: var(--rdg-border-color);
     border-inline-end: none;
 
     &.rdg-cell-frozen {
         box-shadow: none;
     }
-
-    &[aria-selected="true"] {
-        outline-color: theme("colors.gray.300");
-
-        :root .dark & {
-            outline-color: theme("colors.gray.700");
-        }
-    }
-}
-
-.rdg-row[aria-selected="true"] {
-    @apply bg-gray-100/75 dark:bg-gray-900/75;
-
-    .uxf-data-grid__action-cell {
-        background-color: white;
-
-        :root .dark & {
-            background-color: theme("colors.gray.900");
-        }
-    }
-}
-
-.rdg-row:hover {
-    @apply bg-gray-50 dark:bg-gray-950;
-
-    .uxf-data-grid__action-cell {
-        background-color: white;
-
-        :root .dark & {
-            background-color: theme("colors.gray.950");
-        }
-    }
-}
-
-.rdg-row[aria-selected="true"]:hover {
-    @apply bg-gray-200/75 dark:bg-gray-800/75;
 }
 
 @keyframes datagridlineanim {

package/types/components.d.ts

@@ -2,7 +2,7 @@ import React, { ComponentType, FC, ReactElement, ReactNode } from "react";
 import { BaseGridType, Columns, Filter, Filters, Schema } from "./schema";
 import { RequestFilter, Response } from "./api";
 import { PaginationProps } from "@uxf/ui/pagination/pagination";
-import { CheckboxFormatterProps } from "react-data-grid";
+import { RenderCheckboxProps } from "react-data-grid";
 import { ChangeHiddenColumnsHandler, CsvDownloadHandler } from "./core";
 import { DataGridState } from "./state";
 /**
@@ -128,7 +128,7 @@ export type SelectedRowsToolbarComponent = FC<SelectedRowsToolbarProps>;
 /**
  * Select row checkbox
  */
-export type SelectRowCheckboxComponent = React.FC<CheckboxFormatterProps>;
+export type SelectRowCheckboxComponent = React.FC<RenderCheckboxProps>;
 /**
  * Selected rows toolbar actions
  */