@mailstep/design-system 0.7.57 → 0.7.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.57",
+  "version": "0.7.58",
   "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[];