@addev-be/ui 0.2.8 → 0.2.10

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.8",
+  "version": "0.2.10",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

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

@@ -191,9 +191,10 @@ 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];
+          acc[columnKey] = column.footer[footerKey] as any;
         }
         return acc;
       }, {} as Record<string, DataGridFooterFunction<R>>),