@mailstep/design-system 0.6.41 → 0.6.43

package/package.json

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

package/ui/Blocks/CommonGrid/components/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Item } from '../../types';
+import { AppearanceValue } from '../../../../Elements/Button/types';
+type Props = {
+    label: string | JSX.Element;
+    items: Item[];
+    appearance?: AppearanceValue;
+};
+declare const DropdownButton: ({ label, items, appearance }: Props) => JSX.Element;
+export default DropdownButton;

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

@@ -0,0 +1,32 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import React, { useCallback, useState } from 'react';
+import Button from '../../../../Elements/Button/Button';
+import { useClickOutside } from '../../../Modal/hooks/useClickOutside';
+import DropdownMenu from '../../../../Elements/DropdownMenu';
+import { ArrowDown, ArrowUp } from '../../../../Elements/Icon';
+import { th } from '@xstyled/system';
+var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: fit-content;\n"], ["\n  position: relative;\n  width: fit-content;\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"], ["\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  width: max-content;\n  z-index: 2;\n"])));
+var StyledButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: 0;\n"], ["\n  padding-right: 0;\n"])));
+var StyledIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  margin: 9px;\n  & > svg {\n    stroke: ", ";\n  }\n"], ["\n  width: 20px;\n  height: 20px;\n  margin: 9px;\n  & > svg {\n    stroke: ", ";\n  }\n"])), function (_a) {
+    var appearance = _a.appearance;
+    return appearance === 'secondary' ? th.color('blue2') : appearance === 'tertiary' ? th.color('red1') : 'white';
+});
+var Separator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 38px;\n  width: 1px;\n  background-color: white;\n  margin-left: 18px;\n"], ["\n  height: 38px;\n  width: 1px;\n  background-color: white;\n  margin-left: 18px;\n"])));
+var DropdownButton = function (_a) {
+    var label = _a.label, items = _a.items, appearance = _a.appearance;
+    var _b = useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
+    var handleClick = React.useCallback(function () {
+        setShowDropdownMenu(function (prev) { return !prev; });
+    }, []);
+    var ref = useClickOutside({ onClose: onClose });
+    return (_jsxs(ButtonWrapper, { ref: ref, children: [_jsxs(StyledButton, { onClick: handleClick, appearance: appearance, children: [label, _jsx(Separator, {}), _jsx(StyledIcon, { appearance: appearance, children: showDropdownMenu ? _jsx(ArrowUp, {}) : _jsx(ArrowDown, {}) })] }), _jsx(StyledDropdownMenu, { showMenu: showDropdownMenu, items: items })] }));
+};
+export default DropdownButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,2 @@
+import DropdownButton from './DropdownButton';
+export default DropdownButton;

package/ui/Blocks/CommonGrid/components/DropdownButton/index.js

@@ -0,0 +1,2 @@
+import DropdownButton from './DropdownButton';
+export default DropdownButton;

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

@@ -20,14 +20,17 @@ import DropdownSelect from '../../../../Elements/DropdownSelect';
 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"])));
 var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
 var ControlButton = function (_a) {
-    var node = _a.node, label = _a.label, appearance = _a.appearance, variant = _a.variant, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron;
+    var hide = _a.hide, node = _a.node, label = _a.label, appearance = _a.appearance, variant = _a.variant, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron, iconLeft = _a.iconLeft;
+    if (hide) {
+        return null;
+    }
     if (node)
         return _jsx(_Fragment, { children: node });
     if (options) {
         return (_jsx(DropdownSelect, { label: label || '', appearance: appearance || 'secondary', variant: variant || 'default', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
     }
     else {
-        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, variant: variant || 'default', appearance: appearance || 'secondary', children: label }));
+        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, variant: variant || 'default', appearance: appearance || 'primary', iconLeft: iconLeft, children: label }));
     }
 };
 var ExtraControlButtons = function (_a) {

package/ui/Blocks/CommonGrid/components/FloatingButton/FloatingButton.d.ts

@@ -3,5 +3,5 @@ export declare const StyledButton: import("styled-components").StyledComponent<"
 export declare const StyledCross: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isOpen: boolean;
 }, never>;
-declare const FloatingButton: ({ options, onSelect, onClick }: FloatingButtonProps) => JSX.Element | null;
+declare const FloatingButton: ({ options, onClick }: FloatingButtonProps) => JSX.Element | null;
 export default FloatingButton;

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

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import styled from '@xstyled/styled-components';
 import DropdownMenu from '../../../../Elements/DropdownMenu';
 import Popover from '../../../Popover';
@@ -18,7 +18,7 @@ export var StyledCross = styled.div(templateObject_4 || (templateObject_4 = __ma
     return (isOpen ? 'rotate(45deg) translate(-1px, -1px)' : 'rotate(90deg) translate(-2px, 0)');
 });
 var FloatingButton = function (_a) {
-    var options = _a.options, onSelect = _a.onSelect, onClick = _a.onClick;
+    var options = _a.options, onClick = _a.onClick;
     var _b = useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
     var ref = useRef(null);
     var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
@@ -28,19 +28,7 @@ var FloatingButton = function (_a) {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [onClick, options]);
-    var handleSelectItem = useCallback(function (item) {
-        setShowDropdownMenu(false);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
-    }, [onSelect]);
-    var items = useMemo(function () {
-        return options === null || options === void 0 ? void 0 : options.map(function (item) { return ({
-            title: item.label,
-            onClick: function () { return handleSelectItem(item); },
-            link: '#',
-            name: item.name,
-        }); });
-    }, [handleSelectItem, options]);
-    return (_jsx(FloatingWrapper, { children: _jsxs(StyledButton, { ref: ref, onClick: handleOnClick, children: [_jsxs(StyledCross, { isOpen: showDropdownMenu, children: [_jsx("span", { className: "line" }), _jsx("span", { className: "line" })] }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "top-end", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items }) }))] }) }));
+    return (_jsx(FloatingWrapper, { children: _jsxs(StyledButton, { ref: ref, onClick: handleOnClick, children: [_jsxs(StyledCross, { isOpen: showDropdownMenu, children: [_jsx("span", { className: "line" }), _jsx("span", { className: "line" })] }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "top-end", children: _jsx(StyledDropdownMenu, { showMenu: true, items: options }) }))] }) }));
 };
 export default FloatingButton;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/CommonGrid/hooks/useFloatingButton.d.ts

@@ -1,3 +1,3 @@
 import { FloatingButtonProps, Item } from '../types';
-declare const useFloatingButton: (hasPermission: any, onClick?: () => void, options?: Item[], onSelect?: ((value: string) => void) | undefined) => FloatingButtonProps | undefined;
+declare const useFloatingButton: (hasPermission: any, onClick?: () => void, options?: Item[]) => FloatingButtonProps | undefined;
 export default useFloatingButton;

package/ui/Blocks/CommonGrid/hooks/useFloatingButton.js

@@ -1,13 +1,12 @@
 import { useMemo } from 'react';
-var useFloatingButton = function (hasPermission, onClick, options, onSelect) {
+var useFloatingButton = function (hasPermission, onClick, options) {
     return useMemo(function () {
         if (!hasPermission)
             return;
         return {
             onClick: onClick,
             options: options,
-            onSelect: onSelect,
         };
-    }, [hasPermission, onClick, options, onSelect]);
+    }, [hasPermission, onClick, options]);
 };
 export default useFloatingButton;

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

@@ -287,6 +287,7 @@ export type ExtraControlButton = {
     hide?: boolean;
     hideChevron?: boolean;
     disabled?: boolean;
+    iconLeft?: string | JSX.Element;
 };
 export type Group = {
     name?: string;
@@ -304,13 +305,11 @@ export type GridProps = Omit<CommonGridProps, 'filters'> & {
 };
 export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'minColumnWidth' | 'columnLayout'>;
 export type Item = {
-    label: string | JSX.Element;
-    value: string;
-    name: string;
+    title: string | JSX.Element;
+    onClick: () => void;
 };
 export type FloatingButtonProps = {
     options?: Item[];
-    onSelect?: (value: Item['value']) => void;
-    onClick?: () => void;
+    onClick?: (value?: string) => void;
 };
 export {};