@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Blocks/CommonGrid/storybook/utils/utils.js

@@ -1,114 +1,93 @@
-import { rowClassSymbol } from "../../types.js";
-import CommonGridContainer from "../../CommonGridContainer.js";
-import withReduxActions from "../../HoC/withReduxActions.js";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-import faker from "faker";
-//#region packages/ui/Blocks/CommonGrid/storybook/utils/utils.tsx
-const enumValues = [
-	"option A",
-	"option B",
-	"option C"
-];
-const oversizedArrayColumns = 25;
-const gridSelectors = {};
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import faker from 'faker';
+import CommonGrid from '../../CommonGridContainer';
+import withReduxActions from '../../HoC/withReduxActions';
+import { rowClassSymbol, ExtraControlButtonPosition } from '../../types';
+export var enumValues = ['option A', 'option B', 'option C'];
+export var oversizedArrayColumns = 25;
+export var gridSelectors = {};
 /**
-* randomly returns given data or undefined. used to simulate optional pros on object data types
-*/
+ * randomly returns given data or undefined. used to simulate optional pros on object data types
+ */
 function makeOptional(fakerData, chance) {
-	chance = chance || .5;
-	return Math.random() < chance ? fakerData : void 0;
+    chance = chance || 0.5;
+    return Math.random() < chance ? fakerData : undefined;
 }
-const createRandomData = (count) => new Array(count).fill(null).map(() => ({
-	id: faker.random.uuid(),
-	stickyColumn: faker.random.word(),
-	textColumn: faker.random.word(),
-	enumColumn: enumValues[faker.random.number({
-		min: 0,
-		max: 2
-	})],
-	numberColumn: faker.random.number(),
-	dateColumn: faker.date.recent().toISOString(),
-	boolColumn: faker.random.boolean(),
-	[rowClassSymbol]: makeOptional("foo")
-}));
-const gridDummyActions = {
-	setPage: (number) => {
-		console.log("setPage", number);
-	},
-	setRowsPerPage: (number) => {
-		console.log("setRowsPerPage", number);
-	},
-	addFilter: (column, value, filterProps, others) => {
-		console.log("addFilter", column, value, filterProps, others);
-	}
+export var createRandomData = function (count) {
+    return new Array(count).fill(null).map(function () {
+        var _a;
+        return (_a = {
+                id: faker.random.uuid(),
+                stickyColumn: faker.random.word(),
+                textColumn: faker.random.word(),
+                enumColumn: enumValues[faker.random.number({ min: 0, max: 2 })],
+                numberColumn: faker.random.number(),
+                dateColumn: faker.date.recent().toISOString(),
+                boolColumn: faker.random.boolean()
+            },
+            _a[rowClassSymbol] = makeOptional('foo'),
+            _a);
+    });
+};
+export var gridDummyActions = {
+    // @see types for full list of actions
+    setPage: function (number) {
+        console.log('setPage', number);
+    },
+    setRowsPerPage: function (number) {
+        console.log('setRowsPerPage', number);
+    },
+    addFilter: function (column, value, filterProps, others) {
+        console.log('addFilter', column, value, filterProps, others);
+    }
 };
-const createOversizedRandomData = (count) => new Array(count).fill(null).map(() => {
-	const newData = { id: `${faker.random.uuid()}` };
-	for (let index = 0; index < 25; index++) newData[`column_${index}`] = faker.name.lastName();
-	return newData;
-});
-const ReduxGrid = (props) => {
-	return /* @__PURE__ */ jsx(React.useMemo(() => withReduxActions("storybookGrid")(CommonGridContainer), []), { ...props });
+export var createOversizedRandomData = function (count) {
+    return new Array(count).fill(null).map(function () {
+        var newData = {
+            id: "".concat(faker.random.uuid())
+        };
+        for (var index = 0; index < oversizedArrayColumns; index++) {
+            newData["column_".concat(index)] = faker.name.lastName();
+        }
+        return newData;
+    });
 };
-const extraControlButtons = [{
-	label: "Reload",
-	position: "top-left"
-}, {
-	label: "Export all",
-	position: "top-right"
-}];
-const onAsyncLoadFilterOptions = (key, value) => {
-	return new Promise((resolve) => {
-		setTimeout(() => {
-			resolve([
-				{
-					label: "Apple",
-					value: "apple"
-				},
-				{
-					label: "Banana",
-					value: "banana"
-				},
-				{
-					label: "Cherry",
-					value: "cherry"
-				},
-				{
-					label: "Date",
-					value: "date"
-				},
-				{
-					label: "Elderberry",
-					value: "elderberry"
-				},
-				{
-					label: "Fig",
-					value: "fig"
-				},
-				{
-					label: "Grape",
-					value: "grape"
-				},
-				{
-					label: "Honeydew",
-					value: "honeydew"
-				},
-				{
-					label: "Kiwi",
-					value: "kiwi"
-				},
-				{
-					label: "Lemon",
-					value: "lemon"
-				},
-				{
-					label: "Lime",
-					value: "lime"
-				}
-			]);
-		}, 1e3);
-	});
+export var ReduxGrid = function (props) {
+    var WithActions = React.useMemo(function () { return withReduxActions('storybookGrid')(CommonGrid); }, []);
+    return _jsx(WithActions, __assign({}, props));
+};
+export var extraControlButtons = [
+    { label: 'Reload', position: ExtraControlButtonPosition.TopLeft },
+    { label: 'Export all', position: ExtraControlButtonPosition.TopRight }
+];
+export var onAsyncLoadFilterOptions = function (key, value) {
+    return new Promise(function (resolve) {
+        setTimeout(function () {
+            resolve([
+                { label: 'Apple', value: 'apple' },
+                { label: 'Banana', value: 'banana' },
+                { label: 'Cherry', value: 'cherry' },
+                { label: 'Date', value: 'date' },
+                { label: 'Elderberry', value: 'elderberry' },
+                { label: 'Fig', value: 'fig' },
+                { label: 'Grape', value: 'grape' },
+                { label: 'Honeydew', value: 'honeydew' },
+                { label: 'Kiwi', value: 'kiwi' },
+                { label: 'Lemon', value: 'lemon' },
+                { label: 'Lime', value: 'lime' },
+            ]);
+        }, 1000);
+    });
 };
-//#endregion
-export { ReduxGrid, createOversizedRandomData, createRandomData, enumValues, extraControlButtons, gridDummyActions, gridSelectors, onAsyncLoadFilterOptions, oversizedArrayColumns };

package/ui/Blocks/CommonGrid/storybook/utils/withRedux.js

@@ -1,14 +1,14 @@
-import store_default from "../../store/index.js";
-import { jsx } from "react/jsx-runtime";
-import { Provider } from "react-redux";
-import { combineReducers, compose, createStore } from "redux";
-//#region packages/ui/Blocks/CommonGrid/storybook/utils/withRedux.tsx
-const reduxComposeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-const withProvider = (story) => {
-	return /* @__PURE__ */ jsx(Provider, {
-		store: createStore(combineReducers({ commonGrid: store_default }), {}, reduxComposeEnhancer()),
-		children: story()
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Provider } from 'react-redux';
+import { combineReducers, createStore, compose } from 'redux';
+import commonGridReducer from '../../store';
+// @ts-expect-error
+export var reduxComposeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+export var withProvider = function (story) {
+    var reducers = combineReducers({
+        commonGrid: commonGridReducer
+    });
+    var store = createStore(reducers, {}, reduxComposeEnhancer());
+    return _jsx(Provider, { store: store, children: story() });
 };
-//#endregion
-export { withProvider as default, withProvider, reduxComposeEnhancer };
+export default withProvider;

package/ui/Blocks/CommonGrid/storybook/utils/withRouter.js

@@ -1,7 +1,4 @@
-import "react";
-import { jsx } from "react/jsx-runtime";
-import { MemoryRouter } from "react-router";
-//#region packages/ui/Blocks/CommonGrid/storybook/utils/withRouter.tsx
-const withProvider = (story) => /* @__PURE__ */ jsx(MemoryRouter, { children: story() });
-//#endregion
-export { withProvider as default };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MemoryRouter } from 'react-router';
+var withProvider = function (story) { return _jsx(MemoryRouter, { children: story() }); };
+export default withProvider;

package/ui/Blocks/CommonGrid/storybook/utils/withTheme.js

@@ -1,4 +1,2 @@
-//#region packages/ui/Blocks/CommonGrid/storybook/utils/withTheme.tsx
-const withProvider = (story) => story();
-//#endregion
-export { withProvider as default };
+var withProvider = function (story) { return story(); };
+export default withProvider;

package/ui/Blocks/CommonGrid/styles.d.ts

@@ -1,18 +1,19 @@
-export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+/// <reference types="react" />
+export declare const BottomWrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
     withPagination: boolean;
 }, "color">;
-export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+export declare const ContentContainer: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const CommonGridWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
     withPagination: boolean;
 }, "color">;
-export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const CommonGridWithStyles: import("styled-components").StyledComponent<import("react").FC<import("./types").CommonGridProps & {
-    filters?: import("./types").FiltersConfig;
-    handleDragEnd: (item: import("@dnd-kit/core").DragEndEvent) => void;
-    displayColumnsDefinitions: import("./types").ColumnDefinition[];
+export declare const StyledButtonStrip: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
+export declare const CommonGridWithStyles: import('styled-components').StyledComponent<import('react').FC<import('./types').CommonGridProps & {
+    filters?: import('./types').FiltersConfig | undefined;
+    handleDragEnd: (item: import('@dnd-kit/core').DragEndEvent) => void;
+    displayColumnsDefinitions: import('./types').ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;
-}>, import("@xstyled/system").Theme, {
+}>, import('@xstyled/system').Theme, {
     withButtonStrip: boolean;
     hasGroupsOrFilters: boolean;
     hasGroups: boolean;

package/ui/Blocks/CommonGrid/styles.js

@@ -1,253 +1,35 @@
-import "./utils/constants.js";
-import CommonGrid from "./CommonGrid.js";
-import styled$1, { x } from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
-//#region packages/ui/Blocks/CommonGrid/styles.tsx
-const BottomWrapper = styled$1(x.div)`
-  position: relative;
-  z-index: 2;
-  flex-shrink: 0;
-  padding: ${({ withPagination }) => withPagination ? "10px 0" : "0px"};
-  width: 100%;
-  height: ${({ withPagination }) => withPagination ? 60 : 0}px;
-  background-color: bgLightGray;
-
-  @media print {
-    display: none;
-  }
-
-  @media (min-width: 1024px) {
-    position: relative;
-    bottom: 0;
-    margin-bottom: 0;
-  }
-`;
-const ContentContainer = styled$1(x.div)`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: white;
-  box-shadow: gridShadow;
-  border-radius: 8px;
-  flex-grow: 1;
-  height: 100%;
-`;
-const CommonGridWrap = styled$1(x.div)`
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  @media (min-width: 1024px) {
-    display: block;
-    height: calc(100% - ${({ withPagination }) => withPagination ? 60 : 0}px);
-    flex: unset;
-    min-height: unset;
-    overflow: visible;
-  }
-`;
-const StyledButtonStrip = styled$1(x.div)`
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  min-height: auto;
-  padding: 10px;
-  flex-wrap: wrap;
-  z-index: 3;
-
-  @media (min-width: 768px) {
-    min-height: ${75}px;
-    padding: 18px 20px;
-  }
-`;
-const CommonGridWithStyles = styled$1(CommonGrid)`
-  & .cell {
-    padding: 0 4px;
-  }
-  & .dataRow {
-    font-size: 12px;
-    font-family: ${th$1("fonts.primary")};
-    color: typoPrimary;
-    font-weight: normal;
-    border-bottom: 1px solid;
-    border-color: lightGray3;
-    height: ${40}px;
-  }
-  & .gridHead {
-    height: ${({ hasGroups }) => 40 + (hasGroups ? 39 : 0)}px;
-    background-color: neutral20;
-    padding-bottom: 8px;
-    position: sticky;
-    top: -1px;
-    z-index: 2;
-    border-top: 1px solid ${th$1("colors.lightGray6")};
-  }
-
-  & .filterRow {
-    display: none;
-  }
-
-  @media (min-width: 1023px) {
-    & .gridHead {
-      height: ${({ hasGroupsOrFilters }) => 40 + (hasGroupsOrFilters ? 39 : 0)}px;
-    }
-    & .filterRow {
-      display: flex;
-    }
-  }
-  & .headRow {
-    font-size: 12px;
-    font-family: ${th$1("fonts.primary")};
-    color: typoPrimary;
-    font-weight: bold;
-    border-bottom: none; // TODO fix in common-grid
-
-    & .cell {
-      overflow: hidden;
-      max-height: 32px;
-      position: relative;
-    }
-
-    & .sticky {
-      background-color: bgLightGray1;
-    }
-  }
-
-  & .filterRow {
-    & .cell {
-      overflow: visible;
-    }
-
-    & .cell > div {
-      width: 100%; // TODO fix in common-grid
-    }
-
-    & .sticky {
-      background-color: bgLightGray1;
-    }
-    border-bottom: none; // TODO fix in common-grid
-  }
-
-  & .body {
-    flex-grow: 1;
-  }
-
-  flex: 1;
-  min-height: 0;
-
-  @media (min-width: 1024px) {
-    flex: unset;
-    min-height: unset;
-    height: calc(100% - ${({ withButtonStrip }) => withButtonStrip ? 75 : 0}px);
-  }
-
-  & .gridWrapper {
-    background-color: ${({ theme }) => theme.colors.white};
-    width: auto;
-    height: 100%;
-    overflow-y: auto;
-
-    @media (min-width: 1024px) {
-      height: 100%;
-      overflow-y: auto;
-    }
-    @media print {
-      margin: 0;
-      width: 100%;
-      height: auto;
-      overflow-x: hidden;
-    }
-  }
-
-  & .fullWidthGrid > .gridWrapper > div {
-    width: 100% !important;
-  }
-
-  & .paginatorWrapper,
-  & .buttonsStrip {
-    @media print {
-      display: none;
-    }
-  }
-  & .cell {
-    padding-left: 4px;
-    padding-right: 4px;
-    @media print {
-      white-space: unset;
-    }
-  }
-
-  .dataRow {
-    &.grayedOut {
-      background: lightGray1;
-    }
-
-    .sticky-right,
-    .sticky-left {
-      background: white;
-    }
-
-    .sticky-right {
-      border-left: 1px solid #dfe1e6;
-    }
-
-    .sticky-left {
-      border-right: 1px solid #dfe1e6;
-    }
-
-    &:hover,
-    &.checked,
-    &.selected {
-      background-color: red30;
-    }
-  }
-
-  .dataRow:nth-child(even) {
-    .sticky-left,
-    .sticky-right {
-      background-color: bgLightGray;
-    }
-  }
-
-  @media print {
-    .filterRow .sticky {
-      display: none;
-    }
-
-    .headRow .sticky {
-      display: none;
-    }
-
-    .dataRow .sticky {
-      display: none;
-    }
-  }
-
-  .resizer {
-    z-index: unset;
-  }
-
-  // hotfix table head
-  .cell .sortable {
-    display: flex;
-    align-items: center;
-    padding-right: 2px;
-  }
-
-  .sticky {
-    position: sticky !important;
-    z-index: 1;
-  }
-
-  .sticky-left {
-    left: 0;
-  }
-
-  .sticky-right {
-    right: 0;
-  }
-`;
-//#endregion
-export { BottomWrapper, CommonGridWithStyles, CommonGridWrap, ContentContainer, StyledButtonStrip };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight, gridFilterHeight } from './utils/constants';
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import CommonGrid from './CommonGrid';
+export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ", ";\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"], ["\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  padding: ", ";\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"])), function (_a) {
+    var withPagination = _a.withPagination;
+    return (withPagination ? '10px 0' : '0px');
+}, function (_a) {
+    var withPagination = _a.withPagination;
+    return (withPagination ? gridFooterHeight : 0);
+});
+export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n  flex-grow: 1;\n  height: 100%;\n"])));
+export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    display: block;\n    height: calc(100% - ", "px);\n    flex: unset;\n    min-height: unset;\n    overflow: visible;\n  }\n"], ["\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    display: block;\n    height: calc(100% - ", "px);\n    flex: unset;\n    min-height: unset;\n    overflow: visible;\n  }\n"])), function (_a) {
+    var withPagination = _a.withPagination;
+    return (withPagination ? gridFooterHeight : 0);
+});
+export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ", "px;\n    padding: 18px 20px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: auto;\n  padding: 10px;\n  flex-wrap: wrap;\n  z-index: 3;\n\n  @media (min-width: 768px) {\n    min-height: ", "px;\n    padding: 18px 20px;\n  }\n"])), gridButtonStripHeight);
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: neutral20;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: neutral20;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  flex: 1;\n  min-height: 0;\n\n  @media (min-width: 1024px) {\n    flex: unset;\n    min-height: unset;\n    height: calc(100% - ", "px);\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    height: 100%;\n    overflow-y: auto;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background-color: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid;\n      border-left-color: lightGray6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid;\n      border-right-color: lightGray6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n\n  & .filterRow {\n    display: none;\n  }\n\n  @media (min-width: 1023px) {\n    & .gridHead {\n      height: ", "px;\n    }\n    & .filterRow {\n      display: flex;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: neutral20;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: neutral20;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  flex: 1;\n  min-height: 0;\n\n  @media (min-width: 1024px) {\n    flex: unset;\n    min-height: unset;\n    height: calc(100% - ", "px);\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    height: 100%;\n    overflow-y: auto;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 4px;\n    padding-right: 4px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background-color: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid;\n      border-left-color: lightGray6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid;\n      border-right-color: lightGray6;\n    }\n\n    &:hover,\n    &.checked,\n    &.selected {\n      background-color: red30;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), th('fonts.primary'), gridRowHeight, function (_a) {
+    var hasGroups = _a.hasGroups;
+    return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
+}, th('colors.lightGray6'), function (_a) {
+    var hasGroupsOrFilters = _a.hasGroupsOrFilters;
+    return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
+}, th('fonts.primary'), function (_a) {
+    var withButtonStrip = _a.withButtonStrip;
+    return (withButtonStrip ? gridButtonStripHeight : 0);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Blocks/CommonGrid/types.d.ts

@@ -1,4 +1,5 @@
-import { type Props as ButtonProps, type AppearanceValue, type VariantValue } from '../../Elements/Button/types';
+import { Props as ButtonProps, AppearanceValue, VariantValue } from '../../Elements/Button/types';
+
 export declare const rowClassSymbol: unique symbol;
 type Option = {
     value: string | number;

package/ui/Blocks/CommonGrid/types.js

@@ -1,22 +1,13 @@
-import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-//#region packages/ui/Blocks/CommonGrid/types.ts
-var types_exports = /* @__PURE__ */ __exportAll({
-	EditReadPosition: () => EditReadPosition,
-	ExtraControlButtonPosition: () => ExtraControlButtonPosition,
-	rowClassSymbol: () => rowClassSymbol
-});
-const rowClassSymbol = Symbol();
-let EditReadPosition = /* @__PURE__ */ function(EditReadPosition) {
-	EditReadPosition["Left"] = "left";
-	EditReadPosition["Right"] = "right";
-	return EditReadPosition;
-}({});
-let ExtraControlButtonPosition = /* @__PURE__ */ function(ExtraControlButtonPosition) {
-	ExtraControlButtonPosition["TopLeft"] = "top-left";
-	ExtraControlButtonPosition["TopRight"] = "top-right";
-	ExtraControlButtonPosition["BottomLeft"] = "bottom-left";
-	ExtraControlButtonPosition["BottomRight"] = "bottom-right";
-	return ExtraControlButtonPosition;
-}({});
-//#endregion
-export { EditReadPosition, ExtraControlButtonPosition, rowClassSymbol, types_exports };
+export var rowClassSymbol = Symbol();
+export var EditReadPosition;
+(function (EditReadPosition) {
+    EditReadPosition["Left"] = "left";
+    EditReadPosition["Right"] = "right";
+})(EditReadPosition || (EditReadPosition = {}));
+export var ExtraControlButtonPosition;
+(function (ExtraControlButtonPosition) {
+    ExtraControlButtonPosition["TopLeft"] = "top-left";
+    ExtraControlButtonPosition["TopRight"] = "top-right";
+    ExtraControlButtonPosition["BottomLeft"] = "bottom-left";
+    ExtraControlButtonPosition["BottomRight"] = "bottom-right";
+})(ExtraControlButtonPosition || (ExtraControlButtonPosition = {}));