@addev-be/ui 0.15.1 → 0.16.0

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

@@ -27,19 +27,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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.DEFAULT_ROW_HEIGHT = exports.DEFAULT_FOOTER_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = void 0;
+exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridFooterRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRowButtonsContainer = exports.DataGridToolsRow = exports.DataGridHeaderTitle = exports.DataGridCell = exports.dataGridCellCss = exports.DataGridHeaderTextContainer = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = void 0;
+var constants_1 = require("./constants");
 var styled_components_1 = __importStar(require("styled-components"));
 var styles_1 = require("../VirtualScroller/styles");
-exports.TOOLBAR_HEIGHT = 40;
-exports.DEFAULT_HEADER_ROW_HEIGHT = 40;
-exports.DEFAULT_FOOTER_ROW_HEIGHT = 40;
-exports.DEFAULT_ROW_HEIGHT = 32;
 exports.DataGridResizeGrip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: var(--space-1);\n  height: 100%;\n\n  ", "\n\n  cursor: col-resize;\n  display: none;\n"])), function (_a) {
     var $headerColor = _a.$headerColor;
     return $headerColor
         ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "], ["\n          background-color: var(--color-", "-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-", "-500);\n          }\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-neutral-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-neutral-500);\n          }\n        "], ["\n          background-color: var(--color-neutral-400);\n          &:hover,\n          &.active {\n            background-color: var(--color-neutral-500);\n          }\n        "])));
 });
-exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--space-1);\n  padding: 0 0.75rem;\n  height: 100%;\n  font-weight: var(--font-bold);\n  line-height: 1.5rem;\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--space-1);\n  padding: 0 0.75rem;\n  height: 100%;\n  font-weight: var(--font-bold);\n  line-height: 1.5rem;\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"])), function (_a) {
+exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: var(--font-bold);\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 0.75rem;\n  position: relative;\n\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: var(--font-bold);\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 0.75rem;\n  position: relative;\n\n  z-index: ", ";\n\n  ", "\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n  }\n\n  & > span {\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    flex: 1;\n    font-weight: bold;\n  }\n"])), function (_a) {
     var $isResizing = _a.$isResizing;
     return ($isResizing ? 1 : 0);
 }, function (_a) {
@@ -48,34 +45,62 @@ exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateOb
         ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "], ["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-950);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n\n          & > button {\n            background-color: var(--color-", "-400);\n            border-color: var(--color-", "-500);\n            &:hover {\n              background-color: var(--color-", "-500);\n              border-color: var(--color-", "-600);\n            }\n          }\n          & > button.danger {\n            background-color: var(--color-red-400);\n            border-color: var(--color-red-500);\n            &:hover {\n              background-color: var(--color-red-500);\n              border-color: var(--color-red-600);\n            }\n          }\n        "])), $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-950);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-950);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "])));
 }, exports.DataGridResizeGrip);
 exports.DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
-exports.DataGridCell = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n"], ["\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n"])));
+exports.DataGridHeaderTextContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  line-height: 1rem;\n  align-items: center;\n  font-size: var(--text-md);\n  max-height: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  line-height: 1rem;\n  align-items: center;\n  font-size: var(--text-md);\n  max-height: 100%;\n"])));
+exports.dataGridCellCss = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: ", ";\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n  background-color: ", ";\n  text-align: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--space-3);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: ", ";\n  white-space: nowrap;\n  border-right: 1px solid var(--color-neutral-200);\n  border-bottom: 1px solid var(--color-neutral-200);\n  background-color: ", ";\n  text-align: ", ";\n"])), function (_a) {
+    var $userSelect = _a.$userSelect;
+    return ($userSelect ? 'text' : 'none');
+}, function (_a) {
+    var _b = _a.$color, $color = _b === void 0 ? 'neutral' : _b;
+    return "var(--color-".concat($color, "-50)");
+}, function (_a) {
+    var _b = _a.$textAlign, $textAlign = _b === void 0 ? 'left' : _b;
+    return $textAlign;
+});
+exports.DataGridCell = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.dataGridCellCss);
 exports.DataGridCell.displayName = 'DataGridCell';
-exports.DataGridToolsRow = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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    box-sizing: border-box;\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    box-sizing: border-box;\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, _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;
+exports.DataGridHeaderTitle = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  white-space: normal;\n  font-weight: var(--font-bold);\n  color: var(--color-neutral-900);\n  height: auto;\n"], ["\n  white-space: normal;\n  font-weight: var(--font-bold);\n  color: var(--color-neutral-900);\n  height: auto;\n"])));
+exports.DataGridToolsRow = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n"], ["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n"])));
+exports.DataGridToolsRowButtonsContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: inline-flex;\n  gap: var(--space-1);\n  align-items: center;\n  padding: 0 var(--space-1);\n  position: sticky;\n  left: 0;\n"], ["\n  display: inline-flex;\n  gap: var(--space-1);\n  align-items: center;\n  padding: 0 var(--space-1);\n  position: sticky;\n  left: 0;\n"])));
+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    box-sizing: border-box;\n  }\n\n  ", "\n\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    box-sizing: border-box;\n  }\n\n  ", "\n\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 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b, _c = _a.$withFooter, $withFooter = _c === void 0 ? false : _c;
+    return "".concat(constants_1.TOOLBAR_HEIGHT, "px ").concat($headerRowHeight, "px auto ").concat($withFooter ? constants_1.DEFAULT_FOOTER_ROW_HEIGHT + 'px' : '');
+}, exports.DataGridToolsRow, constants_1.TOOLBAR_HEIGHT, exports.DataGridHeaderCellContainer, function (_a) {
+    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
 }, function (_a) {
-    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
+    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
 }, exports.DataGridCell, function (_a) {
-    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
+    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
 }, function (_a) {
-    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
+    var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
-}, styles_1.VirtualScrollerContainer);
+}, function (_a) {
+    var _b = _a.$fixedColumnWidths, $fixedColumnWidths = _b === void 0 ? [] : _b;
+    return $fixedColumnWidths.map(function (width, i) { return "\n    ".concat(exports.DataGridHeaderCellContainer, ":nth-child(").concat(i + 1, ") {\n      position: sticky;\n      left: ").concat(i === 0
+        ? '0'
+        : "calc(".concat($fixedColumnWidths
+            .slice(0, i)
+            .map(function (w) { return (typeof w === 'number' ? "".concat(w, "px") : w); })
+            .join(' + '), ")"), ";\n      background-color: var(--color-neutral-200);\n      z-index: 1;\n    }"); });
+}, function (_a) {
+    var _b = _a.$fixedColumnWidths, $fixedColumnWidths = _b === void 0 ? [] : _b;
+    return $fixedColumnWidths.map(function (width, i) { return "\n    ".concat(exports.DataGridCell, ":nth-child(").concat(i + 1, ") {\n      position: sticky;\n      left: ").concat(i === 0
+        ? '0'
+        : "calc(".concat($fixedColumnWidths
+            .slice(0, i)
+            .map(function (w) { return (typeof w === 'number' ? "".concat(w, "px") : w); })
+            .join(' + '), ")"), ";\n      background-color: var(--color-neutral-50);\n      z-index: 1;\n    }"); });
+}, styles_1.VirtualScrollerFiller);
 exports.DataGridContainer.displayName = 'DataGridContainer';
-var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
-    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? exports.DEFAULT_HEADER_ROW_HEIGHT : _b;
+var dataGridHeaderOrFooterRowCss = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  z-index: 10;\n  position: sticky;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
+    var _b = _a.$headerRowHeight, $headerRowHeight = _b === void 0 ? constants_1.DEFAULT_HEADER_ROW_HEIGHT : _b;
     return "".concat($headerRowHeight, "px");
 }, function (_a) {
     var $headerColor = _a.$headerColor;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "])));
+        ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n        "])), $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n        "])));
 });
 exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
@@ -84,7 +109,7 @@ exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  top: ", "px;\n"], ["\n  ", "\n  top: ", "px;\n"])), dataGridHeaderOrFooterRowCss, exports.TOOLBAR_HEIGHT);
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n  top: ", "px;\n"], ["\n  ", "\n  top: ", "px;\n"])), dataGridHeaderOrFooterRowCss, constants_1.TOOLBAR_HEIGHT);
 exports.DataGridHeaderRow.displayName = 'DataGridHeaderRow';
 exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a) {
     var $gridTemplateColumns = _a.$gridTemplateColumns;
@@ -93,19 +118,22 @@ exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  bottom: 0;\n"], ["\n  ", "\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss);
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n  bottom: 0;\n"], ["\n  ", "\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss);
 exports.DataGridFooterRow.displayName = 'DataGridFooterRow';
-exports.DataGridRow = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+exports.DataGridRow = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: contents;\n\n  ", "\n"], ["\n  display: contents;\n\n  ", "\n"])), function (_a) {
+    var $edited = _a.$edited;
+    return $edited && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      & > ", ", & > ", " {\n        background-color: var(--color-warning-100);\n        color: var(--color-warning-900);\n      }\n    "], ["\n      & > ", ", & > ", " {\n        background-color: var(--color-warning-100);\n        color: var(--color-warning-900);\n      }\n    "])), exports.DataGridCell, exports.SelectionCell);
+});
 exports.DataGridRow.displayName = 'DataGridRow';
-exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"])));
+exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-neutral-200);\n    border-radius: var(--rounded-full);\n    width: 100%;\n    height: 100%;\n  }\n"])));
 exports.LoadingCell.displayName = 'LoadingCell';
-var selectionCellStyle = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"])));
-exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
+var selectionCellStyle = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: ", ";\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\n  cursor: pointer;\n\n  & > input[type='checkbox'] {\n    height: var(--space-4);\n    width: ", ";\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-primary-600);\n  }\n"])), constants_1.SELECTION_CELL_WIDTH);
+exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
 exports.SelectionCell.displayName = 'SelectionCell';
-exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
+exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n  padding: 0;\n"], ["\n  ", "\n  padding: 0;\n"])), selectionCellStyle);
 exports.HeaderSelectionCell.displayName = 'HeaderSelectionCell';
 exports.ResizeBackdrop = styled_components_1.default.div.attrs({
     className: 'ResizeBackdrop',
-})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n"])));
+})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n  z-index: 100;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0);\n  cursor: col-resize;\n  z-index: 100;\n"])));
 exports.ResizeBackdrop.displayName = 'ResizeBackdrop';
-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;
+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;

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

@@ -1,41 +1,84 @@
 import * as t from 'io-ts';
 import { CSSProperties, Context, Dispatch, FC, MouseEvent, MouseEventHandler, ReactNode, SetStateAction } from 'react';
-import { SettingsContextProps } from '../../../providers/SettingsProvider';
+import { DataGridEditableCellFC } from './DataGridEditableCell/types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-export type DataGridCellFC = FC<{
+export type DataGridCellFCProps = {
     onDoubleClick?: MouseEventHandler;
     style?: CSSProperties;
-}>;
+    $color?: ThemeColor;
+    $textAlign?: 'left' | 'right' | 'center';
+    $userSelect?: boolean;
+};
+export type DataGridCellFC = FC<DataGridCellFCProps>;
 export type DataGridFooterPredefinedFunction = 'average' | 'avg' | 'count' | 'max' | 'min' | 'sum';
 export type DataGridFooterFunction<R> = (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
-export type DataGridColumn<R> = {
+type ExcelOptions = {
+    formatter?: (value: any) => string;
+    colorGetter?: (value: any) => string;
+    valueGetter?: (value: any) => string;
+};
+type CommonGridColumnProps<R, T> = {
+    key: string;
     component?: DataGridCellFC;
-    editable?: boolean;
-    excelFormatter?: (value: any) => string;
-    excelBackgroundColor?: (value: any) => string;
-    excelValue?: (value: any) => string;
+    color?: ThemeColor;
+    excelOptions?: ExcelOptions;
+    textAlign?: 'left' | 'right' | 'center';
     filter?: DataGridFilter;
     footer?: DataGridFooterFunction<R> | Record<string, DataGridFooterFunction<R> | null>;
-    getter?: (row: R) => string | number;
-    name: string;
+    name: ReactNode;
     order?: number;
-    propertyName?: keyof R;
+    getter: (row: R) => T;
     render?: (row: R, column: DataGridColumn<R>) => ReactNode | string;
     resizable?: boolean;
     sortGetter?: (row: R) => string | number;
-    type?: 'text' | 'number' | 'date';
     width?: number;
-    settingsContext?: Context<SettingsContextProps>;
 };
-export type DataGridColumns<R> = Record<string, DataGridColumn<R>>;
+export type EditableDataGridColumn<R, T> = CommonGridColumnProps<R, T> & {
+    editable?: boolean;
+    editComponent?: DataGridEditableCellFC<R, T>;
+    itemToPartialRow?: (row: R, value: T) => Partial<R>;
+};
+export type DataGridTextColumn<R> = EditableDataGridColumn<R, string> & {
+    type: 'text';
+};
+export type DataGridNumberColumn<R> = EditableDataGridColumn<R, number> & {
+    type: 'number';
+    decimals?: number;
+    currency?: string | ((row: R) => string);
+};
+export type DataGridDateColumn<R> = EditableDataGridColumn<R, string> & {
+    type: 'date';
+};
+export type DataGridCheckboxColumn<R> = EditableDataGridColumn<R, boolean> & {
+    type: 'checkbox';
+};
+export type DataGridSelectColumn<R, T = any> = EditableDataGridColumn<R, T | null> & {
+    type: 'select';
+    items: T[];
+    itemKey: (item: T) => string;
+    itemLabel: (item: T) => string;
+};
+export type DataGridForeignListColumn<R> = EditableDataGridColumn<R, string | null> & {
+    type: 'foreignList';
+};
+export type DataGridColorColumn<R> = EditableDataGridColumn<R, string> & {
+    type: 'color';
+};
+export type DataGridColumn<R> = DataGridTextColumn<R> | DataGridNumberColumn<R> | DataGridDateColumn<R> | DataGridCheckboxColumn<R> | DataGridSelectColumn<R> | DataGridForeignListColumn<R> | DataGridColorColumn<R>;
+export type DataGridColumnWithFilter<R> = DataGridColumn<R> & {
+    filter: DataGridFilter;
+};
+export type DataGridColumns<R> = DataGridColumn<R>[];
 export type DataGridFilters = Record<string, DataGridFilter<DataGridFilterType>>;
 export type DataGridProps<R> = {
     name?: string;
     className?: string;
     rows: R[];
+    setRows?: Dispatch<SetStateAction<R[]>>;
     columns: DataGridColumns<R>;
     rowKey: keyof R | ((row: R) => string);
     selectable?: boolean;
+    userSelect?: boolean;
     editable?: boolean;
     onRowDoubleClick?: (row: R, e: MouseEvent) => void;
     onSelectionChange?: (keys: string[]) => void;
@@ -60,8 +103,13 @@ export type DataGridProps<R> = {
     loadCopyRows?: () => Promise<R[]>;
     refresh?: () => void;
     headerColor?: ThemeColor;
+    fixedColumnsCount?: number;
+    onRowEdited?: (row: R, columnKey: keyof R, value: any) => void;
+    onSaveClicked?: (addedRows: DataGridEditedRows<R>, editedRows: DataGridEditedRows<R>) => Promise<string[]>;
+    onAddClicked?: () => Promise<R>;
 };
 export type DataGridContextProps<R> = DataGridProps<R> & {
+    setRows: Dispatch<SetStateAction<R[]>>;
     editingCell?: [number, number];
     setEditingCell: Dispatch<SetStateAction<[number, number]>>;
     sortedRows: R[];
@@ -75,7 +123,7 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
     footers?: Record<string, string>;
     setFooters: Dispatch<SetStateAction<Record<string, string>>>;
     footerFunctions?: Record<string, DataGridFooterFunction<R>>;
-    visibleColumns: DataGridColumnKeyValuePair<R>[];
+    visibleColumns: DataGridColumns<R>;
     copyTable: (includeHeaders?: boolean, includeFooters?: boolean) => Promise<void>;
     setColumnWidth: (key: string, width: number) => void;
     saveSettings: (newSettings?: DataGridSettings) => void;
@@ -84,7 +132,17 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
     length: number;
     rowKeyGetter: (row: R) => string;
     gridTemplateColumns: string;
+    resizingColumnKey: string | null;
+    startResizing: (e: MouseEvent, columnKey: string) => void;
+    moveResizing: (e: MouseEvent) => void;
+    endResizing: () => void;
     toggleSelection: (key: string) => void;
+    addedRows: DataGridEditedRows<R>;
+    updatedRows: DataGridEditedRows<R>;
+    editRow: (key: string, row: Partial<R>) => void;
+    addRow: (key: string, row: R) => void;
+    updateRow: (key: string, row: Partial<R>) => void;
+    clearChangedRows: (keys?: string[]) => void;
 };
 export type DataGridContext<R> = Context<DataGridContextProps<R>>;
 export declare const dataGridSettingCodec: t.PartialC<{
@@ -114,6 +172,11 @@ export type DataGridCellProps<R> = {
     context: DataGridContext<R>;
     className?: string;
     style?: CSSProperties;
+    userSelect?: boolean;
+    color?: ThemeColor;
+};
+export type EditableDataGridCellProps<R, T> = DataGridCellProps<R> & {
+    column: EditableDataGridColumn<R, T>;
 };
 export type DataGridHeaderCellProps<R> = {
     columnKey: string;
@@ -122,6 +185,7 @@ export type DataGridHeaderCellProps<R> = {
     context: DataGridContext<R>;
     onFilterButtonClicked?: (columnKey: string) => void;
     isFilterOpen?: boolean;
+    color?: ThemeColor;
 };
 export type DataGridSort = 'asc' | 'desc';
 export type DataGridFilterPredicate<T> = (valueToVerify: T) => boolean;
@@ -170,3 +234,5 @@ export type DataGridRefProps = {
     refresh: () => void;
     setSelectedKeys: (keys: string[]) => void;
 };
+export type DataGridEditedRows<R> = Record<string, Partial<R>>;
+export {};

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

@@ -0,0 +1,20 @@
+import { ColumnDTO, ConditionDTO } from '../../../../services/smartQueries';
+import { SmartQueryDataGridColumn, SmartQueryDataGridColumns } from '../types';
+export declare const smartTextColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+/**
+ * Creates a column with a composed value from multiple fields,
+ * and filtered by a text filter on the first field
+ */
+export declare const smartComposedColumn: <R extends Record<string, any>>(key: string, title: string, fields: string[], options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartMailColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartPhoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartDateColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartDateTimeColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartMonthColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartNumberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartMoneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartPercentageColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartCheckboxColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const smartColorColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<SmartQueryDataGridColumn<R>>) => SmartQueryDataGridColumns<R>;
+export declare const getColumnsConditions: (columns: ColumnDTO[]) => ConditionDTO[];
+export declare const getFooterColumn: (column: ColumnDTO) => ColumnDTO;

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

@@ -0,0 +1,160 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFooterColumn = exports.getColumnsConditions = exports.smartColorColumn = exports.smartCheckboxColumn = exports.smartPercentageColumn = exports.smartMoneyColumn = exports.smartNumberColumn = exports.smartMonthColumn = exports.smartDateTimeColumn = exports.smartDateColumn = exports.smartPhoneColumn = exports.smartMailColumn = exports.smartComposedColumn = exports.smartTextColumn = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var helpers_1 = require("../../DataGrid/helpers");
+var dates_1 = require("../../../../helpers/dates");
+var numbers_1 = require("../../../../helpers/numbers");
+var smartTextColumn = function (key, title, options) {
+    var _a;
+    return (_a = {},
+        _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.smartTextColumn = smartTextColumn;
+/**
+ * Creates a column with a composed value from multiple fields,
+ * and filtered by a text filter on the first field
+ */
+var smartComposedColumn = function (key, title, fields, options) {
+    var _a;
+    return (_a = {},
+        _a[key] = __assign({ field: {
+                fieldAlias: key,
+                operator: 'jsonObject',
+                operands: fields.flatMap(function (field) { return [
+                    { 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], footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a);
+};
+exports.smartComposedColumn = smartComposedColumn;
+var smartMailColumn = 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 : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a);
+};
+exports.smartMailColumn = smartMailColumn;
+var smartPhoneColumn = 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 : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a);
+};
+exports.smartPhoneColumn = smartPhoneColumn;
+var smartDateColumn = function (key, title, options) {
+    var _a;
+    return (_a = {},
+        _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 : ''; }, excelFormatter: function () { return 'dd/mm/yyyy'; }, excelValue: function (value) { return (0, dates_1.formatDate)(value, 'YYYY-MM-DD'); }, filter: __assign(__assign({}, (0, helpers_1.dateFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, formatter: function (value) { return (0, dates_1.formatDate)(value); }, renderer: function (value) { return (0, dates_1.formatDate)(value); } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a);
+};
+exports.smartDateColumn = smartDateColumn;
+var smartDateTimeColumn = function (key, title, options) {
+    var _a;
+    return (_a = {},
+        _a[key] = __assign({ name: title, type: 'date', render: function (row) { return (0, dates_1.formatDateTime)(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 : ''; }, excelFormatter: function () { return 'dd/mm/yyyy hh:mm:ss'; }, excelValue: function (value) { return (0, dates_1.formatDateTime)(value, 'YYYY-MM-DD HH:mm:ss'); }, filter: __assign(__assign({}, (0, helpers_1.dateFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, formatter: function (value) { return (0, dates_1.formatDateTime)(value); }, renderer: function (value) { return (0, dates_1.formatDateTime)(value); } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a);
+};
+exports.smartDateTimeColumn = smartDateTimeColumn;
+var smartMonthColumn = 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 : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a);
+};
+exports.smartMonthColumn = smartMonthColumn;
+var smartNumberColumn = function (key, title, decimals, options) {
+    var _a;
+    if (decimals === void 0) { decimals = 2; }
+    return (_a = {},
+        _a[key] = __assign({ name: title, type: 'number', render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return (0, helpers_1.buildExcelFormat)(decimals); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, 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 : 0; }, 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.smartNumberColumn = smartNumberColumn;
+var smartMoneyColumn = function (key, title, decimals, options) {
+    var _a;
+    if (decimals === void 0) { decimals = 2; }
+    return (_a = {},
+        _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, helpers_1.buildExcelFormat)(decimals, ' €'); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, 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 : 0; }, 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.smartMoneyColumn = smartMoneyColumn;
+var smartPercentageColumn = function (key, title, decimals, options) {
+    var _a;
+    if (decimals === void 0) { decimals = 2; }
+    return (_a = {},
+        _a[key] = __assign({ name: title, type: 'number', render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return (0, helpers_1.buildExcelFormat)(decimals, '%'); }, excelValue: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); }, 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 : 0; }, 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.smartPercentageColumn = smartPercentageColumn;
+var smartCheckboxColumn = function (key, title, options) {
+    var _a;
+    return (_a = {},
+        _a[key] = __assign({ name: title, render: function (row) {
+                var _a;
+                var value = !!+((_a = row[key]) !== null && _a !== void 0 ? _a : 0);
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value ? ' 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.smartCheckboxColumn = smartCheckboxColumn;
+var smartColorColumn = function (key, title, options) {
+    var _a;
+    return (_a = {},
+        _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" })); }, excelValue: function () { return ''; }, excelBackgroundColor: function (value) { return value; }, 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.smartColorColumn = smartColorColumn;
+var getColumnsConditions = function (columns) {
+    return columns
+        .filter(function (column) { return !!column.having; })
+        .map(function (column) {
+        var _a, _b, _c;
+        return ({
+            field: column.field,
+            operator: (_b = (_a = column.having) === null || _a === void 0 ? void 0 : _a.operator) !== null && _b !== void 0 ? _b : 'equals',
+            value: (_c = column.having) === null || _c === void 0 ? void 0 : _c.value,
+        });
+    });
+};
+exports.getColumnsConditions = getColumnsConditions;
+var getFooterColumn = function (column) {
+    var _a;
+    return !column.footer
+        ? column
+        : __assign(__assign({}, column), { field: {
+                operator: column.footer,
+                operands: [{ fieldName: column.field.fieldName }],
+                fieldAlias: (_a = column.field.fieldAlias) !== null && _a !== void 0 ? _a : column.field.fieldName,
+            }, groupBy: true });
+};
+exports.getFooterColumn = getFooterColumn;

package/dist/components/data/SmartQueryDataGrid/helpers/hooks.d.ts

@@ -0,0 +1,5 @@
+import { ColumnDTO, ConditionDTO } from '../../../../services/smartQueries';
+import { SmartQueryDataGridColumns } from '../types';
+import { SmartQueries } from '../../../../services';
+export declare const useSmartColumnDTOs: <R>(columns: SmartQueryDataGridColumns<R>, conditions?: Record<string, ConditionDTO>, footers?: Record<string, SmartQueries.FooterFunction>, sorts?: Record<string, SmartQueries.OrderByDirection>) => ColumnDTO[];
+export declare const useIdSmartColumnDTO: (smartColumns: SmartQueries.ColumnDTO[]) => ColumnDTO;

package/dist/components/data/SmartQueryDataGrid/helpers/hooks.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIdSmartColumnDTO = exports.useSmartColumnDTOs = void 0;
+var react_1 = require("react");
+var useSmartColumnDTOs = function (columns, conditions, footers, sorts) {
+    if (conditions === void 0) { conditions = {}; }
+    if (footers === void 0) { footers = {}; }
+    if (sorts === void 0) { sorts = {}; }
+    return (0, react_1.useMemo)(function () {
+        return Object.entries(columns).map(function (_a) {
+            var _b, _c, _d, _e, _f, _g;
+            var key = _a[0], col = _a[1];
+            return ({
+                key: key,
+                field: {
+                    fieldName: (_c = (_b = col.field) === null || _b === void 0 ? void 0 : _b.fieldName) !== null && _c !== void 0 ? _c : key,
+                    fieldAlias: (_e = (_d = col.field) === null || _d === void 0 ? void 0 : _d.fieldAlias) !== null && _e !== void 0 ? _e : key,
+                    groupBy: (_g = (_f = col.field) === null || _f === void 0 ? void 0 : _f.groupBy) !== null && _g !== void 0 ? _g : false,
+                },
+                having: conditions[key],
+                footer: footers[key],
+                orderBy: sorts[key],
+            });
+        });
+    }, [columns, conditions, footers, sorts]);
+};
+exports.useSmartColumnDTOs = useSmartColumnDTOs;
+var useIdSmartColumnDTO = function (smartColumns) {
+    return (0, react_1.useMemo)(function () {
+        var _a;
+        return (_a = smartColumns.find(function (col) { return col.field.fieldName === 'id'; })) !== null && _a !== void 0 ? _a : {
+            key: 'id',
+            field: {
+                fieldName: 'id',
+                fieldAlias: 'id',
+                groupBy: false,
+            },
+        };
+    }, [smartColumns]);
+};
+exports.useIdSmartColumnDTO = useIdSmartColumnDTO;

package/{src/components/data/SmartQueryDataGrid/helpers/index.ts → dist/components/data/SmartQueryDataGrid/helpers/index.d.ts}

@@ -1,2 +1,2 @@
-export * from './smartQueries';
-export * from './columns';
+export * from './smartQueries';
+export * from './columns';

package/dist/components/data/SmartQueryDataGrid/helpers/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./smartQueries"), exports);
+__exportStar(require("./columns"), exports);

package/dist/components/data/SmartQueryDataGrid/helpers/smartQueries.d.ts

@@ -0,0 +1,3 @@
+import { ConditionDTO } from '../../../../services/smartQueries';
+import { SmartQueryDataGridFilters } from '../types';
+export declare const convertSmartFiltersToConditions: (filters: SmartQueryDataGridFilters) => Record<string, ConditionDTO>;