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

package/package.json

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

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

@@ -9,12 +9,15 @@ export var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemp
     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) {
+export var ImageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: ", ";\n  display: ", ";\n  user-select: none;\n"], ["\n  position: relative;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100px;\n  height: ", ";\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 hasImageRemove = _a.hasImageRemove;
+    return (hasImageRemove ? '100px' : '85px');
 }, function (_a) {
     var visible = _a.visible;
     return (visible ? 'block' : 'none');

package/ui/Blocks/ImageList/hooks/useOnElementClick.d.ts

@@ -1,7 +1,7 @@
 import { type ImageData } from '../../LightBox';
 type Props = {
     onImageClick?: (item: ImageData) => void;
-    onOpenLightBox: (index: number) => void;
+    onOpenLightBox: (index: number) => () => void;
     selectable?: boolean;
 };
 type HookType = (props: Props) => {

package/ui/Blocks/ImageList/hooks/useOnElementClick.js

@@ -4,10 +4,12 @@ export var useOnElementClick = function (_a) {
     var _b = useState(-1), selected = _b[0], setSelected = _b[1];
     var handleOnClick = useCallback(function (item, index) { return function () {
         if (onImageClick) {
+            console.log('test 2');
             onImageClick(item);
         }
         else {
-            onOpenLightBox(index);
+            console.log('test 3');
+            onOpenLightBox(index)();
         }
         if (selectable) {
             setSelected(function (selected) { return selected !== index ? index : -1; });

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

@@ -53,8 +53,11 @@ export var ImageListSelectable = {
 };
 export var ImageListLimited = {
     args: {
-        images: images,
+        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' },
+        ],
         selectable: true,
-        max: 3,
+        max: 1,
     },
 };

package/ui/index.es.js

@@ -50516,7 +50516,9 @@ const QEe = K.img`
   hasImageRemove: e
 }) => e ? "15px" : "0"};
   width: 100px;
-  height: 100px;
+  height: ${({
+  hasImageRemove: e
+}) => e ? "100px" : "85px"};
   display: ${({
   visible: e
 }) => e ? "block" : "none"};
@@ -50553,7 +50555,7 @@ const QEe = K.img`
   const [n, i] = Be(-1);
   return {
     handleOnClick: we((l, c) => () => {
-      e ? e(l) : t(c), r && i((u) => u !== c ? c : -1);
+      e ? (console.log("test 2"), e(l)) : (console.log("test 3"), t(c)()), r && i((u) => u !== c ? c : -1);
     }, [e, t]),
     selected: n
   };

package/ui/index.umd.js

@@ -3331,10 +3331,10 @@ ${$.current.stack}
   padding-right: ${({hasImageRemove:e})=>e?"15px":"0"};
   padding-top: ${({hasImageRemove:e})=>e?"15px":"0"};
   width: 100px;
-  height: 100px;
+  height: ${({hasImageRemove:e})=>e?"100px":"85px"};
   display: ${({visible:e})=>e?"block":"none"};
   user-select: none;
-`,qIe=({label:e,onImageRemove:t,isDisabled:r,onClick:n,imageUrl:i,selected:o,visible:l})=>i?g.jsxs(KIe,{visible:l,hasImageRemove:!!t,children:[g.jsx(QIe,{src:i,alt:"",width:"85px",height:"85px",onClick:n,selected:o}),t&&g.jsx(HIe,{onImageRemove:t,isDisabled:r}),g.jsx(XIe,{label:e})]}):null,$Ie=({max:e,total:t=0})=>{const[r,n]=I.useState(0);return{moveList:I.useCallback(o=>()=>{e&&n(l=>Math.min(Math.max(l+o,0),t-e))},[]),position:r,hasControls:!!e&&t>e}},eke=({onImageClick:e,onOpenLightBox:t,selectable:r})=>{const[n,i]=I.useState(-1);return{handleOnClick:I.useCallback((l,c)=>()=>{e?e(l):t(c),r&&i(u=>u!==c?c:-1)},[e,t]),selected:n}},tke=q.div`
+`,qIe=({label:e,onImageRemove:t,isDisabled:r,onClick:n,imageUrl:i,selected:o,visible:l})=>i?g.jsxs(KIe,{visible:l,hasImageRemove:!!t,children:[g.jsx(QIe,{src:i,alt:"",width:"85px",height:"85px",onClick:n,selected:o}),t&&g.jsx(HIe,{onImageRemove:t,isDisabled:r}),g.jsx(XIe,{label:e})]}):null,$Ie=({max:e,total:t=0})=>{const[r,n]=I.useState(0);return{moveList:I.useCallback(o=>()=>{e&&n(l=>Math.min(Math.max(l+o,0),t-e))},[]),position:r,hasControls:!!e&&t>e}},eke=({onImageClick:e,onOpenLightBox:t,selectable:r})=>{const[n,i]=I.useState(-1);return{handleOnClick:I.useCallback((l,c)=>()=>{e?(console.log("test 2"),e(l)):(console.log("test 3"),t(c)()),r&&i(u=>u!==c?c:-1)},[e,t]),selected:n}},tke=q.div`
   display: flex;
   overflow-x: scroll;
   -ms-overflow-style: none;