@mailstep/design-system 0.6.80-beta.3 → 0.6.81-beta.0

package/package.json

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

package/ui/Blocks/ImageList/ImageList.js

@@ -12,23 +12,18 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { useDraggable } from 'react-use-draggable-scroll';
-import Icon from '../../Elements/Icon/Icon';
 import LightBox, { useLightBox } from '../LightBox';
 import { AddPhoto } from './components/AddPhoto';
 import { ImageElement } from './components/ImageElement';
-import { useControls } from './hooks/useControls';
-import { useOnElementClick } from './hooks/useOnElementClick';
 import { x } from '@xstyled/styled-components';
-import { ImageListContainer, Control } from './styles';
+import { ImageListContainer } from './styles';
 export var ImageList = function (_a) {
-    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, onImageClick = _a.onImageClick, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled, selectable = _a.selectable, max = _a.max;
+    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled;
     var ref = useRef();
     var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
     var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
-    var _c = useOnElementClick({ onImageClick: onImageClick, onOpenLightBox: onOpenLightBox, selectable: selectable }), handleOnClick = _c.handleOnClick, selected = _c.selected;
-    var _d = useControls({ max: max, total: images === null || images === void 0 ? void 0 : images.length }), hasControls = _d.hasControls, position = _d.position, moveList = _d.moveList;
-    return (_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), hasControls && (_jsx(Control, { onClick: moveList(-1), isLeft: true, isDisabled: position === 0, children: _jsx(Icon, { icon: "lessThen", size: "24px" }) })), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
+    return (_jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
                     var _a, _b;
-                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onClick: handleOnClick(item, index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label, selected: index === selected, visible: !max || (index >= position && index < position + max) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
-                }) }))), hasControls && (_jsx(Control, { onClick: moveList(1), isDisabled: !!images && !!max && position >= (images === null || images === void 0 ? void 0 : images.length) - max, children: _jsx(Icon, { icon: "greaterThan", size: "24px" }) })), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
+                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
 };

package/ui/Blocks/ImageList/components/ImageElement/index.d.ts

@@ -2,11 +2,9 @@ import { type FC } from 'react';
 interface ImageElementProps {
     label?: string;
     onImageRemove?: () => void;
-    onClick: () => void;
+    onOpenLightBox: () => void;
     imageUrl: string | undefined;
     isDisabled?: boolean;
-    selected?: boolean;
-    visible: boolean;
 }
 export declare const ImageElement: FC<ImageElementProps>;
 export {};

package/ui/Blocks/ImageList/components/ImageElement/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseButton } from '../CloseButton';
+import { Image } from './styles';
 import { ImageTag } from '../ImageTag';
-import { Image, ImageWrapper } from './styles';
+import { CloseButton } from '../CloseButton';
+import { x } from '@xstyled/styled-components';
 export var ImageElement = function (_a) {
-    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onClick = _a.onClick, imageUrl = _a.imageUrl, selected = _a.selected, visible = _a.visible;
+    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
     if (!imageUrl)
         return null;
-    return (_jsxs(ImageWrapper, { visible: visible, hasImageRemove: !!onImageRemove, children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onClick, selected: selected }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
+    return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", h: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
 };

package/ui/Blocks/ImageList/components/ImageElement/styles.d.ts

@@ -1,8 +1,2 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {
-    selected?: boolean | undefined;
-}, never>;
-export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    visible: boolean;
-    hasImageRemove: boolean;
-}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/ImageList/components/ImageElement/styles.js

@@ -2,21 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
+import styled, { th } from '@xstyled/styled-components';
 export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"], ["\n  border-radius: ", ";\n  border: ", ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"])), th.radius('lg'), function (_a) {
-    var selected = _a.selected;
-    return (selected ? "3px solid" : '0');
-});
-export var ImageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: 100px;\n  display: ", ";\n  user-select: none;\n"], ["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: 100px;\n  display: ", ";\n  user-select: none;\n"])), function (_a) {
-    var hasImageRemove = _a.hasImageRemove;
-    return (hasImageRemove ? '15px' : '0');
-}, function (_a) {
-    var hasImageRemove = _a.hasImageRemove;
-    return (hasImageRemove ? '15px' : '0');
-}, function (_a) {
-    var visible = _a.visible;
-    return (visible ? 'block' : 'none');
-});
-var templateObject_1, templateObject_2, templateObject_3;
+export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), th.radius('lg'));
+var templateObject_1, templateObject_2;

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

@@ -11,5 +11,3 @@ type Story = StoryObj<typeof meta>;
 export declare const ImageListDefault: Story;
 export declare const ImageListDisabled: Story;
 export declare const ImageListWithItemDescription: Story;
-export declare const ImageListSelectable: Story;
-export declare const ImageListLimited: Story;

package/ui/Blocks/ImageList/stories/ImageList.stories.js

@@ -18,14 +18,8 @@ var meta = {
 };
 export default meta;
 var images = [
-    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/200/300' },
-    { id: '2', smallUrl: 'https://picsum.photos/200/400', url: 'https://picsum.photos/200/400' },
-    { id: '3', smallUrl: 'https://picsum.photos/200/500', url: 'https://picsum.photos/200/500' },
-    { id: '4', smallUrl: 'https://picsum.photos/200/700', url: 'https://picsum.photos/200/700' },
-    { id: '5', smallUrl: 'https://picsum.photos/200/800', url: 'https://picsum.photos/200/800' },
-    { id: '6', smallUrl: 'https://picsum.photos/100/300', url: 'https://picsum.photos/100/300' },
-    { id: '7', smallUrl: 'https://picsum.photos/100/400', url: 'https://picsum.photos/100/400' },
-    { id: '8', smallUrl: 'https://picsum.photos/100/500', url: 'https://picsum.photos/100/500' },
+    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
+    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/400/400' },
 ];
 export var ImageListDefault = {
     args: {
@@ -45,16 +39,3 @@ export var ImageListWithItemDescription = {
         images: images.map(function (img) { return (__assign(__assign({}, img), { label: 'Lorem Ipsum', date: '24.12.2024', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum' })); }),
     },
 };
-export var ImageListSelectable = {
-    args: {
-        images: images,
-        selectable: true,
-    },
-};
-export var ImageListLimited = {
-    args: {
-        images: images,
-        selectable: true,
-        max: 3,
-    },
-};

package/ui/Blocks/ImageList/styles.d.ts

@@ -1,5 +1 @@
 export declare const ImageListContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const Control: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    isLeft?: boolean | undefined;
-    isDisabled: boolean;
-}, never>;

package/ui/Blocks/ImageList/styles.js

@@ -4,14 +4,4 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from '@xstyled/styled-components';
 export var ImageListContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  margin-right: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  width: 24px;\n  margin-right: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
-    var isLeft = _a.isLeft;
-    return (isLeft ? '15px' : 0);
-}, function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 'gray' : 'black');
-}, function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 'gray' : 'red1');
-});
-var templateObject_1, templateObject_2;
+var templateObject_1;

package/ui/Blocks/ImageList/types.d.ts

@@ -8,10 +8,7 @@ export interface ImageListProps {
     images: ImageData[] | undefined;
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     onImageRemove?: (id?: string) => () => void;
-    onImageClick?: (item: ImageData) => void;
     lightBoxAction?: (id?: string) => () => Promise<void>;
     lightBoxActionTitle?: string;
     isDisabled?: boolean;
-    selectable?: boolean;
-    max?: number;
 }

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

@@ -5,7 +5,6 @@ export type TextProps = {
     fontSize?: string | number;
     fontWeight?: string;
     fontFamily?: string;
-    textAlign?: string;
     variant?: TextVariant;
     mt?: string | number;
     mr?: string | number;

package/ui/Forms/Input/Input.js

@@ -43,7 +43,7 @@ export var Input = function (_a) {
     var ref = (inputRef || internalRef);
     useEffect(function () {
         var _a;
-        forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());
+        (forceFocus || autoFocus) && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());
     }, [disabled, forceFocus, isLoading]);
     var handleBlur = useCallback(function (event) {
         var _a, _b, _c, _d, _e;