@addev-be/ui 0.16.10 → 0.17.0

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

@@ -19,69 +19,51 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridFooterRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRowButtonsContainer = exports.DataGridToolsRowHeaderContent = exports.DataGridToolsRow = exports.DataGridHeaderTitle = exports.DataGridCell = exports.dataGridCellCss = exports.DataGridHeaderTextContainer = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = exports.DataGridWrapper = 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 space_1 = require("../../../helpers/styled/space");
 var styled_components_1 = __importStar(require("styled-components"));
 var styles_1 = require("../VirtualScroller/styles");
-exports.DataGridWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n\n  ", "\n"])), space_1.space);
 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 _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __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);
+    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  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  font-weight: bold;\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 var(--space-3);\n  position: relative;\n  box-sizing: border-box;\n\n  z-index: ", ";\n\n  ", "\n\n  button {\n    display: ", ";\n  }\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n    button {\n      display: flex;\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: bold;\n  gap: var(--space-1);\n  height: 100%;\n  user-select: none;\n  line-height: 1.5rem;\n  padding: 0 var(--space-3);\n  position: relative;\n  box-sizing: border-box;\n\n  z-index: ", ";\n\n  ", "\n\n  button {\n    display: ", ";\n  }\n\n  &:hover {\n    ", " {\n      display: block;\n    }\n    button {\n      display: flex;\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) {
-    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
+    var $headerColor = _a.$headerColor;
     return $headerColor
-        ? (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-base-200);\n          color: var(--color-text-950);\n          &:hover {\n            background-color: var(--color-base-300);\n          }\n        "], ["\n          background-color: var(--color-base-200);\n          color: var(--color-text-950);\n          &:hover {\n            background-color: var(--color-base-300);\n          }\n        "])));
-}, function (_a) {
-    var $hasFilterOpened = _a.$hasFilterOpened;
-    return ($hasFilterOpened ? 'flex' : 'none');
+        ? (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.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_9 || (templateObject_9 = __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  ", "\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  ", "\n  background-color: ", ";\n  text-align: ", ";\n"])), function (_a) {
+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.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
-    return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    border-right: 1px solid var(--color-", "-200);\n    border-bottom: 1px solid var(--color-", "-200);\n    &:first-child {\n      border-left: 1px solid var(--color-", "-300);\n    }\n    &:last-child {\n      border-right: 1px solid var(--color-", "-300);\n    }\n  "], ["\n    border-right: 1px solid var(--color-", "-200);\n    border-bottom: 1px solid var(--color-", "-200);\n    &:first-child {\n      border-left: 1px solid var(--color-", "-300);\n    }\n    &:last-child {\n      border-right: 1px solid var(--color-", "-300);\n    }\n  "])), $headerColor, $headerColor, $headerColor, $headerColor);
-}, function (_a) {
-    var _b = _a.$color, $color = _b === void 0 ? 'base' : _b;
+    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_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.dataGridCellCss);
+exports.DataGridCell = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.dataGridCellCss);
 exports.DataGridCell.displayName = 'DataGridCell';
-exports.DataGridHeaderTitle = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  white-space: normal;\n  font-weight: bold;\n  color: var(--color-text-800);\n  height: auto;\n"], ["\n  white-space: normal;\n  font-weight: bold;\n  color: var(--color-text-800);\n  height: auto;\n"])));
-exports.DataGridToolsRow = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-2);\n  padding: var(--space-2);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  align-items: flex-end;\n"], ["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-2);\n  padding: var(--space-2);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  align-items: flex-end;\n"])));
-exports.DataGridToolsRowHeaderContent = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-exports.DataGridToolsRowButtonsContainer = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: flex;\n  gap: var(--space-1);\n  align-items: center;\n  padding: 0 var(--space-1);\n  position: sticky;\n  left: 0;\n"], ["\n  flex-shrink: 0;\n  display: 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_15 || (templateObject_15 = __makeTemplateObject(["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-base-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: 2;\n  }\n\n  scrollbar-color: var(--color-base-500) var(--color-base-100);\n  scrollbar-width: auto;\n"], ["\n  display: grid;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-base-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: 2;\n  }\n\n  scrollbar-color: var(--color-base-500) var(--color-base-100);\n  scrollbar-width: auto;\n"])), function (_a) {
+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($headerRowHeight, "px auto ").concat($withFooter ? constants_1.DEFAULT_FOOTER_ROW_HEIGHT + 'px' : '');
+    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");
@@ -101,7 +83,7 @@ exports.DataGridContainer = styled_components_1.default.div(templateObject_15 ||
         : "calc(".concat($fixedColumnWidths
             .slice(0, i)
             .map(function (w) { return (typeof w === 'number' ? "".concat(w, "px") : w); })
-            .join(' + '), ")"), ";\n      z-index: 1;\n    }"); });
+            .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
@@ -109,16 +91,16 @@ exports.DataGridContainer = styled_components_1.default.div(templateObject_15 ||
         : "calc(".concat($fixedColumnWidths
             .slice(0, i)
             .map(function (w) { return (typeof w === 'number' ? "".concat(w, "px") : w); })
-            .join(' + '), ")"), ";\n      background-color: var(--color-base-50);\n      z-index: 1;\n    }"); });
+            .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_18 || (templateObject_18 = __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 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 _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
+    var $headerColor = _a.$headerColor;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n          ", ":first-child {\n            border-left: 1px solid var(--color-", "-300);\n          }\n          ", ":last-child {\n            border-right: 1px solid var(--color-", "-300);\n          }\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-900);\n          ", ":first-child {\n            border-left: 1px solid var(--color-", "-300);\n          }\n          ", ":last-child {\n            border-right: 1px solid var(--color-", "-300);\n          }\n        "])), $headerColor, $headerColor, exports.DataGridHeaderCellContainer, $headerColor, exports.DataGridHeaderCellContainer, $headerColor) : (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n          background-color: var(--color-base-200);\n          color: var(--color-text-800);\n          ", ":first-child {\n            border-left: 1px solid var(--color-base-300);\n          }\n          ", ":last-child {\n            border-right: 1px solid var(--color-base-300);\n          }\n        "], ["\n          background-color: var(--color-base-200);\n          color: var(--color-text-800);\n          ", ":first-child {\n            border-left: 1px solid var(--color-base-300);\n          }\n          ", ":last-child {\n            border-right: 1px solid var(--color-base-300);\n          }\n        "])), exports.DataGridHeaderCellContainer, exports.DataGridHeaderCellContainer);
+        ? (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;
@@ -127,10 +109,7 @@ exports.DataGridHeaderRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n  top: 0;\n  border-top: 1px solid\n    var(--color-", "-300);\n"], ["\n  ", "\n  top: 0;\n  border-top: 1px solid\n    var(--color-", "-300);\n"])), dataGridHeaderOrFooterRowCss, function (_a) {
-    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
-    return $headerColor;
-});
+})(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;
@@ -139,28 +118,22 @@ exports.DataGridFooterRow = styled_components_1.default.div.attrs(function (_a)
             gridTemplateColumns: $gridTemplateColumns,
         },
     });
-})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n  border-top: 1px solid var(--color-", "-300);\n  border-bottom: 1px solid\n    var(--color-", "-300);\n  bottom: 0;\n"], ["\n  ", "\n  border-top: 1px solid var(--color-", "-300);\n  border-bottom: 1px solid\n    var(--color-", "-300);\n  bottom: 0;\n"])), dataGridHeaderOrFooterRowCss, function (_a) {
-    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
-    return $headerColor;
-}, function (_a) {
-    var _b = _a.$headerColor, $headerColor = _b === void 0 ? 'base' : _b;
-    return $headerColor;
-});
+})(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_22 || (templateObject_22 = __makeTemplateObject(["\n  display: contents;\n\n  /* &:last-child > ", " {\n    border-bottom: none;\n  } */\n\n  &:hover > ", " {\n    background-color: var(--color-blue-100);\n  }\n\n  ", "\n"], ["\n  display: contents;\n\n  /* &:last-child > ", " {\n    border-bottom: none;\n  } */\n\n  &:hover > ", " {\n    background-color: var(--color-blue-100);\n  }\n\n  ", "\n"])), exports.DataGridCell, exports.DataGridCell, function (_a) {
+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_21 || (templateObject_21 = __makeTemplateObject(["\n      & > ", ", & > ", " {\n        background-color: var(--color-warning-100);\n        color: var(--color-warning-900);\n      }\n      &:hover > ", ", &:hover > ", " {\n        background-color: var(--color-blue-100);\n      }\n    "], ["\n      & > ", ", & > ", " {\n        background-color: var(--color-warning-100);\n        color: var(--color-warning-900);\n      }\n      &:hover > ", ", &:hover > ", " {\n        background-color: var(--color-blue-100);\n      }\n    "])), exports.DataGridCell, exports.SelectionCell, exports.DataGridCell, exports.SelectionCell);
+    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_23 || (templateObject_23 = __makeTemplateObject(["\n  padding: var(--space-2);\n  box-sizing: border-box;\n\n  &.animate-pulse > div {\n    background-color: var(--color-base-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-base-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_24 || (templateObject_24 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  cursor: pointer;\n  width: ", ";\n\n  & > input[type='checkbox'] {\n    margin: 0;\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-base-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  cursor: pointer;\n  width: ", ";\n\n  & > input[type='checkbox'] {\n    margin: 0;\n    height: var(--space-4);\n    width: var(--space-4);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-base-300);\n    color: var(--color-primary-600);\n  }\n"])), constants_1.SELECTION_CELL_WIDTH);
-exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n  padding: 0 var(--space-1);\n"], ["\n  ", "\n  padding: 0 var(--space-1);\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_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n  padding: 0;\n"], ["\n  ", "\n  padding: 0;\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_27 || (templateObject_27 = __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"])));
+})(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, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;
+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,7 +1,6 @@
-import * as z from 'zod';
+import * as t from 'io-ts';
 import { CSSProperties, Context, Dispatch, FC, MouseEvent, MouseEventHandler, ReactNode, SetStateAction } from 'react';
 import { DataGridEditableCellFC } from './DataGridEditableCell/types';
-import { SpaceProps } from '../../../helpers/styled/space';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 export type DataGridCellFCProps = {
     onDoubleClick?: MouseEventHandler;
@@ -9,7 +8,6 @@ export type DataGridCellFCProps = {
     $color?: ThemeColor;
     $textAlign?: 'left' | 'right' | 'center';
     $userSelect?: boolean;
-    $headerColor?: ThemeColor;
 };
 export type DataGridCellFC = FC<DataGridCellFCProps>;
 export type DataGridFooterPredefinedFunction = 'average' | 'avg' | 'count' | 'max' | 'min' | 'sum';
@@ -24,20 +22,13 @@ type CommonGridColumnProps<R, T> = {
     component?: DataGridCellFC;
     color?: ThemeColor;
     excelOptions?: ExcelOptions;
-    typography?: {
-        bold?: boolean;
-        italic?: boolean;
-        underline?: boolean;
-        ellipsis?: boolean;
-        lineClamp?: number;
-    };
     textAlign?: 'left' | 'right' | 'center';
     filter?: DataGridFilter;
     footer?: DataGridFooterFunction<R> | Record<string, DataGridFooterFunction<R> | null>;
     name: ReactNode;
     order?: number;
     getter: (row: R) => T;
-    render?: (value: T, row: R, column: CommonGridColumnProps<R, T>) => ReactNode | string;
+    render?: (row: R, column: DataGridColumn<R>) => ReactNode | string;
     resizable?: boolean;
     sortGetter?: (row: R) => string | number;
     width?: number;
@@ -45,7 +36,7 @@ type CommonGridColumnProps<R, T> = {
 export type EditableDataGridColumn<R, T> = CommonGridColumnProps<R, T> & {
     editable?: boolean;
     editComponent?: DataGridEditableCellFC<R, T>;
-    itemToPartialRow?: (key: string, row: R, value: T) => Partial<R>;
+    itemToPartialRow?: (row: R, value: T) => Partial<R>;
 };
 export type DataGridTextColumn<R> = EditableDataGridColumn<R, string> & {
     type: 'text';
@@ -54,8 +45,6 @@ export type DataGridNumberColumn<R> = EditableDataGridColumn<R, number> & {
     type: 'number';
     decimals?: number;
     currency?: string | ((row: R) => string);
-    prefix?: string;
-    suffix?: string;
 };
 export type DataGridDateColumn<R> = EditableDataGridColumn<R, string> & {
     type: 'date';
@@ -87,7 +76,7 @@ export type DataGridProps<R> = {
     rows: R[];
     setRows?: Dispatch<SetStateAction<R[]>>;
     columns: DataGridColumns<R>;
-    rowKey: string;
+    rowKey: keyof R | ((row: R) => string);
     selectable?: boolean;
     userSelect?: boolean;
     editable?: boolean;
@@ -118,8 +107,7 @@ export type DataGridProps<R> = {
     onRowEdited?: (row: R, columnKey: keyof R, value: any) => void;
     onSaveClicked?: (addedRows: DataGridEditedRows<R>, editedRows: DataGridEditedRows<R>) => Promise<string[]>;
     onAddClicked?: () => Promise<R>;
-    headerContent?: ReactNode;
-} & SpaceProps;
+};
 export type DataGridContextProps<R> = DataGridProps<R> & {
     setRows: Dispatch<SetStateAction<R[]>>;
     editingCell?: [number, number];
@@ -151,44 +139,45 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
     toggleSelection: (key: string) => void;
     addedRows: DataGridEditedRows<R>;
     updatedRows: DataGridEditedRows<R>;
-    editRow: (row: Partial<R>) => void;
-    addRow: (row: R) => void;
-    addRows: (rows: R[]) => void;
-    updateRow: (row: Partial<R>) => void;
+    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 dataGridSettingSchema: z.ZodObject<{
-    width: z.ZodOptional<z.ZodNumber>;
-    order: z.ZodOptional<z.ZodNumber>;
-}, z.core.$strip>;
-export declare const dataGridSettingsSchema: z.ZodRecord<z.ZodString, z.ZodObject<{
-    width: z.ZodOptional<z.ZodNumber>;
-    order: z.ZodOptional<z.ZodNumber>;
-}, z.core.$strip>>;
-export declare const dataGridSettingsByNameSchema: z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodObject<{
-    width: z.ZodOptional<z.ZodNumber>;
-    order: z.ZodOptional<z.ZodNumber>;
-}, z.core.$strip>>>;
-export type DataGridSetting = z.infer<typeof dataGridSettingSchema>;
-export type DataGridSettings = z.infer<typeof dataGridSettingsSchema>;
-export type DataGridSettingsByName = z.infer<typeof dataGridSettingsByNameSchema>;
+export declare const dataGridSettingCodec: t.PartialC<{
+    width: t.NumberC;
+    order: t.NumberC;
+}>;
+export declare const dataGridSettingsCodec: t.RecordC<t.StringC, t.PartialC<{
+    width: t.NumberC;
+    order: t.NumberC;
+}>>;
+export declare const dataGridSettingsByNameCodec: t.RecordC<t.StringC, t.RecordC<t.StringC, t.PartialC<{
+    width: t.NumberC;
+    order: t.NumberC;
+}>>>;
+export type DataGridSetting = t.TypeOf<typeof dataGridSettingCodec>;
+export type DataGridSettings = t.TypeOf<typeof dataGridSettingsCodec>;
+export type DataGridSettingsByName = t.TypeOf<typeof dataGridSettingsByNameCodec>;
 export type DataGridSettingsTuple = [string, DataGridSetting];
 export type DataGridSettingsArray = DataGridSettingsTuple[];
 export type DataGridColumnKeyValuePair<R> = [string, DataGridColumn<R>];
-export type DataGridCellProps<R, T> = {
+export type DataGridCellProps<R> = {
     row: R;
     rowIndex: number;
     columnKey: string;
     columnIndex: number;
-    column: CommonGridColumnProps<R, T> | EditableDataGridColumn<R, T>;
+    column: DataGridColumn<R>;
     context: DataGridContext<R>;
     className?: string;
     style?: CSSProperties;
     userSelect?: boolean;
     color?: ThemeColor;
 };
-export type EditableDataGridCellProps<R, T> = DataGridCellProps<R, T> & {};
+export type EditableDataGridCellProps<R, T> = DataGridCellProps<R> & {
+    column: EditableDataGridColumn<R, T>;
+};
 export type DataGridHeaderCellProps<R> = {
     columnKey: string;
     columnIndex: number;
@@ -241,10 +230,9 @@ export type DataGridRowTemplateProps<R> = {
     toggleSelection?: () => void;
     context: DataGridContext<R>;
 };
-export type DataGridRefProps<R> = {
+export type DataGridRefProps = {
     refresh: () => void;
     setSelectedKeys: (keys: string[]) => void;
-    addRows: (rows: R[]) => void;
 };
-export type DataGridEditedRows<R> = Partial<R>[];
+export type DataGridEditedRows<R> = Record<string, Partial<R>>;
 export {};

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

@@ -16,29 +16,19 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataGridSettingsByNameSchema = exports.dataGridSettingsSchema = exports.dataGridSettingSchema = void 0;
-var z = __importStar(require("zod"));
-exports.dataGridSettingSchema = z.object({
-    width: z.number().optional(),
-    order: z.number().optional(),
-});
-exports.dataGridSettingsSchema = z.record(z.string(), exports.dataGridSettingSchema);
-exports.dataGridSettingsByNameSchema = z.record(z.string(), exports.dataGridSettingsSchema);
+exports.dataGridSettingsByNameCodec = exports.dataGridSettingsCodec = exports.dataGridSettingCodec = void 0;
+var t = __importStar(require("io-ts"));
+exports.dataGridSettingCodec = t.partial({
+    width: t.number,
+    order: t.number,
+}, 'DataGridSetting');
+exports.dataGridSettingsCodec = t.record(t.string, exports.dataGridSettingCodec, 'DataGridSettings');
+exports.dataGridSettingsByNameCodec = t.record(t.string, exports.dataGridSettingsCodec, 'DataGridSettingsByName');

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

@@ -1,3 +1,2 @@
-import { ForwardedRef } from 'react';
 import { SqlRequestForeignListProps } from '../SqlRequestForeignList/types';
-export declare const SqlRequestForeignListEditableCell: <R extends Record<string, any>>(props: SqlRequestForeignListProps<R>, ref: ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const SqlRequestForeignListEditableCell: <R extends Record<string, any>>(props: SqlRequestForeignListProps<R> & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element | null;

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

@@ -13,6 +13,7 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SqlRequestForeignListEditableCell = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var SqlRequestForeignList_1 = require("../SqlRequestForeignList");
-var SqlRequestForeignListEditableCell = function (props, ref) { return (0, jsx_runtime_1.jsx)(SqlRequestForeignList_1.SqlRequestForeignList, __assign({}, props, { ref: ref })); };
-exports.SqlRequestForeignListEditableCell = SqlRequestForeignListEditableCell;
+var SqlRequestForeignListEditableCellInner = function (props, ref) { return (0, jsx_runtime_1.jsx)(SqlRequestForeignList_1.SqlRequestForeignList, __assign({}, props, { ref: ref })); };
+exports.SqlRequestForeignListEditableCell = (0, react_1.forwardRef)(SqlRequestForeignListEditableCellInner);

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

@@ -1,5 +1,5 @@
 import { SqlRequestDataGridCheckboxColumn, SqlRequestDataGridDateColumn, SqlRequestDataGridForeignListColumn, SqlRequestDataGridNumberColumn, SqlRequestDataGridTextColumn } from '../types';
-import { DeepPartial } from '../../../../types';
+import { DeepPartial } from '../../../../typings';
 import { SqlRequestForeignListItemFC } from '../../SqlRequestForeignList/types';
 export declare const sqlTextColumn: <R extends Record<string, any>>(key: string, title: React.ReactNode, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>) => SqlRequestDataGridTextColumn<R>;
 export declare const sqlMailColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>) => SqlRequestDataGridTextColumn<R>;