@mailstep/design-system 0.6.45 → 0.6.47-beta.0

package/package.json

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

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

@@ -65,7 +65,7 @@ var useManageColumn = function (_a) {
             var j = (orderValues || []).indexOf(col2.name);
             return i > j ? 1 : i < j ? -1 : 0;
         });
-    }, [columnConfig, columns]);
+    }, [columnConfig, columnsConfigOptions, columns]);
     var displayColumnsDefinitions = useMemo(function () { return getSortedColumns(columnsOrderValue, false); }, [columnsOrderValue, columns]);
     var manageColumnsFormDefinitions = useMemo(function () { return getSortedColumns(updatedColumnsOrder, true); }, [updatedColumnsOrder]);
     var handleDragEnd = useCallback(function (isManageModal) {

package/ui/Blocks/Popover/index.d.ts

@@ -3,7 +3,7 @@ import { Placement } from '@popperjs/core';
 import { StyledComponent } from 'styled-components';
 type DropdownMenuProps = {
     parentRef: React.MutableRefObject<HTMLDivElement | null | undefined>;
-    onClose: () => void;
+    onClose?: () => void;
     children: React.ReactChild;
     placement?: Placement;
     wrapper?: StyledComponent<any, any>;

package/ui/Elements/Tooltip/Tooltip.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Placement } from '@popperjs/core';
+export type Props = {
+    children?: React.ReactNode;
+    placement?: Placement;
+    title?: string | JSX.Element;
+    subtitle?: string | JSX.Element;
+};
+declare const Tooltip: ({ children, placement, title, subtitle }: Props) => JSX.Element;
+export default Tooltip;

package/ui/Elements/Tooltip/Tooltip.js

@@ -0,0 +1,21 @@
+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 { Paragraph4 } from '../Typography';
+import { useRef, useState } from 'react';
+import Popover from '../../Blocks/Popover';
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
+var TooltipWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding: 8px 10px;\n  margin-top: 4px;\n  border-radius: 8px;\n  box-shadow: tooltipShadow;\n  gap: 2px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding: 8px 10px;\n  margin-top: 4px;\n  border-radius: 8px;\n  box-shadow: tooltipShadow;\n  gap: 2px;\n"])));
+var Tooltip = function (_a) {
+    var children = _a.children, placement = _a.placement, title = _a.title, subtitle = _a.subtitle;
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    var ref = useRef(null);
+    var handleMouseEnter = function () { return setVisible(true); };
+    var handleMouseLeave = function () { return setVisible(false); };
+    return (_jsxs(Container, { ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, visible && (_jsx(Popover, { parentRef: ref, placement: placement !== null && placement !== void 0 ? placement : 'bottom', children: _jsxs(TooltipWrapper, { children: [title && (_jsx(Paragraph4, { mt: 1, mb: 1, variant: "bold", children: title })), subtitle && (_jsx(Paragraph4, { mt: 1, mb: 1, children: subtitle }))] }) }))] }));
+};
+export default Tooltip;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,3 @@
+import Tooltip from './Tooltip';
+export { Tooltip };
+export default Tooltip;

package/ui/Elements/Tooltip/index.js

@@ -0,0 +1,3 @@
+import Tooltip from './Tooltip';
+export { Tooltip };
+export default Tooltip;

package/ui/Elements/Tooltip/stories/Tooltip.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, placement, title, subtitle }: import("../Tooltip").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/ui/Elements/Tooltip/stories/Tooltip.stories.js

@@ -0,0 +1,15 @@
+import Tooltip from '../Tooltip';
+var meta = {
+    title: 'Elements/Tooltip',
+    component: Tooltip,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        children: '😀',
+        title: 'title',
+        subtitle: 'subtitle',
+    },
+};

package/ui/ThemeProvider/themes/default.d.ts

@@ -127,12 +127,12 @@ declare const defaultTheme: {
         cardShadow: string;
         smooth: string;
         dialogShadow: string;
-        tooltipShadow: string;
         headerShadow: string;
         headerShadowB: string;
         headerShadowNotifications: string;
         cornerDialogShadow: string;
         gridShadow: string;
+        tooltipShadow: string;
     };
     space: number[];
     transitions: {

package/ui/ThemeProvider/themes/default.js

@@ -129,12 +129,12 @@ var defaultTheme = {
         smooth: '0px 4px 25px 0px #0000001a',
         // redesign:
         dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
-        tooltipShadow: '0px 1px 4px 0 #B1B8C3',
         headerShadow: '1px 2px 3px #00000029',
         headerShadowB: '1px 1px 3px #00000029',
         headerShadowNotifications: '1px 1px 2px #00000029',
         cornerDialogShadow: '1px 1px 3px 1px #00000029',
         gridShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.12)',
+        tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.10)',
     },
     space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
     transitions: {

package/ui/ThemeProvider/themes/index.d.ts

@@ -128,12 +128,12 @@ declare const themes: {
             cardShadow: string;
             smooth: string;
             dialogShadow: string;
-            tooltipShadow: string;
             headerShadow: string;
             headerShadowB: string;
             headerShadowNotifications: string;
             cornerDialogShadow: string;
             gridShadow: string;
+            tooltipShadow: string;
         };
         space: number[];
         transitions: {