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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.79",
+  "version": "0.6.80-beta.1",
   "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 ? onImageClick(item) : 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?: (item?: ImageData) => () => 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 ? r(m) : 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;