@addev-be/ui 0.2.7 → 0.2.9

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

@@ -79,6 +79,7 @@ var sortDesc = {
 };
 var footerFunctionsTexts = {
     average: 'Moyenne',
+    avg: 'Moyenne',
     count: 'Nombre',
     max: 'Maximum',
     min: 'Minimum',
@@ -86,6 +87,7 @@ var footerFunctionsTexts = {
 };
 var footerFunctionsIcons = {
     average: Icons_1.XBarIcon,
+    avg: Icons_1.XBarIcon,
     count: Icons_1.TallyIcon,
     max: Icons_1.ArrowUpBigSmallIcon,
     min: Icons_1.ArrowDownBigSmallIcon,
@@ -165,11 +167,10 @@ var DataGridFilterMenu = function (_a) {
         }
     }, []);
     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 }));
+        var groups = column.type === 'date'
+            ? (0, helpers_1.getDateGroups)(filteredAvailableValues)
+            : undefined;
+        return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, renderer: renderer, groups: groups }));
     }, [
         column.type,
         filteredAvailableValues,

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

@@ -44,10 +44,11 @@ var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var CheckboxTemplate = function (_a) {
     var selectedValues = _a.selectedValues, value = _a.value, index = _a.index, className = _a.className, style = _a.style, onToggle = _a.onToggle;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, lodash_1.join)([
+    var checked = (0, react_1.useMemo)(function () { return value.values.every(function (v) { return selectedValues.includes(v); }); }, [selectedValues, value.values]);
+    return ((0, jsx_runtime_1.jsxs)(styles.FilterValueContainer, { className: (0, lodash_1.join)([
             // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
             className,
-        ], ' '), style: __assign(__assign({}, style), { paddingLeft: "".concat(value.level, "rem") }), title: value.title, onClick: function () { return onToggle === null || onToggle === void 0 ? void 0 : onToggle([value.value]); }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedValues.includes(value.value), readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value.displayValue || '(Vides)' })] }, index));
+        ], ' '), style: __assign(__assign({}, style), { paddingLeft: "".concat(value.level, "rem") }), title: value.title, onClick: function () { return onToggle === null || onToggle === void 0 ? void 0 : onToggle(value.values); }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: checked, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value.displayValue || '(Vides)' })] }, index));
 };
 var FilterValuesScroller = function (_a) {
     var values = _a.values, _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_FILTER_ROW_HEIGHT : _b, onRangeChange = _a.onRangeChange, onToggle = _a.onToggle, _c = _a.formatter, formatter = _c === void 0 ? helpers_1.defaultRendererAndFormatter : _c, _d = _a.renderer, renderer = _d === void 0 ? helpers_1.defaultRendererAndFormatter : _d, _e = _a.selectedValues, selectedValues = _e === void 0 ? [] : _e, groups = _a.groups;
@@ -62,7 +63,7 @@ var FilterValuesScroller = function (_a) {
         var target = e.target;
         setScrollTop(function () { return target.scrollTop; });
     }, 50), []);
-    var checkboxes = (0, react_1.useMemo)(function () { return (0, helpers_1.getCheckboxes)(values, renderer, formatter, groups); }, [values, groups, renderer, formatter]);
+    var checkboxes = (0, react_1.useMemo)(function () { return (0, helpers_1.getCheckboxes)(values, '', renderer, formatter, groups); }, [values, groups, renderer, formatter]);
     var visibleCheckboxes = checkboxes.slice(Math.max(0, index - tolerance), index + length + 1 + tolerance);
     var firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
     (0, react_1.useEffect)(function () {

package/dist/components/data/DataGrid/helpers/columns.js

@@ -61,7 +61,7 @@ exports.phoneColumn = phoneColumn;
 var dateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, options),
+        _a[key] = __assign({ name: title, type: 'date', render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: __assign(__assign({}, (0, filters_1.textFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; } }) }, options),
         _a);
 };
 exports.dateColumn = dateColumn;

package/dist/components/data/DataGrid/helpers/filters.d.ts

@@ -12,6 +12,6 @@ export declare const defaultValueParsers: {
 export declare const groupDatesByYearAndMonth: (dates: any[]) => Record<string, Record<string, any[]>>;
 export declare const getDateGroups: (dates: any[]) => DataGridFilterGroup[];
 export declare const defaultRendererAndFormatter: (value: any) => string;
-export declare const getCheckboxes: (values: DataGridFilterValue[], renderer: DataGridFilterRenderer, formatter: DataGridFilterFormatter, groups?: DataGridFilterGroup[], level?: number) => DataGridFilterCheckbox[];
+export declare const getCheckboxes: (values: DataGridFilterValue[], displayValue: DataGridFilterValue, renderer: DataGridFilterRenderer, formatter: DataGridFilterFormatter, groups?: DataGridFilterGroup[], level?: number) => DataGridFilterCheckbox[];
 export declare const textFilter: (key: string) => DataGridFilter<"text">;
 export declare const numberFilter: (key: string) => DataGridFilter<"number">;

package/dist/components/data/DataGrid/helpers/filters.js

@@ -207,10 +207,12 @@ var getDateGroups = function (dates) {
         var year = _a[0], months = _a[1];
         return ({
             name: year,
+            displayValue: year,
             values: Object.values(months).flat(),
             groups: Object.entries(months).map(function (_a) {
                 var month = _a[0], dates = _a[1];
                 return ({
+                    displayValue: month,
                     name: month,
                     values: dates,
                 });
@@ -223,19 +225,28 @@ var defaultRendererAndFormatter = function (value) {
     return String(value !== null && value !== void 0 ? value : '').trim() || '(Vides)';
 };
 exports.defaultRendererAndFormatter = defaultRendererAndFormatter;
-var getCheckboxes = function (values, renderer, formatter, groups, level) {
+var getCheckboxes = function (values, displayValue, renderer, formatter, groups, level) {
     if (level === void 0) { level = 0; }
-    return __spreadArray(__spreadArray([], (groups !== null && groups !== void 0 ? groups : [])
-        .map(function (group) {
-        var _a;
-        return (0, exports.getCheckboxes)((_a = group.values) !== null && _a !== void 0 ? _a : [], renderer, formatter, group.groups, level + 1);
-    })
-        .flat(), true), values.map(function (value) { return ({
-        displayValue: renderer(value),
-        title: formatter(value),
-        value: value !== null && value !== void 0 ? value : '',
-        level: level,
-    }); }), true);
+    return groups
+        ? groups
+            .map(function (group) {
+            var _a, _b;
+            return __spreadArray([
+                {
+                    displayValue: group.displayValue,
+                    title: formatter(group.displayValue),
+                    values: (_a = group.values) !== null && _a !== void 0 ? _a : [],
+                    level: level,
+                }
+            ], (0, exports.getCheckboxes)((_b = group.values) !== null && _b !== void 0 ? _b : [], group.displayValue, renderer, formatter, group.groups, level + 1), true);
+        })
+            .flat()
+        : values.map(function (value) { return ({
+            displayValue: renderer(value),
+            title: formatter(value),
+            values: [value !== null && value !== void 0 ? value : ''],
+            level: level,
+        }); });
 };
 exports.getCheckboxes = getCheckboxes;
 var textFilter = function (key) { return ({

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

@@ -103,6 +103,6 @@ var DataGrid = function (_a) {
         toggleSelection,
         visibleColumns,
     ]);
-    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.DataGridContainer, { ref: scrollableRef, onScroll: onScroll, "$headerRowHeight": headerRowHeight, "$rowHeight": rowHeight, "$rowsCount": contextProps.sortedRows.length, className: className, children: [(0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { onRangeChange: onVisibleRowsChange, hasFooter: hasFooter, rowTemplate: rowTemplate, context: DataGridContext }), 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, onScroll: onScroll, "$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, { onRangeChange: onVisibleRowsChange, hasFooter: hasFooter, rowTemplate: rowTemplate, context: DataGridContext }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] }) }));
 };
 exports.DataGrid = DataGrid;

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

@@ -2,6 +2,7 @@ import { ThemeColor } from '../../../providers/ThemeProvider/types';
 export declare const VIRTUAL_SCROLL_TOLERANCE = 20;
 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 DEFAULT_FILTER_ROW_HEIGHT = 24;
 export declare const TopPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -31,6 +32,7 @@ export declare const DataGridContainer: import("styled-components/dist/types").I
     $rowHeight?: number;
     $rowsCount: number;
     $showToolsHeader?: boolean;
+    $withFooter?: boolean;
 }>> & string;
 type DataGridHeaderOrFooterRowProps = {
     $headerRowHeight?: number;
@@ -61,4 +63,7 @@ export declare const FilterValuesScrollerContainer: import("styled-components/di
 }>, never>, {
     $rowHeight?: number;
 }>> & string;
+export declare const FilterValueContainer: 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 {};

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

@@ -27,11 +27,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterValuesScrollerContainer = 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.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.DEFAULT_FILTER_ROW_HEIGHT = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
+exports.FilterValueContainer = exports.FilterValuesScrollerContainer = 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.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.DEFAULT_FILTER_ROW_HEIGHT = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_FOOTER_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.VIRTUAL_SCROLL_TOLERANCE = 20;
 exports.TOOLBAR_HEIGHT = 40;
 exports.DEFAULT_HEADER_ROW_HEIGHT = 40;
+exports.DEFAULT_FOOTER_ROW_HEIGHT = 40;
 exports.DEFAULT_ROW_HEIGHT = 32;
 exports.DEFAULT_FILTER_ROW_HEIGHT = 24;
 exports.TopPaddingRow = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
@@ -70,8 +71,8 @@ exports.DataGridCell.displayName = 'DataGridCell';
 exports.DataGridToolsRow = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __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_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  }\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  }\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;
-    return "".concat(exports.TOOLBAR_HEIGHT, "px ").concat($headerRowHeight, "px auto");
+    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;
     return "".concat($headerRowHeight, "px");
@@ -131,4 +132,7 @@ exports.FilterValuesScrollerContainer = styled_components_1.default.div.attrs({
     var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_FILTER_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
 });
-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;
+exports.FilterValueContainer = styled_components_1.default.div.attrs({
+    className: 'FilterValueContainer',
+})(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: var(--color-neutral-50);\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: var(--color-neutral-50);\n  }\n"])));
+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, templateObject_26;

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

@@ -6,7 +6,7 @@ export type DataGridCellFC = FC<{
     onDoubleClick?: MouseEventHandler;
     style?: CSSProperties;
 }>;
-export type DataGridFooterPredefinedFunction = 'average' | 'count' | 'max' | 'min' | 'sum';
+export type DataGridFooterPredefinedFunction = 'average' | 'avg' | 'count' | 'max' | 'min' | 'sum';
 export type DataGridFooterFunction<R> = (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
 export type DataGridColumn<R> = {
     component?: DataGridCellFC;
@@ -150,13 +150,14 @@ export type DataGridFilter<T extends string = DataGridFilterType> = T extends Da
 } : never;
 export type DataGridFilterGroup = {
     name: string;
-    values?: (string | number | null)[];
+    displayValue: DataGridFilterValue;
+    values?: DataGridFilterValue[];
     groups?: DataGridFilterGroup[];
 };
 export type DataGridFilterValue = string | number | null;
 export type DataGridFilterCheckbox = {
     displayValue: ReactNode;
     title: string;
-    value: DataGridFilterValue;
+    values: DataGridFilterValue[];
     level: number;
 };

package/dist/components/data/SqlRequestDataGrid/helpers/columns.js

@@ -58,7 +58,7 @@ exports.sqlPhoneColumn = sqlPhoneColumn;
 var sqlDateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return (0, dates_1.formatDate)(row[key]); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a[key] = __assign({ name: title, type: 'date', render: function (row) { return (0, dates_1.formatDate)(row[key]); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlDateColumn = sqlDateColumn;

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

@@ -91,7 +91,7 @@ var SqlRequestDataGrid = function (_a) {
         ];
     }, [props.columns, props.hiddenColumns]), columnsKeys = _l[0], visibleColumnsKeys = _l[1];
     var columnTypes = (0, react_1.useMemo)(function () {
-        return visibleColumnsKeys.map(function (key) { var _a; return String((_a = props.columns[key].type) !== null && _a !== void 0 ? _a : 'text'); });
+        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.columns[key]) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
     }, [visibleColumnsKeys, props.columns]);
     var refresh = (0, react_1.useCallback)(function () {
         setRows([]);

package/dist/components/ui/ContextMenu/index.js

@@ -34,7 +34,9 @@ exports.ContextMenu = ContextMenu;
 var ParentMenuItem = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     var _b = (0, react_1.useState)(false), isOpened = _b[0], setIsOpened = _b[1];
-    var _c = (0, react_1.useState)(null), currentTimeout = _c[0], setCurrentTimeout = _c[1];
+    var _c = (0, react_1.useState)(false), isSubMenuLeft = _c[0], setIsSubMenuLeft = _c[1];
+    var _d = (0, react_1.useState)(null), currentTimeout = _d[0], setCurrentTimeout = _d[1];
+    var containerRef = (0, react_1.useRef)(null);
     var stopTimeout = (0, react_1.useCallback)(function () {
         if (currentTimeout) {
             clearTimeout(currentTimeout);
@@ -44,12 +46,15 @@ var ParentMenuItem = function (_a) {
     var startTimeout = (0, react_1.useCallback)(function (open) {
         stopTimeout();
         setCurrentTimeout(window.setTimeout(function () {
+            var _a;
+            var rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
             setIsOpened(open);
         }, open ? 100 : 300));
     }, [stopTimeout]);
     var open = (0, react_1.useCallback)(function () { return startTimeout(true); }, [startTimeout]);
     var close = (0, react_1.useCallback)(function () { return startTimeout(false); }, [startTimeout]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.MenuItemContainer, __assign({}, props, { className: isOpened ? 'opened' : '', onMouseEnter: open, onMouseLeave: close, "$withArrow": true, children: children })));
+    return ((0, jsx_runtime_1.jsx)(styles_1.MenuItemContainer, __assign({ ref: containerRef }, props, { className: "".concat(isOpened ? 'opened' : '', " ").concat(isSubMenuLeft ? 'left' : ''), onMouseEnter: open, onMouseLeave: close, "$withArrow": true, children: children })));
 };
 exports.ParentMenuItem = ParentMenuItem;
 exports.ContextMenu.Item = styles_1.MenuItemContainer;

package/dist/components/ui/ContextMenu/styles.js

@@ -40,7 +40,7 @@ exports.SubMenu = styled_components_1.default.div.attrs({
 exports.SubMenu.displayName = 'SubMenu';
 exports.MenuItemContainer = styled_components_1.default.div.attrs({
     className: 'MenuItemContainer',
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\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  ", "\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  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\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  ", "\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  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n"])), function (_a) {
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\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  ", "\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  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n  &.opened.left > ", " {\n    left: auto;\n    right: 100%;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\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  ", "\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  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n  &.opened.left > ", " {\n    left: auto;\n    right: 100%;\n  }\n"])), function (_a) {
     var $withArrow = _a.$withArrow;
     return $withArrow && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::after {\n        content: '';\n        position: absolute;\n        right: var(--space-2);\n        top: 50%;\n        transform: translateY(-50%);\n        border: 4px solid transparent;\n        border-left-color: var(--color-neutral-600);\n      }\n    "], ["\n      &::after {\n        content: '';\n        position: absolute;\n        right: var(--space-2);\n        top: 50%;\n        transform: translateY(-50%);\n        border: 4px solid transparent;\n        border-left-color: var(--color-neutral-600);\n      }\n    "])));
 }, function (_a) {
@@ -48,7 +48,7 @@ exports.MenuItemContainer = styled_components_1.default.div.attrs({
     return disabled
         ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--color-neutral-300);\n          background-color: var(--color-neutral-100);\n          cursor: default;\n        "], ["\n          color: var(--color-neutral-300);\n          background-color: var(--color-neutral-100);\n          cursor: default;\n        "]))) : $color
         ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __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_7 || (templateObject_7 = __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.SubMenu, exports.SubMenu);
+}, exports.SubMenu, exports.SubMenu, exports.SubMenu);
 exports.MenuItemContainer.displayName = 'MenuItemContainer';
 exports.Divider = styled_components_1.default.div.attrs({
     className: 'Divider',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -66,6 +66,7 @@ const sortDesc: Record<DataGridFilterType, [string, IconFC]> = {
 
 const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {
   average: 'Moyenne',
+  avg: 'Moyenne',
   count: 'Nombre',
   max: 'Maximum',
   min: 'Minimum',
@@ -73,6 +74,7 @@ const footerFunctionsTexts: Record<DataGridFooterPredefinedFunction, string> = {
 };
 const footerFunctionsIcons: Record<DataGridFooterPredefinedFunction, IconFC> = {
   average: XBarIcon,
+  avg: XBarIcon,
   count: TallyIcon,
   max: ArrowUpBigSmallIcon,
   min: ArrowDownBigSmallIcon,
@@ -195,19 +197,10 @@ export const DataGridFilterMenu = <R,>({
   }, []);
 
   const checkboxesComponent = useMemo(() => {
-    if (column.type === 'date') {
-      const groups = getDateGroups(filteredAvailableValues);
-      return (
-        <FilterValuesScroller
-          values={filteredAvailableValues}
-          selectedValues={selectedValues}
-          onToggle={toggleValues}
-          formatter={formatter}
-          renderer={renderer}
-          groups={groups}
-        />
-      );
-    }
+    const groups =
+      column.type === 'date'
+        ? getDateGroups(filteredAvailableValues)
+        : undefined;
     return (
       <FilterValuesScroller
         values={filteredAvailableValues}
@@ -215,6 +208,7 @@ export const DataGridFilterMenu = <R,>({
         onToggle={toggleValues}
         formatter={formatter}
         renderer={renderer}
+        groups={groups}
       />
     );
   }, [

package/src/components/data/DataGrid/FilterValuesScroller.tsx

@@ -29,33 +29,39 @@ const CheckboxTemplate = ({
   className?: string;
   style?: React.CSSProperties;
   onToggle?: (values: DataGridFilterValue[]) => void;
-}) => (
-  <div
-    key={index}
-    className={join(
-      [
-        // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
-        className,
-      ],
-      ' '
-    )}
-    style={{ ...style, paddingLeft: `${value.level}rem` }}
-    title={value.title}
-    onClick={() => onToggle?.([value.value])}
-  >
-    <input
-      type="checkbox"
-      checked={selectedValues.includes(value.value)}
-      readOnly
-      // className="inline-block mr-2"
-    />
-    <span
-    // className="mr-2 truncate"
+}) => {
+  const checked = useMemo(
+    () => value.values.every((v) => selectedValues.includes(v)),
+    [selectedValues, value.values]
+  );
+  return (
+    <styles.FilterValueContainer
+      key={index}
+      className={join(
+        [
+          // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
+          className,
+        ],
+        ' '
+      )}
+      style={{ ...style, paddingLeft: `${value.level}rem` }}
+      title={value.title}
+      onClick={() => onToggle?.(value.values)}
     >
-      {value.displayValue || '(Vides)'}
-    </span>
-  </div>
-);
+      <input
+        type="checkbox"
+        checked={checked}
+        readOnly
+        // className="inline-block mr-2"
+      />
+      <span
+      // className="mr-2 truncate"
+      >
+        {value.displayValue || '(Vides)'}
+      </span>
+    </styles.FilterValueContainer>
+  );
+};
 
 type FilterValuesScrollerProps = {
   values: DataGridFilterValue[];
@@ -96,7 +102,7 @@ export const FilterValuesScroller = ({
   );
 
   const checkboxes = useMemo(
-    () => getCheckboxes(values, renderer, formatter, groups),
+    () => getCheckboxes(values, '', renderer, formatter, groups),
     [values, groups, renderer, formatter]
   );
   const visibleCheckboxes = checkboxes.slice(

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -87,11 +87,15 @@ export const dateColumn = <R extends Record<string, any>>(
 ): DataGridColumns<R> => ({
   [key]: {
     name: title,
+    type: 'date',
     render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
+    filter: {
+      ...textFilter(key),
+      renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
+    },
     ...options,
   },
 });

package/src/components/data/DataGrid/helpers/filters.ts

@@ -168,8 +168,10 @@ export const getDateGroups = (dates: any[]): DataGridFilterGroup[] => {
   const grouperDates = groupDatesByYearAndMonth(dates);
   return Object.entries(grouperDates).map(([year, months]) => ({
     name: year,
+    displayValue: year,
     values: Object.values(months).flat(),
     groups: Object.entries(months).map(([month, dates]) => ({
+      displayValue: month,
       name: month,
       values: dates,
     })),
@@ -181,29 +183,37 @@ export const defaultRendererAndFormatter = (value: any) =>
 
 export const getCheckboxes = (
   values: DataGridFilterValue[],
+  displayValue: DataGridFilterValue,
   renderer: DataGridFilterRenderer,
   formatter: DataGridFilterFormatter,
   groups?: DataGridFilterGroup[],
   level = 0
-): DataGridFilterCheckbox[] => [
-  ...(groups ?? [])
-    .map<DataGridFilterCheckbox[]>((group) =>
-      getCheckboxes(
-        group.values ?? [],
-        renderer,
-        formatter,
-        group.groups,
-        level + 1
-      )
-    )
-    .flat(),
-  ...values.map<DataGridFilterCheckbox>((value) => ({
-    displayValue: renderer(value),
-    title: formatter(value),
-    value: value ?? '',
-    level,
-  })),
-];
+): DataGridFilterCheckbox[] =>
+  groups
+    ? groups
+        .map<DataGridFilterCheckbox[]>((group) => [
+          {
+            displayValue: group.displayValue,
+            title: formatter(group.displayValue),
+            values: group.values ?? [],
+            level,
+          },
+          ...getCheckboxes(
+            group.values ?? [],
+            group.displayValue,
+            renderer,
+            formatter,
+            group.groups,
+            level + 1
+          ),
+        ])
+        .flat()
+    : values.map<DataGridFilterCheckbox>((value) => ({
+        displayValue: renderer(value),
+        title: formatter(value),
+        values: [value ?? ''],
+        level,
+      }));
 
 export const textFilter = (key: string): DataGridFilter<'text'> => ({
   type: 'text',

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -191,7 +191,8 @@ export const useDataGrid = <R,>(
           acc[columnKey] = column.footer;
         } else if (
           typeof column.footer === 'object' &&
-          typeof column.footer[footerKey] === 'function'
+          typeof column.footer[footerKey] === 'function' &&
+          column.footer[footerKey] !== null
         ) {
           acc[columnKey] = column.footer[footerKey];
         }

package/src/components/data/DataGrid/index.tsx

@@ -123,6 +123,7 @@ export const DataGrid = <R,>({
         $headerRowHeight={headerRowHeight}
         $rowHeight={rowHeight}
         $rowsCount={contextProps.sortedRows.length}
+        $withFooter={hasFooter}
         className={className}
       >
         <DataGridHeader context={DataGridContext} />

package/src/components/data/DataGrid/styles.ts

@@ -5,6 +5,7 @@ import { ThemeColor } from '../../../providers/ThemeProvider/types';
 export const VIRTUAL_SCROLL_TOLERANCE = 20;
 export const TOOLBAR_HEIGHT = 40;
 export const DEFAULT_HEADER_ROW_HEIGHT = 40;
+export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
 export const DEFAULT_ROW_HEIGHT = 32;
 export const DEFAULT_FILTER_ROW_HEIGHT = 24;
 
@@ -175,6 +176,7 @@ export const DataGridContainer = styled.div<{
   $rowHeight?: number;
   $rowsCount: number;
   $showToolsHeader?: boolean;
+  $withFooter?: boolean;
 }>`
   display: grid;
   width: 100%;
@@ -182,8 +184,13 @@ export const DataGridContainer = styled.div<{
   background-color: var(--color-neutral-50);
   font-size: var(--text-base);
   overflow: scroll;
-  grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto`};
+  grid-template-rows: ${({
+    $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT,
+    $withFooter = false,
+  }) =>
+    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto ${
+      $withFooter ? DEFAULT_FOOTER_ROW_HEIGHT + 'px' : ''
+    }`};
 
   ${DataGridToolsRow} {
     height: ${TOOLBAR_HEIGHT}px;
@@ -345,3 +352,16 @@ export const FilterValuesScrollerContainer = styled.div.attrs({
     }
   }
 `;
+
+export const FilterValueContainer = styled.div.attrs({
+  className: 'FilterValueContainer',
+})`
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-neutral-50);
+  }
+`;

package/src/components/data/DataGrid/types.ts

@@ -23,6 +23,7 @@ export type DataGridCellFC = FC<{
 
 export type DataGridFooterPredefinedFunction =
   | 'average'
+  | 'avg'
   | 'count'
   | 'max'
   | 'min'
@@ -246,7 +247,8 @@ export type DataGridFilter<T extends string = DataGridFilterType> =
 
 export type DataGridFilterGroup = {
   name: string;
-  values?: (string | number | null)[];
+  displayValue: DataGridFilterValue;
+  values?: DataGridFilterValue[];
   groups?: DataGridFilterGroup[];
 };
 
@@ -255,6 +257,6 @@ export type DataGridFilterValue = string | number | null;
 export type DataGridFilterCheckbox = {
   displayValue: ReactNode;
   title: string;
-  value: DataGridFilterValue;
+  values: DataGridFilterValue[];
   level: number;
 };

package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx

@@ -99,6 +99,7 @@ export const sqlDateColumn = <R extends Record<string, any>>(
 ): SqlRequestDataGridColumns<R> => ({
   [key]: {
     name: title,
+    type: 'date',
     render: (row) => formatDate(row[key]),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',

package/src/components/data/SqlRequestDataGrid/index.tsx

@@ -59,7 +59,7 @@ export const SqlRequestDataGrid = <R,>({
   const columnTypes = useMemo(
     () =>
       visibleColumnsKeys.map((key) =>
-        String(props.columns[key].type ?? 'text')
+        String(props.columns[key]?.type ?? 'text')
       ),
     [visibleColumnsKeys, props.columns]
   );

package/src/components/ui/ContextMenu/index.tsx

@@ -4,6 +4,7 @@ import {
   HTMLAttributes,
   PropsWithChildren,
   useCallback,
+  useRef,
   useState,
 } from 'react';
 
@@ -27,7 +28,9 @@ export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
   ...props
 }) => {
   const [isOpened, setIsOpened] = useState(false);
+  const [isSubMenuLeft, setIsSubMenuLeft] = useState(false);
   const [currentTimeout, setCurrentTimeout] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const stopTimeout = useCallback(() => {
     if (currentTimeout) {
@@ -42,6 +45,8 @@ export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
       setCurrentTimeout(
         window.setTimeout(
           () => {
+            const rect = containerRef.current?.getBoundingClientRect();
+            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
             setIsOpened(open);
           },
           open ? 100 : 300
@@ -56,8 +61,9 @@ export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
 
   return (
     <MenuItemContainer
+      ref={containerRef}
       {...props}
-      className={isOpened ? 'opened' : ''}
+      className={`${isOpened ? 'opened' : ''} ${isSubMenuLeft ? 'left' : ''}`}
       onMouseEnter={open}
       onMouseLeave={close}
       $withArrow

package/src/components/ui/ContextMenu/styles.ts

@@ -104,6 +104,10 @@ export const MenuItemContainer = styled.div.attrs({
   &.opened > ${SubMenu} {
     display: block;
   }
+  &.opened.left > ${SubMenu} {
+    left: auto;
+    right: 100%;
+  }
 `;
 MenuItemContainer.displayName = 'MenuItemContainer';