@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

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

@@ -1,13 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.onBatchAction = exports.onRowAction = exports.onRowReadClick = exports.onRowEditClick = void 0;
-var onRowEditClick = function (id, props) { return console.log('onRowEditClick', id, props); };
-exports.onRowEditClick = onRowEditClick;
-var onRowReadClick = function (id, props) { return console.log('onRowReadClick', id, props); };
-exports.onRowReadClick = onRowReadClick;
-var onRowAction = function (id, field, value) { return console.log('onRowAction', id, field, value); };
-exports.onRowAction = onRowAction;
-var onBatchAction = function (action, affectedRows) {
+export var onRowEditClick = function (id, props) { return console.log('onRowEditClick', id, props); };
+export var onRowReadClick = function (id, props) { return console.log('onRowReadClick', id, props); };
+export var onRowAction = function (id, field, value) { return console.log('onRowAction', id, field, value); };
+export var onBatchAction = function (action, affectedRows) {
     console.log('onBatchAction called', action, affectedRows);
 };
-exports.onBatchAction = onBatchAction;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -8,37 +7,32 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.columnDefinitions = exports.enumColumn = exports.oversizedColumnDefinition = exports.enumValues = exports.oversizedArrayColumns = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-exports.oversizedArrayColumns = 25;
-exports.enumValues = ['option A', 'option B', 'option C'];
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+export var oversizedArrayColumns = 25;
+export var enumValues = ['option A', 'option B', 'option C'];
 var ComplexCell = function (props) {
-    var handleActionClick = react_1.default.useCallback(function () {
+    var handleActionClick = React.useCallback(function () {
         if (props.onRowAction)
             props.onRowAction(props.rowData.id, 'get_invoice', null);
         //     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.rowData, props.onRowAction]);
-    return (0, jsx_runtime_1.jsxs)("button", { onClick: handleActionClick, children: [" download ", props.rowData.id, " "] });
+    return _jsxs("button", { onClick: handleActionClick, children: [" download ", props.rowData.id, " "] });
 };
-exports.oversizedColumnDefinition = new Array(exports.oversizedArrayColumns).fill(null).map(function (unused, index) { return ({
+export var oversizedColumnDefinition = new Array(oversizedArrayColumns).fill(null).map(function (unused, index) { return ({
     name: "column_".concat(index),
     title: "column_".concat(index),
     flexBasis: 120,
 }); });
-exports.enumColumn = {
+export var enumColumn = {
     name: 'enumColumn',
     title: 'Enum Column',
     flexBasis: 160,
-    filterOptions: __spreadArray([{ value: '', label: 'all' }], exports.enumValues.map(function (v) { return ({ value: v, label: v }); }), true),
+    filterOptions: __spreadArray([{ value: '', label: 'all' }], enumValues.map(function (v) { return ({ value: v, label: v }); }), true),
     filtering: true,
     sorting: false,
 };
-exports.columnDefinitions = [
+export var columnDefinitions = [
     {
         name: 'textColumn',
         title: 'Text column',
@@ -46,7 +40,7 @@ exports.columnDefinitions = [
         filtering: true,
         sorting: true,
     },
-    exports.enumColumn,
+    enumColumn,
     {
         name: 'numberColumn',
         title: 'Number Column',

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

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinguiContainer = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var core_1 = require("@lingui/core");
-var react_1 = require("@lingui/react");
-var LinguiContainer = function (_a) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
+export var LinguiContainer = function (_a) {
     var children = _a.children;
-    core_1.i18n.activate('en');
-    return (0, jsx_runtime_1.jsx)(react_1.I18nProvider, { i18n: core_1.i18n, children: children });
+    i18n.activate('en');
+    return _jsx(I18nProvider, { i18n: i18n, children: children });
 };
-exports.LinguiContainer = LinguiContainer;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,20 +9,15 @@ 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.ReduxGrid = exports.createOversizedRandomData = exports.gridDummyActions = exports.createRandomData = exports.gridSelectors = exports.oversizedArrayColumns = exports.enumValues = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importDefault(require("react"));
-var faker_1 = __importDefault(require("faker"));
-var types_1 = require("../../types");
-var withReduxActions_1 = __importDefault(require("../../HoC/withReduxActions"));
-var CommonGridContainer_1 = __importDefault(require("../../CommonGridContainer"));
-exports.enumValues = ['option A', 'option B', 'option C'];
-exports.oversizedArrayColumns = 25;
-exports.gridSelectors = {};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import faker from 'faker';
+import { rowClassSymbol } from '../../types.js';
+import withReduxActions from '../../HoC/withReduxActions.js';
+import CommonGrid from '../../CommonGridContainer.js';
+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
  */
@@ -31,24 +25,23 @@ function makeOptional(fakerData, chance) {
     chance = chance || 0.5;
     return Math.random() < chance ? fakerData : undefined;
 }
-var createRandomData = function (count) {
+export var createRandomData = function (count) {
     return new Array(count).fill(null).map(function () {
         var _a;
         return (_a = {
-                id: faker_1.default.random.uuid(),
-                stickyColumn: faker_1.default.random.word(),
-                textColumn: faker_1.default.random.word(),
-                enumColumn: exports.enumValues[faker_1.default.random.number({ min: 0, max: 2 })],
-                numberColumn: faker_1.default.random.number(),
-                dateColumn: faker_1.default.date.recent().toISOString(),
-                boolColumn: faker_1.default.random.boolean()
+                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[types_1.rowClassSymbol] = makeOptional('foo'),
+            _a[rowClassSymbol] = makeOptional('foo'),
             _a);
     });
 };
-exports.createRandomData = createRandomData;
-exports.gridDummyActions = {
+export var gridDummyActions = {
     // @see types for full list of actions
     setPage: function (number) { return console.log('setPage', number); },
     setRowsPerPage: function (number) { return console.log('setRowsPerPage', number); },
@@ -56,20 +49,18 @@ exports.gridDummyActions = {
         return console.log('setRowsPerPage', column, value, filterProps);
     },
 };
-var createOversizedRandomData = function (count) {
+export var createOversizedRandomData = function (count) {
     return new Array(count).fill(null).map(function () {
         var newData = {
-            id: "".concat(faker_1.default.random.uuid()),
+            id: "".concat(faker.random.uuid()),
         };
-        for (var index = 0; index < exports.oversizedArrayColumns; index++) {
-            newData["column_".concat(index)] = faker_1.default.name.lastName();
+        for (var index = 0; index < oversizedArrayColumns; index++) {
+            newData["column_".concat(index)] = faker.name.lastName();
         }
         return newData;
     });
 };
-exports.createOversizedRandomData = createOversizedRandomData;
-var ReduxGrid = function (props) {
-    var WithActions = react_1.default.useMemo(function () { return (0, withReduxActions_1.default)('storybookGrid')(CommonGridContainer_1.default); }, []);
-    return (0, jsx_runtime_1.jsx)(WithActions, __assign({}, props));
+export var ReduxGrid = function (props) {
+    var WithActions = React.useMemo(function () { return withReduxActions('storybookGrid')(CommonGrid); }, []);
+    return _jsx(WithActions, __assign({}, props));
 };
-exports.ReduxGrid = ReduxGrid;

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

@@ -1,19 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withProvider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_redux_1 = require("react-redux");
-var redux_1 = require("redux");
-var store_1 = __importDefault(require("../../store"));
-var withProvider = function (story) {
-    var reducers = (0, redux_1.combineReducers)({
-        commonGrid: store_1.default,
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Provider } from 'react-redux';
+import { combineReducers, createStore } from 'redux';
+import commonGridReducer from '../../store/index.js';
+export var withProvider = function (story) {
+    var reducers = combineReducers({
+        commonGrid: commonGridReducer,
     });
-    var store = (0, redux_1.createStore)(reducers);
-    return (0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: store, children: story() });
+    var store = createStore(reducers);
+    return _jsx(Provider, { store: store, children: story() });
 };
-exports.withProvider = withProvider;
-exports.default = exports.withProvider;
+export default withProvider;

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

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_router_1 = require("react-router");
-var withProvider = function (story) { return (0, jsx_runtime_1.jsx)(react_router_1.MemoryRouter, { children: story() }); };
-exports.default = withProvider;
+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 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 var withProvider = function (story) { return story(); };
-exports.default = withProvider;
+export default withProvider;

package/ui/Blocks/CommonGrid/styles.js

@@ -1,52 +1,23 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommonGridWithStyles = exports.StyledColumnButton = exports.StyledButtonStrip = exports.CommonGridWrap = exports.ContentContainer = exports.BottomWrapper = void 0;
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var system_1 = require("@xstyled/system");
-var Button_1 = require("../../Elements/Button");
-var CommonGrid_1 = __importDefault(require("./CommonGrid"));
-exports.BottomWrapper = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"], ["\n  padding-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"])), function (_a) {
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import { Button } from '../../Elements/Button/index.js';
+import CommonGrid from './CommonGrid.js';
+export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"], ["\n  padding-bottom: 11px;\n  padding-top: 10px;\n  position: ", ";\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    position: relative;\n    padding-bottom: 11px;\n    margin-bottom: 0;\n  }\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n"])), function (_a) {
     var isFixed = _a.isFixed;
     return (isFixed ? 'fixed' : 'relative');
 }, function (_a) {
     var isFixed = _a.isFixed, theme = _a.theme;
     return (isFixed ? theme.colors.bgLightGray : 'transparent');
 });
-exports.ContentContainer = (0, styled_components_1.default)(styled_components_1.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"], ["\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"])));
-exports.CommonGridWrap = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
-exports.StyledButtonStrip = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  flex-wrap: wrap;\n  z-index: 2;\n  border-bottom: 0.5px solid ", ";\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  flex-wrap: wrap;\n  z-index: 2;\n  border-bottom: 0.5px solid ", ";\n"])), (0, system_1.th)('colors.lightGray6'));
-exports.StyledColumnButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  right: 20px;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  position: sticky;\n  right: 20px;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])), (0, system_1.th)('colors.blue2'));
-exports.CommonGridWithStyles = (0, styled_components_1.default)(CommonGrid_1.default)(templateObject_6 || (templateObject_6 = __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: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 20px;\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      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      width: auto;\n      padding-bottom: 0;\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: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\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    max-width: 88px;\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: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 20px;\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      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      width: auto;\n      padding-bottom: 0;\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: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\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    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), (0, system_1.th)('fonts.primary'), (0, system_1.th)('fonts.primary'), function (_a) {
+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"], ["\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"])));
+export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  flex-wrap: wrap;\n  z-index: 2;\n  border-bottom: 0.5px solid ", ";\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  flex-wrap: wrap;\n  z-index: 2;\n  border-bottom: 0.5px solid ", ";\n"])), th('colors.lightGray6'));
+export var StyledColumnButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  right: 20px;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"], ["\n  position: sticky;\n  right: 20px;\n  > span > svg {\n    stroke: ", ";\n    width: 18px;\n    height: 18px;\n  }\n  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\n"])), th('colors.blue2'));
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_6 || (templateObject_6 = __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: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 20px;\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      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      width: auto;\n      padding-bottom: 0;\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: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\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    max-width: 88px;\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: 40px;\n  }\n  & .gridHead {\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 1;\n    padding-left: 20px;\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      position: relative;\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n  }\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n    & .sticky {\n      background-color: #fafbfc;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    padding-left: 20px;\n    flex-grow: 1;\n  }\n  & .gridWrapper {\n    background-color: ", ";\n    width: ", ";\n    padding-bottom: ", ";\n\n    @media (min-width: 1024px) {\n      height: ", ";\n      width: auto;\n      padding-bottom: 0;\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: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n    & .sticky {\n      background-color: #fff;\n      :hover {\n        background-color: #fdf4f3;\n      }\n    }\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n\n    &.selected,\n    &.selected > .sticky {\n      background-color: #fdf4f3;\n    }\n\n    :hover {\n      background-color: #fdf4f3;\n\n      .sticky {\n        background-color: #fdf4f3;\n      }\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    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), th('fonts.primary'), th('fonts.primary'), function (_a) {
     var theme = _a.theme;
     return theme.colors.white;
 }, function (_a) {

package/ui/Blocks/CommonGrid/translations.js

@@ -1,8 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@lingui/react");
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Trans } from '@lingui/react';
 /** catalog for lungui to track commonGrid translations - DO NOT REMOVE */
 var Translations = function () {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.status.noDataFound", message: "No data found." }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.buttonGridConfig", message: "Configure columns" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.config.title", message: "Configure columns" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.config.buttonReset", message: "Reset all" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "manageColumn.title", message: "Manage column" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.buttonCancel", message: "Cancel" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.buttonImport", message: "Import" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.actionOptions.export", message: "Export" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.checkAll", message: "Check all" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "datagrid.filterCell.selectAllLabel", message: "select all" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options' }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.deleteItem", message: "Delete" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.columnLot.NA", message: "N/A" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.buttonActions", message: "Actions" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.columnActive.filterOptions.all", message: "All" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.columnActive.filterOptions.yes", message: "Yes" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.columnActive.filterOptions.no", message: "No" }), (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "products.eshopFilterPlaceholder", message: "Select eshop..." }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.checkedRowsCount", message: "Selected {checkedRowsCount} items" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.filterCell", message: "Type to filter" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.filterCell.from", message: "From" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.filterCell.to", message: "To" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "manageColumn.searchPlaceholder", message: "Find column..." }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.equals", message: "Equals" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.notEquals", message: "Not equal" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.lessThan", message: "Less than" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.lessThanOrEquals", message: "Less than or equals" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.greaterThan", message: "Greater than" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.greaterThanOrEquals", message: "Greater than or equal" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.contains", message: "Contains" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.notContains", message: "Not contains" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.startsWith", message: "Starts with'" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "dataGrid.comparator.endsWith", message: "Ends with" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "select.noOptions", message: "no options" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "components.dropdown.loading", message: "Loading..." }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "components.dropdown.placeholder", message: "Select..." }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "components.dropdown.notReact", message: "Select related values first..." }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "components.dropdown.writeMoreChars", message: "Write at least ${asyncLoadMinChars} characters." }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "components.dropdown.noOptions", message: "No options" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "components.dropdown.newOption", message: "new value" }), ",", (0, jsx_runtime_1.jsx)(react_1.Trans, { id: "form.general.min2Chars", message: "Minimal length is 2 characters." }), ","] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), _jsx(Trans, { id: "dataGrid.buttonGridConfig", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.title", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.buttonReset", message: "Reset all" }), _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }), _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "form.buttonImport", message: "Import" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }), ",", _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }), ",", _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: "select all" }), _jsx(Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options' }), ",", _jsx(Trans, { id: "dataGrid.deleteItem", message: "Delete" }), ",", _jsx(Trans, { id: "dataGrid.columnLot.NA", message: "N/A" }), ",", _jsx(Trans, { id: "dataGrid.buttonActions", message: "Actions" }), ",", _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.all", message: "All" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.yes", message: "Yes" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.no", message: "No" }), _jsx(Trans, { id: "products.eshopFilterPlaceholder", message: "Select eshop..." }), ",", _jsx(Trans, { id: "dataGrid.checkedRowsCount", message: "Selected {checkedRowsCount} items" }), ",", _jsx(Trans, { id: "dataGrid.filterCell", message: "Type to filter" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.from", message: "From" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.to", message: "To" }), ",", _jsx(Trans, { id: "manageColumn.searchPlaceholder", message: "Find column..." }), ",", _jsx(Trans, { id: "dataGrid.comparator.equals", message: "Equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notEquals", message: "Not equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThan", message: "Less than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThanOrEquals", message: "Less than or equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThan", message: "Greater than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThanOrEquals", message: "Greater than or equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.contains", message: "Contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notContains", message: "Not contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.startsWith", message: "Starts with'" }), ",", _jsx(Trans, { id: "dataGrid.comparator.endsWith", message: "Ends with" }), ",", _jsx(Trans, { id: "select.noOptions", message: "no options" }), ",", _jsx(Trans, { id: "components.dropdown.loading", message: "Loading..." }), ",", _jsx(Trans, { id: "components.dropdown.placeholder", message: "Select..." }), ",", _jsx(Trans, { id: "components.dropdown.notReact", message: "Select related values first..." }), ",", _jsx(Trans, { id: "components.dropdown.writeMoreChars", message: "Write at least ${asyncLoadMinChars} characters." }), ",", _jsx(Trans, { id: "components.dropdown.noOptions", message: "No options" }), ",", _jsx(Trans, { id: "components.dropdown.newOption", message: "new value" }), ",", _jsx(Trans, { id: "form.general.min2Chars", message: "Minimal length is 2 characters." }), ","] }));
 };

package/ui/Blocks/CommonGrid/types.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExtraControlButtonPosition = exports.rowClassSymbol = void 0;
-exports.rowClassSymbol = Symbol();
-var ExtraControlButtonPosition;
+export var rowClassSymbol = Symbol();
+export var ExtraControlButtonPosition;
 (function (ExtraControlButtonPosition) {
     ExtraControlButtonPosition["TopLeft"] = "top-left";
     ExtraControlButtonPosition["TopRight"] = "top-right";
     ExtraControlButtonPosition["BottomLeft"] = "bottom-left";
     ExtraControlButtonPosition["BottomRight"] = "bottom-right";
-})(ExtraControlButtonPosition || (exports.ExtraControlButtonPosition = ExtraControlButtonPosition = {}));
+})(ExtraControlButtonPosition || (ExtraControlButtonPosition = {}));

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

@@ -1,24 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFilters = exports.rowHeight = exports.GRID_MIN_ROWS = exports.getStickyCollClassNames = exports.getGroupClassNames = exports.getGroups = exports.createFilterType = exports.calculatePaginator = exports.isColumnOn = exports.getFilterName = exports.getSortName = exports.getCellSizeProps = exports.getActionCellSizeProps = void 0;
-var NumberRange_1 = __importDefault(require("../components/NumberRange"));
-var TextRange_1 = __importDefault(require("../components/TextRange"));
-var DatePickerRange_1 = __importDefault(require("../components/DatePickerRange"));
-var BooleanSelect_1 = __importDefault(require("../components/BooleanSelect"));
-var GridSelect_1 = __importDefault(require("../components/GridSelect"));
+import NumberRange from '../components/NumberRange/index.js';
+import TextRange from '../components/TextRange/index.js';
+import DatePickerRange from '../components/DatePickerRange/index.js';
+import BooleanSelect from '../components/BooleanSelect/index.js';
+import GridSelect from '../components/GridSelect/index.js';
 var isDefined = function (val) { return typeof val !== 'undefined'; };
-var getActionCellSizeProps = function (column) {
+export var getActionCellSizeProps = function (column) {
     return {
         flexBasis: column.flexBasis,
         flexGrow: 0,
         flexShrink: 0,
     };
 };
-exports.getActionCellSizeProps = getActionCellSizeProps;
-var getCellSizeProps = function (column, columnWidth) {
+export var getCellSizeProps = function (column, columnWidth) {
     if (!column)
         return {};
     var fixedSize = column.fixedSize, flexGrow = column.flexGrow, flexShrink = column.flexShrink, sticky = column.sticky;
@@ -29,16 +22,13 @@ var getCellSizeProps = function (column, columnWidth) {
         maxWidth: sticky ? columnWidth : 'auto',
     };
 };
-exports.getCellSizeProps = getCellSizeProps;
-var getSortName = function (column) {
+export var getSortName = function (column) {
     return column.systemName || column.name;
 };
-exports.getSortName = getSortName;
-var getFilterName = function (column) {
+export var getFilterName = function (column) {
     return column.systemFilter || column.systemName || column.name;
 };
-exports.getFilterName = getFilterName;
-var isColumnOn = function (column, columnConfig) {
+export var isColumnOn = function (column, columnConfig) {
     var _a;
     if (column.alwaysOn)
         return true;
@@ -47,20 +37,17 @@ var isColumnOn = function (column, columnConfig) {
         return !isHidden; // isHidden is defined/stored => use user value
     return !column.defaultHidden; // isHidden is undefined => use default value
 };
-exports.isColumnOn = isColumnOn;
-var calculatePaginator = function (page, rowsPerPage) { return ({
+export var calculatePaginator = function (page, rowsPerPage) { return ({
     offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
     limit: rowsPerPage,
 }); };
-exports.calculatePaginator = calculatePaginator;
-var createFilterType = function (columnDefinition) {
+export var createFilterType = function (columnDefinition) {
     if (columnDefinition.filterOptions)
         return 'options';
     else
         return columnDefinition.filteringType || 'text';
 };
-exports.createFilterType = createFilterType;
-var getGroups = function (columns) {
+export var getGroups = function (columns) {
     return columns.map(function (column, key) {
         var previousGroup = key > 0 && columns[key - 1].group;
         return {
@@ -70,27 +57,23 @@ var getGroups = function (columns) {
         };
     });
 };
-exports.getGroups = getGroups;
-var getGroupClassNames = function (group) {
+export var getGroupClassNames = function (group) {
     return "".concat((group === null || group === void 0 ? void 0 : group.start) ? 'group-start' : '', " ").concat((group === null || group === void 0 ? void 0 : group.end) ? 'group-end' : '');
 };
-exports.getGroupClassNames = getGroupClassNames;
-var getStickyCollClassNames = function (sticky, stickTo) {
+export var getStickyCollClassNames = function (sticky, stickTo) {
     return !sticky ? '' : "".concat(stickTo ? " sticky sticky-".concat(stickTo) : ' sticky sticky-left');
 };
-exports.getStickyCollClassNames = getStickyCollClassNames;
-exports.GRID_MIN_ROWS = 6;
-exports.rowHeight = 40;
-var getFilters = function (optimizeFilters) {
+export var GRID_MIN_ROWS = 6;
+export var rowHeight = 40;
+export var getFilters = function (optimizeFilters) {
     var filters = {
-        number: { CellComponent: NumberRange_1.default },
-        text: { CellComponent: TextRange_1.default },
-        date: { CellComponent: DatePickerRange_1.default },
-        flag: { CellComponent: BooleanSelect_1.default },
-        options: { CellComponent: GridSelect_1.default },
+        number: { CellComponent: NumberRange },
+        text: { CellComponent: TextRange },
+        date: { CellComponent: DatePickerRange },
+        flag: { CellComponent: BooleanSelect },
+        options: { CellComponent: GridSelect },
     };
     if (optimizeFilters)
         filters.text.defaultExtraProps = { defaultComparator: 'eq' };
     return filters;
 };
-exports.getFilters = getFilters;

package/ui/Blocks/CornerDialog/CornerDialog.js

@@ -1,22 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CornerDialog = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var utils_1 = require("./utils");
-var Portal_1 = require("../../Elements/Portal");
-var Icon_1 = require("../../Elements/Icon");
-var styles_1 = require("./styles");
-var CornerDialog = function (_a) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { statusToColors, statusToIcon } from './utils.js';
+import { Portal } from '../../Elements/Portal/index.js';
+import { Icon } from '../../Elements/Icon/index.js';
+import { Container, Header, Status, StatusText, Wrapper, CloseBtn } from './styles.js';
+export var CornerDialog = function (_a) {
     var title = _a.title, children = _a.children, onClose = _a.onClose, statusToTitle = _a.statusToTitle, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, _intent = _a.intent;
-    var _c = (0, react_1.useState)(false), isMounted = _c[0], setIsMounted = _c[1];
-    (0, react_1.useEffect)(function () {
+    var _c = useState(false), isMounted = _c[0], setIsMounted = _c[1];
+    useEffect(function () {
         setIsMounted(true);
     }, []);
     var intent = _intent !== null && _intent !== void 0 ? _intent : 'info';
-    var _d = utils_1.statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;
+    var _d = statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;
     if (!isOpen)
         return null;
-    return ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { "$mounted": isMounted, children: [(0, jsx_runtime_1.jsxs)(styles_1.Status, { background: backgroundColor, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: utils_1.statusToIcon[intent], fill: fill }), (0, jsx_runtime_1.jsx)(styles_1.StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), (0, jsx_runtime_1.jsx)(styles_1.Header, { children: title }), (0, jsx_runtime_1.jsx)(styles_1.CloseBtn, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "close", size: "25px" }) }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: children })] }) }));
+    return (_jsx(Portal, { children: _jsxs(Container, { "$mounted": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: "close", size: "25px" }) }), _jsx(Wrapper, { children: children })] }) }));
 };
-exports.CornerDialog = CornerDialog;

package/ui/Blocks/CornerDialog/index.js

@@ -1,4 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var CornerDialog_1 = require("./CornerDialog");
-exports.default = CornerDialog_1.CornerDialog;
+import { CornerDialog } from './CornerDialog.js';
+export default CornerDialog;

package/ui/Blocks/CornerDialog/stories/CornerDialog.stories.js

@@ -1,21 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WarningCornerDialog = exports.ErrorCornerDialog = exports.SuccessCornerDialog = exports.InfoCornerDialog = void 0;
-var CornerDialog_1 = require("../CornerDialog");
+import { CornerDialog } from '../CornerDialog.js';
 var meta = {
     title: 'Blocks/CornerDialog',
-    component: CornerDialog_1.CornerDialog,
+    component: CornerDialog,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
+export default meta;
 var statusToTitle = {
     info: function () { return 'Info'; },
     success: function () { return 'Success'; },
     error: function () { return 'Error'; },
     warning: function () { return 'Warning'; },
 };
-exports.InfoCornerDialog = {
+export var InfoCornerDialog = {
     args: {
         title: 'Info Title',
         children: 'Info corner dialog content',
@@ -24,7 +21,7 @@ exports.InfoCornerDialog = {
         isOpen: true,
     },
 };
-exports.SuccessCornerDialog = {
+export var SuccessCornerDialog = {
     args: {
         title: 'Success Title',
         children: 'Success corner dialog content',
@@ -33,7 +30,7 @@ exports.SuccessCornerDialog = {
         isOpen: true,
     },
 };
-exports.ErrorCornerDialog = {
+export var ErrorCornerDialog = {
     args: {
         title: 'Error Title',
         children: 'Error corner dialog content',
@@ -42,7 +39,7 @@ exports.ErrorCornerDialog = {
         isOpen: true,
     },
 };
-exports.WarningCornerDialog = {
+export var WarningCornerDialog = {
     args: {
         title: 'Warning Title',
         children: 'Warning corner dialog content',