@mailstep/design-system 0.8.47 → 0.8.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.47",
+  "version": "0.8.48",
   "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.3",
-    "@storybook/addon-docs": "10.4.2",
-    "@storybook/addon-links": "10.4.2",
-    "@storybook/react-webpack5": "10.4.2",
+    "@storybook/addon-designs": "^11.1.2",
+    "@storybook/addon-docs": "10.2.8",
+    "@storybook/addon-links": "10.2.8",
+    "@storybook/react-webpack5": "10.2.8",
     "@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.4.2",
+    "eslint-plugin-storybook": "10.2.8",
     "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.4.2",
+    "storybook": "10.2.8",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",

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

@@ -1,8 +1,7 @@
 import React from 'react';
-export type FlagAppearanceType = 'neutralBold' | 'neutralMedium' | 'neutralSubtle' | 'blueBold' | 'blueSubtle' | 'tealBold' | 'tealSubtle' | 'greenBold' | 'greenSubtle' | 'orangeBold' | 'orangeSubtle' | 'yellowBold' | 'yellowSubtle' | 'pinkBold' | 'pinkSubtle' | 'purpleBold' | 'purpleSubtle' | 'redBold' | 'redSubtle';
+export type FlagAppearanceType = 'neutralBold' | '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;
@@ -23,7 +22,6 @@ 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,7 +48,6 @@ const OverflowWrap = styled$1.span`
 `;
 const flagAppearanceToColorMap = {
 	neutralBold: "neutral300",
-	neutralMedium: "#D2D8DF",
 	neutralSubtle: "bgLightGray2",
 	blueBold: "blue70",
 	blueSubtle: "blue20",
@@ -69,7 +68,6 @@ const flagAppearanceToColorMap = {
 };
 const flagAppearanceToFontColorMap = {
 	neutralBold: "white",
-	neutralMedium: "#22394E",
 	neutralSubtle: "#22394E",
 	blueBold: "#ffffff",
 	blueSubtle: "blue80",

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

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

package/ui/Elements/Select/Select.js

@@ -5,7 +5,7 @@ import "../Label/index.js";
 import SpaceAround_default from "../SpaceAround/index.js";
 import { StyledAsyncSelect, StyledReactSelect, Wrapper } from "./styles.js";
 import { useStylesAndComponents } from "./themes/index.js";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
@@ -22,9 +22,41 @@ const loadingMessage = () => i18n._({
 const Select = ({ label, name, value = "", options = emptyOptions, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround = false, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions = false, showSelectAllButton = false, shortValues = true, shortVariant = "block", style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, onIconClick, title, ...passTroughProps }) => {
 	const isAsync = !!loadOptions;
 	if (showSelectAllButton && !isMulti) console.error("CheckboxSelect incompatible props");
-	const setAllOptions = useCallback(({ options }) => {
-		onChange?.(options || []);
-	}, [onChange, options]);
+	const localGetOptionValue = useMemo(() => getOptionValue || ((option) => option?.value), [getOptionValue]);
+	const availableOptionsByValue = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const option of [...defaultOptions || [], ...options || []]) map.set(localGetOptionValue(option), option);
+		return map;
+	}, [
+		defaultOptions,
+		options,
+		localGetOptionValue
+	]);
+	const selectedHistoryRef = useRef(/* @__PURE__ */ new Map());
+	const resolveOption = useCallback((optionValue) => availableOptionsByValue.get(optionValue) || selectedHistoryRef.current.get(optionValue), [availableOptionsByValue]);
+	let selectedOption = null;
+	if (Array.isArray(value)) {
+		const resolved = value.map(resolveOption).filter((option) => Boolean(option));
+		selectedOption = resolved.length ? resolved : null;
+	} else if (value !== void 0) selectedOption = resolveOption(value) || null;
+	const handleChange = useCallback((newValue) => {
+		(Array.isArray(newValue) ? newValue : newValue ? [newValue] : []).forEach((option) => option && selectedHistoryRef.current.set(localGetOptionValue(option), option));
+		onChange?.(newValue);
+	}, [onChange, localGetOptionValue]);
+	const setAllOptions = useCallback(({ options: optionsToAdd }) => {
+		const merged = [...Array.isArray(selectedOption) ? selectedOption : selectedOption ? [selectedOption] : []];
+		const visibleOptions = optionsToAdd || [];
+		for (const option of visibleOptions) {
+			const optionValue = localGetOptionValue(option);
+			if (!merged.some((selected) => localGetOptionValue(selected) === optionValue)) merged.push(resolveOption(optionValue) || option);
+		}
+		handleChange(merged);
+	}, [
+		handleChange,
+		selectedOption,
+		localGetOptionValue,
+		resolveOption
+	]);
 	const unsetAllOptions = useCallback(() => {
 		if (typeof onChange === "function") onChange?.(emptyOptions);
 	}, [onChange]);
@@ -32,12 +64,6 @@ const Select = ({ label, name, value = "", options = emptyOptions, defaultOption
 	const modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
 	const [customComponents, customTheme, customStyles] = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton);
 	const RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
-	let selectedOption;
-	const localGetOptionValue = useMemo(() => getOptionValue || ((option) => option?.value), [getOptionValue]);
-	if (Array.isArray(value)) {
-		selectedOption = (defaultOptions || options).filter((option) => value.includes(localGetOptionValue(option)));
-		selectedOption = selectedOption?.length ? selectedOption : null;
-	} else if (value !== void 0) selectedOption = (defaultOptions || options).find((option) => localGetOptionValue(option) === value) || null;
 	const theme = useTheme();
 	const handleLoadOptions = useMemo(() => {
 		return loadOptions ? async (fulltext) => await loadOptions(fulltext) : void 0;
@@ -56,7 +82,7 @@ const Select = ({ label, name, value = "", options = emptyOptions, defaultOption
 			loadOptions: handleLoadOptions,
 			defaultOptions,
 			value: selectedOption,
-			onChange,
+			onChange: handleChange,
 			onBlur,
 			isDisabled: disabled || isLoading,
 			isLoading,

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

@@ -1,12 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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/stories/DropdownMenu.stories.d.ts

@@ -1,10 +0,0 @@
-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/DropdownSelect/stories/DropdownSelect.stories.d.ts

@@ -1,22 +0,0 @@
-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/stories/HighlightBox.stories.d.ts

@@ -1,31 +0,0 @@
-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/Portal/stories/Portal.stories.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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;