@mailstep/design-system 0.7.58-beta.0 → 0.7.59-beta.0

package/package.json

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

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import { ColumnTitleComponentType } from '../../types';
-type Props = React.ComponentProps<ColumnTitleComponentType>;
-declare const ColumnTitle: ({ title, isSortable, onSetSort, sortValue }: Props) => JSX.Element | null;
+declare const ColumnTitle: React.FC<ColumnTitleComponentType>;
 export default ColumnTitle;

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

@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useEffect } from 'react';
-import styled, { x, css } from '@xstyled/styled-components';
 import Icon from '../../../../Elements/Icon/Icon';
+import styled, { x, css } from '@xstyled/styled-components';
 // ArrowWrap and WarningWrap need to have the same size to solve resizing issues
 var WRAPPER_WIDTH = 35;
 var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  font-size: 0.8rem;\n"], ["\n  width: 100%;\n  font-size: 0.8rem;\n"])));
@@ -31,8 +31,8 @@ var ColumnTitle = function (_a) {
     var onSetAsc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('asc'); }, [onSetSort]);
     var onSetDesc = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort('desc'); }, [onSetSort]);
     var onSetNull = useCallback(function () { return onSetSort === null || onSetSort === void 0 ? void 0 : onSetSort(null); }, [onSetSort]);
-    var isAsc = sortValue == 'asc';
-    var isDesc = sortValue == 'desc';
+    var isAsc = sortValue === 'asc';
+    var isDesc = sortValue === 'desc';
     var wrapRef = useRef(null);
     var contentRef = useRef(null);
     useEffect(function () {

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

@@ -1,9 +1,4 @@
 import React from 'react';
-import { SortingValueType } from '../types';
-declare const _default: React.NamedExoticComponent<{
-    title?: string | JSX.Element | undefined;
-    isSortable: boolean;
-    onSetSort?: ((value: SortingValueType) => void) | undefined;
-    sortValue: SortingValueType;
-}>;
+import type { ColumnTitleComponentType } from '../types';
+declare const _default: React.NamedExoticComponent<ColumnTitleComponentType>;
 export default _default;

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

@@ -4,17 +4,26 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import styled from '@xstyled/styled-components';
 import { SortingUp, SortingDown } from './icons/Sorting';
+import styled from '@xstyled/styled-components';
 var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & + * {\n    margin-left: 1em;\n  }\n"], ["\n  & + * {\n    margin-left: 1em;\n  }\n"])));
 var ColumnTitle = function (_a) {
     var title = _a.title, isSortable = _a.isSortable, onSetSort = _a.onSetSort, sortValue = _a.sortValue;
-    var handleClick = React.useCallback(function () {
-        var newValue = sortValue ? (sortValue == 'asc' ? 'desc' : null) : 'asc';
-        if (onSetSort)
-            onSetSort(newValue);
-    }, [sortValue, onSetSort]);
-    return (_jsxs("div", { onClick: isSortable ? handleClick : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16" }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16" })] }));
+    var _b = React.useState(0), mouseDownTimestamp = _b[0], setMouseDownTimestamp = _b[1];
+    var handleMouseDown = React.useCallback(function () {
+        setMouseDownTimestamp(Date.now());
+    }, []);
+    var handleMouseUp = React.useCallback(function () {
+        var now = Date.now();
+        var duration = now - mouseDownTimestamp;
+        if (duration < 200) {
+            var newValue = sortValue ? (sortValue === 'asc' ? 'desc' : null) : 'asc';
+            if (onSetSort)
+                onSetSort(newValue);
+        }
+        setMouseDownTimestamp(0);
+    }, [mouseDownTimestamp, onSetSort, sortValue]);
+    return (_jsxs("div", { onMouseDown: isSortable ? handleMouseDown : undefined, onMouseUp: isSortable ? handleMouseUp : undefined, className: isSortable ? 'sortable' : '', children: [_jsx(Title, { children: title }), isSortable && sortValue === 'asc' && _jsx(SortingUp, { width: "16" }), isSortable && sortValue === 'desc' && _jsx(SortingDown, { width: "16" })] }));
 };
 export default React.memo(ColumnTitle);
 var templateObject_1;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ReduxGrid, createRandomData } from '../utils/utils';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
 import { onRowEditClick, onRowReadClick, onRowAction } from '../utils/actions';
 import { columnDefinitions } from '../utils/columnDefinition';
+import { ReduxGrid, createRandomData } from '../utils/utils';
 import withRedux from '../utils/withRedux';
-import { LinguiContainer } from '../../../../utils/LinguiContainer';
 export var ActionColumnCheckboxes = {
     flexBasis: 160,
     forceCheckboxes: true

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

@@ -43,19 +43,19 @@ export type FilterComponentProps<VT> = {
     value: VT | null;
     OverlayComponent?: React.FunctionComponent;
 } & Record<string, any>;
-export type ColumnTitleComponentType = React.ComponentType<{
+export type ColumnTitleComponentType = {
     title?: string | JSX.Element;
     isSortable: boolean;
     onSetSort?: (value: SortingValueType) => void;
     sortValue: SortingValueType;
-}>;
+};
 export type ComponentsProps = {
     Translator: React.ComponentType<any>;
     Checkbox: React.ComponentType<CheckboxPublicInterfaceProps>;
     Button: React.ComponentType<ButtonPublicInterfaceProps>;
     Switch: React.ComponentType<SwitchPublicInterfaceProps>;
     Paginator: React.ComponentType<PaginatorProps>;
-    ColumnTitle?: ColumnTitleComponentType;
+    ColumnTitle?: React.ComponentType<ColumnTitleComponentType>;
 };
 export type CustomComparators = {
     [name: string]: Comparator[];

package/ui/Blocks/Tabs/TabContent.d.ts

@@ -1,3 +1,3 @@
-import { TabContentProps } from './types';
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import type { TabContentProps } from './types';
 export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => ReactElement | null;

package/ui/Blocks/Tabs/Tabs.d.ts

@@ -1,2 +1,2 @@
-import { TabsProps } from './types';
-export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt }: TabsProps) => JSX.Element;
+import type { TabsProps } from './types';
+export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt, minTabWidth }: TabsProps) => JSX.Element;

package/ui/Blocks/Tabs/Tabs.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
-import { Text } from '../../Elements/Text';
 import { Icon } from '../../Elements/Icon';
+import { Text } from '../../Elements/Text';
+import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
 var Tab = function (_a) {
-    var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;
+    var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch, minWidth = _a.minWidth;
     var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount, disabled = tabDefinition.disabled;
     var handleOnClick = useCallback(function () {
         onTabSwitch(value);
     }, [onTabSwitch, value]);
-    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 || (badgeCount && badgeCount > 0) && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
+    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 ||
+                    (badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) })))] }) }));
 };
 export var Tabs = function (_a) {
-    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt;
+    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt, minTabWidth = _a.minTabWidth;
     return (_jsx(TabPanel, { "$mb": mb, "$mt": mt, children: tabsDefinition.map(function (item, index) {
-            return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
+            return (_jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, minWidth: minTabWidth, onTabSwitch: onTabSwitch }, index));
         }) }));
 };

package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -2,7 +2,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt }: import("../types").TabsProps) => JSX.Element;
+    component: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt, minTabWidth }: import("../types").TabsProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };

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

@@ -5,6 +5,7 @@ export declare const RoundedWrap: import("styled-components").StyledComponent<"d
 export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     active: boolean;
     disabled?: boolean | undefined;
+    minWidth?: string | string[] | undefined;
 }, never>;
 export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $mb?: string | undefined;

package/ui/Blocks/Tabs/styles.js

@@ -7,10 +7,13 @@ export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1
 export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n"])));
 export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"], ["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"])), th.color('lightGray7'));
 var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
-export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 8px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: 100px;\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: 120px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 8px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: 100px;\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: 120px;\n  }\n"])), function (_a) {
+export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ", ";\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ", ";\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'auto' : 'pointer');
 }, th.color('gray'), function (_a) {
+    var minWidth = _a.minWidth;
+    return minWidth ? (Array.isArray(minWidth) ? minWidth[0] : minWidth) : '100px';
+}, function (_a) {
     var disabled = _a.disabled;
     return th.color(disabled ? 'gray' : 'typoPrimary');
 }, function (_a) {
@@ -19,6 +22,9 @@ export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTempla
 }, function (_a) {
     var active = _a.active;
     return (active ? activeTab : '');
+}, function (_a) {
+    var minWidth = _a.minWidth;
+    return minWidth ? (Array.isArray(minWidth) ? minWidth[1] : minWidth) : '120px';
 });
 export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), function (_a) {
     var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;

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

@@ -12,12 +12,14 @@ export type TabsProps = {
     onTabSwitch: (tab: number) => void;
     mb?: string;
     mt?: string;
+    minTabWidth?: string | string[];
 };
 export type TabElementProps = {
     tabDefinition: TabDefinition;
     value: number;
     isActive: boolean;
     onTabSwitch: (tab: number) => void;
+    minWidth?: string | string[];
 };
 export type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
     activeTab: number;

package/ui/Elements/CheckedCircle/index.d.ts

@@ -1,7 +1,2 @@
 import { type FC } from 'react';
-type CheckedCircleProps = {
-    checked?: boolean;
-    color?: string;
-};
-export declare const CheckedCircle: FC<CheckedCircleProps>;
-export {};
+export declare const CheckedCircle: FC;

package/ui/Elements/CheckedCircle/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Icon from '../Icon';
 import { CheckedCircleContainer } from './styles';
-export var CheckedCircle = function (_a) {
-    var _b = _a.checked, checked = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'red1' : _c;
-    return _jsx(CheckedCircleContainer, { color: color, children: checked && _jsx(Icon, { icon: "check", size: "12px" }) });
+export var CheckedCircle = function () {
+    return (_jsx(CheckedCircleContainer, { children: _jsx(Icon, { icon: "check", size: "12px" }) }));
 };

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -2,16 +2,10 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<{
-        checked?: boolean | undefined;
-        color?: string | undefined;
-    }>;
+    component: import("react").FC;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Checked: Story;
-export declare const CheckedGreen: Story;
-export declare const Unchecked: Story;

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.js

@@ -9,19 +9,3 @@ export default meta;
 export var Default = {
     args: {}
 };
-export var Checked = {
-    args: {
-        checked: true
-    }
-};
-export var CheckedGreen = {
-    args: {
-        checked: true,
-        color: 'green60'
-    }
-};
-export var Unchecked = {
-    args: {
-        checked: false
-    }
-};

package/ui/Elements/CheckedCircle/styles.d.ts

@@ -1,3 +1 @@
-export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    color: string;
-}, never>;
+export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Elements/CheckedCircle/styles.js

@@ -3,11 +3,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"])), function (_a) {
-    var color = _a.color;
-    return th.color(color);
-}, function (_a) {
-    var color = _a.color;
-    return th.color(color);
-});
+export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"])), th.color('red1'), th.color('red1'));
 var templateObject_1;