@gxpl/sdk 0.0.15 → 0.0.17

package/lib/sdk/types/article/Item.d.ts

@@ -193,10 +193,21 @@ export interface StickyParams {
     from: number;
     to?: number;
 }
-export interface Link {
+export type Link = UrlLink | ClickLink;
+interface UrlLink {
     url: string;
     target: string;
 }
+interface UrlLink {
+    url: string;
+    target: string;
+}
+interface ClickLink {
+    value: string;
+    animation: 'fade' | 'slide' | 'reveal';
+    duration: number;
+    direction: 'north' | 'west' | 'south' | 'east';
+}
 export type VideoItem = Item<ArticleItemType.Video>;
 export type RectangleItem = Item<ArticleItemType.Rectangle>;
 export type ImageItem = Item<ArticleItemType.Image>;

package/lib/sdk-nextjs/components/items/CodeEmbedItem/CodeEmbedItem.js

@@ -16,7 +16,7 @@ const useCodeEmbedItem_1 = require("./useCodeEmbedItem");
 const FontFaceGenerator_1 = require("../../../../sdk/FontFaceGenerator/FontFaceGenerator");
 const useExemplary_1 = require("../../../common/useExemplary");
 const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const id = (0, react_1.useId)();
     const { fonts } = (0, useCntrlContext_1.useCntrlContext)();
     const fontGoogleTags = fonts === null || fonts === void 0 ? void 0 : fonts.google;
@@ -71,7 +71,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign({ transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.params.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign({ transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_h = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _h !== void 0 ? _h : 'none' }), ref: setRef, children: item.params.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: {
                         border: 'unset'
                     } })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-wrapper-${item.id} {

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundItem.js

@@ -14,7 +14,7 @@ const style_1 = __importDefault(require("styled-jsx/style"));
 const CompoundChild_1 = require("./CompoundChild");
 const useCompoundItem_1 = require("./useCompoundItem");
 const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const id = (0, react_1.useId)();
     const { items } = item;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -28,10 +28,10 @@ const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: {
                         opacity,
                         transform: `rotate(${angle}deg)`,
-                        transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none'
+                        transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none'
                     }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .compound-${item.id} {
           overflow: ${item.params.overflow};

package/lib/sdk-nextjs/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -23,7 +23,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const LinkWrapper_1 = require("../LinkWrapper");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
@@ -110,7 +110,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
             }
         });
     }, [interactionCtrl, vimeoPlayer]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), onMouseEnter: () => {
                     if (!vimeoPlayer || params.play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
@@ -118,7 +118,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                     if (!vimeoPlayer || params.play !== 'on-hover')
                         return;
                     vimeoPlayer.pause();
-                }, children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = params.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                }, children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_f = params.coverUrl) !== null && _f !== void 0 ? _f : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -135,7 +135,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
                             left: '0'
                         } })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embed-video", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: {
                             borderRadius: `${radius * 100}vw`,
-                            transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none'
+                            transition: (_g = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _g !== void 0 ? _g : 'none'
                         } })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;

package/lib/sdk-nextjs/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -15,7 +15,7 @@ const useYouTubeIframeApi_1 = require("../../../utils/Youtube/useYouTubeIframeAp
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const id = (0, react_1.useId)();
     const { url } = item.params;
     const params = item.params;
@@ -108,7 +108,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
             }
         });
     }, [interactionCtrl, player]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
                     if (!player || params.play !== 'on-hover')
                         return;
                     player.playVideo();
@@ -116,7 +116,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
                     if (!player || params.play !== 'on-hover')
                         return;
                     player.pauseVideo();
-                }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = params.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
+                }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: [params.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_f = params.coverUrl) !== null && _f !== void 0 ? _f : '', style: {
                             display: isCoverVisible ? 'block' : 'none',
                             cursor: 'pointer',
                             position: 'absolute',
@@ -126,7 +126,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_g = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;

package/lib/sdk-nextjs/components/items/FileItem/ImageItem.js

@@ -18,7 +18,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const useExemplary_1 = require("../../../common/useExemplary");
 const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -65,7 +65,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: hasGLEffect && isFXAllowed
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign({ opacity, transform: `rotate(${angle}deg)` }, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasGLEffect && isFXAllowed
                         ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
                         : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.params.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {

package/lib/sdk-nextjs/components/items/FileItem/VideoItem.js

@@ -19,7 +19,7 @@ const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
 const useExemplary_1 = require("../../../common/useExemplary");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const id = (0, react_1.useId)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const [isVideoPlaying, setIsVideoPlaying] = (0, react_1.useState)(false);
@@ -91,13 +91,13 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         observer.observe(ref);
         return () => observer.disconnect();
     }, [videoRef, ref, userPaused, isVideoInteracted]);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { link: item.link, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
                     opacity,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`,
                     willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
-                    transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none'
-                }, children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_r = item.params.coverUrl) !== null && _r !== void 0 ? _r : '', ref: setVideoRef, autoPlay: params.play === 'auto', preload: "auto", onClick: () => {
+                    transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none'
+                }, children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.params.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_p = item.params.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: params.play === 'auto', preload: "auto", onClick: () => {
                                     setIsVideoInteracted(true);
                                 }, muted: params.muted, onPlay: () => {
                                     setIsVideoPlaying(true);
@@ -120,7 +120,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
                                         return;
                                     setIsVideoInteracted(true);
                                     videoRef.play();
-                                }, src: (_s = item.params.coverUrl) !== null && _s !== void 0 ? _s : '', className: `video-cover-${item.id}`, onClick: () => {
+                                }, src: (_q = item.params.coverUrl) !== null && _q !== void 0 ? _q : '', className: `video-cover-${item.id}`, onClick: () => {
                                     if (!videoRef)
                                         return;
                                     setIsVideoInteracted(true);

package/lib/sdk-nextjs/components/items/GroupItem/GroupItem.js

@@ -15,7 +15,7 @@ const useGroupItem_1 = require("./useGroupItem");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const CompoundChild_1 = require("../CompoundItem/CompoundChild");
 const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const { items } = item;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -30,7 +30,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/sdk-nextjs/components/items/LinkWrapper.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactElement, ReactNode } from 'react';
+import { Link } from '../../../sdk/types/article/Item';
 interface Props {
-    url?: string;
     children: ReactElement | ReactNode[];
-    target?: string;
+    link?: Link;
 }
 export declare const LinkWrapper: React.FC<Props>;
 export {};

package/lib/sdk-nextjs/components/items/LinkWrapper.js

@@ -2,10 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LinkWrapper = ({ url, children, target }) => {
-    const validUrl = url && buildValidUrl(url);
-    const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
-    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+const TransitionMachineContext_1 = require("../../provider/TransitionMachineContext");
+const LinkWrapper = ({ link, children }) => {
+    const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
+    const validUrl = link && 'url' in link ? buildValidUrl(link.url) : 'javascript:void(0)';
+    const targetParams = link && 'target' in link && link.target === '_blank' ? { target: link.target, rel: 'noreferrer' } : {};
+    const handleGoToScene = () => {
+        if (!actorRef || !link || !('value' in link))
+            return;
+        actorRef.send({
+            type: 'TRANSITION_TRIGGER',
+            transition: link.animation,
+            to: link.value,
+            direction: link.direction
+        });
+    };
+    if (validUrl) {
+        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children })));
+    }
+    if (link && 'value' in link) {
+        return ((0, jsx_runtime_1.jsx)("a", { onClick: handleGoToScene, role: "button", children: children }));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.LinkWrapper = LinkWrapper;
 function buildValidUrl(url) {

package/lib/sdk-nextjs/components/items/RectangleItem/RectangleItem.js

@@ -15,7 +15,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const getFill_1 = require("../../../utils/getFill");
 const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
 const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
     const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -40,13 +40,13 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const stroke = strokeFill
         ? (_h = (0, getFill_1.getFill)(strokeFill)) !== null && _h !== void 0 ? _h : 'transparent'
         : 'transparent';
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
                         backgroundPosition: 'center',
                         backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
                         backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
                     } : {})) : {})), { borderRadius: `${radius * 100}vw` }), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
-                        : {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children: itemFill && itemFill.map((fill, i) => {
+                        : {})), { transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), children: itemFill && itemFill.map((fill, i) => {
                         var _a, _b;
                         const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
                         const value = stateFillLayer

package/lib/sdk-nextjs/utils/RichTextConverter/RichTextConverter.js

@@ -13,7 +13,7 @@ exports.FontStyles = {
 };
 class RichTextConverter {
     toHtml(richText, exemplary) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { text, blocks = [] } = richText.params;
         const root = [];
         const styleRules = [];
@@ -72,7 +72,7 @@ class RichTextConverter {
                         offset = entity.end;
                     }
                     if (entity.link) {
-                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: entity.link, target: entity.target, children: entityKids }, entity.start));
+                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: { url: entity.link, target: (_e = entity.target) !== null && _e !== void 0 ? _e : '_self', animation: (_f = entity.animation) !== null && _f !== void 0 ? _f : 'fade', direction: (_g = entity.direction) !== null && _g !== void 0 ? _g : 'north' }, children: entityKids }, entity.start));
                         continue;
                     }
                     kids.push(...entityKids);
@@ -81,7 +81,7 @@ class RichTextConverter {
                     kids.push(sliceSymbols(content, offset));
                 }
                 for (const styles of group) {
-                    const entitiesGroups = (_e = this.groupEntities(entities, styles)) !== null && _e !== void 0 ? _e : [];
+                    const entitiesGroups = (_h = this.groupEntities(entities, styles)) !== null && _h !== void 0 ? _h : [];
                     for (const entitiesGroup of entitiesGroups) {
                         if (!entitiesGroup.stylesGroup)
                             continue;
@@ -147,7 +147,7 @@ class RichTextConverter {
         return styleGroups;
     }
     groupEntities(entities, styleGroups) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const entitiesGroups = [];
         if (!entities.length && !styleGroups)
             return;
@@ -167,7 +167,7 @@ class RichTextConverter {
                 const end = dividers[i + 1];
                 const entity = entities.find(e => e.start === start);
                 entitiesGroups.push(Object.assign({ stylesGroup: [], start,
-                    end }, (entity && { link: (_b = (_a = entity.data) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '', target: (_d = (_c = entity.data) === null || _c === void 0 ? void 0 : _c.target) !== null && _d !== void 0 ? _d : '_self' })));
+                    end }, (entity && { link: (_b = (_a = entity.data) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '', target: (_d = (_c = entity.data) === null || _c === void 0 ? void 0 : _c.target) !== null && _d !== void 0 ? _d : '_self', animation: (_f = (_e = entity.data) === null || _e === void 0 ? void 0 : _e.animation) !== null && _f !== void 0 ? _f : 'fade', direction: (_h = (_g = entity.data) === null || _g === void 0 ? void 0 : _g.direction) !== null && _h !== void 0 ? _h : 'north' })));
             }
             return entitiesGroups;
         }
@@ -194,7 +194,7 @@ class RichTextConverter {
             const end = entityDividers[i + 1];
             const entity = entities.find(e => e.start === start);
             entitiesGroups.push(Object.assign({ stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end), start,
-                end }, (entity && { link: (_f = (_e = entity.data) === null || _e === void 0 ? void 0 : _e.url) !== null && _f !== void 0 ? _f : '', target: (_h = (_g = entity.data) === null || _g === void 0 ? void 0 : _g.target) !== null && _h !== void 0 ? _h : '_self' })));
+                end }, (entity && { link: (_k = (_j = entity.data) === null || _j === void 0 ? void 0 : _j.url) !== null && _k !== void 0 ? _k : '', target: (_m = (_l = entity.data) === null || _l === void 0 ? void 0 : _l.target) !== null && _m !== void 0 ? _m : '_self', animation: (_p = (_o = entity.data) === null || _o === void 0 ? void 0 : _o.animation) !== null && _p !== void 0 ? _p : 'fade', direction: (_r = (_q = entity.data) === null || _q === void 0 ? void 0 : _q.direction) !== null && _r !== void 0 ? _r : 'north' })));
         }
         return entitiesGroups;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",