@mailstep/design-system 0.6.77-beta.0 → 0.6.78

package/package.json

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

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

@@ -15,6 +15,7 @@ export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
     initialOptions?: Option[];
     loadOptions?: (fulltext: string, byId: boolean) => Promise<Option[]>;
     form?: any;
+    shouldReloadOptions?: boolean;
 };
 declare const SingleSelect: (props: Props) => JSX.Element;
 export default SingleSelect;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -81,8 +81,8 @@ var getOptionValue = function (selectedOption) {
 };
 var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
 var SingleSelect = function (props) {
-    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _a = props.asyncLoadMinChars, asyncLoadMinChars = _a === void 0 ? 0 : _a, isLocked = props.isLocked, _b = props.lockedText, lockedText = _b === void 0 ? i18n._({ id: 'components.dropdown.notReact', message: 'Select related values first...' }) : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) : _c, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption;
-    var _d = useState(false), isCreating = _d[0], setIsCreating = _d[1];
+    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _a = props.asyncLoadMinChars, asyncLoadMinChars = _a === void 0 ? 0 : _a, isLocked = props.isLocked, _b = props.lockedText, lockedText = _b === void 0 ? i18n._({ id: 'components.dropdown.notReact', message: 'Select related values first...' }) : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) : _c, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption, _d = props.shouldReloadOptions, shouldReloadOptions = _d === void 0 ? false : _d;
+    var _e = useState(false), isCreating = _e[0], setIsCreating = _e[1];
     var asAsync = !!loadOptions || !!onCreateOption;
     var noOptionsMessage = useCallback(function (inputValue) {
         return loadOptions && inputValue.length < asyncLoadMinChars
@@ -111,13 +111,13 @@ var SingleSelect = function (props) {
             return loadOptions(inputValue, false);
         }
     }, [onCreateOption, loadOptions, asyncLoadMinChars, options]);
-    var _e = useState(options || []), loadedDefaultOptions = _e[0], setLoadedDefaultOptions = _e[1];
+    var _f = useState(options || []), loadedDefaultOptions = _f[0], setLoadedDefaultOptions = _f[1];
     useEffect(function () {
         if (loadOptions && preload && !props.value)
             loadOptions('', false).then(setLoadedDefaultOptions);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [loadOptions]); // this is intentional
-    var _f = useState(null), storedSelectedOption = _f[0], setStoredSelectedOption = _f[1];
+    var _g = useState(null), storedSelectedOption = _g[0], setStoredSelectedOption = _g[1];
     useEffect(function () {
         if (initialOptions && initialOptions.length) {
             var selectedOption = initialOptions.find(function (option) { return option.value == props.value; }) || null;
@@ -129,6 +129,11 @@ var SingleSelect = function (props) {
         // ignored because of props.value, this only finds option for initial value
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initialOptions, setStoredSelectedOption]);
+    useEffect(function () {
+        if (shouldReloadOptions) {
+            setLoadedDefaultOptions(options || []);
+        }
+    }, [options]);
     var handleChange = useCallback(function (option) { return __awaiter(void 0, void 0, void 0, function () {
         var value, newOption;
         var _a, _b, _c, _d;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ closeToast, title, text, type, autoClose }: import("../Toast").CustomToastProps) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const Warning: Story;

package/ui/Elements/Toast/stories/Toast.stories.js

@@ -0,0 +1,36 @@
+import Toast from '../Toast';
+var meta = {
+    title: 'Elements/Toast',
+    component: Toast,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Info = {
+    args: {
+        type: 'info',
+        title: 'Title of info toast',
+        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
+    }
+};
+export var Success = {
+    args: {
+        type: 'success',
+        title: 'Title of success toast',
+        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
+    }
+};
+export var Error = {
+    args: {
+        type: 'error',
+        title: 'Title of error toast',
+        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
+    }
+};
+export var Warning = {
+    args: {
+        type: 'warning',
+        title: 'Title of warning toast',
+        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
+    }
+};

package/ui/Elements/Toast/styles.js

@@ -6,7 +6,7 @@ import styled, { css, keyframes, th } from '@xstyled/styled-components';
 export var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"])), th('colors.blue2'));
 export var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"])), th('colors.gray1'));
 export var ContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-export var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+export var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
 var timerAnimation = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    to {\n       transform: scaleX(0)\n    }\n"], ["\n    to {\n       transform: scaleX(0)\n    }\n"])));
 var after = function (autoClose) { return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " ", "ms linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " ", "ms linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"])), timerAnimation, autoClose, th.radius('lg'), th.color('lightGray5')); };
 export var Container = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"])), th.radius('lg'), th.shadow('cornerDialogShadow'), '(max-width: 576px)', function (_a) {