@addev-be/ui 0.20.5 → 0.20.8

package/dist/components/data/DataGrid/hooks/useDataGridChangedRows.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.useDataGridChangedRows = void 0;
+var react_1 = require("react");
+var useDataGridChangedRows = function (rowKeyGetter, onRowAdded) {
+    var _a = (0, react_1.useState)([]), addedRows = _a[0], setAddedRows = _a[1];
+    var _b = (0, react_1.useState)([]), updatedRows = _b[0], setUpdatedRows = _b[1];
+    var addRow = (0, react_1.useCallback)(function (row) {
+        setAddedRows(function (prev) { return __spreadArray(__spreadArray([], prev, true), [row], false); });
+        onRowAdded(row);
+    }, [onRowAdded]);
+    var addRows = (0, react_1.useCallback)(function (rows) {
+        rows.forEach(addRow);
+    }, [addRow]);
+    var updateRow = (0, react_1.useCallback)(function (row) {
+        var rowKey = rowKeyGetter(row);
+        setUpdatedRows(function (prev) {
+            var index = prev.findIndex(function (r) { return rowKeyGetter(r) === rowKey; });
+            return index >= 0
+                ? prev.map(function (existingRow, i) {
+                    return i === index ? __assign(__assign({}, existingRow), row) : existingRow;
+                })
+                : __spreadArray(__spreadArray([], prev, true), [row], false);
+        });
+    }, [rowKeyGetter]);
+    var editRow = (0, react_1.useCallback)(function (row) {
+        var key = rowKeyGetter(row);
+        var addedRowIndex = addedRows.findIndex(function (r) { return rowKeyGetter(r) === key; });
+        if (addedRowIndex >= 0) {
+            setAddedRows(function (prev) {
+                return prev.map(function (existingRow, index) {
+                    return index === addedRowIndex ? __assign(__assign({}, existingRow), row) : existingRow;
+                });
+            });
+            return;
+        }
+        var updatedRowIndex = updatedRows.findIndex(function (r) { return rowKeyGetter(r) === key; });
+        if (updatedRowIndex >= 0) {
+            setUpdatedRows(function (prev) {
+                return prev.map(function (existingRow, index) {
+                    return index === updatedRowIndex ? __assign(__assign({}, existingRow), row) : existingRow;
+                });
+            });
+            return;
+        }
+        setUpdatedRows(function (prev) { return __spreadArray(__spreadArray([], prev, true), [row], false); });
+    }, [rowKeyGetter, addedRows, updatedRows]);
+    var clearChangedRows = (0, react_1.useCallback)(function (keys) {
+        if (!keys) {
+            setAddedRows([]);
+            setUpdatedRows([]);
+            return;
+        }
+        setAddedRows(function (prev) {
+            return prev.filter(function (row) { return !keys.includes(rowKeyGetter(row)); });
+        });
+        setUpdatedRows(function (prev) {
+            return prev.filter(function (row) { return !keys.includes(rowKeyGetter(row)); });
+        });
+    }, [rowKeyGetter]);
+    return {
+        addedRows: addedRows,
+        updatedRows: updatedRows,
+        editRow: editRow,
+        addRow: addRow,
+        addRows: addRows,
+        updateRow: updateRow,
+        clearChangedRows: clearChangedRows,
+    };
+};
+exports.useDataGridChangedRows = useDataGridChangedRows;

package/dist/components/data/DataGrid/hooks/useDataGridCopy.js

@@ -52,8 +52,7 @@ var useDataGridCopy = function (_a) {
     var rows = _a.rows, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? [] : _b, loadCopyRows = _a.loadCopyRows, footerFunctions = _a.footerFunctions;
     var generateHeadersHtml = (0, react_1.useCallback)(function () {
         return "<tr>\n            ".concat(visibleColumns
-            .map(function (_a) {
-            var col = _a[1];
+            .map(function (col) {
             return "<th style=\"\n                        text-align: left;\n                        font-weight: bold;\n                        white-space: nowrap;\n                    \">\n                        ".concat(col.name, "\n                    </th>");
         })
             .join('\n'), "\n        </tr>");
@@ -61,29 +60,32 @@ var useDataGridCopy = function (_a) {
     var generateFootersHtml = (0, react_1.useCallback)(function (rowsToCopy) {
         console.log('generate footers html');
         return "<tr>\n            ".concat(visibleColumns
-            .map(function (_a) {
-            var _b, _c;
-            var colKey = _a[0];
-            return "<td style=\"\n                      font-weight: bold;\n                      white-space: nowrap;\n                    \">\n                        ".concat((_c = (_b = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[colKey]) === null || _b === void 0 ? void 0 : _b.call(footerFunctions, rowsToCopy, rowsToCopy, [])) !== null && _c !== void 0 ? _c : '', "\n                    </td>");
+            .map(function (col) {
+            var _a, _b;
+            return "<td style=\"\n                      font-weight: bold;\n                      white-space: nowrap;\n                    \">\n                        ".concat((_b = (_a = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[col.key]) === null || _a === void 0 ? void 0 : _a.call(footerFunctions, rowsToCopy, rowsToCopy, [])) !== null && _b !== void 0 ? _b : '', "\n                    </td>");
         })
             .join('\n'), "\n        </tr>");
     }, [footerFunctions, visibleColumns]);
     var generateCellText = (0, react_1.useCallback)(function (col, value) {
-        var _a;
-        return col.excelValue ? col.excelValue(value) : (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '';
+        var _a, _b;
+        return ((_a = col.excelOptions) === null || _a === void 0 ? void 0 : _a.valueGetter)
+            ? col.excelOptions.valueGetter(value)
+            : (_b = value === null || value === void 0 ? void 0 : value.toString()) !== null && _b !== void 0 ? _b : '';
     }, []);
-    var generateCellHtml = (0, react_1.useCallback)(function (col, value) { return "<td style=\"\n        ".concat(col.excelFormatter
-        ? "mso-number-format: '" + col.excelFormatter(col) + "';"
-        : '', "\n        ").concat(col.excelBackgroundColor
-        ? "background-color: '" + col.excelBackgroundColor(value) + "';"
-        : '', "\n        white-space: nowrap;\n      \">\n        ").concat(generateCellText(col, value), "\n      </td>"); }, [generateCellText]);
+    var generateCellHtml = (0, react_1.useCallback)(function (col, value) {
+        var _a, _b;
+        return "<td style=\"\n        ".concat(((_a = col.excelOptions) === null || _a === void 0 ? void 0 : _a.formatter)
+            ? "mso-number-format: '" + col.excelOptions.formatter(col) + "';"
+            : '', "\n        ").concat(((_b = col.excelOptions) === null || _b === void 0 ? void 0 : _b.colorGetter)
+            ? "background-color: '" + col.excelOptions.colorGetter(value) + "';"
+            : '', "\n        white-space: nowrap;\n      \">\n        ").concat(generateCellText(col, value), "\n      </td>");
+    }, [generateCellText]);
     var generateCopyHtml = (0, react_1.useCallback)(function (rowsToCopy, includeHeaders, includeFooters) {
         return "\n            <table>\n                ".concat(includeHeaders ? generateHeadersHtml() : '', "\n                ").concat((rowsToCopy || [])
             .map(function (row) {
             return "<tr>\n                        ".concat(visibleColumns
-                .map(function (_a) {
-                var col = _a[1];
-                var value = col.getter && row ? col.getter(row) : '';
+                .map(function (col) {
+                var value = row ? col.getter(row) : '';
                 return generateCellHtml(col, value);
             })
                 .join('\n'), "\n                    </tr>");
@@ -91,18 +93,11 @@ var useDataGridCopy = function (_a) {
             .join('\n'), "\n                  ").concat(includeFooters ? generateFootersHtml(rowsToCopy) : '', "\n            </table>\n        ");
     }, [visibleColumns, generateCellHtml, generateFootersHtml, generateHeadersHtml]);
     var generateHeadersText = (0, react_1.useCallback)(function () {
-        return visibleColumns.map(function (_a) {
-            var col = _a[1];
-            return col.name;
-        }).join('\t');
+        return visibleColumns.map(function (col) { return col.name; }).join('\t');
     }, [visibleColumns]);
     var generateFootersText = (0, react_1.useCallback)(function (rowsToCopy) {
         return visibleColumns
-            .map(function (_a) {
-            var _b, _c;
-            var colKey = _a[0];
-            return (_c = (_b = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[colKey]) === null || _b === void 0 ? void 0 : _b.call(footerFunctions, rowsToCopy, [], [])) !== null && _c !== void 0 ? _c : '';
-        })
+            .map(function (col) { var _a, _b; return (_b = (_a = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[col.key]) === null || _a === void 0 ? void 0 : _a.call(footerFunctions, rowsToCopy, [], [])) !== null && _b !== void 0 ? _b : ''; })
             .join('\t');
     }, [footerFunctions, visibleColumns]);
     var generateCopyText = (0, react_1.useCallback)(function (rowsToCopy, includeHeaders, includeFooters) {
@@ -110,11 +105,11 @@ var useDataGridCopy = function (_a) {
             includeHeaders ? generateHeadersText() : ''
         ], (rowsToCopy || []).map(function (row) {
             return visibleColumns
-                .map(function (_a) {
-                var col = _a[1];
-                var value = col.getter && row ? col.getter(row) : '';
-                return col.excelValue
-                    ? col.excelValue(value)
+                .map(function (col) {
+                var _a;
+                var value = row ? col.getter(row) : '';
+                return ((_a = col.excelOptions) === null || _a === void 0 ? void 0 : _a.valueGetter)
+                    ? col.excelOptions.valueGetter(value)
                     : value != null && value !== undefined
                         ? value.toString()
                         : '';

package/dist/components/data/DataGrid/hooks/useRefreshModal.d.ts

@@ -0,0 +1,5 @@
+export declare const useRefreshModal: (onConfirm: () => void) => {
+    openModal: () => void;
+    closeModal: () => void;
+    modal: import("react/jsx-runtime").JSX.Element | null;
+};

package/dist/components/data/DataGrid/hooks/useRefreshModal.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefreshModal = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var forms_1 = require("../../../forms");
+var Modal_1 = require("../../../layout/Modal");
+var Icons_1 = require("../../../../Icons");
+var useRefreshModal = function (onConfirm) {
+    var _a = (0, react_1.useState)(false), isVisible = _a[0], setIsVisible = _a[1];
+    var openModal = (0, react_1.useCallback)(function () {
+        setIsVisible(true);
+    }, []);
+    var closeModal = (0, react_1.useCallback)(function () {
+        setIsVisible(false);
+    }, []);
+    var modal = (0, react_1.useMemo)(function () {
+        return isVisible ? ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { "$width": 400, children: [(0, jsx_runtime_1.jsx)(Modal_1.Modal.Header, { children: "Rafraichir" }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.ContentWithIcon, { children: [(0, jsx_runtime_1.jsx)(Icons_1.TriangleExclamationIcon, { fill: "var(--color-danger-600)" }), (0, jsx_runtime_1.jsx)("div", { children: "Attention : vous avez des modifications en cours. Si vous rafra\u00EEchissez la liste, ces modifications seront perdues !" })] }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.Footer, { children: [(0, jsx_runtime_1.jsx)(forms_1.Button, { onClick: closeModal, children: "Annuler" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { "$color": "danger", style: { marginLeft: 'auto' }, onClick: function () {
+                                closeModal();
+                                onConfirm();
+                            }, children: "Rafra\u00EEchir" })] })] })) : null;
+    }, [closeModal, isVisible, onConfirm]);
+    return { openModal: openModal, closeModal: closeModal, modal: modal };
+};
+exports.useRefreshModal = useRefreshModal;

package/dist/components/data/DataGrid/index.d.ts

@@ -2,7 +2,7 @@ import { ForwardedRef } from 'react';
 import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
 export declare const DataGridInner: <R>({ contextOverride, ...props }: DataGridProps<R> & {
     contextOverride?: Partial<DataGridContextProps<R>>;
-}, ref: ForwardedRef<DataGridRefProps>) => import("react/jsx-runtime").JSX.Element;
+}, ref: ForwardedRef<DataGridRefProps<R>>) => import("react/jsx-runtime").JSX.Element;
 export declare const DataGrid: <R>(props: DataGridProps<R> & {
     contextOverride?: Partial<DataGridContextProps<R>>;
-} & import("react").RefAttributes<DataGridRefProps>) => import("react").JSX.Element | null;
+} & import("react").RefAttributes<DataGridRefProps<R>>) => import("react").JSX.Element | null;

package/dist/components/data/DataGrid/index.js

@@ -33,11 +33,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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.DataGrid = exports.DataGridInner = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
 var react_1 = require("react");
+var constants_1 = require("./constants");
 var DataGridFooter_1 = require("./DataGridFooter");
 var DataGridHeader_1 = require("./DataGridHeader");
 var DataGridRowTemplate_1 = require("./DataGridRowTemplate");
@@ -50,14 +60,18 @@ var DataGridInner = function (_a, ref) {
     var scrollableRef = (0, react_1.useRef)(null);
     var className = props.className;
     var _b = (0, hooks_1.useDataGrid)(props, contextOverride), contextProps = _b[0], DataGridContext = _b[1];
-    var columns = contextProps.columns, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? 32 : _c, _d = contextProps.headerRowHeight, headerRowHeight = _d === void 0 ? 40 : _d, gridTemplateColumns = contextProps.gridTemplateColumns, sortedRows = contextProps.sortedRows, onVisibleRowsChange = contextProps.onVisibleRowsChange, refresh = contextProps.refresh, setSelectedKeys = contextProps.setSelectedKeys;
+    var columns = contextProps.columns, selectable = contextProps.selectable, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _c, _d = contextProps.headerRowHeight, headerRowHeight = _d === void 0 ? 40 : _d, gridTemplateColumns = contextProps.gridTemplateColumns, sortedRows = contextProps.sortedRows, onVisibleRowsChange = contextProps.onVisibleRowsChange, refresh = contextProps.refresh, setSelectedKeys = contextProps.setSelectedKeys, addRows = contextProps.addRows, fixedColumnsCount = contextProps.fixedColumnsCount, resizingColumnKey = contextProps.resizingColumnKey, moveResizing = contextProps.moveResizing, endResizing = contextProps.endResizing;
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         refresh: refresh !== null && refresh !== void 0 ? refresh : (function () { }),
         setSelectedKeys: setSelectedKeys,
-    }); }, [refresh, setSelectedKeys]);
+        addRows: addRows,
+    }); }, [addRows, refresh, setSelectedKeys]);
     var hasFooter = Object.values(columns).some(function (col) { return col.footer; });
+    var fixedColumnWidths = (0, react_1.useMemo)(function () { return __spreadArray(__spreadArray([], (selectable ? [constants_1.SELECTION_CELL_WIDTH] : []), true), Object.values(columns)
+        .slice(0, fixedColumnsCount !== null && fixedColumnsCount !== void 0 ? fixedColumnsCount : 0)
+        .map(function (col) { var _a; return (_a = col.width) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_COLUMN_WIDTH; }), true); }, [columns, fixedColumnsCount, selectable]);
     var rowTemplate = DataGridRowTemplate_1.DataGridRowTemplate;
-    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.DataGridContainer, { ref: scrollableRef, "$headerRowHeight": headerRowHeight, "$rowHeight": rowHeight, "$rowsCount": contextProps.sortedRows.length, "$withFooter": hasFooter, className: className, children: [(0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: gridTemplateColumns, items: sortedRows, itemTemplate: rowTemplate, itemProps: { context: DataGridContext }, rowHeightInPx: styles.DEFAULT_ROW_HEIGHT, onRangeChanged: onVisibleRowsChange }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] }) }));
+    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.DataGridContainer, { ref: scrollableRef, "$headerRowHeight": headerRowHeight, "$rowHeight": rowHeight, "$rowsCount": contextProps.sortedRows.length, "$withFooter": hasFooter, className: className, "$fixedColumnWidths": fixedColumnWidths, children: [resizingColumnKey && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: moveResizing, onMouseUp: endResizing })), (0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { integrated: true, gridTemplateColumns: gridTemplateColumns, items: sortedRows, itemTemplate: rowTemplate, itemProps: { context: DataGridContext }, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChange }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] }) }));
 };
 exports.DataGridInner = DataGridInner;
 exports.DataGrid = (0, react_1.forwardRef)(exports.DataGridInner);

package/dist/components/data/DataGrid/styles.d.ts

@@ -1,8 +1,5 @@
+import { DataGridCellFCProps } from './types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-export declare const TOOLBAR_HEIGHT = 40;
-export declare const DEFAULT_HEADER_ROW_HEIGHT = 40;
-export declare const DEFAULT_FOOTER_ROW_HEIGHT = 40;
-export declare const DEFAULT_ROW_HEIGHT = 32;
 export declare const DataGridResizeGrip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $headerColor?: ThemeColor;
 }>> & string;
@@ -11,14 +8,19 @@ type DataGridHeaderCellContainerProps = {
     $headerColor?: ThemeColor;
 };
 export declare const DataGridHeaderCellContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridHeaderCellContainerProps>> & string;
-export declare const DataGridCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataGridHeaderTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const dataGridCellCss: import("styled-components").RuleSet<DataGridCellFCProps>;
+export declare const DataGridCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridCellFCProps>> & string;
+export declare const DataGridHeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DataGridToolsRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataGridToolsRowButtonsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DataGridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $headerRowHeight?: number;
     $rowHeight?: number;
     $rowsCount: number;
     $showToolsHeader?: boolean;
     $withFooter?: boolean;
+    $fixedColumnWidths?: (string | number)[];
 }>> & string;
 type DataGridHeaderOrFooterRowProps = {
     $headerRowHeight?: number;
@@ -31,11 +33,14 @@ export declare const DataGridHeaderRow: import("styled-components/dist/types").I
 export declare const DataGridFooterRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, DataGridHeaderOrFooterRowProps>, never>> & string;
-export declare const DataGridRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+type DataGridRowProps = {
+    $edited?: boolean;
+};
+export declare const DataGridRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridRowProps>> & string;
+export declare const LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridCellFCProps> & DataGridCellFCProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
-export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridCellFCProps> & DataGridCellFCProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
 export declare const HeaderSelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridHeaderCellContainerProps> & DataGridHeaderCellContainerProps, "ref"> & {

package/dist/components/data/DataGrid/styles.js

@@ -27,19 +27,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridFooterRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRow = exports.DataGridCell = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_FOOTER_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = void 0;
+exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridFooterRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRowButtonsContainer = exports.DataGridToolsRow = exports.DataGridHeaderTitle = exports.DataGridCell = exports.dataGridCellCss = exports.DataGridHeaderTextContainer = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = void 0;
+var constants_1 = require("./constants");
 var styled_components_1 = __importStar(require("styled-components"));
 var styles_1 = require("../VirtualScroller/styles");
-exports.TOOLBAR_HEIGHT = 40;
-exports.DEFAULT_HEADER_ROW_HEIGHT = 40;
-exports.DEFAULT_FOOTER_ROW_HEIGHT = 40;
-exports.DEFAULT_ROW_HEIGHT = 32;
 exports.DataGridResizeGrip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"])), function (_a) {
     var $headerColor = _a.$headerColor;
     return $headerColor
         ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "], ["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-neutral-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-neutral-500);\n          }\n        "], ["\n          background-color: var(--color-neutral-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-neutral-500);\n          }\n        "])));
 });
-exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--space-1);\n  padding: 0 0.75rem;\n  height: 100%;\n  font-weight: var(--font-bold);\n  line-height: 1.5rem;\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--space-1);\n  padding: 0 0.75rem;\n  height: 100%;\n  font-weight: var(--font-bold);\n  line-height: 1.5rem;\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"])), function (_a) {
+exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: var(--font-bold);\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 var(--space-3);\n  position: relative;\n\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: var(--font-bold);\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 var(--space-3);\n  position: relative;\n\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"])), function (_a) {
     var $isResizing = _a.$isResizing;
     return ($isResizing ? 1 : 0);
 }, function (_a) {
@@ -48,34 +45,62 @@ exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateOb
         ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "], ["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "])), $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-950);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-950);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "])));
 }, exports.DataGridResizeGrip);
 exports.DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
-exports.DataGridCell = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n"], ["\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n"])));
+exports.DataGridHeaderTextContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  line-height: 1rem;\n  align-items: center;\n  font-size: var(--text-md);\n  max-height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  line-height: 1rem;\n  align-items: center;\n  font-size: var(--text-md);\n  max-height: 100%;\n"])));
+exports.dataGridCellCss = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: ", ";\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n  background-color: ", ";\n  text-align: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: ", ";\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n  background-color: ", ";\n  text-align: ", ";\n"])), function (_a) {
+    var $userSelect = _a.$userSelect;
+    return ($userSelect ? 'text' : 'none');
+}, function (_a) {
+    var _b = _a.$color, $color = _b === void 0 ? 'neutral' : _b;
+    return "var(--color-".concat($color, "-50)");
+}, function (_a) {
+    var _b = _a.$textAlign, $textAlign = _b === void 0 ? 'left' : _b;
+    return $textAlign;
+});
+exports.DataGridCell = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.dataGridCellCss);
 exports.DataGridCell.displayName = 'DataGridCell';
-exports.DataGridToolsRow = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-1);\n  padding: 0 var(--space-1);\n  align-items: center;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 10;\n"], ["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-1);\n  padding: 0 var(--space-1);\n  align-items: center;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 10;\n"])));
-exports.DataGridToolsRow.displayName = 'DataGridToolsRow';
-exports.DataGridContainer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-neutral-50);\n  font-size: var(--text-base);\n  overflow: scroll;\n  grid-template-rows: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n  ", " {\n    position: sticky;\n    top: ", ";\n    height: ", ";\n  }\n  ", " {\n    height: ", ";\n    line-height: ", ";\n    box-sizing: border-box;\n  }\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 3;\n  }\n"], ["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-neutral-50);\n  font-size: var(--text-base);\n  overflow: scroll;\n  grid-template-rows: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n  ", " {\n    position: sticky;\n    top: ", ";\n    height: ", ";\n  }\n  ", " {\n    height: ", ";\n    line-height: ", ";\n    box-sizing: border-box;\n  }\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 3;\n  }\n"])), function (_a) {
-    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b, _c = _a.$withFooter, $withFooter = _c === void 0 ? false : _c;
-    return "".concat(exports.TOOLBAR_HEIGHT, "px ").concat($headerRowHeight, "px auto ").concat($withFooter ? exports.DEFAULT_FOOTER_ROW_HEIGHT + 'px' : '');
-}, exports.DataGridToolsRow, exports.TOOLBAR_HEIGHT, exports.DataGridHeaderCellContainer, function (_a) {
-    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
+exports.DataGridHeaderTitle = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  white-space: normal;\n  font-weight: var(--font-bold);\n  color: var(--color-neutral-900);\n  height: auto;\n"], ["\n  white-space: normal;\n  font-weight: var(--font-bold);\n  color: var(--color-neutral-900);\n  height: auto;\n"])));
+exports.DataGridToolsRow = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n"], ["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n"])));
+exports.DataGridToolsRowButtonsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: inline-flex;\n  gap: var(--space-1);\n  align-items: center;\n  padding: 0 var(--space-1);\n  position: sticky;\n  left: 0;\n"], ["\n  display: inline-flex;\n  gap: var(--space-1);\n  align-items: center;\n  padding: 0 var(--space-1);\n  position: sticky;\n  left: 0;\n"])));
+exports.DataGridContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-neutral-50);\n  font-size: var(--text-base);\n  overflow: scroll;\n  grid-template-rows: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n  ", " {\n    position: sticky;\n    top: ", ";\n    height: ", ";\n  }\n  ", " {\n    height: ", ";\n    line-height: ", ";\n    box-sizing: border-box;\n  }\n\n  ", "\n\n  ", "\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 3;\n  }\n"], ["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-neutral-50);\n  font-size: var(--text-base);\n  overflow: scroll;\n  grid-template-rows: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n  ", " {\n    position: sticky;\n    top: ", ";\n    height: ", ";\n  }\n  ", " {\n    height: ", ";\n    line-height: ", ";\n    box-sizing: border-box;\n  }\n\n  ", "\n\n  ", "\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 3;\n  }\n"])), function (_a) {
+    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b, _c = _a.$withFooter, $withFooter = _c === void 0 ? false : _c;
+    return "".concat(constants_1.TOOLBAR_HEIGHT, "px ").concat($headerRowHeight, "px auto ").concat($withFooter ? constants_1.DEFAULT_FOOTER_ROW_HEIGHT + 'px' : '');
+}, exports.DataGridToolsRow, constants_1.TOOLBAR_HEIGHT, exports.DataGridHeaderCellContainer, function (_a) {
+    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
 }, function (_a) {
-    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
+    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
 }, exports.DataGridCell, function (_a) {
-    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
+    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
 }, function (_a) {
-    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
+    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
-}, styles_1.VirtualScrollerContainer);
+}, function (_a) {
+    var _b = _a.$fixedColumnWidths, $fixedColumnWidths = _b === void 0 ? [] : _b;
+    return $fixedColumnWidths.map(function (width, i) { return "\n    ".concat(exports.DataGridHeaderCellContainer, ":nth-child(").concat(i + 1, ") {\n      position: sticky;\n      left: ").concat(i === 0
+        ? '0'
+        : "calc(".concat($fixedColumnWidths
+            .slice(0, i)
+            .map(function (w) { return (typeof w === 'number' ? "".concat(w, "px") : w); })
+            .join(' + '), ")"), ";\n      background-color: var(--color-neutral-200);\n      z-index: 1;\n    }"); });
+}, function (_a) {
+    var _b = _a.$fixedColumnWidths, $fixedColumnWidths = _b === void 0 ? [] : _b;
+    return $fixedColumnWidths.map(function (width, i) { return "\n    ".concat(exports.DataGridCell, ":nth-child(").concat(i + 1, ") {\n      position: sticky;\n      left: ").concat(i === 0
+        ? '0'
+        : "calc(".concat($fixedColumnWidths
+            .slice(0, i)
+            .map(function (w) { return (typeof w === 'number' ? "".concat(w, "px") : w); })
+            .join(' + '), ")"), ";\n      background-color: var(--color-neutral-50);\n      z-index: 1;\n    }"); });
+}, styles_1.VirtualScrollerFiller);
 exports.DataGridContainer.displayName = 'DataGridContainer';
-var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
-    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
+var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
+    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
 }, function (_a) {
     var $headerColor = _a.$headerColor;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "])));
+        ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "])));
 });
 exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
@@ -84,7 +109,7 @@ exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  top: ", "px;\n"], ["\n  ", "\n  top: ", "px;\n"])), dataGridHeaderOrFooterRowCss, exports.TOOLBAR_HEIGHT);
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  top: ", "px;\n"], ["\n  ", "\n  top: ", "px;\n"])), dataGridHeaderOrFooterRowCss, constants_1.TOOLBAR_HEIGHT);
 exports.DataGridHeaderRow.displayName = 'DataGridHeaderRow';
 exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
@@ -93,19 +118,22 @@ exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  bottom: 0;\n"], ["\n  ", "\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss);
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n  bottom: 0;\n"], ["\n  ", "\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss);
 exports.DataGridFooterRow.displayName = 'DataGridFooterRow';
-exports.DataGridRow = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+exports.DataGridRow = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: contents;\n\n  &:hover > ", " {\n    background-color: var(--color-blue-100);\n  }\n\n  ", "\n"], ["\n  display: contents;\n\n  &:hover > ", " {\n    background-color: var(--color-blue-100);\n  }\n\n  ", "\n"])), exports.DataGridCell, function (_a) {
+    var $edited = _a.$edited;
+    return $edited && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      & > ", ", & > ", " {\n        background-color: var(--color-warning-100);\n        color: var(--color-warning-900);\n      }\n      &:hover > ", ", &:hover > ", " {\n        background-color: var(--color-blue-100);\n      }\n    "], ["\n      & > ", ", & > ", " {\n        background-color: var(--color-warning-100);\n        color: var(--color-warning-900);\n      }\n      &:hover > ", ", &:hover > ", " {\n        background-color: var(--color-blue-100);\n      }\n    "])), exports.DataGridCell, exports.SelectionCell, exports.DataGridCell, exports.SelectionCell);
+});
 exports.DataGridRow.displayName = 'DataGridRow';
-exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"])));
+exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"])));
 exports.LoadingCell.displayName = 'LoadingCell';
-var selectionCellStyle = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"])));
-exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
+var selectionCellStyle = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  cursor: pointer;\n  width: ", ";\n\n  & > input[type='checkbox'] {\n    margin: 0;\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  cursor: pointer;\n  width: ", ";\n\n  & > input[type='checkbox'] {\n    margin: 0;\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"])), constants_1.SELECTION_CELL_WIDTH);
+exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n  padding: 0 var(--space-1);\n"], ["\n  ", "\n  padding: 0 var(--space-1);\n"])), selectionCellStyle);
 exports.SelectionCell.displayName = 'SelectionCell';
-exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
+exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n  padding: 0;\n"], ["\n  ", "\n  padding: 0;\n"])), selectionCellStyle);
 exports.HeaderSelectionCell.displayName = 'HeaderSelectionCell';
 exports.ResizeBackdrop = styled_components_1.default.div.attrs({
     className: 'ResizeBackdrop',
-})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"])));
+})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n  z-index: 100;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n  z-index: 100;\n"])));
 exports.ResizeBackdrop.displayName = 'ResizeBackdrop';
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;