@mailstep/design-system 0.5.0-beta.47 → 0.5.0-beta.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.5.0-beta.47",
+  "version": "0.5.0-beta.49",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -16,10 +16,7 @@
     "build-storybook": "storybook build",
     "deploy": "npm run build && npm publish ./build",
     "dev": "yarn storybook",
-    "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
-    "locale-clean": "lingui extract --clean",
-    "locale-extract": "lingui extract",
-    "locale-compile": "lingui compile --typescript"
+    "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\""
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -35,7 +32,6 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lingui/react": "3.17.2",
     "@lingui/core": "3.17.2",
-    "@lingui/cli": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@storybook/addon-controls": "7.6.8",
     "@storybook/addon-essentials": "7.6.8",
@@ -103,7 +99,6 @@
     "@fortawesome/pro-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lingui/react": "3.17.2",
-    "@lingui/cli": "3.17.2",
     "@lingui/core": "3.17.2",
     "@popperjs/core": "^2.11.8",
     "@xstyled/styled-components": "^3.8.0",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -31,7 +31,6 @@ import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer,
 import { H6 } from '../../Elements/Typography';
 import HidePrint from '../HidePrint/HidePrint';
 import ControlButtons from './components/ControlButtons';
-import { Rows } from '../../Elements/Icon/icons/Rows';
 import { x } from '@xstyled/styled-components';
 import ActionHead from './components/ActionHead';
 import { Pagination } from '../../Elements/Pagination';
@@ -39,6 +38,7 @@ import TablePagination from './components/TablePagination';
 import Modal from '../Modal';
 import ManageColumnForm from './components/ManageColumnForm';
 import { Trans } from '@lingui/react';
+import { Settings2 } from '../../Elements/Icon/icons/Settings2';
 var StyledCommonGrid = function (props) {
     var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
@@ -61,6 +61,6 @@ var StyledCommonGrid = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", sizing: "iconLg", appearance: "ghost", icon: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
 };
 export default StyledCommonGrid;

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

@@ -1,6 +1,4 @@
 import { ExtraControlButton } from './types';
-import { Option, ValueType } from '../../Elements/Select/types';
 export declare const getCreateButton: (onCreate: () => void, canCreate: boolean, disabled?: boolean) => ExtraControlButton;
 export declare const getImportButton: (onImport: () => void, canImport: boolean, disabled?: boolean) => ExtraControlButton;
 export declare const getMoreButton: (onExport: () => void, onImport?: () => void, canImport?: boolean) => ExtraControlButton;
-export declare const getEshopSelect: (eshopOptions: Option[], selectedEshop: string, onChange: (eshopOption: ValueType) => void, isClearable?: boolean) => ExtraControlButton[];

package/ui/Blocks/CommonGrid/StandardButtons.js

@@ -1,9 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Trans } from '@lingui/react';
-import { x } from '@xstyled/styled-components';
-import Select from '../../Elements/Select';
 import ButtonMore from './components/ButtonMore/ButtonMore';
-import { i18n } from '@lingui/core';
 export var getCreateButton = function (onCreate, canCreate, disabled) { return ({
     label: _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }),
     style: 'primary',
@@ -37,14 +34,3 @@ export var getMoreButton = function (onExport, onImport, canImport) {
         node: _jsx(ButtonMore, { items: items }),
     };
 };
-export var getEshopSelect = function (eshopOptions, selectedEshop, onChange, isClearable) {
-    if (isClearable === void 0) { isClearable = true; }
-    var eshops = [];
-    if (eshopOptions.length > 1) {
-        eshops.push({
-            position: 'top-right',
-            node: (_jsx(x.div, { w: "200px", "data-cy": "eshopSelect", children: _jsx(Select, { name: "eshop", options: eshopOptions, value: selectedEshop, onChange: onChange, isSearchable: false, isClearable: isClearable, disabled: !eshopOptions.length, placeholder: i18n._({ id: 'products.eshopFilterPlaceholder', message: 'Select eshop...' }) }) })),
-        });
-    }
-    return eshops;
-};

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -8,7 +8,7 @@ import { Trans } from '@lingui/react';
 import ExtraControlButtons from '../ExtraControlButtons';
 import { ExtraControlButtonPosition } from '../../types';
 import Button from '../../../../Elements/Button/Button';
-export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"])));
 var ControlButtons = function (_a) {
     var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;
     var resetFilters = gridActions.resetFilters;

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

@@ -2,12 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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: [withRouter, withRedux],
+    decorators: [withTheme, withRouter, withRedux],
 };
 export var Default = function () {
     return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridActions: gridDummyActions, gridSelectors: gridSelectors }) }));

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

@@ -2,12 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ReduxGrid, createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
 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: [withRouter, withRedux],
+    decorators: [withTheme, withRouter, withRedux],
 };
 export var Styled = function () {
     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/utils/withTheme.d.ts

@@ -0,0 +1,2 @@
+declare const withProvider: (story: Function) => JSX.Element;
+export default withProvider;

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

@@ -0,0 +1,2 @@
+var withProvider = function (story) { return story(); };
+export default withProvider;

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

@@ -1,6 +1,6 @@
 /// <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> & {
-    isAbsolute?: boolean | undefined;
+    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">;

package/ui/Blocks/CommonGrid/styles.js

@@ -6,17 +6,17 @@ 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  margin-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  margin-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 isAbsolute = _a.isAbsolute;
-    return (isAbsolute ? 'absolute' : 'relative');
+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 isAbsolute = _a.isAbsolute, theme = _a.theme;
-    return (isAbsolute ? theme.colors.bgLightGray : 'transparent');
+    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  flex-grow: 1;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  justify-content: space-between;\n  background-color: white;\n  box-shadow: gridShadow;\n  border-radius: 8px;\n"])));
+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  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  border-bottom: 0.5px solid ", ";\n"])), th('colors.lightGray6'));
-export var StyledColumnButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\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  > span > H6 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    > span > H6 {\n      display: flex;\n      margin-left: 5px;\n    }\n  }\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;

package/ui/Blocks/CommonGrid/translations.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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 columns" }), _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." }), ","] }));
+    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/Elements/DatePicker/DatePicker.js

@@ -34,7 +34,7 @@ import { x } from '@xstyled/styled-components';
 import { DatePickerBase } from './styles';
 import SpaceAroundWrap from '../SpaceAround';
 import Input from '../../Forms/Input';
-import { LanguageContext } from '../../Providers/LanguageProvider';
+import { LanguageContext } from '../../ThemeProvider/ThemeProvider';
 var defaultDateFormat = 'DD.MM.YYYY';
 var DatePicker = function (_a) {
     var name = _a.name, value = _a.value, initialViewDate = _a.initialViewDate, error = _a.error, label = _a.label, disabled = _a.disabled, isValidDate = _a.isValidDate, onChange = _a.onChange, _b = _a.dateFormat, dateFormat = _b === void 0 ? defaultDateFormat : _b, _c = _a.timeFormat, timeFormat = _c === void 0 ? false : _c, open = _a.open, _d = _a.secondValue, secondValue = _d === void 0 ? null : _d, input = _a.input, _e = _a.icon, icon = _e === void 0 ? true : _e, _f = _a.showInputLabel, showInputLabel = _f === void 0 ? false : _f, _g = _a.showCalendarLabel, showCalendarLabel = _g === void 0 ? true : _g, _h = _a.spaceAround, spaceAround = _h === void 0 ? false : _h, className = _a.className, onClear = _a.onClear, passProps = __rest(_a, ["name", "value", "initialViewDate", "error", "label", "disabled", "isValidDate", "onChange", "dateFormat", "timeFormat", "open", "secondValue", "input", "icon", "showInputLabel", "showCalendarLabel", "spaceAround", "className", "onClear"]);

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from '@xstyled/styled-components';
-var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    font-weight: bold;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    font-weight: bold;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
+var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
     return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
 });
 var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));

package/ui/Elements/Select/themes/CustomComponents.d.ts

@@ -3,7 +3,6 @@ export declare const SimplifiedOption: React.MemoExoticComponent<(props: any) =>
 export declare const IconValueContainer: (props: any) => any;
 export declare const CountMultiValue: (props: any) => any;
 export declare const ChevronOption: (props: any) => any;
-export declare const HighlightOption: (props: any) => any;
 export declare const ConnectedMenu: (props: any) => any;
 export declare const CustomInput: (props: any) => any;
 export declare const DropdownIndicator: (props: any) => any;

package/ui/Elements/Select/themes/CustomComponents.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, memo, useState, useEffect, useRef } from 'react';
 import { components } from 'react-select';
-import styled from '@xstyled/styled-components';
+import styled, { th } from '@xstyled/styled-components';
 import { components as selectComponents } from 'react-select';
 import { Trans } from '@lingui/react';
 import Icon from '../../Icon/Icon';
@@ -66,33 +66,27 @@ export var CountMultiValue = function (props) {
 };
 // Option with chevron form new design
 var ChevronDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
-var SelectedIndicator = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: auto;\n  padding-left: 8px;\n"], ["\n  margin-left: auto;\n  padding-left: 8px;\n"])));
+var SelectedIndicator = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 12px;\n"], ["\n  padding-right: 12px;\n"])));
 export var ChevronOption = function (props) {
     var theme = props.theme, isSelected = props.isSelected, selectOption = props.selectOption, children = props.children, data = props.data;
-    var showCheckbox = theme.optionVariant == 'checkbox';
-    var showToggle = theme.optionVariant == 'toggle';
-    return (_jsxs(selectComponents.Option, __assign({}, props, { children: [_jsx("span", { className: "label", "data-cy": "dropdownModalOption".concat(data.index), children: children }), (showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", onChange: selectOption, checked: isSelected, spaceAround: false, variant: 'grid' })] }))] })));
-};
-// Option with background highlight
-var OptionInnerWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin: 4px;\n  & > div {\n    margin-right: 2;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin: 4px;\n  & > div {\n    margin-right: 2;\n  }\n"])));
-export var HighlightOption = function (props) {
-    var children = props.children, data = props.data;
-    return (_jsx(selectComponents.Option, __assign({}, props, { children: _jsx(OptionInnerWrap, { className: "optionInner", "data-cy": "dropdownModalOption".concat(data.index), children: _jsx("span", { className: "label", children: children }) }) })));
+    var showCheckbox = !!(theme.optionVariant == 'checkbox');
+    var showToggle = !!(theme.optionVariant == 'toggle');
+    return (_jsxs(selectComponents.Option, __assign({}, props, { children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", onChange: selectOption, checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx("span", { className: "label", "data-cy": "dropdownModalOption".concat(data.index), children: children })] })));
 };
 // menu with check all and reset config button
-var SelectAll = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 8px 0 8px;\n  padding: ", ";\n  font-weight: ", ";\n  color: blue2;\n  :hover {\n    font-weight: 700;\n    cursor: pointer;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n"], ["\n  display: flex;\n  margin: 4px 8px 0 8px;\n  padding: ", ";\n  font-weight: ", ";\n  color: blue2;\n  :hover {\n    font-weight: 700;\n    cursor: pointer;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n"])), function (_a) {
+var SelectAll = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"], ["\n  display: flex;\n  margin: 4px 18px -10px 8px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: blue2;\n  border-radius: 6px;\n  height: 36px;\n  :hover {\n    cursor: pointer;\n    background-color: bgLightGray1;\n  }\n"])), function (_a) {
     var additionalPadding = _a.additionalPadding;
     return (additionalPadding ? '8px 27px 8px 10px' : '8px 10px');
 }, function (_a) {
     var isSelected = _a.isSelected;
-    return (isSelected ? 'bold' : 'normal');
+    return (isSelected ? th.color('red20') : 'transparent');
 });
-var ConfigWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"], ["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"])));
+var ConfigWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"], ["\n  text-align: center;\n  cursor: pointer;\n  color: red1;\n  text-decoration: underline;\n  margin: 0 30px 0 20px;\n  padding-bottom: 7px;\n  :first-letter {\n    text-transform: capitalize;\n  }\n  :hover {\n    color: red3;\n  }\n"])));
 export var ConnectedMenu = function (props) {
     var theme = props.theme;
     var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, options = _a.options, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight;
-    var showCheckbox = theme.optionVariant === 'checkbox';
-    var showToggle = theme.optionVariant === 'toggle';
+    var showCheckbox = !!(theme.optionVariant === 'checkbox');
+    var showToggle = !!(theme.optionVariant === 'toggle');
     var _b = useState(false), isSelected = _b[0], setIsSelected = _b[1];
     var _c = useState(false), additionalPadding = _c[0], setAdditionalPadding = _c[1];
     var ref = useRef(null);
@@ -117,7 +111,7 @@ export var ConnectedMenu = function (props) {
             onCustomDeselectAll();
         }
     }, [isSelected, onCustomDeselectAll, onCustomSelectAll]);
-    return (_jsxs(selectComponents.Menu, __assign({}, props, { children: [selectAllButton && (_jsxs(SelectAll, { isSelected: isSelected, onClick: selectAll, ref: ref, additionalPadding: additionalPadding, children: [_jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' }), (showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] }))] })), props.children, resetGridButton && (_jsx(ConfigWrap, { onClick: resetGrid, children: _jsx(Paragraph3, { variant: "semiBold", children: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }) }) }))] })));
+    return (_jsxs(selectComponents.Menu, __assign({}, props, { children: [selectAllButton && (_jsxs(SelectAll, { isSelected: isSelected, onClick: selectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' })] })), props.children, resetGridButton && (_jsx(ConfigWrap, { onClick: resetGrid, children: _jsx(Paragraph3, { variant: "semiBold", children: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }) }) }))] })));
 };
 export var CustomInput = function (props) {
     var name = props.selectProps.name;
@@ -128,4 +122,4 @@ export var DropdownIndicator = function (props) {
     var _a = props.selectProps, menuIsOpen = _a.menuIsOpen, name = _a.name;
     return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name, "ChevronBtn"), children: _jsx(Icon, { icon: menuIsOpen ? 'goUp' : 'goDown', size: '100%' }) }) })));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/ui/Elements/Select/themes/baseStyles.js

@@ -67,4 +67,21 @@ export var baseStylesConfig = {
         var theme = _a.theme;
         return (__assign(__assign({}, styles), { color: theme.colors.optionTextColor }));
     },
+    menuList: function (styles, _a) {
+        var theme = _a.theme;
+        return __assign(__assign({}, styles), { margin: '8px 4px 8px 8px', '::-webkit-scrollbar-thumb': {
+                border: 'none',
+                borderRadius: '4px',
+                height: '47px',
+                backgroundColor: theme.colors.scrollbarThumbColor,
+                '&:hover': {
+                    backgroundColor: theme.colors.dropdownIndicatorColor,
+                },
+            }, '::-webkit-scrollbar': {
+                width: '10px',
+            }, '::-webkit-scrollbar-track': {
+                backgroundColor: theme.colors.scrollbarTrackColor,
+                borderRadius: '6px',
+            } });
+    },
 };

package/ui/Elements/Select/themes/formStyles.d.ts

@@ -2,8 +2,9 @@ import { SelectProps } from '../types';
 import { BaseStylesTheme, BaseState, StylesConfig } from './baseStyles';
 type CustomTheme = Omit<BaseStylesTheme, 'colors'> & {
     colors: Omit<BaseStylesTheme['colors'], 'primary50' | 'primary25'> & {
-        optionHighligh: string;
+        activeOptionBackground: string;
         valueTextColor: string;
+        inputTextColor: string;
         inputBorderHoverColor: string;
         menuHoverBackgroundColor: string;
         dropdownIndicatorColor: string;

package/ui/Elements/Select/themes/formStyles.js

@@ -40,32 +40,30 @@ export var CustomStyles = __assign(__assign({}, baseStylesConfig), { control: fu
         var base = (_a = baseStylesConfig.placeholder) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
         return __assign(__assign({}, base), { fontSize: '14px', fontWeight: theme.textWeightSemiBold });
     }, option: function (styles, _a) {
-        var isSelected = _a.isSelected, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
+        var isSelected = _a.isSelected, theme = _a.theme, isDisabled = _a.isDisabled, selectProps = _a.selectProps;
         var defaultColor = theme.colors.optionTextColor;
         var disabledColor = theme.colors.placeholderTextColor;
         return {
-            color: isDisabled ? disabledColor : defaultColor,
-            fontWeight: !isDisabled && (isSelected || isFocused) ? theme.textWeightBold : theme.textWeightRegular,
+            color: isSelected ? theme.colors.primary : defaultColor,
+            backgroundColor: isSelected ? theme.colors.activeOptionBackground : undefined,
+            fontWeight: 400,
             fontSize: '14px',
             cursor: !isDisabled ? 'pointer' : 'default',
             display: 'flex',
             flexDirection: 'row',
-            alignContent: 'center',
-            padding: '8px 10px',
-            marginLeft: '8px',
-            marginRight: '8px',
-            borderRadius: '6px',
+            alignItems: 'center',
+            padding: '7px 10px',
+            height: '36px',
+            marginRight: '4px',
+            marginBottom: '2px',
+            lineHeight: '22px',
+            borderRadius: th.radius('ml')({ theme: selectProps === null || selectProps === void 0 ? void 0 : selectProps.systemTheme }),
             '&:hover': { backgroundColor: !isDisabled ? theme.colors.menuHoverBackgroundColor : undefined },
-            '.chevron': {
-                display: isFocused ? 'block' : 'none',
-                paddingRight: '8px',
-                color: theme.colors.primary,
-            },
         };
     }, menu: function (styles, state) {
         var _a;
         var base = (_a = baseStylesConfig.menu) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
-        return __assign(__assign({}, base), { boxShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)', marginTop: '-0', paddingTop: '0', zIndex: 3 });
+        return __assign(__assign({}, base), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '-0', paddingTop: '0', borderRadius: '10px', zIndex: 3 });
     }, dropdownIndicator: function (styles, state) {
         var _a;
         var base = (_a = baseStylesConfig.dropdownIndicator) === null || _a === void 0 ? void 0 : _a.call(baseStylesConfig, styles, state);
@@ -93,7 +91,7 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
         inputBackgroundColor: "white",
         inputBorderColor: th.color('lightGray3')({ theme: theme }),
         inputBorderHoverColor: th.color('gray5')({ theme: theme }),
-        optionHighligh: th.color('white')({ theme: theme }),
+        activeOptionBackground: th.color('red20')({ theme: theme }),
         menuBackgroundColor: th.color('white')({ theme: theme }),
         menuHoverBackgroundColor: th.color('bgLightGray1')({ theme: theme }),
         dropdownIndicatorColor: th.color('gray1')({ theme: theme }),

package/ui/Elements/Select/themes/index.js

@@ -1,7 +1,5 @@
-import { SimplifiedOption, IconValueContainer, CountMultiValue, ChevronOption, HighlightOption, DropdownIndicator, CustomInput, ConnectedMenu, } from './CustomComponents';
+import { SimplifiedOption, IconValueContainer, CountMultiValue, ChevronOption, DropdownIndicator, CustomInput, ConnectedMenu, } from './CustomComponents';
 import { getCustomTheme as getFormCustomTheme, CustomStyles as FormCustomStyles } from './formStyles';
-import { getCustomTheme as getLeftMenuCustomTheme, CustomStyles as LeftMenuCustomStyles } from './leftMenuStyles';
-import { getCustomTheme as getHeadingCustomTheme, CustomStyles as HeadingCustomStyles } from './headingStyles';
 import { useTheme } from '@xstyled/styled-components';
 import { useMemo } from 'react';
 export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {
@@ -23,27 +21,11 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
         if (showResetGridButton || showSelectAllButton) {
             components.Menu = ConnectedMenu;
         }
-        var themes;
-        var styles;
         components.Input = CustomInput;
-        if (style == 'leftMenu') {
-            themes = getLeftMenuCustomTheme(systemTheme);
-            styles = LeftMenuCustomStyles;
-            components.Option = HighlightOption;
-        }
-        else if (style == 'heading') {
-            themes = getHeadingCustomTheme(systemTheme);
-            styles = HeadingCustomStyles;
-            components.DropdownIndicator = DropdownIndicator;
-            components.Option = HighlightOption;
-        }
-        else {
-            // (style == 'form' || style == 'gridFilter')
-            themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
-            styles = FormCustomStyles;
-            components.Option = ChevronOption;
-            components.DropdownIndicator = DropdownIndicator;
-        }
+        var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
+        var styles = FormCustomStyles;
+        components.Option = ChevronOption;
+        components.DropdownIndicator = DropdownIndicator;
         // performance reasons
         if (useSimplifiedOptions)
             components.Option = SimplifiedOption;

package/ui/Elements/Select/types.d.ts

@@ -40,7 +40,7 @@ export type SelectProps = {
     menuIsOpen?: boolean;
     defaultMenuIsOpen?: boolean;
     isDarkPlaceholderText?: boolean;
-    style?: 'form' | 'leftMenu' | 'heading' | 'gridFilter';
+    style?: 'form' | 'gridFilter';
     optionVariant?: 'default' | 'checkbox' | 'toggle';
     multiLabelVariant?: 'default' | 'count';
     containerVariant?: 'default' | 'search';

package/ui/ThemeProvider/ThemeProvider.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
 import { Props } from './types';
-declare const MailstepThemeProvider: ({ children, theme, preflight }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LanguageContext: import("react").Context<string>;
+declare const MailstepThemeProvider: ({ children, theme, preflight, language }: Props) => import("react/jsx-runtime").JSX.Element;
 export default MailstepThemeProvider;

package/ui/ThemeProvider/ThemeProvider.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ThemeProvider, Preflight } from '@xstyled/styled-components';
 import themes from './themes';
+import { createContext } from 'react';
+export var LanguageContext = createContext('en');
 var MailstepThemeProvider = function (_a) {
-    var children = _a.children, _b = _a.theme, theme = _b === void 0 ? 'default' : _b, _c = _a.preflight, preflight = _c === void 0 ? true : _c;
-    return (_jsxs(ThemeProvider, { theme: themes[theme], children: [preflight && _jsx(Preflight, {}), children] }));
+    var children = _a.children, _b = _a.theme, theme = _b === void 0 ? 'default' : _b, _c = _a.preflight, preflight = _c === void 0 ? true : _c, _d = _a.language, language = _d === void 0 ? 'en' : _d;
+    return (_jsx(LanguageContext.Provider, { value: language, children: _jsxs(ThemeProvider, { theme: themes[theme], children: [preflight && _jsx(Preflight, {}), children] }) }));
 };
 export default MailstepThemeProvider;

package/ui/index.d.ts

@@ -41,8 +41,7 @@ import MultiSelect from './Elements/MultiSelect';
 import Select from './Elements/Select';
 import DropdownSelect from './Elements/DropdownSelect';
 import TextArea from './Forms/TextArea';
-import LanguageProvider from './Providers/LanguageProvider';
-export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, LanguageProvider, utils, TextArea, };
+export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';
 export * from './Blocks/LightBox';
@@ -86,4 +85,3 @@ export * from './Elements/MultiSelect';
 export * from './Elements/Select';
 export * from './Elements/DropdownSelect';
 export * from './Forms/TextArea';
-export * from './Providers/LanguageProvider';