@addev-be/ui 0.1.18 → 0.1.19

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

@@ -0,0 +1,111 @@
+"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 __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 __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));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridColumnsEditor = exports.DataGridColumnItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var Icons_1 = require("../../../../Icons");
+var IconButton_1 = require("../../../forms/IconButton");
+var lodash_1 = __importDefault(require("lodash"));
+var helpers_1 = require("./helpers");
+var hooks_1 = require("../hooks");
+var DataGridColumnItem = function (_a) {
+    var columnIndex = _a.columnIndex, columnKey = _a.columnKey, column = _a.column, visible = _a.visible, onUpButtonClicked = _a.onUpButtonClicked, onDownButtonClicked = _a.onDownButtonClicked, onVisibleButtonClicked = _a.onVisibleButtonClicked;
+    return ((0, jsx_runtime_1.jsxs)(styles.ColumnItem, { "$visible": visible, children: [!visible && ((0, jsx_runtime_1.jsx)(styles.Buttons, { "$visible": false, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", icon: Icons_1.LeftIcon, onClick: function () { return onVisibleButtonClicked(columnKey); } }) })), (0, jsx_runtime_1.jsx)("span", { children: column === null || column === void 0 ? void 0 : column.name }), visible && ((0, jsx_runtime_1.jsxs)(styles.Buttons, { "$visible": true, children: [onUpButtonClicked && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", icon: Icons_1.UpIcon, onClick: function () { return onUpButtonClicked(columnIndex); } })), onDownButtonClicked && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", icon: Icons_1.DownIcon, onClick: function () { return onDownButtonClicked(columnIndex); } })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", icon: Icons_1.RightIcon, onClick: function () { return onVisibleButtonClicked(columnKey); } })] }))] }));
+};
+exports.DataGridColumnItem = DataGridColumnItem;
+var DataGridColumnsEditor = function (_a) {
+    var columns = _a.columns, onColumnsChanged = _a.onColumnsChanged;
+    var _b = (0, hooks_1.useVisibleAndHiddenColumns)(columns), visibleColumns = _b[0], hiddenColumns = _b[1];
+    var sortedVisibleColumnsEntries = (0, helpers_1.normalizeColumnsOrders)(lodash_1.default.sortBy(Object.entries(visibleColumns), function (_a) {
+        var _b;
+        var col = _a[1];
+        return (_b = col.order) !== null && _b !== void 0 ? _b : 0;
+    }));
+    var onUpButtonClicked = (0, react_1.useCallback)(function (index) {
+        if (index > 0) {
+            var newArray_1 = (0, helpers_1.normalizeColumnsOrders)(__spreadArray(__spreadArray(__spreadArray([], sortedVisibleColumnsEntries.slice(0, index - 1), true), [
+                sortedVisibleColumnsEntries[index],
+                sortedVisibleColumnsEntries[index - 1]
+            ], false), sortedVisibleColumnsEntries.slice(index + 1), true));
+            onColumnsChanged(function () { return (__assign(__assign({}, Object.fromEntries(newArray_1)), hiddenColumns)); });
+        }
+    }, [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]);
+    var onDownButtonClicked = (0, react_1.useCallback)(function (index) {
+        if (index < sortedVisibleColumnsEntries.length - 1) {
+            var newArray_2 = (0, helpers_1.normalizeColumnsOrders)(__spreadArray(__spreadArray(__spreadArray([], sortedVisibleColumnsEntries.slice(0, index), true), [
+                sortedVisibleColumnsEntries[index + 1],
+                sortedVisibleColumnsEntries[index]
+            ], false), sortedVisibleColumnsEntries.slice(index + 2), true));
+            onColumnsChanged(function () { return (__assign(__assign({}, Object.fromEntries(newArray_2)), hiddenColumns)); });
+        }
+    }, [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]);
+    var onHideButtonClicked = (0, react_1.useCallback)(function (columnKey) {
+        onColumnsChanged(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[columnKey] = __assign(__assign({}, prev[columnKey]), { order: -1 }), _a)));
+        });
+    }, [onColumnsChanged]);
+    var onShowButtonClicked = (0, react_1.useCallback)(function (columnKey) {
+        onColumnsChanged(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[columnKey] = __assign(__assign({}, hiddenColumns[columnKey]), { order: Object.keys(prev).length }), _a)));
+        });
+    }, [hiddenColumns, onColumnsChanged]);
+    return ((0, jsx_runtime_1.jsxs)(styles.Container, { children: [(0, jsx_runtime_1.jsxs)(styles.Panel, { children: [(0, jsx_runtime_1.jsx)(styles.Title, { children: "Colonnes visibles" }), (0, jsx_runtime_1.jsx)(styles.ColumnsList, { children: sortedVisibleColumnsEntries.map(function (_a, index) {
+                            var key = _a[0], column = _a[1];
+                            return ((0, jsx_runtime_1.jsx)(exports.DataGridColumnItem, { columnKey: key, columnIndex: index, column: column, visible: true, onUpButtonClicked: index > 0 ? onUpButtonClicked : undefined, onDownButtonClicked: index < sortedVisibleColumnsEntries.length - 1
+                                    ? onDownButtonClicked
+                                    : undefined, onVisibleButtonClicked: onHideButtonClicked }, key));
+                        }) })] }), (0, jsx_runtime_1.jsxs)(styles.Panel, { children: [(0, jsx_runtime_1.jsx)(styles.Title, { children: "Colonnes masqu\u00E9es" }), (0, jsx_runtime_1.jsx)(styles.ColumnsList, { children: Object.entries(hiddenColumns).map(function (_a, index) {
+                            var key = _a[0], column = _a[1];
+                            return ((0, jsx_runtime_1.jsx)(exports.DataGridColumnItem, { columnKey: key, columnIndex: index, column: column, visible: false, onVisibleButtonClicked: onShowButtonClicked }, key));
+                        }) })] })] }));
+};
+exports.DataGridColumnsEditor = DataGridColumnsEditor;

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

@@ -0,0 +1,22 @@
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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;
+}>, never>, never>> & string;
+export declare const Panel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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;
+}>, never>, never>> & string;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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;
+}>, never>, never>> & string;
+export declare const ColumnsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | 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<HTMLUListElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const ColumnItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | 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<HTMLLIElement> | null | undefined;
+}>, never>, {
+    $visible?: boolean;
+}>> & string;
+export declare const Buttons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<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;
+}>, never>, {
+    $visible?: boolean;
+}>> & string;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.Buttons = exports.ColumnItem = exports.ColumnsList = exports.Title = exports.Panel = exports.Container = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+exports.Container = styled_components_1.default.div.attrs({
+    className: 'DataGridColumnsModal-Container',
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n  overflow: auto;\n  font-size: var(--text-base);\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n  overflow: auto;\n  font-size: var(--text-base);\n  height: 100%;\n"])));
+exports.Panel = styled_components_1.default.div.attrs({
+    className: 'DataGridColumnsModal-Panel',
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"])));
+exports.Title = styled_components_1.default.div.attrs({
+    className: 'DataGridColumnsModal-Title',
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  margin-bottom: var(--space-2);\n  font-weight: bold;\n"], ["\n  margin: 0;\n  margin-bottom: var(--space-2);\n  font-weight: bold;\n"])));
+exports.ColumnsList = styled_components_1.default.ul.attrs({
+    className: 'DataGridColumnsModal-ColumnsList',
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--color-neutral-200);\n  margin: 0;\n  background-color: var(--color-neutral-50);\n\n  & > li:not(:last-child) {\n    border-bottom: 1px solid var(--color-neutral-100);\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  border: 1px solid var(--color-neutral-200);\n  margin: 0;\n  background-color: var(--color-neutral-50);\n\n  & > li:not(:last-child) {\n    border-bottom: 1px solid var(--color-neutral-100);\n  }\n"])));
+exports.ColumnItem = styled_components_1.default.li.attrs({
+    className: 'DataGridColumnsModal-ColumnItem',
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: var(--space-1);\n  transition: background-color 0.2s;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\n\n  span {\n    flex: 1;\n  }\n\n  button {\n    display: none;\n    padding: var(--space-1);\n    width: var(--space-6);\n    height: var(--space-6);\n    border-radius: var(--rounded-full);\n    background-color: var(--color-neutral-200);\n    border: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    background-color: var(--color-neutral-100);\n    button {\n      display: flex;\n      background-color: var(--color-neutral-300);\n    }\n  }\n"], ["\n  padding: var(--space-1);\n  transition: background-color 0.2s;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-2);\n\n  span {\n    flex: 1;\n  }\n\n  button {\n    display: none;\n    padding: var(--space-1);\n    width: var(--space-6);\n    height: var(--space-6);\n    border-radius: var(--rounded-full);\n    background-color: var(--color-neutral-200);\n    border: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    background-color: var(--color-neutral-100);\n    button {\n      display: flex;\n      background-color: var(--color-neutral-300);\n    }\n  }\n"])));
+exports.Buttons = styled_components_1.default.div.attrs({
+    className: 'DataGridColumnsModal-Buttons',
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  gap: var(--space-1);\n  height: var(--space-6);\n  ", "\n\n  svg {\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"], ["\n  display: flex;\n  gap: var(--space-1);\n  height: var(--space-6);\n  ", "\n\n  svg {\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"])), function (_a) {
+    var $visible = _a.$visible;
+    return $visible
+        ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          width: var(--space-24);\n          justify-content: flex-end;\n        "], ["\n          width: var(--space-24);\n          justify-content: flex-end;\n        "]))) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          width: var(--space-6);\n        "], ["\n          width: var(--space-6);\n        "])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -0,0 +1,2 @@
+import { DataGridCellProps } from './types';
+export declare const DataGridEditableCell: <R>({ row, columnKey, column, context, }: DataGridCellProps<R>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridEditableCell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+var react_1 = require("react");
+var lodash_1 = require("lodash");
+var hooks_1 = require("./hooks");
+var DataGridEditableCell = function (_a) {
+    var row = _a.row, columnKey = _a.columnKey, column = _a.column, context = _a.context;
+    var _b = (0, hooks_1.useDataGridContext)(context), onCellEdited = _b.onCellEdited, setEditingCell = _b.setEditingCell;
+    var _c = (0, react_1.useState)(column.getter
+        ? column.getter(row)
+        : column.propertyName
+            ? String(row[column.propertyName])
+            : ''), value = _c[0], setValue = _c[1];
+    var onClose = (0, react_1.useCallback)(function () {
+        onCellEdited === null || onCellEdited === void 0 ? void 0 : onCellEdited(row, columnKey, value);
+        setEditingCell([-1, -1]);
+    }, [columnKey, onCellEdited, row, setEditingCell, value]);
+    return ((0, jsx_runtime_1.jsxs)("td", { className: (0, lodash_1.join)([
+            // 'whitespace-nowrap py-1 text-sm',
+            column.className,
+            column.bodyClassName,
+        ], ' '), children: [(0, jsx_runtime_1.jsx)("input", { type: "text", 
+                // className="relative  z-10 block text-normal w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
+                value: value, onChange: function (e) { return setValue(e.target.value); } }), (0, jsx_runtime_1.jsx)("div", { 
+                // className="fixed inset-0 bg-black bg-opacity-10"
+                onClick: onClose })] }, columnKey));
+};
+exports.DataGridEditableCell = DataGridEditableCell;

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

@@ -0,0 +1,9 @@
+import { DataGridContext } from '../types';
+export declare const useFilterModal: <R>({ columnKey, context, }: {
+    columnKey: string;
+    context: DataGridContext<R>;
+}) => {
+    openModal: () => void;
+    closeModal: () => void;
+    modal: import("react/jsx-runtime").JSX.Element | null;
+};

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

@@ -0,0 +1,52 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilterModal = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Icons_1 = require("../../../../Icons");
+var react_1 = require("react");
+var forms_1 = require("../../../forms");
+var FilterModalContent_1 = require("../FilterModalContent");
+var Modal_1 = require("../../../layout/Modal");
+var hooks_1 = require("../hooks");
+var useFilterModal = function (_a) {
+    var _b;
+    var columnKey = _a.columnKey, context = _a.context;
+    var _c = (0, react_1.useState)(false), isVisible = _c[0], setIsVisible = _c[1];
+    var _d = (0, hooks_1.useDataGridContext)(context), _e = _d.filters, filters = _e === void 0 ? {} : _e, columns = _d.columns, setFilters = _d.setFilters;
+    var column = columns[columnKey];
+    var _f = (0, react_1.useState)((_b = filters[columnKey]) !== null && _b !== void 0 ? _b : column === null || column === void 0 ? void 0 : column.filter), currentFilter = _f[0], setCurrentFilter = _f[1];
+    var openModal = (0, react_1.useCallback)(function () {
+        setIsVisible(true);
+    }, []);
+    var closeModal = (0, react_1.useCallback)(function () {
+        setIsVisible(false);
+    }, []);
+    var onClearClicked = (0, react_1.useCallback)(function () {
+        var newFilters = __assign({}, filters);
+        delete newFilters[columnKey];
+        setFilters(newFilters);
+        closeModal();
+    }, [closeModal, columnKey, filters, setFilters]);
+    var onApplyClicked = (0, react_1.useCallback)(function () {
+        var _a;
+        setFilters(__assign(__assign({}, filters), (_a = {}, _a[columnKey] = currentFilter, _a)));
+        closeModal();
+    }, [closeModal, columnKey, currentFilter, filters, setFilters]);
+    var onCancelClicked = (0, react_1.useCallback)(function () {
+        closeModal();
+    }, [closeModal]);
+    var modal = isVisible ? ((0, jsx_runtime_1.jsxs)(Modal_1.Modal, { children: [(0, jsx_runtime_1.jsxs)(Modal_1.Modal.Header, { children: ["Filtrer \"", column.name, "\""] }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.ContentWithIcon, { children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterIcon, { fill: "var(--color-primary-400)" }), (0, jsx_runtime_1.jsx)(FilterModalContent_1.FilterModalContent, { filter: currentFilter, onFilterChanged: setCurrentFilter })] }), (0, jsx_runtime_1.jsxs)(Modal_1.Modal.Buttons, { children: [(0, jsx_runtime_1.jsx)(forms_1.Button, { color: "danger", icon: Icons_1.FilterSlashIcon, onClick: onClearClicked, children: "Supprimer" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { style: { marginLeft: 'auto' }, color: "primary", icon: Icons_1.FilterIcon, onClick: onApplyClicked, children: "Filtrer" }), (0, jsx_runtime_1.jsx)(forms_1.Button, { onClick: onCancelClicked, children: "Annuler" })] })] })) : null;
+    return { openModal: openModal, closeModal: closeModal, modal: modal };
+};
+exports.useFilterModal = useFilterModal;

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

@@ -0,0 +1,9 @@
+import { DataGridContext } from '../types';
+type FilterValuesProps<R> = {
+    columnKey: string;
+    columnIndex: number;
+    context: DataGridContext<R>;
+    onClose?: () => void;
+};
+export declare const DataGridFilterMenu: <R>({ columnKey, context, onClose, }: FilterValuesProps<R>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,140 @@
+"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 __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 __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.DataGridFilterMenu = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+var styles = __importStar(require("./styles"));
+var Icons_1 = require("../../../../Icons");
+var helpers_1 = require("../helpers");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var FilterValuesScroller_1 = require("../FilterValuesScroller");
+var forms_1 = require("../../../forms");
+var hooks_1 = require("./hooks");
+var DataGridFilterMenu = function (_a) {
+    var _b, _c;
+    var columnKey = _a.columnKey, context = _a.context, onClose = _a.onClose;
+    var _d = (0, hooks_1.useFilterModal)({ columnKey: columnKey, context: context }), openModal = _d.openModal, modal = _d.modal;
+    var _e = (0, react_1.useContext)(context), _f = _e.filters, filters = _f === void 0 ? {} : _f, rows = _e.rows, columns = _e.columns, setFilters = _e.setFilters, filterValuesLoader = _e.filterValuesLoader;
+    var column = (_b = columns[columnKey]) !== null && _b !== void 0 ? _b : {};
+    var textFilterInputRef = (0, react_1.useRef)(null);
+    var _g = (0, react_1.useState)(''), textFilter = _g[0], setTextFilter = _g[1];
+    var _h = (0, react_1.useState)([]), availableValues = _h[0], setAvailableValues = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (filterValuesLoader) {
+            filterValuesLoader(columnKey).then(function (values) {
+                setAvailableValues(function () { return values; });
+            });
+        }
+        else {
+            var otherFilters = Object.entries(filters)
+                .filter(function (_a) {
+                var key = _a[0];
+                return key !== columnKey;
+            })
+                .map(function (_a) {
+                var filter = _a[1];
+                return filter;
+            });
+            var availableRows = (0, helpers_1.applyFilters)(rows, otherFilters);
+            var values_1 = availableRows.map(function (row) { return column.filter.getter(row); });
+            setAvailableValues(function () { return (0, lodash_1.uniq)(values_1).sort(); });
+        }
+    }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
+    var selectedValues = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = filters === null || filters === void 0 ? void 0 : filters[columnKey]) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []; }, [columnKey, filters]);
+    var clearFilter = (0, react_1.useCallback)(function () {
+        var newFilters = __assign({}, filters);
+        delete newFilters[columnKey];
+        setFilters(newFilters);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [filters, columnKey, setFilters, onClose]);
+    var setValuesChecked = (0, react_1.useCallback)(function (values, checked) {
+        setFilters(function (prevFilters) {
+            var _a, _b, _c, _d, _e;
+            var newValues = checked
+                ? __spreadArray(__spreadArray([], ((_b = (_a = prevFilters[columnKey]) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : []), true), values, true) : lodash_1.without.apply(void 0, __spreadArray([(_d = (_c = prevFilters[columnKey]) === null || _c === void 0 ? void 0 : _c.values) !== null && _d !== void 0 ? _d : []], values, false));
+            var newFilters = __assign({}, prevFilters);
+            if (newValues.length === 0) {
+                delete newFilters[columnKey];
+            }
+            else {
+                newFilters[columnKey] = __assign(__assign({}, ((_e = prevFilters[columnKey]) !== null && _e !== void 0 ? _e : column.filter)), { operator: 'inArray', values: newValues });
+            }
+            return newFilters;
+        });
+    }, [setFilters, columnKey, column.filter]);
+    var toggleValues = (0, react_1.useCallback)(function (values) {
+        var checked = (0, lodash_1.intersection)(selectedValues, values).length === values.length;
+        setValuesChecked(values, !checked);
+    }, [setValuesChecked, selectedValues]);
+    var formatter = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.formatter) !== null && _b !== void 0 ? _b : (function (v) { return (v === null ? null : String(v)); }); }, [(_c = column.filter) === null || _c === void 0 ? void 0 : _c.formatter]);
+    var filteredAvailableValues = (0, react_1.useMemo)(function () {
+        return !textFilter
+            ? availableValues
+            : availableValues.filter(function (value) { var _a; return (_a = formatter(value)) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textFilter.toLowerCase()); });
+    }, [availableValues, formatter, textFilter]);
+    (0, react_1.useEffect)(function () {
+        if (textFilterInputRef.current) {
+            textFilterInputRef.current.focus();
+        }
+    }, []);
+    var checkboxesComponent = (0, react_1.useMemo)(function () {
+        if (column.type === 'date') {
+            var groups = (0, helpers_1.getDateGroups)(filteredAvailableValues);
+            return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, groups: groups }));
+        }
+        return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter }));
+    }, [
+        column.type,
+        filteredAvailableValues,
+        formatter,
+        selectedValues,
+        toggleValues,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(styles.Menu, { onClick: function (e) { return e.stopPropagation(); }, children: [modal, (0, jsx_runtime_1.jsxs)(styles.MenuItem, { onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterIcon, {}), "Filtrer ..."] }), (0, jsx_runtime_1.jsxs)(styles.MenuItem, { "$color": "danger", onClick: clearFilter, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer le filtre"] }), (0, jsx_runtime_1.jsxs)(styles.InputContainer, { children: [(0, jsx_runtime_1.jsx)(Icons_1.MagnifierIcon, {}), (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: textFilterInputRef, type: "text", name: "search", id: "search", placeholder: "Rechercher ...", value: textFilter, onChange: function (e) { return setTextFilter(e.target.value); } })] }), (0, jsx_runtime_1.jsx)(styles.CheckboxesContainer, { children: checkboxesComponent })] }));
+};
+exports.DataGridFilterMenu = DataGridFilterMenu;

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

@@ -0,0 +1,15 @@
+import { ThemeColor } from '../../../../providers/ThemeProvider/types';
+export declare const Menu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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;
+}>, never>, never>> & string;
+export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}>, never>, {
+    $color?: ThemeColor;
+}>> & string;
+export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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;
+}>, never>, never>> & string;
+export declare const CheckboxesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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;
+}>, never>, never>> & string;

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

@@ -0,0 +1,48 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.CheckboxesContainer = exports.InputContainer = exports.MenuItem = exports.Menu = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+exports.Menu = styled_components_1.default.div.attrs({
+    className: 'Menu',
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"], ["\n  position: absolute;\n  inset: 0;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"])));
+exports.MenuItem = styled_components_1.default.button.attrs({
+    className: 'MenuItem',
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n"])), function (_a) {
+    var $color = _a.$color;
+    return $color
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "], ["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "])), $color, $color) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "], ["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "])));
+});
+exports.InputContainer = styled_components_1.default.div.attrs({
+    className: 'InputContainer',
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-2);\n  margin-top: var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"], ["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 var(--space-2);\n  margin-top: var(--space-1);\n\n  svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: var(--space-4);\n    display: flex;\n    align-items: center;\n    fill: var(--color-neutral-400);\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n\n  input {\n    padding-left: var(--space-8);\n  }\n"])));
+exports.CheckboxesContainer = styled_components_1.default.div.attrs({
+    className: 'CheckboxesContainer',
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-2);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-50);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"], ["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-2);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-50);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,4 @@
+import { DataGridContext } from './types';
+export declare const DataGridFooter: <R>({ context, }: {
+    context: DataGridContext<R>;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridFooter = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var getScrollbarSize_1 = require("../../../helpers/getScrollbarSize");
+var lodash_1 = require("lodash");
+var hooks_1 = require("./hooks");
+var SCROLL_BAR_SIZE = (0, getScrollbarSize_1.getScrollBarSize)();
+var DataGridFooter = function (_a) {
+    var context = _a.context;
+    var _b = (0, hooks_1.useDataGridContext)(context), visibleColumns = _b.visibleColumns, rows = _b.rows, selectedRows = _b.selectedRows, sortedRows = _b.sortedRows, _c = _b.rowHeight, rowHeight = _c === void 0 ? 48 : _c, selectable = _b.selectable;
+    return ((0, jsx_runtime_1.jsx)("tfoot", { 
+        // className="block border-t border-t-gray-300"
+        style: {
+            paddingRight: "".concat(SCROLL_BAR_SIZE[0], "px"),
+        }, children: (0, jsx_runtime_1.jsxs)("tr", { 
+            // className="grid bg-gray-100"
+            style: {
+                height: "".concat(rowHeight, "px"),
+            }, children: [!!selectable && ((0, jsx_runtime_1.jsx)("th", {}, "__select_checkbox__")), visibleColumns.map(function (_a) {
+                    var _b, _c;
+                    var key = _a[0], col = _a[1];
+                    return ((0, jsx_runtime_1.jsx)("th", { className: (0, lodash_1.join)([
+                            // 'inline-block relative group px-3 py-0 text-left text-sm hover:bg-gray-50 leading-6',
+                            col.className,
+                            col.footerClassName,
+                            // '!overflow-visible',
+                        ], ' '), style: { width: ((_b = col.width) !== null && _b !== void 0 ? _b : 150) + 'px' }, children: (_c = col.footer) === null || _c === void 0 ? void 0 : _c.call(col, rows, sortedRows, selectedRows) }, key));
+                })] }) }));
+};
+exports.DataGridFooter = DataGridFooter;

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

@@ -0,0 +1,4 @@
+import { DataGridContext } from './types';
+export declare const DataGridHeader: <R>({ context, }: {
+    context: DataGridContext<R>;
+}) => import("react/jsx-runtime").JSX.Element;