@addev-be/ui 0.3.2 → 0.3.3

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

@@ -0,0 +1,220 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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.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 ContextMenu_1 = require("../../../ui/ContextMenu");
+var FilterValuesScroller_1 = require("../FilterValuesScroller");
+var forms_1 = require("../../../forms");
+var hooks_1 = require("./hooks");
+var sortAsc = {
+    number: ['Trier du plus petit au plus grand', Icons_1.ArrowDown19Icon],
+    text: ['Trier de A à Z', Icons_1.ArrowDownAZIcon],
+    // date: 'Trier du plus ancien au plus récent',
+};
+var sortDesc = {
+    number: ['Trier du plus grand au plus petit', Icons_1.ArrowUp91Icon],
+    text: ['Trier de Z à A', Icons_1.ArrowUpZAIcon],
+    // date: 'Trier du plus récent au plus ancien',
+};
+var footerFunctionsTexts = {
+    average: 'Moyenne',
+    count: 'Nombre',
+    max: 'Maximum',
+    min: 'Minimum',
+    sum: 'Somme',
+};
+var footerFunctionsIcons = {
+    average: Icons_1.XBarIcon,
+    count: Icons_1.TallyIcon,
+    max: Icons_1.ArrowUpBigSmallIcon,
+    min: Icons_1.ArrowDownBigSmallIcon,
+    sum: Icons_1.SigmaIcon,
+};
+var DataGridFilterMenu = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var columnKey = _a.columnKey, context = _a.context, onClose = _a.onClose;
+    var _k = (0, hooks_1.useFilterModal)({ columnKey: columnKey, context: context }), openModal = _k.openModal, modal = _k.modal;
+    var _l = (0, react_1.useContext)(context), _m = _l.filters, filters = _m === void 0 ? {} : _m, _o = _l.footers, footers = _o === void 0 ? {} : _o, rows = _l.rows, columns = _l.columns, setFilters = _l.setFilters, filterValuesLoader = _l.filterValuesLoader, setSorts = _l.setSorts, setFooters = _l.setFooters;
+    var column = (_b = columns[columnKey]) !== null && _b !== void 0 ? _b : {};
+    var textFilterInputRef = (0, react_1.useRef)(null);
+    var _p = (0, react_1.useState)(''), textFilter = _p[0], setTextFilter = _p[1];
+    var _q = (0, react_1.useState)([]), availableValues = _q[0], setAvailableValues = _q[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 () {
+                var _a;
+                return (0, lodash_1.uniq)(values_1).sort(((_a = column.filter) === null || _a === void 0 ? void 0 : _a.type) === 'number'
+                    ? function (a, b) { return a - b; }
+                    : function (a, b) { return a.localeCompare(b); });
+            });
+        }
+    }, [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 : helpers_1.defaultRendererAndFormatter; }, [(_c = column.filter) === null || _c === void 0 ? void 0 : _c.formatter]);
+    var renderer = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.renderer) !== null && _b !== void 0 ? _b : helpers_1.defaultRendererAndFormatter; }, [(_d = column.filter) === null || _d === void 0 ? void 0 : _d.renderer]);
+    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, renderer: renderer, groups: groups }));
+        }
+        return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, renderer: renderer }));
+    }, [
+        column.type,
+        filteredAvailableValues,
+        formatter,
+        renderer,
+        selectedValues,
+        toggleValues,
+    ]);
+    var onSortAscClicked = (0, react_1.useCallback)(function () {
+        var _a;
+        setSorts((_a = {}, _a[columnKey] = 'asc', _a));
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [columnKey, onClose, setSorts]);
+    var onSortDescClicked = (0, react_1.useCallback)(function () {
+        var _a;
+        setSorts((_a = {}, _a[columnKey] = 'desc', _a));
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [columnKey, onClose, setSorts]);
+    var hasFilters = ((_e = filters[columnKey]) === null || _e === void 0 ? void 0 : _e.values.length) > 0;
+    var _r = [
+        sortAsc[(_g = (_f = column.filter) === null || _f === void 0 ? void 0 : _f.type) !== null && _g !== void 0 ? _g : 'text'],
+        sortDesc[(_j = (_h = column.filter) === null || _h === void 0 ? void 0 : _h.type) !== null && _j !== void 0 ? _j : 'text'],
+    ], _s = _r[0], sortAscText = _s[0], SortAscIcon = _s[1], _t = _r[1], sortDescText = _t[0], SortDescIcon = _t[1];
+    var isFooterVisible = columnKey in footers && footers[columnKey] !== undefined;
+    var showFooter = (0, react_1.useCallback)(function (key) {
+        setFooters(function (prevFooters) {
+            var _a;
+            return (__assign(__assign({}, prevFooters), (_a = {}, _a[columnKey] = key, _a)));
+        });
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [columnKey, onClose, setFooters]);
+    var hideFooter = (0, react_1.useCallback)(function () {
+        setFooters(function (prevFooters) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var _a = prevFooters, _b = columnKey, _ = _a[_b], newFooters = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+            return newFooters;
+        });
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [columnKey, onClose, setFooters]);
+    return ((0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu, { children: [modal, column.sortGetter && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: onSortAscClicked, children: [(0, jsx_runtime_1.jsx)(SortAscIcon, {}), sortAscText] }), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: onSortDescClicked, children: [(0, jsx_runtime_1.jsx)(SortDescIcon, {}), sortDescText] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), isFooterVisible && typeof column.footer === 'function' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: hideFooter, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterSlashIcon, {}), "Masquer le total"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), !isFooterVisible && typeof column.footer === 'function' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: function () { return showFooter('count'); }, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterIcon, {}), "Afficher le total"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), typeof column.footer === 'object' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.ParentItem, { children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterIcon, {}), "Afficher le total", (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.SubMenu, { children: [Object.keys(column.footer).map(function (key) {
+                                        var _a;
+                                        var TotalIcon = (_a = footerFunctionsIcons[key]) !== null && _a !== void 0 ? _a : Icons_1.TableFooterIcon;
+                                        return ((0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: function () { return showFooter(key); }, children: [(0, jsx_runtime_1.jsx)(TotalIcon, {}), key in footerFunctionsTexts
+                                                    ? footerFunctionsTexts[key]
+                                                    : key] }, key));
+                                    }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {}), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: hideFooter, disabled: !isFooterVisible, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableFooterSlashIcon, {}), "Masquer le total"] })] })] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {})] })), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterIcon, {}), "Filtrer ..."] }), (0, jsx_runtime_1.jsxs)(ContextMenu_1.ContextMenu.Item, { "$color": "danger", onClick: clearFilter, disabled: !hasFilters, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer le filtre"] }), (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu.Divider, {}), (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,9 @@
+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;
+export declare const Separator: 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,21 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = exports.CheckboxesContainer = exports.InputContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.InputContainer = styled_components_1.default.div.attrs({
+    className: 'InputContainer',
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-radius: var(--rounded-md);\n  padding: 0 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-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_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: normal;\n  user-select: none;\n  padding: var(--space-2);\n  margin: var(--space-1);\n  margin-bottom: 0;\n  border: 1px solid var(--color-neutral-300);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-0);\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-1);\n  margin-bottom: 0;\n  border: 1px solid var(--color-neutral-300);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-inner);\n  background-color: var(--color-neutral-0);\n  height: 20em;\n  overflow-y: hidden;\n  white-space: nowrap;\n"])));
+exports.Separator = styled_components_1.default.div.attrs({
+    className: 'Separator',
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"], ["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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 | null;

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

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridFooter = 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 hooks_1 = require("./hooks");
+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, selectable = _b.selectable, _c = _b.footers, footers = _c === void 0 ? {} : _c, gridTemplateColumns = _b.gridTemplateColumns, footerFunctions = _b.footerFunctions;
+    if (!Object.keys(footers).length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridFooterRow, { "$gridTemplateColumns": gridTemplateColumns, children: [!!selectable && (0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, {}), visibleColumns.map(function (_a) {
+                var _b, _c;
+                var key = _a[0], col = _a[1];
+                return ((0, jsx_runtime_1.jsx)(styles.DataGridHeaderCellContainer, { style: { width: ((_b = col.width) !== null && _b !== void 0 ? _b : 150) + 'px' }, children: (_c = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[key]) === null || _c === void 0 ? void 0 : _c.call(footerFunctions, 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;

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

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHeader = 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 react_1 = require("react");
+var forms_1 = require("../../forms");
+var DataGridHeaderCell_1 = require("./DataGridHeaderCell");
+var IndeterminateCheckbox_1 = require("../../forms/IndeterminateCheckbox");
+var layout_1 = require("../../layout");
+var hooks_1 = require("./DataGridColumnsModal/hooks");
+var hooks_2 = require("./hooks");
+var DataGridHeader = function (_a) {
+    var context = _a.context;
+    var _b = (0, hooks_2.useDataGridContext)(context), name = _b.name, visibleColumns = _b.visibleColumns, selectable = _b.selectable, rows = _b.rows, selectedKeys = _b.selectedKeys, setSelectedKeys = _b.setSelectedKeys, copyTable = _b.copyTable, setFilters = _b.setFilters, refresh = _b.refresh, headerColor = _b.headerColor, rowKeyGetter = _b.rowKeyGetter, gridTemplateColumns = _b.gridTemplateColumns, getAllIds = _b.getAllIds;
+    var _c = (0, react_1.useState)(), visibleFilter = _c[0], setVisibleFilter = _c[1];
+    var _d = (0, hooks_1.useDataGridColumnsModal)(context), openModal = _d.openModal, modal = _d.modal;
+    var checkboxStatus = selectedKeys.length === 0
+        ? false
+        : selectedKeys.length === rows.length
+            ? true
+            : undefined;
+    var toggleAll = (0, react_1.useCallback)(function (newStatus) { return __awaiter(void 0, void 0, void 0, function () {
+        var allIds, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!getAllIds) return [3 /*break*/, 2];
+                    return [4 /*yield*/, getAllIds()];
+                case 1:
+                    _a = _b.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = rows.map(rowKeyGetter);
+                    _b.label = 3;
+                case 3:
+                    allIds = _a;
+                    setSelectedKeys(newStatus ? allIds : []);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [getAllIds, rowKeyGetter, rows, setSelectedKeys]);
+    var onFilterButtonClicked = (0, react_1.useCallback)(function (columnKey) {
+        setVisibleFilter(function (prev) { return (prev === columnKey ? undefined : columnKey); });
+    }, []);
+    var _e = (0, react_1.useState)(false), isLoadingVisible = _e[0], setIsLoadingVisible = _e[1];
+    var runCopyTable = (0, react_1.useCallback)(function () {
+        setIsLoadingVisible(true);
+        copyTable().then(function () { return setIsLoadingVisible(false); });
+    }, [copyTable]);
+    var toolsRow = ((0, jsx_runtime_1.jsxs)(styles.DataGridToolsRow, { children: [(0, jsx_runtime_1.jsx)(layout_1.Loading, { visible: isLoadingVisible }), refresh && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", onClick: refresh, children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowsRotateIcon, {}), "Rafra\u00EEchir"] })), (0, jsx_runtime_1.jsxs)(forms_1.Button, { color: "emerald", size: "small", onClick: runCopyTable, children: [(0, jsx_runtime_1.jsx)(Icons_1.CopyIcon, {}), "Copier la table"] }), (0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", color: "danger", onClick: function () { return setFilters({}); }, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer les filtres"] }), name && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { color: "info", size: "small", onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableColumnsIcon, {}), "Param\u00E8tres des colonnes"] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, toolsRow, (0, jsx_runtime_1.jsxs)(styles.DataGridHeaderRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && ((0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, { "$headerColor": headerColor, onClick: function () { return toggleAll(!(checkboxStatus !== null && checkboxStatus !== void 0 ? checkboxStatus : true)); }, children: (0, jsx_runtime_1.jsx)(IndeterminateCheckbox_1.IndeterminateCheckbox, { checked: checkboxStatus, readOnly: true }) })), visibleColumns.map(function (_a, index) {
+                        var key = _a[0], col = _a[1];
+                        return ((0, jsx_runtime_1.jsx)(DataGridHeaderCell_1.DataGridHeaderCell, { columnKey: key, column: col, context: context, columnIndex: index, isFilterOpen: visibleFilter === key, onFilterButtonClicked: onFilterButtonClicked }, key));
+                    })] })] }));
+};
+exports.DataGridHeader = DataGridHeader;

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

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

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

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGridHeaderCell = 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 react_1 = require("react");
+var Icons_1 = require("../../../Icons");
+var DataGridFilterMenu_1 = require("./DataGridFilterMenu");
+var layout_1 = require("../../layout");
+var IconButton_1 = require("../../forms/IconButton");
+var hooks_1 = require("./hooks");
+var providers_1 = require("../../../providers");
+var DataGridHeaderCell = function (_a) {
+    var _b;
+    var columnKey = _a.columnKey, columnIndex = _a.columnIndex, column = _a.column, context = _a.context;
+    var getElementScreenRect = (0, providers_1.useUi)().getElementScreenRect;
+    var contextValue = (0, hooks_1.useDataGridContext)(context);
+    var _c = contextValue.filters, filters = _c === void 0 ? {} : _c, setColumnWidth = contextValue.setColumnWidth, saveSettings = contextValue.saveSettings, headerColor = contextValue.headerColor;
+    var filterButtonRef = (0, react_1.useRef)(null);
+    /** RESIZING */
+    var _d = (0, react_1.useState)(false), isResizing = _d[0], setIsResizing = _d[1];
+    var resizingOffset = (0, react_1.useRef)(0);
+    var onResizeStart = (0, react_1.useCallback)(function (e) {
+        resizingOffset.current = e.screenX - (column.width || 150);
+        setIsResizing(true);
+    }, [column.width]);
+    var onResizeMove = (0, react_1.useCallback)(function (e) {
+        if (isResizing) {
+            var newWidth = Math.max(86, e.screenX - resizingOffset.current);
+            setColumnWidth(columnKey, newWidth);
+        }
+    }, [columnKey, isResizing, setColumnWidth]);
+    var onResizeEnd = (0, react_1.useCallback)(function () {
+        setIsResizing(false);
+        saveSettings();
+    }, [saveSettings]);
+    var _e = (0, react_1.useState)(false), isFilterDropdownVisible = _e[0], setIsFilterDropdownVisible = _e[1];
+    var filterDropdown = (0, react_1.useMemo)(function () {
+        if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
+            return null;
+        }
+        var filterButtonRect = getElementScreenRect(filterButtonRef.current);
+        filterButtonRect.x += window.scrollX;
+        filterButtonRect.y += window.scrollY;
+        return ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$sourceRect": filterButtonRect, onClose: function () { return setIsFilterDropdownVisible(false); }, "$width": 320, "$height": [250, 400], "$autoPositionX": true, children: (0, jsx_runtime_1.jsx)(DataGridFilterMenu_1.DataGridFilterMenu, { columnKey: columnKey, columnIndex: columnIndex, context: context, onClose: function () { return setIsFilterDropdownVisible(false); } }) }));
+    }, [
+        columnIndex,
+        columnKey,
+        context,
+        getElementScreenRect,
+        isFilterDropdownVisible,
+    ]);
+    var onFilterButtonClicked = (0, react_1.useCallback)(function () {
+        setIsFilterDropdownVisible(true);
+    }, []);
+    var hasFilters = ((_b = filters[columnKey]) === null || _b === void 0 ? void 0 : _b.values.length) > 0;
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": headerColor, "$isResizing": isResizing, children: [filterDropdown, (0, jsx_runtime_1.jsx)("span", { children: column.name }), !!column.filter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", className: hasFilters ? 'danger' : '', ref: filterButtonRef, icon: Icons_1.ChevronDownIcon, color: hasFilters ? 'danger' : headerColor, onClick: onFilterButtonClicked })), column.resizable !== false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: onResizeStart }), isResizing && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: onResizeMove, onMouseUp: onResizeEnd }))] }))] }));
+};
+exports.DataGridHeaderCell = DataGridHeaderCell;

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

@@ -0,0 +1,7 @@
+import { DataGridFilter } from '../types';
+type FilterModalContentProps = {
+    filter: DataGridFilter;
+    onFilterChanged: (filter: DataGridFilter) => void;
+};
+export declare const FilterModalContent: ({ filter, onFilterChanged, }: FilterModalContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};