@mailstep/design-system 0.8.24 → 0.8.26-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.24",
+  "version": "0.8.26-alpha.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -16,7 +16,6 @@ var __assign = (this && this.__assign) || function () {
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../../Elements/Button/Button';
 import DropdownSelect from '../../../../Elements/DropdownSelect';
-import { ExtraControlButtonPosition } from '../../types';
 import ButtonMore from '../ButtonMore/ButtonMore';
 import styled, { x } from '@xstyled/styled-components';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
@@ -35,12 +34,14 @@ var ControlButton = function (_a) {
     }
 };
 var ExtraControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, isMobile = _a.isMobile, _b = _a.targetPosition, targetPosition = _b === void 0 ? ExtraControlButtonPosition.TopRight : _b;
-    var buttons = (extraControlButtons || []).filter(function (_a) {
-        var position = _a.position, hide = _a.hide;
-        return position === targetPosition && !hide;
-    });
-    if (isMobile && buttons.length > 0) {
+    var extraControlButtons = _a.extraControlButtons, isMobile = _a.isMobile, targetPosition = _a.targetPosition;
+    var buttons = targetPosition
+        ? (extraControlButtons || []).filter(function (_a) {
+            var position = _a.position, hide = _a.hide;
+            return position === targetPosition && !hide;
+        })
+        : extraControlButtons !== null && extraControlButtons !== void 0 ? extraControlButtons : [];
+    if (isMobile && (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0) {
         var items = buttons.flatMap(function (_a) {
             var onSelect = _a.onSelect, onClick = _a.onClick, options = _a.options, label = _a.label;
             if (options && onSelect) {
@@ -60,7 +61,7 @@ var ExtraControlButtons = function (_a) {
             return null;
         return _jsx(ButtonMore, { items: items });
     }
-    return (_jsx(Row, { children: buttons.map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
+    return (_jsx(Row, { children: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
 };
 export default ExtraControlButtons;
 var templateObject_1;

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -2,8 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
 import DropdownMenu from '../../Elements/DropdownMenu';
 import Icon from '../../Elements/Icon/Icon';
-import Popover from '../Popover';
-import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap } from './styles';
+import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap, DropdownMenuWrapper } from './styles';
 var placementMap = {
     left: 'bottom-start',
     right: 'bottom-end'
@@ -35,6 +34,6 @@ var LanguageSwitch = function (_a) {
     }, [filteredLanguages, languageToggle]);
     if (!activeLanguageObj || !languageItems)
         return null;
-    return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(Popover, { parentRef: flagWrapRef, onClose: onClose, placement: placementMap[placement], children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
+    return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(DropdownMenuWrapper, { children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
 };
 export default LanguageSwitch;

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

@@ -4,3 +4,4 @@ export declare const LanguageFlagWrap: import('styled-components').StyledCompone
     backgroundColor?: string | undefined;
     withTitle?: boolean | undefined;
 }, never>;
+export declare const DropdownMenuWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -12,4 +12,5 @@ export var LanguageFlagWrap = styled.div(templateObject_3 || (templateObject_3 =
     var backgroundColor = _a.backgroundColor;
     return backgroundColor || 'white';
 });
-var templateObject_1, templateObject_2, templateObject_3;
+export var DropdownMenuWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  right: 0;\n\n"], ["\n  position: absolute;\n  top: 100%;\n  right: 0;\n\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;