@addev-be/ui 0.2.5 → 0.2.7

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

@@ -1,19 +1,21 @@
 import * as t from 'io-ts';
-import { CSSProperties, Context, Dispatch, MouseEvent, ReactNode, SetStateAction } from 'react';
+import { CSSProperties, Context, Dispatch, FC, MouseEvent, MouseEventHandler, ReactNode, SetStateAction } from 'react';
 import { SettingsContextProps } from '../../../providers/SettingsProvider';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-export type MysqlJsonObject = Record<string, string | number | null>;
+export type DataGridCellFC = FC<{
+    onDoubleClick?: MouseEventHandler;
+    style?: CSSProperties;
+}>;
+export type DataGridFooterPredefinedFunction = 'average' | 'count' | 'max' | 'min' | 'sum';
+export type DataGridFooterFunction<R> = (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
 export type DataGridColumn<R> = {
-    bodyClassName?: string;
-    className?: string;
+    component?: DataGridCellFC;
     editable?: boolean;
     excelFormatter?: (value: any) => string;
     excelValue?: (value: any) => string;
     filter?: DataGridFilter;
-    footer?: (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
-    footerClassName?: string;
-    getter?: (row: R) => string | number | MysqlJsonObject;
-    headerClassName?: string;
+    footer?: DataGridFooterFunction<R> | Record<string, DataGridFooterFunction<R> | null>;
+    getter?: (row: R) => string | number;
     name: string;
     order?: number;
     propertyName?: keyof R;
@@ -49,7 +51,10 @@ export type DataGridProps<R> = {
     rowHeight?: number;
     filter?: boolean;
     sort?: boolean;
-    filterValuesLoader?: (columnKey: string) => Promise<(string | number | null | MysqlJsonObject)[]>;
+    initialSorts?: Record<string, DataGridSort>;
+    initialFooters?: Record<string, string>;
+    onFootersChanged?: (footers: Record<string, string>) => void;
+    filterValuesLoader?: (columnKey: string) => Promise<(string | number | null)[]>;
     loadCopyRows?: () => Promise<R[]>;
     refresh?: () => void;
     headerColor?: ThemeColor;
@@ -65,6 +70,9 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
     setSorts: (sorts: Record<string, DataGridSort>) => void;
     filters?: DataGridFilters;
     setFilters: Dispatch<SetStateAction<DataGridFilters>>;
+    footers?: Record<string, string>;
+    setFooters: Dispatch<SetStateAction<Record<string, string>>>;
+    footerFunctions?: Record<string, DataGridFooterFunction<R>>;
     visibleColumns: DataGridColumnKeyValuePair<R>[];
     copyTable: (includeHeaders?: boolean, includeFooters?: boolean) => Promise<void>;
     setColumnWidth: (key: string, width: number) => void;
@@ -129,22 +137,26 @@ export type DataGridFilterPredicates = {
 export type DataGridFilterType = keyof DataGridFilterPredicates;
 export type DataGridFilterDataType<T extends DataGridFilterType> = DataGridFilterPredicates[T] extends DataGridFilterOperators<string, infer U> ? U : never;
 export type DataGridFilterGetter<T extends DataGridFilterType> = (value: any) => DataGridFilterDataType<T> | null;
-export type DataGridFilterFormatter = (value: any) => string | null;
+export type DataGridFilterRenderer = (value: any) => ReactNode;
+export type DataGridFilterFormatter = (value: any) => string;
 export type DataGridFilterOperator<T extends DataGridFilterType> = DataGridFilterPredicates[T] extends DataGridFilterOperators<infer K, any> ? K : never;
 export type DataGridFilter<T extends string = DataGridFilterType> = T extends DataGridFilterType ? {
     type: T;
     operator: DataGridFilterOperator<T>;
     getter: DataGridFilterGetter<T>;
+    renderer?: DataGridFilterRenderer;
     formatter?: DataGridFilterFormatter;
     values: (DataGridFilterDataType<T> | null)[];
 } : never;
-export type DataGridFilterGroup<R> = {
+export type DataGridFilterGroup = {
     name: string;
-    values?: R[];
-    groups?: DataGridFilterGroup<R>[];
+    values?: (string | number | null)[];
+    groups?: DataGridFilterGroup[];
 };
-export type DataGridFilterCheckbox<R extends string | number | null> = {
-    displayValue: string | null;
-    values: R[];
+export type DataGridFilterValue = string | number | null;
+export type DataGridFilterCheckbox = {
+    displayValue: ReactNode;
+    title: string;
+    value: DataGridFilterValue;
     level: number;
 };

package/dist/components/data/SqlRequestDataGrid/helpers/columns.d.ts

@@ -11,6 +11,6 @@ export declare const sqlDateColumn: <R extends Record<string, any>>(key: string,
 export declare const sqlMonthColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlNumberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlMoneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
-export declare const sqlPercentageColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
+export declare const sqlPercentageColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlCheckboxColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;
 export declare const sqlColorColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SqlRequestDataGridColumn<R>>) => SqlRequestDataGridColumns<R>;

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

@@ -10,19 +10,16 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sqlColorColumn = exports.sqlCheckboxColumn = exports.sqlPercentageColumn = exports.sqlMoneyColumn = exports.sqlNumberColumn = exports.sqlMonthColumn = exports.sqlDateColumn = exports.sqlPhoneColumn = exports.sqlMailColumn = exports.sqlComposedColumn = exports.sqlTextColumn = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var numbers_1 = require("../../../../helpers/numbers");
 var helpers_1 = require("../../DataGrid/helpers");
-var moment_1 = __importDefault(require("moment"));
+var dates_1 = require("../../../../helpers/dates");
 var sqlTextColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = row[key]) !== 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign(__assign({ name: title, render: function (row) { var _a; return (_a = row[key]) !== 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options), { footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }),
         _a);
 };
 exports.sqlTextColumn = sqlTextColumn;
@@ -40,35 +37,35 @@ var sqlComposedColumn = function (key, title, fields, options) {
                     { constantValue: field },
                     { fieldName: field },
                 ]; }),
-            }, name: title, render: function (row) { var _a; return (_a = row[key]) !== 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(fields[0])), { getter: function (value) { var _a; return (_a = value[fields[0]]) !== null && _a !== void 0 ? _a : 0; } }), filterField: fields[0], sortField: fields[0] }, options),
+            }, name: title, render: function (row) { var _a; return (_a = row[key]) !== 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(fields[0])), { getter: function (value) { var _a; return (_a = value[fields[0]]) !== null && _a !== void 0 ? _a : 0; } }), filterField: fields[0], sortField: fields[0], footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlComposedColumn = sqlComposedColumn;
 var sqlMailColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "mailto:".concat(row[key]), children: (_a = row[key]) !== 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "mailto:".concat(row[key]), children: (_a = row[key]) !== 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 : ''; }, 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.sqlMailColumn = sqlMailColumn;
 var sqlPhoneColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "tel:".concat(row[key]), children: (_a = row[key]) !== 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "tel:".concat(row[key]), children: (_a = row[key]) !== 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 : ''; }, 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.sqlPhoneColumn = sqlPhoneColumn;
 var sqlDateColumn = 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _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);
 };
 exports.sqlDateColumn = sqlDateColumn;
 var sqlMonthColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, 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 : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, 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.sqlMonthColumn = sqlMonthColumn;
@@ -76,7 +73,13 @@ var sqlNumberColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, 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.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, 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.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatNumber)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
+                sum: null,
+                avg: null,
+                count: null,
+                max: null,
+                min: null,
+            } }, options),
         _a);
 };
 exports.sqlNumberColumn = sqlNumberColumn;
@@ -84,31 +87,39 @@ var sqlMoneyColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, 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.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
+        _a[key] = __assign({ name: title, type: 'number', render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, 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.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
+                sum: null,
+                avg: null,
+                count: null,
+                max: null,
+                min: null,
+            } }, options),
         _a);
 };
 exports.sqlMoneyColumn = sqlMoneyColumn;
-var sqlPercentageColumn = function (key, title, options) {
+var sqlPercentageColumn = function (key, title, decimals, options) {
     var _a;
+    if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, 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.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, 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.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatPercentage)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }) }, options),
         _a);
 };
 exports.sqlPercentageColumn = sqlPercentageColumn;
 var sqlCheckboxColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, 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.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key] }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, 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.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlCheckboxColumn = sqlCheckboxColumn;
 var sqlColorColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) {
-                var _a;
-                return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: row[key] }, children: (_a = row[key]) !== 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: row[key] }, children: "\u00A0" })); }, 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 : ''; }, renderer: function (value) { return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        backgroundColor: value,
+                        width: 'var(--space-16)',
+                        height: '1em',
+                    }, children: "\u00A0" })); } }) }, options),
         _a);
 };
 exports.sqlColorColumn = sqlColorColumn;

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

@@ -63,30 +63,45 @@ var DataGrid_1 = require("../DataGrid");
 var helpers_1 = require("./helpers");
 var helpers_2 = require("../DataGrid/helpers");
 var SqlRequestDataGrid = function (_a) {
+    var _b, _c;
     var onSelectionChangeFromProps = _a.onSelectionChange, props = __rest(_a, ["onSelectionChange"]);
     var currentRows = (0, react_1.useRef)([]);
-    var _b = (0, react_1.useState)([]), rows = _b[0], setRows = _b[1];
-    var _c = (0, react_1.useState)(0), start = _c[0], setStart = _c[1];
-    var _d = (0, react_1.useState)(50), length = _d[0], setLength = _d[1];
-    var _e = (0, react_1.useState)(-1), total = _e[0], setTotal = _e[1];
-    var _f = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _f[0], sqlIdRequest = _f[1];
-    var _g = (0, react_1.useState)({}), conditions = _g[0], setConditions = _g[1];
-    var _h = (0, react_1.useState)([]), orderBy = _h[0], setOrderBy = _h[1];
-    var _j = (0, react_1.useMemo)(function () { return [
-        Object.keys(props.columns),
-        Object.keys(props.columns).filter(function (key) {
-            return (0, helpers_2.isColumnVisible)(props.columns[key]);
-        }),
-    ]; }, [props.columns]), columnsKeys = _j[0], visibleColumnsKeys = _j[1];
+    var _d = (0, react_1.useState)([]), rows = _d[0], setRows = _d[1];
+    var _e = (0, react_1.useState)(0), start = _e[0], setStart = _e[1];
+    var _f = (0, react_1.useState)(50), length = _f[0], setLength = _f[1];
+    var _g = (0, react_1.useState)(-1), count = _g[0], setCount = _g[1];
+    var _h = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _h[0], sqlIdRequest = _h[1], sqlPartialRequest = _h[2];
+    var _j = (0, react_1.useState)({}), conditions = _j[0], setConditions = _j[1];
+    var _k = (0, react_1.useState)(Object.entries((_b = props.initialSorts) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
+        var _b, _c, _d;
+        var columnKey = _a[0], direction = _a[1];
+        return ({
+            field: (_c = (_b = props.columns[columnKey].field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
+            type: (_d = props.columns[columnKey].type) !== null && _d !== void 0 ? _d : 'text',
+            direction: direction.toUpperCase(),
+        });
+    })), orderBy = _k[0], setOrderBy = _k[1];
+    var _l = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return [
+            __spreadArray(__spreadArray([], Object.keys(props.columns), true), ((_a = props.hiddenColumns) !== null && _a !== void 0 ? _a : []), true),
+            __spreadArray(__spreadArray([], Object.keys(props.columns).filter(function (key) {
+                return (0, helpers_2.isColumnVisible)(props.columns[key]);
+            }), true), ((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), true),
+        ];
+    }, [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'); });
+    }, [visibleColumnsKeys, props.columns]);
     var refresh = (0, react_1.useCallback)(function () {
         setRows([]);
         setStart(0);
         setLength(50);
-        setTotal(-1);
+        setCount(-1);
     }, []);
     var onFiltersChanged = (0, react_1.useCallback)(function (filters) {
         var newConditions = (0, helpers_1.convertSqlFiltersToConditions)(filters);
-        setTotal(-1);
+        setCount(-1);
         setConditions(newConditions);
     }, []);
     var onSortsChanged = (0, react_1.useCallback)(function (sorts) {
@@ -98,30 +113,34 @@ var SqlRequestDataGrid = function (_a) {
                 direction: direction.toUpperCase(),
             });
         });
-        console.log('newOrderBy=', newOrderBy);
         setOrderBy(newOrderBy);
     }, [refresh]);
-    var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getTotal) {
+    var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getCount) {
         if (conditions === void 0) { conditions = []; }
         if (orderBy === void 0) { orderBy = []; }
         if (start === void 0) { start = 0; }
         if (length === void 0) { length = 100; }
-        if (getTotal === void 0) { getTotal = false; }
+        if (getCount === void 0) { getCount = false; }
         sqlRequest({
             columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
-            returnColumns: returnColumns,
+            returnColumns: returnColumns.includes('Id')
+                ? returnColumns
+                : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
+            columnTypes: columnTypes.includes('Id')
+                ? columnTypes
+                : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
             conditions: conditions,
             orderBy: orderBy,
             start: start,
             length: length,
-            getTotal: getTotal,
+            getCount: getCount,
         }).then(function (response) {
             var _a;
             var _b;
-            if (getTotal) {
-                currentRows.current = Array(response.total).fill(null);
-                if (getTotal)
-                    setTotal((_b = response.total) !== null && _b !== void 0 ? _b : 0);
+            if (getCount) {
+                currentRows.current = Array(response.count).fill(null);
+                if (getCount)
+                    setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
             }
             var parsedRows = props.parser
                 ? response.data.map(props.parser)
@@ -129,20 +148,25 @@ var SqlRequestDataGrid = function (_a) {
             (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
             setRows(__spreadArray([], currentRows.current, true));
         });
-    }, 100));
+    }, 100, {
+        leading: true,
+        trailing: true,
+    }));
     var loadFilterValues = (0, react_1.useCallback)(function (columnKey) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return sqlRequest({
             columns: columnsKeys,
             returnColumns: [columnKey],
-            conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), Object.values(lodash_1.default.pickBy(conditions, function (condition, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
+            columnTypes: [(_a = props.columns[columnKey].type) !== null && _a !== void 0 ? _a : 'text'],
+            conditions: __spreadArray(__spreadArray([], ((_b = props.conditions) !== null && _b !== void 0 ? _b : []), true), Object.values(lodash_1.default.pickBy(conditions, function (_, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
             orderBy: [
                 {
-                    field: (_f = (_d = (_b = props.columns[columnKey].filterField) !== null && _b !== void 0 ? _b : (_c = props.columns[columnKey].field) === null || _c === void 0 ? void 0 : _c.fieldAlias) !== null && _d !== void 0 ? _d : (_e = props.columns[columnKey].field) === null || _e === void 0 ? void 0 : _e.fieldName) !== null && _f !== void 0 ? _f : columnKey,
+                    field: (_g = (_e = (_c = props.columns[columnKey].filterField) !== null && _c !== void 0 ? _c : (_d = props.columns[columnKey].field) === null || _d === void 0 ? void 0 : _d.fieldAlias) !== null && _e !== void 0 ? _e : (_f = props.columns[columnKey].field) === null || _f === void 0 ? void 0 : _f.fieldName) !== null && _g !== void 0 ? _g : columnKey,
+                    type: (_h = props.columns[columnKey].type) !== null && _h !== void 0 ? _h : 'text',
                     direction: 'ASC',
                 },
             ],
-            getTotal: false,
+            getCount: false,
             unique: true,
         }).then(function (response) {
             return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = props.columns[columnKey].filter) === null || _a === void 0 ? void 0 : _a.getter) === null || _b === void 0 ? void 0 : _b.call(_a, row)) !== null && _c !== void 0 ? _c : null; });
@@ -150,14 +174,14 @@ var SqlRequestDataGrid = function (_a) {
     }, [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]);
     (0, react_1.useEffect)(function () {
         var _a, _b;
-        return loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, total < 0);
+        return loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, count < 0);
     }, [
         props.columns,
         conditions,
         orderBy,
         start,
         length,
-        total,
+        count,
         props.conditions,
         columnsKeys,
         visibleColumnsKeys,
@@ -167,10 +191,11 @@ var SqlRequestDataGrid = function (_a) {
         return sqlRequest({
             columns: columnsKeys,
             returnColumns: visibleColumnsKeys,
+            columnTypes: columnTypes,
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
             orderBy: orderBy,
             start: 0,
-            length: total,
+            length: count,
         }).then(function (response) {
             return props.parser ? response.data.map(props.parser) : response.data;
         });
@@ -178,22 +203,27 @@ var SqlRequestDataGrid = function (_a) {
         sqlRequest,
         columnsKeys,
         visibleColumnsKeys,
+        columnTypes,
         props.conditions,
         props.parser,
         conditions,
         orderBy,
-        total,
+        count,
     ]);
     var loadAllIds = (0, react_1.useCallback)(function () {
         var _a, _b;
         return sqlIdRequest({
-            columns: ['Id'],
+            columns: columnsKeys.includes('Id')
+                ? columnsKeys
+                : __spreadArray(__spreadArray([], columnsKeys, true), ['Id'], false),
+            returnColumns: ['Id'],
+            columnTypes: ['text'],
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
             orderBy: orderBy,
             start: 0,
-            length: total,
+            length: count,
         }).then(function (response) { return response.data.map(function (row) { return row['Id']; }); });
-    }, [conditions, orderBy, props.conditions, sqlIdRequest, total]);
+    }, [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]);
     var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
         if (newStart !== start || newLength !== length) {
             setStart(newStart);
@@ -203,6 +233,64 @@ var SqlRequestDataGrid = function (_a) {
     var onSelectionChange = (0, react_1.useCallback)(function (selectedKeys) {
         onSelectionChangeFromProps === null || onSelectionChangeFromProps === void 0 ? void 0 : onSelectionChangeFromProps(selectedKeys);
     }, [onSelectionChangeFromProps]);
-    return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, __assign({ onVisibleRowsChange: onVisibleRowsChanged, filter: false, sort: false, onFiltersChanged: onFiltersChanged, onSortsChanged: onSortsChanged, filterValuesLoader: loadFilterValues, rows: rows, loadCopyRows: loadCopyRows, refresh: refresh, onSelectionChange: onSelectionChange, getAllIds: loadAllIds }, props)));
+    /** FOOTERS */
+    var _m = (0, react_1.useState)((_c = props.initialFooters) !== null && _c !== void 0 ? _c : {}), footers = _m[0], setFooters = _m[1];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var _o = (0, react_1.useState)({}), footerData = _o[0], setFooterData = _o[1];
+    var loadFooters = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (Object.keys(footers).length === 0) {
+            setFooterData({});
+        }
+        else {
+            sqlPartialRequest({
+                columns: columnsKeys.includes('Id')
+                    ? columnsKeys
+                    : __spreadArray(__spreadArray([], columnsKeys, true), ['Id'], false),
+                returnColumns: [],
+                columnTypes: [],
+                totalColumns: footers,
+                conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
+                orderBy: orderBy,
+            }).then(function (response) { var _a; return setFooterData((_a = response.totals) !== null && _a !== void 0 ? _a : {}); });
+        }
+    }, [
+        columnsKeys,
+        conditions,
+        footers,
+        orderBy,
+        props.conditions,
+        sqlPartialRequest,
+    ]);
+    (0, react_1.useEffect)(function () {
+        loadFooters();
+    }, [loadFooters]);
+    var footerFunctions = (0, react_1.useMemo)(function () {
+        return !footerData
+            ? {}
+            : Object.entries(footers).reduce(function (acc, _a) {
+                var _b, _c;
+                var columnKey = _a[0], footerKey = _a[1];
+                var column = props.columns[columnKey];
+                var footerFunc = typeof (column === null || column === void 0 ? void 0 : column.footer) === 'function'
+                    ? column.footer
+                    : (_b = column === null || column === void 0 ? void 0 : column.footer) === null || _b === void 0 ? void 0 : _b[footerKey];
+                var render = footerFunc
+                    ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        function (data) { return footerFunc([data], [], []); }
+                    : (_c = column === null || column === void 0 ? void 0 : column.render) !== null && _c !== void 0 ? _c : lodash_1.default.identity;
+                if (!column) {
+                    return acc;
+                }
+                acc[columnKey] = function () { return render(footerData, column); };
+                return acc;
+            }, {});
+    }, [footerData, footers, props.columns]);
+    var contextOverride = (0, react_1.useMemo)(function () { return ({
+        footers: footers,
+        setFooters: setFooters,
+        footerFunctions: footerFunctions,
+    }); }, [footers, setFooters, footerFunctions]);
+    return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, __assign({ onVisibleRowsChange: onVisibleRowsChanged, filter: false, sort: false, onFiltersChanged: onFiltersChanged, onSortsChanged: onSortsChanged, filterValuesLoader: loadFilterValues, rows: rows, loadCopyRows: loadCopyRows, refresh: refresh, onSelectionChange: onSelectionChange, getAllIds: loadAllIds, contextOverride: contextOverride }, props)));
 };
 exports.SqlRequestDataGrid = SqlRequestDataGrid;

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

@@ -13,6 +13,7 @@ export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
 export type SqlRequestDataGridColumns<R> = Record<string, SqlRequestDataGridColumn<R>>;
 export type SqlRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows' | 'columns'> & {
     columns: SqlRequestDataGridColumns<R>;
+    hiddenColumns?: string[];
     type: string;
     orderBy?: OrderByDTO[];
     conditions?: ConditionDTO[];

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

@@ -1,6 +1,8 @@
 export * from './DataGrid';
 export * from './DataGrid/helpers';
+export * from './DataGrid/styles';
 export * from './AdvancedRequestDataGrid';
 export * from './SqlRequestDataGrid';
 export * from './SqlRequestDataGrid/helpers';
+export * from './SqlRequestDataGrid/types';
 export * from './AdvancedRequestDataGrid/helpers';

package/dist/components/data/index.js

@@ -16,7 +16,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DataGrid"), exports);
 __exportStar(require("./DataGrid/helpers"), exports);
+__exportStar(require("./DataGrid/styles"), exports);
 __exportStar(require("./AdvancedRequestDataGrid"), exports);
 __exportStar(require("./SqlRequestDataGrid"), exports);
 __exportStar(require("./SqlRequestDataGrid/helpers"), exports);
+__exportStar(require("./SqlRequestDataGrid/types"), exports);
 __exportStar(require("./AdvancedRequestDataGrid/helpers"), exports);

package/dist/components/ui/ContextMenu/index.d.ts

@@ -0,0 +1,11 @@
+import { Divider, MenuItemContainer, SubMenu } from './styles';
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
+    Item: typeof MenuItemContainer;
+    ParentItem: typeof ParentMenuItem;
+    Divider: typeof Divider;
+    SubMenu: typeof SubMenu;
+};
+export declare const ContextMenu: ContextMenuFC;
+export declare const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,58 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParentMenuItem = exports.ContextMenu = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var react_1 = require("react");
+var ContextMenu = function (_a) {
+    var children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(styles_1.MenuContainer, { onClick: function (e) { return e.stopPropagation(); }, children: children }));
+};
+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 stopTimeout = (0, react_1.useCallback)(function () {
+        if (currentTimeout) {
+            clearTimeout(currentTimeout);
+        }
+        setCurrentTimeout(null);
+    }, [currentTimeout]);
+    var startTimeout = (0, react_1.useCallback)(function (open) {
+        stopTimeout();
+        setCurrentTimeout(window.setTimeout(function () {
+            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 })));
+};
+exports.ParentMenuItem = ParentMenuItem;
+exports.ContextMenu.Item = styles_1.MenuItemContainer;
+exports.ContextMenu.ParentItem = exports.ParentMenuItem;
+exports.ContextMenu.Divider = styles_1.Divider;
+exports.ContextMenu.SubMenu = styles_1.SubMenu;

package/dist/components/ui/ContextMenu/styles.d.ts

@@ -0,0 +1,18 @@
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+export declare const MenuContainer: 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 SubMenu: 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 MenuItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, {
+    $color?: ThemeColor;
+    disabled?: boolean;
+    $withArrow?: boolean;
+    $opened?: boolean;
+}>> & string;
+export declare const Divider: 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;