@mailstep/design-system 0.5.1-beta.2 → 0.6.1

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

@@ -1,74 +1,10 @@
-import CommonGrid from './CommonGrid';
+import CommonGrid from './CommonGridContainer';
 import withReduxActions from './HoC/withReduxActions';
 import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
-import * as utils from './utils/public';
-declare const _default: {
-    CommonGrid: ({ components, filters, gridSelectors, gridActions, hideAllControls, totalRowsCount, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, onBatchAction, columnLayout, hideColumnConfig, confirmOnReset, className, gridRef, minColumnWidth, errorMessage, extraControlButtons, perPageOptions, floatingButton, }: Types.CommonGridProps) => JSX.Element;
-    withReduxActions: (gridName: string, prefix?: string) => import("react-redux").InferableComponentEnhancerWithProps<{}, {}>;
-    reducer: (state: import("./store").MultiState | undefined, action: Action) => import("./store").MultiState;
-    actionPrefix: string;
-    actionTypes: {
-        init: string;
-        clearUxState: string;
-        handleUxChange: string;
-        openConfigForm: string;
-        closeConfigForm: string;
-        setColumnConfig: string;
-        setPage: string;
-        setRowsPerPage: string;
-        resetFilters: string;
-        addFilter: string;
-        addSorting: string;
-        clearSettings: string;
-        resetGrid: string;
-        setColumnWidth: string;
-        setColumnsOrder: string;
-    };
-    createActions: (gridName: string) => {
-        init: (initProps: Types.InitProps) => Action;
-        clearUxState: () => Action;
-        handleUxChange: (uxKey: keyof Types.UxState, uxValue: any) => Action;
-        openConfigForm: () => Action;
-        closeConfigForm: () => Action;
-        setColumnConfig: (columnConfig: Types.ColumnConfig) => Action;
-        setPage: (page: number) => Action;
-        setColumnWidth: (columnsWidth: {
-            [anyKey: string]: number;
-        } | null, columnLayout: "normal" | "sticky" | "no-scroll") => Action;
-        resetGrid: () => Action;
-        setColumnsOrder: (columnsOrder: string[]) => Action;
-        setRowsPerPage: (rowsPerPage: number) => Action;
-        resetFilters: () => Action;
-        addFilter: (column: string, value: any, filterProps: Types.FilterProps) => Action;
-        addSorting: (column: string, direction: Types.SortingValueType) => Action;
-        clearSettings: () => Action;
-    };
-    createSelectors: (gridName: string) => {
-        getUxState: (state: {}) => Types.UxState;
-        isConfigFormOpen: (state: {}) => boolean;
-        getColumnConfig: (state: {}) => Types.ColumnConfig;
-        getPage: (state: {}) => number;
-        getRowsPerPage: (state: {}) => number;
-        getFilter: (state: {}) => {
-            [column: string]: {
-                value: any;
-                filterProps: Types.FilterProps;
-            };
-        };
-        getSorting: (state: {}) => {
-            column: string;
-            direction: Types.SortingValueType;
-        }[];
-        getColumnsWidth: (state: {}) => {
-            [anyKey: string]: number;
-        };
-        getColumnsWidthVariant: (state: {}) => string | undefined;
-        getColumnsOrder: (state: {}) => string[];
-    };
-    createFullSelector: (gridName: string) => (state: {}) => Types.GridSelectorsType;
-    Types: typeof Types;
-    utils: typeof utils;
-};
-export default _default;
-export { CommonGrid, withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils };
+export * from './StandardButtons';
+export * from './components/gridCells';
+import { useAddFilter } from './hooks/useAddFilter';
+export default CommonGrid;
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, };

package/ui/Blocks/CommonGrid/index.js

@@ -1,18 +1,10 @@
-import CommonGrid from './CommonGrid';
+import CommonGrid from './CommonGridContainer';
 import withReduxActions from './HoC/withReduxActions';
 import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
-import * as utils from './utils/public';
-export default {
-    CommonGrid: CommonGrid,
-    withReduxActions: withReduxActions,
-    reducer: reducer,
-    actionPrefix: actionPrefix,
-    actionTypes: actionTypes,
-    createActions: createActions,
-    createSelectors: createSelectors,
-    createFullSelector: createFullSelector,
-    Types: Types,
-    utils: utils
-};
-export { CommonGrid, withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils };
+export * from './StandardButtons';
+export * from './components/gridCells';
+import { useAddFilter } from './hooks/useAddFilter';
+export default CommonGrid;
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, };

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
 import { onRowEditClick, onRowReadClick, onRowAction, onBatchAction } from '../utils/actions';
-import { filters } from '../utils/filters';
-import { useAddFilter } from '../../utils/public';
+import { useAddFilter } from '../../hooks/useAddFilter';
 import withReduxActions from '../../HoC/withReduxActions';
 import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
 import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../utils/linguiContainer';
 var ActionColumnButtons = {
     flexBasis: 160,
     canRowRead: true,
@@ -25,7 +25,7 @@ export default {
     title: '@Blocks/CommonGrid',
     decorators: [withRedux],
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(_Fragment, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { filters: filters, columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, confirmOnReset: function () { return window.confirm('Are you sure you want to reset grid?'); } })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux',
 };

package/ui/Blocks/CommonGrid/storybook/stories/default.stories.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { columnDefinitions } from '../utils/columnDefinition';
 import withTheme from '../utils/withTheme';
 import withRouter from '../utils/withRouter';
 import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
     decorators: [withTheme, withRouter, withRedux],
 };
 export var Default = function () {
-    return (_jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors }));
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors }) }));
 };

package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { columnDefinitions } from '../utils/columnDefinition';
+import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var LoadingState = function () { return (_jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true, hideColumnConfig: true })); };
+export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true, hideColumnConfig: true }) })); };
 LoadingState.story = {
     name: 'Loading state',
 };

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { oversizedColumnDefinition } from '../utils/columnDefinition';
-import { filters } from '../utils/filters';
+import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var ManyColumnsNoScrollLayout = function () { return (_jsx(CommonGrid, { rowsData: createOversizedRandomData(5), filters: filters, columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions })); };
+export var ManyColumnsNoScrollLayout = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, columnLayout: "no-scroll", hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
 ManyColumnsNoScrollLayout.story = {
     name: 'many columns no-scroll layout',
 };

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createOversizedRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { oversizedColumnDefinition } from '../utils/columnDefinition';
-import { filters } from '../utils/filters';
+import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
-export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(CommonGrid, { rowsData: createOversizedRandomData(5), filters: filters, columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions, hideAllControls: true })); };
+export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { rowsData: createOversizedRandomData(5), columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions }) })); };
 ManyColumnsNormalLayoutANoControls.story = {
     name: 'many columns normal layout a no controls',
 };

package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
-import { filters } from '../utils/filters';
 import { onRowAction } from '../utils/actions';
 import { columnDefinitions } from '../utils/columnDefinition';
 import withTheme from '../utils/withTheme';
 import withRouter from '../utils/withRouter';
 import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
     decorators: [withTheme, withRouter, withRedux],
 };
 export var Styled = function () {
-    return (_jsx("div", { className: "styled", children: _jsx(ReduxGrid, { filters: filters, columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors }) }));
+    return (_jsx(LinguiContainer, { children: _jsx("div", { className: "styled", children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridActions: gridDummyActions, gridSelectors: gridSelectors }) }) }));
 };

package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 import { columnDefinitions } from '../utils/columnDefinition';
 import { onRowAction } from '../utils/actions';
-import { filters } from '../utils/filters';
+import { LinguiContainer } from '../utils/linguiContainer';
 export default {
     title: '@Blocks/CommonGrid',
 };
 export var WithCustomGridActions = function () {
-    return (_jsx(CommonGrid, { filters: filters, columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions, hideColumnConfig: true }));
+    return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), onRowAction: onRowAction, gridSelectors: gridSelectors, gridActions: gridDummyActions, hideColumnConfig: true }) }));
 };
 WithCustomGridActions.story = {
     name: 'With custom grid actions',

package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.js

@@ -3,6 +3,7 @@ import { ReduxGrid, createRandomData } from '../utils/utils';
 import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions';
 import { columnDefinitions } from '../utils/columnDefinition';
 import withRedux from '../utils/withRedux';
+import { LinguiContainer } from '../utils/linguiContainer';
 export var ActionColumnCheckboxes = {
     flexBasis: 160,
     forceCheckboxes: true,
@@ -18,7 +19,7 @@ export default {
     decorators: [withRedux],
     excludeStories: ['ActionColumnCheckboxes'],
 };
-export var WithForcedCheckboxesAndCustomTitle = function () { return (_jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnCheckboxes, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, components: components })); };
+export var WithForcedCheckboxesAndCustomTitle = function () { return (_jsx(LinguiContainer, { children: _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnCheckboxes, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, components: components }) })); };
 WithForcedCheckboxesAndCustomTitle.story = {
     name: 'With forced checkboxes and custom title',
 };

package/ui/Blocks/CommonGrid/storybook/utils/linguiContainer.d.ts

@@ -0,0 +1 @@
+export declare const LinguiContainer: ({ children }: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+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;
+    i18n.activate('en');
+    return _jsx(I18nProvider, { i18n: i18n, children: children });
+};

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

@@ -14,7 +14,7 @@ import React from 'react';
 import faker from 'faker';
 import { rowClassSymbol } from '../../types';
 import withReduxActions from '../../HoC/withReduxActions';
-import CommonGrid from '../../CommonGrid';
+import CommonGrid from '../../CommonGridContainer';
 export var enumValues = ['option A', 'option B', 'option C'];
 export var oversizedArrayColumns = 25;
 export var gridSelectors = {};

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

@@ -1,18 +1,2 @@
-/*
-import React from 'react'
-import Theme from '@designSystem/Theme'
-import Normalize, { NormalizeBaseFonts } from '@designSystem/Normalize'
-
-const withProvider = (story: Function): JSX.Element => (
-  <Theme>
-    <Normalize />
-    <NormalizeBaseFonts />
-    {story()}
-  </Theme>
-)
-
-export default withProvider
-*/
-// @TODO do theme
-var withProvider = function (story) { return (story()); };
+var withProvider = function (story) { return story(); };
 export default withProvider;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const BottomWrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
+    isFixed?: boolean | undefined;
+}, "color">;
+export declare const ContentContainer: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const CommonGridWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const StyledColumnButton: import("styled-components").StyledComponent<({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: import("../../Elements/Button/types").Props) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
+export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, columnsDefinitions, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, hideColumnConfig, className, gridRef, minColumnWidth, errorMessage, floatingButtonProps, }: import("./types").CommonGridProps & {
+    filters?: import("./types").FiltersConfig | undefined;
+}) => JSX.Element, import("@xstyled/system").Theme, {
+    onRowClick?: Function | undefined;
+    height?: number | undefined;
+}, never>;

package/ui/Blocks/CommonGrid/styles.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import { Button } from '../../Elements/Button';
+import CommonGrid from './CommonGrid';
+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');
+});
+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) {
+    var height = _a.height;
+    return (height ? 'fit-content' : 'auto');
+}, function (_a) {
+    var height = _a.height;
+    return (height ? '35px' : '0');
+}, function (_a) {
+    var height = _a.height;
+    return (height ? "".concat(height, "px") : '475px');
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1 @@
+export {};

package/ui/Blocks/CommonGrid/translations.js

@@ -0,0 +1,6 @@
+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 (_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.d.ts

@@ -4,10 +4,6 @@ type Option = {
     value: string | number;
     label: string | number;
 };
-type TranslatorPublicInterfaceProps = {
-    id?: string;
-    defaults?: string;
-};
 type ButtonPublicInterfaceProps = {
     children?: React.ReactNode;
     type?: 'button' | 'submit' | 'reset';
@@ -44,8 +40,8 @@ export type FilterComponentProps<VT> = {
         };
     } | null) => void;
     value: VT | null;
-    OverlayComponent: React.FunctionComponent;
-};
+    OverlayComponent?: React.FunctionComponent;
+} & Record<string, any>;
 export type ColumnTitleComponentType = React.ComponentType<{
     title?: string | JSX.Element;
     isSortable: boolean;
@@ -53,7 +49,7 @@ export type ColumnTitleComponentType = React.ComponentType<{
     sortValue: SortingValueType;
 }>;
 export type ComponentsProps = {
-    Translator: React.ComponentType<TranslatorPublicInterfaceProps>;
+    Translator: React.ComponentType<any>;
     Checkbox: React.ComponentType<CheckboxPublicInterfaceProps>;
     Button: React.ComponentType<ButtonPublicInterfaceProps>;
     Switch: React.ComponentType<SwitchPublicInterfaceProps>;
@@ -131,6 +127,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
     defaultHidden?: boolean;
     sticky?: boolean;
     stickTo?: StickTo;
+    passProps?: any;
 };
 export type StickTo = 'left' | 'right';
 type batchAction = {
@@ -160,6 +157,7 @@ export type DataCellProps<T> = {
     rowData: T;
     onRowAction?: (id: string, field: string, value: any) => void | Promise<any>;
     column: ColumnDefinition;
+    children?: React.ReactNode;
 };
 type SingleColumnConfig = {
     isHidden?: boolean;
@@ -240,8 +238,6 @@ export type AsyncFilters = {
     [anyColumn: string]: Option[];
 };
 export type CommonGridProps<TData extends RowProps = RowProps> = {
-    components?: ComponentsProps;
-    filters?: FiltersConfig;
     gridSelectors: GridSelectorsType;
     gridActions: GridActionsType;
     isLoading?: boolean;
@@ -260,14 +256,13 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     columnLayout?: ColumnLayout;
     confirmOnReset?: () => boolean;
     hideColumnConfig?: boolean;
-    hideAllControls?: boolean;
     className?: string;
     gridRef?: React.MutableRefObject<HTMLElement>;
     minColumnWidth?: number;
     errorMessage?: string;
     extraControlButtons?: ExtraControlButton[];
     perPageOptions?: number[];
-    floatingButton?: JSX.Element;
+    floatingButtonProps?: FloatingButtonProps;
 };
 export declare enum ExtraControlButtonPosition {
     TopLeft = "top-left",
@@ -278,13 +273,12 @@ export declare enum ExtraControlButtonPosition {
 export type ExtraControlButton = {
     node?: React.ReactNode;
     onClick?: () => void;
-    onSelect?: (value: string | number) => void;
+    onSelect?: (value: string) => void;
     label?: string | JSX.Element;
     style?: 'primary' | 'secondary';
     options?: {
-        label: string | JSX.Element;
-        value?: string | number;
-        onClick?: () => void;
+        label: string;
+        value: string;
     }[];
     position?: ExtraControlButtonPosition;
     hide?: boolean;
@@ -296,4 +290,24 @@ export type Group = {
     start: boolean;
     end: boolean;
 };
+export type GridProps = Omit<CommonGridProps, 'filters'> & {
+    optimizeFilters?: boolean;
+    eshopSelect?: CommonGridProps['extraControlButtons'];
+    processCheckedValues?: () => void;
+    processCheckedValuesTitle?: string;
+    hideControlButtons?: boolean;
+    queryRowsParam?: number | string;
+    customPaginationHandler?: (page: number, rows: number) => void;
+};
+export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'hideColumnConfig' | 'minColumnWidth' | 'columnLayout'>;
+export type Item = {
+    label: string | JSX.Element;
+    value: string;
+    name: string;
+};
+export type FloatingButtonProps = {
+    options?: Item[];
+    onSelect?: (value: Item['value']) => void;
+    onClick?: () => void;
+};
 export {};

package/ui/Blocks/CommonGrid/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDefinition, ActionColumn, ColumnConfig, FilterProps, Group, StickTo } from '../types';
+import { ColumnDefinition, ActionColumn, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig } from '../types';
 export declare const getActionCellSizeProps: (column: ActionColumn) => object;
 export declare const getCellSizeProps: (column: ColumnDefinition, columnWidth: number) => object;
 export declare const getSortName: (column: ColumnDefinition) => string;
@@ -15,3 +15,6 @@ export declare const createFilterType: (columnDefinition: {
 export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
 export declare const getGroupClassNames: (group?: Group) => string;
 export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
+export declare const GRID_MIN_ROWS = 6;
+export declare const rowHeight = 40;
+export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;

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

@@ -1,3 +1,8 @@
+import NumberRange from '../components/NumberRange';
+import TextRange from '../components/TextRange';
+import DatePickerRange from '../components/DatePickerRange';
+import BooleanSelect from '../components/BooleanSelect';
+import GridSelect from '../components/GridSelect';
 var isDefined = function (val) { return typeof val !== 'undefined'; };
 export var getActionCellSizeProps = function (column) {
     return {
@@ -58,3 +63,17 @@ export var getGroupClassNames = function (group) {
 export var getStickyCollClassNames = function (sticky, stickTo) {
     return !sticky ? '' : "".concat(stickTo ? " sticky sticky-".concat(stickTo) : ' sticky sticky-left');
 };
+export var GRID_MIN_ROWS = 6;
+export var rowHeight = 40;
+export var getFilters = function (optimizeFilters) {
+    var filters = {
+        number: { CellComponent: NumberRange },
+        text: { CellComponent: TextRange },
+        date: { CellComponent: DatePickerRange },
+        flag: { CellComponent: BooleanSelect },
+        options: { CellComponent: GridSelect },
+    };
+    if (optimizeFilters)
+        filters.text.defaultExtraProps = { defaultComparator: 'eq' };
+    return filters;
+};

package/ui/Blocks/HidePrint/HidePrint.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+};
+declare const HidePrint: ({ children }: Props) => JSX.Element;
+export default HidePrint;

package/ui/Blocks/HidePrint/HidePrint.js

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+var HideWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: content;\n  @media print {\n    display: none;\n  }\n"], ["\n  display: content;\n  @media print {\n    display: none;\n  }\n"])));
+var HidePrint = function (_a) {
+    var children = _a.children;
+    return _jsx(HideWrapper, { children: children });
+};
+export default HidePrint;
+var templateObject_1;

package/ui/Blocks/Modal/Modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useEffect } from 'react';
 import { Icon, Cancel } from '../../Elements/Icon';
 import { H2, H5 } from '../../Elements/Typography';
-import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, } from './styles';
+import { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, ButtonsWrapper, } from './styles';
 import { x } from '@xstyled/styled-components';
 import { Button } from '../../Elements/Button';
 import { Portal } from '../../Elements/Portal';
@@ -32,5 +32,5 @@ export var Modal = memo(function (_a) {
     if (!isShown) {
         return null;
     }
-    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "ghostDanger", children: extraActionLabel })), _jsxs(x.div, { children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
+    return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$backgroundColor": background, top: top, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, variant: variant, children: [title && hasHeader && (_jsx(HeaderContainer, { variant: variant, children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), variant == 'default' ? (_jsx(H2, { mt: 0, mb: 0, variant: "bold", children: title })) : (_jsx(H5, { mt: 0, mb: 0, variant: "bold", children: title }))] }) })), withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: _jsx(Cancel, { width: "11px", height: "11px" }) })), _jsx(ContentContainer, { variant: variant, children: children }), hasFooter && (onExtraAction || onCancel || onConfirm) && (_jsxs(ButtonsContainer, { hasSpaceBetween: !!onExtraAction, children: [onExtraAction && (_jsx(Button, { type: "button", onClick: onExtraAction, isLoading: isLoading, "data-cy": "extraActionBtn", appearance: "ghostDanger", children: extraActionLabel })), _jsxs(ButtonsWrapper, { hasExtraAction: !!onExtraAction, hasBothButtons: !!onCancel && !!onConfirm, children: [onCancel && (_jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })] }))] }) }) }));
 });

package/ui/Blocks/Modal/stories/Modal.stories.js

@@ -32,7 +32,7 @@ export var ModalTopPosition = {
         title: 'Modal default version',
         children: _jsx(_Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum id eros ac consequat." }),
         variant: 'default',
-        top: '0'
+        top: '0',
     },
 };
 export var ModalWithCloseAndConfirmBtns = {
@@ -40,6 +40,10 @@ export var ModalWithCloseAndConfirmBtns = {
         children: _jsx(_Fragment, { children: "Modal with narrow width" }),
         title: 'Modal title',
         width: 'narrow',
+        withCloseIcon: true,
+        onCancel: function () { return console.log('Cancel'); },
+        onConfirm: function () { return console.log('Confirm'); },
+        onExtraAction: undefined,
     },
 };
 export var ModalWithoutCloseButton = {