@addev-be/ui 0.2.5 → 0.2.6

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -62,17 +73,17 @@ var DataGrid = function (props) {
     }, [rowKeyGetter, selectedKeys, setSelectedKeys]);
     var rowTemplate = (0, react_1.useCallback)(function (row, rowIndex) {
         var _a, _b;
-        var _c = (_b = (_a = props.rowClassNameGetter) === null || _a === void 0 ? void 0 : _a.call(props, row)) !== null && _b !== void 0 ? _b : {
-            className: '',
-            style: undefined,
-        }, className = _c.className, style = _c.style;
         if (!row) {
             return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) })), visibleColumns.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(styles.LoadingCell, { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)("div", {}) }, "loading-".concat(rowIndex, "-").concat(index))); })] }, "loading-row-".concat(rowIndex)));
         }
         var key = rowKeyGetter(row);
+        var _c = (_b = (_a = props.rowClassNameGetter) === null || _a === void 0 ? void 0 : _a.call(props, row)) !== null && _b !== void 0 ? _b : {
+            className: '',
+            style: undefined,
+        }, className = _c.className, style = _c.style;
         return ((0, jsx_runtime_1.jsxs)(styles.DataGridRow, { children: [!!props.selectable && ((0, jsx_runtime_1.jsx)(styles.SelectionCell, { children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", value: key, checked: selectedKeys.includes(key), onChange: function (e) { return setRowSelection(row, e.target.checked); } }) }, "__select_checkbox__")), visibleColumns.map(function (_a, index) {
                     var key = _a[0], col = _a[1];
-                    return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, { className: className, style: style, row: row, rowIndex: rowIndex, column: col, columnIndex: index, context: DataGridContext, columnKey: key }, "loading-".concat(rowIndex, "-").concat(index)));
+                    return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, __assign({}, (index === 0 ? { className: className, style: style } : {}), { row: row, rowIndex: rowIndex, column: col, columnIndex: index, context: DataGridContext, columnKey: key }), "loading-".concat(rowIndex, "-").concat(index)));
                 })] }, key));
     }, [
         DataGridContext,

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

@@ -20,7 +20,7 @@ export declare const DataGridResizeGrip: import("styled-components/dist/types").
     $headerColor?: ThemeColor;
 }>> & string;
 type DataGridHeaderCellContainerProps = {
-    $isResizing: boolean;
+    $isResizing?: boolean;
     $headerColor?: ThemeColor;
 };
 export declare const DataGridHeaderCellContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridHeaderCellContainerProps>> & string;
@@ -46,6 +46,9 @@ export declare const LoadingCell: import("styled-components/dist/types").IStyled
 export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
+export declare const HeaderSelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridHeaderCellContainerProps> & DataGridHeaderCellContainerProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
 export declare const ResizeBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, never>, never>> & string;

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

@@ -27,7 +27,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterValuesScrollerContainer = exports.ResizeBackdrop = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRow = exports.DataGridCell = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = exports.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.DEFAULT_FILTER_ROW_HEIGHT = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
+exports.FilterValuesScrollerContainer = exports.ResizeBackdrop = exports.HeaderSelectionCell = exports.SelectionCell = exports.LoadingCell = exports.DataGridRow = exports.DataGridHeaderRow = exports.DataGridContainer = exports.DataGridToolsRow = exports.DataGridCell = exports.DataGridHeaderCellContainer = exports.DataGridResizeGrip = exports.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.DEFAULT_FILTER_ROW_HEIGHT = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_ROW_HEIGHT = exports.TOOLBAR_HEIGHT = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.VIRTUAL_SCROLL_TOLERANCE = 20;
 exports.TOOLBAR_HEIGHT = 40;
@@ -56,16 +56,16 @@ exports.DataGridResizeGrip = styled_components_1.default.div(templateObject_7 ||
     return $headerColor
         ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __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_6 || (templateObject_6 = __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_10 || (templateObject_10 = __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  }\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  }\n"])), function (_a) {
+exports.DataGridHeaderCellContainer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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) {
     var $isResizing = _a.$isResizing;
     return ($isResizing ? 1 : 0);
 }, function (_a) {
     var $headerColor = _a.$headerColor;
     return $headerColor
-        ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-900);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n        "], ["\n          background-color: var(--color-", "-200);\n          color: var(--color-", "-900);\n          &:hover {\n            background-color: var(--color-", "-300);\n          }\n        "])), $headerColor, $headerColor, $headerColor) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "], ["\n          background-color: var(--color-neutral-200);\n          color: var(--color-neutral-900);\n          &:hover {\n            background-color: var(--color-neutral-300);\n          }\n        "])));
+        ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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_11 || (templateObject_11 = __makeTemplateObject(["\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  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.DataGridCell = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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.DataGridCell.displayName = 'DataGridCell';
 exports.DataGridToolsRow = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-1);\n  padding: 0 var(--space-1);\n  align-items: center;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 10;\n"], ["\n  grid-column-start: 1;\n  grid-column-end: -1;\n  grid-row: 1;\n  display: flex;\n  gap: var(--space-1);\n  padding: 0 var(--space-1);\n  align-items: center;\n  background-color: var(--color-neutral-200);\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 10;\n"])));
 exports.DataGridToolsRow.displayName = 'DataGridToolsRow';
@@ -106,16 +106,19 @@ exports.DataGridRow = styled_components_1.default.div(templateObject_17 || (temp
 exports.DataGridRow.displayName = 'DataGridRow';
 exports.LoadingCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_18 || (templateObject_18 = __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';
-exports.SelectionCell = (0, styled_components_1.default)(exports.DataGridCell)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  /* inline-flex items-center justify-center w-12 select-none text-center whitespace-nowrap */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-6);\n  padding: 0 var(--space-1);\n\n  & > input[type='checkbox'] {\n    height: var(--space-6);\n    width: var(--space-6);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-sky-600);\n  }\n"], ["\n  /* inline-flex items-center justify-center w-12 select-none text-center whitespace-nowrap */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-6);\n  padding: 0 var(--space-1);\n\n  & > input[type='checkbox'] {\n    height: var(--space-6);\n    width: var(--space-6);\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-neutral-300);\n    color: var(--color-sky-600);\n  }\n"])));
+var selectionCellStyle = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-8);\n  padding: 0 var(--space-1);\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\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_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), selectionCellStyle);
 exports.SelectionCell.displayName = 'SelectionCell';
+exports.HeaderSelectionCell = (0, styled_components_1.default)(exports.DataGridHeaderCellContainer)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\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_22 || (templateObject_22 = __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"])));
 exports.ResizeBackdrop.displayName = 'ResizeBackdrop';
 exports.FilterValuesScrollerContainer = styled_components_1.default.div.attrs({
     className: 'FilterValuesScrollerContainer',
-})(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"], ["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"])), function (_a) {
+})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"], ["\n  display: block;\n  font-size: var(--text-base);\n  background-color: var(--color-neutral-0);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  height: 100%;\n\n  & > div {\n    position: relative;\n  }\n\n  & .checkbox {\n    position: absolute;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: ", ";\n\n    input[type='checkbox'] {\n      margin-right: var(--space-1);\n    }\n  }\n"])), function (_a) {
     var _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_FILTER_ROW_HEIGHT : _b;
     return "".concat($rowHeight, "px");
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+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;

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

@@ -1,19 +1,19 @@
 import * as t from 'io-ts';
-import { CSSProperties, Context, Dispatch, MouseEvent, ReactNode, SetStateAction } from 'react';
+import { CSSProperties, Context, Dispatch, FC, MouseEvent, MouseEventHandler, ReactNode, SetStateAction } from 'react';
 import { SettingsContextProps } from '../../../providers/SettingsProvider';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-export type MysqlJsonObject = Record<string, string | number | null>;
+export type DataGridCellFC = FC<{
+    onDoubleClick?: MouseEventHandler;
+    style?: CSSProperties;
+}>;
 export type DataGridColumn<R> = {
-    bodyClassName?: string;
-    className?: string;
+    component?: DataGridCellFC;
     editable?: boolean;
     excelFormatter?: (value: any) => string;
     excelValue?: (value: any) => string;
     filter?: DataGridFilter;
     footer?: (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
-    footerClassName?: string;
-    getter?: (row: R) => string | number | MysqlJsonObject;
-    headerClassName?: string;
+    getter?: (row: R) => string | number;
     name: string;
     order?: number;
     propertyName?: keyof R;
@@ -49,7 +49,8 @@ export type DataGridProps<R> = {
     rowHeight?: number;
     filter?: boolean;
     sort?: boolean;
-    filterValuesLoader?: (columnKey: string) => Promise<(string | number | null | MysqlJsonObject)[]>;
+    initialSorts?: Record<string, DataGridSort>;
+    filterValuesLoader?: (columnKey: string) => Promise<(string | number | null)[]>;
     loadCopyRows?: () => Promise<R[]>;
     refresh?: () => void;
     headerColor?: ThemeColor;
@@ -129,22 +130,26 @@ export type DataGridFilterPredicates = {
 export type DataGridFilterType = keyof DataGridFilterPredicates;
 export type DataGridFilterDataType<T extends DataGridFilterType> = DataGridFilterPredicates[T] extends DataGridFilterOperators<string, infer U> ? U : never;
 export type DataGridFilterGetter<T extends DataGridFilterType> = (value: any) => DataGridFilterDataType<T> | null;
-export type DataGridFilterFormatter = (value: any) => string | null;
+export type DataGridFilterRenderer = (value: any) => ReactNode;
+export type DataGridFilterFormatter = (value: any) => string;
 export type DataGridFilterOperator<T extends DataGridFilterType> = DataGridFilterPredicates[T] extends DataGridFilterOperators<infer K, any> ? K : never;
 export type DataGridFilter<T extends string = DataGridFilterType> = T extends DataGridFilterType ? {
     type: T;
     operator: DataGridFilterOperator<T>;
     getter: DataGridFilterGetter<T>;
+    renderer?: DataGridFilterRenderer;
     formatter?: DataGridFilterFormatter;
     values: (DataGridFilterDataType<T> | null)[];
 } : never;
-export type DataGridFilterGroup<R> = {
+export type DataGridFilterGroup = {
     name: string;
-    values?: R[];
-    groups?: DataGridFilterGroup<R>[];
+    values?: (string | number | null)[];
+    groups?: DataGridFilterGroup[];
 };
-export type DataGridFilterCheckbox<R extends string | number | null> = {
-    displayValue: string | null;
-    values: R[];
+export type DataGridFilterValue = string | number | null;
+export type DataGridFilterCheckbox = {
+    displayValue: ReactNode;
+    title: string;
+    value: DataGridFilterValue;
     level: number;
 };

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

@@ -10,15 +10,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sqlColorColumn = exports.sqlCheckboxColumn = exports.sqlPercentageColumn = exports.sqlMoneyColumn = exports.sqlNumberColumn = exports.sqlMonthColumn = exports.sqlDateColumn = exports.sqlPhoneColumn = exports.sqlMailColumn = exports.sqlComposedColumn = exports.sqlTextColumn = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var numbers_1 = require("../../../../helpers/numbers");
 var helpers_1 = require("../../DataGrid/helpers");
-var moment_1 = __importDefault(require("moment"));
+var dates_1 = require("../../../../helpers/dates");
 var sqlTextColumn = function (key, title, options) {
     var _a;
     return (_a = {},
@@ -61,7 +58,7 @@ exports.sqlPhoneColumn = sqlPhoneColumn;
 var sqlDateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return (0, dates_1.formatDate)(row[key]); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
         _a);
 };
 exports.sqlDateColumn = sqlDateColumn;
@@ -105,10 +102,11 @@ exports.sqlCheckboxColumn = sqlCheckboxColumn;
 var sqlColorColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) {
-                var _a;
-                return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: row[key] }, children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
-            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: row[key] }, children: "\u00A0" })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, renderer: function (value) { return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        backgroundColor: value,
+                        width: 'var(--space-16)',
+                        height: '1em',
+                    }, children: "\u00A0" })); } }) }, options),
         _a);
 };
 exports.sqlColorColumn = sqlColorColumn;

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

@@ -63,21 +63,32 @@ var DataGrid_1 = require("../DataGrid");
 var helpers_1 = require("./helpers");
 var helpers_2 = require("../DataGrid/helpers");
 var SqlRequestDataGrid = function (_a) {
+    var _b;
     var onSelectionChangeFromProps = _a.onSelectionChange, props = __rest(_a, ["onSelectionChange"]);
     var currentRows = (0, react_1.useRef)([]);
-    var _b = (0, react_1.useState)([]), rows = _b[0], setRows = _b[1];
-    var _c = (0, react_1.useState)(0), start = _c[0], setStart = _c[1];
-    var _d = (0, react_1.useState)(50), length = _d[0], setLength = _d[1];
-    var _e = (0, react_1.useState)(-1), total = _e[0], setTotal = _e[1];
-    var _f = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _f[0], sqlIdRequest = _f[1];
-    var _g = (0, react_1.useState)({}), conditions = _g[0], setConditions = _g[1];
-    var _h = (0, react_1.useState)([]), orderBy = _h[0], setOrderBy = _h[1];
-    var _j = (0, react_1.useMemo)(function () { return [
-        Object.keys(props.columns),
-        Object.keys(props.columns).filter(function (key) {
-            return (0, helpers_2.isColumnVisible)(props.columns[key]);
-        }),
-    ]; }, [props.columns]), columnsKeys = _j[0], visibleColumnsKeys = _j[1];
+    var _c = (0, react_1.useState)([]), rows = _c[0], setRows = _c[1];
+    var _d = (0, react_1.useState)(0), start = _d[0], setStart = _d[1];
+    var _e = (0, react_1.useState)(50), length = _e[0], setLength = _e[1];
+    var _f = (0, react_1.useState)(-1), total = _f[0], setTotal = _f[1];
+    var _g = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _g[0], sqlIdRequest = _g[1];
+    var _h = (0, react_1.useState)({}), conditions = _h[0], setConditions = _h[1];
+    var _j = (0, react_1.useState)(Object.entries((_b = props.initialSorts) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
+        var _b, _c;
+        var columnKey = _a[0], direction = _a[1];
+        return ({
+            field: (_c = (_b = props.columns[columnKey].field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
+            direction: direction.toUpperCase(),
+        });
+    })), orderBy = _j[0], setOrderBy = _j[1];
+    var _k = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return [
+            __spreadArray(__spreadArray([], Object.keys(props.columns), true), ((_a = props.hiddenColumns) !== null && _a !== void 0 ? _a : []), true),
+            __spreadArray(__spreadArray([], Object.keys(props.columns).filter(function (key) {
+                return (0, helpers_2.isColumnVisible)(props.columns[key]);
+            }), true), ((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), true),
+        ];
+    }, [props.columns, props.hiddenColumns]), columnsKeys = _k[0], visibleColumnsKeys = _k[1];
     var refresh = (0, react_1.useCallback)(function () {
         setRows([]);
         setStart(0);
@@ -98,7 +109,6 @@ var SqlRequestDataGrid = function (_a) {
                 direction: direction.toUpperCase(),
             });
         });
-        console.log('newOrderBy=', newOrderBy);
         setOrderBy(newOrderBy);
     }, [refresh]);
     var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getTotal) {
@@ -109,7 +119,9 @@ var SqlRequestDataGrid = function (_a) {
         if (getTotal === void 0) { getTotal = false; }
         sqlRequest({
             columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
-            returnColumns: returnColumns,
+            returnColumns: returnColumns.includes('Id')
+                ? returnColumns
+                : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
             conditions: conditions,
             orderBy: orderBy,
             start: start,
@@ -129,7 +141,10 @@ var SqlRequestDataGrid = function (_a) {
             (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
             setRows(__spreadArray([], currentRows.current, true));
         });
-    }, 100));
+    }, 100, {
+        leading: true,
+        trailing: true,
+    }));
     var loadFilterValues = (0, react_1.useCallback)(function (columnKey) {
         var _a, _b, _c, _d, _e, _f;
         return sqlRequest({
@@ -187,13 +202,14 @@ var SqlRequestDataGrid = function (_a) {
     var loadAllIds = (0, react_1.useCallback)(function () {
         var _a, _b;
         return sqlIdRequest({
-            columns: ['Id'],
+            columns: columnsKeys,
+            returnColumns: ['Id'],
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
             orderBy: orderBy,
             start: 0,
             length: total,
         }).then(function (response) { return response.data.map(function (row) { return row['Id']; }); });
-    }, [conditions, orderBy, props.conditions, sqlIdRequest, total]);
+    }, [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, total]);
     var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
         if (newStart !== start || newLength !== length) {
             setStart(newStart);

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

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

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

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

package/dist/components/data/index.js

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

package/dist/helpers/dates.d.ts

@@ -0,0 +1,2 @@
+import moment from 'moment';
+export declare const formatDate: (date: moment.MomentInput, format?: string) => string;

package/dist/helpers/dates.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDate = void 0;
+var moment_1 = __importDefault(require("moment"));
+var formatDate = function (date, format) {
+    if (format === void 0) { format = 'DD/MM/YYYY'; }
+    var m = moment_1.default.utc(date);
+    return m.isValid() ? m.format(format) : '';
+};
+exports.formatDate = formatDate;

package/package.json

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

package/src/Icons.tsx

@@ -1,80 +1,80 @@
-import { FC, SVGProps, useEffect, useState } from 'react';
-
-import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
-import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
-import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
-import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
-import CheckIcon from '../assets/icons/check.svg?react';
-import CopyIcon from '../assets/icons/copy.svg?react';
-import DownIcon from '../assets/icons/down.svg?react';
-import FilterFullIcon from '../assets/icons/filter-full.svg?react';
-import FilterIcon from '../assets/icons/filter.svg?react';
-import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
-import HashtagIcon from '../assets/icons/hashtag.svg?react';
-import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
-import LeftIcon from '../assets/icons/left.svg?react';
-import MagnifierIcon from '../assets/icons/magnifier.svg?react';
-import PhoneIcon from '../assets/icons/phone.svg?react';
-import PlusIcon from '../assets/icons/plus.svg?react';
-import RightIcon from '../assets/icons/right.svg?react';
-import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
-import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
-import UpIcon from '../assets/icons/up.svg?react';
-import UserTieIcon from '../assets/icons/user-tie.svg?react';
-
-type IconFCProps = SVGProps<SVGSVGElement>;
-export type IconFC = FC<IconFCProps>;
-
-type AnimatedIconProps = {
-  icons: FC[];
-  speed?: number;
-};
-
-export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
-  icons,
-  speed = 150,
-  ...props
-}) => {
-  const [currentIcon, setCurrentIcon] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
-    }, speed);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [icons.length, speed]);
-
-  const Icon = icons[currentIcon];
-  return <Icon {...props} />;
-};
-
-export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
-  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
-);
-
-export {
-  ArrowDownAZIcon,
-  ArrowUpZAIcon,
-  ArrowsRotateIcon,
-  ArrowsUpDownIcon,
-  CheckIcon,
-  CopyIcon,
-  DownIcon,
-  FilterFullIcon,
-  FilterIcon,
-  FilterSlashIcon,
-  HashtagIcon,
-  ImageSlashIcon,
-  LeftIcon,
-  MagnifierIcon,
-  PhoneIcon,
-  PlusIcon,
-  RightIcon,
-  SpinnerIcon,
-  TableColumnsIcon,
-  UpIcon,
-  UserTieIcon,
-};
+import { FC, SVGProps, useEffect, useState } from 'react';
+
+import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
+import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
+import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
+import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
+import CheckIcon from '../assets/icons/check.svg?react';
+import CopyIcon from '../assets/icons/copy.svg?react';
+import DownIcon from '../assets/icons/down.svg?react';
+import FilterFullIcon from '../assets/icons/filter-full.svg?react';
+import FilterIcon from '../assets/icons/filter.svg?react';
+import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
+import HashtagIcon from '../assets/icons/hashtag.svg?react';
+import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
+import LeftIcon from '../assets/icons/left.svg?react';
+import MagnifierIcon from '../assets/icons/magnifier.svg?react';
+import PhoneIcon from '../assets/icons/phone.svg?react';
+import PlusIcon from '../assets/icons/plus.svg?react';
+import RightIcon from '../assets/icons/right.svg?react';
+import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
+import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
+import UpIcon from '../assets/icons/up.svg?react';
+import UserTieIcon from '../assets/icons/user-tie.svg?react';
+
+type IconFCProps = SVGProps<SVGSVGElement>;
+export type IconFC = FC<IconFCProps>;
+
+type AnimatedIconProps = {
+  icons: FC[];
+  speed?: number;
+};
+
+export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
+  icons,
+  speed = 150,
+  ...props
+}) => {
+  const [currentIcon, setCurrentIcon] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
+    }, speed);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [icons.length, speed]);
+
+  const Icon = icons[currentIcon];
+  return <Icon {...props} />;
+};
+
+export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
+  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
+);
+
+export {
+  ArrowDownAZIcon,
+  ArrowUpZAIcon,
+  ArrowsRotateIcon,
+  ArrowsUpDownIcon,
+  CheckIcon,
+  CopyIcon,
+  DownIcon,
+  FilterFullIcon,
+  FilterIcon,
+  FilterSlashIcon,
+  HashtagIcon,
+  ImageSlashIcon,
+  LeftIcon,
+  MagnifierIcon,
+  PhoneIcon,
+  PlusIcon,
+  RightIcon,
+  SpinnerIcon,
+  TableColumnsIcon,
+  UpIcon,
+  UserTieIcon,
+};