@mailstep/design-system 0.6.79 → 0.6.80-beta.0

package/package.json

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

package/ui/Blocks/ImageList/ImageList.js

@@ -18,12 +18,12 @@ import { ImageElement } from './components/ImageElement';
 import { x } from '@xstyled/styled-components';
 import { ImageListContainer } from './styles';
 export var ImageList = function (_a) {
-    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled;
+    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, onImageClick = _a.onImageClick, 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;
     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), onOpenLightBox: onOpenLightBox(index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                    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: onImageClick || 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,7 +2,7 @@ import { type FC } from 'react';
 interface ImageElementProps {
     label?: string;
     onImageRemove?: () => void;
-    onOpenLightBox: () => void;
+    onClick: () => void;
     imageUrl: string | undefined;
     isDisabled?: boolean;
 }

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

@@ -4,8 +4,8 @@ import { ImageTag } from '../ImageTag';
 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, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
+    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onClick = _a.onClick, imageUrl = _a.imageUrl;
     if (!imageUrl)
         return null;
-    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 })] }));
+    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: onClick }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
 };

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

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

package/ui/index.es.js

@@ -50505,7 +50505,7 @@ const jEe = q.img`
   label: e,
   onImageRemove: t,
   isDisabled: r,
-  onOpenLightBox: n,
+  onClick: n,
   imageUrl: i
 }) => i ? /* @__PURE__ */ g.jsxs(it.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", h: "100px", children: [
   /* @__PURE__ */ g.jsx(jEe, { src: i, alt: "", width: "85px", height: "85px", onClick: n }),
@@ -50524,25 +50524,26 @@ const jEe = q.img`
 `, iTe = ({
   onImageUpload: e,
   onImageRemove: t,
-  lightBoxAction: r,
-  lightBoxActionTitle: n,
-  images: i,
-  isDisabled: o
+  onImageClick: r,
+  lightBoxAction: n,
+  lightBoxActionTitle: i,
+  images: o,
+  isDisabled: l
 }) => {
-  const l = We(), {
-    events: c
-  } = eSe(l, {
-    isMounted: !!(i != null && i.length)
+  const c = We(), {
+    events: u
+  } = eSe(c, {
+    isMounted: !!(o != null && o.length)
   }), {
-    isLightBoxOpen: u,
-    onCloseLightBox: f,
-    onOpenLightBox: p,
-    lightBoxData: A
+    isLightBoxOpen: f,
+    onCloseLightBox: p,
+    onOpenLightBox: A,
+    lightBoxData: v
   } = REe();
   return /* @__PURE__ */ g.jsxs(it.div, { display: "flex", alignItems: "flex-end", children: [
-    /* @__PURE__ */ g.jsx(VEe, { onImageUpload: e, isDisabled: o }),
-    i && /* @__PURE__ */ g.jsx(KEe, { ref: l, ...c, children: i.map((v, m) => /* @__PURE__ */ g.jsx(QEe, { imageUrl: v.smallUrl ?? v.url, onImageRemove: t == null ? void 0 : t(v.id), onOpenLightBox: p(m), isDisabled: o, label: v == null ? void 0 : v.label }, v.id ?? m)) }),
-    /* @__PURE__ */ g.jsx(NEe, { initialSlide: A == null ? void 0 : A.initialSlide, isLightBoxOpen: u, onCloseLightBox: f, lightBoxAction: r, lightBoxActionTitle: n, images: i })
+    /* @__PURE__ */ g.jsx(VEe, { onImageUpload: e, isDisabled: l }),
+    o && /* @__PURE__ */ g.jsx(KEe, { ref: c, ...u, children: o.map((m, y) => /* @__PURE__ */ g.jsx(QEe, { imageUrl: m.smallUrl ?? m.url, onImageRemove: t == null ? void 0 : t(m.id), onClick: r || A(y), isDisabled: l, label: m == null ? void 0 : m.label }, m.id ?? y)) }),
+    /* @__PURE__ */ g.jsx(NEe, { initialSlide: v == null ? void 0 : v.initialSlide, isLightBoxOpen: f, onCloseLightBox: p, lightBoxAction: n, lightBoxActionTitle: i, images: o })
   ] });
 }, qEe = q.div`
   cursor: pointer;

package/ui/index.umd.js

@@ -3322,7 +3322,7 @@ ${q.current.stack}
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s linear;
-`,XIe=({onImageRemove:e,isDisabled:t})=>g.jsx(JIe,{onClick:t?void 0:e,isDisabled:t,children:g.jsx(xt,{icon:"close",size:"22px",fill:t?"magenta60":"red1"})}),QIe=({label:e,onImageRemove:t,isDisabled:r,onOpenLightBox:n,imageUrl:i})=>i?g.jsxs(tt.div,{position:"relative",pr:"15px",pt:"15px",w:"100px",h:"100px",children:[g.jsx(jIe,{src:i,alt:"",width:"85px",height:"85px",onClick:n}),t&&g.jsx(XIe,{onImageRemove:t,isDisabled:r}),g.jsx(YIe,{label:e})]}):null,KIe=$.div`
+`,XIe=({onImageRemove:e,isDisabled:t})=>g.jsx(JIe,{onClick:t?void 0:e,isDisabled:t,children:g.jsx(xt,{icon:"close",size:"22px",fill:t?"magenta60":"red1"})}),QIe=({label:e,onImageRemove:t,isDisabled:r,onClick:n,imageUrl:i})=>i?g.jsxs(tt.div,{position:"relative",pr:"15px",pt:"15px",w:"100px",h:"100px",children:[g.jsx(jIe,{src:i,alt:"",width:"85px",height:"85px",onClick:n}),t&&g.jsx(XIe,{onImageRemove:t,isDisabled:r}),g.jsx(YIe,{label:e})]}):null,KIe=$.div`
   display: flex;
   overflow-x: scroll;
   -ms-overflow-style: none;
@@ -3332,7 +3332,7 @@ ${q.current.stack}
   &::-webkit-scrollbar {
     display: none;
   }
-`,qIe=({onImageUpload:e,onImageRemove:t,lightBoxAction:r,lightBoxActionTitle:n,images:i,isDisabled:o})=>{const l=I.useRef(),{events:u}=rEe(l,{isMounted:!!(i!=null&&i.length)}),{isLightBoxOpen:c,onCloseLightBox:f,onOpenLightBox:A,lightBoxData:p}=ZV();return g.jsxs(tt.div,{display:"flex",alignItems:"flex-end",children:[g.jsx(VIe,{onImageUpload:e,isDisabled:o}),i&&g.jsx(KIe,{ref:l,...u,children:i.map((v,m)=>g.jsx(QIe,{imageUrl:v.smallUrl??v.url,onImageRemove:t==null?void 0:t(v.id),onOpenLightBox:A(m),isDisabled:o,label:v==null?void 0:v.label},v.id??m))}),g.jsx(UV,{initialSlide:p==null?void 0:p.initialSlide,isLightBoxOpen:c,onCloseLightBox:f,lightBoxAction:r,lightBoxActionTitle:n,images:i})]})},$Ie=$.div`
+`,qIe=({onImageUpload:e,onImageRemove:t,onImageClick:r,lightBoxAction:n,lightBoxActionTitle:i,images:o,isDisabled:l})=>{const u=I.useRef(),{events:c}=rEe(u,{isMounted:!!(o!=null&&o.length)}),{isLightBoxOpen:f,onCloseLightBox:A,onOpenLightBox:p,lightBoxData:v}=ZV();return g.jsxs(tt.div,{display:"flex",alignItems:"flex-end",children:[g.jsx(VIe,{onImageUpload:e,isDisabled:l}),o&&g.jsx(KIe,{ref:u,...c,children:o.map((m,y)=>g.jsx(QIe,{imageUrl:m.smallUrl??m.url,onImageRemove:t==null?void 0:t(m.id),onClick:r||p(y),isDisabled:l,label:m==null?void 0:m.label},m.id??y))}),g.jsx(UV,{initialSlide:v==null?void 0:v.initialSlide,isLightBoxOpen:f,onCloseLightBox:A,lightBoxAction:n,lightBoxActionTitle:i,images:o})]})},$Ie=$.div`
   cursor: pointer;
   font-size: 16px;
   display: flex;