@mailstep/design-system 0.8.48 → 0.8.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.48",
+  "version": "0.8.50",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -40,10 +40,10 @@
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-docs": "10.2.8",
-    "@storybook/addon-links": "10.2.8",
-    "@storybook/react-webpack5": "10.2.8",
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "10.4.2",
+    "@storybook/addon-links": "10.4.2",
+    "@storybook/react-webpack5": "10.4.2",
     "@svgr/rollup": "^8.0.1",
     "@swc/core": "^1.15.30",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -73,7 +73,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "10.2.8",
+    "eslint-plugin-storybook": "10.4.2",
     "faker": "^5.1.0",
     "husky": "^9.1.7",
     "immer": "^9.0.19",
@@ -96,7 +96,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "10.2.8",
+    "storybook": "10.4.2",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",

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

@@ -4,6 +4,7 @@ type ItemType = {
     title: string | React.ReactElement;
     onClick: () => void;
     link?: string;
+    disabled?: boolean;
 };
 export type Props = {
     items: ItemType[];

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

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        children: React.ReactNode;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,16 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: FC<{
+        parentRef: React.MutableRefObject<HTMLDivElement | null | undefined>;
+        onClose?: () => void;
+        children: React.ReactNode;
+        placement?: import("@popperjs/core").Placement;
+        wrapper?: import("styled-components").StyledComponent<any, any>;
+        ignoreClickOutsideClosest?: string;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;

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

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: import("react").NamedExoticComponent<import("../DatePicker").DatePickerType>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;
+export declare const WithTime: FC;
+export declare const Disabled: FC;

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -16,6 +16,11 @@ const StyledLink = styled$1(Link)`
     background-color: bgLightGray1;
     border-radius: 6px;
   }
+  ${({ $disabled }) => $disabled && css`
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: not-allowed;
+    `}
   ${({ $isActive }) => $isActive && css`
     background-color: red1;
     color: white;
@@ -32,23 +37,31 @@ const StyledLink = styled$1(Link)`
 `}
 `;
 const MenuItem = ({ item, ItemComponent, onClose }) => {
-	const { onClick, link, hasSeparator, name, autoClose } = item;
+	const { onClick, link, hasSeparator, name, autoClose, disabled } = item;
+	const isActive = link === useLocation().pathname;
+	const onClickCallback = useCallback((e) => {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		if (onClick) {
+			e.preventDefault();
+			onClick();
+		}
+		if (autoClose && onClose) setTimeout(() => {
+			onClose();
+		}, 200);
+	}, [
+		autoClose,
+		disabled,
+		onClick,
+		onClose
+	]);
 	return /* @__PURE__ */ jsx(StyledLink, {
-		to: link,
-		$isActive: link === useLocation().pathname,
-		onClick: useCallback((e) => {
-			if (onClick) {
-				e.preventDefault();
-				onClick();
-			}
-			if (autoClose && onClose) setTimeout(() => {
-				onClose();
-			}, 200);
-		}, [
-			autoClose,
-			onClick,
-			onClose
-		]),
+		to: disabled ? void 0 : link,
+		$isActive: isActive,
+		$disabled: !!disabled,
+		onClick: onClickCallback,
 		$hasSeparator: !!hasSeparator,
 		"data-cy": name,
 		size: "inherit",

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

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: <T extends import("../types").Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import("../types").DropdownMenuProps<T>) => import("react").ReactElement;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;
+export declare const WithCounts: FC;

package/ui/Elements/DropdownMenu/types.d.ts

@@ -11,6 +11,7 @@ export type DefaultItem = {
     hidden?: boolean;
     count?: number;
     autoClose?: boolean;
+    disabled?: boolean;
 };
 export type Item = {
     link?: string | Pathname;
@@ -19,6 +20,7 @@ export type Item = {
     name?: string;
     autoClose?: boolean;
     hidden?: boolean;
+    disabled?: boolean;
 };
 export type MenuItemProps<ItemType extends Item> = {
     item: ItemType;

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

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        label: string | import("react").ReactNode;
+        appearance?: import("../../Button").AppearanceValue;
+        variant?: import("../../Button/types").VariantValue;
+        options: import("../DropdownSelect").DropdownSelectItem[];
+        showChevron?: boolean;
+        onSelect?: (value: import("../DropdownSelect").DropdownSelectItem["value"]) => void;
+        icon?: import("react").ReactNode;
+        disabled?: boolean;
+        ButtonComponent?: React.FC;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutChevron: Story;
+export declare const Disabled: Story;

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-export type FlagAppearanceType = 'neutralBold' | 'neutralSubtle' | 'blueBold' | 'blueSubtle' | 'tealBold' | 'tealSubtle' | 'greenBold' | 'greenSubtle' | 'orangeBold' | 'orangeSubtle' | 'yellowBold' | 'yellowSubtle' | 'pinkBold' | 'pinkSubtle' | 'purpleBold' | 'purpleSubtle' | 'redBold' | 'redSubtle';
+export type FlagAppearanceType = 'neutralBold' | 'neutralMedium' | 'neutralSubtle' | 'blueBold' | 'blueSubtle' | 'tealBold' | 'tealSubtle' | 'greenBold' | 'greenSubtle' | 'orangeBold' | 'orangeSubtle' | 'yellowBold' | 'yellowSubtle' | 'pinkBold' | 'pinkSubtle' | 'purpleBold' | 'purpleSubtle' | 'redBold' | 'redSubtle';
 export declare const flagAppearanceToColorMap: {
     neutralBold: string;
+    neutralMedium: string;
     neutralSubtle: string;
     blueBold: string;
     blueSubtle: string;
@@ -22,6 +23,7 @@ export declare const flagAppearanceToColorMap: {
 };
 export declare const flagAppearanceToFontColorMap: {
     neutralBold: string;
+    neutralMedium: string;
     neutralSubtle: string;
     blueBold: string;
     blueSubtle: string;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -48,6 +48,7 @@ const OverflowWrap = styled$1.span`
 `;
 const flagAppearanceToColorMap = {
 	neutralBold: "neutral300",
+	neutralMedium: "#D2D8DF",
 	neutralSubtle: "bgLightGray2",
 	blueBold: "blue70",
 	blueSubtle: "blue20",
@@ -68,6 +69,7 @@ const flagAppearanceToColorMap = {
 };
 const flagAppearanceToFontColorMap = {
 	neutralBold: "white",
+	neutralMedium: "#22394E",
 	neutralSubtle: "#22394E",
 	blueBold: "#ffffff",
 	blueSubtle: "blue80",

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

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        children: React.ReactNode;
+        appearance: import("../HighlightBox").FlagAppearanceType;
+        size?: "default" | "small" | "wide" | "fitContent";
+        className?: string;
+        cursor?: string;
+        prefix?: string;
+    }>;
+    tags: string[];
+    argTypes: {
+        appearance: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Subtle: Story;
+export declare const Small: Story;
+export declare const Wide: Story;
+export declare const FitContent: Story;
+export declare const AllAppearances: Story;

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

@@ -18,7 +18,6 @@ declare const meta: {
     }>;
     tags: string[];
     argTypes: {};
-    decorators: never[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: FC<{
+        children?: import("react").ReactNode;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;

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

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("styled-components").StyledComponent<typeof import("react-router-dom").Link, import("@xstyled/styled-components").Theme, import("../SimpleLink").Props, never>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Decorated: Story;
+export declare const Disabled: Story;
+export declare const External: Story;

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

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: FC<import("../SingleSelect").Props>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;
+export declare const Searchable: FC;

package/ui/Forms/TextArea/TextArea.d.ts

@@ -15,6 +15,7 @@ export type Props = {
     icon?: string;
     rows?: HTMLTextAreaElement['rows'];
     Footer?: ReactNode;
+    placeholder?: string;
 };
 declare const TextArea: FC<Props>;
 export default TextArea;